refactor(configurator): dedupe mobile fold-toggle button markup

[jackgranatowski]

Summary

• CodeRabbit flagged the near-identical Controls/Preview mobile toggle buttons (introduced in fix(configurator): stop mobile domain panel overflowing past the icon rail #464) as minor duplication.
• Extracted them into a single foldToggleButton snippet parameterized by view, icon, and label. No behavior change — same active-state styling, same overrides-count badge shown only on the Preview button.

Test plan

• npx svelte-check — 0 errors (had to type the icon param as typeof SlidersHorizontal since lucide-svelte's icons are SvelteComponentTyped-based, not Svelte 5 Component-typed).
• npm run build — builds cleanly.
• Verified in a mobile-viewport browser: both buttons render identically, switching works, no console errors, no layout regression (no horizontal overflow).

🤖 Generated with Claude Code

https://claude.ai/code/session_01SQXr34nocCi1jrGcp5TPVm

---

Generated by Claude Code

Summary by CodeRabbit

• Refactor
  • Simplified the mobile toggle controls for the configurator, keeping the same behavior while reducing duplicated UI logic.
  • The preview toggle still shows an override-count badge when applicable.

[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: dc3f7033-00ad-4dfc-8740-23429aa41ac5

📥 Commits

Reviewing files that changed from the base of the PR and between d0b7b5d and 2f72b6f.

📒 Files selected for processing (1)

• configurator/src/App.svelte

---

📝 Walkthrough

Walkthrough

The two mobile fold-toggle buttons in App.svelte were refactored into a shared Svelte snippet, parameterized by target view, icon, and label, with the override-count badge shown only for the preview toggle. Duplicate inline markup was replaced with two snippet render calls.

Changes

Fold Toggle Refactor

Layer / File(s)	Summary
Fold toggle snippet and usage configurator/src/App.svelte	Adds a foldToggleButton snippet parameterized by view, icon, and label with conditional override-count badge, and replaces duplicated inline button markup with two {@render foldToggleButton(...)} calls.

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

Suggested labels: codex

🚥 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 summarizes the main change: refactoring configurator mobile fold-toggle buttons to remove duplicated markup.
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
• Commit unit tests in branch claude/configurator-sync-pr-460-461-g1f2w4

---

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.}

[qodo-code-review]

PR Summary by Qodo

Refactor configurator mobile fold toggle buttons into a reusable snippet

✨ Enhancement 🕐 10-20 Minutes

AI Description

• Extract duplicated mobile Controls/Preview toggle button markup into a single snippet.
• Preserve existing active-state styling and click behavior via the shared renderer.
• Keep overrides-count badge behavior: shown only on the Preview toggle.

Diagram

graph TD
  A["App.svelte"] --> S["foldToggleButton snippet"] --> V{"Set mobileView"}
  V --> C["Controls panel"]
  V --> P["Preview panel"]
  A --> O["overridesCount"] --> B["Preview badge"]

Loading

High-Level Assessment

The following are alternative approaches to this PR:

1. Extract a dedicated Svelte component (e.g., FoldToggleButton.svelte)

• ➕ Reusable across routes/pages if more toggles appear later
• ➕ Clearer prop contract and easier isolated testing
• ➖ More files/exports for very localized UI
• ➖ More prop typing/forwarding overhead vs a local snippet

2. Use a data-driven #each loop over a config array

• ➕ Removes repeated render calls and keeps toggle definitions in one place
• ➕ Easy to add more views later
• ➖ Adds indirection for a simple two-button case
• ➖ Still needs conditional logic for the preview-only badge

Recommendation: Keep the current local snippet approach: it dedupes markup without widening the API surface or introducing a new component file, and it preserves the preview-only badge behavior cleanly.

Files changed (1) +17 / -21

Refactor (1) +17 / -21

App.svelteDeduplicate mobile fold-toggle buttons via foldToggleButton snippet +17/-21

Deduplicate mobile fold-toggle buttons via foldToggleButton snippet

• Introduces a typed Svelte snippet that renders the shared mobile toggle button UI for both Controls and Preview. Replaces the two near-identical button blocks with snippet renders, preserving active styling and showing the overrides badge only for the Preview view.

configurator/src/App.svelte

[qodo-code-review]

Code Review by Qodo

🐞 Bugs (0) 📘 Rule violations (0) 📎 Requirement gaps (0)

Great, no issues found!

Qodo reviewed your code and found no material issues that require review