feat: add scrollbar style setting (themed/native/hidden)

Themed scrollbars (default) use 6px thin bars matching the existing
colour palette. Synced to body via class toggle in Providers.

1 files changed, 8 insertions, 0 deletions

diff --git a/apps/web/lib/stores/user-interface-store.ts b/apps/web/lib/stores/user-interface-store.ts
index 808273c..29841ec 100644
--- a/apps/web/lib/stores/user-interface-store.ts
+++ b/apps/web/lib/stores/user-interface-store.ts
@@ -9,6 +9,8 @@ type FontSize = "small" | "default" | "large"
 
 type TimeDisplayFormat = "relative" | "absolute"
 
+type ScrollbarStyle = "custom" | "native" | "hidden"
+
 type ToolbarPosition = "top" | "bottom"
 
 type FocusedPanel = "sidebar" | "entryList" | "detailPanel"
@@ -45,6 +47,7 @@ interface UserInterfaceState {
   showReadingTime: boolean
   showFoldersAboveFeeds: boolean
   showEntryFavicons: boolean
+  scrollbarStyle: ScrollbarStyle
   autoRefreshTimeline: boolean
   prioritiseUnreadEntries: boolean
   toolbarPosition: ToolbarPosition
@@ -79,6 +82,7 @@ interface UserInterfaceState {
   setShowReadingTime: (show: boolean) => void
   setShowFoldersAboveFeeds: (show: boolean) => void
   setShowEntryFavicons: (show: boolean) => void
+  setScrollbarStyle: (style: ScrollbarStyle) => void
   setAutoRefreshTimeline: (enabled: boolean) => void
   setPrioritiseUnreadEntries: (enabled: boolean) => void
   setToolbarPosition: (position: ToolbarPosition) => void
@@ -113,6 +117,7 @@ export const useUserInterfaceStore = create<UserInterfaceState>()(
       showReadingTime: true,
       showFoldersAboveFeeds: false,
       showEntryFavicons: false,
+      scrollbarStyle: "custom",
       autoRefreshTimeline: false,
       prioritiseUnreadEntries: false,
       toolbarPosition: "top",
@@ -176,6 +181,8 @@ export const useUserInterfaceStore = create<UserInterfaceState>()(
 
       setShowEntryFavicons: (show) => set({ showEntryFavicons: show }),
 
+      setScrollbarStyle: (style) => set({ scrollbarStyle: style }),
+
       setAutoRefreshTimeline: (enabled) =>
         set({ autoRefreshTimeline: enabled }),
 
@@ -238,6 +245,7 @@ export const useUserInterfaceStore = create<UserInterfaceState>()(
         showReadingTime: state.showReadingTime,
         showFoldersAboveFeeds: state.showFoldersAboveFeeds,
         showEntryFavicons: state.showEntryFavicons,
+        scrollbarStyle: state.scrollbarStyle,
         autoRefreshTimeline: state.autoRefreshTimeline,
         prioritiseUnreadEntries: state.prioritiseUnreadEntries,
         toolbarPosition: state.toolbarPosition,