From 8be56bbe2ffecbb3b1756371c09d2253b51a8635 Mon Sep 17 00:00:00 2001
From: Suradet Pratomsak <pharmacistsabot@gmail.com>
Date: Sat, 15 Aug 2026 09:23:48 +0700
Subject: [PATCH 1/3] refactor(app): group sidebar controls into labeled
 sections

Restructure the controls sidebar into five labeled groups (Code,
Appearance, Canvas, Frame, Export) with a section-header component.
Move the split-screen toggle next to the code textarea it controls,
and introduce a reusable Toggle switch component.
---
 crates/app/src/controls.rs | 673 ++++++++++++++++++++++---------------
 1 file changed, 403 insertions(+), 270 deletions(-)

diff --git a/crates/app/src/controls.rs b/crates/app/src/controls.rs
index 2a0675f..06e5ed0 100644
--- a/crates/app/src/controls.rs
+++ b/crates/app/src/controls.rs
@@ -1,5 +1,5 @@
-//! Sidebar with every user control: code input, language/theme/font pickers,
-//! sliders, scale selector, toggles, and background swatches.
+//! Sidebar with every user control, grouped into labeled sections: code,
+//! appearance, canvas geometry, frame toggles, and export settings.
 
 use codeframe_models::{Background, FontChoice, Language, ThemeChoice};
 use leptos::prelude::*;
@@ -30,6 +30,17 @@ fn background_css(background: &Background) -> String {
   }
 }
 
+/// Sidebar section header: small lucide icon + uppercase title.
+#[component]
+fn SectionHeader(title: &'static str, children: Children) -> impl IntoView {
+  view! {
+      <div class="section-header">
+          <span class="section-icon" aria-hidden="true">{children()}</span>
+          <h2 class="section-title">{title}</h2>
+      </div>
+  }
+}
+
 /// A `<select>` bound to an `RwSignal` over a simple enum.
 #[component]
 fn EnumSelect<T>(
@@ -90,6 +101,133 @@ fn Slider(
   }
 }
 
+/// A labeled toggle switch (checkbox + styled track/thumb).
+#[component]
+fn Toggle(checked: RwSignal<bool>, label: &'static str, id: &'static str) -> impl IntoView {
+  view! {
+      <label class="switch" for=id>
+          <input
+              id=id
+              type="checkbox"
+              role="switch"
+              prop:checked=move || checked.get()
+              on:change=move |ev| checked.set(event_target_checked(&ev))
+          />
+          <span class="switch-track" aria-hidden="true">
+              <span class="switch-thumb" />
+          </span>
+          <span class="switch-label">{label}</span>
+      </label>
+  }
+}
+
+/// lucide `code` icon.
+#[component]
+fn CodeIcon() -> impl IntoView {
+  view! {
+      <svg
+          width="14"
+          height="14"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          aria-hidden="true"
+      >
+          <polyline points="16 18 22 12 16 6" />
+          <polyline points="8 6 2 12 8 18" />
+      </svg>
+  }
+}
+
+/// lucide `palette` icon.
+#[component]
+fn PaletteIcon() -> impl IntoView {
+  view! {
+      <svg
+          width="14"
+          height="14"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          aria-hidden="true"
+      >
+          <circle cx="13.5" cy="6.5" r=".5" fill="currentColor" />
+          <circle cx="17.5" cy="10.5" r=".5" fill="currentColor" />
+          <circle cx="8.5" cy="7.5" r=".5" fill="currentColor" />
+          <circle cx="6.5" cy="12.5" r=".5" fill="currentColor" />
+          <path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.926 0 1.648-.746 1.648-1.688 0-.437-.18-.835-.437-1.125-.29-.289-.438-.652-.438-1.125a1.64 1.64 0 0 1 1.668-1.668h1.996c3.051 0 5.555-2.503 5.555-5.554C21.965 6.012 17.461 2 12 2z" />
+      </svg>
+  }
+}
+
+/// lucide `square` icon (canvas geometry).
+#[component]
+fn SquareIcon() -> impl IntoView {
+  view! {
+      <svg
+          width="14"
+          height="14"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          aria-hidden="true"
+      >
+          <rect width="18" height="18" x="3" y="3" rx="2" />
+      </svg>
+  }
+}
+
+/// lucide `rectangle-horizontal` icon (window frame).
+#[component]
+fn WindowIcon() -> impl IntoView {
+  view! {
+      <svg
+          width="14"
+          height="14"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          aria-hidden="true"
+      >
+          <rect width="20" height="16" x="2" y="4" rx="2" />
+      </svg>
+  }
+}
+
+/// lucide `download` icon.
+#[component]
+fn DownloadIcon() -> impl IntoView {
+  view! {
+      <svg
+          width="14"
+          height="14"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          aria-hidden="true"
+      >
+          <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+          <polyline points="7 10 12 15 17 10" />
+          <line x1="12" x2="12" y1="15" y2="3" />
+      </svg>
+  }
+}
+
 /// lucide `triangle-alert` icon.
 #[component]
 fn AlertTriangleIcon() -> impl IntoView {
@@ -116,293 +254,288 @@ fn AlertTriangleIcon() -> impl IntoView {
 pub fn Controls(settings: Settings) -> impl IntoView {
   view! {
       <aside class="controls" aria-label="Settings">
-          <section>
-              <label class="control-label" for="code-input">{move || if settings.split_enabled.get() { "Left panel code" } else { "Code" }}</label>
-              <textarea
-                  id="code-input"
-                  class="code-input"
-                  rows="12"
-                  spellcheck="false"
-                  autocomplete="off"
-                  on:input=move |ev| settings.code.set(event_target_value(&ev))
-                  on:keydown=move |ev| {
-                      if ev.key() == "Tab" {
-                          ev.prevent_default();
-                          let target = ev.target().unwrap();
-                          let textarea: web_sys::HtmlTextAreaElement = target.unchecked_into();
-                          let start = textarea.selection_start().unwrap_or_default().unwrap_or(0) as usize;
-                          let end = textarea.selection_end().unwrap_or_default().unwrap_or(0) as usize;
-                          let value = textarea.value();
-                          let new_value = format!("{}    {}", &value[..start], &value[end..]);
-                          settings.code.set(new_value.clone());
-                          textarea.set_value(&new_value);
-                          let pos = (start + 4) as u32;
-                          let _ = textarea.set_selection_range(pos, pos);
-                      }
-                  }
-              >{SAMPLE_CODE}</textarea>
-          </section>
-
-          {move || {
-              settings.split_enabled.get().then(|| {
-                  let code_signal = settings.split_code;
-                  view! {
-                      <section>
-                          <label class="control-label split-label" for="split-code-input">"Right panel code"</label>
-                          <textarea
-                              id="split-code-input"
-                              class="code-input"
-                              rows="12"
-                              spellcheck="false"
-                              autocomplete="off"
-                              prop:value=move || code_signal.get()
-                              on:input=move |ev| code_signal.set(event_target_value(&ev))
-                              on:keydown=move |ev| {
-                                  if ev.key() == "Tab" {
-                                      ev.prevent_default();
-                                      let target = ev.target().unwrap();
-                                      let textarea: web_sys::HtmlTextAreaElement = target.unchecked_into();
-                                      let start = textarea.selection_start().unwrap_or_default().unwrap_or(0) as usize;
-                                      let end = textarea.selection_end().unwrap_or_default().unwrap_or(0) as usize;
-                                      let value = textarea.value();
-                                      let new_value = format!("{}    {}", &value[..start], &value[end..]);
-                                      code_signal.set(new_value.clone());
-                                      textarea.set_value(&new_value);
-                                      let pos = (start + 4) as u32;
-                                      let _ = textarea.set_selection_range(pos, pos);
-                                  }
+          <section class="control-group">
+              <SectionHeader title="Code"><CodeIcon /></SectionHeader>
+              <div class="section-body">
+                  <div>
+                      <label class="control-label" for="code-input">{move || if settings.split_enabled.get() { "Left panel code" } else { "Code" }}</label>
+                      <textarea
+                          id="code-input"
+                          class="code-input"
+                          rows="12"
+                          spellcheck="false"
+                          autocomplete="off"
+                          on:input=move |ev| settings.code.set(event_target_value(&ev))
+                          on:keydown=move |ev| {
+                              if ev.key() == "Tab" {
+                                  ev.prevent_default();
+                                  let target = ev.target().unwrap();
+                                  let textarea: web_sys::HtmlTextAreaElement = target.unchecked_into();
+                                  let start = textarea.selection_start().unwrap_or_default().unwrap_or(0) as usize;
+                                  let end = textarea.selection_end().unwrap_or_default().unwrap_or(0) as usize;
+                                  let value = textarea.value();
+                                  let new_value = format!("{}    {}", &value[..start], &value[end..]);
+                                  settings.code.set(new_value.clone());
+                                  textarea.set_value(&new_value);
+                                  let pos = (start + 4) as u32;
+                                  let _ = textarea.set_selection_range(pos, pos);
                               }
-                          ></textarea>
-                      </section>
-                  }
-              })
-          }}
-
-          <div class="control-row">
-              <section>
-                  <label class="control-label" for="language-select">"Language"</label>
-                  <EnumSelect
-                      id="language-select"
-                      value=settings.language
-                      options=&Language::ALL
-                      label=Language::display_name
-                  />
-              </section>
-              <section>
-                  <label class="control-label" for="theme-select">"Theme"</label>
-                  <EnumSelect
-                      id="theme-select"
-                      value=settings.theme
-                      options=&ThemeChoice::ALL
-                      label=ThemeChoice::display_name
-                  />
-              </section>
-          </div>
-
-          <section>
-              <label class="control-label" for="font-select">"Font"</label>
-              <EnumSelect
-                  id="font-select"
-                  value=settings.font
-                  options=&FontChoice::ALL
-                  label=FontChoice::display_name
-              />
-              {move || {
-                  settings.font.get().has_ligatures().then(|| {
-                      view! {
-                          <p class="hint" title="Canvas2D fillText does not shape ligatures: sequences like != or => are exported as separate glyphs.">
-                              <AlertTriangleIcon />
-                              "This font has ligatures, but canvas export cannot render them."
-                          </p>
-                      }
-                  })
-              }}
-          </section>
-
-          <section>
-              <label class="control-label" for="font-size-slider">"Font size"</label>
-              <Slider id="font-size-slider" value=settings.font_size min=10.0 max=24.0 step=1.0 format=|v| format!("{v}px") />
-          </section>
-
-          <section>
-              <label class="control-label" for="padding-slider">"Padding"</label>
-              <Slider id="padding-slider" value=settings.padding min=16.0 max=128.0 step=8.0 format=|v| format!("{v}px") />
-          </section>
+                          }
+                      >{SAMPLE_CODE}</textarea>
+                  </div>
 
-          <section>
-              <label class="control-label" for="corner-radius-slider">"Corner radius"</label>
-              <Slider id="corner-radius-slider" value=settings.corner_radius min=0.0 max=24.0 step=1.0 format=|v| format!("{v}px") />
-          </section>
+                  <Toggle id="split-toggle" checked=settings.split_enabled label="Split-screen comparison" />
 
-          <section>
-              <label class="control-label" for="line-height-slider">"Line height"</label>
-              <Slider id="line-height-slider" value=settings.line_height min=1.0 max=2.5 step=0.1 format=|v| format!("{v:.1}") />
-          </section>
-
-          <section>
-              <label class="control-label" id="export-scale-label">"Export scale"</label>
-              <div class="segmented" role="radiogroup" aria-labelledby="export-scale-label">
-                  {SCALE_PRESETS
-                      .into_iter()
-                      .map(|preset| {
+                  {move || {
+                      settings.split_enabled.get().then(|| {
+                          let code_signal = settings.split_code;
                           view! {
-                              <button
-                                  class="seg"
-                                  class:active=move || settings.scale.get() == preset
-                                  role="radio"
-                                  aria-checked=move || settings.scale.get() == preset
-                                  on:click=move |_| settings.scale.set(preset)
-                              >
-                                  {format!("{preset}x")}
-                              </button>
+                              <div class="split-controls">
+                                  <div>
+                                      <label class="control-label" for="split-code-input">"Right panel code"</label>
+                                      <textarea
+                                          id="split-code-input"
+                                          class="code-input"
+                                          rows="12"
+                                          spellcheck="false"
+                                          autocomplete="off"
+                                          prop:value=move || code_signal.get()
+                                          on:input=move |ev| code_signal.set(event_target_value(&ev))
+                                          on:keydown=move |ev| {
+                                              if ev.key() == "Tab" {
+                                                  ev.prevent_default();
+                                                  let target = ev.target().unwrap();
+                                                  let textarea: web_sys::HtmlTextAreaElement = target.unchecked_into();
+                                                  let start = textarea.selection_start().unwrap_or_default().unwrap_or(0) as usize;
+                                                  let end = textarea.selection_end().unwrap_or_default().unwrap_or(0) as usize;
+                                                  let value = textarea.value();
+                                                  let new_value = format!("{}    {}", &value[..start], &value[end..]);
+                                                  code_signal.set(new_value.clone());
+                                                  textarea.set_value(&new_value);
+                                                  let pos = (start + 4) as u32;
+                                                  let _ = textarea.set_selection_range(pos, pos);
+                                              }
+                                          }
+                                      ></textarea>
+                                  </div>
+                                  <div class="control-row">
+                                      <div>
+                                          <label class="control-label" for="split-theme-select">"Right panel theme"</label>
+                                          <EnumSelect
+                                              id="split-theme-select"
+                                              value=settings.split_theme
+                                              options=&ThemeChoice::ALL
+                                              label=ThemeChoice::display_name
+                                          />
+                                      </div>
+                                      <div>
+                                          <label class="control-label" for="split-language-select">"Right panel language"</label>
+                                          <EnumSelect
+                                              id="split-language-select"
+                                              value=settings.split_language
+                                              options=&Language::ALL
+                                              label=Language::display_name
+                                          />
+                                      </div>
+                                  </div>
+                                  <p class="hint">"Left panel uses the main theme/language above."</p>
+                              </div>
                           }
                       })
-                      .collect_view()}
-                  <input
-                      class="scale-custom"
-                      id="scale-custom"
-                      type="number"
-                      min="1"
-                      max="12"
-                      step="0.5"
-                      title="Custom scale (1–12)"
-                      prop:value=move || settings.scale.get().to_string()
-                      on:change=move |ev| {
-                          if let Ok(parsed) = event_target_value(&ev).parse::<f64>() {
-                              settings.scale.set(parsed.clamp(0.5, 12.0));
-                          }
-                      }
-                  />
+                  }}
               </div>
           </section>
 
-          <section>
-              <label class="control-label" for="target-width-input">"Target width"</label>
-              <div class="slider-row">
-                  <input
-                      id="target-width-input"
-                      type="number"
-                      min="320"
-                      max="3840"
-                      step="10"
-                      placeholder="auto"
-                      title="Lock export width in pixels (scale computed automatically)"
-                      prop:value=move || {
-                          settings.target_width
-                              .get()
-                              .map(|w| format!("{w:.0}"))
-                              .unwrap_or_default()
-                      }
-                      on:input=move |ev| {
-                          let val = event_target_value(&ev);
-                          if val.is_empty() {
-                              settings.target_width.set(None);
-                          } else if let Ok(px) = val.parse::<f64>() {
-                              settings.target_width.set(Some(px.clamp(320.0, 3840.0)));
-                          }
-                      }
-                  />
-                  <span class="slider-value">"px"</span>
+          <section class="control-group">
+              <SectionHeader title="Appearance"><PaletteIcon /></SectionHeader>
+              <div class="section-body">
+                  <div class="control-row">
+                      <div>
+                          <label class="control-label" for="language-select">"Language"</label>
+                          <EnumSelect
+                              id="language-select"
+                              value=settings.language
+                              options=&Language::ALL
+                              label=Language::display_name
+                          />
+                      </div>
+                      <div>
+                          <label class="control-label" for="theme-select">"Theme"</label>
+                          <EnumSelect
+                              id="theme-select"
+                              value=settings.theme
+                              options=&ThemeChoice::ALL
+                              label=ThemeChoice::display_name
+                          />
+                      </div>
+                  </div>
+
+                  <div>
+                      <label class="control-label" for="font-select">"Font"</label>
+                      <EnumSelect
+                          id="font-select"
+                          value=settings.font
+                          options=&FontChoice::ALL
+                          label=FontChoice::display_name
+                      />
+                      {move || {
+                          settings.font.get().has_ligatures().then(|| {
+                              view! {
+                                  <p class="hint" title="Canvas2D fillText does not shape ligatures: sequences like != or => are exported as separate glyphs.">
+                                      <AlertTriangleIcon />
+                                      "This font has ligatures, but canvas export cannot render them."
+                                  </p>
+                              }
+                          })
+                      }}
+                  </div>
+
+                  <div>
+                      <label class="control-label">"Background"</label>
+                      <div class="bw-swatches" role="radiogroup" aria-label="Background preset">
+                          {Background::presets()
+                              .into_iter()
+                              .map(|(name, background)| {
+                                  let css = format!("background: {}", background_css(&background));
+                                  let bg_for_cmp = background.clone();
+                                  let bg_for_active = background.clone();
+                                  view! {
+                                      <button
+                                          class="swatch bw-swatch"
+                                          class:active=move || settings.background.get() == bg_for_cmp
+                                          role="radio"
+                                          aria-checked=move || settings.background.get() == bg_for_active
+                                          aria-label=name
+                                          title=name
+                                          style=css
+                                          on:click=move |_| {
+                                              settings.background.set(background.clone());
+                                          }
+                                      ></button>
+                                  }
+                              })
+                              .collect_view()}
+                      </div>
+                  </div>
               </div>
-              <p class="hint">"Overrides scale. Leave empty for manual scale."</p>
           </section>
 
-          <section class="toggles">
-              <label class="toggle">
-                  <input
-                      type="checkbox"
-                      prop:checked=move || settings.window_frame.get()
-                      on:change=move |ev| settings.window_frame.set(event_target_checked(&ev))
-                  />
-                  "Window frame"
-              </label>
-              <label class="toggle">
-                  <input
-                      type="checkbox"
-                      prop:checked=move || settings.line_numbers.get()
-                      on:change=move |ev| settings.line_numbers.set(event_target_checked(&ev))
-                  />
-                  "Line numbers"
-              </label>
+          <section class="control-group">
+              <SectionHeader title="Canvas"><SquareIcon /></SectionHeader>
+              <div class="section-body slider-grid">
+                  <div class="slider-cell">
+                      <label class="control-label" for="font-size-slider">"Font size"</label>
+                      <Slider id="font-size-slider" value=settings.font_size min=10.0 max=24.0 step=1.0 format=|v| format!("{v}px") />
+                  </div>
+                  <div class="slider-cell">
+                      <label class="control-label" for="line-height-slider">"Line height"</label>
+                      <Slider id="line-height-slider" value=settings.line_height min=1.0 max=2.5 step=0.1 format=|v| format!("{v:.1}") />
+                  </div>
+                  <div class="slider-cell">
+                      <label class="control-label" for="padding-slider">"Padding"</label>
+                      <Slider id="padding-slider" value=settings.padding min=16.0 max=128.0 step=8.0 format=|v| format!("{v}px") />
+                  </div>
+                  <div class="slider-cell">
+                      <label class="control-label" for="corner-radius-slider">"Corner radius"</label>
+                      <Slider id="corner-radius-slider" value=settings.corner_radius min=0.0 max=24.0 step=1.0 format=|v| format!("{v}px") />
+                  </div>
+              </div>
           </section>
 
-          <section>
-              <label class="control-label" for="filename-input">"Filename template"</label>
-              <input
-                  id="filename-input"
-                  class="filename-input"
-                  type="text"
-                  prop:value=move || settings.filename_template.get()
-                  on:input=move |ev| settings.filename_template.set(event_target_value(&ev))
-                  title="Placeholders: {scale}, {language}, {theme}, {timestamp}"
-              />
-              <p class="hint">"Preview: " {move || format!("{}.png", settings.expanded_filename())}</p>
+          <section class="control-group">
+              <SectionHeader title="Frame"><WindowIcon /></SectionHeader>
+              <div class="section-body">
+                  <div class="toggles">
+                      <Toggle id="window-frame-toggle" checked=settings.window_frame label="Window frame" />
+                      <Toggle id="line-numbers-toggle" checked=settings.line_numbers label="Line numbers" />
+                  </div>
+              </div>
           </section>
 
-          <section>
-              <label class="control-label">"Background"</label>
-              <div class="bw-swatches" role="radiogroup" aria-label="Background preset">
-                  {Background::presets()
-                      .into_iter()
-                      .map(|(name, background)| {
-                          let css = format!("background: {}", background_css(&background));
-                          let bg_for_cmp = background.clone();
-                          let bg_for_active = background.clone();
-                          view! {
-                              <button
-                                  class="swatch bw-swatch"
-                                  class:active=move || settings.background.get() == bg_for_cmp
-                                  role="radio"
-                                  aria-checked=move || settings.background.get() == bg_for_active
-                                  aria-label=name
-                                  title=name
-                                  style=css
-                                  on:click=move |_| {
-                                      settings.background.set(background.clone());
+          <section class="control-group">
+              <SectionHeader title="Export"><DownloadIcon /></SectionHeader>
+              <div class="section-body">
+                  <div>
+                      <label class="control-label" id="export-scale-label">"Export scale"</label>
+                      <div class="segmented" role="radiogroup" aria-labelledby="export-scale-label">
+                          {SCALE_PRESETS
+                              .into_iter()
+                              .map(|preset| {
+                                  view! {
+                                      <button
+                                          class="seg"
+                                          class:active=move || settings.scale.get() == preset
+                                          role="radio"
+                                          aria-checked=move || settings.scale.get() == preset
+                                          on:click=move |_| settings.scale.set(preset)
+                                      >
+                                          {format!("{preset}x")}
+                                      </button>
                                   }
-                              ></button>
-                          }
-                      })
-                      .collect_view()}
-              </div>
-          </section>
+                              })
+                              .collect_view()}
+                          <input
+                              class="scale-custom"
+                              id="scale-custom"
+                              type="number"
+                              min="1"
+                              max="12"
+                              step="0.5"
+                              title="Custom scale (1โ€“12)"
+                              prop:value=move || settings.scale.get().to_string()
+                              on:change=move |ev| {
+                                  if let Ok(parsed) = event_target_value(&ev).parse::<f64>() {
+                                      settings.scale.set(parsed.clamp(0.5, 12.0));
+                                  }
+                              }
+                          />
+                      </div>
+                  </div>
 
-          <section>
-              <label class="toggle">
-                  <input
-                      type="checkbox"
-                      prop:checked=move || settings.split_enabled.get()
-                      on:change=move |ev| settings.split_enabled.set(event_target_checked(&ev))
-                  />
-                  "Split-screen comparison"
-              </label>
-              {move || {
-                  settings.split_enabled.get().then(|| view! {
-                      <div class="split-controls">
-                          <div class="control-row">
-                              <section>
-                                  <label class="control-label" for="split-theme-select">"Right panel theme"</label>
-                                  <EnumSelect
-                                      id="split-theme-select"
-                                      value=settings.split_theme
-                                      options=&ThemeChoice::ALL
-                                      label=ThemeChoice::display_name
-                                  />
-                              </section>
-                              <section>
-                                  <label class="control-label" for="split-language-select">"Right panel language"</label>
-                                  <EnumSelect
-                                      id="split-language-select"
-                                      value=settings.split_language
-                                      options=&Language::ALL
-                                      label=Language::display_name
-                                  />
-                              </section>
-                          </div>
-                          <p class="hint">"Left panel uses the main theme/language above."</p>
+                  <div>
+                      <label class="control-label" for="target-width-input">"Target width"</label>
+                      <div class="slider-row">
+                          <input
+                              id="target-width-input"
+                              type="number"
+                              min="320"
+                              max="3840"
+                              step="10"
+                              placeholder="auto"
+                              title="Lock export width in pixels (scale computed automatically)"
+                              prop:value=move || {
+                                  settings.target_width
+                                      .get()
+                                      .map(|w| format!("{w:.0}"))
+                                      .unwrap_or_default()
+                              }
+                              on:input=move |ev| {
+                                  let val = event_target_value(&ev);
+                                  if val.is_empty() {
+                                      settings.target_width.set(None);
+                                  } else if let Ok(px) = val.parse::<f64>() {
+                                      settings.target_width.set(Some(px.clamp(320.0, 3840.0)));
+                                  }
+                              }
+                          />
+                          <span class="slider-value">"px"</span>
                       </div>
-                  })
-              }}
+                      <p class="hint">"Overrides scale. Leave empty for manual scale."</p>
+                  </div>
+
+                  <div>
+                      <label class="control-label" for="filename-input">"Filename template"</label>
+                      <input
+                          id="filename-input"
+                          class="filename-input"
+                          type="text"
+                          prop:value=move || settings.filename_template.get()
+                          on:input=move |ev| settings.filename_template.set(event_target_value(&ev))
+                          title="Placeholders: {scale}, {language}, {theme}, {timestamp}"
+                      />
+                      <p class="hint">"Preview: " {move || format!("{}.png", settings.expanded_filename())}</p>
+                  </div>
+              </div>
           </section>
       </aside>
   }

From a10353a224b4f515ffd68f4048aba43546c38426 Mon Sep 17 00:00:00 2001
From: Suradet Pratomsak <pharmacistsabot@gmail.com>
Date: Sat, 15 Aug 2026 09:26:03 +0700
Subject: [PATCH 2/3] feat(ui): redesign sidebar styling with grouped sections
 and refined controls

- Group sections are separated by hairlines with icon + uppercase title headers
- Fields switch from bottom-hairline to boxed hairline inputs with hover/focus states
- Scale selector becomes a joined segmented control with a filled active cell
- Raw checkboxes become rectangular switch toggles with a smooth 0.15s slide
- Canvas sliders arrange in a 2-column grid; thin custom scrollbar for the sidebar
- Active swatch uses an inset ring instead of a shifting 2px border
---
 style.css | 234 ++++++++++++++++++++++++++++++++++++++++++++----------
 1 file changed, 190 insertions(+), 44 deletions(-)

diff --git a/style.css b/style.css
index 54606a2..c2cd54d 100644
--- a/style.css
+++ b/style.css
@@ -390,11 +390,6 @@ body {
     cursor: wait;
 }
 
-.split-label {
-    color: var(--accent);
-    font-weight: 700;
-}
-
 .export-btn-secondary {
     background: var(--canvas-warm);
     color: var(--ink);
@@ -416,6 +411,57 @@ body {
     display: flex;
     flex-direction: column;
     gap: var(--sp-lg);
+    scrollbar-width: thin;
+    scrollbar-color: var(--hairline) transparent;
+}
+
+.controls::-webkit-scrollbar {
+    width: 8px;
+}
+
+.controls::-webkit-scrollbar-thumb {
+    background: var(--hairline);
+}
+
+.controls::-webkit-scrollbar-thumb:hover {
+    background: var(--stone);
+}
+
+.control-group + .control-group {
+    border-top: 1px solid var(--hairline);
+    padding-top: var(--sp-lg);
+}
+
+.section-header {
+    display: flex;
+    align-items: center;
+    gap: var(--sp-xs);
+    margin-bottom: var(--sp-sm);
+}
+
+.section-icon {
+    display: inline-flex;
+    align-items: center;
+    color: var(--stone);
+}
+
+.section-icon svg {
+    display: block;
+}
+
+.section-title {
+    margin: 0;
+    font-size: 11px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    color: var(--ink-soft);
+}
+
+.section-body {
+    display: flex;
+    flex-direction: column;
+    gap: var(--sp-md);
 }
 
 .control-label {
@@ -439,46 +485,55 @@ body {
     resize: vertical;
     background: var(--canvas-warm);
     color: var(--ink);
-    border: none;
-    border-bottom: 1px solid var(--hairline);
-    border-radius: 0;
-    padding: var(--sp-sm) 0;
+    border: 1px solid var(--hairline);
+    padding: var(--sp-sm);
     font-family: "JetBrains Mono", monospace;
     font-size: 12.5px;
     line-height: 1.5;
     tab-size: 4;
+    transition: border-color 0.15s ease, background 0.15s ease;
 }
 
-.code-input:focus {
-    border-bottom-color: var(--ink);
+.code-input:hover {
+    border-color: var(--stone);
 }
 
-.code-input:focus-visible {
+.code-input:focus {
     outline: none;
-    border-bottom-color: var(--ink);
+    border-color: var(--ink);
+    background: var(--canvas);
 }
 
 select,
-input[type="number"] {
+input[type="number"],
+.filename-input {
     width: 100%;
     background: var(--canvas-warm);
     color: var(--ink);
-    border: none;
-    border-bottom: 1px solid var(--hairline);
-    border-radius: 0;
-    padding: var(--sp-sm) 0;
+    border: 1px solid var(--hairline);
+    padding: 8px var(--sp-sm);
     font-size: 13px;
+    transition: border-color 0.15s ease, background 0.15s ease;
+}
+
+select:hover,
+input[type="number"]:hover,
+.filename-input:hover {
+    border-color: var(--stone);
 }
 
 select:focus,
-input:focus {
-    border-bottom-color: var(--ink);
+input[type="number"]:focus,
+.filename-input:focus {
+    border-color: var(--ink);
+    background: var(--canvas);
 }
 
 select:focus-visible,
-input:focus-visible {
+input[type="number"]:focus-visible,
+.filename-input:focus-visible {
     outline: none;
-    border-bottom-color: var(--ink);
+    border-color: var(--ink);
 }
 
 .hint {
@@ -497,6 +552,23 @@ input:focus-visible {
 }
 
 /* ---- Sliders ---- */
+.slider-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: var(--sp-md) var(--sp-lg);
+}
+
+.slider-cell {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    min-width: 0;
+}
+
+.slider-cell .control-label {
+    margin-bottom: 0;
+}
+
 .slider-row {
     display: flex;
     align-items: center;
@@ -505,9 +577,15 @@ input:focus-visible {
 
 .slider-row input[type="range"] {
     flex: 1;
+    min-width: 0;
     accent-color: var(--ink);
 }
 
+input[type="range"]:focus-visible {
+    outline: 2px solid var(--ink);
+    outline-offset: 2px;
+}
+
 .slider-value {
     min-width: 44px;
     text-align: right;
@@ -519,54 +597,104 @@ input:focus-visible {
 /* ---- Segmented scale control ---- */
 .segmented {
     display: flex;
-    gap: var(--sp-xs);
-    flex-wrap: wrap;
 }
 
 .seg {
     flex: 1 1 0;
     min-width: 0;
     background: var(--canvas-warm);
-    color: var(--ink);
-    border: none;
-    border-bottom: 1px solid var(--hairline);
-    border-radius: 0;
-    padding: var(--sp-sm) 0;
+    color: var(--ink-soft);
+    border: 1px solid var(--hairline);
+    border-right: 0;
+    padding: 8px 0;
     cursor: pointer;
     font-size: 13px;
-    transition: border-color 0.15s ease;
+    transition: background 0.15s ease, color 0.15s ease;
+}
+
+.seg:hover {
+    color: var(--ink);
 }
 
 .seg.active {
-    border-bottom-color: var(--ink);
+    background: var(--ink);
+    color: var(--on-primary);
+    border-color: var(--ink);
+}
+
+.seg:focus-visible {
+    outline: 2px solid var(--ink);
+    outline-offset: -2px;
 }
 
 .scale-custom {
     width: 68px;
     flex: 0 1 68px;
     min-width: 0;
+    text-align: center;
 }
 
 /* ---- Toggles ---- */
 .toggles {
-    display: flex;
-    gap: var(--sp-lg);
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: var(--sp-md);
 }
 
-.toggle {
-    display: flex;
-    gap: var(--sp-xs);
+.switch {
+    display: inline-flex;
     align-items: center;
+    gap: var(--sp-xs);
     cursor: pointer;
     font-size: 13px;
     color: var(--ink-soft);
+    user-select: none;
 }
 
-.toggle input {
-    accent-color: var(--ink);
-    width: 16px;
-    height: 16px;
-    cursor: pointer;
+.switch input {
+    position: absolute;
+    opacity: 0;
+    width: 0;
+    height: 0;
+}
+
+.switch-track {
+    position: relative;
+    flex: none;
+    width: 34px;
+    height: 20px;
+    background: var(--surface-elevated);
+    border: 1px solid var(--hairline);
+    transition: background 0.15s ease, border-color 0.15s ease;
+}
+
+.switch-thumb {
+    position: absolute;
+    top: 2px;
+    left: 2px;
+    width: 14px;
+    height: 14px;
+    background: var(--stone);
+    transition: transform 0.15s ease, background 0.15s ease;
+}
+
+.switch input:checked + .switch-track {
+    background: var(--ink);
+    border-color: var(--ink);
+}
+
+.switch input:checked + .switch-track .switch-thumb {
+    transform: translateX(14px);
+    background: var(--on-primary);
+}
+
+.switch input:focus-visible + .switch-track {
+    outline: 2px solid var(--ink);
+    outline-offset: 2px;
+}
+
+.switch:hover .switch-track {
+    border-color: var(--stone);
 }
 
 /* ---- Background swatches ---- */
@@ -590,17 +718,23 @@ input:focus-visible {
     border-color: var(--stone);
 }
 
+.swatch:focus-visible {
+    outline: 2px solid var(--ink);
+    outline-offset: 2px;
+}
+
 .swatch.active {
     border-color: var(--ink);
-    border-width: 2px;
+    box-shadow: inset 0 0 0 1px var(--canvas);
 }
 
 /* ---- Split-screen controls ---- */
 .split-controls {
-    margin-top: var(--sp-sm);
+    border-top: 1px solid var(--hairline);
+    padding-top: var(--sp-md);
     display: flex;
     flex-direction: column;
-    gap: var(--sp-sm);
+    gap: var(--sp-md);
 }
 
 /* ---- Preview ---- */
@@ -737,6 +871,14 @@ input:focus-visible {
         gap: var(--sp-md);
     }
 
+    .slider-grid {
+        grid-template-columns: 1fr;
+    }
+
+    .control-group + .control-group {
+        padding-top: var(--sp-md);
+    }
+
     .preview-area {
         padding: var(--sp-lg) var(--sp-md);
     }
@@ -766,4 +908,8 @@ input:focus-visible {
         padding: var(--sp-sm);
         gap: var(--sp-sm);
     }
+
+    .control-group + .control-group {
+        padding-top: var(--sp-sm);
+    }
 }

From b72b0df3584afa3dd8ce2e51c1d293cf6cb63364 Mon Sep 17 00:00:00 2001
From: Suradet Pratomsak <pharmacistsabot@gmail.com>
Date: Sat, 15 Aug 2026 09:26:31 +0700
Subject: [PATCH 3/3] docs: document redesigned sidebar component patterns

Update DESIGN.md to match the new grouped sidebar: section headers,
boxed hairline fields, joined segmented control, switch toggles, and
the inset-ring swatch active state.
---
 docs/DESIGN.md | 45 +++++++++++++++++++++++++++++++++------------
 1 file changed, 33 insertions(+), 12 deletions(-)

diff --git a/docs/DESIGN.md b/docs/DESIGN.md
index b0e9ddc..d4aa700 100644
--- a/docs/DESIGN.md
+++ b/docs/DESIGN.md
@@ -198,31 +198,52 @@ image's internal geometry:
 - Width: 320px (fixed via grid)
 - Background: `var(--canvas)`
 - Right border: `1px solid var(--hairline)`
-- Sections separated by `gap: var(--sp-lg)`
-- Labels: 11px uppercase, `var(--stone)`, letter-spacing 0.035em
+- Content scrolls internally; thin scrollbar in `var(--hairline)`
+- Controls grouped into five labeled sections: **Code**, **Appearance**,
+  **Canvas**, **Frame**, **Export**
+- Each group (`.control-group`) carries a header row: small lucide icon in
+  `var(--stone)` + 11px uppercase title in `var(--ink-soft)`,
+  letter-spacing 0.08em
+- Groups are separated by `1px solid var(--hairline)` on the top edge plus
+  `gap: var(--sp-lg)`
+- Field labels: 11px uppercase, `var(--stone)`, letter-spacing 0.035em
 
 ### Code Input (`.code-input`)
 
 - Background: `var(--canvas-warm)`
-- No border, bottom hairline only
-- Focus: bottom border becomes `var(--ink)`
-- No border-radius
+- Full hairline border, no border-radius
+- Hover: border becomes `var(--stone)`
+- Focus: border becomes `var(--ink)`, background lifts to `var(--canvas)`
 
 ### Selects and Inputs
 
-- Same pattern as code input
-- Background: `var(--canvas-warm)`
-- Bottom hairline, no border-radius
+- Same pattern as code input: boxed hairline field, no border-radius
+- Padding: `8px var(--sp-sm)`, font-size 13px
+- Hover: border becomes `var(--stone)`
+- Focus: border becomes `var(--ink)`, background lifts to `var(--canvas)`
 
 ### Segmented Control (`.segmented`)
 
-- Row of buttons with bottom hairline
-- Active state: bottom border becomes `var(--ink)`
+- Joined row of cells (shared 1px hairline borders, no gaps)
+- Active cell fills with `var(--ink)` and text becomes `var(--on-primary)`
+- Hover: text darkens to `var(--ink)`
+
+### Switch Toggle (`.switch`)
+
+- Rectangular track `34x20px` on `var(--surface-elevated)` with hairline
+  border, and a square `14x14px` thumb in `var(--stone)`
+- Checked: track fills with `var(--ink)`, thumb slides 14px and turns
+  `var(--on-primary)`
+- Slide transition: `transform 0.15s ease` (respects
+  `prefers-reduced-motion`)
+- Semantic checkbox kept in the DOM with `role="switch"`; focus ring on
+  the track
 
 ### Background Swatches (`.swatches`)
 
-- 6-column grid of square buttons
-- Active: 2px border in `var(--ink)`
+- 5-column grid of square buttons
+- Active: `var(--ink)` border plus a 1px inset ring in `var(--canvas)`
+  (no border-width shift)
 - Hover: border in `var(--stone)`
 
 ### Preview Area (`.preview-area`)