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

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