Add per-app notifications and enforce hosting brand assets.

Wire local notification inbox in the topbar, sync ladillhosting logo and hosting launcher icon, and fix signed-out page branding. Co-authored-by: Cursor <cursoragent@cursor.com>
2026-06-06 18:27:39 +00:00
parent a0bcf93e53
commit 7fca4a351a
14 changed files with 437 additions and 46 deletions
@@ -5,6 +5,91 @@ import collapse from '@alpinejs/collapse';

 Alpine.plugin(collapse);

+Alpine.data('notificationDropdown', (config = {}) => ({
+    open: false,
+    loading: false,
+    notifications: [],
+    unreadCount: 0,
+    unreadUrl: config.unreadUrl || '/notifications/unread',
+    markReadUrl: config.markReadUrl || '/notifications/__ID__/read',
+    markAllReadUrl: config.markAllReadUrl || '/notifications/mark-all-read',
+    indexUrl: config.indexUrl || '/notifications',
+    csrfToken: config.csrfToken || document.querySelector('meta[name="csrf-token"]')?.content || '',
+
+    init() {
+        this.fetchUnread();
+        setInterval(() => this.fetchUnread(), 60000);
+    },
+
+    async fetchUnread() {
+        try {
+            const res = await fetch(this.unreadUrl, {
+                headers: { Accept: 'application/json', 'X-Requested-With': 'XMLHttpRequest' },
+            });
+            const data = await res.json();
+            this.notifications = data.notifications || [];
+            this.unreadCount = data.unread_count || 0;
+        } catch (e) {
+            console.error('Failed to fetch notifications', e);
+        }
+    },
+
+    toggle() {
+        this.open = !this.open;
+        if (this.open) {
+            this.loading = true;
+            this.fetchUnread().finally(() => { this.loading = false; });
+        }
+    },
+
+    async markRead(id) {
+        const url = this.markReadUrl.replace('__ID__', id);
+        try {
+            await fetch(url, {
+                method: 'POST',
+                headers: {
+                    Accept: 'application/json',
+                    'Content-Type': 'application/json',
+                    'X-CSRF-TOKEN': this.csrfToken,
+                    'X-Requested-With': 'XMLHttpRequest',
+                },
+            });
+            this.notifications = this.notifications.filter(n => n.id !== id);
+            this.unreadCount = Math.max(0, this.unreadCount - 1);
+        } catch (e) {
+            console.error('Failed to mark notification as read', e);
+        }
+    },
+
+    async markAllRead() {
+        try {
+            await fetch(this.markAllReadUrl, {
+                method: 'POST',
+                headers: {
+                    Accept: 'application/json',
+                    'Content-Type': 'application/json',
+                    'X-CSRF-TOKEN': this.csrfToken,
+                    'X-Requested-With': 'XMLHttpRequest',
+                },
+            });
+            this.notifications = [];
+            this.unreadCount = 0;
+        } catch (e) {
+            console.error('Failed to mark all notifications as read', e);
+        }
+    },
+
+    getIconBg(icon) {
+        const map = { domain: 'bg-emerald-50', hosting: 'bg-violet-50', email: 'bg-pink-50', billing: 'bg-amber-50', success: 'bg-green-50' };
+        return map[icon] || 'bg-slate-100';
+    },
+
+    getIconColor(icon) {
+        const map = { domain: 'text-emerald-600', hosting: 'text-violet-600', email: 'text-pink-600', billing: 'text-amber-600', success: 'text-green-600' };
+        return map[icon] || 'text-slate-500';
+    },
+}));
+
 // Afia — Ladill in-app AI assistant (slide-over chat). Opened via the topbar AI button
 // which dispatches a window 'afia-open' event. Greeting/suggestions are passed from Blade.
 Alpine.data('afia', (config = {}) => ({