refactor: streamline, refine and polish

components/ascii/FontSelector.tsx

@@ -95,15 +95,15 @@ export function FontSelector({
   return (
     <Card className={cn("flex flex-col min-h-0 overflow-hidden", className)}>
       <CardHeader className="flex flex-row items-center justify-between flex-wrap gap-2 space-y-0">
-        <CardTitle>Select Font</CardTitle>
+        <CardTitle>Fonts</CardTitle>
         {onRandomFont && (
           <Button
             variant="outline"
-            size="sm"
+            size="xs"
             onClick={onRandomFont}
             title="Random font"
           >
-            <Shuffle className="h-3 w-3 mr-2" />
+            <Shuffle className="h-3 w-3 mr-1" />
             Random
           </Button>
         )}
@@ -112,34 +112,34 @@ export function FontSelector({
         <Tabs
           value={filter}
           onValueChange={(v) => setFilter(v as FilterType)}
-          className="mb-4 shrink-0"
+          className="mb-3 shrink-0"
         >
           <TabsList className="w-full">
             <TabsTrigger value="all" className="flex-1">
-              <List className="h-3.5 w-3.5" />
+              <List className="h-3 w-3" />
               All
             </TabsTrigger>
             <TabsTrigger value="favorites" className="flex-1">
-              <Heart className="h-3.5 w-3.5" />
-              Favorites
+              <Heart className="h-3 w-3" />
+              Fav
             </TabsTrigger>
             <TabsTrigger value="recent" className="flex-1">
-              <Clock className="h-3.5 w-3.5" />
+              <Clock className="h-3 w-3" />
               Recent
             </TabsTrigger>
           </TabsList>
         </Tabs>
 
         {/* Search Input */}
-        <div className="relative mb-4 shrink-0">
-          <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground pointer-events-none" />
+        <div className="relative mb-3 shrink-0">
+          <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-muted-foreground pointer-events-none" />
           <Input
             ref={searchInputRef}
             type="text"
             placeholder="Search fonts..."
             value={searchQuery}
             onChange={(e) => setSearchQuery(e.target.value)}
-            className="pl-9 pr-9"
+            className="pl-8 pr-8 h-8 text-sm"
           />
           {searchQuery && (
             <button
@@ -147,13 +147,13 @@ export function FontSelector({
               className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
               aria-label="Clear search"
             >
-              <X className="h-4 w-4" />
+              <X className="h-3.5 w-3.5" />
             </button>
           )}
         </div>
 
         {/* Font List */}
-        <div className="flex-1 overflow-y-auto space-y-1 pr-2 scrollbar">
+        <div className="flex-1 overflow-y-auto space-y-0.5 pr-1 scrollbar">
           {filteredFonts.length === 0 ? (
             <Empty>
               <EmptyHeader>
@@ -185,26 +185,26 @@ export function FontSelector({
               <div
                 key={font.name}
                 className={cn(
-                  'group flex items-center gap-2 px-3 py-2 rounded-md text-sm transition-colors',
+                  'group flex items-center gap-1 px-2 py-1.5 rounded text-xs transition-colors',
                   'hover:bg-accent hover:text-accent-foreground',
                   selectedFont === font.name && 'bg-accent text-accent-foreground font-medium'
                 )}
               >
                 <button
                   onClick={() => onSelectFont(font.name)}
-                  className="flex-1 text-left"
+                  className="flex-1 text-left truncate"
                 >
                   {font.name}
                 </button>
                 <button
                   onClick={(e) => handleToggleFavorite(font.name, e)}
-                  className="p-1"
+                  className="p-0.5 opacity-0 group-hover:opacity-100 transition-opacity shrink-0"
                   aria-label={isFavorite(font.name) ? 'Remove from favorites' : 'Add to favorites'}
                 >
                   <Heart
                     className={cn(
-                      'h-4 w-4 transition-colors',
-                      isFavorite(font.name) ? 'fill-red-500 text-red-500' : 'text-muted-foreground/30 hover:text-red-500/50'
+                      'h-3 w-3 transition-colors',
+                      isFavorite(font.name) ? 'fill-red-500 text-red-500 !opacity-100' : 'text-muted-foreground/50 hover:text-red-500/50'
                     )}
                   />
                 </button>
@@ -214,10 +214,10 @@ export function FontSelector({
         </div>
 
         {/* Stats */}
-        <div className="mt-4 pt-4 border-t text-xs text-muted-foreground shrink-0">
+        <div className="mt-3 pt-3 border-t text-[10px] text-muted-foreground shrink-0">
           {filteredFonts.length} font{filteredFonts.length !== 1 ? 's' : ''}
-          {filter === 'favorites' && ` • ${favorites.length} total favorites`}
-          {filter === 'recent' && ` • ${recentFonts.length} recent`}
+          {filter === 'favorites' && ` · ${favorites.length} favorites`}
+          {filter === 'recent' && ` · ${recentFonts.length} recent`}
         </div>
       </CardContent>
     </Card>