Adopt standalone app UI patterns in the all-in-one AIO app #26

New issue

Closed

opened 2026-04-27 06:53:34 +00:00 by padreug · 0 comments

padreug commented

2026-04-27 06:53:34 +00:00

Owner

Summary

The standalone apps (Sortir/Eventos, Castle) have cleaner, mobile-first UIs with bottom tab navigation, safe-area insets, and focused single-purpose layouts. The all-in-one AIO app still uses a traditional sidebar/hamburger navigation pattern. We want the AIO app to adopt the standalone UI patterns for a more cohesive, modern experience.

What the standalone apps do well

Bottom tab navigation — 5-tab bar with icons + labels, always visible
Safe-area insets — proper padding for notched/island phones
Focused layouts — each tab has a clear purpose, no deep menu nesting
Mobile-first — designed for phones, works on desktop
Clean app shell — minimal chrome, content takes priority

Scope

Redesign the AIO app shell (src/App.vue) to use bottom tab navigation
Decide which modules get top-level tabs vs nested under a "More" tab
Unify the navigation pattern across standalone and AIO experiences
Consider adaptive layout: bottom tabs on mobile, sidebar on desktop
Ensure all standalone app views (activities, castle, events, wallet) feel native in the AIO context

Design considerations

The AIO app has more modules than any standalone (activities, market, wallet, expenses, chat, links, tasks, events) — 5 tabs won't fit them all
Options: scrollable tab bar, "More" overflow tab, category grouping, or role-based tab visibility
The standalone apps are the reference UI — the AIO should feel like a superset, not a different app

## Summary The standalone apps (Sortir/Eventos, Castle) have cleaner, mobile-first UIs with bottom tab navigation, safe-area insets, and focused single-purpose layouts. The all-in-one AIO app still uses a traditional sidebar/hamburger navigation pattern. We want the AIO app to adopt the standalone UI patterns for a more cohesive, modern experience. ## What the standalone apps do well - **Bottom tab navigation** — 5-tab bar with icons + labels, always visible - **Safe-area insets** — proper padding for notched/island phones - **Focused layouts** — each tab has a clear purpose, no deep menu nesting - **Mobile-first** — designed for phones, works on desktop - **Clean app shell** — minimal chrome, content takes priority ## Scope - Redesign the AIO app shell (`src/App.vue`) to use bottom tab navigation - Decide which modules get top-level tabs vs nested under a "More" tab - Unify the navigation pattern across standalone and AIO experiences - Consider adaptive layout: bottom tabs on mobile, sidebar on desktop - Ensure all standalone app views (activities, castle, events, wallet) feel native in the AIO context ## Design considerations - The AIO app has more modules than any standalone (activities, market, wallet, expenses, chat, links, tasks, events) — 5 tabs won't fit them all - Options: scrollable tab bar, "More" overflow tab, category grouping, or role-based tab visibility - The standalone apps are the reference UI — the AIO should feel like a superset, not a different app

padreug referenced this issue

2026-04-27 15:20:27 +00:00

Shared auth across standalone app modules #28

padreug referenced this issue from a commit

2026-05-05 08:36:50 +00:00

feat: minimal AIO hub with chakra grid + bottom dock

padreug closed this issue

2026-05-05 08:36:50 +00:00

padreug referenced this issue from a commit

2026-05-29 19:28:58 +00:00

chore(base): delete nostr-metadata-service + retire webapp-side kind-0 broadcast paths

padreug referenced this issue