fix(ui): flag the country chips, steady the period label, and nest the category tree

[suiramdev]

Summary

Five reported interface defects, mostly independent. Onboarding chips now carry each selected country's flag. The budget period arrows stop moving when the periodicity changes. A category takes the colour of its group, and charts shade that one hue per category so slices stay separable. The settings category tree gets the sidebar's own indentation, and built-in rows stop lighting up. Look first at packages/api/src/lib/taxonomy.ts and apps/web/src/shared/lib/chart-colors.ts — that pair is the only change with reach beyond its own screen.

Motivation

• The list under the onboarding combobox drew a flag; the chips above it did not.
• Switching 1M → 3M moved the period arrows 10px, and → 1Y moved them 65px, because the variable-width label sits between them.
• Under a green Income header sat green, purple, blue, orange, pink and grey rows, so a group read as confetti rather than a family.
• Settings children used pl-8, which put a child icon exactly where the group icon sat: the tree showed no nesting at all.
• The hover highlight swept across built-in rows, promising an interaction that does not exist.

Drawbacks

• categoryColor returning the group colour reverses a decision docs/engineering/api.md:49 recorded on purpose. It held for a list, where the glyph separates two rows; it fails in a chart, which has no glyph — hence categoryChartColor. Both notes are rewritten.
• SankeyNode.color widens from CategoryColor to a resolved CSS string, so the type no longer refuses a bare token. Both producers were migrated and the two fixtures with them; a future one has only the grep to warn it.
• The shade ladder spans 16 steps for spending, so two categories far apart in categoriesInGroup separate well and two adjacent ones separate weakly.
• The period trigger reserves the widest month of the year, which leaves slack around the shorter 2026 label. A stable control beat a tight one.

Prior art

• The ghost-row width reservation is the trick packages/ui already uses for the sidebar row label, applied to a label that changes format rather than weight.
• The nesting grammar is lifted from SidebarMenuSub: a guide on the parent icon's centre, rows past it.
• Mixing towards --foreground / --background rather than white/black is what lets the ladder invert with the theme instead of branching on it; verified in both.
• Rejected: an index-based chart palette divorced from the category (legend dot would stop matching the chip elsewhere), and reserving every reachable label (a ~180px box for a 54px year).

Notes

• Visual change: yes — onboarding chips, budget period navigator, budget charts, settings category list. Verified in a real browser against dev:up, in dark and light.
• The next arrow now holds x=435 across 1M/3M/1Y and month steps; it was 435/425/370.
• Fixed in passing: the hover rects went stale after a group expanded, so the highlight settled a row high. CollapsibleContent now remeasures on transitionend. Reproduced on origin/dev first.
• Tests added: none. No new behaviour has a unit-testable seam; the two sankey fixtures were updated to model a resolved colour.
• Docs updated: contributing/categorisation.mdx, guides/categories.mdx, docs/engineering/api.md, docs/engineering/web-ui.md, packages/ui/AGENTS.md (the vendored combobox patch, or a registry re-fetch silently drops the flags).
• No user-facing string added or changed, so the message catalogs are untouched.
• Gates: ultracite check, oxlint, check-types, check:fsd, docs:check, fumadocs build, and bun test in packages/api, apps/web, packages/ui — all clean. Reviewer agent: approved, no findings.
• No migration, no breaking change, no merge-order constraint.

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Advanced

Run ID: 1000afb8-91a6-4682-b9bf-59398df4ec00

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}