feat(android): add zoom slider

fix(android): gray screen bug

packages/settings/package.json

@@ -14,6 +14,7 @@
   "dependencies": {
     "@methanium/ui": "*",
     "@tanstack/react-router": "^1.170.21",
+    "@tauri-apps/api": "^2.11.1",
     "@tensamin/cache": "workspace:*",
     "@tensamin/hotkeys": "workspace:*",
     "@tensamin/mtp": "workspace:*",

packages/settings/src/manifest.ts

@@ -1,3 +1,4 @@
+import Accessibility from "./pages/accessibility";
 import Cache from "./pages/cache";
 import Call from "./pages/call";
 import Chat from "./pages/chat";
@@ -26,6 +27,12 @@ export const settingsPages = [
   { category: "general", path: "call", label: "Call", component: Call },
   { category: "application", path: "cache", label: "Cache", component: Cache },
   { category: "application", path: "theme", label: "Theme", component: Theme },
+  {
+    category: "application",
+    path: "accessibility",
+    label: "Accessibility",
+    component: Accessibility,
+  },
   {
     category: "application",
     path: "hotkeys",

packages/settings/src/pages/accessibility.tsx

@@ -0,0 +1,80 @@
+import { Button, Label, Slider } from "@methanium/ui";
+import { invoke, isTauri } from "@tauri-apps/api/core";
+import { RotateCcw } from "lucide-react";
+import { useEffect, useState } from "react";
+
+const DEFAULT_INITIAL_SCALE = 290;
+const MIN_INITIAL_SCALE = 210;
+const isAndroid = isTauri() && /Android/.test(navigator.userAgent);
+
+export default function Page() {
+  const [initialScale, setInitialScale] = useState(DEFAULT_INITIAL_SCALE);
+  const [loading, setLoading] = useState(isAndroid);
+
+  useEffect(() => {
+    if (!isAndroid) return;
+
+    let active = true;
+    void invoke<number>("accessibility_get_initial_scale")
+      .then((scale) => {
+        if (active) setInitialScale(scale);
+      })
+      .catch((error: unknown) => {
+        console.error("Failed to load the Android initial scale", error);
+      })
+      .finally(() => {
+        if (active) setLoading(false);
+      });
+
+    return () => {
+      active = false;
+    };
+  }, []);
+
+  if (!isAndroid) return null;
+
+  function updateInitialScale(nextScale: number) {
+    setInitialScale(nextScale);
+    void invoke("accessibility_set_initial_scale", {
+      initialScale: nextScale,
+    }).catch((error: unknown) => {
+      console.error("Failed to update the Android initial scale", error);
+    });
+  }
+
+  return (
+    <div className="flex max-w-md flex-col gap-2">
+      <div className="flex items-center justify-between gap-2">
+        <Label htmlFor="initial-scale">Interface scale</Label>
+        <span className="text-muted-foreground text-sm tabular-nums">
+          {initialScale}%
+        </span>
+      </div>
+      <div className="flex items-center gap-3">
+        <Slider
+          id="initial-scale"
+          aria-label="Interface scale"
+          min={MIN_INITIAL_SCALE}
+          max={500}
+          step={1}
+          value={[initialScale]}
+          disabled={loading}
+          onValueChange={(value) => {
+            const nextScale = Array.isArray(value) ? value[0] : value;
+            if (nextScale !== undefined) updateInitialScale(nextScale);
+          }}
+        />
+        <Button
+          className="size-8 shrink-0 p-0"
+          variant="outline"
+          aria-label="Reset interface scale"
+          title="Reset interface scale"
+          disabled={loading || initialScale === DEFAULT_INITIAL_SCALE}
+          onClick={() => updateInitialScale(DEFAULT_INITIAL_SCALE)}
+        >
+          <RotateCcw className="size-4" />
+        </Button>
+      </div>
+    </div>
+  );
+}