reverted to old reading state storage,considering pouchdb for app sto…

…rage now though,progress indicator on reading screen

src/web/components/currently-reading.tsx

@@ -1,18 +1,18 @@
 import { ContextMenu, Flex, Text } from "@radix-ui/themes";
-import type { ReadingIssue } from "@src/shared/types";
+import type { CurrentlyReading as CurrentlyReadingType } from "@src/shared/types";
 import { useRouter } from "@tanstack/react-router";
 import { Check } from "lucide-react";
 import { memo, useMemo } from "react";
 
 type Props = {
-  issue: ReadingIssue;
+  issue: CurrentlyReadingType;
 };
 
 const CurrentlyReading = ({ issue }: Props) => {
   const navigation = useRouter();
 
   const width = useMemo(
-    () => (issue.pageNumber / issue.totalPages) * 100,
+    () => (issue.currentPage / issue.totalPages) * 100,
     [issue],
   );
 
@@ -24,15 +24,15 @@ const CurrentlyReading = ({ issue }: Props) => {
             navigation.navigate({
               to: "/$issueId",
               params: {
-                issueId: issue.issueId,
+                issueId: issue.id,
               },
             })
           }
           className="relative w-[245px] cursor-pointer h-[370px] border-1 border-solid border-zinc-200 dark:border-zinc-800 rounded-md overflow-hidden"
         >
           <img
             src={issue.thumbnailUrl}
-            alt={issue.issueTitle}
+            alt={issue.title}
             className="absolute z-0 w-full h-full object-cover"
           />
           <Flex
@@ -43,7 +43,7 @@ const CurrentlyReading = ({ issue }: Props) => {
             gap="2"
           >
             <Text size="2" weight="bold" className="text-white">
-              {issue.issueTitle}
+              {issue.title}
             </Text>
             <Flex className="bg-zinc-400/50 dark:bg-zinc-400/20 w-full rounded-full">
               <div

src/web/components/done-reading.tsx

@@ -1,9 +1,9 @@
 import { ContextMenu, Flex, Text } from "@radix-ui/themes";
-import type { DoneIssue } from "@src/shared/types";
+import type { DoneReading as DoneReadingType } from "@src/shared/types";
 import { Minus } from "lucide-react";
 
 type Props = {
-  issue: DoneIssue;
+  issue: DoneReadingType;
 };
 
 export default function DoneReading({ issue }: Props) {
@@ -13,7 +13,7 @@ export default function DoneReading({ issue }: Props) {
         <Flex className="w-2/6 cursor-pointer max-h-4/6 rounded-md border-1 border-solid border-zinc-200 dark:border-zinc-800 rounded-md overflow-hidden">
           <img
             src={issue.thumbnailUrl}
-            alt={issue.issueTitle}
+            alt={issue.title}
             className="w-2/6 h-full border-r-1 border-r-solid dark:border-r-zinc-800 border-r-zinc-200"
           />
           <Flex
@@ -30,7 +30,7 @@ export default function DoneReading({ issue }: Props) {
               className="tracking-wider"
               color="gray"
             >
-              {issue.issueTitle}
+              {issue.title}
             </Text>
             {/* TODO install moment and give a proper value */}
             {/* <Text className="text-[11.5px]" weight="regular" color="gray">

src/web/components/issue.tsx

@@ -1,5 +1,5 @@
 import { deleteFromStoreCompletionEvent$ } from "@core/events";
-import { DropdownMenu, Flex, Text } from "@radix-ui/themes";
+import { ContextMenu, DropdownMenu, Flex, Text } from "@radix-ui/themes";
 import t from "@shared/config";
 import type { Issue as issue } from "@src/shared/types";
 import { useRouter } from "@tanstack/react-router";
@@ -16,24 +16,39 @@ export default function Issue({ issue }: Props) {
 
   deleteFromStoreCompletionEvent$.on(() => utils.library.invalidate());
 
+  const go = () =>
+    navigation.navigate({
+      to: "/$issueId",
+      params: {
+        issueId: issue.id,
+      },
+    });
+
   return (
-    <Flex
-      className="w-[200px] h-[300px] mb-14 cursor-pointer"
-      gap="1"
-      direction="column"
-    >
-      <img
-        className="w-full h-full bg-zinc-200/5 rounded-md border-1 border-solid border-zinc-300 dark:border-zinc-800"
-        alt="issue_thumbnail"
-        src={issue.thumbnailUrl}
-      />
-      <Flex align="end" justify="between">
-        <Text size="1" className="text-gray-600 dark:text-zinc-400">
-          {issue.issueTitle}
-        </Text>
-        <MoreButton issueId={issue.id} />
-      </Flex>
-    </Flex>
+    <ContextMenu.Root>
+      <ContextMenu.Trigger>
+        <Flex
+          className="w-[200px] h-[300px] mb-14 cursor-pointer"
+          gap="1"
+          direction="column"
+          onClick={go}
+        >
+          <img
+            className="w-full h-full bg-zinc-200/5 rounded-md border-1 border-solid border-zinc-300 dark:border-zinc-800"
+            alt="issue_thumbnail"
+            src={issue.thumbnailUrl}
+          />
+          <Flex direction="column">
+            <Text size="1" className="text-gray-600 dark:text-zinc-400">
+              {issue.issueTitle}
+            </Text>
+          </Flex>
+        </Flex>
+      </ContextMenu.Trigger>
+      <ContextMenu.Content size="1" variant="soft">
+        ctx menu
+      </ContextMenu.Content>
+    </ContextMenu.Root>
   );
 }
 

src/web/routes/$issueId.tsx

@@ -1,11 +1,11 @@
 import { useObservable } from "@legendapp/state/react";
 import { Flex } from "@radix-ui/themes";
 import t from "@shared/config";
-import { readingStateStore } from "@shared/core/stores";
 import { createFileRoute } from "@tanstack/react-router";
 import { motion, useMotionValue } from "framer-motion";
 import { useMemo } from "react";
 import { useInterval, useKeyPress, useTimeout } from "../hooks";
+import { readingState$ } from "../state";
 
 const DRAG_BUFFER = 50;
 
@@ -18,6 +18,10 @@ function Component() {
 
   const isEnabled = useObservable(false);
 
+  const doneReading = readingState$.doneReading.get();
+  const currentlyReading = readingState$.currentlyReading.get();
+  const isSaved = readingState$.currentlyReading.has(issueId);
+
   const { data, isLoading } = t.issue.getPages.useQuery(
     {
       issueId,
@@ -27,38 +31,37 @@ function Component() {
     },
   );
 
-  console.log({ readingStateStore });
-
   const contentLength = data?.pages.length || 0;
-  const itemIndex = useObservable(0);
+  const itemIndex = useObservable(
+    isSaved ? currentlyReading.get(issueId)?.currentPage : 0,
+  );
   const itemIndexValue = itemIndex.get();
   const dragX = useMotionValue(0);
   const width = useMemo(
-    () => (itemIndexValue / contentLength - 1) * 100,
+    () => Math.floor((itemIndexValue / contentLength) * 100),
     [contentLength, itemIndexValue],
   );
 
-  console.log({ width });
-
   useInterval(() => {
     if (itemIndexValue < contentLength - 1) {
       console.log("saving to currently reading");
-      readingStateStore.setTable("currentlyReading", {
-        issueId,
+      currentlyReading.set(issueId, {
+        id: issueId,
+        title: data?.issueTitle || "",
         thumbnailUrl: data?.thumbnailUrl || "",
-        issueTitle: data?.issueTitle || "",
+        currentPage: itemIndexValue,
         totalPages: contentLength - 1,
-        pageNumber: itemIndexValue,
       });
       return;
     }
 
     if (itemIndexValue === contentLength - 1) {
-      readingStateStore.setTable("doneReading", {
-        issueId,
-        issueTitle: data?.issueTitle || "",
-        dateCompleted: new Date().toISOString(),
+      currentlyReading.delete(issueId);
+      doneReading.set(issueId, {
+        id: issueId,
+        title: data?.issueTitle || "",
         thumbnailUrl: data?.thumbnailUrl || "",
+        dateFinished: new Date().toISOString(),
       });
       return;
     }
@@ -115,14 +118,15 @@ function Component() {
           </div>
         ))}
       </motion.div>
+      {/* progress indicator */}
       <Flex
         className="absolute z-20 bottom-10 left-0 w-full"
         align="center"
         justify="center"
       >
         <div className="w-[98%] bg-zinc-400/20 backdrop-blur-3xl rounded-full">
-          <div
-            style={{ width: `${width}%` }}
+          <motion.div
+            animate={{ width: `${width}%` }}
             className="rounded-full p-1 bg-white/20"
           />
         </div>

src/web/routes/index.tsx

@@ -1,14 +1,16 @@
 import { Flex, Heading, Text } from "@radix-ui/themes";
-import { readingStateStore } from "@shared/core/stores";
 import { createFileRoute } from "@tanstack/react-router";
+import { DoneReading } from "../components";
+import CurrentlyReading from "../components/currently-reading";
+import { readingState$ } from "../state";
 
 export const Route = createFileRoute("/")({
   component: Index,
 });
 
 function Index() {
-  const currentlyReading = readingStateStore.getTable("currentlyReading");
-  const doneReading = readingStateStore.getTable("doneReading");
+  const currentlyReading = Array.from(readingState$.currentlyReading.values());
+  const doneReading = Array.from(readingState$.doneReading.values());
 
   console.log({ currentlyReading, doneReading });
 
@@ -38,11 +40,19 @@ function Index() {
         className="w-full px-2 py-2 space-y-1"
       >
         <Heading size="7">Currently Reading</Heading>
-        <Flex grow="1" className="py-2 overflow-x-scroll pr-14" gap="3"></Flex>
+        <Flex grow="1" className="py-2 overflow-x-scroll pr-14" gap="3">
+          {currentlyReading.map((v) => (
+            <CurrentlyReading key={v.id} issue={v} />
+          ))}
+        </Flex>
       </Flex>
       <Flex direction="column" className="w-full h-2/6 px-2 py-2 space-y-2">
         <Heading size="6">Done Reading</Heading>
-        <Flex grow="1" className="py-2" gap="3"></Flex>
+        <Flex grow="1" className="py-2" gap="3">
+          {doneReading.map((v) => (
+            <DoneReading key={v.id} issue={v} />
+          ))}
+        </Flex>
       </Flex>
     </Flex>
   );

src/web/routes/library.tsx

@@ -2,6 +2,7 @@ import { Collection, Issue, IssueSkeleton, Spinner } from "@components";
 import { useObservable } from "@legendapp/state/react";
 import {
   Button,
+  Code,
   Flex,
   Heading,
   Popover,
@@ -44,6 +45,23 @@ function Component() {
     }
   }, [createSourceDir]);
 
+  if (data?.collections.length === 0 && data?.issues.length === 0) {
+    return (
+      <Flex
+        direction="column"
+        className="w-full h-screen"
+        align="center"
+        justify="center"
+      >
+        <Heading>Add Issues to see them here</Heading>
+        <Text>
+          use the <Code>+</Code> button or add to the <Code>Vision</Code> folder
+          in your documents
+        </Text>
+      </Flex>
+    );
+  }
+
   return (
     <Flex direction="column" className="w-full h-screen px-2 py-2">
       <Flex align="center" justify="between" className="w-full">

src/web/state/global.ts

@@ -4,7 +4,12 @@ import {
   persistObservable,
 } from "@legendapp/state/persist";
 import { ObservablePersistLocalStorage } from "@legendapp/state/persist-plugins/local-storage";
-import type { GlobalState,ReadingState,CurrentlyReading,DoneReading } from "@shared/types";
+import type {
+  CurrentlyReading,
+  DoneReading,
+  GlobalState,
+  ReadingState,
+} from "@shared/types";
 
 configureObservablePersistence({
   pluginLocal: ObservablePersistLocalStorage,
@@ -25,15 +30,15 @@ export const settingsState$ = observable<{
   visible: false,
 });
 
-const readingState$=observable<ReadingState>({
-  doneReading:new Map<string,DoneReading>(),
-  currentlyReading:new Map<string,CurrentlyReading>
-})
+export const readingState$ = observable<ReadingState>({
+  doneReading: new Map<string, DoneReading>(),
+  currentlyReading: new Map<string, CurrentlyReading>(),
+});
 
 persistObservable(globalState$, {
   local: "global_state",
 });
 
-persistObservable(readingState$,{
-  local:"reading_state",
-})
+persistObservable(readingState$, {
+  local: "reading_state",
+});