add accounts button on login screen

src/app/components/auth-layout/AuthLayout.tsx

@@ -1,5 +1,5 @@
 import React, { ReactNode } from 'react';
-import { Box, Header, Scroll, Text } from 'folds';
+import { Box, Header, Scroll } from 'folds';
 import classNames from 'classnames';
 
 import * as css from './styles.css';
@@ -12,11 +12,11 @@ export function AuthLogo({ large }: { large?: boolean }) {
 }
 
 type AuthLayoutProps = {
-  hideHeader?: boolean;
   center?: boolean;
   children?: ReactNode;
+  header?: ReactNode;
 };
-export function AuthLayout({ hideHeader, center, children }: AuthLayoutProps) {
+export function AuthLayout({ center, header, children }: AuthLayoutProps) {
   return (
     <Scroll variant="Background" visibility="Hover" size="0" hideTrack>
       <Box
@@ -32,14 +32,12 @@ export function AuthLayout({ hideHeader, center, children }: AuthLayoutProps) {
           direction="Column"
         >
           <Box direction="Column" className={css.AuthCard}>
-            {!hideHeader && (
+            {header && (
               <Header className={css.AuthHeader} size="600" variant="Surface">
-                <Box grow="Yes" direction="Row" gap="300" alignItems="Center">
-                  <AuthLogo />
-                  <Text size="H3">Cinny</Text>
-                </Box>
+                {header}
               </Header>
             )}
+
             <Box className={css.AuthCardContent} direction="Column">
               {children}
             </Box>

src/app/components/auth-layout/styles.css.ts

@@ -44,7 +44,8 @@ export const AuthLogo = recipe({
 });
 
 export const AuthHeader = style({
-  padding: `0 ${config.space.S400}`,
+  paddingLeft: config.space.S400,
+  paddingRight: config.space.S300,
   borderBottomWidth: config.borderWidth.B300,
 });
 

src/app/pages/AccountSelector.tsx

@@ -116,7 +116,7 @@ export function AccountSelector() {
   }
 
   return (
-    <AuthLayout hideHeader>
+    <AuthLayout>
       <Box style={{ position: 'relative' }} direction="Column" gap="500">
         <span data-spacing-node />
         <Box direction="Column" gap="400" alignItems="Center">

src/app/pages/auth/AuthRoot.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect } from 'react';
-import { Box, Spinner, Text, color } from 'folds';
+import { Box, Chip, Icon, IconButton, Icons, Spinner, Text, color } from 'folds';
 import {
   Outlet,
   generatePath,
@@ -25,8 +25,10 @@ import { AuthFlowsLoader } from '../../components/AuthFlowsLoader';
 import { AuthFlowsProvider } from '../../hooks/useAuthFlows';
 import { AuthServerProvider } from '../../hooks/useAuthServer';
 import { tryDecodeURIComponent } from '../../utils/dom';
-import { AuthLayout } from '../../components/auth-layout';
+import { AuthLayout, AuthLogo } from '../../components/auth-layout';
 import { useUnauthThemeManager } from '../ThemeManager';
+import { useSessions } from '../../hooks/useSessions';
+import { getRootPath } from '../pathUtils';
 
 const currentAuthPath = (pathname: string): string => {
   if (matchPath(LOGIN_PATH, pathname)) {
@@ -67,6 +69,7 @@ export function AuthRoot() {
   const navigate = useNavigate();
   const location = useLocation();
   const { server: urlEncodedServer } = useParams();
+  const sessions = useSessions();
 
   const clientConfig = useClientConfig();
 
@@ -121,7 +124,27 @@ export function AuthRoot() {
     discoveryState.status === AsyncStatus.Success ? discoveryState.data.response : [];
 
   return (
-    <AuthLayout>
+    <AuthLayout
+      header={
+        <Box grow="Yes" direction="Row" gap="300" alignItems="Center">
+          <AuthLogo />
+          <Box grow="Yes">
+            <Text size="H3">Cinny</Text>
+          </Box>
+          {sessions.length > 0 && (
+            <Chip
+              variant="Surface"
+              fill="None"
+              radii="Pill"
+              before={<Icon src={Icons.ArrowUpDown} size="50" />}
+              onClick={() => navigate(getRootPath())}
+            >
+              <Text size="L400">Accounts</Text>
+            </Chip>
+          )}
+        </Box>
+      }
+    >
       <Box direction="Column" gap="100">
         <Text as="label" size="L400" priority="300">
           Homeserver