QT/sure
1
0
Fork 0
mirror of https://github.com/we-promise/sure.git synced 2026-08-04 08:02:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(accounts): make the sync toolbar and toast agree, fix toast overlap (#2813)

Browse Source 
* fix(accounts): make the sync toolbar and toast agree, fix toast overlap

The Accounts page's own sync toolbar (refresh icon, "Cancel sync") and the
global sync-complete toast were three inconsistently-styled, disconnected
pieces of UI representing one action, and the toast overlapped the page's
own header instead of sitting near it.

- "Cancel sync" was hand-rolled markup instead of a DS::Button, unlike its
  sibling refresh icon right next to it — now both are DS::Button (:ghost).
- The refresh icon just went `disabled` with no visible "working" state —
  now shows a spinning loader-circle while a family sync is in progress,
  matching the pattern already used in provider_sync_summary.html.erb.
- The toolbar was plain server-rendered HTML with no way to know a sync
  finished, so it stayed stuck showing "still syncing" indefinitely next to
  a toast now saying otherwise. Family::SyncCompleteEvent now broadcasts a
  second replace target for the toolbar alongside the existing toast
  replace, so both resolve together.
- The notification tray was a <body>-level fixed overlay centered on the
  full viewport, but every layout that renders it has a sidebar of some
  kind — so it never actually centered on the visible content pane, and
  landed on top of the settings-layout header. It now renders in-flow at
  the top of each layout's own content region (opt-in via
  notification_tray_inline, since the simpler single-column layouts don't
  have this mismatch and are unaffected).
- Added the Catalan sync_toast/cancel_sync strings that were missing
  entirely, which is why the toast/toolbar showed English text on an
  otherwise-Catalan page.

Verified live in a real browser via a new system test covering the idle,
syncing, and cancel-flash states, plus a model test on the new broadcast
target.

* fix(accounts): keep the tray a floating overlay, sidebar-aware instead

Codex on this PR: with the tray as first-child-of-scrollable-main, a
notification delivered while scrolled down is inserted above the
viewport and stays unseen — breaking the sync toast's manual-refresh
path specifically, since sync_toast_controller.js suppresses
auto-refresh while a form is focused and relies on the toast being
visible to offer that manual refresh.

Reverts the tray to a position: fixed overlay for every layout (so it
can't be scrolled out of view), and fixes the actual bug that made it
overlap the accounts toolbar in the first place — a ResizeObserver on
<main> centers it on the real content pane instead of the viewport,
for the two layouts with a sidebar (application, settings passed via
sidebar_aware:). The five single-column layouts are untouched; for
those, viewport-center already is content-pane-center.

One trap worth flagging: this app renders turbo_refreshes_with
method: :morph, and idiomorph resets any inline style a client script
set that isn't in the freshly-fetched HTML — including the JS-set
`left`. data-turbo-permanent looked like the fix but isn't: it invokes
idiomorph's node-identity matching (same id preserved across ANY
morphed page), which broke navigation once the id existed on
structurally different layouts (app vs settings) — a real, reproduced
bug, caught by the system test before it shipped. Went with the
narrower turbo:before-morph-attribute event instead, which blocks only
the `style` attribute on this one element, with no node-identity
system involved.

Rewrote the system test's positioning assertion to match: it now
asserts the tray centers on <main> rather than sitting above the page
header, since a fixed overlay was never going to satisfy the latter by
construction.

Verified: full bin/rails test (6023 runs, 0 failures), rubocop, erb_lint,
brakeman (0 warnings) all clean. Live-verified in a browser across both
sidebar-aware layouts and a simple layout, including the full
cancel-sync -> morph -> re-render cycle.

* fix(accounts): use declarative Stimulus action for morph-attribute guard

Replace the manual addEventListener/removeEventListener pair for
turbo:before-morph-attribute with a data-action, per the repo's
declarative-actions convention. Same element, same listener — just no
manual lifecycle management.
This commit is contained in:
Guillem Arias Fauste
2026-07-30 02:57:16 +02:00
committed by Juan José Mata
parent e2343fc9d2
commit 5bb9d0881f
12 changed files with 198 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
app/javascript/controllers/notification_tray_controller.js Normal file
View File

@@ -0,0 +1,40 @@
import { Controller } from "@hotwired/stimulus";
// The tray is `position: fixed` with `left: 50%` (viewport-center) by
// default, which is correct for every single-column layout. Layouts with a
// sidebar (app, settings) opt in here so the tray centers on the actual
// content pane instead. A ResizeObserver on <main> catches every case that
// moves its bounds — window resize, sidebar drag-resize, sidebar
// collapse/expand — since all of those already reflow <main> natively; no
// cooperation needed from the sidebar controllers themselves.
export default class extends Controller {
static targets = ["tray", "main"];
connect() {
this.resizeObserver = new ResizeObserver(() => this.reposition());
this.resizeObserver.observe(this.mainTarget);
this.reposition();
}
disconnect() {
this.resizeObserver?.disconnect();
}
reposition() {
const rect = this.mainTarget.getBoundingClientRect();
this.trayTarget.style.left = `${rect.left + rect.width / 2}px`;
}
// turbo_refreshes_with(method: :morph) is enabled app-wide
// (_head.html.erb), and idiomorph resets any inline style a client
// script set that isn't present in the freshly-fetched server HTML —
// which `left` always is. `data-turbo-permanent` looked like the fix,
// but it invokes idiomorph's node-identity matching (same id preserved
// across ANY morphed page), which misbehaves once the id also exists
// on structurally different layouts (app vs settings). Wiring this
// narrower per-attribute event as a declarative action instead blocks
// only `style` on this one element — no node-identity system involved.
preserveStyle(event) {
if (event.detail.attributeName === "style") event.preventDefault();
}
}