knowledge_base/src/resources/views/livewire/quick-switcher.blade.php

<div
    x-data="{ open: false }"
    @open-quick-switcher.window="open = true; $nextTick(() => $refs.searchInput.focus())"
    @keydown.escape.window="open = false"
    @keydown.ctrl.k.window.prevent="open = true; $nextTick(() => $refs.searchInput.focus())"
    @keydown.meta.k.window.prevent="open = true; $nextTick(() => $refs.searchInput.focus())"
>
    <!-- Modal Overlay -->
    <div
        x-show="open"
        x-transition:enter="transition ease-out duration-200"
        x-transition:enter-start="opacity-0"
        x-transition:enter-end="opacity-100"
        x-transition:leave="transition ease-in duration-150"
        x-transition:leave-start="opacity-100"
        x-transition:leave-end="opacity-0"
        class="fixed inset-0 z-50 bg-gray-900 bg-opacity-50"
        @click="open = false"
        style="display: none;"
    ></div>

    <!-- Modal Content -->
    <div
        x-show="open"
        x-transition:enter="transition ease-out duration-200"
        x-transition:enter-start="opacity-0 translate-y-4"
        x-transition:enter-end="opacity-100 translate-y-0"
        x-transition:leave="transition ease-in duration-150"
        x-transition:leave-start="opacity-100 translate-y-0"
        x-transition:leave-end="opacity-0 translate-y-4"
        class="fixed inset-0 z-50 overflow-y-auto"
        style="display: none;"
        @click="open = false"
    >
        <div class="flex min-h-full items-start justify-center p-4 pt-[10vh]">
            <div
                class="w-full max-w-2xl bg-white rounded-lg shadow-2xl"
                @click.stop
                wire:keydown.arrow-down.prevent="selectNext"
                wire:keydown.arrow-up.prevent="selectPrevious"
                wire:keydown.enter.prevent="selectDocument"
            >
                <!-- Search Input -->
                <div class="p-4 border-b border-gray-200">
                    <div class="relative">
                        <svg class="absolute left-3 top-1/2 transform -translate-y-1/2 h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
                        </svg>
                        <input
                            x-ref="searchInput"
                            type="text"
                            wire:model.live="search"
                            class="w-full pl-10 pr-4 py-3 border-0 focus:ring-0 text-lg"
                            placeholder="Search documents..."
                            autocomplete="off"
                        >
                    </div>
                </div>

                <!-- Results -->
                <div class="max-h-96 overflow-y-auto">
                    @if(empty($this->results))
                        <div class="p-8 text-center text-gray-500">
                            No documents found
                        </div>
                    @else
                        <ul class="divide-y divide-gray-200">
                            @foreach($this->results as $index => $result)
                                <li>
                                    <a
                                        href="{{ route('documents.show', $result['id']) }}"
                                        class="block px-4 py-3 hover:bg-gray-50 transition {{ $index === $selectedIndex ? 'bg-indigo-50' : '' }}"
                                        wire:navigate
                                        @click="open = false"
                                    >
                                        <div class="flex items-center justify-between">
                                            <div class="flex-1 min-w-0">
                                                <div class="flex items-center">
                                                    <svg class="flex-shrink-0 h-5 w-5 text-gray-400 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
                                                    </svg>
                                                    <span class="text-sm font-medium text-gray-900 truncate">
                                                        {{ $result['title'] }}
                                                    </span>
                                                </div>
                                                @if(!empty($result['directory']) && $result['directory'] !== '.')
                                                    <p class="mt-1 text-xs text-gray-500 truncate ml-8">
                                                        {{ $result['directory'] }}
                                                    </p>
                                                @endif
                                            </div>
                                            @if($index === $selectedIndex)
                                                <kbd class="ml-2 px-2 py-1 text-xs font-semibold text-gray-800 bg-gray-100 border border-gray-200 rounded">
                                                    ↵
                                                </kbd>
                                            @endif
                                        </div>
                                    </a>
                                </li>
                            @endforeach
                        </ul>
                    @endif
                </div>

                <!-- Footer -->
                <div class="px-4 py-3 bg-gray-50 border-t border-gray-200 text-xs text-gray-500">
                    <div class="flex items-center justify-between">
                        <div class="flex items-center space-x-4">
                            <span class="flex items-center">
                                <kbd class="px-2 py-1 bg-white border border-gray-300 rounded text-xs font-semibold mr-1">↑</kbd>
                                <kbd class="px-2 py-1 bg-white border border-gray-300 rounded text-xs font-semibold mr-2">↓</kbd>
                                to navigate
                            </span>
                            <span class="flex items-center">
                                <kbd class="px-2 py-1 bg-white border border-gray-300 rounded text-xs font-semibold mr-2">↵</kbd>
                                to select
                            </span>
                            <span class="flex items-center">
                                <kbd class="px-2 py-1 bg-white border border-gray-300 rounded text-xs font-semibold mr-2">esc</kbd>
                                to close
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>