feat(web): add widget picker drawer for dashboard customization (#498)

Co-authored-by: Jason Woltje <jason@diversecanvas.com>
Co-committed-by: Jason Woltje <jason@diversecanvas.com>

apps/web/src/app/(authenticated)/page.tsx

@@ -4,6 +4,7 @@ import { useState, useEffect, useCallback, useRef } from "react";
 import type { ReactElement } from "react";
 import type { WidgetPlacement } from "@mosaic/shared";
 import { WidgetGrid } from "@/components/widgets/WidgetGrid";
+import { WidgetPicker } from "@/components/widgets/WidgetPicker";
 import { DEFAULT_LAYOUT } from "@/components/widgets/defaultLayout";
 import { fetchDefaultLayout, createLayout, updateLayout } from "@/lib/api/layouts";
 import { useWorkspaceId } from "@/lib/hooks";
@@ -13,6 +14,7 @@ export default function DashboardPage(): ReactElement {
   const [layout, setLayout] = useState<WidgetPlacement[]>(DEFAULT_LAYOUT);
   const [layoutId, setLayoutId] = useState<string | null>(null);
   const [isEditing, setIsEditing] = useState(false);
+  const [isPickerOpen, setIsPickerOpen] = useState(false);
   const [isLoading, setIsLoading] = useState(true);
 
   // Debounce timer for auto-saving layout changes
@@ -95,6 +97,15 @@ export default function DashboardPage(): ReactElement {
     [layout, saveLayout]
   );
 
+  const handleAddWidget = useCallback(
+    (placement: WidgetPlacement) => {
+      const updated = [...layout, placement];
+      setLayout(updated);
+      saveLayout(updated);
+    },
+    [layout, saveLayout]
+  );
+
   if (isLoading) {
     return (
       <div className="flex items-center justify-center" style={{ minHeight: 400 }}>
@@ -125,24 +136,47 @@ export default function DashboardPage(): ReactElement {
         >
           Dashboard
         </h1>
-        <button
-          onClick={() => {
-            setIsEditing((prev) => !prev);
-          }}
-          style={{
-            padding: "6px 14px",
-            borderRadius: "var(--r)",
-            border: isEditing ? "1px solid var(--primary)" : "1px solid var(--border)",
-            background: isEditing ? "var(--primary)" : "transparent",
-            color: isEditing ? "#fff" : "var(--text-2)",
-            fontSize: "0.83rem",
-            fontWeight: 500,
-            cursor: "pointer",
-            transition: "all 0.15s ease",
-          }}
-        >
-          {isEditing ? "Done" : "Edit Layout"}
-        </button>
+        <div className="flex items-center gap-2">
+          {isEditing && (
+            <button
+              onClick={(): void => {
+                setIsPickerOpen(true);
+              }}
+              style={{
+                padding: "6px 14px",
+                borderRadius: "var(--r)",
+                border: "1px solid var(--border)",
+                background: "transparent",
+                color: "var(--text-2)",
+                fontSize: "0.83rem",
+                fontWeight: 500,
+                cursor: "pointer",
+                transition: "all 0.15s ease",
+              }}
+            >
+              + Add Widget
+            </button>
+          )}
+          <button
+            onClick={(): void => {
+              setIsEditing((prev) => !prev);
+              if (isEditing) setIsPickerOpen(false);
+            }}
+            style={{
+              padding: "6px 14px",
+              borderRadius: "var(--r)",
+              border: isEditing ? "1px solid var(--primary)" : "1px solid var(--border)",
+              background: isEditing ? "var(--primary)" : "transparent",
+              color: isEditing ? "#fff" : "var(--text-2)",
+              fontSize: "0.83rem",
+              fontWeight: 500,
+              cursor: "pointer",
+              transition: "all 0.15s ease",
+            }}
+          >
+            {isEditing ? "Done" : "Edit Layout"}
+          </button>
+        </div>
       </div>
 
       {/* Widget grid */}
@@ -152,6 +186,16 @@ export default function DashboardPage(): ReactElement {
         {...(isEditing && { onRemoveWidget: handleRemoveWidget })}
         isEditing={isEditing}
       />
+
+      {/* Widget picker drawer */}
+      <WidgetPicker
+        open={isPickerOpen}
+        onClose={(): void => {
+          setIsPickerOpen(false);
+        }}
+        onAddWidget={handleAddWidget}
+        currentLayout={layout}
+      />
     </div>
   );
 }