fix: dashboard edit mode renders live widgets

src/app/d/[slug]/page.tsx

@@ -1,11 +1,12 @@
 import { notFound } from "next/navigation";
 import { Suspense } from "react";
 import { getCurrentSession } from "@/lib/session";
-import { parseDashboardLayout } from "@/lib/dashboard";
+import { parseDashboardLayout, widgetContentKey } from "@/lib/dashboard";
 import { computeDefaultLayout } from "@/lib/dashboard.server";
 import { getWidget, getWidgetMetas } from "@/modules/_core";
 import { getDashboardBySlug } from "@/app/d/actions";
 import { DashboardEditor } from "@/components/dashboard-editor";
+import { DashboardWidgetContent } from "@/components/dashboard-widget-content";
 import { EditDashboardButton } from "@/components/edit-dashboard-button";
 import { DashboardSwitcher } from "@/components/dashboard-switcher";
 import { DashboardTab } from "@/components/dashboard-tab";
@@ -52,11 +53,24 @@ export default async function DashboardPage({
   const widgetMetas = getWidgetMetas();
 
   if (isEditing) {
+    const ctx = { userId: user.id, householdId: household.id };
+    const widgetContents = Object.fromEntries(
+      layout.widgets.map((placement) => [
+        widgetContentKey(placement),
+        <DashboardWidgetContent
+          key={widgetContentKey(placement)}
+          placement={placement}
+          ctx={ctx}
+        />,
+      ]),
+    );
+
     return (
       <DashboardEditor
         dashboard={{ id: dashboard.id, name: dashboard.name, slug: dashboard.slug }}
         layout={layout}
         widgetMetas={widgetMetas}
+        widgetContents={widgetContents}
       />
     );
   }

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

src/lib/dashboard.ts

@@ -10,6 +10,10 @@ export type WidgetPlacement = {
   h: number;
 };
 
+export function widgetContentKey(placement: Pick<WidgetPlacement, "widgetId" | "config">): string {
+  return `${placement.widgetId}::${JSON.stringify(placement.config)}`;
+}
+
 export type DashboardLayout = {
   version: 1;
   widgets: WidgetPlacement[];