feat(05-01): dashboard grid, clock widget, widget registry, store, and tests

- Install react-grid-layout@2.2.3 and react-resizable - Create widget-registry.tsx with all 4 widget types, WIDGET_CONSTRAINTS, WidgetProps - Create dashboard-api.ts with fetch/save layout and widget CRUD functions - Create dashboard-store.ts (Zustand, NO persist — D-05) with edit mode and auto-save on exit - Create DashboardGrid with react-grid-layout v2 Responsive, ResizeObserver width - Create ClockWidget using Intl.DateTimeFormat (no manual UTC offsets) - Create WidgetWrapper with drag handle and delete button in edit mode - Create EditModeToggle (pencil/checkmark), WidgetCatalogModal (2x2 grid) - Rewrite portal page.tsx as dashboard with grid, edit toggle, widget catalog - Add ResizeObserver polyfill in test setup, CSS mock support in vitest config - All 5 tests green (dashboard grid + clock widget) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-06-24 11:21:43 +02:00
parent 792b7661d8
commit d5e1c42e64
14 changed files with 1115 additions and 29 deletions
@@ -0,0 +1,63 @@
+'use client';
+
+import { useTranslations } from 'next-intl';
+
+interface EditModeToggleProps {
+  isEditMode: boolean;
+  onToggle: () => void;
+}
+
+/**
+ * Pencil / Checkmark icon button to toggle dashboard edit mode (D-01).
+ * Active state (edit mode) uses primary background.
+ */
+export function EditModeToggle({ isEditMode, onToggle }: EditModeToggleProps) {
+  const t = useTranslations('widgets');
+
+  return (
+    <button
+      onClick={onToggle}
+      className={`inline-flex items-center justify-center rounded-md p-2 transition-colors ${
+        isEditMode
+          ? 'bg-primary text-primary-foreground hover:opacity-90'
+          : 'text-muted-foreground hover:bg-muted hover:text-foreground'
+      }`}
+      aria-pressed={isEditMode}
+      aria-label={isEditMode ? t('saveChanges') : t('editMode')}
+      title={isEditMode ? t('saveChanges') : t('editMode')}
+    >
+      {isEditMode ? (
+        // Checkmark icon
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="20"
+          height="20"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        >
+          <polyline points="20 6 9 17 4 12" />
+        </svg>
+      ) : (
+        // Pencil icon
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="20"
+          height="20"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        >
+          <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" />
+          <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" />
+        </svg>
+      )}
+    </button>
+  );
+}