feat(mobile): native-feel sticky top bar + bottom tab nav
Build & Push Docker Images / test-backend (push) Successful in 22s
Build & Push Docker Images / test-frontend (push) Failing after 23s
Build & Push Docker Images / build-backend (push) Has been skipped
Build & Push Docker Images / build-frontend (push) Has been skipped

Replaces the floating pill nav with persistent mobile chrome that
frames scrolling content the way iOS/Android native apps do.

New components:
- TopBar: brand left, contextual action right (Admin pill for admins,
  bell for saved, Login button when logged out)
- BottomNav: 4-tab fixed nav (Search, Scan [elevated center FAB],
  Saved, Profile). Saved/Profile disabled when logged out, tapping
  opens LoginModal
- icons.jsx: 5 stroke-based SVG icons (Search, Scan, Bell, User, Cog)
  plus Logo; replaces emoji in nav chrome

Behavior changes:
- App.jsx: tracks publicScreen ('home'|'scan'|'search') so BottomNav
  can drive both top-level view + inner screen
- PublicView: screen state lifted to App via props (back-compat
  defaults preserved so existing call sites don't break)
- App.css: old mobile .view-switcher block hidden (replaced by
  BottomNav); .app padding bumped to clear the fixed bottom bar

Desktop (>768px) unchanged — existing centered pill nav still works,
new components hidden via display:none.

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Ichitux
2026-06-28 12:52:46 +02:00
parent 5b75321406
commit 1e928e5a93
8 changed files with 405 additions and 24 deletions
+2 -20
View File
@@ -290,7 +290,7 @@
@media (max-width: 768px) {
.app {
padding: 1.5rem 1rem calc(5rem + env(safe-area-inset-bottom));
padding: 1rem 1rem calc(7rem + env(safe-area-inset-bottom));
}
.app-header h1 {
@@ -310,25 +310,7 @@
}
.view-switcher {
position: fixed;
left: 0.75rem;
right: 0.75rem;
bottom: calc(0.75rem + env(safe-area-inset-bottom));
z-index: 100;
width: auto;
max-width: 32rem;
margin: 0 auto;
border-radius: 999px;
border: 1px solid var(--border);
background: var(--surface);
box-shadow:
0 10px 30px rgba(28, 25, 23, 0.12),
0 2px 6px rgba(28, 25, 23, 0.06);
padding: 0.5rem;
overflow: visible;
justify-content: space-around;
align-items: stretch;
gap: 0.25rem;
display: none; /* ponytail: replaced by BottomNav on mobile */
}
.view-switcher button {