Skip to content

Import-theme modal: paste editor re-parses on every keystroke + layout overflows on real tweakcn exports #91

Description

@BunsDev

Symptom

The new tweakcn import modal (app/src/settings_view/import_theme_modal.rs) is sluggish and visually broken when a user pastes a real tweakcn export.

Visible in this screenshot during smoke: the paste box renders the CSS but the modal extends well beyond the viewport and typing/scrolling lags.

A real tweakcn export is ~80–100 lines, including @import "tailwindcss";, @custom-variant dark, font/radius/shadow vars, chart colors, sidebar primary/accent/border/ring — far more than the ~40-line synthetic fixture (crates/integration/tests/data/tweakcn_sample.css) the modal was sized against.

Root causes

1. No debounce on parse. handle_css_editor_event in app/src/settings_view/import_theme_modal.rs invokes on_css_changed on every EditorEvent::Edited:

```rust
fn handle_css_editor_event(&mut self, event: &EditorEvent, ctx: &mut ViewContext) {
if let EditorEvent::Edited(_) = event {
let text = self.css_editor.read(ctx, |editor, app| editor.buffer_text(app));
self.on_css_changed(text, ctx); // ← runs parse_blocks() on every keystroke / paste byte
}
}
```

For a paste, this fires once with the full content — but on subsequent edits (e.g., the user adjusting the slug, then editing the CSS again), every character triggers a full re-parse + UI notify.

2. Layout overflow. The modal's outer container doesn't appear to constrain the CSS editor's height or wrap it in a scroll view. Long content extends the modal past viewport bounds (visible in the screenshot — modal stretches to the bottom of the screen with no scroll affordance).

Suggested fix

  • Debounce parsing. Add a ~200 ms timer (matching the spec at docs/superpowers/specs/2026-05-20-theme-customization-tweakcn-design.md:221). Either schedule via ctx (warpui has a timer pattern) or use the existing debounce helper if there is one.
  • Constrain the CSS editor's height to e.g. 12–16 lines and wrap in a vertical scroll view. The single-line name input is fine as-is.
  • Reduce per-render cost in render() — currently every parse result rebuilds the preview row. If preview generation is heavy, cache it.

Related

Branch

Modal landed on castcodes/theme-tweakcn-impl commit d50ac78d.

Metadata

Metadata

Labels

No labels
No labels

Type

No type
No fields configured for issues without a type.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions