Playing a move used to show two progress indicators at once: the thin
bar on the card and a sticky bottom toast (Loading / Uploading NN% /
Playing NN Hz) that also collided with the playback dock on phones.
Move every piece of live feedback into the card via a shared
createPlaybackReadout helper:
- spinner on the play button + "Uploading NN%" in the meta line while
the move streams to the daemon (the bare spinner never told you how
far along a big move was)
- top bar + "M:SS / M:SS" ticking in the meta line once the daemon
reports playback started
- scrollIntoView so a card far down a long folder is still visible
- progress bar can resume from a fraction so the folder's async
render() swapping the card mid-playback no longer restarts the fill
The wizard's review preview uses the same helper (it previously had
the bar but no upload feedback). The Hz readout is gone: Playback.liveHz
was a hardcoded 100, and the debug HUD already has a live rate.
Share: drop the sticky "Uploadi…
fix: repair topbar title, move-card, and toast layout on narrow phones
- topbar: compact "EXP" chip on phones (full "EXPERIMENTAL" from 480px up)
and let the title claim leftover width, so short titles no longer
truncate to a couple of characters
- move-card: single-line ellipsised meta and wrap the action row (share /
rename / delete) onto a second line when it would starve the title,
fixing the overlapping/multi-line breakage on owned moves
- toast: anchor above the bottom dock (via --toast-dock-offset set in
main.js) and clear the safe-area inset so it can't be clipped or land
on top of the playback sliders
- cta-dock: a bit more bottom padding so the Record button isn't flush
to the screen edge
- bump version label to exp 2026-07-30 r1 ux-layout-fixes
Co-authored-by: Cursor <cursoragent@cursor.com>
Port tfrere UX redesign onto compression base (mechanical replay)
RemiFabre
477cd2b
- Thibaut's one-sided files wholesale: views/components/* (13), welcome,
topbar, settings, main.js, index.html, style.css, db.js, mic-meter,
waveform, hands illustration, dev tooling (live-server, dev-local.js)
- 3-way merged (base 9e420d7): hf.js, state.js, util.js, folder.js,
folders.js, wizard.js — compression era (canonicalizeMotion, Opus
record/save, compress-&-republish banner, Ogg playback, direct share)
grafted into his redesigned structure
- Dropped wizardFromFolder in favor of his wizardOrigin (subsumes the
back-from-folder fix)
- Ported the Opus upload diff into views/components/upload-field.js
(transcodeToReachyAudio, real ext/mime instead of hardcoded .wav)
- SDK pin 1.8.0-rc1-main.dbe26af -> 1.8.4 everywhere (daemon runs 1.8.4;
his 1.8.1 pin skipped)
61/61 unit tests pass. Known follow-ups land next: rename-cleanup
hardening, wizard Back guard, EXPERIMENTAL chip, toast bar fix.
Banner on HomeView (dismissible) explaining the 2026-05-25 architecture
change. Per-folder audioOffsetMs slider in FolderView header — adds to
the global offset at play time so authors can salvage legacy datasets
recorded before the upload-then-play rollout.
Settings sheet: scrollable when taller than viewport (phone fix)
RemiFabre
1aed024
The sheet had no overflow rule, so rows past the bottom of a phone
screen were unreachable (e.g. the audio offset slider, last row).
Cap at 80svh and add overflow-y:auto with iOS momentum scrolling +
overscroll containment.
Trim widget: single bar with bracket handles + draggable playhead
RemiFabre
10a4351
Collapse the three stacked controls (scrub bar + start slider + end
slider) into one 52 px tall track with three explicit affordances:
- .trim-handle-start -- left bracket, drag to set trim start
- .trim-handle-end -- right bracket, drag to set trim end
- .trim-playhead-new -- vertical line with a circular knob on top,
drag to seek
Hit areas are 32 px wide on desktop and 44 px wide on coarse-pointer
devices (phones) via a media query. Clicking on the bar background
(track or region, not on a handle) seeks the playhead. All gestures
go through Pointer Events with setPointerCapture so they keep
tracking even when the pointer drifts outside the bar.
Visual: brackets are tinted with the primary color and have an
I-beam silhouette; the playhead is red with a contrasting outlined
knob. Hover + dragging states use brightness / shadow tweaks so the
'grab me' affordance is unmistakable.
Removes the now-redundant scrub bar + two range inputs. The TRI…
Wizard trim: scrubbable seek bar, set start/end buttons, alignment fix
RemiFabre
b782166
Three connected quality-of-life changes on the audio trim card:
1. Playhead alignment. The previous timeToX used the start
slider's getBoundingClientRect to derive x, but native range
thumbs vary in width across browsers (~13 px Chrome, ~16 px
Firefox, ~28 px iOS Safari) and their center at value=0 sits
half-a-thumb inside the input's content box. The red playhead
drifted vs the start/end thumbs because of that.
Fix: pin the slider thumb to a known 20 px on every engine via
CSS (custom -webkit/-moz-thumb at the trim card level only;
doesn't change other sliders in the app). Compute x as
scrub.padding + u * (scrub.width - 2 * thumbHW). The scrub bar's
horizontal padding equals half the thumb width, so the playhead
x maps exactly to a slider thumb center for the same time.
2. Scrubbable playhead. A thin clickable + draggable scrub bar
sits above the start/end sliders. Pointer down anywhere on it
seeks to that time; drag scrubs continuously; the h…
Fix flicker at the root: kill .step entrance animation + targeted DOM updates
RemiFabre
34b85eb
Prior attempts (r2 atomic swap, r3 RAF debounce) didn't help because
they didn't touch the actual mechanism. Every render creates a new
`<div class="step">`, and CSS had:
.step { animation: slide-up .32s cubic-bezier(.2,.8,.2,1) both; }
…which re-fires a 320ms fade-in-from-12px-below on every render. The
Community click triggers three full renders (click → list arrives →
move-count probes resolve), so the user perceives three stacked
slide-up animations as flicker. Atomic swap can't hide an animation
that's playing on the new nodes; RAF debounce doesn't collapse renders
separated by async network round-trips.
Changes:
- Remove `.step` entrance animation. Page swaps are now instant.
Animations should mark deliberate transitions, not data refreshes.
- robotsChanged → render() now only fires while on the gate view.
The signaling server pushes peerStatusChanged → list refreshes
every few seconds; previously this rebuilt the entire view tree
in the background even when the …
Initial clone from RemiFabre/marionette-js + experimental marker
RemiFabre
f8035c7
This Space (RemiFabre/marionette-experimental) is the staging ground
for the Phase 3 + 4 work in REFACTOR_PLAN.md — replacing the full-DOM
rebuild on every state change with lit-html surgical updates, which
will eliminate the flicker users have been reporting.
Production stays at RemiFabre/marionette-js. Once a refactor pass is
stable here, we'll merge back.
Surfaces that flag this as the experimental Space:
- README frontmatter title "Marionette (experimental)", warning
emoji 🧪, contrast yellow→red colors
- Browser tab title "Marionette (experimental) · Reachy Mini"
- Topbar chip "EXPERIMENTAL" rendered next to the brand whenever
APP_VERSION starts with "exp " — driven by lib/version.js so
code stays identical between the two Spaces
- Version label "exp 2026-05-18 r1" in the settings sheet
Everything else is a verbatim clone of the marionette-js source as
of commit 81c3108 (SDK pinned to upstream v1.7.2 via jsDelivr).
