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

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>
+  );
+}