refactor: change repo to /~/[repo] dynamic route

src/app/(app)/new/_components/repo-list.tsx

@@ -73,8 +73,8 @@ export default function RepoList() {
             <span className="text-muted-foreground text-sm">
               {datetime(repo.updated_at).fromNow()}
             </span>
-            <Button asChild className="ml-auto">
-              <Link href={`/@${repo.name}`}>Import</Link>
+            <Button className="ml-auto" asChild>
+              <Link href={`/~/${repo.name}`}>Import</Link>
             </Button>
           </div>
         ))}

src/app/(app)/[repo]/_components/dialogs/create-config-alert-dialog.tsx → src/app/(app)/~/[repo]/_components/dialogs/create-config-alert-dialog.tsx

@@ -18,7 +18,7 @@ import { toast } from 'sonner';
 
 interface Props {
   open: boolean;
-  setOpen: React.Dispatch<React.SetStateAction<boolean>>;
+  setOpen: (val: boolean) => void;
   repo: string;
 }
 

src/app/(app)/[repo]/_components/contents-skeleton.tsx → src/app/(app)/~/[repo]/_components/repo-contents-skeleton.tsx

@@ -1,6 +1,6 @@
 import { Skeleton } from '@/components/ui/skeleton';
 
-export default function ContentsSkeleton() {
+export default function RepoContentsSkeleton() {
   return Array.from({ length: 1 }).map((_, idx) => (
     <div key={idx} className="grid grid-cols-5 gap-2 p-3">
       <Skeleton className="col-span-2 h-5 w-20" />

src/app/(app)/[repo]/_components/repo-contents.tsx → src/app/(app)/~/[repo]/_components/repo-contents.tsx

@@ -9,11 +9,11 @@ import { Folder, Plus, Search } from 'lucide-react';
 import { useCallback, useEffect } from 'react';
 import { toast } from 'sonner';
 import ContentItem from './content-item';
-import ContentsSkeleton from './contents-skeleton';
+import RepoContentsSkeleton from './repo-contents-skeleton';
 
 interface Props {
   repo: string;
-  setIsConfigDialogOpen: React.Dispatch<React.SetStateAction<boolean>>;
+  setIsConfigDialogOpen: (val: boolean) => void;
 }
 
 export default function RepoContents({ repo, setIsConfigDialogOpen }: Props) {
@@ -65,7 +65,7 @@ export default function RepoContents({ repo, setIsConfigDialogOpen }: Props) {
   return (
     <div className="col-span-2 flex flex-col gap-2">
       <div className="flex items-center gap-4">
-        <div className="flex items-center gap-2">
+        <div className="flex items-end gap-2">
           <Avatar className="size-5">
             <AvatarImage src={session?.user?.image ?? undefined} />
             <AvatarFallback>{session?.user?.name?.[0]}</AvatarFallback>
@@ -75,7 +75,7 @@ export default function RepoContents({ repo, setIsConfigDialogOpen }: Props) {
             className="text-sm font-bold hover:underline"
             onClick={() => navigateBackTo('<root>')}
           >
-            @{repo}
+            {repo}
           </button>
           {breadcrumbs.length > 0 && <span className="text-muted-foreground/50">/</span>}
           {breadcrumbs.map((crumb, idx) => (
@@ -118,7 +118,7 @@ export default function RepoContents({ repo, setIsConfigDialogOpen }: Props) {
           </button>
         )}
         {isLoading || status === 'loading' || !contents ? (
-          <ContentsSkeleton />
+          <RepoContentsSkeleton />
         ) : (
           contents.map((content) => (
             <ContentItem

src/app/(app)/~/[repo]/page.tsx

@@ -0,0 +1,17 @@
+import { Metadata } from 'next';
+import ClientPage from './client-page';
+
+interface Props {
+  params: Promise<{ repo: string }>;
+}
+
+export async function generateMetadata({ params }: Props): Promise<Metadata> {
+  const { repo } = await params;
+  return { title: `${repo}: GitLoom` };
+}
+
+export default async function Page({ params }: Props) {
+  const { repo } = await params;
+  // render client-side page
+  return <ClientPage repo={repo} />;
+}