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

1 files changed, 68 insertions, 0 deletions

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>
+  );
+}