fix: react-doctor → 64/100 (Bugs 122, Perf 286, A11y 613, Maint 436)

- CartContext: lazy initializers replace mount-only useEffect
  hydration; remove 8 no-initialize-state warnings
- Toast/AdminSearchInput: React 19 useContext/use + drop
  forwardRef (3 no-react19-deprecated-apis)
- ProductFormModal: lazy initializers + useSyncExternalStore
  for mount; parent adds key=editingProduct.id
- InstallPrompt: useReducer for prompt state (no-cascading-set-state)
- QRScanModal: ref-based latest-callback pattern replaces
  useEffectEvent deps mistake
- OnboardingFlow: functional setState (rerender-functional-setstate)
- UsersPage/StopsCalendar/FeaturesAndStats: lazy initializers
  (rerender-lazy-state-init)
- FAQClientPage: server-side brand settings fetch via getBrandSettingsPublic
  in layout; remove supabase import
- LandingPageWrapper: href='#' → href='#top' (anchor-is-valid)
- TuxedoVideoHero: replace animate-bounce with ease-out-expo
  (no-inline-bounce-easing)
- ProductTableClient: useCallback for handleDeleted
  (jsx-no-new-function-as-prop)
- excel-parser: pre-compile delimiter regexes (js-hoist-regexp)
- water-log/settings: Promise.all for parallel DB calls
  (async-parallel)
- ToastNotification: extract toast store to separate file
  (only-export-components)
- WholesaleClient: inline <WholesaleIcon/> instead of hoisting to
  const (rendering-hoist-jsx)

src/components/admin/MessageLogPanel.tsx

@@ -221,25 +221,45 @@ export default function MessageLogPanel({ brandId }: { brandId?: string }) {
   const [search, setSearch] = useState("");
   const [statusFilter, setStatusFilter] = useState("all");
   const [page, setPage] = useState(1);
+  // Bumped by `handleRefresh` to force the data-load effect to re-run
+  // without depending on a stale callback reference.
+  const [refreshKey, setRefreshKey] = useState(0);
+  // Whether a fetch is currently in flight. Kept as a `useState` so the
+  // UI can show a spinner; the value is set inline during render via the
+  // `lastFetchKey` comparison below to satisfy the
+  // `no-adjust-state-on-prop-change` rule.
   const [isLoading, setIsLoading] = useState(false);
-
-  const fetchLogs = useCallback(async () => {
-    if (!brandId) return;
-    setIsLoading(true);
-    const result = await getMessageLogs({
-      brandId,
-      status: statusFilter === "all" ? undefined : statusFilter,
-      limit: 100,
-    });
-    if (result.success) {
-      setLogs(result.logs);
-    }
-    setIsLoading(false);
-  }, [brandId, statusFilter]);
+  // Track the last (brandId|statusFilter|refreshKey) signature we kicked
+  // off a fetch for. We adjust `isLoading` + `logs` inline during render
+  // when the signature changes, so users never see a stale "loaded" UI
+  // between the prop change and the effect running.
+  const [lastFetchKey, setLastFetchKey] = useState<string | null>(null);
+  const fetchKey = brandId ? `${brandId}|${statusFilter}|${refreshKey}` : null;
+  if (fetchKey !== lastFetchKey) {
+    setLastFetchKey(fetchKey);
+    setIsLoading(Boolean(fetchKey));
+    setLogs([]);
+  }
 
   useEffect(() => {
-    fetchLogs();
-  }, [fetchLogs]);
+    if (!brandId) return;
+    let cancelled = false;
+    void (async () => {
+      const result = await getMessageLogs({
+        brandId,
+        status: statusFilter === "all" ? undefined : statusFilter,
+        limit: 100,
+      });
+      if (cancelled) return;
+      if (result.success) {
+        setLogs(result.logs);
+      }
+      setIsLoading(false);
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [brandId, statusFilter, refreshKey]);
 
   // Filter logs based on search
   const filteredLogs = search
@@ -262,10 +282,13 @@ export default function MessageLogPanel({ brandId }: { brandId?: string }) {
   const totalPages = Math.max(1, Math.ceil(filteredLogs.length / PAGE_SIZE));
   const paginatedLogs = filteredLogs.slice((page - 1) * PAGE_SIZE, page * PAGE_SIZE);
 
-  const handleRefresh = () => {
-    fetchLogs();
+  const handleRefresh = useCallback(() => {
     setPage(1);
-  };
+    // Re-trigger the data load by toggling a refresh key — the effect
+    // above watches `brandId` + `statusFilter`, so we need an additional
+    // signal to force a re-fetch from the button.
+    setRefreshKey((k) => k + 1);
+  }, []);
 
   const hasFilters = search.length > 0 || statusFilter !== "all";