feat(mobile): add device detection and screen orientation locking

src/lib/utils/Mobile.ts

@@ -1,3 +1,10 @@
+import { Device } from "@capacitor/device"
+
 export function checkMobile(): boolean {
     return window.matchMedia("screen and (max-width: 800px)").matches
 }
+
+export async function isAndroidOriOS(): Promise<boolean> {
+    const info = await Device.getInfo()
+    return info.platform === "ios" || info.platform === "android"
+}

src/routes/+layout.svelte

@@ -27,6 +27,8 @@
     import InstallBanner from "$lib/components/ui/InstallBanner.svelte"
     import Market from "$lib/components/market/Market.svelte"
     import { swipe } from "$lib/components/ui/Swipe"
+    import { ScreenOrientation } from "@capacitor/screen-orientation"
+    import { isAndroidOriOS } from "$lib/utils/Mobile"
 
     log.debug("Initializing app, layout routes page.")
 
@@ -264,7 +266,19 @@
         isLocaleSet = true
     }
 
+    const lockOrientation = async () => {
+        try {
+            await ScreenOrientation.lock({ orientation: "portrait" })
+            log.info("Screen orientation locked to portrait.")
+        } catch (error) {
+            console.error("Failed to lock screen orientation:", error)
+        }
+    }
+
     onMount(async () => {
+        if (await isAndroidOriOS()) {
+            lockOrientation()
+        }
         await checkIfUserIsLogged($page.route.id)
         await initializeLocale()
         buildStyle()