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

2 files changed, 34 insertions, 15 deletions

diff --git a/apps/mobile/components/bookmarks/BookmarkLinkPreview.tsx b/apps/mobile/components/bookmarks/BookmarkLinkPreview.tsx
index 730bcd08..e0b592d6 100644
--- a/apps/mobile/components/bookmarks/BookmarkLinkPreview.tsx
+++ b/apps/mobile/components/bookmarks/BookmarkLinkPreview.tsx
@@ -5,6 +5,7 @@ import WebView from "react-native-webview";
 import { WebViewSourceUri } from "react-native-webview/lib/WebViewTypes";
 import { Text } from "@/components/ui/Text";
 import { useAssetUrl } from "@/lib/hooks";
+import { useReaderSettings, WEBVIEW_FONT_FAMILIES } from "@/lib/readerSettings";
 import { api } from "@/lib/trpc";
 import { useColorScheme } from "@/lib/useColorScheme";
 
@@ -38,6 +39,7 @@ export function BookmarkLinkReaderPreview({
   bookmark: ZBookmark;
 }) {
   const { isDarkColorScheme: isDark } = useColorScheme();
+  const { settings: readerSettings } = useReaderSettings();
 
   const {
     data: bookmarkWithContent,
@@ -61,6 +63,10 @@ export function BookmarkLinkReaderPreview({
     throw new Error("Wrong content type rendered");
   }
 
+  const fontFamily = WEBVIEW_FONT_FAMILIES[readerSettings.fontFamily];
+  const fontSize = readerSettings.fontSize;
+  const lineHeight = readerSettings.lineHeight;
+
   return (
     <View className="flex-1 bg-background">
       <WebView
@@ -73,8 +79,9 @@ export function BookmarkLinkReaderPreview({
                   <meta name="viewport" content="width=device-width, initial-scale=1.0">
                   <style>
                     body {
-                      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
-                      line-height: 1.6;
+                      font-family: ${fontFamily};
+                      font-size: ${fontSize}px;
+                      line-height: ${lineHeight};
                       color: ${isDark ? "#e5e7eb" : "#374151"};
                       margin: 0;
                       padding: 16px;
@@ -85,17 +92,29 @@ export function BookmarkLinkReaderPreview({
                     img { max-width: 100%; height: auto; border-radius: 8px; }
                     a { color: #3b82f6; text-decoration: none; }
                     a:hover { text-decoration: underline; }
-                    blockquote { 
-                      border-left: 4px solid ${isDark ? "#374151" : "#e5e7eb"}; 
-                      margin: 1em 0; 
-                      padding-left: 1em; 
-                      color: ${isDark ? "#9ca3af" : "#6b7280"}; 
+                    blockquote {
+                      border-left: 4px solid ${isDark ? "#374151" : "#e5e7eb"};
+                      margin: 1em 0;
+                      padding-left: 1em;
+                      color: ${isDark ? "#9ca3af" : "#6b7280"};
+                    }
+                    pre, code {
+                      font-family: ui-monospace, Menlo, Monaco, 'Courier New', monospace;
+                      background: ${isDark ? "#1f2937" : "#f3f4f6"};
+                    }
+                    pre {
+                      padding: 1em;
+                      border-radius: 6px;
+                      overflow-x: auto;
+                    }
+                    code {
+                      padding: 0.2em 0.4em;
+                      border-radius: 3px;
+                      font-size: 0.9em;
                     }
-                    pre { 
-                      background: ${isDark ? "#1f2937" : "#f3f4f6"}; 
-                      padding: 1em; 
-                      border-radius: 6px; 
-                      overflow-x: auto; 
+                    pre code {
+                      padding: 0;
+                      background: none;
                     }
                   </style>
                 </head>
diff --git a/apps/mobile/components/bookmarks/BookmarkLinkTypeSelector.tsx b/apps/mobile/components/bookmarks/BookmarkLinkTypeSelector.tsx
index 58cbcc8d..c7fd4be3 100644
--- a/apps/mobile/components/bookmarks/BookmarkLinkTypeSelector.tsx
+++ b/apps/mobile/components/bookmarks/BookmarkLinkTypeSelector.tsx
@@ -43,7 +43,7 @@ export default function BookmarkLinkTypeSelector({
 }: BookmarkLinkTypeSelectorProps) {
   const availableTypes = getAvailableViewTypes(bookmark);
 
-  const allActions = [
+  const viewActions = [
     {
       id: "reader" as const,
       title: "Reader View",
@@ -66,7 +66,7 @@ export default function BookmarkLinkTypeSelector({
     },
   ];
 
-  const availableActions = allActions.filter((action) =>
+  const availableViewActions = viewActions.filter((action) =>
     availableTypes.includes(action.id),
   );
 
@@ -76,7 +76,7 @@ export default function BookmarkLinkTypeSelector({
         Haptics.selectionAsync();
         onChange(nativeEvent.event as BookmarkLinkType);
       }}
-      actions={availableActions}
+      actions={availableViewActions}
       shouldOpenOnLongPress={false}
     >
       <ChevronDown onPress={() => Haptics.selectionAsync()} color="gray" />