feat(topbar): the segmented mode switcher, to the mock

Implements the creator's mock (2026-11-12) for the world segment: pill track (#1E222B, radius 12,
padding 4) holding two equal halves; the active half sits on a lighter pill (#2E3440, radius 8) with
#E2E8F0 bold text and a coral (#F26D6D) icon; the inactive half is #8892A4 on a one-alpha black face so
the whole area hit-tests; hover tints #252A34 on the inactive half only, so the active one never looks
clickable-but-dim. Labels are "Build scenes" / "Record / go live".

Two deliberate deviations from the pasted recipe, both to honour this repo:
- State is the existing BarWorld binding plus a command, not a code-behind SetActiveMode — one source of
  truth, and the change still raises the same property-changed notification a mode event would.
- Styles live in Themes/Controls.xaml (SegmentHalf, SegmentIcon) with colours as tokens in Tokens.xaml,
  rather than inline properties on the elements: AGENTS requires shared styles, and one DataTrigger on
  each element's own Tag serves both halves.

DesignTokensTests caught the one raw literal (#01000000) and it is now Brush.SegmentHitArea, which is the
rule working as intended.

680 pass, 0 warnings. Scope justification: Assets/starting-background.jpg is outside this unit — the
creator's replacement art, still awaiting their visual check.
This commit is contained in:
2026-11-12 16:20:25 -08:00
parent b92569a8c7
commit 6b4aa99863
4 changed files with 86 additions and 25 deletions
+10
View File
@@ -35,6 +35,16 @@
<SolidColorBrush x:Key="Brush.Tertiary" Color="#38bdf8"/>
<SolidColorBrush x:Key="Brush.OnTertiary" Color="#0b1326"/>
<SolidColorBrush x:Key="Brush.OnAccent" Color="#ffffff"/>
<!-- Segmented mode switcher (creator mock, 2026-11-12) -->
<SolidColorBrush x:Key="Brush.SegmentTrack" Color="#1E222B"/>
<SolidColorBrush x:Key="Brush.SegmentActive" Color="#2E3440"/>
<SolidColorBrush x:Key="Brush.SegmentHover" Color="#252A34"/>
<SolidColorBrush x:Key="Brush.SegmentTextActive" Color="#E2E8F0"/>
<SolidColorBrush x:Key="Brush.SegmentTextInactive" Color="#8892A4"/>
<SolidColorBrush x:Key="Brush.SegmentIconActive" Color="#F26D6D"/>
<!-- One-alpha black: transparent to the eye, opaque to hit-testing, so the whole segment is clickable. -->
<SolidColorBrush x:Key="Brush.SegmentHitArea" Color="#01000000"/>
<SolidColorBrush x:Key="Brush.Primary" Color="#ff5451"/>
<SolidColorBrush x:Key="Brush.PrimaryContainer" Color="#b91a24"/>
<SolidColorBrush x:Key="Brush.Secondary" Color="#ffb95f"/>