fix: dashboard edit mode renders live widgets

src/components/dashboard-editor.tsx

@@ -3,13 +3,13 @@
 import "react-grid-layout/css/styles.css";
 import "react-resizable/css/styles.css";
 
-import { useEffect, useState, useTransition } from "react";
+import { useEffect, useState, useTransition, type ReactNode } from "react";
 import { useRouter } from "next/navigation";
 import { GridLayout } from "react-grid-layout";
 import type { Layout } from "react-grid-layout";
 import { GripVertical, Settings2, Trash2, RotateCcw, Plus, LayoutGrid } from "lucide-react";
 import type { DashboardLayout, WidgetPlacement, PresetId } from "@/lib/dashboard";
-import { computePresetLayoutFromMetas } from "@/lib/dashboard";
+import { computePresetLayoutFromMetas, widgetContentKey } from "@/lib/dashboard";
 import type { SerializedWidgetMeta } from "@/modules/_core/registry";
 import { saveDashboardLayout, resetDashboardLayout } from "@/app/d/actions";
 import { Button } from "@/components/ui/button";
@@ -23,10 +23,12 @@ export function DashboardEditor({
   dashboard,
   layout: initialLayout,
   widgetMetas,
+  widgetContents,
 }: {
   dashboard: { id: string; name: string; slug: string };
   layout: DashboardLayout;
   widgetMetas: SerializedWidgetMeta[];
+  widgetContents: Record<string, ReactNode>;
 }) {
   const router = useRouter();
   const [isPending, startTransition] = useTransition();
@@ -213,6 +215,7 @@ export function DashboardEditor({
         >
           {placements.map((placement, i) => {
             const meta = widgetMetas.find((m) => m.id === placement.widgetId);
+            const content = widgetContents[widgetContentKey(placement)];
             return (
               <div
                 key={placementKey(placement, i)}
@@ -240,8 +243,12 @@ export function DashboardEditor({
                     <Trash2 className="size-4" />
                   </button>
                 </div>
-                <div className="flex-1 flex items-center justify-center p-4">
-                  <p className="text-xs text-muted-foreground">{meta?.description}</p>
+                <div className="flex-1 min-h-0 overflow-auto p-4">
+                  {content ?? (
+                    <p className="text-xs text-muted-foreground text-center">
+                      {meta?.description ?? "Preview available after save"}
+                    </p>
+                  )}
                 </div>
               </div>
             );