Summary
CodeEditorPanel.tsx (~444 lines) contains the full score-dark Monaco theme definition inline — a large pure-data blob (~100 lines of color token rules) mixed into the component file.
Task
Extract the theme config to a standalone file:
packages/gui/src/renderer/lib/scoreEditorTheme.ts
Export a typed const:
import type * as MonacoNS from 'monaco-editor'
export const SCORE_DARK_THEME: MonacoNS.editor.IStandaloneThemeData = {
base: 'vs-dark',
inherit: true,
rules: [ ... ],
colors: { ... },
}
Then import it in CodeEditorPanel.tsx:
import { SCORE_DARK_THEME } from '../../lib/scoreEditorTheme.js'
// ...
monaco.editor.defineTheme('score-dark', SCORE_DARK_THEME)
Acceptance
- No visual change to the editor theme
CodeEditorPanel.tsx shrinks by ~100 lines
scoreEditorTheme.ts has a TSDoc block and is the single source of truth for the theme
- Types pass (
pnpm typecheck)
Summary
CodeEditorPanel.tsx(~444 lines) contains the fullscore-darkMonaco theme definition inline — a large pure-data blob (~100 lines of color token rules) mixed into the component file.Task
Extract the theme config to a standalone file:
Export a typed const:
Then import it in
CodeEditorPanel.tsx:Acceptance
CodeEditorPanel.tsxshrinks by ~100 linesscoreEditorTheme.tshas a TSDoc block and is the single source of truth for the themepnpm typecheck)