UI/UX improvements: reorderable sidebar, richer search, partial paste, settings & theme system

[mindaugaskasp]

A batch of UI/UX improvements. Every commit passes npm run check (lint + style-token guard + 275 tests) and a full npm run build.

Menu / toolbar

• Mermaid Expand fixed — it was opening behind the still-open snippet editor (siblings at the same stacking level). The editor now closes first and the viewer renders in a full-window layer above every dialog.
• Edit → AutoFill suppressed on macOS (the AppKit-injected item, handled like the existing Dictation/Emoji suppression). Needs a quick verify on a real Mac — harmless if the key is ignored.
• Help → Keyboard Shortcuts — a grouped dialog listing every binding for the host OS, backed by a shared utils/shortcuts.js (also feeds the floating hint bar).
• Tools grouped per format: Base64 / JSON / XML / SQL / Text Encryption (both the native menu and the in-app bar).
• Removed the redundant "Diff Bro" toolbar title.

Diff & paste

• Search gains match-case and whole-word toggles, plus safety-limited regex (utils/searchRegex.js refuses over-long / catastrophic-backtracking patterns before Monaco ever runs them).
• Partial paste — paste text on one side and drop/choose a real file on the other, then Compare. Paste panes capture their own drops; the window-level diff drop stands down in paste mode.
• Compare/Cancel re-centered under the panes.

Sidebar, settings & sharing

• Reorderable sections (Saved / External / Snippets) via up/down controls in a shared SectionHeader; each section extracted into its own component.
• Drag-reorderable saved-diff categories, reconciled against the categories that exist.
• New plaintext settings.json store (stores/settingsStore.js): section order, shelf order, shortcut-bar visibility, and user-raisable comparison-file / snippet size limits with safe defaults and hard ceilings. Main reads it fresh to enforce the large-file threshold; the Settings dialog gains an Interface section.
• Categories are local-only — never offered or sent in the share flow.

Design system

• Color palette split into styles/themes.css; tokens.css keeps only the theme-independent scale, so a future color theme can't disturb structure/alignment.
• App-wide .section-actions spacing + rhythm tokens, so a section's buttons (+ New category, Import, + New snippet) can't drift out of alignment again.

Notes

• UI changes are being validated in the Docker env (.vue files are verified there, not in unit tests) — screenshots to follow in the thread.
• Shelf drag-reorder is implemented for saved-diff categories (the meaningful reorderable unit); Snippets/External have only fixed Favorites/All shelves.

🤖 Generated with Claude Code

---

Generated by Claude Code

[mindaugaskasp]

UI/UX validation

The noVNC/Electron route isn't reachable from CI here (the Docker registry and the Electron binary download are both blocked), so I validated the renderer — where all these changes live — by loading the production build in headless Chromium (Playwright) with a stubbed window.api, driving the real UI, and inspecting each screen. npm run check (lint + style-token guard + 275 tests) and npm run build both pass.

Verified working, no console errors (only a harmless /favicon.ico 404 from the static test server):

• No "Diff Bro" title; toolbar options right-aligned; Help menu present.
• Sidebar: section move ▲/▼ (first section's ▲ / last section's ▼ correctly disabled), category drag grip, + New category / Import / + New snippet no longer glued to their headers. Confirmed reordering actually changes and persists the order (Saved, External, Snippets → External, Saved, Snippets).
• Search: Aa (match case), [W] (whole word), .* (regex) toggles per side, match count, jump-to-match.
• Partial paste: per-side ORIGINAL/CHANGED headers with load file…; Compare/Cancel centered under the panes.
• Tools flyouts (Base64 → Encode / Decode · Ctrl+Shift+B, etc.).
• Help → Keyboard Shortcuts dialog grouped by File/Edit/View/Tools with host-OS bindings.
• Settings → Interface (shortcut-bar toggle, max comparison file, max snippet size).
• Light + dark themes both render cleanly (themes.css split).

One extra bug found and fixed during validation

The Mermaid Expand viewer opened but the diagram was invisible. Root cause: the zoom/pan .transform wrapper shrink-wrapped to 0×0, collapsing the diagram (this was the second half of the original "Expand shows nothing" report — the first half was the editor covering the viewer). Gave .transform a definite box; the diagram now fits and scales. Pushed in 3015da3 and re-verified rendering in Chromium.

---

Generated by Claude Code