feat: mark unread when scroll switch

Signed-off-by: Innei <i@innei.in>

src/renderer/src/atoms/settings/general.ts

@@ -4,6 +4,10 @@ import { createSettingAtom } from "./helper"
 
 const createDefaultSettings = () => ({
  dataPersist: true,
+
+ // mark unread
+ scrollMarkUnread: true,
+
 })
 export const {
  useSettingKey: useGeneralSettingKey,

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

@@ -1,4 +1,5 @@
 import { useMainContainerElement } from "@renderer/atoms/dom"
+import { useGeneralSettingKey } from "@renderer/atoms/settings/general"
 import { useUser } from "@renderer/atoms/user"
 import { m } from "@renderer/components/common/Motion"
 import { EmptyIcon } from "@renderer/components/icons/empty"
@@ -81,7 +82,7 @@ export function EntryColumn() {
  markReadMutation.mutate(activeEntry)
  }, [activeEntry?.entries?.id, activeEntry?.read])
 
- const handleRangeChange = useEventCallback(
+ const handleMarkreadInRange = useEventCallback(
  debounce(
  async ({ startIndex }: ListRange) => {
  const idSlice = entriesIds?.slice(0, startIndex)
@@ -113,7 +114,7 @@ export function EntryColumn() {
  { leading: false },
  ),
  )
-
+ const scrollMarkUnread = useGeneralSettingKey("scrollMarkUnread")
  const virtuosoOptions = {
  components: {
  List: ListContent,
@@ -127,7 +128,7 @@ export function EntryColumn() {
  )
  }, [isFetchingNextPage]),
  },
- rangeChanged: handleRangeChange,
+ rangeChanged: scrollMarkUnread ? handleMarkreadInRange : undefined,
  totalCount: entries.totalCount,
  endReached: () => entries.hasNextPage && entries.fetchNextPage(),
  data: entriesIds,

src/renderer/src/modules/settings/tabs/general.tsx

@@ -0,0 +1,63 @@
+import { setGeneralSetting, useGeneralSettingValue } from "@renderer/atoms/settings/general"
+import { tipcClient } from "@renderer/lib/client"
+import { useCallback, useEffect, useState } from "react"
+
+import { SettingDescription, SettingSwitch } from "../control"
+import { SettingSectionTitle } from "../section"
+import { SettingsTitle } from "../title"
+
+export const SettingGeneral = () => {
+ const [loginSetting, setLoginSetting] = useState(false)
+ useEffect(() => {
+ tipcClient?.getLoginItemSettings().then((settings) => {
+ setLoginSetting(settings.openAtLogin)
+ })
+ }, [])
+
+ const saveLoginSetting = useCallback((checked: boolean) => {
+ tipcClient?.setLoginItemSettings(checked)
+ setLoginSetting(checked)
+ }, [])
+
+ const settings = useGeneralSettingValue()
+
+ return (
+ <>
+ <SettingsTitle />
+ <div className="mt-6">
+ {window.electron && (
+ <SettingSwitch
+ label="Launch Follow at Login"
+ checked={loginSetting}
+ onCheckedChange={saveLoginSetting}
+ />
+ )}
+
+ <SettingSectionTitle title="Mark read" />
+ <SettingSwitch
+ checked={settings.scrollMarkUnread}
+ onCheckedChange={(checked) =>
+ setGeneralSetting("scrollMarkUnread", checked)}
+ label="Mark as read when scrolling"
+ />
+ <SettingDescription>
+ Automatic marking of articles as read when the item is scrolled up out
+ of the viewport.
+ </SettingDescription>
+
+ <SettingSectionTitle title="Data control" />
+ <SettingSwitch
+ checked={settings.dataPersist}
+ onCheckedChange={(checked) =>
+ setGeneralSetting("dataPersist", checked)}
+ label="Persist data to offline usage"
+ />
+ <SettingDescription>
+ Data will be stored locally on your device for offline usage and speed
+ up the data loading of the first screen. If you disable this, all
+ local data will be removed.
+ </SettingDescription>
+ </div>
+ </>
+ )
+}

src/renderer/src/pages/settings/(settings)/general.tsx

@@ -1,16 +1,5 @@
-import {
- setGeneralSetting,
- useGeneralSettingValue,
-} from "@renderer/atoms/settings/general"
-import { tipcClient } from "@renderer/lib/client"
-import {
- SettingDescription,
- SettingSwitch,
-} from "@renderer/modules/settings/control"
-import { SettingSectionTitle } from "@renderer/modules/settings/section"
-import { SettingsTitle } from "@renderer/modules/settings/title"
+import { SettingGeneral } from "@renderer/modules/settings/tabs/general"
 import { defineSettingPage } from "@renderer/modules/settings/utils"
-import { useCallback, useEffect, useState } from "react"
 
 const iconName = "i-mgc-settings-7-cute-re"
 const name = "General"
@@ -23,44 +12,5 @@ export const loader = defineSettingPage({
 })
 
 export function Component() {
- const [loginSetting, setLoginSetting] = useState(false)
- useEffect(() => {
- tipcClient?.getLoginItemSettings().then((settings) => {
- setLoginSetting(settings.openAtLogin)
- })
- }, [])
-
- const saveLoginSetting = useCallback((checked: boolean) => {
- tipcClient?.setLoginItemSettings(checked)
- setLoginSetting(checked)
- }, [])
-
- const settings = useGeneralSettingValue()
-
- return (
- <>
- <SettingsTitle />
- <div className="mt-6 space-y-6">
- {window.electron && (
- <SettingSwitch
- label="Launch Follow at Login"
- checked={loginSetting}
- onCheckedChange={saveLoginSetting}
- />
- )}
- <SettingSectionTitle title="Data control" />
- <SettingSwitch
- checked={settings.dataPersist}
- onCheckedChange={(checked) =>
- setGeneralSetting("dataPersist", checked)}
- label="Persist data to offline usage"
- />
- <SettingDescription>
- Data will be stored locally on your device for offline usage and speed
- up the data loading of the first screen. If you disable this, all
- local data will be removed.
- </SettingDescription>
- </div>
- </>
- )
+ return <SettingGeneral />
 }