added profile description editing, fixed light theme and viewer caching

app/client/pages/profile/$username.tsx

@@ -1,8 +1,26 @@
+import { gql } from '@apollo/client';
 import { Avatar } from '@app/client/components/ui/avatar';
+import { userFragment } from '@app/client/fragments';
 import { toFormattedDate } from '@app/client/helpers';
+import { useIdentity } from '@app/client/hooks/identity';
+import { useToastMutation } from '@app/client/hooks/useToastMutation';
 import { useUserOneQuery } from '@app/client/hooks/useUserOneQuery';
-import { Card, Heading, HStack, SkeletonCircle, SkeletonText, Stack, Text } from '@chakra-ui/react';
+import {
+  Box,
+  Button,
+  Card,
+  Heading,
+  HStack,
+  Icon,
+  SkeletonCircle,
+  SkeletonText,
+  Stack,
+  Text,
+  Textarea
+} from '@chakra-ui/react';
+import { UserProfileUpdateMutation } from '@generated/types';
 import { createFileRoute } from '@tanstack/react-router';
+import { useState } from 'react';
 
 export const Route = createFileRoute('/profile/$username')({
   component: RouteComponent
@@ -36,6 +54,16 @@ function UserOverview({
     readonly createdAt: string;
   };
 }) {
+  const identity = useIdentity();
+
+  const { update: userUpdate } = useToastMutation<UserProfileUpdateMutation>({
+    mutation: userUpdateMutation,
+    successMsg: 'Profile updated successfully!'
+  });
+
+  const [isEditMode, setIsEditMode] = useState<boolean>(false);
+  const [description, setDescription] = useState<string>(user.description ?? '');
+
   return (
     <Stack width={{ base: '100%', md: '80%' }} maxWidth="840px" gap={3}>
       <Stack direction="row" alignItems="start">
@@ -45,17 +73,92 @@ function UserOverview({
             {user.username}
           </Heading>
 
-          <Stack direction="row">
-            <Text fontWeight="bold">joined:</Text>
-            <Text color="fg.muted">{toFormattedDate({ value: user.createdAt })}</Text>
+          <Stack direction="row" justifyContent="space-between" alignItems="center">
+            <Stack direction="row">
+              <Text fontWeight="bold">joined:</Text>
+              <Text color="fg.muted">{toFormattedDate({ value: user.createdAt })}</Text>
+            </Stack>
+            {identity != null && isEditMode && (
+              <Stack>
+                <Stack direction="row" alignItems="center" justifyContent="end" gap={1}>
+                  <Button
+                    size="sm"
+                    height={6}
+                    bg="green.500"
+                    padding={0}
+                    onClick={async () => {
+                      await userUpdate({
+                        variables: {
+                          input: {
+                            id: user.id,
+                            description
+                          }
+                        }
+                      });
+                      identity.refetch();
+                      setIsEditMode(false);
+                    }}
+                  >
+                    <Icon>
+                      <i className="nf nf-fa-check" />
+                    </Icon>
+                  </Button>
+                  <Button
+                    size="sm"
+                    height={6}
+                    bg="red.500"
+                    padding={0}
+                    onClick={async () => {
+                      setDescription(user.description ?? '');
+                      setIsEditMode(false);
+                    }}
+                  >
+                    <Icon>
+                      <i className="nf nf-fa-close" />
+                    </Icon>
+                  </Button>
+                </Stack>
+              </Stack>
+            )}
+
+            {!isEditMode && identity?.data.id === user.id && (
+              <Button
+                size="sm"
+                height={6}
+                padding={0}
+                onClick={() => {
+                  setIsEditMode(true);
+                }}
+              >
+                <Icon>
+                  <i className="nf nf-fa-edit" />
+                </Icon>
+              </Button>
+            )}
           </Stack>
         </Stack>
       </Stack>
-      <Card.Root variant="subtle" width="100%">
-        <Card.Body paddingX="3" paddingY="1">
-          <Text>{user.description ?? 'No user description =('}</Text>
-        </Card.Body>
-      </Card.Root>
+      {isEditMode ? (
+        <Stack width="100%" borderRadius="md" position="relative">
+          <Textarea
+            variant="subtle"
+            placeholder="Tell us about yourself!"
+            resize="none"
+            maxLength={700}
+            maxLines={10}
+            fontSize="md"
+            autoresize
+            value={description}
+            onChange={event => setDescription(event.target.value)}
+          />
+        </Stack>
+      ) : (
+        <Card.Root variant="subtle" width="100%">
+          <Card.Body paddingX="3" paddingY="1">
+            <Text>{user.description ?? 'No user description =('}</Text>
+          </Card.Body>
+        </Card.Root>
+      )}
     </Stack>
   );
 }
@@ -74,3 +177,12 @@ function UserOverviewSkeleton() {
     </Stack>
   );
 }
+
+const userUpdateMutation = gql`
+  mutation UserProfileUpdate($input: UserUpdateInput!) {
+    userUpdate(input: $input) {
+      ...User
+    }
+  }
+  ${userFragment}
+`;

app/client/pages/work/book/$bookId/chapter/$chapterId/view.tsx

@@ -28,7 +28,7 @@ function BookChapterView({
 }) {
   const { data } = useQuery<BookChapterViewQuery>(bookChapterQuery, {
     variables: { id: chapterId },
-    fetchPolicy: 'cache-and-network'
+    fetchPolicy: 'no-cache'
   });
 
   const { data: navigationData } = useQuery<BookChapterViewNavigationQuery>(