fix(ui): add opt-in mobile keyboard resize mode and stabilize touch terminal input (#1107)

* fix(ui): add opt-in mobile keyboard resize mode

* fix(ui): stabilize touch terminal input and tab layout

* fix(ui): narrow touch terminal handling to mobile and tablet

* fix(ui): refine touch terminal input handling

* fix(ui): re-key terminal viewport on session id

* fix(ui): avoid touch-laptop terminal overlay regression

* fix(ui): hide ghostty system caret surfaces

* fix(settings): normalize mobile keyboard mode sanitization

* fix(ui): honor terminal quick keys toggle on mobile

* fix(ui): gate mobile keyboard resize mode on iOS

---------

Co-authored-by: vhqtvn <8930337+vhqtvn@users.noreply.github.com>
Co-authored-by: Bohdan Triapitsyn <artmore@protonmail.com>

packages/ui/src/lib/appearanceAutoSave.ts

@@ -2,6 +2,7 @@ import { useUIStore } from '@/stores/useUIStore';
 import { updateDesktopSettings } from '@/lib/persistence';
 import type { DesktopSettings } from '@/lib/desktop';
 import type { MonoFontOption, UiFontOption } from '@/lib/fontOptions';
+import type { MobileKeyboardMode } from '@/lib/mobileKeyboardMode';
 
 type AppearanceSlice = {
   showReasoningTraces: boolean;
@@ -32,6 +33,7 @@ type AppearanceSlice = {
   padding: number;
   cornerRadius: number;
   inputBarOffset: number;
+  mobileKeyboardMode: MobileKeyboardMode;
   diffLayoutPreference: 'dynamic' | 'inline' | 'side-by-side';
   diffViewMode: 'single' | 'stacked';
   gitChangesViewMode: 'flat' | 'tree';
@@ -70,6 +72,7 @@ export const startAppearanceAutoSave = (): void => {
     padding: useUIStore.getState().padding,
     cornerRadius: useUIStore.getState().cornerRadius,
     inputBarOffset: useUIStore.getState().inputBarOffset,
+    mobileKeyboardMode: useUIStore.getState().mobileKeyboardMode,
     diffLayoutPreference: useUIStore.getState().diffLayoutPreference,
     diffViewMode: useUIStore.getState().diffViewMode,
     gitChangesViewMode: useUIStore.getState().gitChangesViewMode,
@@ -120,6 +123,7 @@ export const startAppearanceAutoSave = (): void => {
       padding: state.padding,
       cornerRadius: state.cornerRadius,
       inputBarOffset: state.inputBarOffset,
+      mobileKeyboardMode: state.mobileKeyboardMode,
       diffLayoutPreference: state.diffLayoutPreference,
       diffViewMode: state.diffViewMode,
       gitChangesViewMode: state.gitChangesViewMode,
@@ -196,6 +200,9 @@ export const startAppearanceAutoSave = (): void => {
     if (current.inputBarOffset !== previous.inputBarOffset) {
       diff.inputBarOffset = current.inputBarOffset;
     }
+    if (current.mobileKeyboardMode !== previous.mobileKeyboardMode) {
+      diff.mobileKeyboardMode = current.mobileKeyboardMode;
+    }
     if (current.diffLayoutPreference !== previous.diffLayoutPreference) {
       diff.diffLayoutPreference = current.diffLayoutPreference;
     }