Better data handling

package.json

@@ -71,6 +71,7 @@
     "drizzle-zod": "^0.8.3",
     "embla-carousel-react": "^8.6.0",
     "fast-xml-parser": "^5.3.1",
+    "idb-keyval": "^6.2.2",
     "jimp": "^1.6.0",
     "jotai": "^2.15.1",
     "jotai-optics": "^0.4.0",

src/app/(feed)/feed/RefetchItemsButton.tsx

@@ -5,16 +5,19 @@ import clsx from "clsx";
 import { RefreshCwIcon } from "lucide-react";
 import { usePathname } from "next/navigation";
 import { ButtonWithShortcut } from "~/components/ButtonWithShortcut";
-import { useFeedItemsQuery } from "~/lib/data/feed-items";
+import { useFetchFeedItems, useFetchFeedItemsStatus } from "~/lib/data/store";
 import { useShortcut } from "~/lib/hooks/useShortcut";
 
 export function RefetchItemsButton() {
   const pathname = usePathname();
 
   const queryClient = useQueryClient();
-  const { fetchStatus } = useFeedItemsQuery();
+
+  const fetchStatus = useFetchFeedItemsStatus();
+  const fetchFeedItems = useFetchFeedItems();
 
   useShortcut("r", () => {
+    fetchFeedItems();
     queryClient.invalidateQueries();
   });
 

src/app/(feed)/feed/SidebarCategories.tsx

@@ -16,19 +16,18 @@ import {
   categoryFilterAtom,
   dateFilterAtom,
   feedFilterAtom,
-  useFeedItemsMap,
-  useFeedItemsOrder,
   visibilityFilterAtom,
 } from "~/lib/data/atoms";
 import { useContentCategories } from "~/lib/data/content-categories";
 import { useFeedCategories } from "~/lib/data/feed-categories";
 import { doesFeedItemPassFilters } from "~/lib/data/feed-items";
 import { useDeselectViewFilter } from "~/lib/data/views";
 import { useDialogStore } from "./dialogStore";
+import { useFeedItemsDict, useFeedItemsOrder } from "~/lib/data/store";
 
 function useCheckFilteredFeedItemsForCategory() {
   const feedItemsOrder = useFeedItemsOrder();
-  const feedItemsMap = useFeedItemsMap();
+  const feedItemsMap = useFeedItemsDict();
   const { feedCategories } = useFeedCategories();
 
   const visibilityFilter = useAtomValue(visibilityFilterAtom);

src/app/(feed)/feed/SidebarFeeds.tsx

@@ -15,8 +15,6 @@ import {
   categoryFilterAtom,
   dateFilterAtom,
   feedFilterAtom,
-  useFeedItemsMap,
-  useFeedItemsOrder,
   viewFilterAtom,
   visibilityFilterAtom,
 } from "~/lib/data/atoms";
@@ -25,10 +23,11 @@ import { doesFeedItemPassFilters } from "~/lib/data/feed-items";
 import { useFeeds } from "~/lib/data/feeds";
 import { useDeselectViewFilter } from "~/lib/data/views";
 import { useDialogStore } from "./dialogStore";
+import { useFeedItemsDict, useFeedItemsOrder } from "~/lib/data/store";
 
 function useCheckFilteredFeedItemsForFeed() {
   const feedItemsOrder = useFeedItemsOrder();
-  const feedItemsMap = useFeedItemsMap();
+  const feedItemsDict = useFeedItemsDict();
   const { feedCategories } = useFeedCategories();
   const { feeds } = useFeeds();
 
@@ -42,9 +41,9 @@ function useCheckFilteredFeedItemsForFeed() {
       if (!feedItemsOrder || !feedCategories) return [];
       return feedItemsOrder.filter(
         (item) =>
-          feedItemsMap[item] &&
+          feedItemsDict[item] &&
           doesFeedItemPassFilters(
-            feedItemsMap[item],
+            feedItemsDict[item],
             dateFilter,
             visibilityFilter,
             categoryFilter,
@@ -57,7 +56,7 @@ function useCheckFilteredFeedItemsForFeed() {
     },
     [
       feedItemsOrder,
-      feedItemsMap,
+      feedItemsDict,
       dateFilter,
       visibilityFilter,
       categoryFilter,