From 90b045f34986c310b291635ddfeab0e6420d6e74 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sebastian=20Kr=C3=BCger?= Date: Mon, 23 Feb 2026 09:46:35 +0100 Subject: [PATCH] style(figlet): update default text and remove search keyboard hint --- app/(app)/figlet/page.tsx | 6 -- app/(app)/units/page.tsx | 8 --- components/figlet/FigletConverter.tsx | 2 +- components/figlet/FontSelector.tsx | 28 +--------- components/units/converter/SearchUnits.tsx | 26 +-------- components/units/ui/CommandPalette.tsx | 65 ++-------------------- lib/figlet/hooks/useKeyboardShortcuts.ts | 34 ----------- 7 files changed, 7 insertions(+), 162 deletions(-) delete mode 100644 lib/figlet/hooks/useKeyboardShortcuts.ts diff --git a/app/(app)/figlet/page.tsx b/app/(app)/figlet/page.tsx index 9ee593f..443ec15 100644 --- a/app/(app)/figlet/page.tsx +++ b/app/(app)/figlet/page.tsx @@ -9,12 +9,6 @@ export default function FigletPage() {

ASCII Art Text Generator with 373 Fonts

-
- / - Focus Search - ESC - Clear Search -
diff --git a/app/(app)/units/page.tsx b/app/(app)/units/page.tsx index c01c30d..179f5ce 100644 --- a/app/(app)/units/page.tsx +++ b/app/(app)/units/page.tsx @@ -9,14 +9,6 @@ export default function UnitsPage() {

Smart unit converter with 187 units across 23 categories

-
- / - Focus Search - Ctrl+K - Command Palette - ESC - Close Dialogs -
diff --git a/components/figlet/FigletConverter.tsx b/components/figlet/FigletConverter.tsx index b0271f2..5e46447 100644 --- a/components/figlet/FigletConverter.tsx +++ b/components/figlet/FigletConverter.tsx @@ -13,7 +13,7 @@ import { toast } from 'sonner'; import type { FigletFont } from '@/types/figlet'; export function FigletConverter() { - const [text, setText] = React.useState('Figlet UI'); + const [text, setText] = React.useState('Figlet'); const [selectedFont, setSelectedFont] = React.useState('Standard'); const [asciiArt, setAsciiArt] = React.useState(''); const [fonts, setFonts] = React.useState([]); diff --git a/components/figlet/FontSelector.tsx b/components/figlet/FontSelector.tsx index f94db9b..23e37ce 100644 --- a/components/figlet/FontSelector.tsx +++ b/components/figlet/FontSelector.tsx @@ -40,32 +40,6 @@ export function FontSelector({ setRecentFonts(getRecentFonts()); }, []); - // Keyboard shortcuts - React.useEffect(() => { - const handleKeyDown = (e: KeyboardEvent) => { - // "/" to focus search - if (e.key === '/' && !e.ctrlKey && !e.metaKey) { - const activeElement = document.activeElement; - if ( - activeElement?.tagName !== 'INPUT' && - activeElement?.tagName !== 'TEXTAREA' - ) { - e.preventDefault(); - searchInputRef.current?.focus(); - } - } - // "Esc" to clear search - if (e.key === 'Escape' && searchQuery) { - e.preventDefault(); - setSearchQuery(''); - searchInputRef.current?.blur(); - } - }; - - window.addEventListener('keydown', handleKeyDown); - return () => window.removeEventListener('keydown', handleKeyDown); - }, [searchQuery]); - // Initialize Fuse.js for fuzzy search const fuse = React.useMemo(() => { return new Fuse(fonts, { @@ -169,7 +143,7 @@ export function FontSelector({ setSearchQuery(e.target.value)} className="pl-9 pr-9" diff --git a/components/units/converter/SearchUnits.tsx b/components/units/converter/SearchUnits.tsx index 3813842..49f67f1 100644 --- a/components/units/converter/SearchUnits.tsx +++ b/components/units/converter/SearchUnits.tsx @@ -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 setQuery(e.target.value)} onFocus={() => query && setIsOpen(true)} diff --git a/components/units/ui/CommandPalette.tsx b/components/units/ui/CommandPalette.tsx index e5a594e..ded3caa 100644 --- a/components/units/ui/CommandPalette.tsx +++ b/components/units/ui/CommandPalette.tsx @@ -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" /> - - ESC - {/* Commands List */} @@ -210,19 +163,9 @@ export default function CommandPalette({ {/* Footer */}
-
- ↑ - ↓ - Navigate -
-
- Enter - Select -
-
- ESC - Close -
+ Navigate with arrows + Select with Enter + Close with click outside
diff --git a/lib/figlet/hooks/useKeyboardShortcuts.ts b/lib/figlet/hooks/useKeyboardShortcuts.ts deleted file mode 100644 index 4be8d73..0000000 --- a/lib/figlet/hooks/useKeyboardShortcuts.ts +++ /dev/null @@ -1,34 +0,0 @@ -'use client'; - -import { useEffect } from 'react'; - -export interface KeyboardShortcut { - key: string; - ctrlKey?: boolean; - metaKey?: boolean; - shiftKey?: boolean; - handler: () => void; - description: string; -} - -export function useKeyboardShortcuts(shortcuts: KeyboardShortcut[]) { - useEffect(() => { - const handleKeyDown = (event: KeyboardEvent) => { - for (const shortcut of shortcuts) { - const keyMatches = event.key.toLowerCase() === shortcut.key.toLowerCase(); - const ctrlMatches = shortcut.ctrlKey ? event.ctrlKey || event.metaKey : !event.ctrlKey && !event.metaKey; - const metaMatches = shortcut.metaKey ? event.metaKey : true; - const shiftMatches = shortcut.shiftKey ? event.shiftKey : !event.shiftKey; - - if (keyMatches && ctrlMatches && shiftMatches) { - event.preventDefault(); - shortcut.handler(); - break; - } - } - }; - - window.addEventListener('keydown', handleKeyDown); - return () => window.removeEventListener('keydown', handleKeyDown); - }, [shortcuts]); -}