Navigation redesign: design language + bottom tab bar (#28, #29)#34
Merged
Conversation
Codify the visual + interaction system (color/type/spacing tokens, the bottom-tab navigation model "Prop A", core components, motion/haptics, and the auto-connect + status-pill connection UX) in a new docs/architecture/design-language.md, grounded in apps/mobile/src/theme/tokens.ts. Cross-link it from the architecture README and ui-and-design.md, and note that v1.0 shipped an interim home "hub" being realigned to the documented tabs. Supports the navigation/home/connection redesign tracked in #28. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Replace the v1.0 home hub (a vertical stack of six mode buttons) with a persistent bottom tab bar — the navigation model documented in docs/architecture/design-language.md §6 (epic #28). - Add src/app/(tabs)/_layout.tsx: Tabs navigator (Speed / Race / Garage / History / More); active tint = accent, inactive = textMuted; surface bar with a hairline top border; emoji icons. - Move index/race/garage/history into (tabs)/. Detail and secondary screens (garage/[uid], history/[id], achievements, live, settings) stay on the root stack so they push over the tab bar. - Add (tabs)/more.tsx overflow screen linking Achievements / Live portal / Settings (advances #30). - Remove the six nav buttons and their styles from the Speed screen. - Drop redundant "Back to Home" affordances from the tab screens; the design language calls for no Back-to-Home round-trips between primary modes. Closes #29. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
burkben
changed the title
Replace emoji navigation icons with MaterialCommunityIcons vector glyphs across the bottom tab bar and the More screen, tinted with the theme accent. Uses the subpath default import so only MaterialCommunityIcons.ttf is bundled. Updates design-language §5. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
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
1 participant
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.
What
Two coupled parts of the navigation redesign (epic #28): the design-language reference, and the first implementation it specifies — the bottom tab bar.
1. Design language doc
Adds
docs/architecture/design-language.md— the canonical reference for how Redline ID looks and feels — grounded in the live tokens (apps/mobile/src/theme/tokens.ts):docs/architecture/README.mdandui-and-design.md.2. Bottom tab bar (#29)
Implements that navigation model:
apps/mobile/src/app/(tabs)/_layout.tsx—Tabsnavigator (Speed / Race / Garage / History / More); active tint =accent, inactive =textMuted;surfacebar with a hairline top border; emoji icons.index/race/garage/historyinto(tabs)/. Detail and secondary screens (garage/[uid],history/[id],achievements,live,settings) stay on the root stack so they push over the tab bar.(tabs)/more.tsxoverflow screen linking Achievements / Live portal / Settings (advances Add a "More" overflow sheet (Achievements · Live portal · Settings) #30).Validation
npm run typecheck✓ ·npm test✓ (227 tests) ·npx expo export --platform iosbundles cleanly (1756 modules).Related
Closes #29. Advances #30. Supports epic #28 (stories #29–#33). Docs in part 1 are unchanged from the original PR.