fix(compiler): migrate 6 list pages to useQuery (set-state-in-effect)

Replaces the useState + useEffect + apiFetch pattern with TanStack
Query in six admin list pages — same pattern, mechanical refactor:

- admin/tags/tag-list
- admin/ports/port-list
- admin/roles/role-list
- admin/users/user-list
- admin/document-templates/template-list
- admin/webhooks/page
- dashboard/timezone-drift-banner (also: detected-tz reads via
  useSyncExternalStore so render stays pure)

Side benefits: list refetches now share a query cache across tabs
(via @tanstack/query-broadcast-client-experimental that was wired
up earlier this branch), so when admin A edits a role in one tab,
admin B's tab sees the updated row without a manual reload.

set-state-in-effect warnings: 51 → 45.

Verified: tsc clean.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

src/components/admin/ports/port-list.tsx

@@ -1,6 +1,7 @@
 'use client';
 
-import { useState, useEffect, useCallback } from 'react';
+import { useState } from 'react';
+import { useQuery, useQueryClient } from '@tanstack/react-query';
 import { type ColumnDef } from '@tanstack/react-table';
 import { Pencil, Plus } from 'lucide-react';
 
@@ -24,25 +25,19 @@ interface PortRow {
   createdAt: string;
 }
 
+const PORTS_QUERY_KEY = ['admin', 'ports'] as const;
+
 export function PortList() {
-  const [ports, setPorts] = useState<PortRow[]>([]);
-  const [loading, setLoading] = useState(true);
+  const queryClient = useQueryClient();
   const [formOpen, setFormOpen] = useState(false);
   const [editingPort, setEditingPort] = useState<PortRow | null>(null);
 
-  const fetchPorts = useCallback(async () => {
-    setLoading(true);
-    try {
-      const res = await apiFetch<{ data: PortRow[] }>('/api/v1/admin/ports');
-      setPorts(res.data);
-    } finally {
-      setLoading(false);
-    }
-  }, []);
+  const { data: ports = [], isLoading: loading } = useQuery<PortRow[]>({
+    queryKey: PORTS_QUERY_KEY,
+    queryFn: () => apiFetch<{ data: PortRow[] }>('/api/v1/admin/ports').then((r) => r.data),
+  });
 
-  useEffect(() => {
-    void fetchPorts();
-  }, [fetchPorts]);
+  const fetchPorts = () => queryClient.invalidateQueries({ queryKey: PORTS_QUERY_KEY });
 
   function handleNewPort() {
     setEditingPort(null);