feat: add unread priority option to push unread entries to top

Adds a persisted appearance setting (disabled by default) that
partitions the entry list into unread-first, preserving original
order within each group.

1 files changed, 21 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 9d2d146..9e03702 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 prioritiseUnreadEntries = useUserInterfaceStore(
+    (state) => state.prioritiseUnreadEntries
+  )
+  const setPrioritiseUnreadEntries = useUserInterfaceStore(
+    (state) => state.setPrioritiseUnreadEntries
+  )
   const autoRefreshTimeline = useUserInterfaceStore(
     (state) => state.autoRefreshTimeline
   )
@@ -249,6 +255,21 @@ export function AppearanceSettings() {
             <option value="absolute">absolute</option>
           </select>
         </div>
+        <div>
+          <h3 className="mb-2 text-text-primary">unread priority</h3>
+          <p className="mb-3 text-text-dim">
+            push unread articles to the top of the entry list
+          </p>
+          <label className="flex cursor-pointer items-center gap-2 text-text-primary">
+            <input
+              type="checkbox"
+              checked={prioritiseUnreadEntries}
+              onChange={(event) => setPrioritiseUnreadEntries(event.target.checked)}
+              className="accent-text-primary"
+            />
+            <span>prioritise unread entries</span>
+          </label>
+        </div>
       </SettingsSection>
 
       <SettingsSection title="sidebar">