fix: Resolve web package lint and typecheck errors

Fixes ESLint and TypeScript errors in web package to pass CI checks:

- Fixed all Quality Rails violations (14 explicit any types)
- Fixed deprecated React event types (FormEvent → SyntheticEvent)
- Fixed 26 TypeScript errors (Promise types, test mocks, HTMLElement assertions)
- Added vitest DOM matcher type definitions
- Fixed unused variables and empty functions
- Resolved 43+ additional lint errors

Typecheck: ✅ 0 errors
Lint: 542 remaining (non-blocking in CI)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

apps/web/src/components/widgets/__tests__/CalendarWidget.test.tsx

@@ -15,9 +15,12 @@ describe("CalendarWidget", (): void => {
   });
 
   it("should render loading state initially", (): void => {
-    vi.mocked(global.fetch).mockImplementation(() => new Promise(() => {
-      // Intentionally never resolves to keep loading state
-    }));
+    vi.mocked(global.fetch).mockImplementation(
+      () =>
+        new Promise(() => {
+          // Intentionally never resolves to keep loading state
+        })
+    );
 
     render(<CalendarWidget id="calendar-1" />);
 
@@ -42,8 +45,8 @@ describe("CalendarWidget", (): void => {
 
     vi.mocked(global.fetch).mockResolvedValueOnce({
       ok: true,
-      json: () => mockEvents,
-    });
+      json: () => Promise.resolve(mockEvents),
+    } as unknown as Response);
 
     render(<CalendarWidget id="calendar-1" />);
 
@@ -56,8 +59,8 @@ describe("CalendarWidget", (): void => {
   it("should handle empty event list", async (): Promise<void> => {
     vi.mocked(global.fetch).mockResolvedValueOnce({
       ok: true,
-      json: () => [],
-    });
+      json: () => Promise.resolve([]),
+    } as unknown as Response);
 
     render(<CalendarWidget id="calendar-1" />);
 
@@ -91,8 +94,8 @@ describe("CalendarWidget", (): void => {
 
     vi.mocked(global.fetch).mockResolvedValueOnce({
       ok: true,
-      json: () => mockEvents,
-    });
+      json: () => Promise.resolve(mockEvents),
+    } as unknown as Response);
 
     render(<CalendarWidget id="calendar-1" />);
 
@@ -105,8 +108,8 @@ describe("CalendarWidget", (): void => {
   it("should display current date", async (): Promise<void> => {
     vi.mocked(global.fetch).mockResolvedValueOnce({
       ok: true,
-      json: () => [],
-    });
+      json: () => Promise.resolve([]),
+    } as unknown as Response);
 
     render(<CalendarWidget id="calendar-1" />);
 

apps/web/src/components/widgets/__tests__/QuickCaptureWidget.test.tsx

@@ -41,8 +41,8 @@ describe("QuickCaptureWidget", (): void => {
     const user = userEvent.setup();
     vi.mocked(global.fetch).mockResolvedValueOnce({
       ok: true,
-      json: () => ({ success: true }),
-    });
+      json: () => Promise.resolve({ success: true }),
+    } as unknown as Response);
 
     render(<QuickCaptureWidget id="quick-capture-1" />);
 
@@ -66,8 +66,8 @@ describe("QuickCaptureWidget", (): void => {
     const user = userEvent.setup();
     vi.mocked(global.fetch).mockResolvedValueOnce({
       ok: true,
-      json: () => ({ success: true }),
-    });
+      json: () => Promise.resolve({ success: true }),
+    } as unknown as Response);
 
     render(<QuickCaptureWidget id="quick-capture-1" />);
 
@@ -113,8 +113,8 @@ describe("QuickCaptureWidget", (): void => {
     const user = userEvent.setup();
     vi.mocked(global.fetch).mockResolvedValueOnce({
       ok: true,
-      json: () => ({ success: true }),
-    });
+      json: () => Promise.resolve({ success: true }),
+    } as unknown as Response);
 
     render(<QuickCaptureWidget id="quick-capture-1" />);
 
@@ -130,8 +130,8 @@ describe("QuickCaptureWidget", (): void => {
     const user = userEvent.setup();
     vi.mocked(global.fetch).mockResolvedValueOnce({
       ok: true,
-      json: () => ({ success: true }),
-    });
+      json: () => Promise.resolve({ success: true }),
+    } as unknown as Response);
 
     render(<QuickCaptureWidget id="quick-capture-1" />);
 

apps/web/src/components/widgets/__tests__/TasksWidget.test.tsx

@@ -32,8 +32,8 @@ describe("TasksWidget", (): void => {
 
     vi.mocked(global.fetch).mockResolvedValueOnce({
       ok: true,
-      json: () => mockTasks,
-    });
+      json: () => Promise.resolve(mockTasks),
+    } as unknown as Response);
 
     render(<TasksWidget id="tasks-1" />);
 
@@ -52,8 +52,8 @@ describe("TasksWidget", (): void => {
 
     vi.mocked(global.fetch).mockResolvedValueOnce({
       ok: true,
-      json: () => mockTasks,
-    });
+      json: () => Promise.resolve(mockTasks),
+    } as unknown as Response);
 
     render(<TasksWidget id="tasks-1" />);
 
@@ -66,8 +66,8 @@ describe("TasksWidget", (): void => {
   it("should handle empty task list", async (): Promise<void> => {
     vi.mocked(global.fetch).mockResolvedValueOnce({
       ok: true,
-      json: () => [],
-    });
+      json: () => Promise.resolve([]),
+    } as unknown as Response);
 
     render(<TasksWidget id="tasks-1" />);
 
@@ -93,8 +93,8 @@ describe("TasksWidget", (): void => {
 
     vi.mocked(global.fetch).mockResolvedValueOnce({
       ok: true,
-      json: () => mockTasks,
-    });
+      json: () => Promise.resolve(mockTasks),
+    } as unknown as Response);
 
     render(<TasksWidget id="tasks-1" />);
 
@@ -114,8 +114,8 @@ describe("TasksWidget", (): void => {
 
     vi.mocked(global.fetch).mockResolvedValueOnce({
       ok: true,
-      json: () => mockTasks,
-    });
+      json: () => Promise.resolve(mockTasks),
+    } as unknown as Response);
 
     render(<TasksWidget id="tasks-1" />);
 

apps/web/src/components/widgets/__tests__/WidgetGrid.test.tsx

@@ -10,8 +10,12 @@ import type { WidgetPlacement } from "@mosaic/shared";
 
 // Mock react-grid-layout
 vi.mock("react-grid-layout", () => ({
-  default: ({ children }: any) => <div data-testid="grid-layout">{children}</div>,
-  Responsive: ({ children }: any) => <div data-testid="responsive-grid-layout">{children}</div>,
+  default: ({ children }: { children: React.ReactNode }) => (
+    <div data-testid="grid-layout">{children}</div>
+  ),
+  Responsive: ({ children }: { children: React.ReactNode }) => (
+    <div data-testid="responsive-grid-layout">{children}</div>
+  ),
 }));
 
 describe("WidgetGrid", (): void => {