ln/app/client/pages/__root.tsx

import { Icon, Kbd, Menu, Separator, Stack, Text } from '@chakra-ui/react';
import { createRootRouteWithContext, Link, Outlet, useNavigate } from '@tanstack/react-router';
import isHotkey from 'is-hotkey';
import React from 'react';
import { Avatar } from '../components/ui/avatar';
import { Button } from '../components/ui/button';
import { ColorModeButton } from '../components/ui/color-mode';
import { Tooltip } from '../components/ui/tooltip';
import { useAuth } from '../hooks/auth';
import { useIdentity } from '../hooks/identity';
import { appName } from '../main';

const TanStackRouterDevtools =
  process.env.NODE_ENV === 'production'
    ? () => null // Render nothing in production
    : React.lazy(() =>
        // Lazy load in development
        import('@tanstack/router-devtools').then(res => ({
          default: res.TanStackRouterDevtools
          // For Embedded Mode
          // default: res.TanStackRouterDevtoolsPanel
        }))
      );

interface RouterContext {
  isAuthenticated: boolean;
}

export const Route = createRootRouteWithContext<RouterContext>()({
  component: () => {
    const { logout } = useAuth();
    const identity = useIdentity();
    const navigate = useNavigate();

    return (
      <Stack
        onKeyDown={e => {
          if (isHotkey('mod+k', e)) {
            navigate({ to: '/' });
          }
        }}
        padding={3}
      >
        <Stack flexDirection="row" justifyContent="space-between" alignItems="center">
          <Stack flexDirection="row" justifyContent="center" alignItems="center" gap={10}>
            <Link to="/">
              <Stack direction="row" justifyContent="center" alignItems="center" gap={1}>
                <Icon fontSize={24} color="colorPalette.500">
                  <i className="nf nf-md-bird" />
                </Icon>
                <Text fontSize="lg" fontWeight="bold">
                  {appName}
                </Text>
              </Stack>
            </Link>

            {/* <Stack hideBelow="md"> */}
            {/*   <Link to="/about"> */}
            {/*     <Icon color="colorPalette.500" fontSize="md"> */}
            {/*       <i className="nf nf-oct-question" /> */}
            {/*     </Icon> */}
            {/*   </Link> */}
            {/* </Stack> */}

            {identity != null && (
              <>
                <Stack direction="row" alignItems="center">
                  <Link to="/editor">
                    <Text
                      color="colorPalette.400"
                      _hover={{
                        textDecoration: 'underline',
                        textDecorationColor: 'colorPalette.700'
                      }}
                    >
                      editor
                    </Text>
                  </Link>
                </Stack>
                <Stack direction="row" alignItems="center">
                  <Link to="/new/book">
                    <Text
                      color="colorPalette.400"
                      _hover={{
                        textDecoration: 'underline',
                        textDecorationColor: 'colorPalette.700'
                      }}
                    >
                      create
                    </Text>
                  </Link>
                </Stack>
              </>
            )}
          </Stack>

          <Stack flexDirection="row" alignItems="center" gap={4}>
            <Stack
              hideBelow="md"
              direction="row"
              alignItems="center"
              paddingY={1}
              paddingX={2}
              gap={6}
              border="sm"
              borderColor="border"
              borderRadius="md"
              onClick={() => navigate({ to: '/' })}
            >
              <Stack direction="row" alignItems="center">
                <Icon size="sm" color="colorPalette.500">
                  <i className="nf nf-oct-search" />
                </Icon>

                <Text fontSize="sm" color="fg.subtle">
                  Search works...{' '}
                </Text>
              </Stack>

              <Kbd>⌘K</Kbd>
            </Stack>

            <ColorModeButton />

            {identity != null ? (
              <Menu.Root>
                <Menu.Trigger css={{ '&:hover': { cursor: 'pointer' } }}>
                  <Avatar size="sm" fallback={identity.data.user.username[0]} />
                </Menu.Trigger>
                <Menu.Positioner mt={2}>
                  <Menu.Content backgroundColor={'bg.subtle'}>
                    <Link to={`/profile/${identity.data.user.username}`}>
                      <Menu.Item value="/">
                        <Tooltip content="My profile">
                          <Stack direction="row">
                            <Icon color="colorPalette.500" fontSize="xl">
                              <i className="nf nf-fa-user" />
                            </Icon>
                            My profile
                          </Stack>
                        </Tooltip>
                      </Menu.Item>
                    </Link>

                    <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 height={8}>Sign in</Button>
                </Link>
                <Link to="/register">
                  <Button height={8}>Sign up</Button>
                </Link>
              </>
            )}
          </Stack>
        </Stack>
        <Separator style={{ padding: '4px' }} />
        <Outlet />
        <Stack hidden>
          <TanStackRouterDevtools />
        </Stack>
      </Stack>
    );
  }
});