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
@@ -725,7 +725,9 @@ export const FilesView: React.FC<FilesViewProps> = ({ mode = 'full' }) => {
|
||||
|
||||
const currentDirectory = useEffectiveDirectory() ?? '';
|
||||
const root = normalizePath(currentDirectory.trim());
|
||||
const showEditorTabsRow = isMobile || mode !== 'editor-only';
|
||||
// editor-only hosts (desktop context panel, the mobile Files surface) bring
|
||||
// their own chrome — the open-file tabs row is redundant there.
|
||||
const showEditorTabsRow = mode !== 'editor-only';
|
||||
const suppressFileLoadingIndicator = mode === 'editor-only' && !isMobile;
|
||||
const searchFiles = useFileSearchStore((state) => state.searchFiles);
|
||||
const gitStatus = useGitStatus(currentDirectory);
|
||||
@@ -3753,10 +3755,13 @@ export const FilesView: React.FC<FilesViewProps> = ({ mode = 'full' }) => {
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
{/* Row 2: Docked editor toolbar (expanded). Desktop-only opt-in. */}
|
||||
{settingsExpandedEditorToolbar && !isMobile && selectedFile ? (
|
||||
{/* Row 2: Docked editor toolbar (expanded). Desktop opt-in; ALWAYS on
|
||||
for mobile — floating hover controls don't work with touch. */}
|
||||
{(settingsExpandedEditorToolbar || isMobile) && selectedFile ? (
|
||||
<div className="flex min-w-0 items-center gap-3 border-t border-border/40 bg-[var(--surface-subtle)] px-3 py-1">
|
||||
{displaySelectedPath ? (
|
||||
{/* Mobile hosts already show the file name in their own header;
|
||||
a truncated duplicate here just eats toolbar width. */}
|
||||
{displaySelectedPath && !isMobile ? (
|
||||
<span
|
||||
className="min-w-0 flex-1 truncate typography-meta text-muted-foreground"
|
||||
title={displaySelectedPath}
|
||||
@@ -3773,7 +3778,7 @@ export const FilesView: React.FC<FilesViewProps> = ({ mode = 'full' }) => {
|
||||
</div>
|
||||
|
||||
<div className="flex-1 min-h-0 min-w-0 relative">
|
||||
{selectedFile && !isSearchOpen && !(settingsExpandedEditorToolbar && !isMobile) && (
|
||||
{selectedFile && !isSearchOpen && !(settingsExpandedEditorToolbar || isMobile) && (
|
||||
<div
|
||||
ref={floatingToolbarRef}
|
||||
className="absolute right-3 top-3 z-30"
|
||||
|
||||
@@ -48,6 +48,9 @@ import { useI18n } from '@/lib/i18n';
|
||||
|
||||
type PlanViewProps = {
|
||||
targetPath?: string | null;
|
||||
/** Called after a send action routes the user to the chat — hosts that show
|
||||
PlanView in an overlay (mobile fullscreen surface) close it here. */
|
||||
onNavigatedToChat?: () => void;
|
||||
};
|
||||
|
||||
type PlanSendAction = 'improve' | 'implement';
|
||||
@@ -147,7 +150,7 @@ type SelectedLineRange = {
|
||||
end: number;
|
||||
};
|
||||
|
||||
export const PlanView: React.FC<PlanViewProps> = ({ targetPath = null }) => {
|
||||
export const PlanView: React.FC<PlanViewProps> = ({ targetPath = null, onNavigatedToChat }) => {
|
||||
const { t } = useI18n();
|
||||
const currentSessionId = useSessionUIStore((state) => state.currentSessionId);
|
||||
const createSession = useSessionUIStore((state) => state.createSession);
|
||||
@@ -526,7 +529,8 @@ export const PlanView: React.FC<PlanViewProps> = ({ targetPath = null }) => {
|
||||
const routeToChat = React.useCallback(() => {
|
||||
setActiveMainTab('chat');
|
||||
setSessionSwitcherOpen(false);
|
||||
}, [setActiveMainTab, setSessionSwitcherOpen]);
|
||||
onNavigatedToChat?.();
|
||||
}, [onNavigatedToChat, setActiveMainTab, setSessionSwitcherOpen]);
|
||||
|
||||
const handleConfirmPlanSend = React.useCallback(
|
||||
async (execution: TodoSendExecution) => {
|
||||
|
||||
@@ -242,7 +242,11 @@ export const SettingsView: React.FC<SettingsViewProps> = ({ onClose, forceMobile
|
||||
const settingsSlug = resolveSettingsSlug(settingsPageRaw);
|
||||
|
||||
const [mobileStage, setMobileStage] = React.useState<MobileStage>(initialMobileStage);
|
||||
const autoNavSlugRef = React.useRef<string | null>(null);
|
||||
// Seed with the mount-time slug when opening at the nav stage: the slug
|
||||
// persists across opens, and the deep-link auto-jump below must react only
|
||||
// to slug CHANGES after mount — not re-enter the previously visited page
|
||||
// every time settings reopen.
|
||||
const autoNavSlugRef = React.useRef<string | null>(initialMobileStage === 'nav' ? settingsSlug : null);
|
||||
|
||||
// No starter page on desktop: 'home' (fresh state) resolves to General.
|
||||
// settingsPage persists in the UI store, so subsequent opens restore the
|
||||
@@ -924,7 +928,10 @@ export const SettingsView: React.FC<SettingsViewProps> = ({ onClose, forceMobile
|
||||
{t(`settings.view.nav.group.${group}`)}
|
||||
</div>
|
||||
{pages.map((page) => {
|
||||
const selected = settingsSlug === page.slug;
|
||||
// On the mobile nav STAGE nothing is "current" — the user is
|
||||
// choosing, and settingsSlug only remembers the last visited
|
||||
// page. Keeping it highlighted read as a stuck selection.
|
||||
const selected = settingsSlug === page.slug && !(isMobile && mobileStage === 'nav');
|
||||
const iconName = getSettingsNavIcon(page.slug);
|
||||
if (!iconName && page.slug !== 'mcp') return null;
|
||||
|
||||
@@ -1069,15 +1076,19 @@ export const SettingsView: React.FC<SettingsViewProps> = ({ onClose, forceMobile
|
||||
{isMobile ? (
|
||||
<div
|
||||
className={cn(
|
||||
'flex h-[var(--oc-header-height,56px)] shrink-0 items-center gap-2 border-b px-3',
|
||||
'flex h-[var(--oc-header-height,56px)] shrink-0 items-center gap-2 px-3',
|
||||
// The root nav list reads as a single quiet page — no divider and
|
||||
// no back arrow (the X on the right is the only way out); subpages
|
||||
// keep both.
|
||||
mobileStage !== 'nav' && 'border-b',
|
||||
'bg-background'
|
||||
)}
|
||||
style={{ borderColor: 'var(--interactive-border)' }}
|
||||
style={mobileStage !== 'nav' ? { borderColor: 'var(--interactive-border)' } : undefined}
|
||||
>
|
||||
{(showBackButton || onClose) ? (
|
||||
{showBackButton ? (
|
||||
<button
|
||||
type="button"
|
||||
onClick={showBackButton ? handleBack : onClose}
|
||||
onClick={handleBack}
|
||||
aria-label={mobileBackButtonLabel}
|
||||
className="inline-flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-lg p-2 text-muted-foreground hover:text-foreground hover:bg-interactive-hover/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary"
|
||||
>
|
||||
|
||||
Reference in New Issue
Block a user