feat: add ability to manually bookmark

LiprikON2 · May 7, 2024 · 9827191 · 9827191
1 parent 1a250c4
commit 9827191
Show file tree

Hide file tree

Showing 5 changed files with 85 additions and 14 deletions.
diff --git a/src/renderer/components/ToggleActionIcon/ToggleActionIcon.tsx b/src/renderer/components/ToggleActionIcon/ToggleActionIcon.tsx
@@ -1,11 +1,11 @@
 /* eslint-disable react/display-name */
 import React, { forwardRef, useEffect } from "react";
-import { ActionIcon, rem } from "@mantine/core";
+import { ActionIcon, rem, ActionIconProps } from "@mantine/core";
 import { useDisclosure } from "@mantine/hooks";
 import { type Icon } from "@tabler/icons-react";
 import { observer } from "mobx-react-lite";
 
-type ToggleActionIconProps = {
+interface ToggleActionIconProps extends ActionIconProps {
     OnIcon: Icon;
     OffIcon: Icon;
     on?: boolean;
@@ -14,10 +14,12 @@ type ToggleActionIconProps = {
     offAction?: () => void;
     ariaLabel?: string;
     getAriaLabel?: () => string;
+    iconSize?: string;
+
     classNames?: {
         icon?: string;
     };
-};
+}
 
 const ToggleActionIcon = observer(
     forwardRef(
@@ -32,6 +34,9 @@ const ToggleActionIcon = observer(
                 getAriaLabel,
                 classNames,
                 ariaLabel,
+                variant,
+                iconSize = "65%",
+                ...rest
             }: ToggleActionIconProps,
             ref: React.ForwardedRef<HTMLButtonElement>
         ) => {
@@ -52,7 +57,7 @@ const ToggleActionIcon = observer(
 
             const iconProps = {
                 className: classNames?.icon,
-                style: { width: "65%", height: "65%" },
+                style: { width: iconSize, height: iconSize },
                 stroke: 1.5,
             };
 
@@ -62,7 +67,8 @@ const ToggleActionIcon = observer(
                     onClick={onClick ? onClick : handleActionIconToggle}
                     size={rem(36)}
                     aria-label={getAriaLabel?.() ?? ariaLabel}
-                    variant="default-subtle"
+                    variant={variant ?? "default-subtle"}
+                    {...rest}
                 >
                     {toggled ? <OnIcon {...iconProps} /> : <OffIcon {...iconProps} />}
                 </ActionIcon>

diff --git a/src/renderer/scenes/AppShell/AppShell.tsx b/src/renderer/scenes/AppShell/AppShell.tsx
@@ -79,7 +79,7 @@ export const AppShell = observer(({ layoutMarkup, children }: AppShellProps) =>
                     <Overlay onClick={mobileCloseNavbar} backgroundOpacity={0.25} />
                 )}
 
-                <Box className={classes.mainBox} px={layoutMarkup.scrollArea ? 0 : "md"}>
+                <Box className={classes.mainBox}>
                     {layoutMarkup.scrollArea ? (
                         <ScrollArea
                             h="100%"

diff --git a/src/renderer/scenes/Reading/Reading.tsx b/src/renderer/scenes/Reading/Reading.tsx
@@ -89,12 +89,18 @@ export const Reading = observer(() => {
 
     return (
         <>
-            {bookReadStore.isManualBookmarked ? (
+            {/* {bookReadStore.isManualBookmarked ? (
                 <button onClick={bookReadStore.removeManualBookmark}>del bookmark</button>
             ) : (
                 <button onClick={bookReadStore.addManualBookmark}>add bookmark</button>
-            )}
-            <BookUi title={bookReadStore.metadata.title} uiState={bookReadStore.uiState}>
+            )} */}
+            <BookUi
+                title={bookReadStore.metadata.title}
+                uiState={bookReadStore.uiState}
+                bookmarked={bookReadStore.isManualBookmarked}
+                onAddBookmark={bookReadStore.addManualBookmark}
+                onRemoveBookmark={bookReadStore.removeManualBookmark}
+            >
                 {!bookReadStore.isReady && "loading..."}
                 <book-web-component ref={useMergedRef(bookComponentCallbackRef, eventsRef)} />
             </BookUi>

diff --git a/src/renderer/scenes/Reading/components/BookUi/BookUi.module.css b/src/renderer/scenes/Reading/components/BookUi/BookUi.module.css
@@ -1,3 +1,28 @@
+.top {
+    display: grid;
+
+    grid-auto-flow: column;
+    grid-template-columns: var(--mantine-spacing-md) repeat(5, 1fr) var(--mantine-spacing-md);
+    grid-template-rows: rem(24);
+    gap: 0;
+}
+
+.topCenter {
+    grid-row: 1;
+    grid-column: 2 / -2;
+}
+
+.bookmark {
+    outline-offset: -3px;
+}
+
+.topRight {
+    grid-row: 1;
+    grid-column: -2 / -1;
+    align-self: start;
+    justify-self: end;
+}
+
 .lineClamp {
     @mixin lineClamp 1;
 }
diff --git a/src/renderer/scenes/Reading/components/BookUi/BookUi.tsx b/src/renderer/scenes/Reading/components/BookUi/BookUi.tsx
@@ -3,30 +3,64 @@ import { Box, Group, Stack, Text } from "@mantine/core";
 import { observer } from "mobx-react-lite";
 
 import classes from "./BookUi.module.css";
+import { ToggleActionIcon } from "~/renderer/components";
+import { IconBookmark, IconBookmarkFilled } from "@tabler/icons-react";
+import clsx from "clsx";
 
 interface BookUiProps {
     title: string;
     uiState: UiState;
     visible?: boolean;
     children?: React.ReactNode;
+    bookmarked: boolean;
+    onAddBookmark?: () => void;
+    onRemoveBookmark?: () => void;
 }
 
 const BookUi = observer(
     // eslint-disable-next-line react/display-name
     forwardRef(
         (
-            { title, uiState, visible = true, children }: BookUiProps,
+            {
+                title,
+                uiState,
+                onAddBookmark,
+                onRemoveBookmark,
+                bookmarked = false,
+                visible = true,
+                children,
+            }: BookUiProps,
             ref: React.ForwardedRef<HTMLDivElement>
         ) => {
             return (
                 <Stack h="100%" gap={4} ref={ref}>
-                    <Group justify="center" px={4}>
-                        <Text className={classes.lineClamp} c="dimmed" ta="center" fw={500}>
+                    <Group p={0} className={classes.top}>
+                        <Text
+                            className={clsx(classes.topCenter, classes.lineClamp)}
+                            c="dimmed"
+                            ta="center"
+                            fw={500}
+                        >
                             {title}
                         </Text>
+                        <ToggleActionIcon
+                            pos="absolute"
+                            iconSize="85%"
+                            size="md"
+                            className={clsx(classes.topRight, classes.bookmark)}
+                            OnIcon={IconBookmarkFilled}
+                            OffIcon={IconBookmark}
+                            variant="transparent"
+                            ariaLabel="bookmark"
+                            on={bookmarked}
+                            onAction={onAddBookmark}
+                            offAction={onRemoveBookmark}
+                        />
                     </Group>
-                    <Box style={{ overflow: "hidden", flexBasis: "100%" }}>{children}</Box>
-                    <Group justify="space-between" px={4} wrap="nowrap">
+                    <Box style={{ overflow: "hidden", flexBasis: "100%" }} px="md">
+                        {children}
+                    </Box>
+                    <Group justify="space-between" px="md" wrap="nowrap">
                         <Text c="dimmed" className={classes.lineClamp}>
                             {uiState.currentSectionTitle}
                         </Text>