multiuser

src/app/pages/client/ClientRoot.tsx

@@ -33,11 +33,13 @@ import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback';
 import { useSyncState } from '../../hooks/useSyncState';
 import { stopPropagation } from '../../utils/keyboard';
 import { AuthMetadataProvider } from '../../hooks/useAuthMetadata';
-import { getFallbackSession } from '../../state/sessions';
+import { getCurrentSession } from '../../state/sessions';
 import { CallProviderWrapper } from '../../features/call/CallProviderWrapper';
 import { isTauriMobile, startBackgroundSync, stopBackgroundSync } from '../../utils/tauri';
 import { TitleBar } from '../../components/title-bar';
 import { initPaarrotAPI } from '../../paarrot-api';
+import { AccountSwitcher } from '../../components/account-switcher';
+import { getLoginPath, withSearchParam } from '../pathUtils';
 
 function ClientRootLoading() {
   return (
@@ -50,81 +52,6 @@ function ClientRootLoading() {
   );
 }
 
-function ClientRootOptions({ mx }: { mx?: MatrixClient }) {
-  const [menuAnchor, setMenuAnchor] = useState<RectCords>();
-
-  const handleToggle: MouseEventHandler<HTMLButtonElement> = (evt) => {
-    const cords = evt.currentTarget.getBoundingClientRect();
-    setMenuAnchor((currentState) => {
-      if (currentState) return undefined;
-      return cords;
-    });
-  };
-
-  return (
-    <IconButton
-      style={{
-        position: 'absolute',
-        top: config.space.S100,
-        right: config.space.S100,
-      }}
-      variant="Background"
-      fill="None"
-      onClick={handleToggle}
-    >
-      <Icon size="200" src={Icons.VerticalDots} />
-      <PopOut
-        anchor={menuAnchor}
-        position="Bottom"
-        align="End"
-        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 }}>
-                {mx && (
-                  <MenuItem onClick={() => clearCacheAndReload(mx)} size="300" radii="300">
-                    <Text as="span" size="T300" truncate>
-                      Clear Cache and Reload
-                    </Text>
-                  </MenuItem>
-                )}
-                <MenuItem
-                  onClick={() => {
-                    if (mx) {
-                      logoutClient(mx);
-                      return;
-                    }
-                    clearLoginData();
-                  }}
-                  size="300"
-                  radii="300"
-                  variant="Critical"
-                  fill="None"
-                >
-                  <Text as="span" size="T300" truncate>
-                    Logout
-                  </Text>
-                </MenuItem>
-              </Box>
-            </Menu>
-          </FocusTrap>
-        }
-      />
-    </IconButton>
-  );
-}
-
 const useLogoutListener = (mx?: MatrixClient) => {
   useEffect(() => {
     const handleLogout: HttpApiEventHandlerMap[HttpApiEvent.SessionLoggedOut] = async () => {
@@ -230,11 +157,12 @@ type ClientRootProps = {
 };
 export function ClientRoot({ children }: ClientRootProps) {
   const [loading, setLoading] = useState(true);
-  const { baseUrl } = getFallbackSession() ?? {};
+  const [syncError, setSyncError] = useState<Error | null>(null);
+  const { baseUrl } = getCurrentSession() ?? {};
 
   const [loadState, loadMatrix] = useAsyncCallback<MatrixClient, Error, []>(
     useCallback(() => {
-      const session = getFallbackSession();
+      const session = getCurrentSession();
       if (!session) {
         throw new Error('No session Found!');
       }
@@ -269,11 +197,29 @@ export function ClientRoot({ children }: ClientRootProps) {
     }
   }, [mx, startMatrix]);
 
+  // Timeout if sync takes too long
+  useEffect(() => {
+    if (!mx || !loading) return;
+
+    const timeout = setTimeout(() => {
+      console.error('[ClientRoot] Sync timeout - client failed to reach PREPARED state');
+      setSyncError(new Error('Sync timeout - failed to connect to homeserver'));
+    }, 30000); // 30 second timeout
+
+    return () => clearTimeout(timeout);
+  }, [mx, loading]);
+
   useSyncState(
     mx,
-    useCallback((state) => {
+    useCallback((state, prevState, data) => {
+      console.log('[ClientRoot] Sync state changed:', state, 'Error:', data);
       if (state === 'PREPARED') {
         setLoading(false);
+        setSyncError(null);
+      } else if (state === 'ERROR') {
+        const error = data instanceof Error ? data : new Error('Sync failed');
+        console.error('[ClientRoot] Sync error:', error);
+        setSyncError(error);
       }
     }, [])
   );
@@ -281,7 +227,6 @@ export function ClientRoot({ children }: ClientRootProps) {
   return (
     <SpecVersions baseUrl={baseUrl!}>
       <TitleBar mx={mx} />
-      {loading && <ClientRootOptions mx={mx} />}
       {(loadState.status === AsyncStatus.Error || startState.status === AsyncStatus.Error) && (
         <SplashScreen>
           <Box direction="Column" grow="Yes" alignItems="Center" justifyContent="Center" gap="400">
@@ -303,6 +248,23 @@ export function ClientRoot({ children }: ClientRootProps) {
           </Box>
         </SplashScreen>
       )}
+      {syncError && (
+        <SplashScreen>
+          <Box direction="Column" grow="Yes" alignItems="Center" justifyContent="Center" gap="400">
+            <Dialog>
+              <Box direction="Column" gap="400" style={{ padding: config.space.S400 }}>
+                <Text>{`Sync failed: ${syncError.message}`}</Text>
+                <Text size="T300">Check your internet connection and homeserver status.</Text>
+                <Button variant="Critical" onClick={() => window.location.reload()}>
+                  <Text as="span" size="B400">
+                    Retry
+                  </Text>
+                </Button>
+              </Box>
+            </Dialog>
+          </Box>
+        </SplashScreen>
+      )}
       {loading || !mx ? (
         <ClientRootLoading />
       ) : (