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
2026-08-01 21:16:36 +03:00
committed by GitHub
parent ea8cc5d7b0
commit 86ef96302d
69 changed files with 5006 additions and 4291 deletions
+85
View File
@@ -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]);
};