From e9927bf0f51a9e2f9c52bd7e91cec33748448919 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Kr=C3=BCger?= <valknar@pivoine.art>
Date: Tue, 3 Mar 2026 19:06:00 +0100
Subject: [PATCH] feat: add copy button with toast to units result field

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 components/units/MainConverter.tsx | 23 ++++++++++++++++++-----
 1 file changed, 18 insertions(+), 5 deletions(-)

diff --git a/components/units/MainConverter.tsx b/components/units/MainConverter.tsx
index 5e1ecc3..8fd08cb 100644
--- a/components/units/MainConverter.tsx
+++ b/components/units/MainConverter.tsx
@@ -1,7 +1,8 @@
 'use client';
 
 import { useState, useEffect, useCallback } from 'react';
-import { ArrowLeftRight, BarChart3, Grid3X3 } from 'lucide-react';
+import { ArrowLeftRight, BarChart3, Grid3X3, Copy } from 'lucide-react';
+import { toast } from 'sonner';
 import SearchUnits from './SearchUnits';
 import VisualComparison from './VisualComparison';
 import {
@@ -131,10 +132,9 @@ export default function MainConverter() {
                     onClick={() => handleCategorySelect(measure)}
                     className={cn(
                       'w-full flex items-center gap-2 px-2 py-1.5 rounded-lg transition-all text-left',
-                      'border-l-2',
                       isSelected
-                        ? 'bg-primary/10 border-primary text-primary'
-                        : 'border-transparent text-foreground/65 hover:bg-primary/8 hover:text-foreground'
+                        ? 'bg-primary/10 text-primary'
+                        : 'text-foreground/65 hover:bg-primary/8 hover:text-foreground'
                     )}
                   >
                     <span className="flex-1 text-xs font-mono truncate">{formatMeasureName(measure)}</span>
@@ -218,7 +218,20 @@ export default function MainConverter() {
             {/* Result display */}
             {resultValue !== null && (
               <div className="mt-3 px-3 py-2.5 rounded-lg bg-primary/5 border border-primary/15">
-                <div className="text-[10px] text-muted-foreground/50 font-mono mb-0.5">Result</div>
+                <div className="flex items-center justify-between mb-0.5">
+                  <div className="text-[10px] text-muted-foreground/50 font-mono">Result</div>
+                  <button
+                    onClick={() => {
+                      const text = `${formatNumber(resultValue)} ${targetUnit}`;
+                      navigator.clipboard.writeText(text);
+                      toast.success('Copied', { description: text, duration: 2000 });
+                    }}
+                    title="Copy result"
+                    className="w-5 h-5 flex items-center justify-center rounded text-muted-foreground/40 hover:text-primary transition-colors"
+                  >
+                    <Copy className="w-3 h-3" />
+                  </button>
+                </div>
                 <div className="flex items-baseline gap-2">
                   <span className="text-xl font-bold tabular-nums font-mono bg-gradient-to-r from-primary to-pink-400 bg-clip-text text-transparent">
                     {formatNumber(resultValue)}