- {/* Connect to Relay */}
+ {/* Open in Sprout */}
{/* People section */}
diff --git a/web/src/features/repos/ui/PubkeyAvatar.tsx b/web/src/features/repos/ui/PubkeyAvatar.tsx
new file mode 100644
index 000000000..eb6fa5bfb
--- /dev/null
+++ b/web/src/features/repos/ui/PubkeyAvatar.tsx
@@ -0,0 +1,37 @@
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/shared/ui/tooltip";
+
+/** Simple hash of a hex pubkey to a hue value (0-360). */
+function pubkeyToHue(hex: string): number {
+ let hash = 0;
+ for (let i = 0; i < hex.length; i++) {
+ hash = (hash * 31 + hex.charCodeAt(i)) | 0;
+ }
+ return Math.abs(hash) % 360;
+}
+
+export function PubkeyAvatar({
+ pubkey,
+ size = "md",
+}: {
+ pubkey: string;
+ size?: "sm" | "md";
+}) {
+ const hue = pubkeyToHue(pubkey);
+ const sizeClasses = size === "sm" ? "h-6 w-6 text-[10px]" : "h-8 w-8 text-xs";
+
+ return (
+
+
+
+ {pubkey.slice(0, 2)}
+
+
+
+ {pubkey}
+
+
+ );
+}
diff --git a/web/src/features/repos/ui/RepoDetailPage.tsx b/web/src/features/repos/ui/RepoDetailPage.tsx
new file mode 100644
index 000000000..3b5142e60
--- /dev/null
+++ b/web/src/features/repos/ui/RepoDetailPage.tsx
@@ -0,0 +1,199 @@
+import {
+ ArrowLeft,
+ BookMarked,
+ Check,
+ Copy,
+ ExternalLink,
+ Users,
+} from "lucide-react";
+import { useEffect, useState } from "react";
+import { Link, useParams } from "@tanstack/react-router";
+import { toast } from "sonner";
+
+import { Badge } from "@/shared/ui/badge";
+import { Button } from "@/shared/ui/button";
+import { useRepo } from "../use-repos";
+import { ConnectButton } from "./ConnectButton";
+import { PubkeyAvatar } from "./PubkeyAvatar";
+
+function relativeTime(unix: number): string {
+ const now = Date.now();
+ const diff = now - unix * 1000;
+ const seconds = Math.floor(diff / 1000);
+ const minutes = Math.floor(seconds / 60);
+ const hours = Math.floor(minutes / 60);
+ const days = Math.floor(hours / 24);
+
+ if (days > 30) {
+ const months = Math.floor(days / 30);
+ return months === 1 ? "1 month ago" : `${months} months ago`;
+ }
+ if (days > 0) return days === 1 ? "1 day ago" : `${days} days ago`;
+ if (hours > 0) return hours === 1 ? "1 hour ago" : `${hours} hours ago`;
+ if (minutes > 0)
+ return minutes === 1 ? "1 minute ago" : `${minutes} minutes ago`;
+ return "just now";
+}
+
+function CopyableUrl({ url }: { url: string }) {
+ const [copied, setCopied] = useState(false);
+
+ async function handleCopy() {
+ try {
+ await navigator.clipboard.writeText(url);
+ setCopied(true);
+ toast.success("Copied to clipboard");
+ setTimeout(() => setCopied(false), 2000);
+ } catch {
+ toast.error("Failed to copy to clipboard");
+ }
+ }
+
+ return (
+
+ {url}
+
+ {copied ? (
+
+
+ );
+}
+
+function DetailSkeleton() {
+ return (
+
+ );
+}
+
+export function RepoDetailPage() {
+ const { repoId } = useParams({ from: "/repos/$repoId" });
+ const { data: repo, isLoading, error } = useRepo(repoId);
+
+ useEffect(() => {
+ if (error) {
+ toast.error("Failed to load repository", {
+ description: error.message,
+ });
+ }
+ }, [error]);
+
+ if (isLoading) return
;
+
+ if (!repo) {
+ return (
+
+
+
+ Back to repositories
+
+
+
+
Repository not found
+
+ This repository may have been removed or doesn't exist on this
+ relay.
+
+
+
+ );
+ }
+
+ return (
+
+ {/* Back link */}
+
+
+ Back to repositories
+
+
+ {/* Header */}
+
+
+
{repo.name}
+ Public
+
+ {repo.description && (
+
+ {repo.description}
+
+ )}
+
+ Updated {relativeTime(repo.createdAt)}
+
+
+
+ {/* Clone URLs */}
+ {repo.cloneUrls.length > 0 && (
+
+
Clone
+
+ {repo.cloneUrls.map((url) => (
+
+
+ )}
+
+ {/* External link */}
+ {repo.webUrl && (
+
+ )}
+
+ {/* Owner & Contributors */}
+
+
+
+
+
+ {repo.contributors
+ .filter((c) => c !== repo.owner)
+ .map((c) => (
+
+ ))}
+
+
+
+ {/* Open in Sprout CTA */}
+
+
+ Open this relay in the Sprout desktop app to push code and
+ collaborate.
+
+
+
+
+ );
+}
diff --git a/web/src/features/repos/ui/RepoListItem.tsx b/web/src/features/repos/ui/RepoListItem.tsx
index 8ee16c4bf..341b54f63 100644
--- a/web/src/features/repos/ui/RepoListItem.tsx
+++ b/web/src/features/repos/ui/RepoListItem.tsx
@@ -1,4 +1,5 @@
import { BookMarked } from "lucide-react";
+import { Link } from "@tanstack/react-router";
import { Badge } from "@/shared/ui/badge";
import { Tooltip, TooltipContent, TooltipTrigger } from "@/shared/ui/tooltip";
@@ -34,18 +35,13 @@ export function RepoListItem({ repo }: { repo: Repo }) {
{/* Row 1: Name + badge */}
- {repo.webUrl ? (
-
- {repo.name}
-
- ) : (
-
{repo.name}
- )}
+
+ {repo.name}
+
Public
diff --git a/web/src/features/repos/ui/ReposPage.tsx b/web/src/features/repos/ui/ReposPage.tsx
index 0b96ca95d..0cdadc108 100644
--- a/web/src/features/repos/ui/ReposPage.tsx
+++ b/web/src/features/repos/ui/ReposPage.tsx
@@ -1,4 +1,4 @@
-import { BookMarked, GitBranch } from "lucide-react";
+import { BookMarked, GitBranch, Sprout } from "lucide-react";
import { toast } from "sonner";
import { useEffect, useMemo, useState } from "react";
@@ -27,21 +27,34 @@ function ListItemSkeleton() {
);
}
-function EmptyState({ hasSearch }: { hasSearch: boolean }) {
+function SearchEmptyState() {
return (
-
- {hasSearch ? "No matching repositories" : "No repositories yet"}
-
+
No matching repositories
- {hasSearch
- ? "Try adjusting your search term."
- : "Repositories published to this relay will appear here. Push a git repo using the Sprout desktop app to get started."}
+ Try adjusting your search term.
- {!hasSearch &&
}
+
+ );
+}
+
+function RelayEmptyState() {
+ return (
+
+
+
+
+ This relay is empty
+
+
+ Repositories pushed to this relay will show up here. Open this relay in
+ the Sprout desktop app to start pushing code.
+
+
);
}
@@ -105,17 +118,7 @@ export function ReposPage() {
}
if (!repos || repos.length === 0) {
- return (
-
-
-
-
-
-
-
- );
+ return
;
}
return (
@@ -159,7 +162,7 @@ export function ReposPage() {
))}
) : (
-
0} />
+