added chapter view, fixes, added ratings, added chapter updates/deletions

app/client/pages/__root.tsx

@@ -1,5 +1,6 @@
-import { Icon, Input, InputGroup, Kbd, Menu, Separator, Stack, Text } from '@chakra-ui/react';
-import { createRootRouteWithContext, Outlet, Link } from '@tanstack/react-router';
+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';
@@ -29,9 +30,17 @@ export const Route = createRootRouteWithContext<RouterContext>()({
   component: () => {
     const { logout } = useAuth();
     const identity = useIdentity();
+    const navigate = useNavigate();
 
     return (
-      <Stack padding={3}>
+      <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="/">
@@ -44,6 +53,7 @@ export const Route = createRootRouteWithContext<RouterContext>()({
                 </Text>
               </Stack>
             </Link>
+
             {/* <Stack hideBelow="md"> */}
             {/*   <Link to="/about"> */}
             {/*     <Icon color="colorPalette.500" fontSize="md"> */}
@@ -85,19 +95,29 @@ export const Route = createRootRouteWithContext<RouterContext>()({
           </Stack>
 
           <Stack flexDirection="row" alignItems="center" gap={4}>
-            <InputGroup
-              hideBelow="md"
-              flex={1}
+            <Stack
+              direction="row"
               alignItems="center"
-              startElement={
-                <Icon color="colorPalette.500">
+              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>
-              }
-              endElement={<Kbd>⌘K</Kbd>}
-            >
-              <Input height={8} placeholder="Search works..." />
-            </InputGroup>
+
+                <Text fontSize="sm" color="fg.subtle">
+                  Search works...{' '}
+                </Text>
+              </Stack>
+
+              <Kbd>⌘K</Kbd>
+            </Stack>
 
             <ColorModeButton />