added resolvers, updated model, updated navbar

app/client/pages/__root.tsx

@@ -1,4 +1,14 @@
-import { Icon, Input, InputGroup, Kbd, Menu, Separator, Stack, Text } from '@chakra-ui/react';
+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 React from 'react';
 import { Avatar } from '../components/ui/avatar';
@@ -8,6 +18,7 @@ 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'
@@ -33,7 +44,7 @@ export const Route = createRootRouteWithContext<RouterContext>()({
     return (
       <Stack padding={3}>
         <Stack flexDirection="row" justifyContent="space-between" alignItems="center">
-          <Stack flexDirection="row" justifyContent="center" alignItems="center" gap={4}>
+          <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">
@@ -51,6 +62,21 @@ export const Route = createRootRouteWithContext<RouterContext>()({
             {/*     </Icon> */}
             {/*   </Link> */}
             {/* </Stack> */}
+
+            {identity != null && (
+              <>
+                <Stack direction="row" alignItems="center">
+                  <Link to="/editor">
+                    <ChakraLink>editor</ChakraLink>
+                  </Link>
+                </Stack>
+                <Stack direction="row" alignItems="center">
+                  <Link to="/new/book">
+                    <ChakraLink>create</ChakraLink>
+                  </Link>
+                </Stack>
+              </>
+            )}
           </Stack>
 
           <Stack flexDirection="row" alignItems="center" gap={4}>

app/client/pages/index.tsx

@@ -1,105 +1,21 @@
-import { gql } from '@apollo/client';
-import { Skeleton, Stack } from '@chakra-ui/react';
-import { WorkingListQuery } from '@generated/types';
+import { Stack } from '@chakra-ui/react';
 import { createFileRoute } from '@tanstack/react-router';
-import { useState } from 'react';
-import { Pagination } from '../components/Pagination';
-import { WorkingList } from '../components/WorkingList';
-import { WorkingListSearch } from '../components/WorkingListSearch';
-import { usePaginatedQuery } from '../hooks/usePaginatedQuery';
+import { BookSearchList } from '../components/BookSearchList';
 
 export const Route = createFileRoute('/')({
   component: RouteComponent
 });
 
 function RouteComponent() {
-  const [workingSearchValue, setWorkingSearchValue] = useState<string>('');
-  const [workingsListPage, setWorkingsListPage] = useState<number>(1);
-  const [workingsListPageSize, setWorkingsListPageSize] = useState<number>(2);
-  const startIndex = (workingsListPage - 1) * workingsListPageSize;
-
-  const { data } = usePaginatedQuery<WorkingListQuery>({
-    query,
-    input: {
-      filter: {
-        terms: workingSearchValue,
-        offset: startIndex,
-        size: workingsListPageSize
-      }
-    }
-  });
-
   return (
     <Stack justifyContent="center" alignItems="center">
       <Stack width="90%">
-        {data != null ? (
-          <>
-            <WorkingListSearch
-              value={workingSearchValue}
-              onSubmit={value => {
-                alert(value);
-              }}
-              onChange={value => setWorkingSearchValue(value)}
-            />
-
-            <WorkingList
-              workingsList={data.workingMany.items.map(item => ({
-                ...item,
-                chaptersTotal: item.chapters.total,
-                reviewsTotal: item.reviews.total
-              }))}
-            />
-
-            <Pagination
-              total={data.workingMany.total}
-              page={workingsListPage}
-              setPage={setWorkingsListPage}
-              pageSize={workingsListPageSize}
-            />
-          </>
-        ) : (
-          <>
-            <Stack direction="row" justifyContent="center" alignItems="center" gap={2}>
-              <Skeleton height={10} width="80%" />
-              <Skeleton height={10} width="calc(20% - 6px)" />
-            </Stack>
-            <Skeleton height={20} />
-            <Skeleton height={20} />
-            <Skeleton height={20} />
-          </>
-        )}
+        <BookSearchList />
       </Stack>
     </Stack>
   );
 }
 
-const query = gql`
-  query WorkingList($input: WorkingManyInput!) {
-    workingMany(input: $input) {
-      items {
-        id
-        type
-        title
-        description
-        author {
-          id
-          username
-        }
-        updatedAt
-        progressStatus
-        ratingTotal
-        reviewsTotal
-        book {
-          id
-          chaptersTotal
-          wordsTotal
-        }
-      }
-      total
-    }
-  }
-`;
-
 // const workingData1: WorkingCardProps = {
 //   id: '1',
 //   title: 'Worth the Candle',

app/client/pages/new/book.tsx

@@ -0,0 +1,66 @@
+import { Heading, Input, Stack } 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';
+
+export const Route = createFileRoute('/new/book')({
+  component: RouteComponent,
+  beforeLoad: ({ context }) => {
+    if (!context.isAuthenticated) throw redirect({ to: '/' });
+  }
+});
+
+function RouteComponent() {
+  return (
+    <Stack flexDirection={'column'} justifyContent={'center'} alignItems={'center'}>
+      <Heading>New book</Heading>
+      <form></form>
+    </Stack>
+  );
+}
+
+// function LoginForm() {
+//   const schema = v.pipe(
+//     v.object({
+//       email: v.pipe(v.string(), v.nonEmpty('Email is required'), v.email('Invalid email')),
+//       password: v.pipe(v.string(), v.nonEmpty('Password is required'))
+//     })
+//   );
+//
+//   const {
+//     register,
+//     handleSubmit,
+//     formState: { errors }
+//   } = useForm<FormValues>({ resolver: valibotResolver(schema) });
+//
+//   const { login } = useAuth();
+//
+//   return (
+//     <form
+//       onSubmit={handleSubmit(async values => {
+//         const session = await login({
+//           email: values.email,
+//           password: values.password
+//         });
+//         if (session != null) window.history.back();
+//       })}
+//     >
+//       <Stack>
+//         <Field label="Email" invalid={errors.email != null} errorText={errors.email?.message}>
+//           <Input {...register('email')} />
+//         </Field>
+//         <Field
+//           label="Password"
+//           invalid={errors.password != null}
+//           errorText={errors.password?.message}
+//         >
+//           <PasswordInput {...register('password')} />
+//         </Field>
+//         <Button type="submit">Sign in</Button>
+//       </Stack>
+//     </form>
+//   );
+// }