feat(store): group skins/flags/crowns under a Cosmetics tab, add Merch tab

[evanpelle]

Summary

• Groups the Skins, Flags, and Crowns store tabs under a single top-level Cosmetics tab with a sub-tab bar (styled to match the effects grid's internal tabs), shrinking the top-level bar to Packs | Subscriptions | Cosmetics | Effects | Tribes | Merch.
• Adds a Merch tab: a short blurb ("Get OpenFront merch shipped to your door!") and a large Visit Store button linking to https://merch.openfront.io (target="_blank" rel="noopener noreferrer").

Old tab=patterns|flags|crowns deep links aren't specially handled — nothing links to them, and unknown tabs already fall back to the default (Packs).

Test plan

• npx tsc --noEmit, ESLint, Prettier all clean
• Translation system test passes (new store.cosmetics, store.merch, store.merch_blurb, store.merch_visit_store keys in en.json)
• Verified headlessly in the running app: sub-tab switching works, and clicking Visit Store opens a new tab at merch.openfront.io

🤖 Generated with Claude Code

[coderabbitai]

Walkthrough

The store modal groups patterns, flags, and crowns under a Cosmetics tab. It adds a Merch tab with translated promotional content and an external store link.

Changes

Store tab restructuring

Layer / File(s)	Summary
Store tab contracts and navigation src/client/Store.ts	The store replaces separate cosmetic tabs with cosmetics, adds merch, and tracks the selected cosmetics sub-tab.
Store panels and translations src/client/Store.ts, resources/lang/en.json	The modal renders cosmetics and merchandise panels, routes the new tabs, and adds English translations for the new content.

Estimated code review effort: 2 (Simple) | ~10 minutes

Sequence Diagram(s)

sequenceDiagram
  participant User
  participant StoreModal
  participant ExternalMerchandiseStore
  User->>StoreModal: Select cosmetics or a cosmetics sub-tab
  StoreModal->>StoreModal: Render the selected cosmetics panel
  User->>StoreModal: Select merch
  StoreModal->>ExternalMerchandiseStore: Open the merchandise store link

Loading

Possibly related PRs

• openfrontio/OpenFrontIO#4436: Both changes update store UI and translation content.
• openfrontio/OpenFrontIO#4715: Both changes modify store tabs and rendering in src/client/Store.ts.

Suggested labels: UI/UX

Poem

Patterns, flags, and crowns align,
Cosmetics share one tab design.
Merch adds a store link bright,
Translated text guides the site.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Title check	✅ Passed	The title clearly summarizes the main changes: grouping cosmetics tabs and adding a Merch tab.
Description check	✅ Passed	The description directly explains the Cosmetics tab grouping, Merch tab, external store link, and test results.

✨ Finishing Touches 💡 1

🛠️ Fix failing CI checks 💡

• Create stacked PR
• Commit on current branch

---

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.}