mirror of
https://github.com/Ark0N/Codeman.git
synced 2026-09-30 12:39:42 +02:00
JD
c087d0ae4d
The phone tier stopped at innerWidth < 430 and @media (max-width: 430px), so every current large phone landed in the tablet layout: the 430pt iPhone 14 Pro Max, 15 Plus, 15 Pro Max and 16 Plus, the 440pt iPhone 16 Pro Max and 17 Pro Max, Pixel 6 Pro, 7 Pro and OnePlus 12 Pro, the 448pt Pixel 8 Pro and 9 Pro XL, and the Galaxy Z Fold 5 cover screen at 460. On those devices the header icon row replaced the session pill, the toolbar kept the desktop Run Shell button instead of Enter and the mic, the keyboard accessory bar could never become visible because its .visible rule lives inside the phone block, and the toolbar jumped to the top of the page when the keyboard opened. The new cutoff is 600, the line test/mobile/devices.ts already draws between large phones (430-599) and small tablets (600-767). No physical device sits between 480 and 600, but a phone zoomed out one or two steps in Safari does: a 440pt iPhone at 85% or 75% page zoom reports 518px or 587px and still needs the phone controls, which a 480 cutoff would have taken away. The phone block is max-width: 599px and the tablet block starts at min-width: 600px, so a 600px device is a tablet in CSS and in getDeviceType() alike instead of straddling the boundary the way 430pt phones did. The number changes everywhere it is encoded: JS, CSS, comments, CLAUDE.md, the CI tests that pin the phone block, and the test:mobile helpers. Measurement history that names 430px stays as written.
134 lines
3.3 KiB
TypeScript
134 lines
3.3 KiB
TypeScript
// Port assignments
|
|
export const PORTS = {
|
|
KEYBOARD: 3200,
|
|
TABS: 3201,
|
|
SUBAGENT_WINDOWS: 3202,
|
|
SETTINGS: 3203,
|
|
LAYOUT: 3204,
|
|
DEVICE_MATRIX: 3205,
|
|
VISUAL_REGRESSION: 3206,
|
|
ACCESSIBILITY: 3207,
|
|
HEADER_BUTTONS: 3208,
|
|
} as const;
|
|
|
|
// CSS Selectors
|
|
export const SELECTORS = {
|
|
// Header
|
|
HEADER: '.header',
|
|
HEADER_BRAND: '.header-brand',
|
|
CASE_SELECT_GROUP: '.case-select-group',
|
|
VERSION_DISPLAY: '.version-display',
|
|
|
|
// Toolbar
|
|
TOOLBAR: '.toolbar',
|
|
TOOLBAR_RIGHT: '.toolbar-right',
|
|
SETTINGS_MOBILE: '.btn-settings-mobile',
|
|
CASE_MOBILE: '.btn-case-mobile',
|
|
|
|
// Tabs
|
|
TABS_CONTAINER: '.session-tabs',
|
|
TAB: '.session-tab',
|
|
TAB_ACTIVE: '.session-tab.active',
|
|
TAB_CLOSE: '.tab-close',
|
|
TAB_COUNT_GROUP: '.tab-count-group',
|
|
TAB_NAME: '.tab-name',
|
|
|
|
// Keyboard
|
|
KEYBOARD_ACCESSORY: '.keyboard-accessory-bar',
|
|
KEYBOARD_ACCESSORY_VISIBLE: '.keyboard-accessory-bar.visible',
|
|
|
|
// Terminal
|
|
TERMINAL_CONTAINER: '.terminal-container',
|
|
MAIN: '.main',
|
|
|
|
// Subagent windows
|
|
SUBAGENT_WINDOW: '.subagent-window',
|
|
SUBAGENT_HEADER: '.subagent-header',
|
|
SUBAGENT_BADGE: '.subagent-badge',
|
|
|
|
// Settings
|
|
SETTINGS_MODAL: '#appSettingsModal',
|
|
SETTINGS_MODAL_CONTENT: '.modal-content',
|
|
SETTINGS_MODAL_BODY: '.modal-body',
|
|
SETTINGS_MODAL_TABS: '.modal-tabs',
|
|
|
|
// Modals general
|
|
MODAL: '.modal',
|
|
MODAL_CONTENT: '.modal-content',
|
|
} as const;
|
|
|
|
// Device breakpoints (match app.js MobileDetection)
|
|
export const BREAKPOINTS = {
|
|
PHONE_MAX: 599,
|
|
TABLET_MAX: 768,
|
|
} as const;
|
|
|
|
// Keyboard constants (match app.js KeyboardHandler)
|
|
export const KEYBOARD = {
|
|
SHOW_THRESHOLD: 150, // heightDiff > 150px triggers show
|
|
HIDE_THRESHOLD: 100, // heightDiff < 100px triggers hide
|
|
TYPICAL_IOS_HEIGHT: 336,
|
|
FOCUSIN_DELAY: 400,
|
|
ANIMATION_DELAY: 150,
|
|
RESIZE_DELAY_SHOW: 150,
|
|
RESIZE_DELAY_HIDE: 100,
|
|
ACCESSORY_BAR_HEIGHT: 44,
|
|
TOOLBAR_HEIGHT: 40,
|
|
CONFIRM_TIMEOUT: 2000,
|
|
} as const;
|
|
|
|
// Swipe constants (match app.js SwipeHandler)
|
|
export const SWIPE = {
|
|
MIN_DISTANCE: 80,
|
|
MAX_TIME: 300,
|
|
MAX_VERTICAL_DRIFT: 100,
|
|
} as const;
|
|
|
|
// Subagent window constants
|
|
export const SUBAGENT = {
|
|
MOBILE_CARD_HEIGHT: 110,
|
|
MOBILE_CARD_GAP: 4,
|
|
MOBILE_CARD_STRIDE: 114, // height + gap
|
|
TOOLBAR_OFFSET: 40,
|
|
DEFAULT_HEADER_HEIGHT: 36,
|
|
} as const;
|
|
|
|
// Visual regression
|
|
export const VISUAL = {
|
|
DEFAULT_THRESHOLD: 0.1,
|
|
MAX_DIFF_PERCENT: 0.5,
|
|
SNAPSHOT_DIR: 'test/mobile/snapshots',
|
|
} as const;
|
|
|
|
// Visual regression breakpoints (width values for screenshot comparison)
|
|
export const VISUAL_BREAKPOINTS = [320, 375, 390, 393, 430, 440, 600, 768, 834, 1024] as const;
|
|
|
|
// Wait times
|
|
export const WAIT = {
|
|
DOM_CONTENT_LOADED: 'domcontentloaded' as const,
|
|
PAGE_SETTLE: 3000,
|
|
KEYBOARD_ANIMATION: 200,
|
|
SSE_CONNECT: 1000,
|
|
};
|
|
|
|
// Touch target minimum (WCAG 2.5.5 / Apple HIG)
|
|
export const MIN_TOUCH_TARGET = 44;
|
|
|
|
// Body CSS classes
|
|
export const BODY_CLASSES = {
|
|
MOBILE: 'device-mobile',
|
|
TABLET: 'device-tablet',
|
|
DESKTOP: 'device-desktop',
|
|
TOUCH: 'touch-device',
|
|
IOS: 'ios-device',
|
|
SAFARI: 'safari-browser',
|
|
KEYBOARD_VISIBLE: 'keyboard-visible',
|
|
} as const;
|
|
|
|
// Settings localStorage keys
|
|
export const STORAGE_KEYS = {
|
|
SETTINGS_MOBILE: 'codeman-app-settings-mobile',
|
|
SETTINGS_DESKTOP: 'codeman-app-settings',
|
|
NOTIFICATION_PREFS_MOBILE: 'codeman-notification-prefs-mobile',
|
|
} as const;
|