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
@@ -30,7 +30,7 @@ import { useWorktreeOrderStore } from '@/stores/useWorktreeOrderStore';
|
||||
import type { WorktreeMetadata } from '@/types/worktree';
|
||||
|
||||
import { MobileDeleteWorktreeDialog } from './MobileDeleteWorktreeDialog';
|
||||
import { MobileSurfaceShell } from './MobileSurfaceShell';
|
||||
import { MobileFullscreenSurface } from './MobileFullscreenSurface';
|
||||
|
||||
type MobileEditableProject = {
|
||||
id: string;
|
||||
@@ -72,7 +72,7 @@ const SortableWorktreeRow: React.FC<{
|
||||
ref={setNodeRef}
|
||||
style={style}
|
||||
className={cn(
|
||||
'flex items-center gap-1 rounded-2xl border border-border/40 bg-[var(--surface-elevated)] px-1.5 py-1.5 transition-colors',
|
||||
'flex items-center gap-1 rounded-2xl border border-border/70 bg-[var(--surface-elevated)] px-1.5 py-1.5 transition-colors',
|
||||
isDragging && 'shadow-lg shadow-black/20',
|
||||
)}
|
||||
>
|
||||
@@ -218,12 +218,12 @@ export const MobileProjectEditSurface: React.FC<MobileProjectEditSurfaceProps> =
|
||||
|
||||
return (
|
||||
<>
|
||||
<MobileSurfaceShell
|
||||
<MobileFullscreenSurface
|
||||
open={open}
|
||||
onClose={onClose}
|
||||
onBack={onClose}
|
||||
title={t('projectEditDialog.title')}
|
||||
ariaLabel={t('projectEditDialog.title')}
|
||||
noHeaderBorder
|
||||
trailing={
|
||||
<Button
|
||||
type="button"
|
||||
@@ -293,7 +293,7 @@ export const MobileProjectEditSurface: React.FC<MobileProjectEditSurfaceProps> =
|
||||
aria-label={t('projectEditDialog.option.none')}
|
||||
className={cn(
|
||||
'flex size-9 items-center justify-center rounded-xl border-2 transition-all',
|
||||
color === null ? 'border-foreground' : 'border-border hover:border-border/80',
|
||||
color === null ? 'border-foreground' : 'border-border/70 hover:border-border/70',
|
||||
)}
|
||||
style={{ touchAction: 'manipulation' }}
|
||||
>
|
||||
@@ -308,7 +308,7 @@ export const MobileProjectEditSurface: React.FC<MobileProjectEditSurfaceProps> =
|
||||
title={c.label}
|
||||
className={cn(
|
||||
'size-9 rounded-xl border-2 transition-all',
|
||||
color === c.key ? 'border-foreground' : 'border-transparent hover:border-border',
|
||||
color === c.key ? 'border-foreground' : 'border-transparent hover:border-border/70',
|
||||
)}
|
||||
style={{ backgroundColor: c.cssVar, touchAction: 'manipulation' }}
|
||||
/>
|
||||
@@ -328,7 +328,7 @@ export const MobileProjectEditSurface: React.FC<MobileProjectEditSurfaceProps> =
|
||||
aria-label={t('projectEditDialog.option.none')}
|
||||
className={cn(
|
||||
'flex size-9 items-center justify-center rounded-xl border-2 transition-all',
|
||||
icon === null ? 'border-foreground bg-[var(--surface-elevated)]' : 'border-border hover:border-border/80',
|
||||
icon === null ? 'border-foreground bg-[var(--surface-elevated)]' : 'border-border/70 hover:border-border/70',
|
||||
)}
|
||||
style={{ touchAction: 'manipulation' }}
|
||||
>
|
||||
@@ -343,7 +343,7 @@ export const MobileProjectEditSurface: React.FC<MobileProjectEditSurfaceProps> =
|
||||
title={i.label}
|
||||
className={cn(
|
||||
'flex size-9 items-center justify-center rounded-xl border-2 transition-all',
|
||||
icon === i.key ? 'border-foreground bg-[var(--surface-elevated)]' : 'border-border hover:border-border/80',
|
||||
icon === i.key ? 'border-foreground bg-[var(--surface-elevated)]' : 'border-border/70 hover:border-border/70',
|
||||
)}
|
||||
style={{ touchAction: 'manipulation' }}
|
||||
>
|
||||
@@ -402,7 +402,7 @@ export const MobileProjectEditSurface: React.FC<MobileProjectEditSurfaceProps> =
|
||||
) : null}
|
||||
</div>
|
||||
) : null}
|
||||
</MobileSurfaceShell>
|
||||
</MobileFullscreenSurface>
|
||||
|
||||
{project ? (
|
||||
<MobileDeleteWorktreeDialog
|
||||
|
||||
Reference in New Issue
Block a user