From 2f72b6f32f1ff96312bfb3c853c157d496a23a41 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Wed, 1 Jul 2026 06:21:21 +0000
Subject: [PATCH] refactor(configurator): dedupe mobile fold-toggle button
 markup
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Extract the near-identical Controls/Preview toggle buttons into a
single foldToggleButton snippet, parameterized by view, icon, and
label. No behavior change — same active-state styling, same overrides
badge on Preview only.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01SQXr34nocCi1jrGcp5TPVm
---
 configurator/src/App.svelte | 38 +++++++++++++++++--------------------
 1 file changed, 17 insertions(+), 21 deletions(-)

diff --git a/configurator/src/App.svelte b/configurator/src/App.svelte
index 02d0eb31..3c3f068b 100644
--- a/configurator/src/App.svelte
+++ b/configurator/src/App.svelte
@@ -241,6 +241,21 @@
   });
 </script>
 
+{#snippet foldToggleButton(view: "controls" | "preview", Icon: typeof SlidersHorizontal, label: string)}
+  <button
+    onclick={() => { mobileView = view; }}
+    aria-pressed={mobileView === view}
+    class={`flex-1 flex items-center justify-center gap-1.5 py-2.5 text-[11px] font-bold transition-colors cursor-pointer ${
+      mobileView === view ? "text-indigo-300 bg-indigo-500/10" : "text-slate-500 hover:text-slate-300"
+    }`}
+  >
+    <Icon class="w-3.5 h-3.5" /> {label}
+    {#if view === "preview" && overridesCount > 0}
+      <span class="w-4 h-4 bg-indigo-600 text-white rounded-full flex items-center justify-center text-[8px] font-black">{overridesCount > 9 ? "9+" : overridesCount}</span>
+    {/if}
+  </button>
+{/snippet}
+
 <div class="{embedded ? 'w-full h-full' : 'w-screen h-screen'} flex flex-col overflow-hidden bg-[#0a0a0f] text-slate-200 font-sans">
   <!-- Top header bar -->
   <StudioHeader
@@ -261,27 +276,8 @@
        preview. Lives right under the header (not at the bottom) so it's
        visible without scrolling and doesn't compete with the status bar. -->
   <div class="md:hidden flex items-stretch border-b border-white/8 bg-[#0d0d14] shrink-0">
-    <button
-      onclick={() => { mobileView = "controls"; }}
-      aria-pressed={mobileView === "controls"}
-      class={`flex-1 flex items-center justify-center gap-1.5 py-2.5 text-[11px] font-bold transition-colors cursor-pointer ${
-        mobileView === "controls" ? "text-indigo-300 bg-indigo-500/10" : "text-slate-500 hover:text-slate-300"
-      }`}
-    >
-      <SlidersHorizontal class="w-3.5 h-3.5" /> Controls
-    </button>
-    <button
-      onclick={() => { mobileView = "preview"; }}
-      aria-pressed={mobileView === "preview"}
-      class={`flex-1 flex items-center justify-center gap-1.5 py-2.5 text-[11px] font-bold transition-colors cursor-pointer ${
-        mobileView === "preview" ? "text-indigo-300 bg-indigo-500/10" : "text-slate-500 hover:text-slate-300"
-      }`}
-    >
-      <Eye class="w-3.5 h-3.5" /> Preview
-      {#if overridesCount > 0}
-        <span class="w-4 h-4 bg-indigo-600 text-white rounded-full flex items-center justify-center text-[8px] font-black">{overridesCount > 9 ? "9+" : overridesCount}</span>
-      {/if}
-    </button>
+    {@render foldToggleButton("controls", SlidersHorizontal, "Controls")}
+    {@render foldToggleButton("preview", Eye, "Preview")}
   </div>
 
   <!-- Main body: sidebar + left panel + preview -->