fixed shortcut label to be platform specific + home removed

This commit is contained in:
2026-05-09 10:53:13 +02:00
parent 12c7ead7df
commit 7daf044c9f
2 changed files with 10 additions and 7 deletions
+10 -6
View File
@@ -34,13 +34,17 @@ export default function Search() {
const [loading, setLoading] = useState(false);
const [error, setError] = useState<string | null>(null);
const [activeIdx, setActiveIdx] = useState(0);
const [isMac, setIsMac] = useState(false);
const inputRef = useRef<HTMLInputElement>(null);
const listRef = useRef<HTMLUListElement>(null);
useEffect(() => {
setIsMac(/Mac|iPhone|iPad|iPod/i.test(navigator.userAgent));
}, []);
// Global Cmd/Ctrl+K + Esc listener
useEffect(() => {
function onKey(e: KeyboardEvent) {
const isMac = navigator.platform.toLowerCase().includes('mac');
const mod = isMac ? e.metaKey : e.ctrlKey;
if (mod && e.key.toLowerCase() === 'k') {
e.preventDefault();
@@ -51,7 +55,7 @@ export default function Search() {
}
window.addEventListener('keydown', onKey);
return () => window.removeEventListener('keydown', onKey);
}, [open]);
}, [open, isMac]);
// Lazy fetch posts on first open
useEffect(() => {
@@ -124,8 +128,8 @@ export default function Search() {
<button
type="button"
onClick={() => setOpen(true)}
aria-label="Search posts (Ctrl+K)"
title="Search (Ctrl+K)"
aria-label={`Search posts (${isMac ? '⌘' : 'Ctrl'}+K)`}
title={`Search (${isMac ? '⌘' : 'Ctrl'}+K)`}
className="text-subtext0 hover:text-text transition-colors flex items-center gap-2 px-2 py-1 rounded-md hover:bg-surface0/60"
>
<svg
@@ -143,8 +147,8 @@ export default function Search() {
<circle cx="11" cy="11" r="8" />
<path d="m21 21-4.3-4.3" />
</svg>
<kbd className="hidden md:inline-flex items-center gap-0.5 text-[10px] font-mono text-subtext0 px-1.5 py-0.5 rounded border border-surface1 bg-surface0/60">
<span></span><span>K</span>
<kbd className="hidden md:inline-flex items-center gap-1 text-[10px] font-mono text-subtext0 px-1.5 py-0.5 rounded border border-surface1 bg-surface0/60">
<span>{isMac ? '⌘' : 'Ctrl'}</span><span className="opacity-50">+</span><span>K</span>
</kbd>
</button>