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:
committed by
GitHub
parent
ea8cc5d7b0
commit
86ef96302d
@@ -0,0 +1,85 @@
|
||||
import React from 'react';
|
||||
|
||||
/**
|
||||
* Native-feeling edge swipes on the mobile chat: start a horizontal swipe from
|
||||
* the very left/right screen edge and drag toward the centre.
|
||||
*
|
||||
* - Left edge → centre = open the sessions drawer
|
||||
* - Right edge → centre = open the most recent overflow surface
|
||||
*
|
||||
* Only `touchstart`/`touchend` are observed (both passive), so this never
|
||||
* interferes with vertical chat scrolling or the horizontal scroll inside code
|
||||
* blocks — it just reads where the gesture began and ended. The edge zone
|
||||
* keeps it clear of in-content horizontal scroll, which lives away from the
|
||||
* screen edges.
|
||||
*/
|
||||
|
||||
const EDGE_ZONE = 32; // px from a side where the swipe must begin
|
||||
const MIN_DISTANCE = 64; // px of horizontal travel required to commit
|
||||
const MAX_OFF_AXIS_RATIO = 0.7; // |dy| must stay below |dx| * this (keep it horizontal)
|
||||
|
||||
export interface EdgeSwipeOptions {
|
||||
/** Swipe that started at the left edge and travelled right. */
|
||||
onLeftEdgeSwipe?: () => void;
|
||||
/** Swipe that started at the right edge and travelled left. */
|
||||
onRightEdgeSwipe?: () => void;
|
||||
}
|
||||
|
||||
export const useEdgeSwipe = (
|
||||
ref: React.RefObject<HTMLElement | null>,
|
||||
options: EdgeSwipeOptions,
|
||||
): void => {
|
||||
// Keep callbacks in a ref so changing identities don't re-attach the listeners.
|
||||
const optionsRef = React.useRef(options);
|
||||
optionsRef.current = options;
|
||||
|
||||
React.useEffect(() => {
|
||||
const element = ref.current;
|
||||
if (!element) return;
|
||||
|
||||
let tracking = false;
|
||||
let fromLeftEdge = false;
|
||||
let startX = 0;
|
||||
let startY = 0;
|
||||
|
||||
const onTouchStart = (event: TouchEvent) => {
|
||||
if (event.touches.length !== 1) {
|
||||
tracking = false;
|
||||
return;
|
||||
}
|
||||
const touch = event.touches[0];
|
||||
const width = element.clientWidth;
|
||||
const nearLeft = touch.clientX <= EDGE_ZONE;
|
||||
const nearRight = touch.clientX >= width - EDGE_ZONE;
|
||||
tracking = nearLeft || nearRight;
|
||||
fromLeftEdge = nearLeft;
|
||||
startX = touch.clientX;
|
||||
startY = touch.clientY;
|
||||
};
|
||||
|
||||
const onTouchEnd = (event: TouchEvent) => {
|
||||
if (!tracking) return;
|
||||
tracking = false;
|
||||
const touch = event.changedTouches[0];
|
||||
if (!touch) return;
|
||||
|
||||
const dx = touch.clientX - startX;
|
||||
const dy = touch.clientY - startY;
|
||||
if (Math.abs(dx) < MIN_DISTANCE) return;
|
||||
if (Math.abs(dy) > Math.abs(dx) * MAX_OFF_AXIS_RATIO) return;
|
||||
// Must travel toward the centre: left edge → rightward, right edge → leftward.
|
||||
if (fromLeftEdge && dx <= 0) return;
|
||||
if (!fromLeftEdge && dx >= 0) return;
|
||||
|
||||
if (fromLeftEdge) optionsRef.current.onLeftEdgeSwipe?.();
|
||||
else optionsRef.current.onRightEdgeSwipe?.();
|
||||
};
|
||||
|
||||
element.addEventListener('touchstart', onTouchStart, { passive: true });
|
||||
element.addEventListener('touchend', onTouchEnd, { passive: true });
|
||||
return () => {
|
||||
element.removeEventListener('touchstart', onTouchStart);
|
||||
element.removeEventListener('touchend', onTouchEnd);
|
||||
};
|
||||
}, [ref]);
|
||||
};
|
||||
Reference in New Issue
Block a user