From 360b9062b826a4fe3e59df6b8a34ef13a5d2f4a6 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Thu, 17 Apr 2025 23:27:15 -0500
Subject: [PATCH] Include the AccountSwitcher component

---
 CONTEXT.md                              |  41 +-------
 src/components/auth/AccountSwitcher.tsx | 126 ++++++++++++++++++++++++
 2 files changed, 131 insertions(+), 36 deletions(-)
 create mode 100644 src/components/auth/AccountSwitcher.tsx

diff --git a/CONTEXT.md b/CONTEXT.md
index b9d6b82..3d0cb73 100644
--- a/CONTEXT.md
+++ b/CONTEXT.md
@@ -152,54 +152,23 @@ The `useCurrentUser` hook should be used to ensure that the user is logged in be
 
 ### Nostr Login
 
-To add Nostr login functionality, use the included `LoginForm` and `SignupForm` dialog components. For example:
+To enable login with Nostr, simply include the `AccountSwitcher` component already included in this project.
 
 ```tsx
-import LoginForm from "@/components/auth/LoginForm";
-import SignupForm from "@/components/auth/SignupForm";
-import { Button } from "@/components/ui/button";
+import { AccountSwitcher } from "@/components/auth/AccountSwitcher";
 
 function MyComponent() {
-  const [loginDialogOpen, setLoginDialogOpen] = useState(false);
-  const [signupDialogOpen, setSignupDialogOpen] = useState(false);
-
-  const handleLogin = () => {
-    setLoginDialogOpen(false);
-    setSignupDialogOpen(false);
-  };
-
   return (
     <div>
-      <Button onClick={showLoginDialog}>Log in</Button>
-      <Button onClick={showSignupDialog}>Sign up</Button>
+      {/* other components ... */}
 
-      <LoginForm
-        isOpen={loginDialogOpen} 
-        onClose={() => setLoginDialogOpen(false)} 
-        onLogin={handleLogin}
-        onSignup={showSignupDialog}
-      />
-
-      <SignupForm
-        isOpen={signupDialogOpen}
-        onClose={() => setSignupDialogOpen(false)}
-      />
+      <AccountSwitcher />
     </div>
   );
 }
 ```
 
-To access the currently-logged-in account, use the `useCurrentUser` hook, eg:
-
-```typescript
-import { useCurrentUser } from "@/hooks/useCurrentUser";
-
-function MyComponent() {
-  const { user } = useCurrentUser();
-
-  // ...
-}
-```
+The `AccountSwitcher` component displays a "Log in" button when the user is logged out, and changes to an account switcher once the user is logged in.
 
 ## Development Practices
 
diff --git a/src/components/auth/AccountSwitcher.tsx b/src/components/auth/AccountSwitcher.tsx
new file mode 100644
index 0000000..94ce698
--- /dev/null
+++ b/src/components/auth/AccountSwitcher.tsx
@@ -0,0 +1,126 @@
+import { useState } from 'react';
+import { ChevronDown, LogOut, User, UserPlus } from 'lucide-react';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu.tsx';
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar.tsx';
+import { Button } from '@/components/ui/button.tsx';
+import { useNostrLogin } from '@nostrify/react/login';
+import { useQuery } from '@tanstack/react-query';
+import { useNostr } from '@nostrify/react';
+import { NSchema as n, NostrEvent, NostrMetadata } from '@nostrify/nostrify';
+import LoginForm from './LoginForm';
+import SignupForm from './SignupForm';
+
+export function AccountSwitcher() {
+  const { nostr } = useNostr();
+  const { logins, setLogin, removeLogin } = useNostrLogin();
+
+  const [loginDialogOpen, setLoginDialogOpen] = useState(false);
+  const [signupDialogOpen, setSignupDialogOpen] = useState(false);
+
+  const { data: authors } = useQuery({
+    queryKey: ['logins', logins],
+    queryFn: async () => {
+      const events = await nostr.query([{ kinds: [0], authors: logins.map((l) => l.pubkey) }]);
+      return logins.map(({ id, pubkey }): { id: string; pubkey: string; event?: NostrEvent; metadata: NostrMetadata } => {
+        const event = events.find((e) => e.pubkey === pubkey);
+        try {
+          const metadata = n.json().pipe(n.metadata()).parse(event?.content);
+          return { id, pubkey, metadata, event };
+        } catch {
+          return { id, pubkey, metadata: {}, event };
+        }
+      });
+    }
+  });
+
+  const [currentUser, ...otherUsers] = authors || [];
+  const isLoggedIn = !!currentUser;
+
+  const handleLogin = () => {
+    setLoginDialogOpen(false);
+    setSignupDialogOpen(false);
+  };
+
+  if (!isLoggedIn) {
+    return (
+      <Button
+        onClick={() => setLoginDialogOpen(true)}
+        className='flex items-center gap-2 px-4 py-2 rounded-full bg-primary text-primary-foreground w-full font-medium transition-all hover:bg-primary/90 animate-scale-in'
+      >
+        <User className='w-4 h-4' />
+        <span>Log in</span>
+      </Button>
+    );
+  }
+
+  return (
+    <>
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <button className='flex items-center gap-3 p-3 rounded-full hover:bg-accent transition-all w-full text-foreground'>
+            <Avatar className='w-10 h-10'>
+              <AvatarImage src={currentUser.metadata.picture} alt={currentUser.metadata.name} />
+              <AvatarFallback>{currentUser.metadata.name?.charAt(0)}</AvatarFallback>
+            </Avatar>
+            <div className='flex-1 text-left hidden md:block'>
+              <p className='font-medium text-sm'>{currentUser.metadata.name}</p>
+            </div>
+            <ChevronDown className='w-4 h-4 text-muted-foreground' />
+          </button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent className='w-56 p-2 animate-scale-in'>
+          <div className='font-medium text-sm px-2 py-1.5'>Switch Account</div>
+          {otherUsers.map((user) => (
+            <DropdownMenuItem
+              key={user.id}
+              onClick={() => setLogin(user.id)}
+              className='flex items-center gap-2 cursor-pointer p-2 rounded-md'
+            >
+              <Avatar className='w-8 h-8'>
+                <AvatarImage src={user.metadata.picture} alt={user.metadata.name} />
+                <AvatarFallback>{user.metadata.name?.charAt(0)}</AvatarFallback>
+              </Avatar>
+              <div className='flex-1'>
+                <p className='text-sm font-medium'>{user.metadata.name}</p>
+              </div>
+              {user.id === currentUser.id && <div className='w-2 h-2 rounded-full bg-primary'></div>}
+            </DropdownMenuItem>
+          ))}
+          <DropdownMenuSeparator />
+          <DropdownMenuItem
+            onClick={() => setLoginDialogOpen(true)}
+            className='flex items-center gap-2 cursor-pointer p-2 rounded-md'
+          >
+            <UserPlus className='w-4 h-4' />
+            <span>Add another account</span>
+          </DropdownMenuItem>
+          <DropdownMenuItem
+            onClick={() => removeLogin(currentUser.id)}
+            className='flex items-center gap-2 cursor-pointer p-2 rounded-md text-red-500'
+          >
+            <LogOut className='w-4 h-4' />
+            <span>Log out</span>
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+
+      <LoginForm
+        isOpen={loginDialogOpen} 
+        onClose={() => setLoginDialogOpen(false)} 
+        onLogin={handleLogin}
+        onSignup={() => setSignupDialogOpen(true)}
+      />
+
+      <SignupForm
+        isOpen={signupDialogOpen}
+        onClose={() => setSignupDialogOpen(false)}
+      />
+    </>
+  );
+}
\ No newline at end of file