refactor: streamline, refine and polish

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(