Fix desktop showing the mobile layout: decide layout from the actual build platform (cfg!(mobile)) instead of sniffing the webview user-agent, which some WebKitGTK builds report mobile-looking (#63)

src/lib/api.ts

@@ -463,6 +463,10 @@ export async function getInstallType(): Promise<string> {
   return invoke("get_install_type");
 }
 
+export async function isMobilePlatform(): Promise<boolean> {
+  return invoke("is_mobile_platform");
+}
+
 export async function getPendingOpenFile(): Promise<string | null> {
   return invoke("get_pending_open_file");
 }

src/lib/components/AppLayout.svelte

@@ -48,12 +48,13 @@
 		viewerNote,
 		notebookSortMode,
 		notebookOrder,
-		syncState
+		syncState,
+		platformIsMobile
 	} from '$lib/stores/app';
 
 	const appWindow = getCurrentWindow();
 	const isMac = navigator.platform.startsWith('Mac');
-	const isMobile = /android|iphone|ipad|ipod/i.test(navigator.userAgent);
+	const isMobile = $derived($platformIsMobile);
 	const isAndroid = /android/i.test(navigator.userAgent);
 	import { loadVaultState, saveVaultState, readNote, createDailyNote, createBackup, getPendingOpenFile, addQuickAccess, removeQuickAccess, getQuickAccess, setTheme, syncNow, setTaskDone, setTaskPriority, setTaskDue } from '$lib/api';
 	import { debounce } from '$lib/utils/debounce';
@@ -329,7 +330,7 @@
 	let historyDepth = 0;
 	let navFromPopstate = false;
 
-	if (isMobile) {
+	if (get(platformIsMobile)) {
 		history.replaceState({ mobileView: 'sidebar', depth: 0 }, '');
 
 		$effect(() => {

src/lib/stores/app.ts

@@ -85,6 +85,11 @@ export const updateAvailable = writable<{
 } | null>(null);
 export const updateObj = writable<any>(null);
 export const installType = writable<string>("native");
+// True only on the Android/iOS build. Defaults to a user-agent guess for the first paint, then
+// gets the authoritative compile-time value from the backend at startup (see +layout). (#63)
+export const platformIsMobile = writable<boolean>(
+  typeof navigator !== "undefined" && /android|iphone|ipad|ipod/i.test(navigator.userAgent),
+);
 export const androidApkUrl = writable<string | null>(null);
 
 // Install types that handle their own updates (in-app auto-updater, or a

src/routes/+layout.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
 	import '../app.css';
-	import { theme, appConfig, activeNote, activeNotePath, installType, checkForUpdate, checkForUpdateMobile, isManagedInstall } from '$lib/stores/app';
-	import { openFile, openUrl, readNote, getInstallType } from '$lib/api';
+	import { theme, appConfig, activeNote, activeNotePath, installType, platformIsMobile, checkForUpdate, checkForUpdateMobile, isManagedInstall } from '$lib/stores/app';
+	import { openFile, openUrl, readNote, getInstallType, isMobilePlatform } from '$lib/api';
 	import { get } from 'svelte/store';
 	import ResizeHandles from '$lib/components/ResizeHandles.svelte';
 
@@ -88,6 +88,8 @@
 
 	// Detect install type and check for updates on startup
 	onMount(() => {
+		// Authoritative platform from the backend (compile-time), overriding the UA guess. (#63)
+		isMobilePlatform().then((m) => platformIsMobile.set(m)).catch(() => {});
 		if (isMobile) {
 			installType.set('android');
 			checkForUpdateMobile();