feat: implement EditProfile functionality with form validation and update user profile API integration

thoughts-frontend/app/page.tsx

@@ -1,6 +1,6 @@
 // app/page.tsx
 import { cookies } from "next/headers";
-import { getFeed, getUserProfile } from "@/lib/api";
+import { getFeed, getMe, getUserProfile, Me } from "@/lib/api";
 import { ThoughtCard } from "@/components/thought-card";
 import { PostThoughtForm } from "@/components/post-thought-form";
 import { Button } from "@/components/ui/button";
@@ -20,6 +20,7 @@ export default async function Home() {
 
 async function FeedPage({ token }: { token: string }) {
   const feedData = await getFeed(token);
+  const me = (await getMe(token).catch(() => null)) as 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))
@@ -46,6 +47,7 @@ async function FeedPage({ token }: { token: string }) {
               username: thought.authorUsername,
               avatarUrl: authorDetails.get(thought.authorUsername)?.avatarUrl,
             }}
+            currentUser={me}
           />
         ))}
         {feedData.thoughts.length === 0 && (

thoughts-frontend/app/settings/profile/page.tsx

@@ -0,0 +1,39 @@
+import { cookies } from "next/headers";
+import { redirect } from "next/navigation";
+import { getMe } from "@/lib/api";
+import {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+} from "@/components/ui/card";
+import { EditProfileForm } from "@/components/edit-profile-form";
+
+// This is a Server Component to fetch initial data
+export default async function EditProfilePage() {
+  const token = (await cookies()).get("auth_token")?.value;
+
+  if (!token) {
+    redirect("/login");
+  }
+
+  const me = await getMe(token).catch(() => null);
+
+  if (!me) {
+    redirect("/login");
+  }
+
+  return (
+    <div className="space-y-6">
+      <Card>
+        <CardHeader>
+          <CardTitle>Edit Profile</CardTitle>
+          <CardDescription>
+            Update your public profile information.
+          </CardDescription>
+        </CardHeader>
+        <EditProfileForm currentUser={me} />
+      </Card>
+    </div>
+  );
+}

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

@@ -1,4 +1,4 @@
-import { getMe, getUserProfile, getUserThoughts } from "@/lib/api";
+import { getMe, getUserProfile, getUserThoughts, Me } from "@/lib/api";
 import { UserAvatar } from "@/components/user-avatar";
 import { ThoughtCard } from "@/components/thought-card";
 import { Calendar } from "lucide-react";
@@ -35,7 +35,7 @@ export default async function ProfilePage({ params }: ProfilePageProps) {
   const user = userResult.value;
   const thoughts =
     thoughtsResult.status === "fulfilled" ? thoughtsResult.value.thoughts : [];
-  const me = meResult.status === "fulfilled" ? meResult.value : null;
+  const me = meResult.status === "fulfilled" ? (meResult.value as Me) : null;
 
   // *** SIMPLIFIED LOGIC ***
   // The follow status is now directly available from the `me` object.
@@ -104,6 +104,7 @@ export default async function ProfilePage({ params }: ProfilePageProps) {
                 key={thought.id}
                 thought={thought}
                 author={{ username: user.username, avatarUrl: user.avatarUrl }}
+                currentUser={me || null}
               />
             ))}
             {thoughts.length === 0 && (