added

actions/repositories.ts

@@ -1,9 +1,9 @@
 "use server";
 
 import { db } from "@/db";
-import { repositories, users } from "@/db/schema";
+import { repositories, users, stars } from "@/db/schema";
 import { getSession } from "@/lib/session";
-import { eq, and, desc } from "drizzle-orm";
+import { eq, and, desc, count, sql } from "drizzle-orm";
 import { revalidatePath } from "next/cache";
 import git from "isomorphic-git";
 import { createR2Fs, getRepoPrefix } from "@/lib/r2-fs";
@@ -301,3 +301,273 @@ export async function getRepoFile(owner: string, repoName: string, branch: strin
     return null;
   }
 }
+
+export async function toggleStar(repoId: string) {
+  const session = await getSession();
+  if (!session?.user) {
+    throw new Error("Unauthorized");
+  }
+
+  const existing = await db.query.stars.findFirst({
+    where: and(eq(stars.userId, session.user.id), eq(stars.repositoryId, repoId)),
+  });
+
+  if (existing) {
+    await db.delete(stars).where(and(eq(stars.userId, session.user.id), eq(stars.repositoryId, repoId)));
+    return { starred: false };
+  } else {
+    await db.insert(stars).values({
+      userId: session.user.id,
+      repositoryId: repoId,
+    });
+    return { starred: true };
+  }
+}
+
+export async function getStarCount(repoId: string) {
+  const result = await db.select({ count: count() }).from(stars).where(eq(stars.repositoryId, repoId));
+  return result[0]?.count ?? 0;
+}
+
+export async function isStarredByUser(repoId: string) {
+  const session = await getSession();
+  if (!session?.user) {
+    return false;
+  }
+
+  const existing = await db.query.stars.findFirst({
+    where: and(eq(stars.userId, session.user.id), eq(stars.repositoryId, repoId)),
+  });
+
+  return !!existing;
+}
+
+export async function getRepositoryWithStars(owner: string, name: string) {
+  const repo = await getRepository(owner, name);
+  if (!repo) return null;
+
+  const starCount = await getStarCount(repo.id);
+  const starred = await isStarredByUser(repo.id);
+
+  return { ...repo, starCount, starred };
+}
+
+export async function getUserRepositoriesWithStars(username: string) {
+  const repos = await getUserRepositories(username);
+
+  const reposWithStars = await Promise.all(
+    repos.map(async (repo) => {
+      const starCount = await getStarCount(repo.id);
+      return { ...repo, starCount };
+    })
+  );
+
+  return reposWithStars;
+}
+
+export async function updateRepository(
+  repoId: string,
+  data: { name?: string; description?: string; visibility?: "public" | "private" }
+) {
+  const session = await getSession();
+  if (!session?.user) {
+    throw new Error("Unauthorized");
+  }
+
+  const repo = await db.query.repositories.findFirst({
+    where: eq(repositories.id, repoId),
+  });
+
+  if (!repo) {
+    throw new Error("Repository not found");
+  }
+
+  if (repo.ownerId !== session.user.id) {
+    throw new Error("Unauthorized");
+  }
+
+  const oldName = repo.name;
+  let newName = oldName;
+
+  if (data.name && data.name !== oldName) {
+    newName = data.name.toLowerCase().replace(/\s+/g, "-");
+
+    if (!/^[a-zA-Z0-9_.-]+$/.test(newName)) {
+      throw new Error("Invalid repository name");
+    }
+
+    const existing = await db.query.repositories.findFirst({
+      where: and(eq(repositories.ownerId, session.user.id), eq(repositories.name, newName)),
+    });
+
+    if (existing) {
+      throw new Error("Repository with this name already exists");
+    }
+  }
+
+  const [updated] = await db
+    .update(repositories)
+    .set({
+      name: newName,
+      description: data.description !== undefined ? data.description || null : repo.description,
+      visibility: data.visibility || repo.visibility,
+      updatedAt: new Date(),
+    })
+    .where(eq(repositories.id, repoId))
+    .returning();
+
+  const username = (session.user as { username?: string }).username;
+  revalidatePath(`/${username}/${oldName}`);
+  revalidatePath(`/${username}/${newName}`);
+  revalidatePath(`/${username}`);
+  revalidatePath("/");
+
+  return updated;
+}
+
+export async function getRepoBranches(owner: string, repoName: string) {
+  const user = await db.query.users.findFirst({
+    where: eq(users.username, owner),
+  });
+
+  if (!user) {
+    return [];
+  }
+
+  const repoPrefix = getRepoPrefix(user.id, `${repoName}.git`);
+  const fs = createR2Fs(repoPrefix);
+
+  try {
+    const branches = await git.listBranches({ fs, gitdir: "/" });
+    return branches;
+  } catch {
+    return [];
+  }
+}
+
+export async function getRepoCommits(
+  owner: string,
+  repoName: string,
+  branch: string,
+  limit: number = 30,
+  skip: number = 0
+) {
+  const user = await db.query.users.findFirst({
+    where: eq(users.username, owner),
+  });
+
+  if (!user) {
+    return { commits: [], hasMore: false };
+  }
+
+  const repoPrefix = getRepoPrefix(user.id, `${repoName}.git`);
+  const fs = createR2Fs(repoPrefix);
+
+  try {
+    const commits = await git.log({
+      fs,
+      gitdir: "/",
+      ref: branch,
+      depth: skip + limit + 1,
+    });
+
+    const paginatedCommits = commits.slice(skip, skip + limit);
+    const hasMore = commits.length > skip + limit;
+
+    return {
+      commits: paginatedCommits.map((c) => ({
+        oid: c.oid,
+        message: c.commit.message,
+        author: {
+          name: c.commit.author.name,
+          email: c.commit.author.email,
+        },
+        timestamp: c.commit.author.timestamp * 1000,
+      })),
+      hasMore,
+    };
+  } catch {
+    return { commits: [], hasMore: false };
+  }
+}
+
+export async function getRepoCommitCount(owner: string, repoName: string, branch: string) {
+  const user = await db.query.users.findFirst({
+    where: eq(users.username, owner),
+  });
+
+  if (!user) {
+    return 0;
+  }
+
+  const repoPrefix = getRepoPrefix(user.id, `${repoName}.git`);
+  const fs = createR2Fs(repoPrefix);
+
+  try {
+    const commits = await git.log({
+      fs,
+      gitdir: "/",
+      ref: branch,
+    });
+    return commits.length;
+  } catch {
+    return 0;
+  }
+}
+
+export async function getPublicRepositories(
+  sortBy: "stars" | "updated" | "created" = "updated",
+  limit: number = 20,
+  offset: number = 0
+) {
+  const allRepos = await db
+    .select({
+      id: repositories.id,
+      name: repositories.name,
+      description: repositories.description,
+      visibility: repositories.visibility,
+      ownerId: repositories.ownerId,
+      defaultBranch: repositories.defaultBranch,
+      createdAt: repositories.createdAt,
+      updatedAt: repositories.updatedAt,
+      ownerUsername: users.username,
+      ownerName: users.name,
+      ownerImage: users.image,
+      starCount: sql<number>`(SELECT COUNT(*) FROM stars WHERE stars.repository_id = ${repositories.id})`.as("star_count"),
+    })
+    .from(repositories)
+    .innerJoin(users, eq(repositories.ownerId, users.id))
+    .where(eq(repositories.visibility, "public"))
+    .orderBy(
+      sortBy === "stars"
+        ? desc(sql`star_count`)
+        : sortBy === "created"
+        ? desc(repositories.createdAt)
+        : desc(repositories.updatedAt)
+    )
+    .limit(limit + 1)
+    .offset(offset);
+
+  const hasMore = allRepos.length > limit;
+  const repos = allRepos.slice(0, limit);
+
+  return {
+    repos: repos.map((r) => ({
+      id: r.id,
+      name: r.name,
+      description: r.description,
+      visibility: r.visibility as "public" | "private",
+      defaultBranch: r.defaultBranch,
+      createdAt: r.createdAt,
+      updatedAt: r.updatedAt,
+      starCount: Number(r.starCount),
+      owner: {
+        id: r.ownerId,
+        username: r.ownerUsername,
+        name: r.ownerName,
+        image: r.ownerImage,
+      },
+    })),
+    hasMore,
+  };
+}

app/(main)/[username]/[repo]/blob/[...path]/page.tsx

@@ -1,7 +1,8 @@
 import { notFound } from "next/navigation";
 import Link from "next/link";
-import { getRepository, getRepoFile } from "@/actions/repositories";
+import { getRepository, getRepoFile, getRepoBranches } from "@/actions/repositories";
 import { CodeViewer } from "@/components/code-viewer";
+import { BranchSelector } from "@/components/branch-selector";
 import { Badge } from "@/components/ui/badge";
 import { Lock, Globe, ChevronRight, Home, FileCode } from "lucide-react";
 
@@ -42,7 +43,10 @@ export default async function BlobPage({ params }: { params: Promise<{ username:
     notFound();
   }
 
-  const file = await getRepoFile(username, repoName, branch, filePath);
+  const [file, branches] = await Promise.all([
+    getRepoFile(username, repoName, branch, filePath),
+    getRepoBranches(username, repoName),
+  ]);
 
   if (!file) {
     notFound();
@@ -81,7 +85,15 @@ export default async function BlobPage({ params }: { params: Promise<{ username:
       </div>
 
       <div className="border border-border rounded-lg overflow-hidden">
-        <nav className="flex items-center gap-1 px-4 py-2 bg-card border-b border-border text-sm">
+        <div className="flex items-center gap-2 px-4 py-3 bg-card border-b border-border">
+          <BranchSelector
+            branches={branches}
+            currentBranch={branch}
+            username={username}
+            repoName={repoName}
+          />
+        </div>
+        <nav className="flex items-center gap-1 px-4 py-2 bg-muted/30 border-b border-border text-sm">
           <Link href={`/${username}/${repoName}`} className="text-accent hover:underline flex items-center gap-1">
             <Home className="h-4 w-4" />
             {repoName}

app/(main)/[username]/[repo]/commits/[[...branch]]/page.tsx

@@ -0,0 +1,145 @@
+import { notFound } from "next/navigation";
+import Link from "next/link";
+import { getRepository, getRepoCommits, getRepoBranches } from "@/actions/repositories";
+import { BranchSelector } from "@/components/branch-selector";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Avatar, AvatarFallback } from "@/components/ui/avatar";
+import { Lock, Globe, GitCommit, ChevronLeft, ChevronRight } from "lucide-react";
+import { formatDistanceToNow } from "date-fns";
+
+export default async function CommitsPage({
+  params,
+  searchParams,
+}: {
+  params: Promise<{ username: string; repo: string; branch?: string[] }>;
+  searchParams: Promise<{ page?: string }>;
+}) {
+  const { username, repo: repoName, branch: branchSegments } = await params;
+  const { page: pageParam } = await searchParams;
+
+  const repo = await getRepository(username, repoName);
+
+  if (!repo) {
+    notFound();
+  }
+
+  const branch = branchSegments?.[0] || repo.defaultBranch;
+  const page = parseInt(pageParam || "1", 10);
+  const perPage = 30;
+  const skip = (page - 1) * perPage;
+
+  const [{ commits, hasMore }, branches] = await Promise.all([
+    getRepoCommits(username, repoName, branch, perPage, skip),
+    getRepoBranches(username, repoName),
+  ]);
+
+  return (
+    <div className="container px-4 py-6">
+      <div className="flex flex-col lg:flex-row items-start lg:items-center justify-between gap-4 mb-6">
+        <div className="flex items-center gap-2 flex-wrap">
+          <Link href={`/${username}`} className="text-accent hover:underline">
+            <span className="text-xl font-bold">{username}</span>
+          </Link>
+          <span className="text-muted-foreground">/</span>
+          <Link href={`/${username}/${repoName}`} className="text-accent hover:underline">
+            <span className="text-xl font-bold">{repoName}</span>
+          </Link>
+          <Badge variant="secondary" className="text-xs font-normal">
+            {repo.visibility === "private" ? (
+              <>
+                <Lock className="h-3 w-3 mr-1" />
+                Private
+              </>
+            ) : (
+              <>
+                <Globe className="h-3 w-3 mr-1" />
+                Public
+              </>
+            )}
+          </Badge>
+        </div>
+      </div>
+
+      <div className="border border-border rounded-lg overflow-hidden">
+        <div className="flex items-center justify-between gap-4 px-4 py-3 bg-card border-b border-border">
+          <div className="flex items-center gap-3">
+            <BranchSelector
+              branches={branches}
+              currentBranch={branch}
+              username={username}
+              repoName={repoName}
+            />
+            <div className="flex items-center gap-2 text-sm text-muted-foreground">
+              <GitCommit className="h-4 w-4" />
+              <span>Commits</span>
+            </div>
+          </div>
+        </div>
+
+        {commits.length === 0 ? (
+          <div className="p-12 text-center">
+            <GitCommit className="h-12 w-12 mx-auto mb-4 text-muted-foreground" />
+            <h3 className="text-lg font-medium mb-2">No commits yet</h3>
+            <p className="text-muted-foreground">
+              This branch doesn&apos;t have any commits.
+            </p>
+          </div>
+        ) : (
+          <div className="divide-y divide-border">
+            {commits.map((commit) => (
+              <div
+                key={commit.oid}
+                className="flex items-start gap-4 px-4 py-3 hover:bg-muted/30 transition-colors"
+              >
+                <Avatar className="h-8 w-8 mt-0.5">
+                  <AvatarFallback className="text-xs bg-accent/20">
+                    {commit.author.name.charAt(0).toUpperCase()}
+                  </AvatarFallback>
+                </Avatar>
+                <div className="flex-1 min-w-0">
+                  <p className="font-medium truncate">{commit.message.split("\n")[0]}</p>
+                  <div className="flex items-center gap-2 text-sm text-muted-foreground mt-1">
+                    <span className="font-medium text-foreground">{commit.author.name}</span>
+                    <span>committed</span>
+                    <span>
+                      {formatDistanceToNow(new Date(commit.timestamp), { addSuffix: true })}
+                    </span>
+                  </div>
+                </div>
+                <code className="text-xs font-mono bg-muted px-2 py-1 rounded shrink-0">
+                  {commit.oid.slice(0, 7)}
+                </code>
+              </div>
+            ))}
+          </div>
+        )}
+
+        {(page > 1 || hasMore) && (
+          <div className="flex items-center justify-between px-4 py-3 bg-card border-t border-border">
+            <Button variant="outline" size="sm" asChild disabled={page <= 1}>
+              <Link
+                href={`/${username}/${repoName}/commits/${branch}?page=${page - 1}`}
+                className={page <= 1 ? "pointer-events-none opacity-50" : ""}
+              >
+                <ChevronLeft className="h-4 w-4 mr-1" />
+                Newer
+              </Link>
+            </Button>
+            <span className="text-sm text-muted-foreground">Page {page}</span>
+            <Button variant="outline" size="sm" asChild disabled={!hasMore}>
+              <Link
+                href={`/${username}/${repoName}/commits/${branch}?page=${page + 1}`}
+                className={!hasMore ? "pointer-events-none opacity-50" : ""}
+              >
+                Older
+                <ChevronRight className="h-4 w-4 ml-1" />
+              </Link>
+            </Button>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+

app/(main)/[username]/[repo]/page.tsx

@@ -1,23 +1,34 @@
 import { notFound } from "next/navigation";
-import { getRepository, getRepoFileTree, getRepoFile } from "@/actions/repositories";
+import { getRepositoryWithStars, getRepoFileTree, getRepoFile, getRepoBranches, getRepoCommitCount } from "@/actions/repositories";
+import { getSession } from "@/lib/session";
 import { FileTree } from "@/components/file-tree";
 import { CodeViewer } from "@/components/code-viewer";
 import { CloneUrl } from "@/components/clone-url";
+import { StarButton } from "@/components/star-button";
+import { BranchSelector } from "@/components/branch-selector";
 import { Badge } from "@/components/ui/badge";
-import { GitBranch, Lock, Globe, FileCode } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Lock, Globe, FileCode, Settings, GitCommit, GitBranch } from "lucide-react";
 import Link from "next/link";
 import { getPublicServerUrl } from "@/lib/utils";
 
 export default async function RepoPage({ params }: { params: Promise<{ username: string; repo: string }> }) {
   const { username, repo: repoName } = await params;
 
-  const repo = await getRepository(username, repoName);
+  const repo = await getRepositoryWithStars(username, repoName);
 
   if (!repo) {
     notFound();
   }
 
-  const fileTree = await getRepoFileTree(username, repoName, repo.defaultBranch);
+  const session = await getSession();
+  const isOwner = session?.user?.id === repo.ownerId;
+
+  const [fileTree, branches, commitCount] = await Promise.all([
+    getRepoFileTree(username, repoName, repo.defaultBranch),
+    getRepoBranches(username, repoName),
+    getRepoCommitCount(username, repoName, repo.defaultBranch),
+  ]);
   const readmeFile = fileTree?.files.find((f) => f.name.toLowerCase() === "readme.md" && f.type === "blob");
 
   let readmeContent = null;
@@ -51,7 +62,17 @@ export default async function RepoPage({ params }: { params: Promise<{ username:
             )}
           </Badge>
         </div>
-        <CloneUrl username={username} repoName={repo.name} />
+        <div className="flex items-center gap-2">
+          <StarButton repoId={repo.id} initialStarred={repo.starred} initialCount={repo.starCount} />
+          <CloneUrl username={username} repoName={repo.name} />
+          {isOwner && (
+            <Button variant="outline" size="sm" asChild>
+              <Link href={`/${username}/${repo.name}/settings`}>
+                <Settings className="h-4 w-4" />
+              </Link>
+            </Button>
+          )}
+        </div>
       </div>
 
       {repo.description && <p className="text-muted-foreground mb-6">{repo.description}</p>}
@@ -59,9 +80,23 @@ export default async function RepoPage({ params }: { params: Promise<{ username:
       <div className="grid lg:grid-cols-4 gap-6">
         <div className="lg:col-span-3 space-y-6">
           <div className="border border-border rounded-lg overflow-hidden">
-            <div className="flex items-center gap-2 px-4 py-3 bg-card border-b border-border">
-              <GitBranch className="h-4 w-4 text-muted-foreground" />
-              <span className="text-sm font-medium">{repo.defaultBranch}</span>
+            <div className="flex items-center justify-between gap-4 px-4 py-3 bg-card border-b border-border">
+              <BranchSelector
+                branches={branches}
+                currentBranch={repo.defaultBranch}
+                username={username}
+                repoName={repo.name}
+              />
+              {commitCount > 0 && (
+                <Link
+                  href={`/${username}/${repo.name}/commits/${repo.defaultBranch}`}
+                  className="flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground transition-colors"
+                >
+                  <GitCommit className="h-4 w-4" />
+                  <span className="font-medium">{commitCount}</span>
+                  <span className="hidden sm:inline">commits</span>
+                </Link>
+              )}
             </div>
 
             {fileTree?.isEmpty ? (

app/(main)/[username]/[repo]/settings/page.tsx

@@ -0,0 +1,302 @@
+"use client";
+
+import { useState, useEffect, use } from "react";
+import { useRouter } from "next/navigation";
+import { getRepositoryWithStars, updateRepository, deleteRepository } from "@/actions/repositories";
+import { useSession } from "@/lib/auth-client";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
+import { toast } from "sonner";
+import { Loader2, Lock, Globe, Trash2, AlertTriangle } from "lucide-react";
+import Link from "next/link";
+
+type RepoData = {
+  id: string;
+  name: string;
+  description: string | null;
+  visibility: "public" | "private";
+  ownerId: string;
+};
+
+export default function RepoSettingsPage({
+  params,
+}: {
+  params: Promise<{ username: string; repo: string }>;
+}) {
+  const { username, repo: repoName } = use(params);
+  const router = useRouter();
+  const { data: session } = useSession();
+  const [repo, setRepo] = useState<RepoData | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+  const [deleting, setDeleting] = useState(false);
+  const [deleteConfirm, setDeleteConfirm] = useState("");
+  const [deleteOpen, setDeleteOpen] = useState(false);
+  const [formData, setFormData] = useState({
+    name: "",
+    description: "",
+    visibility: "public" as "public" | "private",
+  });
+
+  useEffect(() => {
+    async function loadRepo() {
+      try {
+        const data = await getRepositoryWithStars(username, repoName);
+        if (data) {
+          setRepo(data);
+          setFormData({
+            name: data.name,
+            description: data.description || "",
+            visibility: data.visibility,
+          });
+        }
+      } finally {
+        setLoading(false);
+      }
+    }
+    loadRepo();
+  }, [username, repoName]);
+
+  const isOwner = session?.user?.id === repo?.ownerId;
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    if (!repo) return;
+
+    setSaving(true);
+    try {
+      const updated = await updateRepository(repo.id, {
+        name: formData.name,
+        description: formData.description,
+        visibility: formData.visibility,
+      });
+      toast.success("Settings saved");
+      if (updated.name !== repo.name) {
+        router.push(`/${username}/${updated.name}/settings`);
+      }
+      setRepo({ ...repo, ...updated });
+    } catch (err) {
+      toast.error(err instanceof Error ? err.message : "Failed to save settings");
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  async function handleDelete() {
+    if (!repo || deleteConfirm !== repo.name) return;
+
+    setDeleting(true);
+    try {
+      await deleteRepository(repo.id);
+      toast.success("Repository deleted");
+      router.push(`/${username}`);
+    } catch (err) {
+      toast.error(err instanceof Error ? err.message : "Failed to delete repository");
+      setDeleting(false);
+    }
+  }
+
+  if (loading) {
+    return (
+      <div className="container max-w-3xl py-8">
+        <div className="flex items-center justify-center py-12">
+          <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
+        </div>
+      </div>
+    );
+  }
+
+  if (!repo || !isOwner) {
+    return (
+      <div className="container max-w-3xl py-8">
+        <Card>
+          <CardContent className="p-12 text-center">
+            <AlertTriangle className="h-12 w-12 mx-auto mb-4 text-muted-foreground" />
+            <h2 className="text-xl font-semibold mb-2">Access Denied</h2>
+            <p className="text-muted-foreground mb-6">
+              You don&apos;t have permission to access this page
+            </p>
+            <Button asChild>
+              <Link href={`/${username}/${repoName}`}>Back to repository</Link>
+            </Button>
+          </CardContent>
+        </Card>
+      </div>
+    );
+  }
+
+  return (
+    <div className="container max-w-3xl py-8 space-y-8">
+      <div>
+        <h1 className="text-2xl font-bold mb-1">Repository Settings</h1>
+        <p className="text-muted-foreground">
+          Manage settings for{" "}
+          <Link href={`/${username}/${repoName}`} className="text-accent hover:underline">
+            {username}/{repo.name}
+          </Link>
+        </p>
+      </div>
+
+      <form onSubmit={handleSubmit}>
+        <Card>
+          <CardHeader>
+            <CardTitle>General</CardTitle>
+            <CardDescription>Basic repository information</CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-6">
+            <div className="space-y-2">
+              <Label htmlFor="name">Repository name</Label>
+              <Input
+                id="name"
+                value={formData.name}
+                onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+                pattern="^[a-zA-Z0-9_.-]+$"
+                required
+              />
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="description">Description</Label>
+              <Textarea
+                id="description"
+                value={formData.description}
+                onChange={(e) => setFormData({ ...formData, description: e.target.value })}
+                placeholder="A short description of your repository"
+                rows={3}
+              />
+            </div>
+
+            <div className="space-y-3">
+              <Label>Visibility</Label>
+              <div className="space-y-2">
+                <label
+                  className={`flex items-start gap-3 p-3 rounded-lg border cursor-pointer transition-colors ${
+                    formData.visibility === "public"
+                      ? "border-accent bg-accent/5"
+                      : "border-border hover:border-muted-foreground/50"
+                  }`}
+                >
+                  <input
+                    type="radio"
+                    name="visibility"
+                    value="public"
+                    checked={formData.visibility === "public"}
+                    onChange={() => setFormData({ ...formData, visibility: "public" })}
+                    className="sr-only"
+                  />
+                  <Globe className="h-5 w-5 text-muted-foreground mt-0.5" />
+                  <div>
+                    <p className="font-medium">Public</p>
+                    <p className="text-sm text-muted-foreground">
+                      Anyone can see this repository
+                    </p>
+                  </div>
+                </label>
+
+                <label
+                  className={`flex items-start gap-3 p-3 rounded-lg border cursor-pointer transition-colors ${
+                    formData.visibility === "private"
+                      ? "border-accent bg-accent/5"
+                      : "border-border hover:border-muted-foreground/50"
+                  }`}
+                >
+                  <input
+                    type="radio"
+                    name="visibility"
+                    value="private"
+                    checked={formData.visibility === "private"}
+                    onChange={() => setFormData({ ...formData, visibility: "private" })}
+                    className="sr-only"
+                  />
+                  <Lock className="h-5 w-5 text-muted-foreground mt-0.5" />
+                  <div>
+                    <p className="font-medium">Private</p>
+                    <p className="text-sm text-muted-foreground">
+                      Only you can see this repository
+                    </p>
+                  </div>
+                </label>
+              </div>
+            </div>
+
+            <div className="flex justify-end">
+              <Button type="submit" disabled={saving}>
+                {saving && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+                Save changes
+              </Button>
+            </div>
+          </CardContent>
+        </Card>
+      </form>
+
+      <Card className="border-destructive/50">
+        <CardHeader>
+          <CardTitle className="text-destructive">Danger Zone</CardTitle>
+          <CardDescription>
+            Irreversible actions that can affect your repository
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <div className="flex items-center justify-between p-4 rounded-lg border border-destructive/30 bg-destructive/5">
+            <div>
+              <p className="font-medium">Delete this repository</p>
+              <p className="text-sm text-muted-foreground">
+                Once deleted, it cannot be recovered
+              </p>
+            </div>
+            <Dialog open={deleteOpen} onOpenChange={setDeleteOpen}>
+              <DialogTrigger asChild>
+                <Button variant="destructive" size="sm">
+                  <Trash2 className="mr-2 h-4 w-4" />
+                  Delete
+                </Button>
+              </DialogTrigger>
+              <DialogContent>
+                <DialogHeader>
+                  <DialogTitle>Delete repository</DialogTitle>
+                  <DialogDescription>
+                    This action cannot be undone. This will permanently delete the{" "}
+                    <strong>{username}/{repo.name}</strong> repository and all of its contents.
+                  </DialogDescription>
+                </DialogHeader>
+                <div className="space-y-2 py-4">
+                  <Label htmlFor="confirm">
+                    Type <strong>{repo.name}</strong> to confirm
+                  </Label>
+                  <Input
+                    id="confirm"
+                    value={deleteConfirm}
+                    onChange={(e) => setDeleteConfirm(e.target.value)}
+                    placeholder={repo.name}
+                  />
+                </div>
+                <DialogFooter>
+                  <Button
+                    variant="outline"
+                    onClick={() => setDeleteOpen(false)}
+                    disabled={deleting}
+                  >
+                    Cancel
+                  </Button>
+                  <Button
+                    variant="destructive"
+                    onClick={handleDelete}
+                    disabled={deleteConfirm !== repo.name || deleting}
+                  >
+                    {deleting && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+                    Delete repository
+                  </Button>
+                </DialogFooter>
+              </DialogContent>
+            </Dialog>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
+

app/(main)/[username]/[repo]/tree/[...path]/page.tsx

@@ -1,9 +1,10 @@
 import { notFound } from "next/navigation";
 import Link from "next/link";
-import { getRepository, getRepoFileTree } from "@/actions/repositories";
+import { getRepository, getRepoFileTree, getRepoBranches } from "@/actions/repositories";
 import { FileTree } from "@/components/file-tree";
+import { BranchSelector } from "@/components/branch-selector";
 import { Badge } from "@/components/ui/badge";
-import { GitBranch, Lock, Globe, ChevronRight, Home } from "lucide-react";
+import { Lock, Globe, ChevronRight, Home } from "lucide-react";
 
 export default async function TreePage({ params }: { params: Promise<{ username: string; repo: string; path: string[] }> }) {
   const { username, repo: repoName, path: pathSegments } = await params;
@@ -16,7 +17,10 @@ export default async function TreePage({ params }: { params: Promise<{ username:
     notFound();
   }
 
-  const fileTree = await getRepoFileTree(username, repoName, branch, dirPath);
+  const [fileTree, branches] = await Promise.all([
+    getRepoFileTree(username, repoName, branch, dirPath),
+    getRepoBranches(username, repoName),
+  ]);
 
   if (!fileTree) {
     notFound();
@@ -53,8 +57,13 @@ export default async function TreePage({ params }: { params: Promise<{ username:
 
       <div className="border border-border rounded-lg overflow-hidden">
         <div className="flex items-center gap-2 px-4 py-3 bg-card border-b border-border">
-          <GitBranch className="h-4 w-4 text-muted-foreground" />
-          <span className="text-sm font-medium">{branch}</span>
+          <BranchSelector
+            branches={branches}
+            currentBranch={branch}
+            username={username}
+            repoName={repoName}
+            basePath={dirPath}
+          />
         </div>
 
         <nav className="flex items-center gap-1 px-4 py-2 bg-muted/30 border-b border-border text-sm">

app/(main)/[username]/page.tsx

@@ -2,7 +2,7 @@ import { notFound } from "next/navigation";
 import { db } from "@/db";
 import { users } from "@/db/schema";
 import { eq } from "drizzle-orm";
-import { getUserRepositories } from "@/actions/repositories";
+import { getUserRepositoriesWithStars } from "@/actions/repositories";
 import { RepoList } from "@/components/repo-list";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import { CalendarDays, GitBranch, MapPin, Link as LinkIcon } from "lucide-react";
@@ -21,7 +21,7 @@ export default async function ProfilePage({ params }: { params: Promise<{ userna
     notFound();
   }
 
-  const repos = await getUserRepositories(username);
+  const repos = await getUserRepositoriesWithStars(username);
 
   return (
     <div className="container px-4 py-8">

app/(main)/explore/page.tsx

@@ -0,0 +1,103 @@
+import Link from "next/link";
+import { getPublicRepositories } from "@/actions/repositories";
+import { Button } from "@/components/ui/button";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Star, GitBranch, ChevronLeft, ChevronRight, Compass, Clock, Flame, Sparkles } from "lucide-react";
+import { formatDistanceToNow } from "date-fns";
+
+const SORT_OPTIONS = [
+  { value: "stars", label: "Most stars", icon: Flame },
+  { value: "updated", label: "Recently updated", icon: Clock },
+  { value: "created", label: "Newest", icon: Sparkles },
+] as const;
+
+export default async function ExplorePage({ searchParams }: { searchParams: Promise<{ sort?: string; page?: string }> }) {
+  const { sort: sortParam, page: pageParam } = await searchParams;
+  const sortBy = (["stars", "updated", "created"].includes(sortParam || "") ? sortParam : "stars") as "stars" | "updated" | "created";
+  const page = parseInt(pageParam || "1", 10);
+  const perPage = 20;
+  const offset = (page - 1) * perPage;
+
+  const { repos, hasMore } = await getPublicRepositories(sortBy, perPage, offset);
+
+  return (
+    <div className="container py-8">
+      <div className="mb-8">
+        <div className="flex items-center gap-3 mb-2">
+          <Compass className="h-8 w-8 text-accent" />
+          <h1 className="text-3xl font-bold">Explore</h1>
+        </div>
+        <p className="text-muted-foreground">Discover public repositories from the community</p>
+      </div>
+
+      <div className="flex flex-wrap items-center gap-2 mb-6">
+        {SORT_OPTIONS.map(({ value, label, icon: Icon }) => (
+          <Button key={value} variant={sortBy === value ? "default" : "outline"} size="sm" asChild className="gap-2">
+            <Link href={`/explore?sort=${value}`}>
+              <Icon className="h-4 w-4" />
+              {label}
+            </Link>
+          </Button>
+        ))}
+      </div>
+
+      {repos.length === 0 ? (
+        <div className="border border-dashed border-border rounded-xl p-12 text-center bg-card/30">
+          <GitBranch className="h-12 w-12 mx-auto mb-4 text-muted-foreground" />
+          <h3 className="text-lg font-semibold mb-2">No repositories yet</h3>
+          <p className="text-muted-foreground">Be the first to create a public repository!</p>
+        </div>
+      ) : (
+        <div className="space-y-4">
+          {repos.map((repo) => (
+            <div key={repo.id} className="border border-border rounded-xl p-5 bg-card hover:border-accent/50 transition-colors">
+              <div className="flex items-start gap-4">
+                <Avatar className="h-10 w-10 shrink-0">
+                  <AvatarImage src={repo.owner.image || undefined} />
+                  <AvatarFallback className="bg-accent/20">{repo.owner.name?.charAt(0).toUpperCase() || "U"}</AvatarFallback>
+                </Avatar>
+                <div className="flex-1 min-w-0">
+                  <div className="flex items-center gap-1 flex-wrap">
+                    <Link href={`/${repo.owner.username}`} className="font-semibold text-accent hover:underline">
+                      {repo.owner.username}
+                    </Link>
+                    <span className="text-muted-foreground">/</span>
+                    <Link href={`/${repo.owner.username}/${repo.name}`} className="font-semibold text-accent hover:underline">
+                      {repo.name}
+                    </Link>
+                  </div>
+                  {repo.description && <p className="text-sm text-muted-foreground mt-1 line-clamp-2">{repo.description}</p>}
+                  <div className="flex items-center gap-4 mt-3 text-sm text-muted-foreground">
+                    <div className="flex items-center gap-1">
+                      <Star className="h-4 w-4" />
+                      <span>{repo.starCount}</span>
+                    </div>
+                    <span>Updated {formatDistanceToNow(new Date(repo.updatedAt), { addSuffix: true })}</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+
+      {(page > 1 || hasMore) && (
+        <div className="flex items-center justify-between mt-8">
+          <Button variant="outline" size="sm" asChild disabled={page <= 1}>
+            <Link href={`/explore?sort=${sortBy}&page=${page - 1}`} className={page <= 1 ? "pointer-events-none opacity-50" : ""}>
+              <ChevronLeft className="h-4 w-4 mr-1" />
+              Previous
+            </Link>
+          </Button>
+          <span className="text-sm text-muted-foreground">Page {page}</span>
+          <Button variant="outline" size="sm" asChild disabled={!hasMore}>
+            <Link href={`/explore?sort=${sortBy}&page=${page + 1}`} className={!hasMore ? "pointer-events-none opacity-50" : ""}>
+              Next
+              <ChevronRight className="h-4 w-4 ml-1" />
+            </Link>
+          </Button>
+        </div>
+      )}
+    </div>
+  );
+}

app/(main)/page.tsx

@@ -1,5 +1,5 @@
 import { getSession } from "@/lib/session";
-import { getUserRepositories } from "@/actions/repositories";
+import { getUserRepositoriesWithStars } from "@/actions/repositories";
 import { RepoList } from "@/components/repo-list";
 import { Button } from "@/components/ui/button";
 import { GitBranch, Plus, Rocket, Code, Users, BookOpen } from "lucide-react";
@@ -13,7 +13,7 @@ export default async function HomePage() {
   }
 
   const username = (session.user as { username?: string }).username || "";
-  const repos = await getUserRepositories(username);
+  const repos = await getUserRepositoriesWithStars(username);
 
   return (
     <div className="container py-8">

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>
+  );
+}
+

db/schema.ts

@@ -1,4 +1,4 @@
-import { pgTable, text, timestamp, boolean, uuid, jsonb } from "drizzle-orm/pg-core";
+import { pgTable, text, timestamp, boolean, uuid, jsonb, primaryKey } from "drizzle-orm/pg-core";
 
 export const users = pgTable("users", {
   id: text("id").primaryKey(),
@@ -76,3 +76,17 @@ export const repositories = pgTable("repositories", {
   createdAt: timestamp("created_at").notNull().defaultNow(),
   updatedAt: timestamp("updated_at").notNull().defaultNow(),
 });
+
+export const stars = pgTable(
+  "stars",
+  {
+    userId: text("user_id")
+      .notNull()
+      .references(() => users.id, { onDelete: "cascade" }),
+    repositoryId: uuid("repository_id")
+      .notNull()
+      .references(() => repositories.id, { onDelete: "cascade" }),
+    createdAt: timestamp("created_at").notNull().defaultNow(),
+  },
+  (table) => [primaryKey({ columns: [table.userId, table.repositoryId] })]
+);