mirror of
https://github.com/we-promise/sure.git
synced 2026-08-04 08:02:15 +00:00
5bb9d0881f
* 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.
50 lines
2.2 KiB
Plaintext
50 lines
2.2 KiB
Plaintext
<%# locals: (sidebar_aware: false) %>
|
|
<!DOCTYPE html>
|
|
|
|
<% theme = Current.user&.theme || "system" %>
|
|
|
|
<html
|
|
lang="en"
|
|
data-theme="<%= theme %>"
|
|
data-controller="theme viewport"
|
|
data-theme-user-preference-value="<%= Current.user&.theme || "system" %>"
|
|
class="h-[var(--app-height, 100dvh)] text-primary bg-surface overflow-hidden overscroll-none font-sans <%= @os %>">
|
|
<head>
|
|
<%= render "layouts/shared/head" %>
|
|
<%= yield :head %>
|
|
</head>
|
|
|
|
<body class="h-[var(--app-height)] overflow-hidden antialiased"<% if sidebar_aware %> data-controller="notification-tray"<% end %>>
|
|
<% if Rails.env.development? %>
|
|
<button hidden data-controller="hotkey" data-hotkey="t t /" data-action="theme#toggle"></button>
|
|
<% end %>
|
|
|
|
<% if Current.family %>
|
|
<%= turbo_stream_from Current.family %>
|
|
<% end %>
|
|
|
|
<%= turbo_frame_tag "modal" %>
|
|
<%= turbo_frame_tag "drawer" %>
|
|
|
|
<%# Custom overrides for browser's confirm API %>
|
|
<%= render "layouts/shared/confirm_dialog" %>
|
|
|
|
<%= render "impersonation_sessions/super_admin_bar" if Current.true_user&.super_admin? && show_super_admin_bar? %>
|
|
<%= render "impersonation_sessions/approval_bar" if Current.true_user&.impersonated_support_sessions&.initiated&.any? %>
|
|
|
|
<%= yield %>
|
|
|
|
<%# `left-1/2 -translate-x-1/2` centers on the viewport by default, correct
|
|
for every single-column layout. Layouts with a persistent sidebar
|
|
(settings, application) pass sidebar_aware: true, which wires up
|
|
notification_tray_controller.js to override `left` with the actual
|
|
content pane's center instead — see that controller for why a
|
|
ResizeObserver beats hand-rolled sidebar-width math, and for why it
|
|
also has to guard that inline style against turbo_refreshes_with's
|
|
morph reconciliation. %>
|
|
<div class="fixed z-50 top-6 md:top-4 left-1/2 -translate-x-1/2 w-full md:w-80 px-4 md:px-0 mx-auto md:mx-0 md:right-auto pt-[env(safe-area-inset-top)]"<% if sidebar_aware %> data-notification-tray-target="tray" data-action="turbo:before-morph-attribute->notification-tray#preserveStyle"<% end %>>
|
|
<%= render "layouts/shared/notification_tray" %>
|
|
</div>
|
|
</body>
|
|
</html>
|