feat: add automatic timeline refresh with scroll position preservation

New appearance setting (disabled by default) that silently refreshes
the entry list when new entries arrive, provided the user is scrolled
to the top. Falls back to notification when scrolled down to avoid
disrupting reading position.

1 files changed, 25 insertions, 0 deletions

diff --git a/apps/web/app/reader/settings/_components/appearance-settings.tsx b/apps/web/app/reader/settings/_components/appearance-settings.tsx
index 1476190..9d2d146 100644
--- a/apps/web/app/reader/settings/_components/appearance-settings.tsx
+++ b/apps/web/app/reader/settings/_components/appearance-settings.tsx
@@ -80,6 +80,12 @@ export function AppearanceSettings() {
   const setShowFoldersAboveFeeds = useUserInterfaceStore(
     (state) => state.setShowFoldersAboveFeeds
   )
+  const autoRefreshTimeline = useUserInterfaceStore(
+    (state) => state.autoRefreshTimeline
+  )
+  const setAutoRefreshTimeline = useUserInterfaceStore(
+    (state) => state.setAutoRefreshTimeline
+  )
   const toolbarPosition = useUserInterfaceStore(
     (state) => state.toolbarPosition
   )
@@ -280,6 +286,25 @@ export function AppearanceSettings() {
 
       <SettingsSection title="behaviour">
         <div>
+          <h3 className="mb-2 text-text-primary">automatic refresh</h3>
+          <p className="mb-3 text-text-dim">
+            automatically load new entries when they arrive, instead of showing
+            a notification. only refreshes when scrolled to the top of the entry
+            list to preserve your reading position.
+          </p>
+          <label className="flex cursor-pointer items-center gap-2 text-text-primary">
+            <input
+              type="checkbox"
+              checked={autoRefreshTimeline}
+              onChange={(event) =>
+                setAutoRefreshTimeline(event.target.checked)
+              }
+              className="accent-text-primary"
+            />
+            <span>enable automatic refresh</span>
+          </label>
+        </div>
+        <div>
           <h3 className="mb-2 text-text-primary">focus follows interaction</h3>
           <p className="mb-3 text-text-dim">
             automatically move keyboard panel focus to the last pane you