added

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">