refactor(ui): unify notice + toast styling, polish inline notices

Notices used to be styled only inside the toast stack — every inline
.notice on the login page, auth pages and admin edit screens fell back
to browser defaults and looked unstyled. The Stripe-style toast redesign
(icon pill + neutral text + soft card surface) now lives on the base
.notice rule, and .app-toast-stack adds the slide-in animation, soft
shadow, dismiss button and progress bar on top.

Inline notices auto-render the variant icon via a ::before pseudo using
the Bootstrap Icons codepoints, so all 30+ existing call sites get the
new look without markup changes. Toasts opt out of ::before via
:has(> .notice-icon) and keep their explicit icon span.

The previous app-flash.phtml partial is folded into app-toast-stack.phtml
(both create the same .app-toast-stack container — having both mounted
made two stacks fight for the same fixed corner). default/login/page
templates now mount the unified partial; the architecture contract is
updated to match.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-04-25 19:32:09 +02:00
parent 2429588256
commit 4890a280fb
8 changed files with 197 additions and 132 deletions

View File

@@ -337,7 +337,6 @@ $componentPageConfig['moduleRuntimeComponents'] = $moduleRuntimeComponents;
<script src="<?php e(assetVersion('vendor/fslightbox/fslightbox.js')); ?>"></script>
<?php require __DIR__ . '/partials/app-confirm-dialog.phtml'; ?>
<?php require __DIR__ . '/partials/app-toast-stack.phtml'; ?>
<?php if ($isLoggedIn): ?>
<?php require __DIR__ . '/partials/app-search-dialog.phtml'; ?>
<?php require __DIR__ . '/partials/app-session-warning-dialog.phtml'; ?>
@@ -360,7 +359,7 @@ $componentPageConfig['moduleRuntimeComponents'] = $moduleRuntimeComponents;
?>
<?php endforeach; ?>
<script type="application/json" id="page-config-app-components"><?php gridJsonForJs($componentPageConfig); ?></script>
<?php require __DIR__ . '/partials/app-flash.phtml'; ?>
<?php require __DIR__ . '/partials/app-toast-stack.phtml'; ?>
<script type="module" src="<?php e(assetVersion('js/app-init.js')); ?>"></script>
</body>