feat: refactor theme, add tailwind-scrollbar, and improve UI components

- Removed manual theme switching logic and ThemeProvider
- Installed and configured tailwind-scrollbar plugin
- Updated FileConverter and ConversionOptions to use shadcn Input
- Refactored FontSelector to use shadcn Tabs
- Simplified global styles and adjusted glassmorphic effects

components/ascii/FontSelector.tsx

@@ -14,6 +14,7 @@ import {
 import { Search, X, Heart, Clock, List, Shuffle } from 'lucide-react';
 import { cn } from '@/lib/utils/cn';
 import { Button } from '@/components/ui/button';
+import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import type { ASCIIFont } from '@/types/ascii';
 import { getFavorites, getRecentFonts, toggleFavorite, isFavorite } from '@/lib/storage/favorites';
 
@@ -108,39 +109,26 @@ export function FontSelector({
         )}
       </CardHeader>
       <CardContent className="flex flex-col flex-1 min-h-0 pt-0">
-        {/* Filter Tabs */}
-        <div className="flex gap-1 mb-4 p-1 bg-muted rounded-lg shrink-0">
-          <button
-            onClick={() => setFilter('all')}
-            className={cn(
-              'flex-1 flex items-center justify-center px-3 py-1.5 text-xs font-medium rounded-md transition-colors',
-              filter === 'all' ? 'bg-background shadow-sm' : 'hover:bg-background/50'
-            )}
-          >
-            <List className="h-3 w-3 mr-1.5" />
-            All
-          </button>
-          <button
-            onClick={() => setFilter('favorites')}
-            className={cn(
-              'flex-1 flex items-center justify-center px-3 py-1.5 text-xs font-medium rounded-md transition-colors',
-              filter === 'favorites' ? 'bg-background shadow-sm' : 'hover:bg-background/50'
-            )}
-          >
-            <Heart className="h-3 w-3 mr-1.5" />
-            Favorites
-          </button>
-          <button
-            onClick={() => setFilter('recent')}
-            className={cn(
-              'flex-1 flex items-center justify-center px-3 py-1.5 text-xs font-medium rounded-md transition-colors',
-              filter === 'recent' ? 'bg-background shadow-sm' : 'hover:bg-background/50'
-            )}
-          >
-            <Clock className="h-3 w-3 mr-1.5" />
-            Recent
-          </button>
-        </div>
+        <Tabs
+          value={filter}
+          onValueChange={(v) => setFilter(v as FilterType)}
+          className="mb-4 shrink-0"
+        >
+          <TabsList className="w-full">
+            <TabsTrigger value="all" className="flex-1">
+              <List className="h-3.5 w-3.5" />
+              All
+            </TabsTrigger>
+            <TabsTrigger value="favorites" className="flex-1">
+              <Heart className="h-3.5 w-3.5" />
+              Favorites
+            </TabsTrigger>
+            <TabsTrigger value="recent" className="flex-1">
+              <Clock className="h-3.5 w-3.5" />
+              Recent
+            </TabsTrigger>
+          </TabsList>
+        </Tabs>
 
         {/* Search Input */}
         <div className="relative mb-4 shrink-0">
@@ -165,7 +153,7 @@ export function FontSelector({
         </div>
 
         {/* Font List */}
-        <div className="flex-1 overflow-y-auto space-y-1 pr-2">
+        <div className="flex-1 overflow-y-auto space-y-1 pr-2 scrollbar">
           {filteredFonts.length === 0 ? (
             <Empty>
               <EmptyHeader>