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