updated UI, minor fixes

app/client/pages/__root.tsx

@@ -1,7 +1,10 @@
-import { Button, Stack } from '@chakra-ui/react';
-import { createRootRoute, Link, Outlet } from '@tanstack/react-router';
+import { Icon, Stack, Text } from '@chakra-ui/react';
+import { createRootRouteWithContext, Link, Outlet } from '@tanstack/react-router';
 import React from 'react';
+import { Button } from '../components/ui/button';
+import { Tooltip } from '../components/ui/tooltip';
 import { useAuth } from '../hooks/auth';
+import { appName } from '../main';
 
 const TanStackRouterDevtools =
   process.env.NODE_ENV === 'production'
@@ -15,17 +18,30 @@ const TanStackRouterDevtools =
         }))
       );
 
-export const Route = createRootRoute({
+interface RouterContext {
+  isAuthenticated: boolean;
+}
+
+export const Route = createRootRouteWithContext<RouterContext>()({
   component: () => {
     const { isAuthenticated, logout } = useAuth();
     return (
       <Stack padding={3}>
-        <Stack flexDirection={'row'} justifyContent={'space-between'}>
-          <Link to="/">
-            <Button>Home</Button>
-          </Link>
+        <Stack flexDirection="row" justifyContent="space-between" alignItems="center">
+          <Stack flexDirection="row" alignItems="center" gap={4}>
+            <Link to="/">
+              <Text color="colorPalette.500" fontSize="xl">
+                [{appName}]
+              </Text>
+            </Link>
+            <Link to="/about">
+              <Icon color="colorPalette.500" fontSize="md">
+                <i className="nf nf-oct-question" />
+              </Icon>
+            </Link>
+          </Stack>
 
-          <Stack flexDirection={'row'}>
+          <Stack flexDirection="row" alignItems="center">
             {!isAuthenticated ? (
               <>
                 <Link to="/login">
@@ -36,7 +52,11 @@ export const Route = createRootRoute({
                 </Link>
               </>
             ) : (
-              <Button onClick={async () => logout()}>Log out</Button>
+              <Tooltip content="Log out">
+                <Icon color="colorPalette.500" fontSize="xl" onClick={async () => logout()}>
+                  <i className="nf nf-fa-sign_out" />
+                </Icon>
+              </Tooltip>
             )}
           </Stack>
         </Stack>