From 30f88c6f9dfa6d63ba54d45f1c6fb1859bd5d685 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Kr=C3=BCger?= <valknar@pivoine.art>
Date: Mon, 23 Feb 2026 07:48:06 +0100
Subject: [PATCH] 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                     |  2 +-
 components/units/converter/MainConverter.tsx | 47 +++++++-------------
 2 files changed, 18 insertions(+), 31 deletions(-)

diff --git a/components/ui/Select.tsx b/components/ui/Select.tsx
index 3c9ccba..c978162 100644
--- a/components/ui/Select.tsx
+++ b/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',
diff --git a/components/units/converter/MainConverter.tsx b/components/units/converter/MainConverter.tsx
index 6064215..903563f 100644
--- a/components/units/converter/MainConverter.tsx
+++ b/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>
-        </CardHeader>
-        <CardContent>
-          <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-2">
-            {measures.map((measure) => (
-              <Button
-                key={measure}
-                variant={selectedMeasure === measure ? 'default' : 'outline'}
-                size="sm"
-                onClick={() => setSelectedMeasure(measure)}
-                className="justify-start"
+          <div className="flex items-center justify-between">
+            <CardTitle>Convert {formatMeasureName(selectedMeasure)}</CardTitle>
+            <div className="w-48">
+              <Select
+                value={selectedMeasure}
+                onChange={(e) => setSelectedMeasure(e.target.value as Measure)}
+                className="h-9 text-xs"
                 style={{
-                  backgroundColor:
-                    selectedMeasure === measure
-                      ? getCategoryColorHex(measure)
-                      : undefined,
-                  borderColor: selectedMeasure !== measure
-                    ? getCategoryColorHex(measure)
-                    : undefined,
-                  color: selectedMeasure === measure ? 'white' : undefined,
+                  borderLeft: `4px solid ${getCategoryColorHex(selectedMeasure)}`,
                 }}
               >
-                {formatMeasureName(measure)}
-              </Button>
-            ))}
+                {measures.map((measure) => (
+                  <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">