Skip to content

Commit 7f45c18

Browse files
fezcodefezcode
committed
refactor: command palette
1 parent 07ae42a commit 7f45c18

File tree

1 file changed

+58
-46
lines changed

1 file changed

+58
-46
lines changed

‎src/components/CommandPalette.js‎

Lines changed: 58 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -664,94 +664,106 @@ const CommandPalette = ({
664664
<AnimatePresence>
665665
{isOpen && (
666666
<div
667-
className="fixed inset-0 bg-black bg-opacity-70 z-50 flex items-start justify-center pt-16 md:pt-32 "
667+
className="fixed inset-0 bg-black/80 backdrop-blur-sm z-[100] flex items-start justify-center pt-16 md:pt-32 "
668668
onClick={handleClose}
669669
>
670670
<motion.div
671-
initial={{ opacity: 0, scale: 0.95, y: -20 }}
671+
initial={{ opacity: 0, scale: 0.98, y: -10 }}
672672
animate={{ opacity: 1, scale: 1, y: 0 }}
673-
exit={{ opacity: 0, scale: 0.95, y: -20 }}
673+
exit={{ opacity: 0, scale: 0.98, y: -10 }}
674674
transition={{ duration: 0.2, ease: 'easeOut' }}
675-
className="bg-gray-900 text-gray-100 rounded-lg shadow-2xl w-full max-w-xl mx-4"
675+
className="bg-[#050505] text-white rounded-sm border border-white/10 shadow-2xl w-full max-w-2xl mx-4 overflow-hidden"
676676
onClick={(e) => e.stopPropagation()}
677677
>
678-
<div className="p-3 flex items-center justify-center">
678+
{/* Header / Search */}
679+
<div className="p-6 flex items-center gap-4 bg-white/[0.02]">
679680
<TerminalWindowIcon
680-
size={36}
681-
weight="light"
682-
className="mr-2 text-gray-200 "
681+
size={32}
682+
weight="fill"
683+
className="text-emerald-500"
683684
/>
684685
<input
685686
ref={inputRef}
686687
type="text"
687688
placeholder={
688-
isLoading ? 'Loading data...' : 'Search or type a command...'
689+
isLoading ? "Initialising Data..." : "Search commands, posts, apps..."
689690
}
690-
className="w-full bg-transparent text-lg placeholder-gray-500 focus:outline-none font-mono"
691+
className="w-full bg-transparent text-xl md:text-2xl font-light placeholder-gray-700 focus:outline-none font-mono uppercase tracking-tight"
691692
value={searchTerm}
692693
onChange={(e) => setSearchTerm(e.target.value)}
693694
disabled={isLoading}
694695
/>
695696
</div>
697+
698+
{/* Results Section */}
696699
<div
697700
ref={resultsRef}
698-
className="border-t border-gray-200 dark:border-gray-700 p-2 max-h-[50vh] overflow-y-auto scrollbar-hide"
701+
className="border-t border-white/10 max-h-[50vh] overflow-y-auto scrollbar-hide bg-black/20"
699702
>
700703
{filteredItems.length > 0 ? (
701704
filteredItems.map((item, index) => (
702705
<div
703706
key={`${item.type}-${item.slug || item.commandId}-${index}`}
704-
className={`p-3 rounded-lg cursor-pointer flex justify-between items-center font-mono ${
707+
className={`px-6 py-4 cursor-pointer flex justify-between items-center transition-all duration-200 border-l-2 ${
705708
selectedIndex === index
706-
? 'bg-gray-800'
707-
: 'hover:bg-gray-800'
709+
? 'bg-white/10 border-emerald-500 translate-x-1'
710+
: 'hover:bg-white/5 border-transparent'
708711
}`}
709712
onClick={() => handleItemClick(item)}
710713
onMouseMove={() => setSelectedIndex(index)}
711714
>
712-
<span className="mr-2 text-gray-500 "> » </span>
713-
<span className={`w-5/6 text-gray-100`}>{item.title}</span>
715+
<div className="flex flex-col gap-0.5">
716+
<span className={`text-lg font-medium tracking-tight ${selectedIndex === index ? 'text-white' : 'text-gray-400'}`}>
717+
{item.title}
718+
</span>
719+
{item.description && (
720+
<span className="text-[10px] font-mono uppercase tracking-widest text-gray-600 truncate max-w-md">
721+
{item.description}
722+
</span>
723+
)}
724+
</div>
725+
714726
<span
715-
className={`w-20 h-6 flex items-center justify-center text-xs uppercase text-gray-800 font-bold ${getCategoryColorClass(item.type)} rounded border-2 border-black`}
727+
className={`px-2 py-0.5 text-[9px] font-mono font-bold uppercase tracking-widest text-black ${getCategoryColorClass(item.type)} rounded-sm`}
716728
>
717729
{item.type}
718730
</span>
719731
</div>
720732
))
721733
) : (
722-
<div className="p-4 text-center text-gray-500">
723-
{isLoading
724-
? 'Loading...'
725-
: `No results found for "${searchTerm}"`}
734+
<div className="p-12 text-center">
735+
<p className="font-mono text-sm text-gray-600 uppercase tracking-widest">
736+
{isLoading ? "Fetching Registry..." : `No matches found for "${searchTerm}"`}
737+
</p>
726738
</div>
727739
)}
728740
</div>
729-
<div className="border-t border-gray-200 dark:border-gray-700 p-2 text-xs text-gray-400 dark:text-gray-500 flex items-center justify-between">
730-
<div className="flex items-center gap-2">
731-
<span className="border border-gray-300 dark:border-gray-600 rounded px-1.5 py-0.5">
732-
ESC
733-
</span>{' '}
734-
to close
735-
<span className="border border-gray-300 dark:border-gray-600 rounded px-1.5 py-0.5">
736-
↑
737-
</span>
738-
<span className="border border-gray-300 dark:border-gray-600 rounded px-1.5 py-0.5">
739-
↓
740-
</span>
741-
<span className="border border-gray-300 dark:border-gray-600 rounded px-1.5 py-0.5">
742-
PgUp
743-
</span>
744-
<span className="border border-gray-300 dark:border-gray-600 rounded px-1.5 py-0.5">
745-
PgDn
746-
</span>{' '}
747-
to navigate
748-
<span className="border border-gray-300 dark:border-gray-600 rounded px-1.5 py-0.5">
749-
↵
750-
</span>{' '}
751-
to select
741+
742+
{/* Footer / Shortcuts */}
743+
<div className="border-t border-white/10 p-4 bg-white/[0.02] flex items-center justify-between text-[10px] font-mono uppercase tracking-[0.2em]">
744+
<div className="flex items-center gap-6 text-gray-500">
745+
<div className="flex items-center gap-2">
746+
<kbd className="px-1.5 py-0.5 bg-white/10 rounded border border-white/10 text-white">ESC</kbd>
747+
<span>Close</span>
748+
</div>
749+
<div className="flex items-center gap-2">
750+
<div className="flex gap-1">
751+
<kbd className="px-1.5 py-0.5 bg-white/10 rounded border border-white/10 text-white">↑</kbd>
752+
<kbd className="px-1.5 py-0.5 bg-white/10 rounded border border-white/10 text-white">↓</kbd>
753+
<kbd className="px-1.5 py-0.5 bg-white/10 rounded border border-white/10 text-white text-[8px]">PGUP</kbd>
754+
<kbd className="px-1.5 py-0.5 bg-white/10 rounded border border-white/10 text-white text-[8px]">PGDN</kbd>
755+
</div>
756+
<span>Navigate</span>
757+
</div>
758+
<div className="flex items-center gap-2">
759+
<kbd className="px-1.5 py-0.5 bg-white/10 rounded border border-white/10 text-white">↵</kbd>
760+
<span>Select</span>
761+
</div>
752762
</div>
753-
<div className="font-semibold text-gray-400">
754-
Fez<span className="text-accent-500">codex</span>
763+
764+
<div className="font-bold text-gray-400 flex items-center gap-2">
765+
<span className="h-1 w-1 bg-emerald-500 rounded-full animate-pulse" />
766+
Fez<span className="text-white">codex</span>
755767
</div>
756768
</div>
757769
</motion.div>

0 commit comments

Comments
 (0)