fix: expand tabs on paste to match tab-width setting

crates/app/src/controls.rs

@@ -8,7 +8,6 @@ use wasm_bindgen::JsCast;
 use crate::state::{Settings, SAMPLE_CODE};
 
 const SCALE_PRESETS: [f64; 4] = [1.0, 2.0, 4.0, 8.0];
-const TAB_WIDTH_PRESETS: [usize; 3] = [2, 4, 8];
 
 /// CSS value used to paint a background swatch button.
 fn background_css(background: &Background) -> String {
@@ -134,11 +133,10 @@ pub fn Controls(settings: Settings) -> impl IntoView {
                           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 spaces = " ".repeat(settings.tab_width.get());
-                          let new_value = format!("{}{}{}", &value[..start], spaces, &value[end..]);
+                          let new_value = format!("{}    {}", &value[..start], &value[end..]);
                           settings.code.set(new_value.clone());
                           textarea.set_value(&new_value);
-                          let pos = (start + spaces.len()) as u32;
+                          let pos = (start + 4) as u32;
                           let _ = textarea.set_selection_range(pos, pos);
                       }
                   }
@@ -167,11 +165,10 @@ pub fn Controls(settings: Settings) -> impl IntoView {
                                       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 spaces = " ".repeat(settings.tab_width.get());
-                                      let new_value = format!("{}{}{}", &value[..start], spaces, &value[end..]);
+                                      let new_value = format!("{}    {}", &value[..start], &value[end..]);
                                       code_signal.set(new_value.clone());
                                       textarea.set_value(&new_value);
-                                      let pos = (start + spaces.len()) as u32;
+                                      let pos = (start + 4) as u32;
                                       let _ = textarea.set_selection_range(pos, pos);
                                   }
                               }
@@ -242,28 +239,6 @@ pub fn Controls(settings: Settings) -> impl IntoView {
               <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="tab-width-label">"Tab width"</label>
-              <div class="segmented" role="radiogroup" aria-labelledby="tab-width-label">
-                  {TAB_WIDTH_PRESETS
-                      .into_iter()
-                      .map(|preset| {
-                          view! {
-                              <button
-                                  class="seg"
-                                  class:active=move || settings.tab_width.get() == preset
-                                  role="radio"
-                                  aria-checked=move || settings.tab_width.get() == preset
-                                  on:click=move |_| settings.tab_width.set(preset)
-                              >
-                                  {format!("{preset}")}
-                              </button>
-                          }
-                      })
-                      .collect_view()}
-              </div>
-          </section>
-
           <section>
               <label class="control-label" id="export-scale-label">"Export scale"</label>
               <div class="segmented" role="radiogroup" aria-labelledby="export-scale-label">

crates/app/src/preview.rs

@@ -58,7 +58,7 @@ pub fn Preview(settings: Settings) -> impl IntoView {
       if generation.get_untracked() != my_generation {
         return; // superseded by a newer draw
       }
-      let Some(canvas) = canvas_ref.get() else {
+      let Some(canvas) = canvas_ref.get_untracked() else {
         return;
       };
 

crates/app/src/state.rs

@@ -91,7 +91,6 @@ pub struct Settings {
   pub background: RwSignal<Background>,
   pub ui_theme: RwSignal<UiTheme>,
   pub line_height: RwSignal<f64>,
-  pub tab_width: RwSignal<usize>,
   pub filename_template: RwSignal<String>,
   /// When `Some(px)`, export width is clamped to this value and scale is
   /// computed automatically. `None` means use the manual scale slider.
@@ -123,7 +122,6 @@ impl Settings {
       background: RwSignal::new(Background::default()),
       ui_theme: RwSignal::new(initial_ui_theme),
       line_height: RwSignal::new(1.5),
-      tab_width: RwSignal::new(4),
       filename_template: RwSignal::new("codeframe-{scale}x".to_string()),
       target_width: RwSignal::new(None),
       split_enabled: RwSignal::new(false),
@@ -150,7 +148,7 @@ impl Settings {
       font_size: self.font_size.get(),
       line_height: self.line_height.get(),
       corner_radius: self.corner_radius.get(),
-      tab_width: self.tab_width.get(),
+      tab_width: 4,
     }
   }