From 1c67cd46bb21fc8b896d9949ddb6723974de8361 Mon Sep 17 00:00:00 2001
From: DanielS <daniel.schumacher@caspos.de>
Date: Tue, 11 Aug 2026 22:08:40 +0200
Subject: [PATCH] refactor(wizard): revert basket to direct edit/delete layout

---
 shop/components/wizard/summary-sidebar.tsx | 107 ++++++++-------------
 1 file changed, 41 insertions(+), 66 deletions(-)

diff --git a/shop/components/wizard/summary-sidebar.tsx b/shop/components/wizard/summary-sidebar.tsx
index 1fd62c3..a8bd96c 100644
--- a/shop/components/wizard/summary-sidebar.tsx
+++ b/shop/components/wizard/summary-sidebar.tsx
@@ -81,13 +81,6 @@ export function SummarySidebar({
   prevStep,
 }: SummarySidebarProps) {
   const [isOpen, setIsOpen] = React.useState(false)
-  const [selectedBasketIdx, setSelectedBasketIdx] = React.useState<number | null>(null)
-
-  // When editing a basket item via pencil, open the modal for that item
-  const handleEditBasketItem = (idx: number) => {
-    editBasketItem(idx)
-    setIsOpen(true)
-  }
 
   const fmt = (val: number) => new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(val)
 
@@ -207,7 +200,7 @@ export function SummarySidebar({
                   <span>zzgl. 19% MwSt.:</span>
                   <span className="tabular-nums">{fmt(oneTimeTax)}</span>
                 </div>
-                <div className="flex justify-between text-base font-bold text-sky-400">
+                <div className="flex justify-between text-base font-bold text-primary">
                   <span>Gesamtbetrag (brutto):</span>
                   <span className="tabular-nums">{fmt(oneTimeGross)}</span>
                 </div>
@@ -222,7 +215,7 @@ export function SummarySidebar({
                   <span>zzgl. 19% MwSt.:</span>
                   <span className="tabular-nums">{fmt(monthlyTax)} / mtl.</span>
                 </div>
-                <div className="flex justify-between text-base font-bold text-sky-400">
+                <div className="flex justify-between text-base font-bold text-primary">
                   <span>Gesamtbetrag (brutto):</span>
                   <span className="tabular-nums">{fmt(monthlyGross)} / mtl.</span>
                 </div>
@@ -251,66 +244,48 @@ export function SummarySidebar({
             ))}
           </div>
 
-          {/* Kassen-Liste unten (selectable) */}
+          {/* Warenkorb List (Scrollable) */}
           {basketItems.length > 0 && (
-            <div className="shrink-0 pt-3 border-t border-white/10 space-y-2">
-              <p className="text-xs font-semibold text-slate-500 uppercase tracking-wider">Kassen ({basketItems.length}):</p>
-              <div className="flex flex-wrap gap-1.5 max-h-28 overflow-y-auto pr-1 scrollbar-thin scrollbar-thumb-white/10 scrollbar-track-transparent">
+            <div className="flex-1 flex flex-col min-h-0 pt-3 border-t border-white/10 space-y-2 overflow-hidden">
+              <p className="text-xs font-semibold text-slate-500 uppercase tracking-wider shrink-0">Warenkorb ({basketItems.length}):</p>
+              <div className="flex-1 overflow-y-auto pr-1 space-y-1.5 subpixel-antialiased scrollbar-thin scrollbar-thumb-white/10 scrollbar-track-transparent">
                 {basketItems.map((item, idx) => (
-                  <button
-                    key={idx}
-                    onClick={() => setSelectedBasketIdx(selectedBasketIdx === idx ? null : idx)}
-                    className={`flex items-center gap-2 text-xs px-3 py-2 rounded-lg border transition-all duration-200 text-left group ${
-                      selectedBasketIdx === idx
-                        ? 'bg-sky-500/15 border-sky-500/40 text-white shadow-[0_0_10px_rgba(56,189,248,0.15)]'
-                        : idx === editingIdx
-                        ? 'bg-blue-500/10 border-blue-500/30 text-white'
-                        : 'bg-white/5 border-white/10 text-slate-400 hover:bg-white/10 hover:text-white'
-                    }`}
-                  >
-                    <span className="font-medium truncate max-w-[120px]">{item.deviceName}</span>
-                    {item.licenseNumber && (
-                      <span className="text-[10px] text-slate-500 truncate max-w-[80px]">{item.licenseNumber}</span>
-                    )}
-                  </button>
+                  <div key={idx} className={`flex justify-between items-center text-xs bg-white/5 p-2 rounded border transition-all duration-300 ${idx === editingIdx ? 'border-primary/50 shadow-[0_0_10px_rgba(var(--oklch-primary),0.3)]' : 'border-white/10'}`}>
+                    <div className="flex flex-col">
+                      <span className="text-white font-medium">{item.deviceName}</span>
+                      <span className="text-[10px] text-slate-400 capitalize">
+                        {item.billingInterval === 'one_time' ? 'Kauf' : 'Abo'}
+                        {item.licenseNumber ? ` · Lizenz: ${item.licenseNumber}` : ''}
+                      </span>
+                    </div>
+                    <div className="flex items-center gap-1.5">
+                      <Button
+                        type="button"
+                        variant="ghost"
+                        size="icon"
+                        className="w-7 h-7 hover:bg-white/10 text-slate-400 hover:text-white"
+                        onClick={() => {
+                          editBasketItem(idx)
+                          setIsOpen(true)
+                        }}
+                        title="Kasse bearbeiten"
+                      >
+                        <Pencil className="w-3.5 h-3.5" />
+                      </Button>
+                      <Button
+                        type="button"
+                        variant="ghost"
+                        size="icon"
+                        className="w-7 h-7 hover:bg-white/10 text-destructive hover:text-red-400"
+                        onClick={() => deleteBasketItem(idx)}
+                        title="Kasse löschen"
+                      >
+                        <Trash2 className="w-3.5 h-3.5" />
+                      </Button>
+                    </div>
+                  </div>
                 ))}
               </div>
-
-              {/* Selected basket item actions */}
-              {selectedBasketIdx !== null && basketItems[selectedBasketIdx] && (
-                <div className="flex items-center gap-2 pt-1">
-                  <div className="flex-1 min-w-0">
-                    <p className="text-xs text-white font-medium truncate">{basketItems[selectedBasketIdx].deviceName}</p>
-                    <p className="text-[10px] text-slate-500 capitalize">
-                      {basketItems[selectedBasketIdx].billingInterval === 'one_time' ? 'Kauf' : 'Abo'}
-                      {basketItems[selectedBasketIdx].licenseNumber ? ` · ${basketItems[selectedBasketIdx].licenseNumber}` : ''}
-                    </p>
-                  </div>
-                  <Button
-                    type="button"
-                    variant="ghost"
-                    size="icon"
-                    className="w-7 h-7 hover:bg-sky-500/20 text-sky-400 hover:text-sky-300"
-                    onClick={() => handleEditBasketItem(selectedBasketIdx)}
-                    title="Name / Lizenz bearbeiten"
-                  >
-                    <Pencil className="w-3.5 h-3.5" />
-                  </Button>
-                  <Button
-                    type="button"
-                    variant="ghost"
-                    size="icon"
-                    className="w-7 h-7 hover:bg-red-500/20 text-red-400 hover:text-red-300"
-                    onClick={() => {
-                      deleteBasketItem(selectedBasketIdx)
-                      setSelectedBasketIdx(null)
-                    }}
-                    title="Kasse löschen"
-                  >
-                    <Trash2 className="w-3.5 h-3.5" />
-                  </Button>
-                </div>
-              )}
             </div>
           )}
         </CardContent>
@@ -318,7 +293,7 @@ export function SummarySidebar({
           <Button
             type="button"
             variant="outline"
-            className="w-full border-sky-500/30 text-white hover:bg-sky-500/10 gap-2 h-10 text-sm"
+            className="w-full border-primary/30 text-white hover:bg-primary/10 gap-2 h-10 text-sm"
             onClick={() => setIsOpen(true)}
             disabled={isNextStepDisabled}
           >