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
@@ -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()"