feat: replace category grid with select dropdown in units converter

- Consolidate category selection into the main converter card
- Use a space-saving Select component for category switching
- Add category color indicator to the select dropdown

components/ui/Select.tsx

@@ -18,7 +18,7 @@ const Select = React.forwardRef<HTMLSelectElement, SelectProps>(
         )}
         <select
           className={cn(
-            'flex h-10 w-full rounded-xl border border-border bg-input px-3 py-2',
+            'flex h-10 w-full rounded-lg border border-border bg-input px-3 py-2',
             'text-sm ring-offset-background',
             'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 focus-visible:border-primary/50',
             'disabled:cursor-not-allowed disabled:opacity-50 transition-all duration-200',

components/units/converter/MainConverter.tsx

@@ -5,6 +5,7 @@ import { Copy, Star, Check, ArrowLeftRight, BarChart3 } from 'lucide-react';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/Card';
 import { Input } from '@/components/ui/Input';
 import { Button } from '@/components/ui/Button';
+import { Select } from '@/components/ui/Select';
 import SearchUnits from './SearchUnits';
 import VisualComparison from './VisualComparison';
 import CommandPalette from '@/components/units/ui/CommandPalette';
@@ -122,42 +123,28 @@ export default function MainConverter() {
         <SearchUnits onSelectUnit={handleSearchSelect} />
       </div>
 
-      {/* Category Selection */}
+      {/* Main Converter Card */}
       <Card>
         <CardHeader>
-          <CardTitle>Select Category</CardTitle>
+          <div className="flex items-center justify-between">
-        </CardHeader>
+            <CardTitle>Convert {formatMeasureName(selectedMeasure)}</CardTitle>
-        <CardContent>
+            <div className="w-48">
-          <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-2">
+              <Select
-            {measures.map((measure) => (
+                value={selectedMeasure}
-              <Button
+                onChange={(e) => setSelectedMeasure(e.target.value as Measure)}
-                key={measure}
+                className="h-9 text-xs"
-                variant={selectedMeasure === measure ? 'default' : 'outline'}
-                size="sm"
-                onClick={() => setSelectedMeasure(measure)}
-                className="justify-start"
                 style={{
-                  backgroundColor:
+                  borderLeft: `4px solid ${getCategoryColorHex(selectedMeasure)}`,
-                    selectedMeasure === measure
-                      ? getCategoryColorHex(measure)
-                      : undefined,
-                  borderColor: selectedMeasure !== measure
-                    ? getCategoryColorHex(measure)
-                    : undefined,
-                  color: selectedMeasure === measure ? 'white' : undefined,
                 }}
               >
-                {formatMeasureName(measure)}
+                {measures.map((measure) => (
-              </Button>
+                  <option key={measure} value={measure}>
-            ))}
+                    {formatMeasureName(measure)}
+                  </option>
+                ))}
+              </Select>
+            </div>
           </div>
-        </CardContent>
-      </Card>
-
-      {/* Input Section */}
-      <Card>
-        <CardHeader>
-          <CardTitle>Convert {formatMeasureName(selectedMeasure)}</CardTitle>
         </CardHeader>
         <CardContent className="space-y-4">
           <div className="flex gap-2 items-end">