diff --git a/app/javascript/controllers/notification_tray_controller.js b/app/javascript/controllers/notification_tray_controller.js new file mode 100644 index 000000000..2f0cf5a06 --- /dev/null +++ b/app/javascript/controllers/notification_tray_controller.js @@ -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
catches every case that +// moves its bounds — window resize, sidebar drag-resize, sidebar +// collapse/expand — since all of those already reflow
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(); + } +} diff --git a/app/models/family/sync_complete_event.rb b/app/models/family/sync_complete_event.rb index 3949990d3..4747d3fd0 100644 --- a/app/models/family/sync_complete_event.rb +++ b/app/models/family/sync_complete_event.rb @@ -21,6 +21,21 @@ class Family::SyncCompleteEvent partial: "shared/notifications/sync_toast" ) + # The accounts page's own sync toolbar (refresh icon + "Cancel sync") is + # plain server-rendered HTML from whatever request last loaded the page, + # so without this it stays stuck showing "still syncing" — disabled icon, + # "Cancel sync" visible — indefinitely after the sync actually finishes, + # even while the toast above says otherwise. Replace it in the same + # broadcast so the two agree. Visitors not on the accounts page simply + # don't have #accounts-sync-controls in their DOM, so this no-ops for + # them, same as the sync-toast replace above. + family.broadcast_replace_to( + family, + target: "accounts-sync-controls", + partial: "accounts/sync_controls", + locals: { family: family } + ) + # Schedule recurring transaction pattern identification (debounced to run after all syncs complete) begin RecurringTransaction.identify_patterns_for(family) diff --git a/app/views/accounts/_sync_controls.html.erb b/app/views/accounts/_sync_controls.html.erb new file mode 100644 index 000000000..1a4ecfc55 --- /dev/null +++ b/app/views/accounts/_sync_controls.html.erb @@ -0,0 +1,31 @@ +<%# locals: (family:) %> + +<%# Rendered both from a normal request (accounts#index) and from + Family::SyncCompleteEvent's broadcast (no Current.family there) — take + family as an explicit local and use absolute i18n keys, not lazy `t(".")` + lookups, to behave the same in both contexts. %> +
+ <%= icon( + family.syncing? ? "loader-circle" : "refresh-cw", + as_button: true, + size: "sm", + href: sync_all_accounts_path, + disabled: family.syncing?, + class: (family.syncing? ? "animate-spin" : nil), + "aria-label": t("accounts.index.sync"), + frame: :_top + ) %> + + <% if (family_sync = family.syncs.visible.first) %> + <%= render DS::Button.new( + text: t("accounts.index.cancel_sync"), + variant: :ghost, + size: :sm, + icon: "circle-x", + href: cancel_sync_path(family_sync), + method: :post, + frame: :_top, + aria_label: t("accounts.index.cancel_sync") + ) %> + <% end %> +
diff --git a/app/views/accounts/index.html.erb b/app/views/accounts/index.html.erb index ee48dbcd6..5dff033c5 100644 --- a/app/views/accounts/index.html.erb +++ b/app/views/accounts/index.html.erb @@ -1,23 +1,6 @@ <%= content_for :page_title, t(".accounts") %> <%= content_for :page_actions do %> - <%= icon( - "refresh-cw", - as_button: true, - size: "sm", - href: sync_all_accounts_path, - disabled: Current.family.syncing?, - frame: :_top - ) %> - <% if (family_sync = Current.family.syncs.visible.first) %> - <%= button_to cancel_sync_path(family_sync), - method: :post, - class: "flex items-center gap-1 text-sm text-secondary hover:text-primary", - aria: { label: t(".cancel_sync") }, - data: { turbo_frame: :_top } do %> - <%= icon "circle-x", class: "w-4 h-4" %> - <%= t(".cancel_sync") %> - <% end %> - <% end %> + <%= render "accounts/sync_controls", family: Current.family %> <%= render DS::Link.new( text: t(".new_account"), href: new_account_path(return_to: accounts_path), diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb index 68bfa9cca..08dcd9b26 100644 --- a/app/views/layouts/application.html.erb +++ b/app/views/layouts/application.html.erb @@ -20,7 +20,7 @@ end %> <% expanded_sidebar_class = "w-full" %> <% collapsed_sidebar_class = "w-0 overflow-hidden" %> -<%= render "layouts/shared/htmldoc" do %> +<%= render "layouts/shared/htmldoc", sidebar_aware: true do %>
<% end %> <%# SHARED - Main content %> - <%= tag.main id: "main", class: class_names("grow overflow-y-auto px-3 lg:px-10 w-full mx-auto pb-[calc(5rem+env(safe-area-inset-bottom))] lg:pb-0"), data: { app_layout_target: "content", viewport_target: "content" } do %> + <%= tag.main id: "main", class: class_names("grow overflow-y-auto px-3 lg:px-10 w-full mx-auto pb-[calc(5rem+env(safe-area-inset-bottom))] lg:pb-0"), data: { app_layout_target: "content", viewport_target: "content", notification_tray_target: "main" } do %> <% unless intro_mode %>