fix(web): Dark+ and Light+ themes import instead of colliding with built-in ids

[flamboh]

Note

🤖 Claude Opus 5.5 on behalf of Oliver

Importing a VS Code theme whose name slugs to a reserved theme id fails. Dark+ and Light+ slug to dark and light, so parseThemeFile throws The theme id "dark" is reserved. and the import is rejected.

The VS Code importer now checks the id it would generate from the theme name. If that id is reserved, it passes an explicit <id>-vscode id instead (Dark+ becomes dark-vscode). The label stays as the theme's own name, and non-reserved names are unchanged.

Once Dark+ and Light+ can import, selecting both would pair them. Stripping the appearance words leaves only +, which would produce a dual-mode theme named + with the id custom-theme. Pairing now requires the stripped name to keep at least one letter or digit, so these two stay as separate themes.

Split from #9477. The color-role and visibility fixes from that PR go in a separate PR.

Verification

• Added a Dark+ test. It fails on main with the reserved-id error and passes with this change.
• Added a Dark+ / Light+ pairing test. It fails without the pairing guard.
• vp test run apps/web/src/vscodeThemeImport.test.ts (18 passed)
• vp lint and vp fmt --check on the changed files
• vp run --filter @t3tools/web typecheck

Made with Claude Opus 5.5 in Claude Code (T3 Code).

[coderabbitai]

Navigate logical layers of code changes, visualize relationships, and explore their blast radius.

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Repository: pingdotgg/t3code/.coderabbit.yaml

Review profile: CHILL

Plan: Advanced

Run ID: b0d2d8dd-c73c-42ca-9434-4280f9f307e6

📥 Commits

Reviewing files that changed from the base of the PR and between ea00d60 and f035003.

📒 Files selected for processing (2)

• apps/web/src/vscodeThemeImport.test.ts
• apps/web/src/vscodeThemeImport.ts

Included review availability: This review used your included allowance. Your plan provides up to 10 included reviews per hour; 6 remain after this review.

---

📝 Walkthrough

Walkthrough

VS Code theme parsing now assigns a -vscode suffix when a generated ID is reserved. Pairing now leaves themes unpaired when their names contain no alphanumeric characters after removing “light” or “dark”. Tests cover reserved IDs and separate handling of “Light+” and “Dark+”.

Changes

VS Code theme import handling

Layer / File(s)	Summary
Generate and verify VS Code theme IDs apps/web/src/vscodeThemeImport.ts, apps/web/src/vscodeThemeImport.test.ts	parseVsCodeThemeFile derives an ID from the resolved name and appends -vscode when the generated ID is reserved. The test checks that “Dark+” retains its label and receives dark-vscode.
Restrict theme pairing to alphanumeric names apps/web/src/vscodeThemeImport.ts, apps/web/src/vscodeThemeImport.test.ts	Pairing leaves a theme unpaired when removing “light” or “dark” leaves no alphanumeric character. The test checks that “Light+” and “Dark+” remain separate themes.

Priority: ⬇️ Low

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

Change: Bug fix

Merge Risk: ⚪ Minimal · up to f0350

Reserved-name themes can be imported without changing their labels, and punctuation-only Light+/Dark+ themes remain separate. No concrete merge-blocking issue is established; the change appears ready subject to normal checks.

Architecture Summary

Architecture risk: 🔵 Low · up to f0350

The change affects 1 system.

Changed systems: apps/web

Architecture concerns
No architecture-level concerns identified.

Review details

Systems and components

• observed — apps/web (ui) was modified; 2 changed files map to changed impact.

Before / after behavior

• observed — Modified behavior in apps/web/src/vscodeThemeImport.test.ts: Added a test asserting that parsing Dark+ preserves its label while assigning ID dark-vscode instead of reserved ID dark.
• observed — Modified behavior in apps/web/src/vscodeThemeImport.test.ts: Added a pairing test asserting that Light+ and Dark+ produce separate themes with IDs light-vscode and dark-vscode and retain their labels.
• observed — Modified behavior in apps/web/src/vscodeThemeImport.ts: The import list adds isReservedThemeId and themeIdFromName, used to validate the generated ID for an imported theme.
• observed — Modified behavior in apps/web/src/vscodeThemeImport.ts: parseVsCodeThemeFile resolves the theme name once, generates an ID from it, and supplies a -vscode-suffixed ID when that generated ID is reserved; previously it passed the resolved name directly without setting an ID.

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 50.00% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 2 functions across 2 files.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly identifies the main fix: preventing Dark+ and Light+ theme imports from colliding with reserved built-in IDs.
Description check	✅ Passed	The description explains the problem, the implementation, and focused verification results. It does not use the required Problem, Change, or Scope and approval headings, and it does not provide explic…
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.

• Fix all pre-merge checks with AI

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create a new PR

• Autopilot · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

Autopilot is currently an internal CodeRabbit preview.

---

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

[macroscopeapp]

Approvability

Verdict: Approved at f035003

Macroscope's review found this PR approvable — This is a small, tested importer fix that assigns reserved VS Code theme names safe IDs and avoids merging themes when the stripped name is only punctuation. Normal theme IDs and pairing behavior remain unchanged, with no product-default or static-analysis configuration impact.

^{You can add or adjust custom eligibility rules. Learn more.}