mirror of
https://github.com/getpaseo/paseo.git
synced 2026-11-03 15:12:48 +00:00
paseo-bot[bot]andElsa
ce412d04c3
* fix(app): unify layout and density breakpoints Align md styles with the existing 600pt compact/wide boundary so 600-719pt tablet windows no longer mix wide layout with compact metrics. Keep the 500pt composer threshold local to its measured content width. Let Settings navigation shrink before its detail pane falls below the existing 400pt target, while retaining the preferred 720pt split budget. Validated workspace typecheck, lint, formatting, real Chromium resize checks, Duo portrait and landscape, and existing sidebar geometry tests. * test(app): cover consistent docked navigation and readable Settings Compare narrow and wide navigation density and Settings detail space through the real browser journey, including compact Settings after resize. The regression fails with main's split layout and density boundaries. Co-authored-by: Elsa <zeyugao@outlook.com> --------- Co-authored-by: Elsa <zeyugao@outlook.com> Co-authored-by: paseo-bot[bot] <266920839+paseo-bot[bot]@users.noreply.github.com>
57 lines
2.3 KiB
TypeScript
57 lines
2.3 KiB
TypeScript
import { useUnistyles } from "react-native-unistyles";
|
|
import { isWeb } from "@/constants/platform";
|
|
|
|
export const FOOTER_HEIGHT = 75;
|
|
|
|
// Shared header inner height (excluding safe area insets and border)
|
|
// Used by both agent header (ScreenHeader) and explorer sidebar header
|
|
// This ensures both headers have the same visual height
|
|
export const HEADER_INNER_HEIGHT = 36;
|
|
export const HEADER_INNER_HEIGHT_MOBILE = 56;
|
|
export const WORKSPACE_SECONDARY_HEADER_HEIGHT = 36;
|
|
export const HEADER_TOP_PADDING_MOBILE = 8;
|
|
|
|
// Measured composer width; independent of the window's compact/wide breakpoint.
|
|
export const COMPACT_CONTENT_WIDTH = 500;
|
|
|
|
// Settings navigation can shrink below its preferred width to preserve the detail
|
|
// minimum. Both targets must fit before Settings shares width with app navigation.
|
|
export const SETTINGS_DESKTOP_SIDEBAR_WIDTH = 320;
|
|
export const SETTINGS_DESKTOP_DETAIL_MIN_WIDTH = 400;
|
|
export const SETTINGS_DESKTOP_SPLIT_MIN_WIDTH =
|
|
SETTINGS_DESKTOP_SIDEBAR_WIDTH + SETTINGS_DESKTOP_DETAIL_MIN_WIDTH;
|
|
|
|
// Desktop app constants for macOS traffic light buttons
|
|
// These buttons (close/minimize/maximize) overlay the top-left corner
|
|
export const DESKTOP_TRAFFIC_LIGHT_WIDTH = 78;
|
|
export const DESKTOP_TRAFFIC_LIGHT_HEIGHT = 45;
|
|
|
|
// Custom desktop window controls (minimize/maximize/close) — top-right
|
|
export const DESKTOP_WINDOW_CONTROLS_HEIGHT = HEADER_INNER_HEIGHT;
|
|
|
|
export {
|
|
getIsElectron as getIsElectronRuntime,
|
|
getIsElectronMac as getIsElectronRuntimeMac,
|
|
} from "./platform";
|
|
|
|
/** Below md (600 points), sidebars overlay the workspace; wider layouts can dock them. */
|
|
export function isCompactBreakpoint(breakpoint: string | undefined): boolean {
|
|
return breakpoint === "xs" || breakpoint === "sm";
|
|
}
|
|
|
|
/**
|
|
* Reactive hook — re-renders the component when the breakpoint changes.
|
|
* Always use this instead of reading UnistylesRuntime.breakpoint directly.
|
|
*/
|
|
export function useIsCompactFormFactor(): boolean {
|
|
const { rt } = useUnistyles();
|
|
return isCompactBreakpoint(rt.breakpoint);
|
|
}
|
|
|
|
// SplitContainer relies on dnd-kit and DOM-backed accessibility helpers.
|
|
// Keep that capability distinct from desktop-width layout so touch tablets
|
|
// can use the desktop shell without entering web-only code paths.
|
|
export function supportsDesktopPaneSplits(): boolean {
|
|
return isWeb;
|
|
}
|