From 417b707e8ecedd8e55c35a86d99c85a2b0239663 Mon Sep 17 00:00:00 2001
From: Fuwn <contact@fuwn.me>
Date: Tue, 20 Jan 2026 05:42:29 -0800
Subject: feat: Add command palette for quick navigation

---
 internal/server/templates/index.html | 196 ++++++++++++++++++++++++++++++++++-
 1 file changed, 195 insertions(+), 1 deletion(-)

(limited to 'internal/server/templates')

diff --git a/internal/server/templates/index.html b/internal/server/templates/index.html
index d689416..b5a2462 100644
--- a/internal/server/templates/index.html
+++ b/internal/server/templates/index.html
@@ -78,7 +78,7 @@
                 <div class="divide-y divide-neutral-200 dark:divide-neutral-800 group-content" data-group-content="{{$group.Name}}" data-default-collapsed="{{$group.DefaultCollapsed}}">
                     {{range .Monitors}}
                     {{$monitor := .}}
-                    <div class="p-4 hover:bg-neutral-100/50 dark:hover:bg-neutral-900/50 transition-colors">
+                    <div class="p-4 hover:bg-neutral-100/50 dark:hover:bg-neutral-900/50 transition-colors" data-monitor="{{.Name}}" data-group="{{$group.Name}}">
                         <div class="flex items-start justify-between gap-4">
                             <div class="flex-1 min-w-0">
                                 <div class="flex items-center gap-2 mb-2">
@@ -196,6 +196,20 @@
     <!-- Tooltip container -->
     <div id="tooltip" class="tooltip"></div>
 
+    <!-- Command Palette -->
+    <div id="command-palette" class="command-palette">
+        <div class="command-palette-backdrop"></div>
+        <div class="command-palette-container">
+            <input type="text" id="command-input" class="command-input" placeholder="Search groups and monitors..." autocomplete="off" />
+            <div id="command-results" class="command-results"></div>
+            <div class="command-hint">
+                <span><kbd>↑↓</kbd> navigate</span>
+                <span><kbd>↵</kbd> select</span>
+                <span><kbd>esc</kbd> close</span>
+            </div>
+        </div>
+    </div>
+
     <script>
         // Group collapse/expand functionality
         function toggleGroup(groupName) {
@@ -486,6 +500,186 @@
             });
         })();
         {{end}}
+
+        // Command Palette
+        (function() {
+            const palette = document.getElementById('command-palette');
+            const input = document.getElementById('command-input');
+            const results = document.getElementById('command-results');
+            let selectedIndex = -1;
+            let items = [];
+
+            // Build search index
+            function buildIndex() {
+                const index = [];
+                
+                // Add groups
+                document.querySelectorAll('[data-group-content]').forEach(function(el) {
+                    const name = el.getAttribute('data-group-content');
+                    index.push({
+                        type: 'group',
+                        name: name,
+                        element: el.closest('section'),
+                        searchText: name.toLowerCase()
+                    });
+                });
+
+                // Add monitors
+                document.querySelectorAll('[data-monitor]').forEach(function(el) {
+                    const name = el.getAttribute('data-monitor');
+                    const group = el.getAttribute('data-group');
+                    index.push({
+                        type: 'monitor',
+                        name: name,
+                        group: group,
+                        element: el,
+                        searchText: (name + ' ' + group).toLowerCase()
+                    });
+                });
+
+                return index;
+            }
+
+            const searchIndex = buildIndex();
+
+            function openPalette() {
+                palette.classList.add('visible');
+                input.value = '';
+                input.focus();
+                search('');
+            }
+
+            function closePalette() {
+                palette.classList.remove('visible');
+                selectedIndex = -1;
+            }
+
+            function search(query) {
+                const q = query.toLowerCase().trim();
+                
+                if (q === '') {
+                    items = searchIndex.slice(0, 10);
+                } else {
+                    items = searchIndex.filter(function(item) {
+                        return item.searchText.includes(q);
+                    }).slice(0, 10);
+                }
+
+                renderResults();
+            }
+
+            function renderResults() {
+                if (items.length === 0) {
+                    results.innerHTML = '<div class="command-empty">No results found</div>';
+                    return;
+                }
+
+                results.innerHTML = items.map(function(item, i) {
+                    const isSelected = i === selectedIndex ? ' selected' : '';
+                    const icon = item.type === 'group' 
+                        ? '<svg class="command-item-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/></svg>'
+                        : '<svg class="command-item-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><circle cx="12" cy="12" r="3" stroke-width="2"/></svg>';
+                    
+                    const meta = item.type === 'group'
+                        ? '<span class="command-item-type">Group</span>'
+                        : '<span class="command-item-path">' + item.group + '</span>';
+
+                    return '<div class="command-item' + isSelected + '" data-index="' + i + '">' +
+                        icon +
+                        '<div class="command-item-content">' +
+                        '<div class="command-item-name">' + item.name + '</div>' +
+                        meta +
+                        '</div></div>';
+                }).join('');
+            }
+
+            function selectItem(index) {
+                if (index < 0 || index >= items.length) return;
+                
+                const item = items[index];
+                closePalette();
+
+                // Expand group if collapsed
+                if (item.type === 'group') {
+                    const groupName = item.name;
+                    const content = document.querySelector('[data-group-content="' + groupName + '"]');
+                    const icon = document.querySelector('[data-group-icon="' + groupName + '"]');
+                    
+                    if (content && content.classList.contains('collapsed')) {
+                        content.classList.remove('collapsed');
+                        if (icon) icon.classList.remove('rotated');
+                        localStorage.setItem('group-' + groupName, 'expanded');
+                    }
+                } else if (item.type === 'monitor') {
+                    // Expand parent group if collapsed
+                    const groupName = item.group;
+                    const content = document.querySelector('[data-group-content="' + groupName + '"]');
+                    const icon = document.querySelector('[data-group-icon="' + groupName + '"]');
+                    
+                    if (content && content.classList.contains('collapsed')) {
+                        content.classList.remove('collapsed');
+                        if (icon) icon.classList.remove('rotated');
+                        localStorage.setItem('group-' + groupName, 'expanded');
+                    }
+                }
+
+                // Scroll to element and highlight
+                setTimeout(function() {
+                    item.element.scrollIntoView({ behavior: 'smooth', block: 'center' });
+                    item.element.classList.add('highlight-jump');
+                    setTimeout(function() {
+                        item.element.classList.remove('highlight-jump');
+                    }, 1000);
+                }, 50);
+            }
+
+            // Event listeners
+            document.addEventListener('keydown', function(e) {
+                // Open with Cmd/Ctrl+K or /
+                if ((e.key === 'k' && (e.metaKey || e.ctrlKey)) || (e.key === '/' && !palette.classList.contains('visible') && document.activeElement.tagName !== 'INPUT')) {
+                    e.preventDefault();
+                    openPalette();
+                    return;
+                }
+
+                if (!palette.classList.contains('visible')) return;
+
+                if (e.key === 'Escape') {
+                    e.preventDefault();
+                    closePalette();
+                } else if (e.key === 'ArrowDown') {
+                    e.preventDefault();
+                    selectedIndex = Math.min(selectedIndex + 1, items.length - 1);
+                    renderResults();
+                } else if (e.key === 'ArrowUp') {
+                    e.preventDefault();
+                    selectedIndex = Math.max(selectedIndex - 1, -1);
+                    renderResults();
+                } else if (e.key === 'Enter') {
+                    e.preventDefault();
+                    if (selectedIndex >= 0) {
+                        selectItem(selectedIndex);
+                    } else if (items.length > 0) {
+                        selectItem(0);
+                    }
+                }
+            });
+
+            input.addEventListener('input', function() {
+                selectedIndex = -1;
+                search(input.value);
+            });
+
+            results.addEventListener('click', function(e) {
+                const item = e.target.closest('.command-item');
+                if (item) {
+                    selectItem(parseInt(item.getAttribute('data-index'), 10));
+                }
+            });
+
+            // Close on backdrop click
+            palette.querySelector('.command-palette-backdrop').addEventListener('click', closePalette);
+        })();
     </script>
 </body>
 </html>
-- 
cgit v1.2.3