added theme switcher, fixed themes

app/client/components/ui/color-mode.tsx

@@ -1,67 +1,65 @@
-"use client"
+'use client';
 
-import type { IconButtonProps } from "@chakra-ui/react"
+import type { IconButtonProps } from '@chakra-ui/react';
-import { ClientOnly, IconButton, Skeleton } from "@chakra-ui/react"
+import { ClientOnly, IconButton, Skeleton } from '@chakra-ui/react';
-import { ThemeProvider, useTheme } from "next-themes"
+import { ThemeProvider, useTheme } from 'next-themes';
-import type { ThemeProviderProps } from "next-themes"
+import type { ThemeProviderProps } from 'next-themes';
-import * as React from "react"
+import * as React from 'react';
-import { LuMoon, LuSun } from "react-icons/lu"
+import { LuMoon, LuSun } from 'react-icons/lu';
 
 export interface ColorModeProviderProps extends ThemeProviderProps {}
 
 export function ColorModeProvider(props: ColorModeProviderProps) {
-  return (
+  return <ThemeProvider attribute="class" disableTransitionOnChange {...props} />;
-    <ThemeProvider attribute="class" disableTransitionOnChange {...props} />
-  )
 }
 
 export function useColorMode() {
-  const { resolvedTheme, setTheme } = useTheme()
+  const { resolvedTheme, setTheme } = useTheme();
+  console.log(resolvedTheme);
   const toggleColorMode = () => {
-    setTheme(resolvedTheme === "light" ? "dark" : "light")
+    setTheme(resolvedTheme === 'light' ? 'dark' : 'light');
-  }
+  };
   return {
     colorMode: resolvedTheme,
     setColorMode: setTheme,
-    toggleColorMode,
+    toggleColorMode
-  }
+  };
 }
 
 export function useColorModeValue<T>(light: T, dark: T) {
-  const { colorMode } = useColorMode()
+  const { colorMode } = useColorMode();
-  return colorMode === "light" ? light : dark
+  return colorMode === 'light' ? light : dark;
 }
 
 export function ColorModeIcon() {
-  const { colorMode } = useColorMode()
+  const { colorMode } = useColorMode();
-  return colorMode === "light" ? <LuSun /> : <LuMoon />
+  return colorMode === 'light' ? <LuSun /> : <LuMoon />;
 }
 
-interface ColorModeButtonProps extends Omit<IconButtonProps, "aria-label"> {}
+interface ColorModeButtonProps extends Omit<IconButtonProps, 'aria-label'> {}
 
-export const ColorModeButton = React.forwardRef<
+export const ColorModeButton = React.forwardRef<HTMLButtonElement, ColorModeButtonProps>(
-  HTMLButtonElement,
+  function ColorModeButton(props, ref) {
-  ColorModeButtonProps
+    const { toggleColorMode } = useColorMode();
->(function ColorModeButton(props, ref) {
+    return (
-  const { toggleColorMode } = useColorMode()
+      <ClientOnly fallback={<Skeleton boxSize="8" />}>
-  return (
+        <IconButton
-    <ClientOnly fallback={<Skeleton boxSize="8" />}>
+          onClick={toggleColorMode}
-      <IconButton
+          variant="ghost"
-        onClick={toggleColorMode}
+          aria-label="Toggle color mode"
-        variant="ghost"
+          size="sm"
-        aria-label="Toggle color mode"
+          ref={ref}
-        size="sm"
+          {...props}
-        ref={ref}
+          css={{
-        {...props}
+            _icon: {
-        css={{
+              width: '5',
-          _icon: {
+              height: '5'
-            width: "5",
+            }
-            height: "5",
+          }}
-          },
+        >
-        }}
+          <ColorModeIcon />
-      >
+        </IconButton>
-        <ColorModeIcon />
+      </ClientOnly>
-      </IconButton>
+    );
-    </ClientOnly>
+  }
-  )
+);
-})

app/client/components/ui/provider.tsx

@@ -6,8 +6,9 @@ import { ColorModeProvider, type ColorModeProviderProps } from './color-mode';
 export function Provider(props: ColorModeProviderProps) {
   return (
     <ChakraProvider value={defaultSystem}>
-      <ColorModeProvider forcedTheme="dark" />
+      <Theme colorPalette="cyan">
-      <Theme colorPalette="cyan">{props.children}</Theme>
+        <ColorModeProvider defaultTheme="dark">{props.children}</ColorModeProvider>
+      </Theme>
     </ChakraProvider>
   );
 }

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">
+          <Stack flexDirection="row" alignItems="center" gap={4}>
-            {!isAuthenticated ? (
+            <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>
   );
 }