refactor: streamline, refine and polish

components/ascii/ASCIIConverter.tsx

@@ -11,7 +11,6 @@ import { addRecentFont } from '@/lib/storage/favorites';
 import { decodeFromUrl, updateUrl, getShareableUrl } from '@/lib/utils/urlSharing';
 import { toast } from 'sonner';
 import type { ASCIIFont } from '@/types/ascii';
-import { Car } from 'lucide-react';
 import { Card, CardContent } from '../ui/card';
 
 export function ASCIIConverter() {

components/ascii/FontPreview.tsx

@@ -61,111 +61,95 @@ export function FontPreview({ text, font, isLoading, onCopy, onDownload, onShare
         <div className="flex items-center gap-2">
           <CardTitle>Preview</CardTitle>
           {font && (
-            <span className="text-xs px-2 py-0.5 bg-primary/10 text-primary rounded-md font-mono">
+            <span className="text-[10px] px-1.5 py-0.5 bg-primary/10 text-primary rounded font-mono">
               {font}
             </span>
           )}
         </div>
-        <div className="flex gap-2 flex-wrap">
+        <div className="flex gap-1.5 flex-wrap">
           {onCopy && (
-            <Button variant="outline" size="sm" onClick={onCopy}>
-              <Copy className="h-3 w-3 mr-2" />
+            <Button variant="outline" size="xs" onClick={onCopy}>
+              <Copy className="h-3 w-3 mr-1" />
               Copy
             </Button>
           )}
           {onShare && (
-            <Button variant="outline" size="sm" onClick={onShare} title="Copy shareable URL">
-              <Share2 className="h-3 w-3 mr-2" />
+            <Button variant="outline" size="xs" onClick={onShare} title="Copy shareable URL">
+              <Share2 className="h-3 w-3 mr-1" />
               Share
             </Button>
           )}
-          <Button variant="outline" size="sm" onClick={handleExportPNG} title="Export as PNG">
-            <ImageIcon className="h-3 w-3 mr-2" />
+          <Button variant="outline" size="xs" onClick={handleExportPNG} title="Export as PNG">
+            <ImageIcon className="h-3 w-3 mr-1" />
             PNG
           </Button>
           {onDownload && (
-            <Button variant="outline" size="sm" onClick={onDownload}>
-              <Download className="h-3 w-3 mr-2" />
+            <Button variant="outline" size="xs" onClick={onDownload}>
+              <Download className="h-3 w-3 mr-1" />
               TXT
             </Button>
           )}
         </div>
       </CardHeader>
-      <CardContent className="space-y-4">
+      <CardContent className="space-y-3">
         {/* Controls */}
         <div className="flex items-center gap-2 flex-wrap">
-          <div className="flex items-center gap-1 border rounded-md p-1">
+          <div className="flex items-center border rounded-md p-0.5">
             <button
               onClick={() => setTextAlign('left')}
               className={cn(
-                'p-1.5 rounded transition-colors',
+                'p-1 rounded transition-colors',
                 textAlign === 'left' ? 'bg-accent' : 'hover:bg-accent/50'
               )}
               title="Align left"
             >
-              <AlignLeft className="h-3.5 w-3.5" />
+              <AlignLeft className="h-3 w-3" />
             </button>
             <button
               onClick={() => setTextAlign('center')}
               className={cn(
-                'p-1.5 rounded transition-colors',
+                'p-1 rounded transition-colors',
                 textAlign === 'center' ? 'bg-accent' : 'hover:bg-accent/50'
               )}
               title="Align center"
             >
-              <AlignCenter className="h-3.5 w-3.5" />
+              <AlignCenter className="h-3 w-3" />
             </button>
             <button
               onClick={() => setTextAlign('right')}
               className={cn(
-                'p-1.5 rounded transition-colors',
+                'p-1 rounded transition-colors',
                 textAlign === 'right' ? 'bg-accent' : 'hover:bg-accent/50'
               )}
               title="Align right"
             >
-              <AlignRight className="h-3.5 w-3.5" />
+              <AlignRight className="h-3 w-3" />
             </button>
           </div>
 
-          <div className="flex items-center gap-1 border rounded-md p-1">
-            <button
-              onClick={() => setFontSize('xs')}
-              className={cn(
-                'px-2 py-1 text-xs rounded transition-colors',
-                fontSize === 'xs' ? 'bg-accent' : 'hover:bg-accent/50'
-              )}
-            >
-              XS
-            </button>
-            <button
-              onClick={() => setFontSize('sm')}
-              className={cn(
-                'px-2 py-1 text-xs rounded transition-colors',
-                fontSize === 'sm' ? 'bg-accent' : 'hover:bg-accent/50'
-              )}
-            >
-              SM
-            </button>
-            <button
-              onClick={() => setFontSize('base')}
-              className={cn(
-                'px-2 py-1 text-xs rounded transition-colors',
-                fontSize === 'base' ? 'bg-accent' : 'hover:bg-accent/50'
-              )}
-            >
-              MD
-            </button>
+          <div className="flex items-center border rounded-md p-0.5">
+            {(['xs', 'sm', 'base'] as const).map((s) => (
+              <button
+                key={s}
+                onClick={() => setFontSize(s)}
+                className={cn(
+                  'px-1.5 py-0.5 text-[10px] rounded transition-colors uppercase',
+                  fontSize === s ? 'bg-accent' : 'hover:bg-accent/50'
+                )}
+              >
+                {s === 'base' ? 'md' : s}
+              </button>
+            ))}
           </div>
+
+          {!isLoading && text && (
+            <div className="flex gap-2 text-[10px] text-muted-foreground ml-auto">
+              <span>{lineCount} lines</span>
+              <span>{charCount} chars</span>
+            </div>
+          )}
         </div>
 
-        {!isLoading && text && (
-          <div className="flex gap-4 text-xs text-muted-foreground">
-            <span>{lineCount} lines</span>
-            <span>•</span>
-            <span>{charCount} chars</span>
-          </div>
-        )}
-
         <div
           ref={previewRef}
           className={cn(

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>