multiuser

src/app/pages/client/sidebar/SettingsTab.tsx

@@ -1,5 +1,7 @@
-import React, { useState } from 'react';
-import { Text } from 'folds';
+import React, { MouseEventHandler, useState } from 'react';
+import { Box, config, Icon, Icons, Menu, MenuItem, PopOut, RectCords, Text } from 'folds';
+import FocusTrap from 'focus-trap-react';
+import { useNavigate } from 'react-router-dom';
 import { SidebarItem, SidebarItemTooltip, SidebarAvatar } from '../../../components/sidebar';
 import { UserAvatar } from '../../../components/user-avatar';
 import { useMatrixClient } from '../../../hooks/useMatrixClient';
@@ -9,14 +11,20 @@ import { useMediaAuthentication } from '../../../hooks/useMediaAuthentication';
 import { Settings } from '../../../features/settings';
 import { useUserProfile } from '../../../hooks/useUserProfile';
 import { Modal500 } from '../../../components/Modal500';
+import { AccountSwitcher } from '../../../components/account-switcher';
+import { stopPropagation } from '../../../utils/keyboard';
+import { getLoginPath, withSearchParam } from '../../pathUtils';
+import { logoutClient } from '../../../../client/initMatrix';
 
 export function SettingsTab() {
   const mx = useMatrixClient();
   const useAuthentication = useMediaAuthentication();
   const userId = mx.getUserId()!;
   const profile = useUserProfile(userId);
+  const navigate = useNavigate();
 
   const [settings, setSettings] = useState(false);
+  const [menuAnchor, setMenuAnchor] = useState<RectCords>();
 
   const displayName = profile.displayName ?? getMxIdLocalPart(userId) ?? userId;
   const avatarUrl = profile.avatarUrl
@@ -26,11 +34,22 @@ export function SettingsTab() {
   const openSettings = () => setSettings(true);
   const closeSettings = () => setSettings(false);
 
+  const handleContextMenu: MouseEventHandler<HTMLButtonElement> = (evt) => {
+    evt.preventDefault();
+    const cords = evt.currentTarget.getBoundingClientRect();
+    setMenuAnchor(cords);
+  };
+
   return (
     <SidebarItem active={settings}>
       <SidebarItemTooltip tooltip="User Settings">
         {(triggerRef) => (
-          <SidebarAvatar as="button" ref={triggerRef} onClick={openSettings}>
+          <SidebarAvatar 
+            as="button" 
+            ref={triggerRef} 
+            onClick={openSettings}
+            onContextMenu={handleContextMenu}
+          >
             <UserAvatar
               userId={userId}
               src={avatarUrl}
@@ -39,6 +58,69 @@ export function SettingsTab() {
           </SidebarAvatar>
         )}
       </SidebarItemTooltip>
+      
+      <PopOut
+        anchor={menuAnchor}
+        position="Right"
+        align="Start"
+        offset={6}
+        content={
+          <FocusTrap
+            focusTrapOptions={{
+              initialFocus: false,
+              returnFocusOnDeactivate: false,
+              onDeactivate: () => setMenuAnchor(undefined),
+              clickOutsideDeactivates: true,
+              isKeyForward: (evt: KeyboardEvent) => evt.key === 'ArrowDown',
+              isKeyBackward: (evt: KeyboardEvent) => evt.key === 'ArrowUp',
+              escapeDeactivates: stopPropagation,
+            }}
+          >
+            <Menu>
+              <Box direction="Column" gap="100" style={{ padding: config.space.S100 }}>
+                <AccountSwitcher currentUserId={userId} />
+                <MenuItem 
+                  onClick={() => {
+                    setMenuAnchor(undefined);
+                    const loginPath = getLoginPath() + '?add-account=true';
+                    console.log('[SettingsTab] Navigating to add account:', loginPath);
+                    localStorage.setItem('debug-add-account-nav', JSON.stringify({
+                      timestamp: new Date().toISOString(),
+                      loginPath,
+                      currentUrl: window.location.href
+                    }));
+                    navigate(loginPath);
+                  }} 
+                  size="300" 
+                  radii="300"
+                >
+                  <Box gap="200" alignItems="Center">
+                    <Icon size="100" src={Icons.Plus} />
+                    <Text as="span" size="T300" truncate>
+                      Add Account
+                    </Text>
+                  </Box>
+                </MenuItem>
+                <MenuItem
+                  onClick={() => {
+                    setMenuAnchor(undefined);
+                    logoutClient(mx);
+                  }}
+                  size="300"
+                  radii="300"
+                  variant="Critical"
+                  fill="None"
+                >
+                  <Text as="span" size="T300" truncate>
+                    Logout
+                  </Text>
+                </MenuItem>
+              </Box>
+            </Menu>
+          </FocusTrap>
+        }
+      />
+      
       {settings && (
         <Modal500 requestClose={closeSettings}>
           <Settings requestClose={closeSettings} />