Merge pull request #162 from shenlvkang-collab/fix/foldable-mobile-settings

fix(mobile): preserve settings across foldable postures

src/web/public/mobile-handlers.js

@@ -43,6 +43,35 @@ const MobileDetection = {
     );
   },
 
+  /**
+   * Check whether this browser belongs to a handheld device.
+   *
+   * Unlike getDeviceType(), this classification must remain stable when a
+   * foldable changes posture. An unfolded phone can expose a desktop-width
+   * viewport, but it still needs the same per-device settings that were saved
+   * while folded. User-Agent Client Hints are preferred where available; the
+   * legacy token fallback covers Android WebView and iPhone browsers.
+   */
+  isHandheldDevice() {
+    if (!this.isTouchDevice()) return false;
+
+    const userAgent = navigator.userAgent || '';
+
+    // Prefer explicit UA form-factor signals. Besides matching real browsers,
+    // this avoids Chromium emulation reporting userAgentData.mobile=true for
+    // an iPad/tablet context created with isMobile=true.
+    if (/iPad|Tablet|Silk|PlayBook|Kindle|Windows NT|CrOS|Macintosh/i.test(userAgent)) {
+      return false;
+    }
+    if (/Android/i.test(userAgent) && !/Mobile/i.test(userAgent)) return false;
+    if (/Mobi|iPhone|iPod/i.test(userAgent)) return true;
+
+    const uaDataMobile = navigator.userAgentData?.mobile;
+    if (typeof uaDataMobile === 'boolean') return uaDataMobile;
+
+    return false;
+  },
+
   /** Check if device is iOS (iPhone, iPad, iPod) */
   isIOS() {
     return (

src/web/public/settings-ui.js

@@ -1758,17 +1758,21 @@ Object.assign(CodemanApp.prototype, {
     return settings.ralphTrackerEnabled ?? false;
   },
 
-  // Get the settings storage key based on device type (mobile vs desktop)
+  // Keep the settings namespace stable across foldable posture changes. Layout
+  // still follows viewport width, but an unfolded phone remains the same
+  // handheld device and must not silently switch to desktop preferences.
   getSettingsStorageKey() {
-    const isMobile = MobileDetection.getDeviceType() === 'mobile';
-    return isMobile ? 'codeman-app-settings-mobile' : 'codeman-app-settings';
+    const isHandheld =
+      MobileDetection.isHandheldDevice?.() ?? MobileDetection.getDeviceType() === 'mobile';
+    return isHandheld ? 'codeman-app-settings-mobile' : 'codeman-app-settings';
   },
 
   // Get default settings based on device type
   // Note: Notification prefs are handled separately by NotificationManager
   getDefaultSettings() {
-    const isMobile = MobileDetection.getDeviceType() === 'mobile';
-    if (isMobile) {
+    const isHandheld =
+      MobileDetection.isHandheldDevice?.() ?? MobileDetection.getDeviceType() === 'mobile';
+    if (isHandheld) {
       // Mobile defaults: minimal UI for small screens
       return {
         // Header visibility - hide everything on mobile
@@ -2180,7 +2184,7 @@ Object.assign(CodemanApp.prototype, {
     // so mobile defaults to OFF; the desktop blob is untouched and keeps its value.
     try {
       if (
-        MobileDetection.getDeviceType() === 'mobile' &&
+        (MobileDetection.isHandheldDevice?.() ?? MobileDetection.getDeviceType() === 'mobile') &&
         !localStorage.getItem('codeman:planUsagePerDeviceMigrated')
       ) {
         const s = this.loadAppSettingsFromStorage();