feat: update layout and components for improved user experience, add theme toggle and main navigation

thoughts-frontend/app/layout.tsx

@@ -16,8 +16,8 @@ const geistMono = Geist_Mono({
 });
 
 export const metadata: Metadata = {
-  title: "Create Next App",
+  title: "Thoughts",
-  description: "Generated by create next app",
+  description: "A social network for sharing thoughts",
 };
 
 export default function RootLayout({

thoughts-frontend/app/page.tsx

@@ -1,15 +1,13 @@
-// app/page.tsx
 import { cookies } from "next/headers";
-import { getFeed, getMe, getUserProfile, Me, Thought } from "@/lib/api";
+import { getFeed, getMe, getUserProfile, Me, User } from "@/lib/api";
-import { ThoughtCard } from "@/components/thought-card";
 import { PostThoughtForm } from "@/components/post-thought-form";
 import { Button } from "@/components/ui/button";
 import Link from "next/link";
 import { PopularTags } from "@/components/popular-tags";
 import { ThoughtThread } from "@/components/thought-thread";
 import { buildThoughtThreads } from "@/lib/utils";
+import { TopFriends } from "@/components/top-friends";
 
-// This is now an async Server Component
 export default async function Home() {
   const token = (await cookies()).get("auth_token")?.value ?? null;
 
@@ -21,50 +19,66 @@ export default async function Home() {
 }
 
 async function FeedPage({ token }: { token: string }) {
-  const feedData = await getFeed(token);
+  const [feedData, me] = await Promise.all([
-  const me = (await getMe(token).catch(() => null)) as Me | null;
+    getFeed(token),
+    getMe(token).catch(() => null) as Promise<Me | null>,
+  ]);
+
   const authors = [...new Set(feedData.thoughts.map((t) => t.authorUsername))];
   const userProfiles = await Promise.all(
     authors.map((username) => getUserProfile(username, token).catch(() => null))
   );
 
-  const authorDetails = new Map(
+  const authorDetails = new Map<string, { avatarUrl?: string | null }>(
     userProfiles
-      .filter(Boolean)
+      .filter((u): u is User => !!u)
-      .map((user) => [user!.username, { avatarUrl: user!.avatarUrl }])
+      .map((user) => [user.username, { avatarUrl: user.avatarUrl }])
   );
 
-  const allThoughts = feedData.thoughts;
+  const { topLevelThoughts, repliesByParentId } = buildThoughtThreads(
-  const { topLevelThoughts, repliesByParentId } =
+    feedData.thoughts
-    buildThoughtThreads(allThoughts);
+  );
 
   return (
-    <div className="container mx-auto max-w-4xl p-4 sm:p-6 grid grid-cols-1 md:grid-cols-3 gap-8">
+    <div className="container mx-auto max-w-6xl p-4 sm:p-6">
-      <main className="md:col-span-2 space-y-6">
+      <div className="grid grid-cols-1 lg:grid-cols-4 gap-8">
-        <header className="my-6">
+        <aside className="hidden lg:block lg:col-span-1">
-          <h1 className="text-3xl font-bold">Your Feed</h1>
+          <div className="sticky top-20 space-y-6">
-        </header>
+            <h2 className="text-lg font-semibold">Filters & Sorting</h2>
-        <PostThoughtForm />
+            <p className="text-sm text-muted-foreground">Coming soon...</p>
-        <main className="space-y-6">
+          </div>
-          {topLevelThoughts.map((thought) => (
+        </aside>
-            <ThoughtThread
+
-              key={thought.id}
+        <main className="col-span-1 lg:col-span-2 space-y-6">
-              thought={thought}
+          <header className="mb-6">
-              repliesByParentId={repliesByParentId}
+            <h1 className="text-3xl font-bold">Your Feed</h1>
-              authorDetails={authorDetails}
+          </header>
-              currentUser={me}
+          <PostThoughtForm />
-            />
+          <div className="space-y-6">
-          ))}
+            {topLevelThoughts.map((thought) => (
-          {topLevelThoughts.length === 0 && (
+              <ThoughtThread
-            <p className="text-center text-muted-foreground pt-8">
+                key={thought.id}
-              Your feed is empty. Follow some users to see their thoughts here!
+                thought={thought}
-            </p>
+                repliesByParentId={repliesByParentId}
-          )}
+                authorDetails={authorDetails}
+                currentUser={me}
+              />
+            ))}
+            {topLevelThoughts.length === 0 && (
+              <p className="text-center text-muted-foreground pt-8">
+                Your feed is empty. Follow some users to see their thoughts!
+              </p>
+            )}
+          </div>
         </main>
-      </main>
+
-      <aside className="md:col-span-1 space-y-6 pt-20">
+        <aside className="hidden lg:block lg:col-span-1">
-        <PopularTags />
+          <div className="sticky top-20 space-y-6">
-      </aside>
+            {me?.topFriends && <TopFriends usernames={me.topFriends} />}
+            <PopularTags />
+          </div>
+        </aside>
+      </div>
     </div>
   );
 }

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

@@ -62,69 +62,75 @@ export default async function ProfilePage({ params }: ProfilePageProps) {
         }}
       />
 
-      <main className="container mx-auto max-w-3xl p-4 -mt-16 grid grid-cols-1 md:grid-cols-3 gap-8">
+      <main className="container mx-auto max-w-6xl p-4 -mt-16 grid grid-cols-1 lg:grid-cols-4 gap-8">
-        <aside className="md:col-span-1 space-y-6 pt-24">
+        {/* Left Sidebar (Profile Card & Top Friends) */}
-          <TopFriends usernames={user.topFriends} />
+        <aside className="col-span-1 lg:col-span-1 space-y-6">
-        </aside>
+          <div className="sticky top-20 space-y-6">
-        <div className="md:col-span-2 mt-8 md:mt-0 space-y-4">
+            <Card className="p-6 bg-card/80 backdrop-blur-lg">
-          <Card className="p-6 bg-card/80 backdrop-blur-lg">
+              <div className="flex justify-between items-start">
-            <div className="flex justify-between items-start">
+                <div className="flex items-end gap-4">
-              <div className="flex items-end gap-4">
+                  <div className="w-24 h-24 rounded-full border-4 border-background shrink-0">
-                <div className="w-24 h-24 rounded-full border-4 border-background shrink-0">
+                    <UserAvatar src={user.avatarUrl} alt={user.displayName} />
-                  <UserAvatar src={user.avatarUrl} alt={user.displayName} />
+                  </div>
                 </div>
+                {/* Action Button */}
                 <div>
-                  <h1 className="text-2xl font-bold">
+                  {isOwnProfile ? (
-                    {user.displayName || user.username}
+                    <Button asChild variant="outline" size="sm">
-                  </h1>
+                      <Link href="/settings/profile">
-                  <p className="text-sm text-muted-foreground">
+                        <Settings className="mr-2 h-4 w-4" /> Edit
-                    @{user.username}
+                      </Link>
-                  </p>
+                    </Button>
+                  ) : token ? (
+                    <FollowButton
+                      username={user.username}
+                      isInitiallyFollowing={isFollowing}
+                    />
+                  ) : null}
                 </div>
               </div>
 
-              <div>
+              <div className="mt-4">
-                {isOwnProfile ? (
+                <h1 className="text-2xl font-bold">
-                  <Button asChild variant="outline">
+                  {user.displayName || user.username}
-                    <Link href="/settings/profile">
+                </h1>
-                      <Settings className="mr-2 h-4 w-4" />
+                <p className="text-sm text-muted-foreground">
-                      Settings
+                  @{user.username}
-                    </Link>
+                </p>
-                  </Button>
-                ) : token ? (
-                  <FollowButton
-                    username={user.username}
-                    isInitiallyFollowing={isFollowing}
-                  />
-                ) : null}
               </div>
-            </div>
 
-            <p className="mt-4 whitespace-pre-wrap">{user.bio}</p>
+              <p className="mt-4 text-sm whitespace-pre-wrap">{user.bio}</p>
-            <div className="flex items-center gap-2 mt-4 text-sm text-muted-foreground">
-              <Calendar className="h-4 w-4" />
-              <span>Joined {new Date(user.joinedAt).toLocaleDateString()}</span>
-            </div>
-          </Card>
 
-          {/* Thoughts Feed */}
+              <div className="flex items-center gap-2 mt-4 text-sm text-muted-foreground">
-          <div className="mt-8 space-y-4">
+                <Calendar className="h-4 w-4" />
-            {topLevelThoughts.map((thought) => (
+                <span>
-              <ThoughtThread
+                  Joined {new Date(user.joinedAt).toLocaleDateString()}
-                key={thought.id}
+                </span>
-                thought={thought}
+              </div>
-                repliesByParentId={repliesByParentId}
+            </Card>
-                authorDetails={authorDetails}
+
-                currentUser={me}
+            <TopFriends usernames={user.topFriends} />
-              />
-            ))}
-            {topLevelThoughts.length === 0 && (
-              <p className="text-center text-muted-foreground pt-8">
-                Your feed is empty. Follow some users to see their thoughts
-                here!
-              </p>
-            )}
           </div>
+        </aside>
+
+        {/* Main Content (Thoughts Feed) */}
+        <div className="col-span-1 lg:col-span-3 space-y-4">
+          {topLevelThoughts.map((thought) => (
+            <ThoughtThread
+              key={thought.id}
+              thought={thought}
+              repliesByParentId={repliesByParentId}
+              authorDetails={authorDetails}
+              currentUser={me}
+            />
+          ))}
+          {topLevelThoughts.length === 0 && (
+            <Card className="flex items-center justify-center h-48">
+              <p className="text-center text-muted-foreground">
+                This user hasn&apos;t posted any public thoughts yet.
+              </p>
+            </Card>
+          )}
         </div>
       </main>
     </div>

thoughts-frontend/components/header.tsx

@@ -1,37 +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";
+import { MainNav } from "./main-nav";
+import { ThemeToggle } from "./theme-toggle";
+import { Wind } from "lucide-react";
 
 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="w-full flex h-14 items-center px-2">
-        <div className="mr-4 flex">
+        <div className="flex gap-2">
-          <Link href="/" className="mr-6 flex items-center space-x-2">
+          <Link href="/" className="flex items-center gap-1">
-            <span className="font-bold">Thoughts</span>
+            <span className="hidden font-bold sm:inline-block">Thoughts</span>
           </Link>
+          <MainNav />
         </div>
-        <div className="flex flex-1 items-center justify-end space-x-4">
+        <div className="flex flex-1 items-center justify-end space-x-2">
-          <nav className="flex items-center space-x-2">
+          <ThemeToggle />
-            {token ? (
+          {token ? (
-              <UserNav />
+            <UserNav />
-            ) : (
+          ) : (
-              <>
+            <>
-                <Button asChild variant="ghost">
+              <Button asChild variant="ghost" size="sm">
-                  <Link href="/login">Login</Link>
+                <Link href="/login">Login</Link>
-                </Button>
+              </Button>
-                <Button asChild>
+              <Button asChild size="sm">
-                  <Link href="/register">Register</Link>
+                <Link href="/register">Register</Link>
-                </Button>
+              </Button>
-              </>
+            </>
-            )}
+          )}
-          </nav>
         </div>
       </div>
     </header>

thoughts-frontend/components/main-nav.tsx

@@ -0,0 +1,22 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { cn } from "@/lib/utils";
+
+export function MainNav() {
+  const pathname = usePathname();
+  return (
+    <nav className="hidden md:flex items-center space-x-6 text-sm font-medium">
+      <Link
+        href="/"
+        className={cn(
+          "transition-colors hover:text-foreground/80",
+          pathname === "/" ? "text-foreground" : "text-foreground/60"
+        )}
+      >
+        Feed
+      </Link>
+    </nav>
+  );
+}

thoughts-frontend/components/theme-provider.tsx

@@ -0,0 +1,11 @@
+"use client";
+
+import * as React from "react";
+import {
+  ThemeProvider as NextThemesProvider,
+  ThemeProviderProps,
+} from "next-themes";
+
+export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
+  return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
+}

thoughts-frontend/components/theme-toggle.tsx

@@ -0,0 +1,40 @@
+"use client";
+
+import * as React from "react";
+import { Moon, Sun } from "lucide-react";
+import { useTheme } from "next-themes";
+
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+
+export function ThemeToggle() {
+  const { setTheme } = useTheme();
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="ghost" size="icon">
+          <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+          <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+          <span className="sr-only">Toggle theme</span>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        <DropdownMenuItem onClick={() => setTheme("light")}>
+          Light
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setTheme("dark")}>
+          Dark
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setTheme("system")}>
+          System
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}