feat(mobile): Add user setting for default bookmark view mode (#1723)

* feat(mobile): add user setting for default bookmark view mode

* regen db migration script

* clean up implementation

* Update docs/docs/07-Development/01-setup.md

* Update GEMINI.md

* use local setting instead of storing value in db

* improve start-dev.sh to also handle for db migration

* rename mobileBookmarkClickDefaultViewMode to defaultBookmarkView for consistency

5 files changed, 118 insertions, 5 deletions

diff --git a/apps/mobile/app/dashboard/(tabs)/settings.tsx b/apps/mobile/app/dashboard/(tabs)/settings.tsx
index db118df8..b0ba94df 100644
--- a/apps/mobile/app/dashboard/(tabs)/settings.tsx
+++ b/apps/mobile/app/dashboard/(tabs)/settings.tsx
@@ -1,5 +1,5 @@
 import { useEffect } from "react";
-import { Pressable, Text, View } from "react-native";
+import { ActivityIndicator, Pressable, Text, View } from "react-native";
 import { Slider } from "react-native-awesome-slider";
 import { useSharedValue } from "react-native-reanimated";
 import { Link } from "expo-router";
@@ -67,6 +67,31 @@ export default function Dashboard() {
             </Pressable>
           </Link>
         </View>
+        <View className="flex w-full flex-row items-center justify-between gap-8 rounded-lg bg-white px-4 py-2 dark:bg-accent">
+          <Link
+            asChild
+            href="/dashboard/settings/bookmark-default-view"
+            className="flex-1"
+          >
+            <Pressable className="flex flex-row justify-between">
+              <Text className="text-lg text-accent-foreground">
+                Default Bookmark View
+              </Text>
+              <View className="flex flex-row items-center gap-2">
+                {isSettingsLoading ? (
+                  <ActivityIndicator size="small" />
+                ) : (
+                  <Text className="text-lg text-muted-foreground">
+                    {settings.defaultBookmarkView === "reader"
+                      ? "Reader"
+                      : "Browser"}
+                  </Text>
+                )}
+                <ChevronRight color="rgb(0, 122, 255)" />
+              </View>
+            </Pressable>
+          </Link>
+        </View>
         <Text className="w-full p-1 text-2xl font-bold text-foreground">
           Upload Settings
         </Text>
diff --git a/apps/mobile/app/dashboard/_layout.tsx b/apps/mobile/app/dashboard/_layout.tsx
index 223101bd..eb1cbe4b 100644
--- a/apps/mobile/app/dashboard/_layout.tsx
+++ b/apps/mobile/app/dashboard/_layout.tsx
@@ -136,6 +136,14 @@ export default function Dashboard() {
           headerBackTitle: "Back",
         }}
       />
+      <Stack.Screen
+        name="settings/bookmark-default-view"
+        options={{
+          title: "Bookmark View Mode",
+          headerTitle: "Bookmark View Mode",
+          headerBackTitle: "Back",
+        }}
+      />
     </StyledStack>
   );
 }
diff --git a/apps/mobile/app/dashboard/bookmarks/[slug]/index.tsx b/apps/mobile/app/dashboard/bookmarks/[slug]/index.tsx
index 00954dd8..eafcfc19 100644
--- a/apps/mobile/app/dashboard/bookmarks/[slug]/index.tsx
+++ b/apps/mobile/app/dashboard/bookmarks/[slug]/index.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import { useState } from "react";
 import {
   Alert,
   Keyboard,
@@ -27,6 +27,7 @@ import FullPageSpinner from "@/components/ui/FullPageSpinner";
 import { Input } from "@/components/ui/Input";
 import { useToast } from "@/components/ui/Toast";
 import { useAssetUrl } from "@/lib/hooks";
+import useAppSettings from "@/lib/settings";
 import { api } from "@/lib/trpc";
 import { MenuView } from "@react-native-menu/menu";
 import {
@@ -378,9 +379,11 @@ export default function ListView() {
   const { slug } = useLocalSearchParams();
   const { colorScheme } = useColorScheme();
   const isDark = colorScheme === "dark";
+  const { settings } = useAppSettings();
 
-  const [bookmarkLinkType, setBookmarkLinkType] =
-    useState<BookmarkLinkType>("browser");
+  const [bookmarkLinkType, setBookmarkLinkType] = useState<BookmarkLinkType>(
+    settings.defaultBookmarkView,
+  );
 
   if (typeof slug !== "string") {
     throw new Error("Unexpected param type");
diff --git a/apps/mobile/app/dashboard/settings/bookmark-default-view.tsx b/apps/mobile/app/dashboard/settings/bookmark-default-view.tsx
new file mode 100644
index 00000000..c8c522cf
--- /dev/null
+++ b/apps/mobile/app/dashboard/settings/bookmark-default-view.tsx
@@ -0,0 +1,68 @@
+import { Pressable, Text, View } from "react-native";
+import { useRouter } from "expo-router";
+import CustomSafeAreaView from "@/components/ui/CustomSafeAreaView";
+import { Divider } from "@/components/ui/Divider";
+import { useToast } from "@/components/ui/Toast";
+import useAppSettings from "@/lib/settings";
+import { Check } from "lucide-react-native";
+
+export default function BookmarkDefaultViewSettings() {
+  const router = useRouter();
+  const { toast } = useToast();
+  const { settings, setSettings } = useAppSettings();
+
+  const handleUpdate = async (mode: "reader" | "browser") => {
+    try {
+      await setSettings({
+        ...settings,
+        defaultBookmarkView: mode,
+      });
+      toast({
+        message: "Default Bookmark View updated!",
+        showProgress: false,
+      });
+      router.back();
+    } catch {
+      toast({
+        message: "Something went wrong",
+        variant: "destructive",
+        showProgress: false,
+      });
+    }
+  };
+
+  const options = (["reader", "browser"] as const)
+    .map((mode) => {
+      const currentMode = settings.defaultBookmarkView;
+      const isChecked = currentMode === mode;
+      return [
+        <Pressable
+          onPress={() => handleUpdate(mode)}
+          className="flex flex-row justify-between"
+          key={mode}
+        >
+          <Text className="text-lg text-accent-foreground">
+            {{ browser: "Browser", reader: "Reader" }[mode]}
+          </Text>
+          {isChecked && <Check color="rgb(0, 122, 255)" />}
+        </Pressable>,
+        <Divider
+          key={mode + "-divider"}
+          orientation="horizontal"
+          className="my-3 h-0.5 w-full"
+        />,
+      ];
+    })
+    .flat();
+  options.pop();
+
+  return (
+    <CustomSafeAreaView>
+      <View className="flex h-full w-full items-center px-4 py-2">
+        <View className="w-full rounded-lg bg-white px-4 py-2 dark:bg-accent">
+          {options}
+        </View>
+      </View>
+    </CustomSafeAreaView>
+  );
+}
diff --git a/apps/mobile/lib/settings.ts b/apps/mobile/lib/settings.ts
index 58b0817f..51fa661f 100644
--- a/apps/mobile/lib/settings.ts
+++ b/apps/mobile/lib/settings.ts
@@ -10,6 +10,10 @@ const zSettingsSchema = z.object({
   address: z.string(),
   imageQuality: z.number().optional().default(0.2),
   theme: z.enum(["light", "dark", "system"]).optional().default("system"),
+  defaultBookmarkView: z
+    .enum(["reader", "browser"])
+    .optional()
+    .default("reader"),
 });
 
 export type Settings = z.infer<typeof zSettingsSchema>;
@@ -23,7 +27,12 @@ interface AppSettingsState {
 const useSettings = create<AppSettingsState>((set, get) => ({
   settings: {
     isLoading: true,
-    settings: { address: "", imageQuality: 0.2, theme: "system" },
+    settings: {
+      address: "",
+      imageQuality: 0.2,
+      theme: "system",
+      defaultBookmarkView: "reader",
+    },
   },
   setSettings: async (settings) => {
     await SecureStore.setItemAsync(SETTING_NAME, JSON.stringify(settings));