graham/towerops
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: add search trigger button with ⌘K hint in navbar

Browse source
This commit is contained in:
Graham McIntire 2026-02-13 19:13:11 -06:00
parent bfe552cb47
commit 2389e11469
2 changed files with 25 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
assets/js/app.ts
View file

@ -940,6 +940,15 @@ if (!csrfToken) {
const userTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone || "UTC"
// Global Search (Cmd+K / Ctrl+K) hook
const GlobalSearchTrigger = {
mounted() {
this.el.addEventListener("click", () => {
// Simulate Cmd+K to open global search
document.dispatchEvent(new KeyboardEvent("keydown", { key: "k", metaKey: true }))
})
}
}
const GlobalSearch = {
mounted() {
this.handleKeydown = (e: KeyboardEvent) => {
@ -965,7 +974,7 @@ const GlobalSearch = {
const liveSocket = new LiveSocket("/live", Socket, {
longPollFallbackMs: 2500,
params: { _csrf_token: csrfToken, timezone: userTimezone },
hooks: { ...colocatedHooks, SensorChart, CopyToClipboard, ScrollToTop, AutoDismissFlash, BetaBannerDismiss, NetworkMap, DeviceListReorder, MikrotikPortSync, GlobalSearch },
hooks: { ...colocatedHooks, SensorChart, CopyToClipboard, ScrollToTop, AutoDismissFlash, BetaBannerDismiss, NetworkMap, DeviceListReorder, MikrotikPortSync, GlobalSearch, GlobalSearchTrigger },
})
// Show progress bar on live navigation and form submits

15
lib/towerops_web/components/layouts.ex
View file

@ -270,6 +270,21 @@ defmodule ToweropsWeb.Layouts do
</div>
<div class="relative flex items-center gap-1 sm:gap-2">
<!-- Global Search Trigger -->
<button
:if={@current_organization}
type="button"
id="global-search-trigger"
phx-hook="GlobalSearchTrigger"
class="hidden md:inline-flex items-center gap-2 rounded-lg border border-gray-200 bg-gray-50 px-3 py-1.5 text-sm text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:border-white/10 dark:bg-white/5 dark:text-gray-400 dark:hover:bg-white/10 dark:hover:text-gray-200 transition-colors"
title="Search (⌘K)"
>
<.icon name="hero-magnifying-glass" class="h-4 w-4" />
<span class="text-xs">Search</span>
<kbd class="hidden lg:inline-flex items-center gap-0.5 rounded border border-gray-300 bg-gray-100 px-1.5 py-0.5 text-[10px] font-medium text-gray-500 dark:border-white/20 dark:bg-white/10 dark:text-gray-400">
⌘K
</kbd>
</button>
<.theme_toggle />
<button
type="button"