feat: Add unified reader settings with local overrides (#2230)

* Add initial impl

* fix some format inconsistencies, add indicator in user settings when local is out of sync

* Fix sliders in user settings, unify constants and formatting

* address CodeRabbit suggestions

* add mobile implementation

* address coderabbit nitpicks

* fix responsiveness of the reader settings popover

* Move more of the web UI strings to i18n

* update translations for more coverage

* remove duplicate logic/definitions

* fix android font family

* add shared reading setting hook between web and mobile

* unify reader settings context for both web and mobile

* remove unused export

* address coderabbit suggestions

* fix tests

1 files changed, 20 insertions, 17 deletions

diff --git a/apps/web/app/dashboard/layout.tsx b/apps/web/app/dashboard/layout.tsx
index 911d542c..be65e66a 100644
--- a/apps/web/app/dashboard/layout.tsx
+++ b/apps/web/app/dashboard/layout.tsx
@@ -4,6 +4,7 @@ import MobileSidebar from "@/components/shared/sidebar/MobileSidebar";
 import Sidebar from "@/components/shared/sidebar/Sidebar";
 import SidebarLayout from "@/components/shared/sidebar/SidebarLayout";
 import { Separator } from "@/components/ui/separator";
+import { ReaderSettingsProvider } from "@/lib/readerSettings";
 import { UserSettingsContextProvider } from "@/lib/userSettings";
 import { api } from "@/server/api/client";
 import { getServerAuthSession } from "@/server/auth";
@@ -98,23 +99,25 @@ export default async function Dashboard({
 
   return (
     <UserSettingsContextProvider userSettings={userSettings.data}>
-      <SidebarLayout
-        sidebar={
-          <Sidebar
-            items={items}
-            extraSections={
-              <>
-                <Separator />
-                <AllLists initialData={lists.data} />
-              </>
-            }
-          />
-        }
-        mobileSidebar={<MobileSidebar items={mobileSidebar} />}
-        modal={modal}
-      >
-        {children}
-      </SidebarLayout>
+      <ReaderSettingsProvider>
+        <SidebarLayout
+          sidebar={
+            <Sidebar
+              items={items}
+              extraSections={
+                <>
+                  <Separator />
+                  <AllLists initialData={lists.data} />
+                </>
+              }
+            />
+          }
+          mobileSidebar={<MobileSidebar items={mobileSidebar} />}
+          modal={modal}
+        >
+          {children}
+        </SidebarLayout>
+      </ReaderSettingsProvider>
     </UserSettingsContextProvider>
   );
 }