feat: add appearance option to toggle folders above/below ungrouped feeds in sidebar

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 6c04f00..aaf499a 100644
--- a/apps/web/app/reader/settings/_components/appearance-settings.tsx
+++ b/apps/web/app/reader/settings/_components/appearance-settings.tsx
@@ -49,6 +49,12 @@ export function AppearanceSettings() {
   const setShowReadingTime = useUserInterfaceStore(
     (state) => state.setShowReadingTime
   )
+  const showFoldersAboveFeeds = useUserInterfaceStore(
+    (state) => state.showFoldersAboveFeeds
+  )
+  const setShowFoldersAboveFeeds = useUserInterfaceStore(
+    (state) => state.setShowFoldersAboveFeeds
+  )
   return (
     <div className="px-4 py-3">
       <div className="mb-6">
@@ -188,6 +194,21 @@ export function AppearanceSettings() {
           <span>show entry images</span>
         </label>
       </div>
+      <div className="mb-6">
+        <h3 className="mb-2 text-text-primary">sidebar ordering</h3>
+        <p className="mb-3 text-text-dim">
+          display folders above ungrouped feeds in the sidebar
+        </p>
+        <label className="flex cursor-pointer items-center gap-2 text-text-primary">
+          <input
+            type="checkbox"
+            checked={showFoldersAboveFeeds}
+            onChange={(event) => setShowFoldersAboveFeeds(event.target.checked)}
+            className="accent-text-primary"
+          />
+          <span>show folders above feeds</span>
+        </label>
+      </div>
       <div>
         <h3 className="mb-2 text-text-primary">reading time</h3>
         <p className="mb-3 text-text-dim">