fix(interface): route Switch through local Toggle to fix Tailwind v4 off-color state

[mdcnick]

Problem

Every toggle in the Spacebot dashboard renders with the unchecked background color even when data-state="checked" is correctly set on the underlying <button>. Visible repro: Settings → Channels → Telegram "Enabled" switch. Also affects the Server API toggle, Agent Cron toggles, Prompt Inspect capture toggle, and every section in the Config editor (coalesce, memory, browser, projects).

Root cause

@spacedrive/primitives' Switch ships a className containing radix-state-checked:bg-accent — a Radix v0.x / Tailwind v3-era class variant. Spacebot's interface/package.json pins tailwindcss: ^4.2.2 with @tailwindcss/vite: ^4.2.2. Tailwind v4 removed the radix-state-*: variant family in favor of data-[state=*]:* attribute selectors, and Radix v1.x (the resolved @radix-ui/react-switch@1.2.6) emits data-state="checked" on the element instead of the radix-state-checked class. The selector never matches → bg-app-line always wins.

Fix

Routes all 5 Switch consumers in interface/ through the local interface/src/ui/Toggle.tsx wrapper, which uses the modern data-[state=checked]:bg-accent data-[state=unchecked]:bg-app-dark-box selector and is a drop-in replacement (forwards all Radix Root props via spread, accepts the same size: "sm" | "md" | "lg" literals). Aliased as Toggle as Switch so the JSX call sites are byte-identical — zero call-site diff.

This is the consumer-side workaround. The durable fix belongs in the @spacedrive/primitives package — see the companion PR.

Verification

• bunx tsc --noEmit in interface/ passes
• All 5 call sites inspected: only checked, onCheckedChange, disabled, and size props are used, all of which Toggle supports
• interface/src/ui/Toggle.tsx is a 59-line wrapper with no new dependencies

Note

This PR fixes toggle state styling issues by routing all Switch imports through a local Toggle wrapper that uses modern Tailwind v4 data-[state=*]: selectors instead of the deprecated Radix v0.x radix-state-*: class variants. The fix affects 5 files (ChannelSettingCard, PromptInspectModal, ConfigSectionEditor, ServerSection, and AgentCron) with zero visible changes to call sites since the wrapper is aliased as Toggle as Switch.

_{Written by Tembo for commit 0e1e1b2c. This will update automatically on new commits.}

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 0da73b73-f6a0-4abc-8a5f-633403373d7a

📥 Commits

Reviewing files that changed from the base of the PR and between ac52277 and 0e1e1b2.

📒 Files selected for processing (5)

• interface/src/components/ChannelSettingCard.tsx
• interface/src/components/PromptInspectModal.tsx
• interface/src/components/agent-config/ConfigSectionEditor.tsx
• interface/src/components/settings/ServerSection.tsx
• interface/src/routes/AgentCron.tsx

---

Walkthrough

The interface replaces primitive-library Switch imports with the local Toggle component under the existing Switch alias in five components. No component usage or public declarations change.

Changes

Toggle import migration

Layer / File(s)	Summary
Replace Switch imports interface/src/components/ChannelSettingCard.tsx, interface/src/components/PromptInspectModal.tsx, interface/src/components/agent-config/ConfigSectionEditor.tsx, interface/src/components/settings/ServerSection.tsx, interface/src/routes/AgentCron.tsx	The components now import Toggle from @/ui/Toggle under the existing Switch alias. Existing usage remains unchanged.

Estimated code review effort: 1 (Trivial) | ~3 minutes

Possibly related PRs

• spacedriveapp/spacebot#597: Both changes update the interface toggle-switch implementation.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly identifies the interface fix and the Tailwind v4 state issue.
Description check	✅ Passed	The description explains the toggle rendering problem, root cause, fix, and verification steps.
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 unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

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

[mdcnick]

Closing to test the changes end-to-end before re-opening. Will reopen once verified.