feat(mobile): mobile app navigation rework and beta-feedback closeout (#2561)
Navigation model rebuilt around two full-width drawers and a minimal header (sessions / title-switcher / usage ring / workspace): - Left sessions drawer: cross-project tree with live status indicators, swipe actions on sessions (rename/archive/delete) and on group headers (project edit / two-step close, worktree delete), reorder-only edit mode with collapsible project cards and draggable worktrees, app-level footer (connected instance, settings, pending web update). - Right workspace drawer: Changes / Files / Terminal / Notes / MCP as pill tabs (inactive tabs icon-only); panes stay mounted once visited. The full desktop file editor serves the Files tab; read/skill tool taps in chat open the file there at the requested line. - Header session switcher on title tap: 10 cross-project recents with live busy/attention indicators and project · branch metadata; the usage ring opens a metadata overlay with an explicit loading state. - The overflow menu is gone on phones (its destinations moved into the drawers); iPad keeps it until its dedicated layout pass. Correctness and continuity: - /auth/session answers bearer-first, so a stale WebView cookie can no longer mask a revoked device token; cold launches classify failures fast and land on an explicit connect screen. - Authoritative session snapshots raise frozen ordering baselines and stale live ranks — recents stay truthful after the app slept. - Cold launches reopen the last active session per instance (persisted pointer, confirmed against a sessions snapshot; a user-opened draft clears it), with a logo hold instead of a draft flash. Also: collapsed pill composer gains the stop control; chat tool rows share one 36px rhythm; Task subtool rows truncate; larger bottom safe area so the composer clears big-screen corner radii; Capacitor build hides About/Update (store updates apply there); widgets link to the sessions drawer with a list icon; MobileApp split into focused modules; five mobile-surface detectors unified; translucent borders normalized to 70%; all new strings translated across the 10 locales. iPad and foldable layouts are intentionally untouched - separate next version PR.
This commit is contained in:
Bohdan Triapitsyn
committed by
GitHub
GitHub
parent
ea8cc5d7b0
commit
86ef96302d
@@ -0,0 +1,220 @@
|
||||
import React from 'react';
|
||||
import { createPortal } from 'react-dom';
|
||||
|
||||
import { Icon } from '@/components/icon/Icon';
|
||||
import { useI18n } from '@/lib/i18n';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
const SURFACE_ROOT_ID = 'mobile-surface-root';
|
||||
const ENTER_DELAY_MS = 16;
|
||||
// Enter-slide duration. Heavy content is revealed when this transition actually
|
||||
// ends (transitionend); this also feeds the fallback timer.
|
||||
const ENTER_DURATION_MS = 200;
|
||||
|
||||
const ensureSurfaceRoot = (): HTMLElement | null => {
|
||||
if (typeof document === 'undefined') return null;
|
||||
let root = document.getElementById(SURFACE_ROOT_ID);
|
||||
if (!root) {
|
||||
root = document.createElement('div');
|
||||
root.id = SURFACE_ROOT_ID;
|
||||
document.body.appendChild(root);
|
||||
}
|
||||
return root;
|
||||
};
|
||||
|
||||
export type MobileFullscreenSurfaceProps = {
|
||||
open: boolean;
|
||||
onClose: () => void;
|
||||
title?: React.ReactNode;
|
||||
subtitle?: React.ReactNode;
|
||||
trailing?: React.ReactNode;
|
||||
/** If true, leave Escape available to nested content instead of dismissing the surface. */
|
||||
disableEscapeDismiss?: boolean;
|
||||
/** If true, render no header and let the child render its own (with its own back button). */
|
||||
headerless?: boolean;
|
||||
/** Drop the header's bottom divider (quiet single-page surfaces). */
|
||||
noHeaderBorder?: boolean;
|
||||
ariaLabel?: string;
|
||||
children: React.ReactNode;
|
||||
};
|
||||
|
||||
/** Fullscreen overlay surface for the phone layout: covers the whole app
|
||||
(including the header), slides in from the right like a navigation push,
|
||||
and closes via the header back arrow, Escape, or the Android back button. */
|
||||
export const MobileFullscreenSurface: React.FC<MobileFullscreenSurfaceProps> = ({
|
||||
open,
|
||||
onClose,
|
||||
title,
|
||||
subtitle,
|
||||
trailing,
|
||||
disableEscapeDismiss = false,
|
||||
headerless = false,
|
||||
noHeaderBorder = false,
|
||||
ariaLabel,
|
||||
children,
|
||||
}) => {
|
||||
const { t } = useI18n();
|
||||
const rootRef = React.useRef<HTMLElement | null>(null);
|
||||
const [entered, setEntered] = React.useState(false);
|
||||
const [contentReady, setContentReady] = React.useState(false);
|
||||
const surfaceRef = React.useRef<HTMLElement | null>(null);
|
||||
const previousFocusRef = React.useRef<HTMLElement | null>(null);
|
||||
// Keep onClose in a ref so the focus/keydown effect below depends only on `open`.
|
||||
// The parent passes a fresh inline onClose on every render; if the effect depended
|
||||
// on it, each parent re-render (e.g. an SSE store update) would re-run it and
|
||||
// refocus the first element — stealing focus from whatever input the user is in
|
||||
// and collapsing the keyboard mid-edit.
|
||||
const onCloseRef = React.useRef(onClose);
|
||||
React.useEffect(() => {
|
||||
onCloseRef.current = onClose;
|
||||
}, [onClose]);
|
||||
|
||||
if (typeof document !== 'undefined' && !rootRef.current) {
|
||||
rootRef.current = ensureSurfaceRoot();
|
||||
}
|
||||
|
||||
React.useEffect(() => {
|
||||
if (!open) {
|
||||
setEntered(false);
|
||||
return;
|
||||
}
|
||||
const id = window.setTimeout(() => setEntered(true), ENTER_DELAY_MS);
|
||||
return () => window.clearTimeout(id);
|
||||
}, [open]);
|
||||
|
||||
// Defer mounting heavy children until the enter slide finishes, so the
|
||||
// animation stays smooth instead of competing with a large content render.
|
||||
// Primary trigger is the slide's transitionend (below); this is just a
|
||||
// fallback in case it never fires (reduced motion / interrupted transition).
|
||||
React.useEffect(() => {
|
||||
if (!open) {
|
||||
setContentReady(false);
|
||||
return;
|
||||
}
|
||||
const id = window.setTimeout(() => setContentReady(true), ENTER_DELAY_MS + ENTER_DURATION_MS + 80);
|
||||
return () => window.clearTimeout(id);
|
||||
}, [open]);
|
||||
|
||||
React.useEffect(() => {
|
||||
if (!open) return;
|
||||
const previousOverflow = document.body.style.overflow;
|
||||
previousFocusRef.current = document.activeElement instanceof HTMLElement ? document.activeElement : null;
|
||||
document.body.style.overflow = 'hidden';
|
||||
const focusFirstElement = () => {
|
||||
const surface = surfaceRef.current;
|
||||
if (!surface) return;
|
||||
const focusable = surface.querySelector<HTMLElement>(
|
||||
'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])',
|
||||
);
|
||||
(focusable ?? surface).focus({ preventScroll: true });
|
||||
};
|
||||
const focusTimer = window.setTimeout(focusFirstElement, ENTER_DELAY_MS);
|
||||
const handleKeyDown = (event: KeyboardEvent) => {
|
||||
if (event.key === 'Escape' && !disableEscapeDismiss) {
|
||||
onCloseRef.current();
|
||||
return;
|
||||
}
|
||||
if (event.key !== 'Tab') return;
|
||||
const surface = surfaceRef.current;
|
||||
if (!surface) return;
|
||||
const focusable = Array.from(surface.querySelectorAll<HTMLElement>(
|
||||
'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])',
|
||||
)).filter((element) => !element.hasAttribute('disabled') && element.getAttribute('aria-hidden') !== 'true');
|
||||
if (focusable.length === 0) {
|
||||
event.preventDefault();
|
||||
surface.focus({ preventScroll: true });
|
||||
return;
|
||||
}
|
||||
const first = focusable[0];
|
||||
const last = focusable[focusable.length - 1];
|
||||
const active = document.activeElement;
|
||||
if (event.shiftKey && active === first) {
|
||||
event.preventDefault();
|
||||
last.focus({ preventScroll: true });
|
||||
} else if (!event.shiftKey && active === last) {
|
||||
event.preventDefault();
|
||||
first.focus({ preventScroll: true });
|
||||
}
|
||||
};
|
||||
document.addEventListener('keydown', handleKeyDown);
|
||||
return () => {
|
||||
window.clearTimeout(focusTimer);
|
||||
document.body.style.overflow = previousOverflow;
|
||||
document.removeEventListener('keydown', handleKeyDown);
|
||||
previousFocusRef.current?.focus?.({ preventScroll: true });
|
||||
previousFocusRef.current = null;
|
||||
};
|
||||
}, [disableEscapeDismiss, open]);
|
||||
|
||||
if (!open || !rootRef.current) return null;
|
||||
|
||||
return createPortal(
|
||||
<section
|
||||
ref={surfaceRef}
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-label={ariaLabel}
|
||||
tabIndex={-1}
|
||||
className="oc-keyboard-inset-surface fixed inset-0 z-50 flex flex-col bg-background text-foreground"
|
||||
style={{
|
||||
paddingTop: 'var(--oc-safe-area-top, 0px)',
|
||||
// Push-style enter: slide in from the right edge; settled state drops
|
||||
// the transform entirely so the surface isn't kept on a compositing
|
||||
// layer (iOS clips those to the safe-area viewport).
|
||||
transform: entered ? 'none' : 'translateX(100%)',
|
||||
transition: `transform ${ENTER_DURATION_MS}ms cubic-bezier(0.32, 0.72, 0, 1)`,
|
||||
}}
|
||||
onTransitionEnd={(event) => {
|
||||
// Reveal content exactly when the enter slide ends — not on a fixed timer.
|
||||
if (entered && event.target === event.currentTarget && event.propertyName === 'transform') {
|
||||
setContentReady(true);
|
||||
}
|
||||
}}
|
||||
>
|
||||
{!headerless ? (
|
||||
<header
|
||||
className={cn(
|
||||
'flex h-[var(--oc-header-height,56px)] shrink-0 items-center gap-2 px-3',
|
||||
!noHeaderBorder && 'border-b border-border/70',
|
||||
)}
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
className="-ml-1 flex size-10 shrink-0 items-center justify-center rounded-full text-muted-foreground transition-colors hover:bg-interactive-hover hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary"
|
||||
aria-label={t('mobile.surface.closeAria')}
|
||||
onClick={onClose}
|
||||
style={{ touchAction: 'manipulation' }}
|
||||
>
|
||||
<Icon name="close" className="size-5" />
|
||||
</button>
|
||||
<div className="min-w-0 flex-1 px-1">
|
||||
{title ? (
|
||||
typeof title === 'string' ? (
|
||||
<h2 className="truncate typography-ui-label text-foreground">{title}</h2>
|
||||
) : (
|
||||
title
|
||||
)
|
||||
) : null}
|
||||
{subtitle ? (
|
||||
typeof subtitle === 'string' ? (
|
||||
<p className="truncate typography-micro text-muted-foreground">{subtitle}</p>
|
||||
) : (
|
||||
subtitle
|
||||
)
|
||||
) : null}
|
||||
</div>
|
||||
{trailing ? <div className="flex shrink-0 items-center gap-1.5">{trailing}</div> : null}
|
||||
</header>
|
||||
) : null}
|
||||
<div className="min-h-0 flex-1 overflow-hidden">
|
||||
{contentReady ? (
|
||||
<div className="h-full" style={{ animation: 'oc-surface-content-in 200ms ease-out' }}>
|
||||
{children}
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
<style>{'@keyframes oc-surface-content-in { from { opacity: 0 } to { opacity: 1 } }'}</style>
|
||||
</section>,
|
||||
rootRef.current,
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user