From f500a63e9730f6b3e5dff72999d41590c914bff4 Mon Sep 17 00:00:00 2001
From: DanielS <daniel.schumacher@caspos.de>
Date: Tue, 11 Aug 2026 17:38:40 +0200
Subject: [PATCH] style(wizard): move categories list under left sidebar status
 stepper

---
 shop/components/order-wizard.tsx | 145 ++++++++++++++-----------------
 1 file changed, 67 insertions(+), 78 deletions(-)

diff --git a/shop/components/order-wizard.tsx b/shop/components/order-wizard.tsx
index d4a390f..990ecbd 100644
--- a/shop/components/order-wizard.tsx
+++ b/shop/components/order-wizard.tsx
@@ -845,8 +845,18 @@ export function OrderWizard({
 
   return (
     <div className="max-w-7xl mx-auto px-4 py-6">
+      {/* Global Main Header over all columns */}
+      <div className="mb-6">
+        <h1 className="text-3xl font-extrabold tracking-tight mb-1 text-gradient">
+          Konfigurieren Sie Ihre Lösung
+        </h1>
+        <p className="text-slate-400 text-sm">
+          Wählen Sie das passende Paket und die benötigten Module für Ihr Business.
+        </p>
+      </div>
+
       <div className="grid grid-cols-1 lg:grid-cols-12 gap-8 items-start">
-        {/* Left Side Status Stepper for ALL steps */}
+        {/* Left Side Status Stepper & Categories for ALL steps */}
         <div className="lg:col-span-3 bg-slate-900/50 backdrop-blur-md border border-white/10 rounded-2xl p-6 space-y-6 sticky top-6">
           <div>
             <h2 className="text-xs font-bold uppercase tracking-wider text-slate-400 mb-1">
@@ -857,21 +867,62 @@ export function OrderWizard({
             </p>
           </div>
           <ProgressStepper step={step} basketItemsCount={basketItems.length} orientation="vertical" />
+
+          {/* Step 3 Categories inside left sidebar */}
+          {step === 3 && (
+            <div className="pt-4 border-t border-white/10 space-y-3">
+              <h3 className="text-xs font-bold uppercase tracking-wider text-slate-400">
+                Kategorien
+              </h3>
+              <div className="flex flex-col gap-2">
+                {visibleCategories.map((cat) => {
+                  const sel = selections[cat.id]
+                  const hasSelection = (sel?.productIds && sel.productIds.length > 0) || !!sel?.productId
+                  const isRequired = cat.is_required
+                  const isActive = activeCategoryId === cat.id
+
+                  return (
+                    <button
+                      key={cat.id}
+                      onClick={() => setActiveCategoryId(cat.id)}
+                      className={`flex items-center gap-2.5 p-2.5 rounded-xl border transition-all duration-300 text-left relative overflow-hidden group ${isActive
+                          ? 'bg-primary/10 border-primary text-white shadow-[0_0_15px_rgba(59,130,246,0.2)]'
+                          : 'bg-slate-900/50 border-white/5 text-slate-400 hover:bg-slate-900 hover:border-white/20 hover:text-white'
+                        }`}
+                    >
+                      {isActive && (
+                        <div className="absolute left-0 top-0 bottom-0 w-1 bg-primary" />
+                      )}
+
+                      <div className={`p-1.5 rounded-lg transition-colors ${isActive ? 'bg-primary/20 text-primary' : 'bg-white/5 text-slate-400 group-hover:text-white'}`}>
+                        <CategoryIcon icon={cat.icon} className="w-3.5 h-3.5" />
+                      </div>
+
+                      <div className="flex-1 min-w-0">
+                        <p className={`text-xs font-semibold truncate ${isActive ? 'text-white' : 'text-slate-300 group-hover:text-white'}`}>
+                          {cat.name}
+                        </p>
+                      </div>
+
+                      {hasSelection ? (
+                        <span className="text-[9px] px-1.5 py-0.2 rounded-full font-semibold shrink-0 border border-emerald-500/30 text-emerald-400 bg-emerald-500/10">
+                          ✓
+                        </span>
+                      ) : isRequired ? (
+                        <span className="text-[9px] px-1.5 py-0.2 rounded-full font-semibold shrink-0 border border-amber-500/30 text-amber-400 bg-amber-500/10">
+                          !
+                        </span>
+                      ) : null}
+                    </button>
+                  )
+                })}
+              </div>
+            </div>
+          )}
         </div>
 
         {/* Right Main Content Column */}
         <div className="lg:col-span-9 space-y-6">
-          {/* Dynamic Header */}
-          {step !== 3 && (
-            <div className="mb-8">
-              <h1 className="text-4xl font-extrabold tracking-tight mb-2 text-gradient">
-                Konfigurieren Sie Ihre Lösung
-              </h1>
-              <p className="text-slate-400 text-base">
-                Wählen Sie das passende Paket und die benötigten Module für Ihr Business.
-              </p>
-            </div>
-          )}
 
           <AnimatePresence mode="wait">
             {/* Step 1: Customer */}
@@ -932,74 +983,12 @@ export function OrderWizard({
             initial={{ opacity: 0, x: 20 }}
             animate={{ opacity: 1, x: 0 }}
             exit={{ opacity: 0, x: -20 }}
-            className="h-[calc(100vh-100px)] overflow-hidden bg-slate-950/70 backdrop-blur-xl border border-slate-800/80 rounded-2xl shadow-2xl p-2"
+            className="h-[calc(100vh-160px)] overflow-hidden bg-slate-950/70 backdrop-blur-xl border border-slate-800/80 rounded-2xl shadow-2xl p-2"
           >
-            <div className="grid grid-cols-1 lg:grid-cols-6 gap-4 h-full items-stretch">
+            <div className="grid grid-cols-1 lg:grid-cols-5 gap-4 h-full items-stretch">
 
-                  {/* LEFT inside step 3: Categories Sidebar Menu */}
-                  <div className="lg:col-span-2 flex flex-col justify-start p-3 pr-2 space-y-4 overflow-y-auto scrollbar-thin scrollbar-thumb-slate-800 scrollbar-track-transparent">
-                    <div>
-                      <h1 className="text-xl font-extrabold tracking-tight mb-1 text-gradient">
-                        Kategorien & Optionen
-                      </h1>
-                      <p className="text-slate-400 text-xs">
-                        Wählen Sie das passende Paket und die benötigten Module für Ihr Business.
-                      </p>
-                    </div>
-
-                    <div className="flex flex-col gap-2.5">
-                  {visibleCategories.map((cat) => {
-                    const sel = selections[cat.id]
-                    const hasSelection = (sel?.productIds && sel.productIds.length > 0) || !!sel?.productId
-                    const isRequired = cat.is_required
-                    const isActive = activeCategoryId === cat.id
-
-                    return (
-                      <button
-                        key={cat.id}
-                        onClick={() => setActiveCategoryId(cat.id)}
-                        className={`flex items-center gap-3 p-3.5 rounded-xl border transition-all duration-300 text-left relative overflow-hidden group ${isActive
-                            ? 'bg-primary/10 border-primary text-white shadow-[0_0_20px_rgba(59,130,246,0.2)]'
-                            : 'bg-slate-900/50 border-white/5 text-slate-400 hover:bg-slate-900 hover:border-white/20 hover:text-white'
-                          }`}
-                      >
-                        {/* Left glow line for active category */}
-                        {isActive && (
-                          <div className="absolute left-0 top-0 bottom-0 w-1 bg-primary" />
-                        )}
-
-                        <div className={`p-2 rounded-lg transition-colors ${isActive ? 'bg-primary/20 text-primary' : 'bg-white/5 text-slate-400 group-hover:text-white'
-                          }`}>
-                          <CategoryIcon icon={cat.icon} className="w-4 h-4" />
-                        </div>
-
-                        <div className="flex-1 min-w-0">
-                          <p className={`text-sm font-semibold truncate ${isActive ? 'text-white' : 'text-slate-300 group-hover:text-white'}`}>
-                            {cat.name}
-                          </p>
-                          <p className="text-[11px] text-slate-500 truncate mt-0.5">
-                            {cat.description || 'Optionen ansehen'}
-                          </p>
-                        </div>
-
-                        {/* Status indicators */}
-                        {hasSelection ? (
-                          <span className="text-[10px] px-2 py-0.5 rounded-full font-semibold shrink-0 border border-emerald-500/30 text-emerald-400 bg-emerald-500/10 shadow-sm">
-                            Ausgewählt
-                          </span>
-                        ) : isRequired ? (
-                          <span className="text-[10px] px-2 py-0.5 rounded-full font-semibold shrink-0 border border-amber-500/30 text-amber-400 bg-amber-500/10 shadow-sm">
-                            Erforderlich
-                          </span>
-                        ) : null}
-                      </button>
-                    )
-                  })}
-                </div>
-              </div>
-
-              {/* CENTER: Scrollable Category Selection */}
-              <div className="lg:col-span-2 flex flex-col h-full overflow-hidden border-x border-slate-800 p-2 px-3">
+              {/* LEFT: Scrollable Category Selection */}
+              <div className="lg:col-span-3 flex flex-col h-full overflow-hidden p-2 px-3">
                 <div className="flex-1 overflow-y-auto pr-2 subpixel-antialiased scrollbar-thin scrollbar-thumb-slate-800 scrollbar-track-transparent">
                   {/* Upgrade-Modus Hinweis-Banner */}
                   {upgradeMode && lockedDeviceId && (