wip

app/(main)/[username]/page.tsx

@@ -5,14 +5,12 @@ import { eq } from "drizzle-orm";
 import { getUserRepositories } from "@/actions/repositories";
 import { RepoList } from "@/components/repo-list";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
-import { CalendarDays, GitBranch } from "lucide-react";
+import { CalendarDays, GitBranch, MapPin, Link as LinkIcon } from "lucide-react";
 import { format } from "date-fns";
+import Link from "next/link";
+import { GithubIcon, XIcon, LinkedInIcon } from "@/components/icons";
 
-export default async function ProfilePage({
-  params,
-}: {
-  params: Promise<{ username: string }>;
-}) {
+export default async function ProfilePage({ params }: { params: Promise<{ username: string }> }) {
   const { username } = await params;
 
   const user = await db.query.users.findFirst({
@@ -29,19 +27,65 @@ export default async function ProfilePage({
     <div className="container px-4 py-8">
       <div className="flex flex-col lg:flex-row gap-8">
         <aside className="lg:w-72 shrink-0">
-          <div className="sticky top-20">
-            <Avatar className="w-64 h-64 mx-auto lg:mx-0 mb-4 border-4 border-border">
-              <AvatarImage src={user.image || undefined} />
-              <AvatarFallback className="text-6xl bg-accent/20">
-                {user.name.charAt(0).toUpperCase()}
-              </AvatarFallback>
+          <div className="sticky top-20 space-y-4">
+            <Avatar className="w-64 h-64 mx-auto lg:mx-0 border border-border">
+              <AvatarImage src={user.avatarUrl || user.image || undefined} />
+              <AvatarFallback className="text-6xl bg-accent/20">{user.name.charAt(0).toUpperCase()}</AvatarFallback>
             </Avatar>
-            <h1 className="text-2xl font-bold">{user.name}</h1>
-            <p className="text-lg text-muted-foreground">@{user.username}</p>
-            <div className="flex items-center gap-2 mt-4 text-sm text-muted-foreground">
-              <CalendarDays className="h-4 w-4" />
-              <span>Joined {format(new Date(user.createdAt), "MMMM yyyy")}</span>
+
+            <div>
+              <h1 className="text-2xl font-bold">{user.name}</h1>
+              <p className="text-lg text-muted-foreground">@{user.username}</p>
+              {user.pronouns && <p className="text-sm text-muted-foreground">{user.pronouns}</p>}
             </div>
+
+            {user.bio && <p className="text-sm">{user.bio}</p>}
+
+            <div className="space-y-2 text-sm">
+              {user.location && (
+                <div className="flex items-center gap-2 text-muted-foreground">
+                  <MapPin className="h-4 w-4" />
+                  <span>{user.location}</span>
+                </div>
+              )}
+              {user.website && (
+                <div className="flex items-center gap-2 text-muted-foreground">
+                  <LinkIcon className="h-4 w-4" />
+                  <Link href={user.website} target="_blank" className="text-primary hover:underline truncate">
+                    {user.website.replace(/^https?:\/\//, "")}
+                  </Link>
+                </div>
+              )}
+              <div className="flex items-center gap-2 text-muted-foreground">
+                <CalendarDays className="h-4 w-4" />
+                <span>Joined {format(new Date(user.createdAt), "MMMM yyyy")}</span>
+              </div>
+            </div>
+
+            {user.socialLinks && (
+              <div className="flex items-center gap-3">
+                {user.socialLinks.github && (
+                  <Link href={user.socialLinks.github} target="_blank" className="text-muted-foreground hover:text-foreground transition-colors">
+                    <GithubIcon className="h-5 w-5" />
+                  </Link>
+                )}
+                {user.socialLinks.twitter && (
+                  <Link href={user.socialLinks.twitter} target="_blank" className="text-muted-foreground hover:text-foreground transition-colors">
+                    <XIcon className="h-5 w-5" />
+                  </Link>
+                )}
+                {user.socialLinks.linkedin && (
+                  <Link href={user.socialLinks.linkedin} target="_blank" className="text-muted-foreground hover:text-foreground transition-colors">
+                    <LinkedInIcon className="h-5 w-5" />
+                  </Link>
+                )}
+                {user.socialLinks.custom?.map((link, i) => (
+                  <Link key={i} href={link} target="_blank" className="text-muted-foreground hover:text-foreground transition-colors">
+                    <LinkIcon className="h-5 w-5" />
+                  </Link>
+                ))}
+              </div>
+            )}
           </div>
         </aside>
 
@@ -56,9 +100,7 @@ export default async function ProfilePage({
             <div className="border border-dashed border-border rounded-lg p-12 text-center">
               <GitBranch className="h-12 w-12 mx-auto mb-4 text-muted-foreground" />
               <h3 className="text-lg font-medium mb-2">No repositories yet</h3>
-              <p className="text-muted-foreground">
-                {user.name} hasn&apos;t created any public repositories.
-              </p>
+              <p className="text-muted-foreground">{user.name} hasn&apos;t created any public repositories.</p>
             </div>
           ) : (
             <RepoList repos={repos} username={username} />
@@ -68,4 +110,3 @@ export default async function ProfilePage({
     </div>
   );
 }
-

app/(main)/settings/account/page.tsx

@@ -0,0 +1,55 @@
+import { redirect } from "next/navigation";
+import { getCurrentUser } from "@/actions/settings";
+import { EmailForm } from "@/components/settings/email-form";
+import { PasswordForm } from "@/components/settings/password-form";
+import { DeleteAccount } from "@/components/settings/delete-account";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+
+export default async function AccountSettingsPage() {
+  const user = await getCurrentUser();
+
+  if (!user) {
+    redirect("/login");
+  }
+
+  return (
+    <div className="space-y-8">
+      <Card>
+        <CardHeader>
+          <CardTitle>Email Address</CardTitle>
+          <CardDescription>
+            Change the email associated with your account
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <EmailForm currentEmail={user.email} />
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Password</CardTitle>
+          <CardDescription>
+            Update your password to keep your account secure
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <PasswordForm />
+        </CardContent>
+      </Card>
+
+      <Card className="border-red-500/20">
+        <CardHeader>
+          <CardTitle className="text-red-500">Danger Zone</CardTitle>
+          <CardDescription>
+            Irreversible actions that affect your account
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <DeleteAccount username={user.username} />
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
+

app/(main)/settings/layout.tsx

@@ -0,0 +1,28 @@
+import { redirect } from "next/navigation";
+import { getSession } from "@/lib/session";
+import { SettingsNav } from "@/components/settings/settings-nav";
+
+export default async function SettingsLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const session = await getSession();
+
+  if (!session?.user) {
+    redirect("/login");
+  }
+
+  return (
+    <div className="container max-w-5xl py-8">
+      <h1 className="text-2xl font-semibold mb-8">Settings</h1>
+      <div className="flex gap-8">
+        <aside className="w-48 shrink-0">
+          <SettingsNav />
+        </aside>
+        <main className="flex-1 min-w-0">{children}</main>
+      </div>
+    </div>
+  );
+}
+

app/(main)/settings/page.tsx

@@ -0,0 +1,65 @@
+import { redirect } from "next/navigation";
+import { getCurrentUser } from "@/actions/settings";
+import { ProfileForm } from "@/components/settings/profile-form";
+import { AvatarUpload } from "@/components/settings/avatar-upload";
+import { SocialLinksForm } from "@/components/settings/social-links-form";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Separator } from "@/components/ui/separator";
+
+export default async function SettingsPage() {
+  const user = await getCurrentUser();
+
+  if (!user) {
+    redirect("/login");
+  }
+
+  return (
+    <div className="space-y-8">
+      <Card>
+        <CardHeader>
+          <CardTitle>Profile Picture</CardTitle>
+          <CardDescription>
+            Upload a picture to personalize your profile
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <AvatarUpload currentAvatar={user.avatarUrl} name={user.name} />
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Profile Information</CardTitle>
+          <CardDescription>
+            Update your profile details visible to other users
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <ProfileForm
+            user={{
+              name: user.name,
+              username: user.username,
+              bio: user.bio,
+              location: user.location,
+              website: user.website,
+              pronouns: user.pronouns,
+            }}
+          />
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Social Links</CardTitle>
+          <CardDescription>
+            Add links to your social profiles
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <SocialLinksForm socialLinks={user.socialLinks} />
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
+