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>
             );

src/components/dashboard-widget-content.tsx

@@ -0,0 +1,32 @@
+import { Suspense } from "react";
+import type { WidgetPlacement } from "@/lib/dashboard";
+import { getWidget } from "@/modules/_core";
+import type { WidgetContext } from "@/modules/_core/module";
+import { Skeleton } from "@/components/ui/skeleton";
+
+export function DashboardWidgetContent({
+  placement,
+  ctx,
+}: {
+  placement: WidgetPlacement;
+  ctx: WidgetContext;
+}) {
+  const widget = getWidget(placement.widgetId);
+  if (!widget) {
+    return <p className="text-xs text-muted-foreground">Unknown widget</p>;
+  }
+
+  return (
+    <Suspense
+      fallback={
+        <div className="space-y-3">
+          <Skeleton className="h-4 w-3/4" />
+          <Skeleton className="h-4 w-1/2" />
+          <Skeleton className="h-4 w-2/3" />
+        </div>
+      }
+    >
+      {widget.render({ config: placement.config, ctx })}
+    </Suspense>
+  );
+}