Dev/auth

apps/api/package.json

@@ -12,7 +12,7 @@
   "dependencies": {
     "@repo/ui": "*",
     "@repo/auth": "*",
-    "next": "^15.2.4",
+    "next": "^15.2.5",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "zod": "^3.24.2"
@@ -21,7 +21,7 @@
     "@repo/typescript-config": "*",
     "@types/node": "^22.14.0",
     "@types/react": "19.1.0",
-    "@types/react-dom": "19.1.1",
-    "typescript": "5.8.2"
+    "@types/react-dom": "19.1.2",
+    "typescript": "5.8.3"
   }
 }

apps/web/app/(authenticated)/components/footer/index.tsx

@@ -0,0 +1,110 @@
+import { Status } from '@repo/ui/components/status'
+import { ThemeSwitcher } from '@repo/ui/components/theme-toggle'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger
+} from '@repo/ui/components/ui/dropdown-menu'
+import { ChevronDown } from 'lucide-react'
+import Image from 'next/image'
+import Link from 'next/link'
+
+export const Footer = () => {
+  return (
+    <footer className="border-t bg-card/40 p-6 pt-5">
+      <nav
+        aria-label="Blackhead Directory"
+        className="mx-auto grid w-full grid-cols-1 items-center justify-between gap-x-2 gap-y-6 px-6 md:flex md:grid-cols-none"
+      >
+        <div className="flex flex-col items-start gap-4 text-sm md:flex-row md:items-center">
+          <Link href="/" className="flex items-center">
+            <div className="relative h-6 w-6 overflow-hidden">
+              <div className="absolute inset-0 flex items-center justify-center">
+                <Image
+                  src="/logo.svg"
+                  alt="Blackhead Logo"
+                  width={24}
+                  height={24}
+                  className="invert dark:invert-0"
+                />
+              </div>
+            </div>
+          </Link>
+
+          <ul className="m-0 grid w-full list-none grid-cols-2 items-start gap-4 p-0 md:flex md:items-center">
+            <Link
+              href="/"
+              className="text-muted-foreground hover:text-foreground"
+            >
+              Home
+            </Link>
+            <Link
+              href="/docs"
+              className="text-muted-foreground hover:text-foreground"
+            >
+              Docs
+            </Link>
+            <Link
+              href="/guides"
+              className="text-muted-foreground hover:text-foreground"
+            >
+              Guides
+            </Link>
+            <Link
+              href="/blog"
+              className="text-muted-foreground hover:text-foreground"
+            >
+              Blog
+            </Link>
+            <Link
+              href="/contact"
+              className="text-muted-foreground hover:text-foreground"
+            >
+              Contact
+            </Link>
+            <DropdownMenu>
+              <DropdownMenuTrigger className="w-fit">
+                <Link
+                  href="/legal"
+                  className="text-muted-foreground hover:text-foreground"
+                >
+                  Legal <ChevronDown className="inline h-4 w-4" />
+                </Link>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent>
+                <DropdownMenuItem>
+                  <Link
+                    href="/legal/terms"
+                    className="text-muted-foreground hover:text-foreground"
+                  >
+                    Terms of Service
+                  </Link>
+                </DropdownMenuItem>
+                <DropdownMenuItem>
+                  <Link
+                    href="/legal/privacy"
+                    className="text-muted-foreground hover:text-foreground"
+                  >
+                    Privacy Policy
+                  </Link>
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </ul>
+        </div>
+
+        <div className="flex items-center justify-between gap-4">
+          <Status />
+          <ThemeSwitcher />
+        </div>
+      </nav>
+
+      <div className="mx-auto mt-4 px-6">
+        <div className="text-muted-foreground text-xs">
+          © {new Date().getFullYear()} Blackhead. All rights reserved.
+        </div>
+      </div>
+    </footer>
+  )
+}

apps/web/app/(authenticated)/components/header/index.tsx

@@ -0,0 +1,100 @@
+'use client'
+
+import { AuthButtons } from '@/app/(home)/components/header/auth-buttons'
+import { useSession } from '@repo/auth/client'
+import {} from '@repo/ui/components/ui/avatar'
+import { Button } from '@repo/ui/components/ui/button'
+import {} from '@repo/ui/components/ui/dropdown-menu'
+import { useIsScroll } from '@repo/ui/hooks/use-scroll'
+import { cn } from '@repo/ui/lib/utils'
+import { ChevronsUpDown, SlashIcon } from 'lucide-react'
+import Image from 'next/image'
+import Link from 'next/link'
+
+export const Header = () => {
+  const { data: session } = useSession()
+  const isScroll = useIsScroll()
+
+  return (
+    <header className="flex h-16 min-h-16 items-center px-4 md:px-6">
+      <Link href="/dashboard" className="pr-12 outline-none md:inline">
+        <Image
+          src="/logo.svg"
+          alt="Blackhead Logo"
+          width={32}
+          height={32}
+          className={cn(
+            'top-6 left-6 z-10 inline-flex invert dark:invert-0',
+            'transition-all duration-200 ease-initial',
+            isScroll ? '-translate-y-2 -scale-[0.8] fixed' : 'absolute'
+          )}
+        />
+      </Link>
+      <nav className="flex w-full items-center justify-between gap-3">
+        <ul className="flex items-center justify-start overflow-auto">
+          <li className="flex min-w-12 max-w-96 items-center justify-center gap-3">
+            <SlashIcon className="h-5 w-5 text-accent" />
+            <div className="flex items-center justify-start gap-3">
+              <Link
+                href="/dashboard"
+                className="flex min-w-0 items-center justify-start gap-3 no-underline"
+              >
+                <Image
+                  src={`https://avatar.vercel.sh/${session?.user.name || 'User Avatar'}.png`}
+                  alt={session?.user.name || 'User Avatar'}
+                  width={20}
+                  height={20}
+                  className="relative h-5 w-5 rounded-full"
+                />
+                <p id="project" className="text-sm">
+                  {session?.user.name}
+                </p>
+              </Link>
+              <Button
+                variant="ghost"
+                size="icon"
+                className="h-8 w-6 rounded-full"
+              >
+                <ChevronsUpDown className="h-4 w-4 text-muted-foreground" />
+              </Button>
+            </div>
+          </li>
+        </ul>
+        <div className="flex items-center justify-start gap-7 p-0">
+          <ul className="flex items-center justify-start gap-4">
+            <Button asChild variant="outline">
+              <Link href="/feedback">Feedback</Link>
+            </Button>
+            <li>
+              <Link
+                href="/changelog"
+                className="text-muted-foreground text-sm transition-colors duration-200 hover:text-foreground"
+              >
+                Changelog
+              </Link>
+            </li>
+            <li>
+              <Link
+                href="/help"
+                className="text-muted-foreground text-sm transition-colors duration-200 hover:text-foreground"
+              >
+                Help
+              </Link>
+            </li>
+            <li>
+              <Link
+                href="/docs"
+                className="text-muted-foreground text-sm transition-colors duration-200 hover:text-foreground"
+              >
+                Docs
+              </Link>
+            </li>
+          </ul>
+          <div className="flex items-center justify-start gap-3">
+            <AuthButtons />
+          </div>
+        </div>
+      </nav>
+    </header>
+  )
+}

apps/web/app/(authenticated)/components/navigation.tsx

@@ -0,0 +1,21 @@
+'use client'
+
+import { useIsScroll } from '@repo/ui/hooks/use-scroll'
+import { cn } from '@repo/ui/lib/utils'
+
+export const Naviation = () => {
+  const isScroll = useIsScroll()
+
+  return (
+    <div className="-mt-2.5 no-scrollbar sticky top-0 z-10 flex items-center justify-start shadow-2xs">
+      <div
+        className={cn(
+          'flex items-center px-3 transition-all duration-200 ease-initial md:px-4',
+          isScroll ? 'translate-x-9' : 'translate-none'
+        )}
+      >
+        test
+      </div>
+    </div>
+  )
+}

apps/web/app/(authenticated)/layout.tsx

@@ -2,6 +2,9 @@ import { auth } from '@repo/auth/server'
 import { headers } from 'next/headers'
 import { redirect } from 'next/navigation'
 import type { ReactNode } from 'react'
+import { Footer } from './components/footer'
+import { Header } from './components/header'
+import { Naviation } from './components/navigation'
 
 interface DashboardLayoutProps {
   children: ReactNode
@@ -19,5 +22,14 @@ export default async function DashboardLayout({
     redirect('/login') // Redirect to login if not logged in
   }
 
-  return <>{children}</>
+  return (
+    <>
+      <Header />
+      <main className="min-h-[calc(100vh-64px)]">
+        <Naviation />
+        {children}
+      </main>
+      <Footer />
+    </>
+  )
 }

apps/web/app/(home)/components/header/auth-buttons.tsx

@@ -18,11 +18,13 @@ import {
   DropdownMenuShortcut,
   DropdownMenuTrigger
 } from '@repo/ui/components/ui/dropdown-menu'
+import { Bell } from 'lucide-react'
 import Link from 'next/link'
-import { useRouter } from 'next/navigation'
+import { usePathname, useRouter } from 'next/navigation'
 
 export const AuthButtons = () => {
   const router = useRouter()
+  const pathname = usePathname()
   const { data: session } = useSession()
   const isLoggedIn = !!session?.user
 
@@ -41,11 +43,17 @@ export const AuthButtons = () => {
 
   return (
     <>
-      <Button variant="outline" asChild>
-        <Link href={routes.dashboard.index.path}>
-          {routes.dashboard.index.label}
-        </Link>
-      </Button>
+      {pathname === '/' || pathname === '/home' ? (
+        <Button variant="outline" asChild>
+          <Link href={routes.dashboard.index.path}>
+            {routes.dashboard.index.label}
+          </Link>
+        </Button>
+      ) : (
+        <Button variant="outline" size="icon" className="h-8 w-8 rounded-full">
+          <Bell className="h-4 w-4" />
+        </Button>
+      )}
       <DropdownMenu modal={false}>
         <DropdownMenuTrigger asChild>
           <Avatar className="h-8 w-8 cursor-pointer">

apps/web/next.config.ts

@@ -8,6 +8,10 @@ const nextConfig: NextConfig = {
       {
         protocol: 'https',
         hostname: 'framerusercontent.com'
+      },
+      {
+        protocol: 'https',
+        hostname: 'avatar.vercel.sh'
       }
     ]
   }

apps/web/package.json

@@ -17,7 +17,7 @@
     "@repo/email": "*",
     "@phosphor-icons/react": "^2.1.7",
     "@t3-oss/env-nextjs": "^0.12.0",
-    "next": "^15.2.4",
+    "next": "^15.2.5",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "zod": "^3.24.2"
@@ -26,7 +26,7 @@
     "@repo/typescript-config": "*",
     "@types/node": "^22.14.0",
     "@types/react": "19.1.0",
-    "@types/react-dom": "19.1.1",
-    "typescript": "5.8.2"
+    "@types/react-dom": "19.1.2",
+    "typescript": "5.8.3"
   }
 }