update

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

@@ -1,7 +1,9 @@
 import { Suspense } from "react";
 import { notFound } from "next/navigation";
+import { connection } from "next/server";
 import Link from "next/link";
 import { getRepository, getRepoFile, getRepoBranches } from "@/actions/repositories";
+import { ChunkedCodeViewer } from "@/components/chunked-code-viewer";
 import { CodeViewer } from "@/components/code-viewer";
 import { BranchSelector } from "@/components/branch-selector";
 import { Badge } from "@/components/ui/badge";
@@ -28,12 +30,15 @@ const LANGUAGE_MAP: Record<string, string> = {
   zsh: "bash",
 };
 
+const SMALL_FILE_THRESHOLD = 50 * 1024;
+
 function getLanguage(filename: string): string {
   const ext = filename.split(".").pop()?.toLowerCase() || "";
   return LANGUAGE_MAP[ext] || "text";
 }
 
 async function FileContent({ username, repoName, branch, filePath }: { username: string; repoName: string; branch: string; filePath: string }) {
+  await connection();
   const file = await getRepoFile(username, repoName, branch, filePath);
 
   if (!file) {
@@ -42,6 +47,21 @@ async function FileContent({ username, repoName, branch, filePath }: { username:
 
   const fileName = filePath.split("/").pop() || "";
   const language = getLanguage(fileName);
+  const fileSize = new TextEncoder().encode(file.content).length;
+
+  if (fileSize > SMALL_FILE_THRESHOLD) {
+    return (
+      <ChunkedCodeViewer
+        username={username}
+        repoName={repoName}
+        branch={branch}
+        filePath={filePath}
+        language={language}
+        initialContent={file.content}
+        totalSize={fileSize}
+      />
+    );
+  }
 
   return <CodeViewer content={file.content} language={language} showLineNumbers />;
 }

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

@@ -1,5 +1,6 @@
 import { Suspense } from "react";
 import { notFound } from "next/navigation";
+import { connection } from "next/server";
 import { getRepoPageData, getRepoReadme, getRepoCommitCountCached } from "@/actions/repositories";
 import { FileTree } from "@/components/file-tree";
 import { CodeViewer } from "@/components/code-viewer";
@@ -13,6 +14,7 @@ import Link from "next/link";
 import { getPublicServerUrl } from "@/lib/utils";
 
 async function CommitCount({ username, repoName, branch }: { username: string; repoName: string; branch: string }) {
+  await connection();
   const commitCount = await getRepoCommitCountCached(username, repoName);
 
   if (commitCount === 0) return null;
@@ -30,6 +32,7 @@ async function CommitCount({ username, repoName, branch }: { username: string; r
 }
 
 async function ReadmeSection({ username, repoName, readmeOid }: { username: string; repoName: string; readmeOid: string }) {
+  await connection();
   const content = await getRepoReadme(username, repoName, readmeOid);
 
   if (!content) return null;

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

@@ -1,9 +1,7 @@
 import { Suspense } from "react";
 import { notFound } from "next/navigation";
-import { db } from "@/db";
-import { users } from "@/db/schema";
-import { eq } from "drizzle-orm";
-import { getUserRepositoriesWithStars, getUserStarredRepos } from "@/actions/repositories";
+import { connection } from "next/server";
+import { getUserRepositoriesWithStars, getUserStarredRepos, getUserProfile } from "@/actions/repositories";
 import { RepoList } from "@/components/repo-list";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
@@ -13,6 +11,7 @@ import Link from "next/link";
 import { GithubIcon, XIcon, LinkedInIcon } from "@/components/icons";
 
 async function RepositoriesTab({ username }: { username: string }) {
+  await connection();
   const repos = await getUserRepositoriesWithStars(username);
 
   if (repos.length === 0) {
@@ -29,6 +28,7 @@ async function RepositoriesTab({ username }: { username: string }) {
 }
 
 async function StarredTab({ username }: { username: string }) {
+  await connection();
   const repos = await getUserStarredRepos(username);
 
   if (repos.length === 0) {
@@ -65,9 +65,7 @@ export default async function ProfilePage({ params, searchParams }: { params: Pr
   const { username } = await params;
   const { tab } = await searchParams;
 
-  const user = await db.query.users.findFirst({
-    where: eq(users.username, username),
-  });
+  const user = await getUserProfile(username);
 
   if (!user) {
     notFound();

app/(main)/explore/page.tsx

@@ -1,8 +1,10 @@
+import { Suspense } from "react";
+import { connection } from "next/server";
 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 { Star, GitBranch, ChevronLeft, ChevronRight, Compass, Clock, Flame, Sparkles, Loader2 } from "lucide-react";
 import { formatDistanceToNow } from "date-fns";
 
 const SORT_OPTIONS = [
@@ -11,14 +13,103 @@ const SORT_OPTIONS = [
   { value: "created", label: "Newest", icon: Sparkles },
 ] as const;
 
+async function RepoGrid({ sortBy, page, perPage }: { sortBy: "stars" | "updated" | "created"; page: number; perPage: number }) {
+  await connection();
+  const offset = (page - 1) * perPage;
+  const { repos, hasMore } = await getPublicRepositories(sortBy, perPage, offset);
+
+  if (repos.length === 0) {
+    return (
+      <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>
+    );
+  }
+
+  return (
+    <>
+      <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>
+      )}
+    </>
+  );
+}
+
+function RepoGridSkeleton() {
+  return (
+    <div className="space-y-4">
+      {[...Array(5)].map((_, i) => (
+        <div key={i} className="border border-border rounded-xl p-5 bg-card animate-pulse">
+          <div className="flex items-start gap-4">
+            <div className="h-10 w-10 rounded-full bg-muted" />
+            <div className="flex-1">
+              <div className="h-5 bg-muted rounded w-1/3 mb-2" />
+              <div className="h-4 bg-muted rounded w-2/3 mb-3" />
+              <div className="flex gap-4">
+                <div className="h-4 bg-muted rounded w-16" />
+                <div className="h-4 bg-muted rounded w-24" />
+              </div>
+            </div>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
+
 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">
@@ -41,63 +132,9 @@ export default async function ExplorePage({ searchParams }: { searchParams: Prom
         ))}
       </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>
-      )}
+      <Suspense fallback={<RepoGridSkeleton />}>
+        <RepoGrid sortBy={sortBy} page={page} perPage={perPage} />
+      </Suspense>
     </div>
   );
 }