style(figlet): update default text and remove search keyboard hint

This commit is contained in:
2026-02-23 09:46:35 +01:00
parent 6fbcdd3674
commit 90b045f349
7 changed files with 7 additions and 162 deletions

View File

@@ -97,30 +97,6 @@ export default function SearchUnits({ onSelectUnit, className }: SearchUnitsProp
return () => document.removeEventListener('mousedown', handleClickOutside);
}, []);
// Keyboard shortcut: / to focus search
useEffect(() => {
function handleKeyDown(e: KeyboardEvent) {
if (e.key === '/' && !e.ctrlKey && !e.metaKey) {
const activeElement = document.activeElement;
if (
activeElement?.tagName !== 'INPUT' &&
activeElement?.tagName !== 'TEXTAREA'
) {
e.preventDefault();
inputRef.current?.focus();
}
}
if (e.key === 'Escape') {
setIsOpen(false);
inputRef.current?.blur();
}
}
document.addEventListener('keydown', handleKeyDown);
return () => document.removeEventListener('keydown', handleKeyDown);
}, []);
const handleSelectUnit = (unit: string, measure: Measure) => {
onSelectUnit(unit, measure);
setQuery('');
@@ -140,7 +116,7 @@ export default function SearchUnits({ onSelectUnit, className }: SearchUnitsProp
<Input
ref={inputRef}
type="text"
placeholder="Search units (press / to focus)"
placeholder="Search units..."
value={query}
onChange={(e) => setQuery(e.target.value)}
onFocus={() => query && setIsOpen(true)}

View File

@@ -1,6 +1,6 @@
'use client';
import { useState, useEffect, useCallback, useRef } from 'react';
import { useState, useEffect, useMemo, useRef } from 'react';
import { Command, Hash, Star, Moon, Sun } from 'lucide-react';
import { useTheme } from '@/components/providers/ThemeProvider';
import {
@@ -81,23 +81,6 @@ export default function CommandPalette({
)
: allCommands;
// Keyboard shortcut to open
useEffect(() => {
const handleKeyDown = (e: KeyboardEvent) => {
if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
e.preventDefault();
setIsOpen(prev => !prev);
}
if (e.key === 'Escape') {
setIsOpen(false);
}
};
document.addEventListener('keydown', handleKeyDown);
return () => document.removeEventListener('keydown', handleKeyDown);
}, []);
// Focus input when opened
useEffect(() => {
if (isOpen) {
@@ -107,33 +90,6 @@ export default function CommandPalette({
}
}, [isOpen]);
// Keyboard navigation
useEffect(() => {
if (!isOpen) return;
const handleKeyDown = (e: KeyboardEvent) => {
if (e.key === 'ArrowDown') {
e.preventDefault();
setSelectedIndex(prev =>
prev < filteredCommands.length - 1 ? prev + 1 : prev
);
} else if (e.key === 'ArrowUp') {
e.preventDefault();
setSelectedIndex(prev => (prev > 0 ? prev - 1 : prev));
} else if (e.key === 'Enter') {
e.preventDefault();
const command = filteredCommands[selectedIndex];
if (command) {
command.action();
setIsOpen(false);
}
}
};
document.addEventListener('keydown', handleKeyDown);
return () => document.removeEventListener('keydown', handleKeyDown);
}, [isOpen, selectedIndex, filteredCommands]);
// Reset selected index when query changes
useEffect(() => {
setSelectedIndex(0);
@@ -163,9 +119,6 @@ export default function CommandPalette({
onChange={e => setQuery(e.target.value)}
className="flex-1 bg-transparent py-4 px-4 outline-none placeholder:text-muted-foreground"
/>
<kbd className="hidden sm:inline-block px-2 py-1 text-xs bg-muted rounded">
ESC
</kbd>
</div>
{/* Commands List */}
@@ -210,19 +163,9 @@ export default function CommandPalette({
{/* Footer */}
<div className="border-t px-4 py-2 text-xs text-muted-foreground flex items-center gap-4">
<div className="flex items-center gap-1">
<kbd className="px-1.5 py-0.5 bg-muted rounded"></kbd>
<kbd className="px-1.5 py-0.5 bg-muted rounded"></kbd>
<span>Navigate</span>
</div>
<div className="flex items-center gap-1">
<kbd className="px-1.5 py-0.5 bg-muted rounded">Enter</kbd>
<span>Select</span>
</div>
<div className="flex items-center gap-1">
<kbd className="px-1.5 py-0.5 bg-muted rounded">ESC</kbd>
<span>Close</span>
</div>
<span>Navigate with arrows</span>
<span>Select with Enter</span>
<span>Close with click outside</span>
</div>
</div>
</div>