feat(mobile): Material 3 Expressive Categories, anchored row menu, and colourful tabs

[rghvgrv]

Mobile presentation work on Categories, the row menu it opens, and the tab bar. No API, schema or migration change; IUserPrompt gains one property and everything else is markup, styles and assets.

Every change below was checked on a physical device, not just compiled — several of these were only found by looking at the screen.

---

1. Categories: swipe gone, Material 3 Expressive

Swipe-to-rename/delete is removed, along with the caption that explained it. The row's ⋮ — added in #172 because the gesture advertised itself to nobody — is the only route now. RenameCommand/DeleteCommand are untouched; ManageCommand still calls them.

HasManageableCategories existed only to gate that caption, so it went with it.

New keyed styles in Theme.xaml, additive and opted into by name — no other screen changed:

	Before	Now
List	hairline rows in one card	each row its own 24-radius container, 8dp apart
Heading	13px uppercase muted caption	22px bold sentence case + tonal count pill
Category icon	42 squircle	48 circle
Menu button	••• text Button	44 circular tonal container, real Material more_vert path
Text field / Add	outlined r12 / default	filled r28 / pill r28

Two constraints held deliberately:

• No colour invented. The categorical palette is validated for contrast and CVD separation; a ninth hue picked by eye would not be.
• The glyph is path geometry, not the string •••, so its fill is theme-bound like every other icon. A Button cannot host a Path, hence Border + TapGestureRecognizer — the pattern SubscriptionListPage already uses.

Also visible in testing: #173 working in the wild — system "Other" now draws its own tray glyph, where it and a user category used to be pixel-identical.

2. The row menu: platform action sheet → anchored dropdown

DisplayActionSheetAsync is an unstyled list of strings in a system alert. It takes none of the app's shape, colour or type scale, and read as a different application next to the screen that opened it.

This took three passes, each correcting something only visible on screen:

1. Bottom sheet. Full-width, top-rounded, drag handle. Too heavy for two choices.
2. Compact card. 212 wide, all four corners, bare glyphs. Better — but it opened in the top-right corner regardless of which row was tapped, so it read as unrelated to the row it acted on. It also covered the app bar: the popup overlay spans the whole window, status bar included, so a 12pt top margin drew it over the header.
3. Anchored. It now hangs off the button that opened it.

Anchoring needed real plumbing, because neither library offers it:

• CommunityToolkit's Popup exposes only Margin and two alignment properties — no anchor.
• MAUI has no cross-platform "where is this element on screen"; VisualElement.Bounds is parent-relative, useless inside a scrolled list.

So AnchorBounds asks the platform view (GetLocationOnScreen on Android, pixels → DIPs) and returns null elsewhere, where the fixed-corner fallback still applies.

The position travels view → dialog service, never through the view model. The page is the only layer that can see the button; handing a VisualElement to a view model would put layout inside the layer that is unit-tested without one. IUserPrompt gains a write-then-consume NextActionSheetAnchor, cleared on read so a stale position cannot leak into a later menu.

Positioning: right edges aligned (the button sits at the right end of its row, so a left-aligned menu would run off-screen), clamped to the screen on both axes, and flipped to open upwards when a row near the bottom leaves no room below.

One more thing only the device showed: a single Border cannot carry both the shadow and the rounded shape — the shadow is drawn against square bounds and flattens the corners. Split into an outer shadow Border and an inner shape Border.

Applied to Payment sources too, so the same control behaves the same way on both screens.

3. Payment: hint removed, tab bar coloured

The Payment hint is gone, matching Categories; HasPaymentSources went with it.

Each tab icon now carries a hue — Home blue, Subs teal, Categories purple, Payment amber, Settings grey.

Colouring the SVGs was only half of it. Android's BottomNavigationView applies an ItemIconTintList built from Shell's TabBarForegroundColor/TabBarUnselectedColor, and that tint replaces the icon's own colour — all five rendered as one hue whatever the SVGs said. ColorfulTabsShellRenderer clears the tint list after base.SetAppearance.

• Icons only. Labels still take TabBarTitleColor, so the active tab is marked by its text turning purple. With every icon coloured, icon colour can no longer say which tab is selected, and nothing else would.
• One value per icon, since an SVG cannot hold an AppThemeBinding — each hue is a mid-tone legible on both the light and dark tab bar.

---

Verified on device

Xiaomi M2101K6P, Android 13. Driven directly rather than by eye:

Check	Result
Categories ⋮ → menu anchors under that row's button	✅
Payment ⋮ → same, anchored to its row	✅
Rename → prompt pre-filled with the name	✅
Delete → confirmation first	✅
Cancel → Canara, Gpay, Phonepay all still present	✅
Tap outside → dismisses, nothing renamed or deleted	✅
Five tab colours render together, selected tab still distinguishable	✅
Crash buffer across the whole session	empty

The Delete path matters most: the menu returning null on dismissal must never fall through to an action. It doesn't.

Tests

SubVora.Mobile.Tests — 302 passed, 0 failed.

No new tests. This is presentation plus one platform tint override; the behaviour behind the button (ManageCommand → rename/delete, hidden on system rows, dismissal does nothing) is already pinned by ManageActionTests and CategoryGroupingTests, which pass unchanged. Two tests were removed alongside the two properties they covered. XAML is compile-checked by the Windows-TFM build via MauiXamlInflator=SourceGen, so a mistyped StaticResource fails the build.

Backend untouched.

Not done

• Flip-upwards is untested. The code opens the menu above the button when a row sits too low; neither list was long enough to trigger it.
• Payment sources keeps swipe and the older row styling — only Categories got the Expressive treatment. Worth deciding whether to match them.