feat: add Header and UserNav components, update layout to include Header and enhance profile page with settings link

thoughts-frontend/app/layout.tsx

@@ -3,6 +3,7 @@ import { Geist, Geist_Mono } from "next/font/google";
 import "./globals.css";
 import { AuthProvider } from "@/hooks/use-auth";
 import { Toaster } from "@/components/ui/sonner";
+import { Header } from "@/components/header";
 
 const geistSans = Geist({
   variable: "--font-geist-sans",
@@ -30,7 +31,8 @@ export default function RootLayout({
         className={`${geistSans.variable} ${geistMono.variable} antialiased`}
       >
         <AuthProvider>
-          {children}
+          <Header />
+          <main className="flex-1">{children}</main>
           <Toaster />
         </AuthProvider>
       </body>

thoughts-frontend/app/users/[username]/page.tsx

@@ -1,6 +1,6 @@
 import { getMe, getUserProfile, getUserThoughts, Me } from "@/lib/api";
 import { UserAvatar } from "@/components/user-avatar";
-import { Calendar } from "lucide-react";
+import { Calendar, Settings } from "lucide-react";
 import { Card } from "@/components/ui/card";
 import { notFound } from "next/navigation";
 import { cookies } from "next/headers";
@@ -8,6 +8,8 @@ import { FollowButton } from "@/components/follow-button";
 import { TopFriends } from "@/components/top-friends";
 import { buildThoughtThreads } from "@/lib/utils";
 import { ThoughtThread } from "@/components/thought-thread";
+import { Button } from "@/components/ui/button";
+import Link from "next/link";
 
 interface ProfilePageProps {
   params: { username: string };
@@ -54,7 +56,7 @@ export default async function ProfilePage({ params }: ProfilePageProps) {
       )}
 
       <div
-        className="h-48 bg-gray-200 bg-cover bg-center"
+        className="h-48 bg-gray-200 bg-cover bg-center profile-header"
         style={{
           backgroundImage: user.headerUrl ? `url(${user.headerUrl})` : "none",
         }}
@@ -81,12 +83,21 @@ export default async function ProfilePage({ params }: ProfilePageProps) {
                 </div>
               </div>
 
-              {!isOwnProfile && token && (
+              <div>
+                {isOwnProfile ? (
+                  <Button asChild variant="outline">
+                    <Link href="/settings/profile">
+                      <Settings className="mr-2 h-4 w-4" />
+                      Settings
+                    </Link>
+                  </Button>
+                ) : token ? (
                   <FollowButton
                     username={user.username}
                     isInitiallyFollowing={isFollowing}
                   />
-              )}
+                ) : null}
+              </div>
             </div>
 
             <p className="mt-4 whitespace-pre-wrap">{user.bio}</p>

thoughts-frontend/components/header.tsx

@@ -0,0 +1,39 @@
+// components/header.tsx
+"use client";
+
+import { useAuth } from "@/hooks/use-auth";
+import Link from "next/link";
+import { Button } from "./ui/button";
+import { UserNav } from "./user-nav";
+
+export function Header() {
+  const { token } = useAuth();
+
+  return (
+    <header className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
+      <div className="container flex h-14 items-center">
+        <div className="mr-4 flex">
+          <Link href="/" className="mr-6 flex items-center space-x-2">
+            <span className="font-bold">Thoughts</span>
+          </Link>
+        </div>
+        <div className="flex flex-1 items-center justify-end space-x-4">
+          <nav className="flex items-center space-x-2">
+            {token ? (
+              <UserNav />
+            ) : (
+              <>
+                <Button asChild variant="ghost">
+                  <Link href="/login">Login</Link>
+                </Button>
+                <Button asChild>
+                  <Link href="/register">Register</Link>
+                </Button>
+              </>
+            )}
+          </nav>
+        </div>
+      </div>
+    </header>
+  );
+}

thoughts-frontend/components/thought-card.tsx

@@ -70,7 +70,7 @@ export function ThoughtCard({
     try {
       await deleteThought(thought.id, token);
       toast.success("Thought deleted successfully.");
-      router.refresh(); // Refresh the feed
+      router.refresh();
     } catch (error) {
       toast.error("Failed to delete thought.");
     } finally {
@@ -101,13 +101,16 @@ export function ThoughtCard({
       </div>
       <Card>
         <CardHeader className="flex flex-row items-center justify-between space-y-0">
-          <div className="flex items-center gap-4">
+          <Link
+            href={`/users/${author.username}`}
+            className="flex items-center gap-4"
+          >
             <UserAvatar src={author.avatarUrl} alt={author.username} />
             <div className="flex flex-col">
               <span className="font-bold">{author.username}</span>
               <span className="text-sm text-muted-foreground">{timeAgo}</span>
             </div>
-          </div>
+          </Link>
           {isAuthor && (
             <DropdownMenu>
               <DropdownMenuTrigger asChild>

thoughts-frontend/components/user-nav.tsx

@@ -0,0 +1,90 @@
+// components/user-nav.tsx
+"use client";
+
+import { useEffect, useState } from "react";
+import { useAuth } from "@/hooks/use-auth";
+import { getMe, User } from "@/lib/api";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Button } from "@/components/ui/button";
+import { UserAvatar } from "./user-avatar";
+import { Skeleton } from "./ui/skeleton";
+import Link from "next/link";
+import { LogOut, User as UserIcon } from "lucide-react";
+import { useRouter } from "next/navigation";
+
+export function UserNav() {
+  const { token, setToken } = useAuth();
+  const [user, setUser] = useState<User | null>(null);
+  const [loading, setLoading] = useState(true);
+  const { replace } = useRouter();
+
+  useEffect(() => {
+    if (token) {
+      setLoading(true);
+      getMe(token)
+        .then(setUser)
+        .catch(() => {
+          // Invalid token, log the user out
+          setToken(null);
+        })
+        .finally(() => setLoading(false));
+    } else {
+      setLoading(false);
+    }
+  }, [token, setToken]);
+
+  const handleLogout = () => {
+    setToken(null);
+    replace("/login");
+  };
+
+  if (loading) {
+    return <Skeleton className="h-10 w-10 rounded-full" />;
+  }
+
+  if (!token || !user) {
+    // Render nothing if the user is not logged in
+    return null;
+  }
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="ghost" className="relative h-10 w-10 rounded-full">
+          <UserAvatar src={user.avatarUrl} alt={user.displayName} />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent className="w-56" align="end" forceMount>
+        <DropdownMenuLabel className="font-normal">
+          <div className="flex flex-col space-y-1">
+            <p className="text-sm font-medium leading-none">
+              {user.displayName || user.username}
+            </p>
+            <p className="text-xs leading-none text-muted-foreground">
+              @{user.username}
+            </p>
+          </div>
+        </DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem asChild>
+          <Link href={`/users/${user.username}`}>
+            <UserIcon className="mr-2 h-4 w-4" />
+            <span>Profile</span>
+          </Link>
+        </DropdownMenuItem>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem onClick={handleLogout}>
+          <LogOut className="mr-2 h-4 w-4" />
+          <span>Log out</span>
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}