refactor(editor): move the key & view controls to src/key-view.js (R2, step 41)

[byrongamatos]

What

Step 41 of the R2 refactor: move the key & view controls (in-key highlight — tonic/scale selectors + auto-detect — and the per-part view switcher: String / Piano roll / Parts) out of src/main.js's Drawing section into a new native ES module src/key-view.js.

How the seam is drawn

• src/key-view.js: 4 symbols exported back — _editorCycleViewMode / _editorToggleKeyHighlight (existing host hooks), _refreshKeyControls / _refreshViewSwitch (called by drawNow + the toolbar) — plus 5 re-attached window handlers. draw/updateStatus route through host.
• One new host hook, resizeCanvas (a view-mode reflow recomputes lane metrics); dropped the now-moot typeof guard on the bare resizeCanvas reference.
• Removed 10 now-dead main.js imports.

main.js drops ~175 lines to under 2,000. 42 modules.

Verification

• 90/90 JS suites pass; ESLint gate clean (0 errors); strict no-undef clean on key-view.js.
• Codex preflight: 0 regressions.
• New headless harness (verify_key_view.py): editorToggleKeyHighlight reports on/off, editorSetViewMode('piano') paints the piano-roll keyboard gutter (24 fills) and ('string') drops it to 0 — proving the view switch repaints through host.draw + the new resizeCanvas hook. Negative-checked by dropping a re-attach.

🤖 Generated with Claude Code

Summary by CodeRabbit

• New Features

  • Added automatic key detection for arrangements, with tonic and scale selection.
  • Added in-key highlighting controls for pitched arrangements.
  • Added String and Piano Roll view switching, with preferences saved per arrangement.
  • View changes now refresh the canvas and display the active mode.

• Improvements

  • Key and view controls now stay synchronized with the current arrangement and editor state.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 0b01910f-1a2e-4d41-b2b0-c04ac59a1306

📥 Commits

Reviewing files that changed from the base of the PR and between df77288 and 4e2808d.

📒 Files selected for processing (3)

• src/host.js
• src/key-view.js
• src/main.js

---

📝 Walkthrough

Walkthrough

The PR extracts editor key and view controls from main.js into key-view.js, adds key detection and view-mode management, and exposes a resizeCanvas host hook for view reflow handling.

Changes

Key and view controls

Layer / File(s)	Summary
Key selection and detection src/key-view.js	Adds tonic and scale controls, in-key highlighting, duration-weighted key detection, persistence, UI refresh, and redraw behavior.
View mode switching and resize src/key-view.js, src/host.js, src/main.js	Adds string/piano view switching, per-arrangement preferences, selection cleanup, piano range updates, status messages, and canvas resize hook wiring.
Key-view module integration src/main.js, src/key-view.js	Moves key and view implementations out of main.js, updates imports, and reattaches the functions to the window API.

Estimated code review effort: 3 (Moderate) | ~25 minutes

Sequence Diagram(s)

sequenceDiagram
  participant Editor
  participant editorSetViewMode
  participant host.resizeCanvas
  participant resizeCanvas
  Editor->>editorSetViewMode: select string or piano mode
  editorSetViewMode->>host.resizeCanvas: schedule canvas resize
  host.resizeCanvas->>resizeCanvas: recompute canvas and lane metrics
  editorSetViewMode->>Editor: redraw and show mode status

Loading

Possibly related PRs

• got-feedBack/feedBack-plugin-editor#108: Earlier implementation and wiring of the editor key and in-key highlight controls.
• got-feedBack/feedBack-plugin-editor#132: Adds the key-detection algorithm and Detect control used by this flow.
• got-feedBack/feedBack-plugin-editor#155: Extracts view-preference helpers consumed by the new key-view module.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly describes the main refactor: moving editor key and view controls into src/key-view.js.
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.

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch refactor/r2-step41-key-view

---

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