feat: subscription store and unread store, unread calcaulation logic

eslint.config.mjs

@@ -20,6 +20,7 @@ export default defineConfig(
  "no-console": "warn",
  "unicorn/consistent-function-scoping": "warn",
  "unicorn/prefer-module": "off",
+ "@typescript-eslint/no-floating-promises": "off",
  },
  },
  {

package.json

@@ -56,6 +56,7 @@
  "electron-updater": "^6.1.7",
  "framer-motion": "11.2.9",
  "hast-util-to-jsx-runtime": "2.3.0",
+ "idb-keyval": "6.2.1",
  "immer": "10.1.1",
  "jotai": "2.8.2",
  "jotai-dark": "0.3.1",

src/renderer/src/components/discover/form.tsx

@@ -16,7 +16,7 @@
 } from "@renderer/components/ui/form"
 import { Image } from "@renderer/components/ui/image"
 import { Input } from "@renderer/components/ui/input"
-import type { DiscoverResponse } from "@renderer/lib/types"
+import type { DiscoverResponse } from "@renderer/models"
 import { apiFetch } from "@renderer/queries/api-fetch"
 import { DEEPLINK_SCHEME } from "@shared/constants"
 import { openElectronWindow } from "@shared/electron"
@@ -90,7 +90,7 @@
  form.setValue("keyword", keyword.slice(prefix.length))
  }
  }
  }, [keyword])
 
  return (
  <>

src/renderer/src/components/discover/import.tsx

@@ -10,8 +10,8 @@ import {
  FormMessage,
 } from "@renderer/components/ui/form"
 import { Input } from "@renderer/components/ui/input"
-import type { FeedResponse } from "@renderer/lib/types"
 import { cn } from "@renderer/lib/utils"
+import type { FeedResponse } from "@renderer/models"
 import { Queries } from "@renderer/queries"
 import { apiFetch } from "@renderer/queries/api-fetch"
 import { useMutation } from "@tanstack/react-query"

src/renderer/src/components/entry-column/index.tsx

@@ -8,8 +8,8 @@ import {
 import { views } from "@renderer/lib/constants"
 import { FeedViewType } from "@renderer/lib/enum"
 import { buildStorageNS } from "@renderer/lib/ns"
-import type { EntryModel } from "@renderer/lib/types"
 import { cn, getEntriesParams } from "@renderer/lib/utils"
+import type { EntryModel } from "@renderer/models"
 import { apiClient } from "@renderer/queries/api-fetch"
 import { useEntries } from "@renderer/queries/entries"
 import { feedActions, useFeedStore } from "@renderer/store"
@@ -83,23 +83,24 @@ export function EntryColumn() {
 
  if (!idSlice) return
 
- const batchLikeIds = [] as string[]
+ const batchLikeIds = [] as [string, string][]
  const entriesId2Map = entryActions.getFlattenMapEntries()
  for (const id of idSlice) {
  const entry = entriesId2Map[id]
 
  if (!entry) continue
  const isRead = entry.read
  if (!isRead) {
- batchLikeIds.push(id)
+ batchLikeIds.push([entry.feeds.id, id])
  }
  }
 
  if (batchLikeIds.length > 0) {
- await apiClient.reads.$post({ json: { entryIds: batchLikeIds } })
+ const entryIds = batchLikeIds.map(([, id]) => id)
+ await apiClient.reads.$post({ json: { entryIds } })
 
- for (const id of batchLikeIds) {
- entryActions.optimisticUpdate(id, { read: true })
+ for (const [feedId, id] of batchLikeIds) {
+ entryActions.markRead(feedId, id, true)
  }
  }
  },
@@ -142,16 +143,14 @@ export function EntryColumn() {
  onClick={() => setActiveEntry?.(null)}
  >
  <ListHeader />
- {activeList?.view && views[activeList.view].gridMode ?
- (
- <VirtuosoGrid
- listClassName="grid grid-cols-2 gap-3 md:grid-cols-3 lg:grid-cols-4 px-4"
- {...virtuosoOptions}
- />
- ) :
- (
- <Virtuoso {...virtuosoOptions} />
- )}
+ {activeList?.view && views[activeList.view].gridMode ? (
+ <VirtuosoGrid
+ listClassName="grid grid-cols-2 gap-3 md:grid-cols-3 lg:grid-cols-4 px-4"
+ {...virtuosoOptions}
+ />
+ ) : (
+ <Virtuoso {...virtuosoOptions} />
+ )}
  </div>
  )
 }
@@ -192,9 +191,9 @@ const ListHeader: FC = () => {
  return (
  <div className="mb-5 flex w-full items-center justify-between pl-9 pr-2">
  <div className="mt-4">
- <div className="text-lg font-bold">{activeList?.name}</div>
+ <div className="text-lg font-bold leading-none">{activeList?.name}</div>
  <div className="text-xs font-medium text-zinc-400">
- {entries.data?.pages?.[0].total}
+ {entries.data?.pages?.[0].total || 0}
  {" "}
  {unreadOnly ? "Unread" : ""}
  {" "}
@@ -216,13 +215,11 @@ const ListHeader: FC = () => {
  onClick={() => setUnreadOnly(!unreadOnly)}
  active={unreadOnly}
  >
- {unreadOnly ?
- (
- <i className="i-mingcute-round-fill" />
- ) :
- (
- <i className="i-mingcute-round-line" />
- )}
+ {unreadOnly ? (
+ <i className="i-mingcute-round-fill" />
+ ) : (
+ <i className="i-mingcute-round-line" />
+ )}
  </HeaderActionButton>
  <Popover open={markPopoverOpen} onOpenChange={setMarkPopoverOpen}>
  <PopoverTrigger>

src/renderer/src/components/entry-column/item-wrapper.tsx

@@ -34,9 +34,7 @@ export function EntryItemWrapper({
  },
  }),
  onMutate: () => {
- entryActions.optimisticUpdate(entry.entries.id, {
- read: true,
- })
+ entryActions.markRead(entry.feeds.id, entry.entries.id, true)
  },
  // TODO fallback
  })

src/renderer/src/components/entry-column/types.ts

@@ -1,4 +1,4 @@
-import type { EntryModel, FeedModel } from "@renderer/lib/types"
+import type { EntryModel, FeedModel } from "@renderer/models"
 
 export type UniversalItemProps = {
  entryId: string

src/renderer/src/components/entry-content/index.tsx

@@ -1,6 +1,6 @@
 import { useBizQuery } from "@renderer/hooks/useBizQuery"
 import { parseHtml } from "@renderer/lib/parse-html"
-import type { ActiveEntry } from "@renderer/lib/types"
+import type { ActiveEntry } from "@renderer/models"
 import { Queries } from "@renderer/queries"
 import { useFeedStore } from "@renderer/store"
 import { m } from "framer-motion"
@@ -9,7 +9,9 @@ import { useEffect, useState } from "react"
 import { EntryShare } from "./share"
 
 export function EntryContent({ entryId }: { entryId: ActiveEntry }) {
- const entry = useBizQuery(Queries.entries.byId(entryId))
+ const entry = useBizQuery(Queries.entries.byId(entryId), {
+ enabled: !!entryId,
+ })
  const activeList = useFeedStore((state) => state.activeList)
 
  const [content, setContent] = useState<JSX.Element>()

src/renderer/src/components/feed-column/category.tsx

@@ -7,10 +7,14 @@
 import { levels } from "@renderer/lib/constants"
 import { showNativeMenu } from "@renderer/lib/native-menu"
 import { cn } from "@renderer/lib/utils"
+import type { FeedListModel } from "@renderer/models"
 import { Queries } from "@renderer/queries"
 import { apiFetch } from "@renderer/queries/api-fetch"
-import type { Response as SubscriptionsResponse } from "@renderer/queries/subscriptions"
-import { feedActions, useFeedActiveList } from "@renderer/store"
+import {
+ feedActions,
+ useFeedActiveList,
+ useUnreadStore,
+} from "@renderer/store"
 import { useMutation } from "@tanstack/react-query"
 import { AnimatePresence, m } from "framer-motion"
 import { useEffect, useState } from "react"
@@ -25,7 +29,7 @@
  view,
  expansion,
 }: {
- data: SubscriptionsResponse["list"][number]
+ data: FeedListModel["list"][number]
  view?: number
  expansion: boolean
 }) {
@@ -53,18 +57,24 @@
  if (data.name) {
  setOpen(expansion)
  }
  }, [expansion])
 
  const setCategoryActive = () => {
- view !== undefined &&
- setActiveList?.({
- level: levels.folder,
- id: data.list.map((feed) => feed.feedId).join(","),
- name: data.name,
- view,
- })
+ if (view !== undefined) {
+ setActiveList({
+ level: levels.folder,
+ id: data.list.map((feed) => feed.feedId).join(","),
+ name: data.name,
+ view,
+ })
+ }
  }
 
+ const unread = useUnreadStore((state) =>
+ data.list.reduce((acc, cur) => state.data[cur.feedId] + acc, 0),
+ )
+
+ const sortByUnreadFeedList = useUnreadStore((state) => data.list.sort((a, b) => (state.data[b.feedId] || 0) - (state.data[a.feedId] || 0)))
  return (
  <Collapsible
  open={open}
@@ -95,16 +105,16 @@
  {
  type: "text",
  label: "Delete Category",
+
  click: async () => {
- if (
- await client?.showConfirmDialog({
- title: `Delete category ${data.name}?`,
- message: `This operation will delete your category, but the feeds it contains will be retained and grouped by website.`,
- options: {
- buttons: ["Delete", "Cancel"],
- },
- })
- ) {
+ const result = await client?.showConfirmDialog({
+ title: `Delete category ${data.name}?`,
+ message: `This operation will delete your category, but the feeds it contains will be retained and grouped by website.`,
+ options: {
+ buttons: ["Delete", "Cancel"],
+ },
+ })
+ if (result) {
  deleteMutation.mutate()
  }
  },
@@ -126,10 +136,10 @@
  <span className="truncate">{data.name}</span>
  )}
  </CollapsibleTrigger>
- {setActiveList && <span className="truncate">{data.name}</span>}
+ {!!setActiveList && <span className="truncate">{data.name}</span>}
  </div>
- {!!data.unread && (
- <div className="ml-2 text-xs text-zinc-500">{data.unread}</div>
+ {!!unread && (
+ <div className="ml-2 text-xs text-zinc-500">{unread}</div>
  )}
  <CategoryRenameDialog
  feedIdList={feedIdList}
@@ -157,7 +167,7 @@
  opacity: 0.01,
  }}
  >
- {data.list.map((feed) => (
+ {sortByUnreadFeedList.map((feed) => (
  <FeedItem
  key={feed.feedId}
  feed={feed}

src/renderer/src/components/feed-column/index.tsx

@@ -59,7 +59,7 @@ export function FeedColumn() {
  <div
  className="flex h-full flex-col gap-3"
  onClick={() =>
- setActiveList?.({
+ setActiveList({
  level: levels.view,
  id: active,
  name: views[active].name,
@@ -72,7 +72,7 @@ export function FeedColumn() {
  className="flex items-center gap-1 text-xl font-bold"
  onClick={(e) => {
  e.stopPropagation()
- setActiveList?.({
+ setActiveList({
  level: levels.view,
  id: active,
  name: views[active].name,

src/renderer/src/components/feed-column/item.tsx

@@ -11,11 +11,15 @@ import { useToast } from "@renderer/components/ui/use-toast"
 import { levels } from "@renderer/lib/constants"
 import dayjs from "@renderer/lib/dayjs"
 import { showNativeMenu } from "@renderer/lib/native-menu"
-import type { SubscriptionResponse } from "@renderer/lib/types"
 import { cn } from "@renderer/lib/utils"
+import type { SubscriptionResponse } from "@renderer/models"
 import { Queries } from "@renderer/queries"
 import { apiFetch } from "@renderer/queries/api-fetch"
-import { feedActions, useFeedActiveList } from "@renderer/store"
+import {
+ feedActions,
+ useFeedActiveList,
+ useUnreadStore,
+} from "@renderer/store"
 import { useMutation } from "@tanstack/react-query"
 
 export function FeedItem({
@@ -31,8 +35,9 @@ export function FeedItem({
  const { setActiveList } = feedActions
 
  const setFeedActive = (feed: SubscriptionResponse[number]) => {
- view !== undefined &&
- setActiveList?.({
+ if (view === undefined) return
+
+ setActiveList({
  level: levels.feed,
  id: feed.feedId,
  name: feed.feeds.title || "",
@@ -88,6 +93,7 @@ export function FeedItem({
  },
  })
 
+ const feedUnread = useUnreadStore((state) => state.data[feed.feedId] || 0)
  return (
  <div
  className={cn(
@@ -128,16 +134,17 @@ export function FeedItem({
  label: "Open Feed in Browser",
  click: () =>
  window.open(
- `${import.meta.env.VITE_WEB_URL}/feed/${feed.feedId}?view=${view}`,
+ `${import.meta.env.VITE_WEB_URL}/feed/${
+ feed.feedId
+ }?view=${view}`,
  "_blank",
  ),
  },
  {
  type: "text",
  label: "Open Site in Browser",
  click: () =>
- feed.feeds.siteUrl &&
- window.open(feed.feeds.siteUrl, "_blank"),
+ feed.feeds.siteUrl && window.open(feed.feeds.siteUrl, "_blank"),
  },
  ],
  e,
@@ -188,8 +195,8 @@ export function FeedItem({
  </TooltipProvider>
  )}
  </div>
- {!!feed.unread && (
- <div className="ml-2 text-xs text-zinc-500">{feed.unread}</div>
+ {!!feedUnread && (
+ <div className="ml-2 text-xs text-zinc-500">{feedUnread}</div>
  )}
  </div>
  )