Add Profile Settings page and update AccountSwitcher for navigation

src/AppRouter.tsx

@@ -10,6 +10,7 @@ import { SearchPage } from "./pages/Search";
 import { Notifications } from "./pages/Notifications";
 import Messages from "./pages/Messages";
 import { Settings } from "./pages/Settings";
+import { ProfileSettings } from "./pages/ProfileSettings";
 import NotFound from "./pages/NotFound";
 
 export function AppRouter() {
@@ -25,6 +26,7 @@ export function AppRouter() {
         <Route path="/notifications" element={<Notifications />} />
         <Route path="/messages" element={<Messages />} />
         <Route path="/settings" element={<Settings />} />
+        <Route path="/profile-settings" element={<ProfileSettings />} />
         {/* NIP-19 route for npub1, note1, naddr1, nevent1, nprofile1 */}
         <Route path="/:nip19" element={<NIP19Page />} />
         {/* ADD ALL CUSTOM ROUTES ABOVE THE CATCH-ALL "*" ROUTE */}

src/components/auth/AccountSwitcher.tsx

@@ -1,7 +1,7 @@
 // NOTE: This file is stable and usually should not be modified.
 // It is important that all functionality in this file is preserved, and should only be modified if explicitly requested.
 
-import { ChevronDown, LogOut, UserIcon, UserPlus, Wallet } from 'lucide-react';
+import { ChevronDown, LogOut, Settings, UserIcon, UserPlus, Wallet } from 'lucide-react';
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -81,6 +81,13 @@ export function AccountSwitcher({ onAddAccountClick }: AccountSwitcherProps) {
           </DropdownMenuItem>
         ))}
         <DropdownMenuSeparator />
+        <DropdownMenuItem
+          className='flex items-center gap-2 cursor-pointer p-2 rounded-md'
+          onSelect={() => navigate('/profile-settings')}
+        >
+          <Settings className='w-4 h-4' />
+          <span>Profile Settings</span>
+        </DropdownMenuItem>
         <WalletModal>
           <DropdownMenuItem
             className='flex items-center gap-2 cursor-pointer p-2 rounded-md'

src/pages/ProfileSettings.tsx

@@ -0,0 +1,60 @@
+import { useSeoMeta } from '@unhead/react';
+import { Layout } from '@/components/Layout';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { EditProfileForm } from '@/components/EditProfileForm';
+import { useCurrentUser } from '@/hooks/useCurrentUser';
+import { LoginArea } from '@/components/auth/LoginArea';
+import { User } from 'lucide-react';
+
+export function ProfileSettings() {
+  const { user } = useCurrentUser();
+
+  useSeoMeta({
+    title: 'Profile Settings - Lumina',
+    description: 'Edit your Nostr profile information',
+  });
+
+  return (
+    <Layout>
+      <div className="container max-w-2xl py-8 px-4 space-y-6">
+        <div className="flex items-center gap-3">
+          <User className="h-8 w-8 text-primary" />
+          <div>
+            <h1 className="text-3xl font-bold tracking-tight">Profile Settings</h1>
+            <p className="text-muted-foreground mt-1">
+              Manage your Nostr profile information
+            </p>
+          </div>
+        </div>
+
+        {!user ? (
+          <Card>
+            <CardHeader>
+              <CardTitle>Login Required</CardTitle>
+              <CardDescription>
+                You need to be logged in to edit your profile
+              </CardDescription>
+            </CardHeader>
+            <CardContent className="flex justify-center py-8">
+              <LoginArea className="max-w-60" />
+            </CardContent>
+          </Card>
+        ) : (
+          <Card>
+            <CardHeader>
+              <CardTitle>Edit Profile</CardTitle>
+              <CardDescription>
+                Update your profile information. Changes will be published to Nostr relays.
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              <EditProfileForm />
+            </CardContent>
+          </Card>
+        )}
+      </div>
+    </Layout>
+  );
+}
+
+export default ProfileSettings;