added theme switcher, fixed themes

app/client/pages/__root.tsx

@@ -1,10 +1,12 @@
-import { Icon, Stack, Text } from '@chakra-ui/react';
+import { Separator, Icon, Menu, Stack, Text } from '@chakra-ui/react';
 import { createRootRouteWithContext, Link, Outlet } from '@tanstack/react-router';
 import React from 'react';
+import { Avatar } from '../components/ui/avatar';
 import { Button } from '../components/ui/button';
 import { Tooltip } from '../components/ui/tooltip';
 import { useAuth } from '../hooks/auth';
 import { appName } from '../main';
+import { ColorModeButton } from '../components/ui/color-mode';
 
 const TanStackRouterDevtools =
   process.env.NODE_ENV === 'production'
@@ -41,8 +43,47 @@ export const Route = createRootRouteWithContext<RouterContext>()({
             </Link>
           </Stack>
 
-          <Stack flexDirection="row" alignItems="center">
-            {!isAuthenticated ? (
+          <Stack flexDirection="row" alignItems="center" gap={4}>
+            <ColorModeButton />
+
+            {isAuthenticated ? (
+              <Menu.Root>
+                <Menu.Trigger>
+                  <Avatar
+                    // src={'https://avatars.githubusercontent.com/u/40203084?v=4'}
+                    fallback={'A'}
+                  />
+                </Menu.Trigger>
+                <Menu.Positioner mt={2}>
+                  <Menu.Content>
+                    <>
+                      <Menu.Item value="logout" onClick={async () => logout()}>
+                        <Tooltip content="Log out">
+                          <Stack direction="row">
+                            <Icon color="colorPalette.500" fontSize="xl">
+                              <i className="nf nf-fa-sign_out" />
+                            </Icon>
+                            Log out
+                          </Stack>
+                        </Tooltip>
+                      </Menu.Item>
+                    </>
+                  </Menu.Content>
+                </Menu.Positioner>
+              </Menu.Root>
+            ) : (
+              <>
+                <Separator orientation="vertical" height={5} />
+                <Link to="/login">
+                  <Button>Sign in</Button>
+                </Link>
+                <Link to="/register">
+                  <Button>Sign up</Button>
+                </Link>
+              </>
+            )}
+
+            {/*             {!isAuthenticated ? (
               <>
                 <Link to="/login">
                   <Button>Sign in</Button>
@@ -57,10 +98,10 @@ export const Route = createRootRouteWithContext<RouterContext>()({
                   <i className="nf nf-fa-sign_out" />
                 </Icon>
               </Tooltip>
-            )}
+            )} */}
           </Stack>
         </Stack>
-        <hr style={{ padding: '4px' }} />
+        <Separator style={{ padding: '4px' }} />
         <Outlet />
         <TanStackRouterDevtools />
       </Stack>

app/client/pages/login.tsx

@@ -1,10 +1,11 @@
-import { Heading, Input, Stack } from '@chakra-ui/react';
+import { Heading, Input, Stack, Text } from '@chakra-ui/react';
 import { Button } from '@client/components/ui/button';
 import { Field } from '@client/components/ui/field';
 import { valibotResolver } from '@hookform/resolvers/valibot';
 import { createFileRoute, redirect } from '@tanstack/react-router';
 import { useForm } from 'react-hook-form';
 import * as v from 'valibot';
+import { Link } from '../components/ui/link';
 import { PasswordInput } from '../components/ui/password-input';
 import { useAuth } from '../hooks/auth';
 
@@ -20,6 +21,12 @@ function LoginComponent() {
     <Stack flexDirection={'column'} justifyContent={'center'} alignItems={'center'}>
       <Heading>Login</Heading>
       <LoginForm />
+      <Text>
+        Don't have an account?{' '}
+        <Link to="/register" textDecoration="none">
+          Sign up
+        </Link>
+      </Text>
     </Stack>
   );
 }

app/client/pages/register.tsx

@@ -1,5 +1,5 @@
 import { gql } from '@apollo/client';
-import { Heading, Input, Stack } from '@chakra-ui/react';
+import { Heading, Input, Stack, Text } from '@chakra-ui/react';
 import { Button } from '@client/components/ui/button';
 import { Field } from '@client/components/ui/field';
 import { PasswordInput } from '@client/components/ui/password-input';
@@ -8,6 +8,7 @@ import { valibotResolver } from '@hookform/resolvers/valibot';
 import { createFileRoute, redirect, useNavigate } from '@tanstack/react-router';
 import { useForm } from 'react-hook-form';
 import * as v from 'valibot';
+import { Link } from '../components/ui/link';
 import { useToastMutation } from '../hooks/useToastMutation';
 
 export const Route = createFileRoute('/register')({
@@ -22,6 +23,12 @@ function RegisterComponent() {
     <Stack flexDirection={'column'} justifyContent={'center'} alignItems={'center'}>
       <Heading>Sign up</Heading>
       <SignUpForm />
+      <Text>
+        Already have an account?{' '}
+        <Link to="/login" textDecoration="none">
+          Sign in
+        </Link>
+      </Text>
     </Stack>
   );
 }