feat(#41): implement Widget/HUD system

- BaseWidget wrapper with loading/error states
- WidgetRegistry for central widget management
- WidgetGrid with react-grid-layout integration
- TasksWidget, CalendarWidget, QuickCaptureWidget
- useLayouts hooks for layout persistence
- Comprehensive test suite (TDD approach)

apps/web/src/hooks/__tests__/useLayouts.test.tsx

@@ -0,0 +1,215 @@
+/**
+ * useLayouts Hook Tests
+ * Following TDD principles
+ */
+
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { renderHook, waitFor } from "@testing-library/react";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import type { ReactNode } from "react";
+
+// We'll implement this hook
+import { useLayouts, useCreateLayout, useUpdateLayout, useDeleteLayout } from "../useLayouts";
+
+global.fetch = vi.fn();
+
+const createWrapper = () => {
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: { retry: false },
+      mutations: { retry: false },
+    },
+  });
+
+  return ({ children }: { children: ReactNode }) => (
+    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+  );
+};
+
+describe("useLayouts", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("should fetch layouts on mount", async () => {
+    const mockLayouts = [
+      { id: "1", name: "Default", isDefault: true, layout: [] },
+      { id: "2", name: "Custom", isDefault: false, layout: [] },
+    ];
+
+    (global.fetch as any).mockResolvedValueOnce({
+      ok: true,
+      json: async () => mockLayouts,
+    });
+
+    const { result } = renderHook(() => useLayouts(), {
+      wrapper: createWrapper(),
+    });
+
+    await waitFor(() => {
+      expect(result.current.data).toEqual(mockLayouts);
+    });
+  });
+
+  it("should handle fetch errors", async () => {
+    (global.fetch as any).mockRejectedValueOnce(new Error("API Error"));
+
+    const { result } = renderHook(() => useLayouts(), {
+      wrapper: createWrapper(),
+    });
+
+    await waitFor(() => {
+      expect(result.current.isError).toBe(true);
+    });
+  });
+
+  it("should show loading state", () => {
+    (global.fetch as any).mockImplementation(() => new Promise(() => {}));
+
+    const { result } = renderHook(() => useLayouts(), {
+      wrapper: createWrapper(),
+    });
+
+    expect(result.current.isLoading).toBe(true);
+  });
+});
+
+describe("useCreateLayout", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("should create a new layout", async () => {
+    const mockLayout = {
+      id: "3",
+      name: "New Layout",
+      isDefault: false,
+      layout: [],
+    };
+
+    (global.fetch as any).mockResolvedValueOnce({
+      ok: true,
+      json: async () => mockLayout,
+    });
+
+    const { result } = renderHook(() => useCreateLayout(), {
+      wrapper: createWrapper(),
+    });
+
+    result.current.mutate({
+      name: "New Layout",
+      layout: [],
+    });
+
+    await waitFor(() => {
+      expect(result.current.isSuccess).toBe(true);
+      expect(result.current.data).toEqual(mockLayout);
+    });
+  });
+
+  it("should handle creation errors", async () => {
+    (global.fetch as any).mockRejectedValueOnce(new Error("API Error"));
+
+    const { result } = renderHook(() => useCreateLayout(), {
+      wrapper: createWrapper(),
+    });
+
+    result.current.mutate({
+      name: "New Layout",
+      layout: [],
+    });
+
+    await waitFor(() => {
+      expect(result.current.isError).toBe(true);
+    });
+  });
+});
+
+describe("useUpdateLayout", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("should update an existing layout", async () => {
+    const mockLayout = {
+      id: "1",
+      name: "Updated Layout",
+      isDefault: false,
+      layout: [{ i: "widget-1", x: 0, y: 0, w: 2, h: 2 }],
+    };
+
+    (global.fetch as any).mockResolvedValueOnce({
+      ok: true,
+      json: async () => mockLayout,
+    });
+
+    const { result } = renderHook(() => useUpdateLayout(), {
+      wrapper: createWrapper(),
+    });
+
+    result.current.mutate({
+      id: "1",
+      name: "Updated Layout",
+      layout: [{ i: "widget-1", x: 0, y: 0, w: 2, h: 2 }],
+    });
+
+    await waitFor(() => {
+      expect(result.current.isSuccess).toBe(true);
+      expect(result.current.data).toEqual(mockLayout);
+    });
+  });
+
+  it("should handle update errors", async () => {
+    (global.fetch as any).mockRejectedValueOnce(new Error("API Error"));
+
+    const { result } = renderHook(() => useUpdateLayout(), {
+      wrapper: createWrapper(),
+    });
+
+    result.current.mutate({
+      id: "1",
+      name: "Updated Layout",
+    });
+
+    await waitFor(() => {
+      expect(result.current.isError).toBe(true);
+    });
+  });
+});
+
+describe("useDeleteLayout", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("should delete a layout", async () => {
+    (global.fetch as any).mockResolvedValueOnce({
+      ok: true,
+      json: async () => ({ success: true }),
+    });
+
+    const { result } = renderHook(() => useDeleteLayout(), {
+      wrapper: createWrapper(),
+    });
+
+    result.current.mutate("1");
+
+    await waitFor(() => {
+      expect(result.current.isSuccess).toBe(true);
+    });
+  });
+
+  it("should handle deletion errors", async () => {
+    (global.fetch as any).mockRejectedValueOnce(new Error("API Error"));
+
+    const { result } = renderHook(() => useDeleteLayout(), {
+      wrapper: createWrapper(),
+    });
+
+    result.current.mutate("1");
+
+    await waitFor(() => {
+      expect(result.current.isError).toBe(true);
+    });
+  });
+});