feat(ui): add navbar & dark mode

armaan-71 · armaan-71 · commit d470167dc359 · 2026-02-24T14:35:26.000-05:00
- Install next-themes for dark mode support
- Create ThemeProvider component
- Add global DashboardLayout with responsive navbar
- Move UserButton into shared layout
- Add native theme toggle to UserButton menu
- Remove deprecated afterSignOutUrl prop
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -14,6 +14,7 @@
     "clsx": "^2.1.1",
     "lucide-react": "^0.574.0",
     "next": "16.1.6",
+    "next-themes": "^0.4.6",
     "radix-ui": "^1.4.3",
     "react": "19.2.3",
     "react-dom": "19.2.3",
diff --git a/frontend/src/app/dashboard/layout.tsx b/frontend/src/app/dashboard/layout.tsx
@@ -0,0 +1,40 @@
+'use client';
+
+import { UserButton } from '@clerk/nextjs';
+import Link from 'next/link';
+import { useTheme } from 'next-themes';
+import { Moon, Sun } from 'lucide-react';
+
+export default function DashboardLayout({ children }: { children: React.ReactNode }) {
+  const { theme, setTheme } = useTheme();
+
+  return (
+    <div className="flex min-h-screen flex-col">
+      <header className="sticky top-0 z-40 w-full border-b bg-background/95 backdrop-blur supports-backdrop-filter:bg-background/60">
+        <div className="container flex h-16 items-center justify-between mx-auto px-4">
+          <div className="flex gap-6 md:gap-10">
+            <Link href="/dashboard" className="flex items-center space-x-2">
+              <span className="inline-block font-bold">Outpost</span>
+            </Link>
+          </div>
+          <div className="flex flex-1 items-center justify-end space-x-4">
+            <nav className="flex items-center space-x-2">
+              <UserButton>
+                <UserButton.MenuItems>
+                  <UserButton.Action
+                    label={theme === 'dark' ? 'Light mode' : 'Dark mode'}
+                    labelIcon={
+                      theme === 'dark' ? <Sun className="h-4 w-4" /> : <Moon className="h-4 w-4" />
+                    }
+                    onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
+                  />
+                </UserButton.MenuItems>
+              </UserButton>
+            </nav>
+          </div>
+        </div>
+      </header>
+      <div className="flex-1">{children}</div>
+    </div>
+  );
+}
diff --git a/frontend/src/app/dashboard/page.tsx b/frontend/src/app/dashboard/page.tsx
@@ -8,7 +8,7 @@ import { Plus, RefreshCw } from 'lucide-react';
 import { CreateRunDialog } from '@/components/CreateRunDialog';
 import { cn } from '@/lib/utils';
 import { logger } from '@/lib/logger';
-import { UserButton, useAuth } from '@clerk/nextjs';
+import { useAuth } from '@clerk/nextjs';
 
 export default function Home() {
   const [runs, setRuns] = useState<Run[]>([]);
diff --git a/frontend/src/app/dashboard/runs/[id]/page.tsx b/frontend/src/app/dashboard/runs/[id]/page.tsx
@@ -7,7 +7,7 @@ import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import { ArrowLeft, RefreshCw, ChevronRight } from 'lucide-react';
 import Link from 'next/link';
-import { UserButton, useAuth } from '@clerk/nextjs';
+import { useAuth } from '@clerk/nextjs';
 import {
   Table,
   TableBody,
@@ -98,7 +98,6 @@ export default function RunDetailsPage() {
               <ArrowLeft className="h-4 w-4" /> Back to Dashboard
             </Link>
           </Button>
-          <UserButton afterSignOutUrl="/" />
         </div>
 
         <div className="mb-8">
diff --git a/frontend/src/app/layout.tsx b/frontend/src/app/layout.tsx
@@ -1,5 +1,6 @@
 import type { Metadata } from 'next';
 import { ClerkProvider } from '@clerk/nextjs';
+import { ThemeProvider } from '@/components/theme-provider';
 import './globals.css';
 
 export const metadata: Metadata = {
@@ -14,8 +15,17 @@ export default function RootLayout({
 }>) {
   return (
     <ClerkProvider>
-      <html lang="en">
-        <body>{children}</body>
+      <html lang="en" suppressHydrationWarning>
+        <body>
+          <ThemeProvider
+            attribute="class"
+            defaultTheme="system"
+            enableSystem
+            disableTransitionOnChange
+          >
+            {children}
+          </ThemeProvider>
+        </body>
       </html>
     </ClerkProvider>
   );
diff --git a/frontend/src/components/theme-provider.tsx b/frontend/src/components/theme-provider.tsx
@@ -0,0 +1,11 @@
+'use client';
+
+import * as React from 'react';
+import { ThemeProvider as NextThemesProvider } from 'next-themes';
+
+export function ThemeProvider({
+  children,
+  ...props
+}: React.ComponentProps<typeof NextThemesProvider>) {
+  return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
+}
