feat: header user-dropdown

eslint.config.mjs

@@ -1,6 +1,6 @@
+import { FlatCompat } from '@eslint/eslintrc';
 import { dirname } from 'path';
 import { fileURLToPath } from 'url';
-import { FlatCompat } from '@eslint/eslintrc';
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = dirname(__filename);

package.json

@@ -12,6 +12,7 @@
   },
   "dependencies": {
     "@radix-ui/react-avatar": "^1.1.10",
+    "@radix-ui/react-dropdown-menu": "^2.1.15",
     "@radix-ui/react-select": "^2.2.5",
     "@radix-ui/react-slot": "^1.2.3",
     "@tanstack/react-query": "^5.80.6",

src/app/(app)/_components/footer.tsx

@@ -6,7 +6,7 @@ export default function Footer() {
   return (
     <footer className="grid place-items-center border-t py-8">
       <div className="mx-auto w-full max-w-300">
-        <div className="flex flex-col gap-4">
+        <div className="flex flex-col items-center gap-4 lg:items-start">
           <nav className="text-muted-foreground [&>a]:hover:text-foreground flex flex-wrap items-center gap-4 text-sm [&>a]:transition-colors">
             <GitloomIcon className="size-5" />
             <Link href={'/'}>Home</Link>

src/app/(app)/_components/header.tsx → src/app/(app)/_components/header/header.tsx

@@ -1,12 +1,13 @@
 'use client';
 
 import GitloomIcon from '@/components/icons/gitloom';
-import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+import { Avatar, AvatarImage } from '@/components/ui/avatar';
 import { Button } from '@/components/ui/button';
 import { ChevronsUpDown } from 'lucide-react';
 import { useSession } from 'next-auth/react';
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
+import UserDropdown from './user-dropdown';
 
 export default function Header() {
   const { data: session } = useSession();
@@ -34,10 +35,7 @@ export default function Header() {
       </nav>
       <div className="flex items-center gap-4">
         <Button variant={'outline'}>Feedback</Button>
-        <Avatar>
-          <AvatarImage src={session?.user?.image ?? undefined} />
-          <AvatarFallback>{session?.user?.name}</AvatarFallback>
-        </Avatar>
+        <UserDropdown></UserDropdown>
       </div>
     </header>
   );

src/app/(app)/_components/header/user-dropdown.tsx

@@ -0,0 +1,52 @@
+'use client';
+
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { ExternalLink, LogOutIcon } from 'lucide-react';
+import { useSession } from 'next-auth/react';
+
+export default function UserDropdown() {
+  const { data: session } = useSession();
+  const { username, name, email, image } = session?.user ?? {};
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger>
+        <Avatar>
+          <AvatarImage src={image ?? undefined} />
+          <AvatarFallback>{name}</AvatarFallback>
+        </Avatar>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" className="w-48">
+        <DropdownMenuItem>
+          <a
+            href={`https://github.com/${username}`}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="flex w-full flex-col items-start"
+          >
+            <span className="text-foreground text-sm font-medium">{name}</span>
+            <span className="text-muted-foreground line-clamp-1 text-xs break-all">{email}</span>
+          </a>
+          <DropdownMenuShortcut>
+            <ExternalLink className="size-4" />
+          </DropdownMenuShortcut>
+        </DropdownMenuItem>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem className="cursor-pointer">
+          Log out
+          <DropdownMenuShortcut>
+            <LogOutIcon className="size-4" />
+          </DropdownMenuShortcut>
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

src/app/(app)/layout.tsx

@@ -1,5 +1,5 @@
 import Footer from './_components/footer';
-import Header from './_components/header';
+import Header from './_components/header/header';
 
 export default function AppLayout({
   children,
@@ -9,7 +9,7 @@ export default function AppLayout({
   return (
     <main>
       <Header />
-      <div className="mx-auto min-h-[calc(100dvh-3.75rem)] max-w-300">{children}</div>
+      <div className="mx-auto min-h-[calc(100dvh-3.75rem)] max-w-300 px-5 lg:px-0">{children}</div>
       <Footer />
     </main>
   );

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

@@ -58,7 +58,7 @@ export default function RepoList() {
   const { data: session, status } = useSession();
   const accessToken = session?.accessToken;
   const username = session?.user?.username;
-
+  console.log(session?.user);
   const [search, setSearch] = useState('');
   const debouncedSearch = useDebounce(search, 500);
 
@@ -77,18 +77,19 @@ export default function RepoList() {
   return (
     <>
       <div className="grid grid-cols-2 gap-4">
-        <Select defaultValue="moonlitgrace" disabled>
-          {status === 'loading' ? (
-            <Skeleton className="h-9 w-full" />
-          ) : (
+        {status === 'loading' ? (
+          <Skeleton className="h-9 w-full" />
+        ) : (
+          <Select defaultValue={String(username)} disabled>
             <SelectTrigger className="w-full">
-              <SelectValue />
+              <SelectValue placeholder="Select username" />
             </SelectTrigger>
-          )}
-          <SelectContent>
-            <SelectItem value={String(username)}>{username}</SelectItem>
-          </SelectContent>
-        </Select>
+            <SelectContent>
+              <SelectItem value={String(username)}>{username}</SelectItem>
+            </SelectContent>
+          </Select>
+        )}
+
         <InputRoot>
           <InputIcon>
             {debouncedSearch.length > 0 && isLoading ? (

src/app/(app)/new/page.tsx

@@ -15,7 +15,7 @@ export default async function Page() {
           Select a repository to link with Gitloom and start managing your content.
         </span>
       </div>
-      <div className="grid grid-cols-2 gap-8">
+      <div className="grid gap-8 md:grid-cols-2">
         <div className="bg-card/50 space-y-4 rounded-lg border p-4">
           <h5 className="text-xl font-bold">Import Git Repo</h5>
           <RepoList />

src/app/(auth)/login/page.tsx

@@ -15,8 +15,8 @@ export const metadata: Metadata = {
 
 export default async function Page() {
   return (
-    <div className="grid min-h-dvh grid-cols-2">
-      <div className="bg-card/50 grid place-items-center border-r">
+    <div className="grid min-h-dvh md:grid-cols-2">
+      <div className="bg-card/50 hidden place-items-center border-r px-6 md:grid lg:px-0">
         <div className="flex w-full max-w-100 flex-col gap-4">
           <ShieldCheck className="text-muted-foreground size-15 stroke-1" />
           <h4 className="text-4xl font-black">Your data is yours.</h4>
@@ -55,7 +55,7 @@ export default async function Page() {
               });
             }}
           >
-            <Button type='submit' size={'default'} className="w-full">
+            <Button type="submit" size={'default'} className="w-full">
               <GithubIcon className="size-5" />
               Sign in with Github
             </Button>