feat(app): calm shell mobile reflow (0250 Phase 4) - #347
Merged
Conversation
added 2 commits
June 29, 2026 09:26
Reflow the calm shell to a phone layout that shares the desktop's three-mode grammar: the modes drop to a bottom tab bar, the per-mode List becomes a left Sheet (menu button), and the contextual Canvas becomes a bottom Sheet. The main Surface is the same router-outlet CalmSurface (single <main>), so all routes and the editor render unchanged. Calm + compact now renders CalmMobile instead of MobileShell (which stays for the workbench layout). Canvas fills its container; the desktop CalmShell wraps it in the fixed-width bordered column. Signed-off-by: xNet Test <test@xnet.dev>
Signed-off-by: xNet Test <test@xnet.dev>
Contributor
🖼️ UI changes in this PRNo visual differences detected in the changed UI. |
Contributor
|
Preview removed for PR #347. |
![github-advanced-security[bot]](https://avatars.githubusercontent.com/in/57789?s=60&v=4){kind=small}
| ) | ||
| } | ||
|
|
||
| export function CalmMobile({ children }: { children: ReactNode }) { |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Calm shell — mobile reflow (0250 Phase 4)
Follow-up to #344. Gives the calm everyperson shell a phone layout that shares the desktop's three-mode grammar, so xNet feels like one product across widths.
What landed
CalmMobile(apps/web/src/workbench/calm/CalmMobile.tsx) — the three modes (Companion · Workspace · Network) become a thumb-reach bottom tab bar (+ Search, Settings); the per-mode List is a left Sheet (menu button); the contextual Canvas is a bottom Sheet. The main Surface is the same router-outletCalmSurface, so every route + the editor render unchanged and there's a single<main>landmark.CalmMobileinstead ofMobileShell(which stays for the workbench layout). Borrows MobileShell'sarmedpattern to avoid the Base-UI backdrop tap bug.Canvasnow fills its container; the desktopCalmShellwraps it in the fixed-width bordered column (so it works as both a side panel and a full-width sheet).Verified
pnpm --filter xnet-web typecheck✓ · ESLint + prettier ✓ · 161 workbench tests ✓<main>, 5-item bottom nav (Companion active), Companion surface renders, menu → List sheet shows the Explorer; dark mode correct. The requirededitor-uxcheck'seditor-ux-mobile.specdrives this surface (All Documents heading → New → Page → editor), all shell-agnostic.Still a follow-up
AppNavigator) to the three modes — a separate native (React Navigation) track; per [0238] the actual mobile app isapps/webin a Capacitor webview, which this PR covers.🤖 Generated with Claude Code