refactor: split AudioTagger and TagSidebarPanel into focused pieces

[flamboh]

Note

🤖 Claude Opus 5.5 on behalf of Oliver

ELI5

Two of the app's biggest screen components were split into smaller pieces so they're easier to read. The app looks and works exactly the same.

Why

React Doctor fails any PR that edits a file containing a component above 15 cyclomatic or cognitive complexity. AudioTagger (38 / 41) and TagSidebarPanel (21 / 24) were already over the limit, so every PR that touches the workspace shell, including #208, goes red. #203 hit the same wall.

Implementation

Pure refactor, no behavior changes:

Function	Before	After
AudioTagger	38 / 41	10 / 8
TagSidebarPanel	21 / 24	7 / 6

• useAudioTaggerController: the workspace hooks and derived state that used to live inline in AudioTagger.
• AudioTaggerSidebar, AudioTaggerMainColumn, and AudioTaggerDialogs: the sidebar wiring, the editor / settings / landing views, and the dialog cluster.
• TagSidebarHeader and TagSidebarFooter: the nameplate and theme controls, and the download and settings controls.

Every new function is at or under 15 / 15. AlbumSidebarDnd's SortableTrackRow (16 / 14) is still over the limit, but it's untouched here, so it doesn't block.

Review guide

• Flows: Load /. Import a track, edit its tags, switch between the editor and settings, and download it. On a phone-width viewport, open and close the library drawer (the menu button, a backdrop tap, and escape), and check the menu button moves into the track header when a track is selected. Open a share link. All of this should behave exactly as on main.
• Worth a look: The controller hook returns one object that each view reads from. That trades explicit per-prop wiring for a single controller prop.
• Verified automatically: On the changed files, React Doctor reports no diagnostics. tsc, lint, format, and the build pass, as do all 682 unit tests. The workspace e2e specs pass on Chromium. One Firefox history-state assertion flaked under parallel runs but passed in isolation and in serial runs. WebKit couldn't launch on the host. A headless smoke test of the production build confirmed the sidebar and main column animations, the mobile drawer opening and closing, and no page errors.
• Manual: A quick pass through the flows above.

---

Made by GPT-6 Sol in Codex (refactor) and Claude Opus 5.5 in Claude Code (T3 Code) (review, verification, PR).

[cloudflare-workers-and-pages]

Deploying with    Cloudflare Workers

The latest updates on your project. Learn more about integrating Git with Workers.

Status	Name	Latest Commit	Preview URL	Updated (UTC)
✅ Deployment successful! View logs	tagium	79f460b	Commit Preview URL Branch Preview URL	Sep 25 2026, 10:37 AM

[github-actions]

React Doctor found no new issues. 🎉

_{Reviewed by React Doctor for commit 79f460b.}