Add slash keyboard shortcut to focus search.

Press / from any non-input page to jump to the topbar or full-screen search field, with a fallback route when search is not visible. Co-authored-by: Cursor <cursoragent@cursor.com>
2026-06-23 02:51:39 +00:00
parent fd1a94d79d
commit 99f994f4e5
5 changed files with 103 additions and 4 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';
@@ -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.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();
+    });
+}
@@ -10,7 +10,7 @@
    <link href="https://fonts.bunny.net/css?family=figtree:400,500,600&display=swap" rel="stylesheet" />
    @vite(['resources/css/app.css', 'resources/js/app.js'])
 </head>
-<body class="h-full font-sans antialiased bg-slate-100" x-data="{ sidebarOpen: false }">
+<body class="h-full font-sans antialiased bg-slate-100" x-data="{ sidebarOpen: false }" data-ladill-search-url="{{ route('mini.search') }}">
    <div class="min-h-screen max-lg:min-h-dvh">
        <div x-show="sidebarOpen" x-cloak class="fixed inset-0 z-30 bg-black/50 lg:hidden" @click="sidebarOpen = false"></div>
        <aside x-cloak class="fixed inset-y-0 left-0 z-40 w-64 transform transition-transform lg:translate-x-0"
@@ -14,7 +14,7 @@
        <div class="px-4 pb-3">
            <div class="relative">
                <svg class="pointer-events-none absolute left-4 top-1/2 h-5 w-5 -translate-y-1/2 text-slate-400" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z"/></svg>
-                <input x-ref="input"
+                <input data-ladill-search-input  x-ref="input"
                       type="text"
                       x-model="query"
                       @focus="onFocus()"
@@ -34,7 +34,7 @@
            <h1 class="text-2xl font-semibold text-slate-900">{{ $heading }}</h1>
            <div class="relative mt-3">
                <svg class="pointer-events-none absolute left-4 top-1/2 h-5 w-5 -translate-y-1/2 text-slate-400" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z"/></svg>
-                <input x-ref="input"
+                <input data-ladill-search-input  x-ref="input"
                       type="text"
                       x-model="query"
                       @focus="onFocus()"
@@ -51,7 +51,7 @@
        <div class="relative hidden w-full max-w-md lg:block" x-data="topbarSearch()" @click.outside="open = false" @keydown.escape.window="open = false">
            <div class="relative">
                <svg class="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-400" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z"/></svg>
-                <input type="text"
+                <input data-ladill-search-input  type="text"
                       x-model="query"
                       @focus="onFocus()"
                       @input.debounce.200ms="search()"