feat(ui): UI redesign — top bar, sliders, timeline, export modal, compare modes by RichardBray · Pull Request #19 · Orva-Studio/hance

RichardBray · 2026-04-20T08:41:13Z

Summary

Top bar restructure (filename left, Save/SaveAsNew/Export right), SaveBar with "Saved ✓" clean state, thin-line sliders, CSS token scale for radius/padding.
Adaptive timeline ruler + transport row with precise HH:MM:SS:FF timecode.
Expanded LookInfoModal (chips for keywords/characteristics); new ExportModal with codec (H.264/H.265/ProRes 422), quality→CRF, and output path; server wires through encoderSettings to runGpuExport.
View mode toolbar with split-compare and reference-compare overlays using CSS clip-path (WebGPU renderer unchanged).

Test Plan

New tests pass: SaveBar, timelineTicks, ExportModal
Load video → top bar shows filename/Save/Saved ✓/Export; sliders are hairline; timeline shows adaptive ruler + centered timecode
Export modal → H.264/H.265/ProRes switches extension; Quality disables for ProRes; export completes
Split mode → divider drag syncs original/processed; Reference mode → upload letterboxed image
Right-click look → Info modal shows description + chip metadata

🤖 Generated with Claude Code

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

RichardBray · 2026-04-20T10:53:04Z

+  const overlayStyle: React.CSSProperties = {
+    position: "absolute",
+    left: canvasRect.left,
+    top: canvasRect.top,
+    width: canvasRect.width,
+    height: canvasRect.height,
+    clipPath: `inset(0 0 0 ${position * 100}%)`,
+    pointerEvents: "none",
+    objectFit: mode === "reference" ? "contain" : "fill",
+    background: mode === "reference" ? "#000" : "transparent",
+    zIndex: 15,
+  };
+
+  const dividerStyle: React.CSSProperties = {
+    position: "absolute",
+    left: canvasRect.left + canvasRect.width * position,
+    top: canvasRect.top,
+    height: canvasRect.height,
+    transform: "translateX(-1px)",
+    zIndex: 20,
+  };


what is the benefit of writing the css here instead of using Tailwind?

These styles depend on runtime values from canvasRect (left/top/width/height from getBoundingClientRect), so they can not be static Tailwind classes. Inline style is the straightforward way to apply dynamic pixel values.

RichardBray · 2026-04-20T10:53:33Z

+  canvasRect: { left: number; top: number; width: number; height: number } | null;
+}
+
+export function CompareOverlay({ mode, position, onPositionChange, overlaySrc, isVideo, videoRef, canvasRect }: Props) {


what does this component do?

It renders the A/B compare overlay used by the two compare view modes: in split mode it draws the shader-processed video on top of the original and clips it with a draggable vertical divider; in reference mode it overlays a user-uploaded reference image the same way. It also keeps a second <video> element time-synced with the main preview so the split stays in step during playback.

RichardBray · 2026-04-20T10:54:36Z

      <div
-        className="bg-zinc-800 border border-zinc-700 rounded-xl p-5 max-w-sm w-full mx-4 shadow-2xl"
+        className="bg-zinc-800 border border-zinc-700 max-w-sm w-full mx-4 shadow-2xl"
+        style={{ borderRadius: "var(--radius-md)", padding: "var(--pad-modal)" }}


why are inline styles used here?

These inline styles are just applying shared design tokens defined as CSS custom properties (--radius-md, --pad-modal, --pad-btn, etc.) so all modals stay visually consistent. Tailwind v4 can reference vars via arbitrary values (rounded-[var(--radius-md)]), but inline style={{ borderRadius: "var(--radius-md)" }} reads a bit cleaner for token usage. Happy to switch to the arbitrary-value form if you prefer a single styling approach.

RichardBray · 2026-04-20T10:55:40Z

+    <div className="fixed inset-0 bg-black/60 flex items-center justify-center z-50" onClick={onCancel}>
+      <div
+        className="bg-zinc-800 border border-zinc-700 max-w-md w-full mx-4 shadow-2xl"
+        style={{ borderRadius: "var(--radius-md)", padding: "var(--pad-modal)" }}


why are inlines styles used here and where else are they used? why wasn't tailwind used?

Same reason as the DeleteLookModal thread: these are pulling shared design tokens from CSS custom properties (--radius-md, --radius-sm, --pad-modal) so spacing/radius is centralized. The same pattern appears in the other modals (DeleteLookModal, NewLookModal, LookInfoModal) and a few spots in App.tsx. Let me know if you want them converted to rounded-[var(--radius-md)]-style Tailwind arbitrary values — happy to normalize.

RichardBray · 2026-04-20T10:56:36Z


+      <div className="flex items-center justify-between px-3 py-2 border-t border-zinc-800 text-[11px] text-zinc-500">
+        <span>Hance</span>
+        <span>v0.2.0</span>


would it make sense to pull this from the package.json instead of hardcoding it?

Good catch — done. Now reads pkg.version from the root package.json instead of the hardcoded string.

RichardBray · 2026-04-20T10:57:37Z

+          aria-label={playing ? "Pause" : "Play"}
+        >
+          {playing ? (
+            <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">


should svg icons be their own component?

Fair — could extract them into an Icons.tsx entry (we already have ImportIcon/NoLookIcon/PlusIcon there). Left inline here because play/pause are only used by the transport and toggling between them is tightly coupled to the playing state in this component. Happy to lift them out if you would rather keep all SVGs centralized.

RichardBray · 2026-04-20T10:59:45Z

+      setCanvasRect({ left: r.left, top: r.top, width: r.width, height: r.height });
+    }
+    update();
+    const ro = new ResizeObserver(update);


what is the resize observer used here for?

The preview canvas can change size/position (window resize, sidebar changes, the app layout reflowing). The overlay components (CompareOverlay, reference-image picker, etc.) are absolutely positioned against the viewport, so they need the canvass current bounding rect to stay aligned. ResizeObserver + scroll/resize listeners keep canvasRect` in sync with those changes.

RichardBray · 2026-04-20T11:00:21Z

+              const i = document.createElement("input");
+              i.type = "file"; i.accept = "image/*";
+              i.onchange = () => {
+                const f = i.files?.[0]; if (!f) return;
+                setReferenceImage(URL.createObjectURL(f));
+              };
+              i.click();


put this in a named function, or do you think it is best here?

Fair — inline onClick is a bit dense. Could pull it into a named handleChooseReferenceImage handler. Left it inline because it is only referenced from this one button and the logic is short (open a file picker and set state), but I am happy to extract it if you would prefer.

…ments Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

Replace inline style={{ borderRadius/padding }} CSS var references with Tailwind utility classes (rounded-sm, p-btn, p-modal, etc.) and move padding definitions into a @layer components block. Also wire sidebar version label to package.json and extract reference image picker into a named function. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

…nvas API - Remove /api/look-thumbnail endpoint and server-side FFmpeg thumbnail pipeline - Add client-side lookThumbnails module using Canvas for look previews - Replace reference.jpg with smaller reference.webp asset - Add loading spinner fallback for missing thumbnails - Copy assets directory in UI build script - Preserve existing thumbnail URLs across look list refreshes

… artifacts Restrict /api/export outputName to a basename matching [A-Za-z0-9._-]+\.(mp4|mov), closing a path-traversal gap where names containing `..` or NUL bytes could escape the export tempdir. Also remove committed .superpowers/brainstorm tool output and ignore the directory going forward. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

…rounded corners

Richard Oliver Bray and others added 17 commits April 19, 2026 21:13

docs(ui): add UI redesign spec

d8a4528

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

docs(ui): add view mode switcher to UI redesign spec

86c0167

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

docs(ui): add UI redesign implementation plan

3a77445

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

feat(ui): add radius/padding/slider CSS tokens

bbee4c0

feat(ui): restyle sliders as thin-line (drop blue fill)

b3bd0e2

feat(ui): SaveBar always visible with Saved ✓ clean state

7b6146a

feat(ui): relocate Save bar into top bar; filename left, empty center

058200a

feat(ui): adaptive timeline tick computation

3493c57

feat(ui): timeline transport row + adaptive ruler

a90972e

feat(ui): expand LookInfoModal with description and chip metadata

6a83900

feat(ui): apply new radius/padding tokens to modals and context menu

ef1e4bf

feat(ui): ExportModal with codec/quality/output path

fedc981

feat(ui,server): wire ExportModal with codec/crf/output path

7951358

feat(ui): add ViewModeToolbar and view mode state

9d5f0a1

feat(ui): split-compare and reference-compare view modes

d771dfe

feat(ui): add sidebar footer with app name and version

f9f33cd

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

fix(ui): show shader on left, original on right in compare modes

9d26412

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

RichardBray commented Apr 20, 2026

View reviewed changes

Richard Oliver Bray and others added 5 commits April 20, 2026 12:20

feat(ui): add undo/redo buttons to toolbar and reset button to adjust…

ad16875

…ments Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

feat(ui): redesign timeline transport bar with skip controls

6b020d0

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

fix(ui): extend timeline minor ticks across full duration

e49c49b

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

fix(ui): remove rounded corners from canvas element

461a2a4

Richard Oliver Bray and others added 5 commits April 21, 2026 15:33

feat(ui): style timeline clip bar with amber gradient and fixed height

7a1bbdf

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

style(ui): adjust timeline clip bar to full-width cyan gradient with …

340eeca

…rounded corners

style(ui): switch accent to cyan and refine interactive element styles

92155c0

Conversation

RichardBray commented Apr 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Test Plan

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

RichardBray commented Apr 20, 2026 •

edited

Loading