Add notification inbox, toasts and alert scanner for orders, prints and filament
Deploy HickLab3D Dashboard / Deploy to production (push) Successful in 28s

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
This commit is contained in:
Hickmeister
2026-10-11 21:02:35 +01:00
co-authored by Claude Sonnet 5.5
parent 04be9802dc
commit ab1fdb961f
17 changed files with 805 additions and 1 deletions
@@ -0,0 +1,18 @@
<div class="relative" data-notifications data-feed-url="{{ route('notifications.index') }}" data-read-all-url="{{ route('notifications.read-all') }}" data-read-url="{{ route('notifications.read', '__id__') }}">
<button type="button" data-notifications-toggle class="relative grid size-10 place-items-center rounded-lg border border-slate-700 text-slate-300 transition hover:border-brand hover:text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white" aria-label="Notifications" aria-haspopup="true" aria-expanded="false">
<svg class="size-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 8a6 6 0 1 1 12 0c0 7 3 9 3 9H3s3-2 3-9"/><path d="M10.3 21a1.94 1.94 0 0 0 3.4 0"/></svg>
<span data-notifications-badge hidden class="absolute -right-1.5 -top-1.5 grid min-w-5 place-items-center rounded-full bg-brand px-1 text-[11px] font-bold leading-5 text-slate-950"></span>
</button>
<div data-notifications-panel hidden class="absolute right-0 z-40 mt-3 w-[min(24rem,calc(100vw-2rem))] overflow-hidden rounded-2xl border border-slate-700 bg-slate-900 shadow-2xl shadow-black/50">
<div class="flex items-center justify-between gap-3 border-b border-slate-800 px-4 py-3">
<h2 class="text-sm font-semibold">Notifications</h2>
<button type="button" data-notifications-read-all class="text-xs font-semibold text-brand hover:underline">Mark all read</button>
</div>
<ul data-notifications-list class="max-h-96 divide-y divide-slate-800 overflow-y-auto"></ul>
<p data-notifications-empty class="px-4 py-8 text-center text-sm text-slate-400">You are all caught up.</p>
<div data-notifications-desktop hidden class="border-t border-slate-800 px-4 py-3">
<button type="button" data-notifications-enable-desktop class="text-xs font-semibold text-brand hover:underline">Enable desktop notifications</button>
</div>
</div>
</div>
<div data-toast-region class="pointer-events-none fixed bottom-4 right-4 z-50 flex w-[min(22rem,calc(100vw-2rem))] flex-col gap-3" aria-live="polite" aria-atomic="false"></div>