fix(setbuilder): theme-correct buttons, toggle overlap, dashboard nav link

[thewrz]

Summary

Fixes three issues found during local testing of the setbuilder:

1. Invisible buttons in dark themes — the bare .btn class defined no background, so any btn/btn btn-sm button without an inline background override fell back to the browser's light ButtonFace default with near-white --text on top (~1:1 contrast). This hit the setbuilder pool panel ("+ Add", "Clear", "Remove"), ReplacePopover, ImportModal — and ~25 other bare-btn instances across admin/events pages. .btn now defaults to background: var(--surface-raised) (the same convention used inline everywhere else), plus a new .btn:disabled state.
2. Curve toolbar contrast + magic number — ghost-style toolbar buttons got raised surfaces, and the hardcoded #00f5d4 active accent now routes through a new --color-curve-accent theme token (neon teal in dark/high-contrast, teal-700 in daylight) so it respects the global theme system.
3. Theme toggle overlapping setbuilder topbar — the (dj) layout's fixed-position ThemeToggle sat on top of the topbar's Duplicate/Share actions. It is now suppressed on /setbuilder routes and rendered inline in the setbuilder headers instead.
4. No nav path to Set Builder — the dashboard header now links to /setbuilder (previously only reachable by typing the URL).

Test plan

• New: dashboard renders Set Builder link → /setbuilder
• New: DJLayout suppresses floating toggle on /setbuilder routes, renders it elsewhere
• New: setbuilder sets page renders inline theme toggle
• Updated: theme-vars fixture (37 → 38 tokens, --color-curve-accent in all three themes)
• Full frontend CI locally: ESLint ✓, tsc --noEmit ✓, vitest 1095/1095 ✓
• Manual: verify pool-panel buttons readable in all three themes on the running testing instance

🤖 Generated with Claude Code

Summary by CodeRabbit

• New Features

  • Added "Set Builder" link to dashboard navigation
  • Integrated Theme Toggle into setbuilder interface
  • Theme toggle conditionally displayed based on current page route

• Style

  • Improved button styling for enhanced dark theme appearance
  • Updated toolbar button colors and visual consistency
  • Added new accent color token for design consistency

• Tests

  • Added layout and component test coverage
  • Added page integration tests
  • Added UI rendering verification tests

[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: 9b59f5e4-1de9-4461-96a9-51235679304c

📥 Commits

Reviewing files that changed from the base of the PR and between 4ee5ba6 and 9ec4b3e.

📒 Files selected for processing (11)

• dashboard/app/(dj)/__tests__/layout.test.tsx
• dashboard/app/(dj)/dashboard/__tests__/page.test.tsx
• dashboard/app/(dj)/dashboard/page.tsx
• dashboard/app/(dj)/layout.tsx
• dashboard/app/(dj)/setbuilder/[setId]/page.tsx
• dashboard/app/(dj)/setbuilder/__tests__/page.test.tsx
• dashboard/app/(dj)/setbuilder/components/curve.module.css
• dashboard/app/(dj)/setbuilder/page.tsx
• dashboard/app/globals.css
• dashboard/lib/__tests__/theme-vars.test.ts
• dashboard/lib/theme-vars.ts

---

📝 Walkthrough

Walkthrough

This PR routes the theme toggle conditionally based on pathname, hides the floating toggle on /setbuilder routes, adds inline toggles to setbuilder pages, introduces a Set Builder link to the dashboard, extends the theme system with a new --color-curve-accent token, and updates curve editor styling.

Changes

Theme Infrastructure and Route-Based Toggle Placement

Layer / File(s)	Summary
Theme token infrastructure dashboard/app/globals.css, dashboard/lib/theme-vars.ts, dashboard/lib/__tests__/theme-vars.test.ts	Adds --color-curve-accent CSS variable to all three theme maps (dark, high-contrast, daylight) and globals.css. Extends .btn styling with explicit dark-mode background, text color, and transition. Adds .btn:disabled state styling. Updates theme-vars test to expect 38 tokens.
DJLayout route-based toggle placement dashboard/app/(dj)/layout.tsx, dashboard/app/(dj)/__tests__/layout.test.tsx	DJLayout becomes a client component using usePathname() to conditionally render the floating ThemeToggle wrapper only on non-/setbuilder routes. Tests verify toggle renders on regular DJ routes, is suppressed on /setbuilder/... routes, and children render regardless.
Setbuilder inline theme toggles dashboard/app/(dj)/setbuilder/page.tsx, dashboard/app/(dj)/setbuilder/[setId]/page.tsx, dashboard/app/(dj)/setbuilder/__tests__/page.test.tsx	Adds ThemeToggle imports and renders them inline in setbuilder list and detail page headers. Refactors detail topbar to wrap SetActionsMenu and ThemeToggle in an inline-flex container. Tests mock ThemeToggle and verify it renders in both pages.
Curve editor toolbar styling dashboard/app/(dj)/setbuilder/components/curve.module.css	Updates .viewSwitch and .toolbarBtn to use var(--surface-raised) background. Updates .viewBtnActive to use var(--card) background and var(--color-curve-accent) text color.
Dashboard Set Builder link dashboard/app/(dj)/dashboard/page.tsx, dashboard/app/(dj)/dashboard/__tests__/page.test.tsx	Adds a "Set Builder" navigation link to the dashboard header pointing to /setbuilder. Test verifies the link renders and points to the correct route.

🎯 3 (Moderate) | ⏱️ ~22 minutes

Possibly Related PRs

• wrzonance/WrzDJ#306: Both PRs update theming infrastructure, particularly DJLayout route-driven toggle rendering and shared theme-token updates in globals.css and theme-vars.ts.
• wrzonance/WrzDJ#410: This PR adds ThemeToggle controls to setbuilder pages and adjusts DJLayout conditional toggle rendering, which directly extends the setbuilder frontend components introduced in that PR.
• wrzonance/WrzDJ#313: This PR refines ThemeToggle placement with route-based conditional suppression and inline positioning in setbuilder, building on the theme toggle migration work from that PR.

🐰 The builder sets a toggle in place,
Routes it wisely through the space,
Colors curve with accent's grace,
Theme flows smooth—the right embrace. ✨

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly summarizes the main changes: theme-correcting buttons, fixing toggle overlap issues, and adding a dashboard navigation link.
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.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ 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 fix/setbuilder-ui-polish

---

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