refactor, added slate, added editor, added book

app/client/pages/__root.tsx

@@ -1,15 +1,5 @@
-import {
-  Link as ChakraLink,
-  Icon,
-  Input,
-  InputGroup,
-  Kbd,
-  Menu,
-  Separator,
-  Stack,
-  Text
-} from '@chakra-ui/react';
-import { createRootRouteWithContext, Link, Outlet } from '@tanstack/react-router';
+import { Icon, Input, InputGroup, Kbd, Menu, Separator, Stack, Text } from '@chakra-ui/react';
+import { createRootRouteWithContext, Outlet, Link } from '@tanstack/react-router';
 import React from 'react';
 import { Avatar } from '../components/ui/avatar';
 import { Button } from '../components/ui/button';
@@ -18,7 +8,6 @@ import { Tooltip } from '../components/ui/tooltip';
 import { useAuth } from '../hooks/auth';
 import { useIdentity } from '../hooks/identity';
 import { appName } from '../main';
-// import { Link as ChakraLink } from '../components/ui/link';
 
 const TanStackRouterDevtools =
   process.env.NODE_ENV === 'production'
@@ -67,12 +56,28 @@ export const Route = createRootRouteWithContext<RouterContext>()({
               <>
                 <Stack direction="row" alignItems="center">
                   <Link to="/editor">
-                    <ChakraLink>editor</ChakraLink>
+                    <Text
+                      color="colorPalette.400"
+                      _hover={{
+                        textDecoration: 'underline',
+                        textDecorationColor: 'colorPalette.700'
+                      }}
+                    >
+                      editor
+                    </Text>
                   </Link>
                 </Stack>
                 <Stack direction="row" alignItems="center">
                   <Link to="/new/book">
-                    <ChakraLink>create</ChakraLink>
+                    <Text
+                      color="colorPalette.400"
+                      _hover={{
+                        textDecoration: 'underline',
+                        textDecorationColor: 'colorPalette.700'
+                      }}
+                    >
+                      create
+                    </Text>
                   </Link>
                 </Stack>
               </>
@@ -99,10 +104,7 @@ export const Route = createRootRouteWithContext<RouterContext>()({
             {identity != null ? (
               <Menu.Root>
                 <Menu.Trigger css={{ '&:hover': { cursor: 'pointer' } }}>
-                  <Avatar
-                    size="sm"
-                    // src="https://avatars.githubusercontent.com/u/40203084?v=4"
-                  />
+                  <Avatar size="sm" />
                 </Menu.Trigger>
                 <Menu.Positioner mt={2}>
                   <Menu.Content backgroundColor={'bg.subtle'}>