added

components/branch-selector.tsx

@@ -0,0 +1,86 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { GitBranch, Check, ChevronDown } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { cn } from "@/lib/utils";
+
+export function BranchSelector({
+  branches,
+  currentBranch,
+  username,
+  repoName,
+  basePath = "",
+}: {
+  branches: string[];
+  currentBranch: string;
+  username: string;
+  repoName: string;
+  basePath?: string;
+}) {
+  const router = useRouter();
+  const [open, setOpen] = useState(false);
+
+  function handleSelect(branch: string) {
+    setOpen(false);
+    if (branch === currentBranch) return;
+
+    if (basePath) {
+      router.push(`/${username}/${repoName}/tree/${branch}/${basePath}`);
+    } else {
+      router.push(`/${username}/${repoName}/tree/${branch}`);
+    }
+  }
+
+  if (branches.length === 0) {
+    return (
+      <Button variant="outline" size="sm" disabled className="gap-2">
+        <GitBranch className="h-4 w-4" />
+        {currentBranch}
+      </Button>
+    );
+  }
+
+  return (
+    <DropdownMenu open={open} onOpenChange={setOpen}>
+      <DropdownMenuTrigger asChild>
+        <Button variant="outline" size="sm" className="gap-2">
+          <GitBranch className="h-4 w-4" />
+          <span className="max-w-[120px] truncate">{currentBranch}</span>
+          <ChevronDown className="h-3 w-3 opacity-50" />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="start" className="w-56">
+        <div className="px-2 py-1.5 text-xs font-medium text-muted-foreground">
+          Switch branches
+        </div>
+        {branches.map((branch) => (
+          <DropdownMenuItem
+            key={branch}
+            onClick={() => handleSelect(branch)}
+            className={cn(
+              "cursor-pointer gap-2",
+              branch === currentBranch && "bg-accent/10"
+            )}
+          >
+            <Check
+              className={cn(
+                "h-4 w-4",
+                branch === currentBranch ? "opacity-100" : "opacity-0"
+              )}
+            />
+            <span className="truncate">{branch}</span>
+          </DropdownMenuItem>
+        ))}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
+

components/header.tsx

@@ -2,7 +2,7 @@
 
 import Link from "next/link";
 import { useRouter } from "next/navigation";
-import { GitBranch, Plus, LogOut, User, ChevronDown, Settings } from "lucide-react";
+import { Plus, LogOut, User, ChevronDown, Settings, Compass } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
@@ -21,10 +21,18 @@ export function Header() {
   return (
     <header className="sticky top-0 z-50 w-full border-b border-border bg-[#010409]">
       <div className="container flex h-16 items-center justify-between">
-        <div className="flex items-center gap-4">
+        <div className="flex items-center gap-6">
           <Link href="/" className="flex items-center gap-2.5 group">
             <span className="font-bold text-xl tracking-tight hidden sm:inline">gitbruv</span>
           </Link>
+          <nav className="hidden md:flex items-center gap-1">
+            <Button variant="ghost" size="sm" asChild className="text-muted-foreground hover:text-foreground">
+              <Link href="/explore" className="gap-2">
+                <Compass className="h-4 w-4" />
+                Explore
+              </Link>
+            </Button>
+          </nav>
         </div>
 
         <div className="flex items-center gap-2">

components/repo-list.tsx

@@ -2,7 +2,7 @@
 
 import Link from "next/link";
 import { formatDistanceToNow } from "date-fns";
-import { Lock, Globe } from "lucide-react";
+import { Lock, Globe, Star } from "lucide-react";
 
 type Repository = {
   id: string;
@@ -10,6 +10,7 @@ type Repository = {
   description: string | null;
   visibility: "public" | "private";
   updatedAt: Date;
+  starCount?: number;
 };
 
 export function RepoList({
@@ -59,9 +60,17 @@ export function RepoList({
                 </p>
               )}
             </div>
-            <p className="text-xs text-muted-foreground shrink-0 pt-1">
-              {formatDistanceToNow(new Date(repo.updatedAt), { addSuffix: true })}
-            </p>
+            <div className="flex flex-col items-end gap-1 shrink-0 pt-1">
+              {typeof repo.starCount === "number" && repo.starCount > 0 && (
+                <div className="flex items-center gap-1 text-muted-foreground">
+                  <Star className="h-3.5 w-3.5" />
+                  <span className="text-xs">{repo.starCount}</span>
+                </div>
+              )}
+              <p className="text-xs text-muted-foreground">
+                {formatDistanceToNow(new Date(repo.updatedAt), { addSuffix: true })}
+              </p>
+            </div>
           </div>
         </Link>
       ))}

components/star-button.tsx

@@ -0,0 +1,49 @@
+"use client";
+
+import { useState, useTransition } from "react";
+import { Star } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { toggleStar } from "@/actions/repositories";
+import { cn } from "@/lib/utils";
+
+export function StarButton({
+  repoId,
+  initialStarred,
+  initialCount,
+}: {
+  repoId: string;
+  initialStarred: boolean;
+  initialCount: number;
+}) {
+  const [starred, setStarred] = useState(initialStarred);
+  const [count, setCount] = useState(initialCount);
+  const [isPending, startTransition] = useTransition();
+
+  function handleClick() {
+    startTransition(async () => {
+      try {
+        const result = await toggleStar(repoId);
+        setStarred(result.starred);
+        setCount((c) => (result.starred ? c + 1 : c - 1));
+      } catch {}
+    });
+  }
+
+  return (
+    <Button
+      variant="outline"
+      size="sm"
+      onClick={handleClick}
+      disabled={isPending}
+      className={cn(
+        "gap-2 transition-colors",
+        starred && "bg-accent/10 border-accent/30 text-accent hover:bg-accent/20"
+      )}
+    >
+      <Star className={cn("h-4 w-4", starred && "fill-current")} />
+      <span>{starred ? "Starred" : "Star"}</span>
+      <span className="px-2 py-0.5 rounded bg-secondary text-xs font-medium">{count}</span>
+    </Button>
+  );
+}
+