fix(admin-app): fix CSS loading and modernise sidebar for mobile

[jackgranatowski]

Summary

• Root cause of all visual issues fixed — main.js was missing import './styles/app.css', so every --cfg-* CSS custom property resolved to an empty string on the .shell element. This caused transparent/invisible sliders, dark sidebar fallback colour, and unreadable inputs on mobile.
• Loading placeholder cleared — mount() in Svelte 5 appends to the target rather than replacing it; added target.innerHTML = '' before mounting so the "Loading SLASHED settings…" fallback text disappears when the SPA boots.
• Sidebar redesign — WpSidebar.svelte rewritten: var(--cfg-surface-2) background (light), border-radius: 8px items, inset 3px 0 0 var(--cfg-accent-strong) active stripe, min-height: 40px / 44px on mobile, no hardcoded dark colour fallbacks anywhere.

Test plan

• Admin panel loads with light sidebar (not dark)
• Sidebar active item shows blue left-stripe highlight
• OKLCH sliders in Colors domain visible with blue gradient track (not transparent)
• Typography / Spacing sliders visible and interactive
• Mobile (390 px) — all controls readable, sidebar shows icon-only collapsed view with correct colours
• "Loading SLASHED settings…" placeholder disappears immediately when SPA boots

https://claude.ai/code/session_017Q5NUFKipcefaCeWSfwQib

---

Generated by Claude Code

Summary by CodeRabbit

• Style
  • Updated sidebar toggle icon appearance with refined characters
  • Improved sidebar layout, spacing, typography, and mobile responsiveness
  • Enhanced color scheme and visual styling for better consistency

[coderabbitai]

Warning

Review limit reached

@jackgranatowski, we couldn't start this review because you've reached your PR review rate limit.

More reviews will be available in 51 minutes and 51 seconds. Learn how PR review limits work.

Your organization has used up its prepaid credits, and credit purchases are no longer available. Enable the review add-on in the billing tab to keep reviews running — you're only billed for reviews past your plan's rate limits ($0.25/file).

⌛ How to resolve this issue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans include higher PR review limits than trial, open-source, and free plans. In all cases, reviews become available again over time. During sustained high-volume PR review activity, CodeRabbit may temporarily slow when the next review becomes available.

Please see our Fair Usage Limits Policy for further information.

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 9cb82e03-9595-41ea-90b3-16f33e290f69

📥 Commits

Reviewing files that changed from the base of the PR and between 8a7bde0 and 967b707.

📒 Files selected for processing (2)

• SLASHED-for-WP/admin-app/src/components/WpSidebar.svelte
• SLASHED-for-WP/assets/admin-app/app.js

📝 Walkthrough

Walkthrough

The admin SPA entry point (main.js) adds a CSS import for app.css and clears the mount target's innerHTML before mounting. WpSidebar.svelte changes the toggle icon to use a .sidebar__toggle-icon span with ‹/› characters, always sets the domain button title to d.label, and rewrites the full component stylesheet with updated layout, colors, collapsed-state visuals, and a mobile breakpoint.

Changes

WP Admin App: Sidebar Restyle & Entry Point Fix

Layer / File(s)	Summary
Admin SPA entry point: CSS import and mount clearing SLASHED-for-WP/admin-app/src/main.js	Imports ./styles/app.css and clears the mount target's innerHTML before the Svelte App is mounted, gated on the #slashed-admin-app element being present.
WpSidebar template: toggle icon and domain button title SLASHED-for-WP/admin-app/src/components/WpSidebar.svelte	Wraps chevrons in a .sidebar__toggle-icon span using ‹/›, changes domain navigation button title to always use d.label, and updates the component header comment.
WpSidebar full CSS rewrite SLASHED-for-WP/admin-app/src/components/WpSidebar.svelte	Rewrites all component styles: removes CSS fallbacks in favor of --cfg-* variables, updates layout/spacing/radius, active/hover colors and shadows, collapsed-state alignment, scrollbar/padding, and adds a mobile media query with larger touch targets.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

• codeslash-dev/SLASHED-Plugins#30: Modifies the same WpSidebar.svelte component's domain navigation and toggle UI, overlapping directly with the sidebar template and styling changes in this PR.

🚥 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 accurately reflects the main changes: fixing CSS loading in main.js and modernizing the sidebar component for mobile.
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.

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

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch claude/wp-plugin-svelte-configurator-mobile-fix

---

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 and usage tips.}

[coderabbitai]

🧹 Nitpick comments (1)

SLASHED-for-WP/admin-app/src/components/WpSidebar.svelte (1)

42-42: 💤 Low value

Simplify redundant ternary.

Both branches return d.label, so the ternary can be removed.

♻️ Proposed simplification

-        title={ui.sidebarOpen ? d.label : d.label}
+        title={d.label}

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@SLASHED-for-WP/admin-app/src/components/WpSidebar.svelte` at line 42, Remove
the redundant ternary operator in the title attribute of the WpSidebar.svelte
component. Since both the true and false branches of the ternary expression
return the same value `d.label`, the conditional logic is unnecessary. Replace
the entire ternary `ui.sidebarOpen ? d.label : d.label` with just `d.label`.

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Nitpick comments:
In `@SLASHED-for-WP/admin-app/src/components/WpSidebar.svelte`:
- Line 42: Remove the redundant ternary operator in the title attribute of the
WpSidebar.svelte component. Since both the true and false branches of the
ternary expression return the same value `d.label`, the conditional logic is
unnecessary. Replace the entire ternary `ui.sidebarOpen ? d.label : d.label`
with just `d.label`.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: b8259bb5-6a93-41c4-a7b5-a38031298ebe

📥 Commits

Reviewing files that changed from the base of the PR and between db8ab25 and 8a7bde0.

📒 Files selected for processing (4)

• SLASHED-for-WP/admin-app/src/components/WpSidebar.svelte
• SLASHED-for-WP/admin-app/src/main.js
• SLASHED-for-WP/assets/admin-app/app.css
• SLASHED-for-WP/assets/admin-app/app.js