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, 7 deletions

diff --git a/apps/mobile/app/dashboard/bookmarks/[slug]/index.tsx b/apps/mobile/app/dashboard/bookmarks/[slug]/index.tsx
index 7bf0f118..8fd04115 100644
--- a/apps/mobile/app/dashboard/bookmarks/[slug]/index.tsx
+++ b/apps/mobile/app/dashboard/bookmarks/[slug]/index.tsx
@@ -1,7 +1,7 @@
 import { useState } from "react";
-import { KeyboardAvoidingView } from "react-native";
+import { KeyboardAvoidingView, Pressable, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { Stack, useLocalSearchParams } from "expo-router";
+import { Stack, useLocalSearchParams, useRouter } from "expo-router";
 import BookmarkAssetView from "@/components/bookmarks/BookmarkAssetView";
 import BookmarkLinkTypeSelector, {
   BookmarkLinkType,
@@ -13,12 +13,14 @@ import FullPageError from "@/components/FullPageError";
 import FullPageSpinner from "@/components/ui/FullPageSpinner";
 import useAppSettings from "@/lib/settings";
 import { api } from "@/lib/trpc";
+import { Settings } from "lucide-react-native";
 import { useColorScheme } from "nativewind";
 
 import { BookmarkTypes } from "@karakeep/shared/types/bookmarks";
 
 export default function BookmarkView() {
   const insets = useSafeAreaInsets();
+  const router = useRouter();
   const { slug } = useLocalSearchParams();
   const { colorScheme } = useColorScheme();
   const isDark = colorScheme === "dark";
@@ -87,11 +89,22 @@ export default function BookmarkView() {
           headerTintColor: isDark ? "#fff" : "#000",
           headerRight: () =>
             bookmark.content.type === BookmarkTypes.LINK ? (
-              <BookmarkLinkTypeSelector
-                type={bookmarkLinkType}
-                onChange={(type) => setBookmarkLinkType(type)}
-                bookmark={bookmark}
-              />
+              <View className="flex-row items-center gap-3">
+                {bookmarkLinkType === "reader" && (
+                  <Pressable
+                    onPress={() =>
+                      router.push("/dashboard/settings/reader-settings")
+                    }
+                  >
+                    <Settings size={20} color="gray" />
+                  </Pressable>
+                )}
+                <BookmarkLinkTypeSelector
+                  type={bookmarkLinkType}
+                  onChange={(type) => setBookmarkLinkType(type)}
+                  bookmark={bookmark}
+                />
+              </View>
             ) : undefined,
         }}
       />