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

app/client/components/BookChapterCard.tsx

@@ -0,0 +1,97 @@
+import { gql } from '@apollo/client';
+import { Box, Button, Card, Heading, Icon, Stack, Text } from '@chakra-ui/react';
+import { BookChapterDeleteMutation } from '@generated/types';
+import { Link } from '@tanstack/react-router';
+import { bookFragment } from '../fragments';
+import { useToastMutation } from '../hooks/useToastMutation';
+import { bookChapterListQuery } from '../pages/work/book/$bookId/overview';
+
+export function BookChapterCard({
+  bookId,
+  chapterId,
+  title,
+  isAuthor
+}: {
+  readonly bookId: string;
+  readonly chapterId: string;
+  readonly title: string;
+  readonly isAuthor: boolean;
+}) {
+  const { update: chapterDelete } = useToastMutation<BookChapterDeleteMutation>({
+    mutation,
+    successMsg: 'Chapter deleted successfully',
+    refetchQueries: [bookChapterListQuery]
+  });
+  return (
+    <Card.Root width="100%" variant="elevated">
+      <Card.Body paddingX={4} paddingY={2}>
+        <Stack direction="row" justifyContent="space-between" alignItems="center">
+          <Box>
+            <Text as="div" minWidth={0}>
+              <Link to={`/work/book/${bookId}/chapter/${chapterId}/view`}>
+                <Heading
+                  size="sm"
+                  color="colorPalette.400"
+                  _hover={{
+                    textDecoration: 'underline',
+                    textDecorationColor: 'colorPalette.700'
+                  }}
+                >
+                  {title}
+                </Heading>
+              </Link>
+            </Text>
+          </Box>
+          <Stack direction="row" alignItems="center">
+            {isAuthor && (
+              <>
+                <Button
+                  color="red.500"
+                  variant="ghost"
+                  padding={0}
+                  _hover={{
+                    backgroundColor: 'bg.error'
+                  }}
+                  onClick={async () => chapterDelete({ variables: { id: chapterId } })}
+                >
+                  <Icon fontSize="xl">
+                    <i className="nf nf-md-delete" />
+                  </Icon>
+                </Button>
+                <Link to={`/work/book/${bookId}/chapter/${chapterId}/edit`}>
+                  <Button
+                    variant="ghost"
+                    padding={0}
+                    _hover={{
+                      backgroundColor: 'bg.warning'
+                    }}
+                  >
+                    <Icon color="yellow.500" fontSize="xl">
+                      <i className="nf nf-fa-edit" />
+                    </Icon>
+                  </Button>
+                </Link>
+              </>
+            )}
+            <Link to={`/work/book/${bookId}/chapter/${chapterId}/view`}>
+              <Button variant="ghost" padding={0}>
+                <Icon fontSize="xl">
+                  <i className="nf nf-fa-angle_right" />
+                </Icon>
+              </Button>
+            </Link>
+          </Stack>
+        </Stack>
+      </Card.Body>
+    </Card.Root>
+  );
+}
+
+const mutation = gql`
+  mutation BookChapterDelete($id: ID!) {
+    bookChapterDelete(id: $id) {
+      ...Book
+    }
+  }
+  ${bookFragment}
+`;