Problem.AppShell.tsx is a desktop top bar: logo + Gardens/Plants/Settings links + username + Sign out, all in one row. At 390px it crowds and "Sign out" wraps to two lines. There's no mobile navigation model and no thumb-reachable way to move between sections.
Do.
Mobile (< md): a bottom tab bar (thumb zone, env(safe-area-inset-bottom) aware) with the top-level sections: Gardens, Plants, and Settings (admin only). Move the account/sign-out under a "You"/account tab or a small top-right menu — not a permanent row item.
Desktop (md:+): keep a top bar (today's layout is fine there); the bottom bar is mobile-only.
Editor is a full-screen context: when inside /gardens/$id, the app bottom nav yields to the editor's own mode bar (built in the editor-mode-model issue). Decide the handoff so the two bottom bars never stack — simplest is to hide the app bottom nav on the editor route and give the editor a "← Gardens" control in its slim top bar. Document the choice.
Touch targets ≥ 44px; active/inactive states via the existing token palette.
Acceptance.
At 390px, moving between Gardens / Plants / Settings is a single thumb tap, nothing wraps or overflows.
Signing out is still reachable in ≤ 2 taps.
Desktop is unchanged or better.
The editor route shows exactly one bottom bar.
Depends on nothing; pairs with the editor-mode issue on the bottom-bar handoff.
Part of #96.
**Problem.** `AppShell.tsx` is a desktop top bar: logo + Gardens/Plants/Settings links + username + Sign out, all in one row. At 390px it crowds and "Sign out" wraps to two lines. There's no mobile navigation model and no thumb-reachable way to move between sections.
**Do.**
- **Mobile (`< md`):** a **bottom tab bar** (thumb zone, `env(safe-area-inset-bottom)` aware) with the top-level sections: **Gardens**, **Plants**, and **Settings** (admin only). Move the account/sign-out under a "You"/account tab or a small top-right menu — not a permanent row item.
- **Desktop (`md:+`):** keep a top bar (today's layout is fine there); the bottom bar is mobile-only.
- **Editor is a full-screen context:** when inside `/gardens/$id`, the app bottom nav yields to the editor's own mode bar (built in the editor-mode-model issue). Decide the handoff so the two bottom bars never stack — simplest is to hide the app bottom nav on the editor route and give the editor a "← Gardens" control in its slim top bar. Document the choice.
- Touch targets ≥ 44px; active/inactive states via the existing token palette.
**Acceptance.**
- At 390px, moving between Gardens / Plants / Settings is a single thumb tap, nothing wraps or overflows.
- Signing out is still reachable in ≤ 2 taps.
- Desktop is unchanged or better.
- The editor route shows exactly one bottom bar.
Depends on nothing; pairs with the editor-mode issue on the bottom-bar handoff.
steve
added the frontend label 2026-07-22 04:36:01 +00:00
Blocking a user prevents them from interacting with repositories, such as opening or commenting on pull requests or issues. Learn more about blocking a user.
Part of #96.
Problem.
AppShell.tsxis a desktop top bar: logo + Gardens/Plants/Settings links + username + Sign out, all in one row. At 390px it crowds and "Sign out" wraps to two lines. There's no mobile navigation model and no thumb-reachable way to move between sections.Do.
< md): a bottom tab bar (thumb zone,env(safe-area-inset-bottom)aware) with the top-level sections: Gardens, Plants, and Settings (admin only). Move the account/sign-out under a "You"/account tab or a small top-right menu — not a permanent row item.md:+): keep a top bar (today's layout is fine there); the bottom bar is mobile-only./gardens/$id, the app bottom nav yields to the editor's own mode bar (built in the editor-mode-model issue). Decide the handoff so the two bottom bars never stack — simplest is to hide the app bottom nav on the editor route and give the editor a "← Gardens" control in its slim top bar. Document the choice.Acceptance.
Depends on nothing; pairs with the editor-mode issue on the bottom-bar handoff.