ALFMOB-438: Restyle app shell & tab bar to modern Figma design

[khoinguyen-mindera]

ALFMOB-438 — App shell, tab bar & navigation chrome (AppFeature)

Restyles the bottom tab bar to the modern Figma "Bottom Navigation" design and, per follow-up review, brings the tab set in line with the design.

🎫 https://mindera.atlassian.net/browse/ALFMOB-438

Scope note

The original ticket was scoped visual-only (no tab-set/routing changes). During review this was intentionally expanded to also add the Account tab and align the Store tab, at the assignee's request. The AC deltas below are deliberate, not oversights.

Changes

Tab bar restyle

• Migrated tab bar colours/typography from raw Primitives.* to the semantic Theme.* / theme.font.label layers.
• Selection treatment now matches Figma: removed the matched-geometry underline; selected tab = bold label (label.smallBold) + darker Theme.contentContentPrimary.
• Filled icon on selection (home-fill / bag-fill / wishlist-fill / account-fill) via Tab.icon(isSelected:).
• Divider tinted Theme.borderSoft; background Theme.surfaceBackgroundPrimary.

Tab set (expanded scope)

• Added Account as the 5th tab (Home · Store · Wishlist · Bag · Account), reusing the existing MyAccountFlow.
• Renamed the Shop tab label to Store to match Figma.
• Store tab now uses the Figma glyph (the menu list+search icon) instead of storefront.
• Account → Wishlist row routes to the dedicated Wishlist tab (no half-wired embedded surface).

Housekeeping

• Tab accessibility identifiers centralised in AccessibilityID.TabBar (values unchanged; UI tests updated to reference them).

Tests

• TabBarItemStyleTests — selected/unselected icon + label colours differ; selected label uses a heavier weight.
• TabIconTests — fill-variant mapping (tabs with a -fill swap on selection; Store has none).

Acceptance criteria

• ✅ Tab bar matches Figma (bold selected label, filled selected icon, no underline, divider).
• ✅ Consumes SharedUI semantic tokens — no raw Primitives.Colours.* at colour sites.
• ✅ Appearance covered by passing unit tests.
• ✅ No regression in existing navigation/tab selection/deep-link routing (verified via build + unchanged routing wiring).
• ⚠️ Snapshot baselines: none exist repo-wide and AppFeatureTests has no snapshot suite, so this AC is met via unit tests instead of regenerated snapshots.

Verification

./Alfie/scripts/verify.sh --skip-integration → ✅ build + unit tests pass (integration skipped; no GraphQL impact).

Follow-ups (not in this PR)

• Wishlist-intent deep navigation inside the account context (would need MyAccountRoute extension — MyAccount module / ALFMOB-445 territory).
• Migrating remaining hardcoded tab titles to L10n (pre-existing; whole Tab+Extension uses literals).

[Copilot]

Pull request overview

This PR updates AppFeature shell UI and navigation-related surfaces, including a visual restyle of the custom tab bar to semantic Theme.* tokens and new selection treatment, but it also introduces broader scope changes (new splash view/assets and an added Account tab + routing).

Changes:

• Restyles CustomTabBarView / TabBarItemView to semantic tokens and updates selection treatment (bold label, no underline).
• Adds an account tab end-to-end (Model.Tab, tab icon/title/accessibility IDs, routing, RootTab wiring, and ViewModel dependencies).
• Introduces a new splash screen (SplashView) plus SharedUI image assets and a LoadingSpinner component; updates LaunchScreen artwork.

Reviewed changes

Copilot reviewed 28 out of 31 changed files in this pull request and generated 9 comments.

Show a summary per file

File	Description
Docs/Plans/ALFMOB-438-app-shell-nav-chrome/scope.md	Documents intended ALFMOB-438 scope and tab bar deltas.
Docs/Plans/ALFMOB-438-app-shell-nav-chrome/plan.md	Plan/AC for ALFMOB-438 implementation approach.
Docs/Plans/ALFMOB-438-app-shell-nav-chrome/grill.md	Grill decisions for ALFMOB-438 scope/approach.
Docs/Plans/ALFMOB-438-app-shell-nav-chrome/_status.md	Status log; includes post-review notes (icons/account-related).
Docs/Plans/ALFMOB-437-splash-redesign/scope.md	Documents splash redesign investigation and constraints.
Docs/Plans/ALFMOB-437-splash-redesign/plan.md	Plan/AC for splash redesign and SharedUI components/assets.
Docs/Plans/ALFMOB-437-splash-redesign/grill.md	Grill decisions for splash redesign.
Docs/Plans/ALFMOB-437-splash-redesign/_status.md	Status log for ALFMOB-437 work.
Alfie/AlfieKit/Tests/AppFeatureTests/TabIconTests.swift	Adds tests for selected/unselected icon glyph variants.
Alfie/AlfieKit/Tests/AppFeatureTests/TabBarItemStyleTests.swift	Adds unit tests asserting selected/unselected colour treatments differ.
Alfie/AlfieKit/Sources/SharedUI/Theme/Images/ThemedImages.xcassets/splash-wordmark.imageset/splash-wordmark.svg	Adds splash wordmark vector asset to SharedUI.
Alfie/AlfieKit/Sources/SharedUI/Theme/Images/ThemedImages.xcassets/splash-wordmark.imageset/Contents.json	Registers splash wordmark asset metadata.
Alfie/AlfieKit/Sources/SharedUI/Theme/Images/ThemedImages.xcassets/spinner-arc.imageset/Contents.json	Registers spinner arc asset metadata.
Alfie/AlfieKit/Sources/SharedUI/Theme/Images/ThemedImage.swift	Adds splashLogo / loadingSpinner cases.
Alfie/AlfieKit/Sources/SharedUI/Theme/Components/Loader/LoadingSpinner.swift	Adds a SharedUI loading spinner view that rotates the spinner artwork.
Alfie/AlfieKit/Sources/SharedUI/Helpers/Extensions/Tab+Extension.swift	Updates tab titles/icons/IDs and adds selected-icon variant helper.
Alfie/AlfieKit/Sources/Model/Models/Navigation/Tab.swift	Adds account to the core Model.Tab enum.
Alfie/AlfieKit/Sources/AppFeature/UI/TabBarItemView.swift	Updates tab item selection UI and token usage; adds style helpers for testability.
Alfie/AlfieKit/Sources/AppFeature/UI/SplashView.swift	Adds new AppFeature splash view using SharedUI assets/spinner.
Alfie/AlfieKit/Sources/AppFeature/UI/CustomTabBarView.swift	Updates tab bar container background/divider styling and removes namespace usage.
Alfie/AlfieKit/Sources/AppFeature/Protocols/RootTabViewModelProtocol.swift	Extends protocol with MyAccount flow dependency.
Alfie/AlfieKit/Sources/AppFeature/Navigation/TabRoute.swift	Adds account route and maps it to .account tab.
Alfie/AlfieKit/Sources/AppFeature/Navigation/RootTabViewModel.swift	Wires account tab into pop-to-root and navigation handling.
Alfie/AlfieKit/Sources/AppFeature/Navigation/RootTabView.swift	Adds account tab content rendering via MyAccountFlowView.
Alfie/AlfieKit/Sources/AppFeature/Navigation/AppFeatureViewModel.swift	Adds .account tab, builds MyAccountFlowViewModel, and injects it into RootTabViewModel.
Alfie/AlfieKit/Sources/AppFeature/Navigation/AppFeatureView.swift	Switches .loading screen to the new SplashView.
Alfie/AlfieKit/Sources/AccessibilityIdentifiers/AccessibilityID.swift	Adds a Splash accessibility ID constant.
Alfie/AlfieKit/Package.swift	Adds AccessibilityIdentifiers as an AppFeature dependency.
Alfie/Alfie/LaunchScreen.storyboard	Resizes launch logo view to match new wordmark aspect.
Alfie/Alfie/Assets.xcassets/LaunchLogo.imageset/LaunchLogo.svg	Replaces launch logo SVG artwork with the new wordmark.

Comments suppressed due to low confidence (1)

Alfie/AlfieKit/Sources/AppFeature/Navigation/RootTabViewModel.swift:47

• fatalError is disallowed by project conventions/SwiftLint (prefer queuedFatalError). Please replace this to avoid leaking host machine paths and to match the repo’s error-handling conventions.

        guard tabs.contains(initialTab) else {
            fatalError("Initial tab \(initialTab) does not exist in the list of tabs \(tabs)")
        }

[hoangnhatdrk]

Reviewed the full diff. Clean — the tab-bar restyle (semantic Theme.*, bold-label + filled-icon selection, removed matched-geometry underline) and the Account-tab addition are consistent and well-tested.

I checked the riskiest part, the Account→Wishlist rewiring: RootTabViewModel.navigate guards tabs.contains(route.tab) and sets selectedTab, and the Wishlist account row is gated by the same featureAvailability[.wishlist] check that gates the tab — so the flag-off case can't produce a dead tap (the row simply isn't shown). theme was removed cleanly from TabBarItemView (no dangling property). Nice touch adding TabBarItemStyleTests / TabIconTests.

Approving — no changes required.