From 2c65abd231e8ebfe9eff39dfd9359a1a199098c9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Hartmut=20N=C3=B6renberg?= <hn@hartmut-noerenberg.com>
Date: Sun, 22 Mar 2026 21:55:17 +0100
Subject: [PATCH] refactor: redesign widget container for dark theme
 consistency
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

WidgetContainer redesign:
- Remove grey bg-gray-50/50 header background (clashed with dark theme)
- Header now uses transparent background with subtle separator line
- Add description prop — shows catalog description under title
- Drag grip dots appear on hover (6-dot pattern, hidden by default)
- Remove button appears on hover with red highlight
- Dark theme: bg-gray-900, border-gray-700/60, gray-800 separator
- Drag state: ring-2 ring-brand-400/30 with scale effect
- Hover state: shadow-md with border color transition

DashboardClient: passes widget.description to WidgetContainer

Co-Authored-By: claude-flow <ruv@ruv.net>
---
 .../components/dashboard/DashboardClient.tsx  |  1 +
 .../components/dashboard/WidgetContainer.tsx  | 40 +++++++++++++++----
 2 files changed, 34 insertions(+), 7 deletions(-)

diff --git a/apps/web/src/components/dashboard/DashboardClient.tsx b/apps/web/src/components/dashboard/DashboardClient.tsx
index 13154b7..ac02a50 100644
--- a/apps/web/src/components/dashboard/DashboardClient.tsx
+++ b/apps/web/src/components/dashboard/DashboardClient.tsx
@@ -157,6 +157,7 @@ export function DashboardClient() {
                   <div key={widget.id}>
                     <WidgetContainer
                       title={widget.title ?? getWidget(widget.type).label}
+                      description={getWidget(widget.type).description}
                       onRemove={() => removeWidget(widget.id)}
                     >
                       {renderWidget(widget.type, widget.config, (update) =>
diff --git a/apps/web/src/components/dashboard/WidgetContainer.tsx b/apps/web/src/components/dashboard/WidgetContainer.tsx
index 91de87c..02e70ef 100644
--- a/apps/web/src/components/dashboard/WidgetContainer.tsx
+++ b/apps/web/src/components/dashboard/WidgetContainer.tsx
@@ -4,31 +4,54 @@ import { motion } from "framer-motion";
 
 interface WidgetContainerProps {
   title: string;
+  description?: string;
   onRemove: () => void;
   children: React.ReactNode;
   isDragging?: boolean;
 }
 
-export function WidgetContainer({ title, onRemove, children, isDragging }: WidgetContainerProps) {
+export function WidgetContainer({ title, description, onRemove, children, isDragging }: WidgetContainerProps) {
   return (
     <motion.div
       initial={{ opacity: 0, y: 16 }}
       animate={{ opacity: 1, y: 0 }}
       transition={{ duration: 0.35, ease: "easeOut" }}
-      className={`flex flex-col h-full bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden transition-colors duration-200 ${
-        isDragging ? "shadow-lg border-brand-300" : "hover:border-brand-200 dark:hover:border-brand-800"
+      className={`flex flex-col h-full rounded-xl border overflow-hidden transition-all duration-200 ${
+        isDragging
+          ? "shadow-xl border-brand-400 dark:border-brand-500 scale-[1.01] ring-2 ring-brand-400/30"
+          : "bg-white dark:bg-gray-900 border-gray-200/80 dark:border-gray-700/60 shadow-sm hover:shadow-md hover:border-gray-300 dark:hover:border-gray-600"
       }`}
     >
-      {/* Header */}
-      <div className="flex items-center justify-between px-4 py-2.5 border-b border-gray-100 bg-gray-50/50 shrink-0 cursor-grab active:cursor-grabbing widget-drag-handle">
-        <span className="text-sm font-semibold text-gray-700 truncate">{title}</span>
+      {/* Header — clean, no background separation */}
+      <div className="flex items-center justify-between px-4 pt-3.5 pb-2 shrink-0 cursor-grab active:cursor-grabbing widget-drag-handle group">
+        <div className="min-w-0 flex-1">
+          <div className="flex items-center gap-2">
+            {/* Drag grip dots */}
+            <svg
+              className="w-3.5 h-5 text-gray-300 dark:text-gray-600 shrink-0 opacity-0 group-hover:opacity-100 transition-opacity"
+              viewBox="0 0 14 20"
+              fill="currentColor"
+            >
+              <circle cx="4" cy="4" r="1.5" />
+              <circle cx="10" cy="4" r="1.5" />
+              <circle cx="4" cy="10" r="1.5" />
+              <circle cx="10" cy="10" r="1.5" />
+              <circle cx="4" cy="16" r="1.5" />
+              <circle cx="10" cy="16" r="1.5" />
+            </svg>
+            <span className="text-sm font-semibold text-gray-800 dark:text-gray-100 truncate">{title}</span>
+          </div>
+          {description && (
+            <p className="text-[11px] text-gray-400 dark:text-gray-500 truncate mt-0.5 ml-[22px]">{description}</p>
+          )}
+        </div>
         <button
           type="button"
           onClick={(e) => {
             e.stopPropagation();
             onRemove();
           }}
-          className="ml-2 p-1 text-gray-400 hover:text-gray-700 hover:bg-gray-100 rounded transition-colors shrink-0"
+          className="ml-2 p-1.5 text-gray-300 dark:text-gray-600 hover:text-red-500 dark:hover:text-red-400 hover:bg-red-50 dark:hover:bg-red-950/30 rounded-lg transition-colors shrink-0 opacity-0 group-hover:opacity-100"
           title="Remove widget"
         >
           <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -37,6 +60,9 @@ export function WidgetContainer({ title, onRemove, children, isDragging }: Widge
         </button>
       </div>
 
+      {/* Subtle separator */}
+      <div className="mx-4 border-t border-gray-100 dark:border-gray-800" />
+
       {/* Body */}
       <div className="flex-1 overflow-auto p-4">{children}</div>
     </motion.div>