feat: add toolbar position setting (top or bottom)

1 files changed, 22 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 458d2b6..0f0d793 100644
--- a/apps/web/app/reader/settings/_components/appearance-settings.tsx
+++ b/apps/web/app/reader/settings/_components/appearance-settings.tsx
@@ -61,6 +61,12 @@ export function AppearanceSettings() {
   const setShowFoldersAboveFeeds = useUserInterfaceStore(
     (state) => state.setShowFoldersAboveFeeds
   )
+  const toolbarPosition = useUserInterfaceStore(
+    (state) => state.toolbarPosition
+  )
+  const setToolbarPosition = useUserInterfaceStore(
+    (state) => state.setToolbarPosition
+  )
   return (
     <div className="px-4 py-3">
       <div className="mb-6">
@@ -79,6 +85,22 @@ export function AppearanceSettings() {
         </select>
       </div>
       <div className="mb-6">
+        <h3 className="mb-2 text-text-primary">toolbar position</h3>
+        <p className="mb-3 text-text-dim">
+          place the toolbar at the top or bottom of the reader
+        </p>
+        <select
+          value={toolbarPosition}
+          onChange={(event) =>
+            setToolbarPosition(event.target.value as "top" | "bottom")
+          }
+          className="border border-border bg-background-primary px-3 py-2 text-text-primary outline-none focus:border-text-dim"
+        >
+          <option value="top">top</option>
+          <option value="bottom">bottom</option>
+        </select>
+      </div>
+      <div className="mb-6">
         <h3 className="mb-2 text-text-primary">display density</h3>
         <p className="mb-3 text-text-dim">
           controls the overall text size and spacing