Add wallet balance widget to the profile menu (after Billing)

Wallet balance peek rendered as a menu row directly under Billing, backed by a /wallet/balance endpoint (BillingClient) and guarded by Route::has. Also opens Afia via a direct window event for reliability. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-06-23 12:26:10 +00:00
parent ec48ab6b33
commit d6b4a9c853
13 changed files with 200 additions and 7 deletions
@@ -1,8 +1,10 @@
 import './bootstrap';

 import { registerLadillConfirmStore, registerLadillModalHelpers } from './ladill-modals';
+import { registerLadillSearchShortcut } from './ladill-search-shortcut';

 registerLadillModalHelpers();
+registerLadillSearchShortcut();


 import Alpine from 'alpinejs';
@@ -300,6 +302,26 @@ Alpine.data('topbarSearch', (config = {}) => ({
    },
 }));

+
+// Wallet balance peek for the avatar dropdown.
+Alpine.data('walletWidget', (config = {}) => ({
+    display: '…',
+    async load() {
+        if (! config.url) {
+            this.display = 'View wallet';
+
+            return;
+        }
+        try {
+            const res = await fetch(config.url, { headers: { Accept: 'application/json', 'X-Requested-With': 'XMLHttpRequest' } });
+            const data = await res.json();
+            this.display = data.available ? data.formatted : 'View wallet';
+        } catch (e) {
+            this.display = 'View wallet';
+        }
+    },
+}));
+
 window.Alpine = Alpine;
 registerLadillConfirmStore(Alpine);

@@ -0,0 +1,97 @@
+function isEditableTarget(element) {
+    if (!(element instanceof HTMLElement)) {
+        return false;
+    }
+
+    const tag = element.tagName;
+
+    if (tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT') {
+        return true;
+    }
+
+    return element.isContentEditable;
+}
+
+function isVisibleInput(input) {
+    if (!(input instanceof HTMLElement)) {
+        return false;
+    }
+
+    const style = window.getComputedStyle(input);
+
+    return style.display !== 'none'
+        && style.visibility !== 'hidden'
+        && style.opacity !== '0';
+}
+
+function findSearchInput() {
+    const marked = [...document.querySelectorAll('[data-ladill-search-input]')];
+    const visibleMarked = marked.find(isVisibleInput);
+
+    if (visibleMarked) {
+        return visibleMarked;
+    }
+
+    if (marked.length > 0) {
+        return marked[0];
+    }
+
+    return document.querySelector('[x-data*="topbarSearch"] input');
+}
+
+function focusSearchInput() {
+    const input = findSearchInput();
+
+    if (!input) {
+        const fallbackUrl = document.body?.dataset?.ladillSearchUrl;
+
+        if (fallbackUrl) {
+            window.location.href = fallbackUrl;
+        }
+
+        return false;
+    }
+
+    if (!isVisibleInput(input)) {
+        const fallbackUrl = document.body?.dataset?.ladillSearchUrl;
+
+        if (fallbackUrl) {
+            window.location.href = fallbackUrl;
+
+            return true;
+        }
+    }
+
+    input.focus();
+
+    if (input instanceof HTMLInputElement && (input.type === 'text' || input.type === 'search')) {
+        input.select();
+    }
+
+    return true;
+}
+
+export function registerLadillSearchShortcut() {
+    if (window.__ladillSearchShortcutRegistered) {
+        return;
+    }
+
+    window.__ladillSearchShortcutRegistered = true;
+
+    document.addEventListener('keydown', (event) => {
+        if (event.key !== '/' && event.code !== 'Slash') {
+            return;
+        }
+
+        if (event.ctrlKey || event.metaKey || event.altKey) {
+            return;
+        }
+
+        if (isEditableTarget(document.activeElement)) {
+            return;
+        }
+
+        event.preventDefault();
+        focusSearchInput();
+    });
+}