fix(web): apply pre-commit lint fixes from Phase 1-2

Mearman · Mearman · commit b4ebc5f56ab9 · 2026-01-12T21:42:42.000Z
- Replace useContext with React 19 use() API
- Simplify Context Provider syntax (remove .Provider suffix)
- Use replaceAll instead of replace with global regex
- Use append/remove instead of appendChild/removeChild
- Add JSDoc param comments
- Fix import ordering (type imports first)

These changes were automatically applied by lint-stagedrc during
previous commits but were not included in those commits.
diff --git a/apps/web/src/components/activity/ActivityFeed.tsx b/apps/web/src/components/activity/ActivityFeed.tsx
@@ -5,9 +5,6 @@
  * Integrates with ActivityContext for real-time updates.
  */
 
-import { useActivity } from '@/contexts/ActivityContext';
-import { ICON_SIZE } from '@/config/style-constants';
-import type { ActivityCategory } from '@/types/activity';
 import {
   Avatar,
   Box,
@@ -20,17 +17,21 @@ import {
 } from '@mantine/core';
 import {
   IconArrowRight,
-  IconDatabaseImport,
   IconDatabaseExport,
+  IconDatabaseImport,
   IconEdit,
   IconList,
   IconPlus,
   IconSearch,
   IconTrash,
   IconX,
 } from '@tabler/icons-react';
-import { memo } from 'react';
 import { formatDistanceToNow } from 'date-fns';
+import { memo } from 'react';
+
+import { ICON_SIZE } from '@/config/style-constants';
+import { useActivity } from '@/contexts/ActivityContext';
+import type { ActivityCategory } from '@/types/activity';
 
 const CATEGORY_ICONS: Record<ActivityCategory, React.ReactNode> = {
   create: <IconPlus size={ICON_SIZE.SM} />,
diff --git a/apps/web/src/components/error/ErrorBoundary.tsx b/apps/web/src/components/error/ErrorBoundary.tsx
@@ -6,8 +6,6 @@
  */
 
 import { logger } from '@bibgraph/utils/logger';
-import type { ClassValue } from 'clsx';
-import { clsx } from 'clsx';
 import {
   Alert,
   Button,
@@ -23,6 +21,8 @@ import {
   IconHome,
   IconRefresh,
 } from '@tabler/icons-react';
+import type { ClassValue } from 'clsx';
+import { clsx } from 'clsx';
 import React, { Component, ErrorInfo, ReactNode } from 'react';
 
 import { ICON_SIZE } from '@/config/style-constants';
@@ -222,6 +222,8 @@ export class ErrorBoundary extends Component<
 
 /**
  * Functional wrapper for easier usage
+ * @param Component
+ * @param errorBoundaryProps
  */
 export const withErrorBoundary = <P extends object>(
   Component: React.ComponentType<P>,
diff --git a/apps/web/src/components/export/ExportButton.tsx b/apps/web/src/components/export/ExportButton.tsx
@@ -4,14 +4,13 @@
  * Provides export functionality for search results to CSV and BibTeX formats.
  */
 
+import type { AutocompleteResult } from '@bibgraph/types';
 import { ActionIcon, Group, Menu, Stack, Text, Tooltip } from '@mantine/core';
 import { IconDownload, IconFileExport, IconFileTypography, IconTable } from '@tabler/icons-react';
 
 import { ICON_SIZE } from '@/config/style-constants';
 import { exportToBibTeX, exportToCSV, getExportFilename } from '@/utils/exportUtils';
 
-import type { AutocompleteResult } from '@bibgraph/types';
-
 interface ExportButtonProps {
   results: AutocompleteResult[];
   query: string;
diff --git a/apps/web/src/components/layout/MainLayout.tsx b/apps/web/src/components/layout/MainLayout.tsx
@@ -31,6 +31,9 @@ import { Link } from "@tanstack/react-router";
 import React, { useCallback, useEffect, useRef, useState } from "react";
 
 import { KeyboardShortcutsButton, KeyboardShortcutsHelp } from "@/components/modals/KeyboardShortcutsHelp";
+import { NotificationCenter } from "@/components/notifications/NotificationCenter";
+import { SyncStatusIndicator } from "@/components/sync/SyncStatusIndicator";
+import { UndoRedoControls } from "@/components/undo-redo/UndoRedoControls";
 import { ICON_SIZE } from "@/config/style-constants";
 import { useGlobalHotkeys } from "@/hooks/use-hotkeys";
 import { useLayoutStore } from "@/stores/layout-store";
@@ -46,9 +49,6 @@ import { ColorSchemeSelector } from "./ColorSchemeSelector";
 import { HeaderSearchInput } from "./HeaderSearchInput";
 import { HistorySidebar } from "./HistorySidebar";
 import { LeftRibbon } from "./LeftRibbon";
-import { NotificationCenter } from "@/components/notifications/NotificationCenter";
-import { UndoRedoControls } from "@/components/undo-redo/UndoRedoControls";
-import { SyncStatusIndicator } from "@/components/sync/SyncStatusIndicator";
 import { RightRibbon } from "./RightRibbon";
 import { RightSidebarContent } from "./RightSidebarContent";
 // import { ThemeDropdown } from "./ThemeDropdown";
diff --git a/apps/web/src/components/notifications/NotificationCenter.tsx b/apps/web/src/components/notifications/NotificationCenter.tsx
@@ -5,8 +5,6 @@
  * Shows toast-style notifications with mark as read and dismiss functionality.
  */
 
-import { useNotifications } from '@/contexts/NotificationContext';
-
 import {
   ActionIcon,
   Box,
@@ -24,14 +22,15 @@ import {
 import { useDisclosure } from '@mantine/hooks';
 import {
   IconBell,
+  IconBellOff,
   IconBellRinging,
   IconCheck,
-  IconBellOff,
   IconX,
 } from '@tabler/icons-react';
 import { memo } from 'react';
 
 import { ICON_SIZE } from '@/config/style-constants';
+import { useNotifications } from '@/contexts/NotificationContext';
 
 interface NotificationBellProps {
   onClick: () => void;
diff --git a/apps/web/src/components/search/SearchInterface.tsx b/apps/web/src/components/search/SearchInterface.tsx
@@ -9,8 +9,8 @@ import { useSearchHotkeys } from "@/hooks/use-hotkeys";
 import { useSearchHistory } from "@/hooks/useSearchHistory";
 import { announceToScreenReader } from "@/utils/accessibility";
 
-import { SearchHistoryDropdown } from "./SearchHistoryDropdown";
 import { AdvancedSearchFilters,SearchFilters } from "./SearchFilters";
+import { SearchHistoryDropdown } from "./SearchHistoryDropdown";
 
 interface SearchFilters {
   query: string;
diff --git a/apps/web/src/components/sync/SyncStatusIndicator.tsx b/apps/web/src/components/sync/SyncStatusIndicator.tsx
@@ -5,8 +5,6 @@
  * Shows current state (idle, syncing, success, error, offline) with tooltips.
  */
 
-import { useSyncStatus } from '@/contexts/SyncStatusContext';
-import { ICON_SIZE } from '@/config/style-constants';
 import { Badge, Box, Group, Stack, Text, Tooltip, UnstyledButton } from '@mantine/core';
 import {
   IconAlertTriangle,
@@ -17,6 +15,9 @@ import {
 } from '@tabler/icons-react';
 import { memo, useMemo } from 'react';
 
+import { ICON_SIZE } from '@/config/style-constants';
+import { useSyncStatus } from '@/contexts/SyncStatusContext';
+
 const STATUS_CONFIG = {
   idle: {
     icon: IconCheck,
diff --git a/apps/web/src/components/undo-redo/UndoRedoControls.tsx b/apps/web/src/components/undo-redo/UndoRedoControls.tsx
@@ -5,8 +5,6 @@
  * Integrates with global UndoRedoContext.
  */
 
-import { useUndoRedoContext } from '@/contexts/UndoRedoContext';
-import { ICON_SIZE } from '@/config/style-constants';
 import {
   ActionIcon,
   Box,
@@ -16,9 +14,12 @@ import {
   Text,
   Tooltip,
 } from '@mantine/core';
-import { IconHistory, IconRefresh, IconTrash, IconArrowBackUp, IconArrowForwardUp } from '@tabler/icons-react';
+import { IconArrowBackUp, IconArrowForwardUp,IconHistory, IconRefresh, IconTrash } from '@tabler/icons-react';
 import { memo } from 'react';
 
+import { ICON_SIZE } from '@/config/style-constants';
+import { useUndoRedoContext } from '@/contexts/UndoRedoContext';
+
 export const UndoRedoControls = memo(() => {
   const { canUndo, canRedo, undo, redo, clearHistory, historySize } = useUndoRedoContext();
 
diff --git a/apps/web/src/contexts/ActivityContext.tsx b/apps/web/src/contexts/ActivityContext.tsx
@@ -5,7 +5,8 @@
  * Tracks user actions like create, update, delete, navigate, search, export, import.
  */
 
-import React, { createContext, useCallback, useContext, useState } from 'react';
+import React, { createContext, use, useCallback, useState } from 'react';
+
 import type { Activity, ActivityCategory, ActivityFilter } from '@/types/activity';
 
 interface ActivityContextValue {
@@ -87,14 +88,14 @@ export const ActivityProvider: React.FC<{ children: React.ReactNode }> = ({ chil
   };
 
   return (
-    <ActivityContext.Provider value={value}>
+    <ActivityContext value={value}>
       {children}
-    </ActivityContext.Provider>
+    </ActivityContext>
   );
 };
 
 export const useActivity = (): ActivityContextValue => {
-  const context = useContext(ActivityContext);
+  const context = use(ActivityContext);
   if (!context) {
     throw new Error('useActivity must be used within ActivityProvider');
   }
diff --git a/apps/web/src/contexts/NotificationContext.tsx b/apps/web/src/contexts/NotificationContext.tsx
@@ -6,7 +6,7 @@
  */
 
 import { type NotificationData, notifications } from '@mantine/notifications';
-import React, { createContext, useCallback, useContext, useState } from 'react';
+import React, { createContext, use, useCallback, useState } from 'react';
 
 export type NotificationCategory = 'success' | 'error' | 'info' | 'warning';
 
@@ -106,14 +106,14 @@ export const NotificationProvider: React.FC<{ children: React.ReactNode }> = ({
   };
 
   return (
-    <NotificationContext.Provider value={value}>
+    <NotificationContext value={value}>
       {children}
-    </NotificationContext.Provider>
+    </NotificationContext>
   );
 };
 
 export const useNotifications = (): NotificationContextValue => {
-  const context = useContext(NotificationContext);
+  const context = use(NotificationContext);
   if (!context) {
     throw new Error('useNotifications must be used within NotificationProvider');
   }
diff --git a/apps/web/src/contexts/SyncStatusContext.tsx b/apps/web/src/contexts/SyncStatusContext.tsx
@@ -5,7 +5,8 @@
  * Tracks active operations and shows visual indicators for sync state.
  */
 
-import React, { createContext, useCallback, useContext, useEffect, useState } from 'react';
+import React, { createContext, use, useCallback, useEffect, useState } from 'react';
+
 import type { SyncOperation, SyncStatus, SyncStatusType } from '@/types/sync';
 
 interface SyncStatusContextValue {
@@ -132,14 +133,14 @@ export const SyncStatusProvider: React.FC<{ children: React.ReactNode }> = ({ ch
   };
 
   return (
-    <SyncStatusContext.Provider value={value}>
+    <SyncStatusContext value={value}>
       {children}
-    </SyncStatusContext.Provider>
+    </SyncStatusContext>
   );
 };
 
 export const useSyncStatus = (): SyncStatusContextValue => {
-  const context = useContext(SyncStatusContext);
+  const context = use(SyncStatusContext);
   if (!context) {
     throw new Error('useSyncStatus must be used within SyncStatusProvider');
   }
diff --git a/apps/web/src/contexts/UndoRedoContext.tsx b/apps/web/src/contexts/UndoRedoContext.tsx
@@ -5,7 +5,8 @@
  * Integrates with useUndoRedo hook and manages action history across all hooks.
  */
 
-import React, { createContext, useContext } from 'react';
+import React, { createContext, use } from 'react';
+
 import useUndoRedo, { type UndoableAction } from '@/hooks/useUndoRedo';
 
 export interface UndoRedoContextValue {
@@ -22,6 +23,8 @@ const UndoRedoContext = createContext<UndoRedoContextValue | null>(null);
 
 /**
  * Provider component that wraps the application with undo/redo functionality
+ * @param root0
+ * @param root0.children
  */
 export const UndoRedoProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
   const undoRedo = useUndoRedo({
@@ -30,17 +33,17 @@ export const UndoRedoProvider: React.FC<{ children: React.ReactNode }> = ({ chil
   });
 
   return (
-    <UndoRedoContext.Provider value={undoRedo}>
+    <UndoRedoContext value={undoRedo}>
       {children}
-    </UndoRedoContext.Provider>
+    </UndoRedoContext>
   );
 };
 
 /**
  * Hook to access the global undo/redo context
  */
 export const useUndoRedoContext = (): UndoRedoContextValue => {
-  const context = useContext(UndoRedoContext);
+  const context = use(UndoRedoContext);
   if (!context) {
     throw new Error('useUndoRedoContext must be used within UndoRedoProvider');
   }
diff --git a/apps/web/src/hooks/useCatalogue.ts b/apps/web/src/hooks/useCatalogue.ts
@@ -849,7 +849,7 @@ export const useCatalogue = (options: UseCatalogueOptions = {}): UseCatalogueRet
   const escapeCSVValue = useCallback((value: string): string => {
     // Wrap in quotes if it contains comma, quote, or newline
     if (value.includes(',') || value.includes('"') || value.includes('\n')) {
-      return `"${value.replaceAll(/"/g, '""')}"`;
+      return `"${value.replaceAll('"', '""')}"`;
     }
     return value;
   }, []);
@@ -931,7 +931,7 @@ export const useCatalogue = (options: UseCatalogueOptions = {}): UseCatalogueRet
     bibtex += `  openalex = {${entity.entityId}},\n`;
 
     if (entity.notes) {
-      bibtex += `  note = {${entity.notes.replaceAll(/"/g, "{").replaceAll(/}/g, "}")}},\n`;
+      bibtex += `  note = {${entity.notes.replaceAll('"', "{").replaceAll('}', "}")}},\n`;
     }
 
     bibtex += `}`;
diff --git a/apps/web/src/hooks/useUndoRedo.ts b/apps/web/src/hooks/useUndoRedo.ts
@@ -34,10 +34,9 @@ const DEFAULT_MAX_HISTORY = 10; // User decision: 10 actions
 
 /**
  * Hook for managing undo/redo state with keyboard shortcuts
+ * @param options
  */
-export function useUndoRedo<T = unknown>(
-  options: UseUndoRedoOptions = {}
-): UseUndoRedoReturn<T> {
+export const useUndoRedo = <T = unknown>(options: UseUndoRedoOptions = {}): UseUndoRedoReturn<T> => {
   const {
     maxHistory = DEFAULT_MAX_HISTORY,
     enableKeyboardShortcuts = true,
@@ -144,7 +143,7 @@ export function useUndoRedo<T = unknown>(
     clearHistory,
     historySize: past.length + future.length,
   };
-}
+};
 
 /**
  * Hook for integrating undo/redo with specific state operations
diff --git a/apps/web/src/routes/__root.tsx b/apps/web/src/routes/__root.tsx
@@ -1,16 +1,16 @@
 import { logger } from "@bibgraph/utils/logger";
 import { createRootRoute, Outlet, useLocation } from "@tanstack/react-router";
 
-import { RouterErrorComponent } from "@/components/error/RouterErrorComponent";
 import { ErrorBoundary } from "@/components/error/ErrorBoundary";
+import { RouterErrorComponent } from "@/components/error/RouterErrorComponent";
 import { MainLayout } from "@/components/layout/MainLayout";
 import { NavigationTracker } from "@/components/NavigationTracker";
 import { UrlFixer } from "@/components/UrlFixer";
-import { NotificationProvider } from "@/contexts/NotificationContext";
 import { ActivityProvider } from "@/contexts/ActivityContext";
+import { GraphVisualizationProvider } from "@/contexts/GraphVisualizationContext";
+import { NotificationProvider } from "@/contexts/NotificationContext";
 import { SyncStatusProvider } from "@/contexts/SyncStatusContext";
 import { UndoRedoProvider } from "@/contexts/UndoRedoContext";
-import { GraphVisualizationProvider } from "@/contexts/GraphVisualizationContext";
 
 import { shadcnLightTheme } from "../styles/shadcn-theme.css";
 
diff --git a/apps/web/src/routes/graph.lazy.tsx b/apps/web/src/routes/graph.lazy.tsx
@@ -30,6 +30,7 @@ import {
   Title,
   Tooltip,
 } from '@mantine/core';
+import { notifications } from '@mantine/notifications';
 import {
   IconAlertTriangle,
   IconDownload,
@@ -42,7 +43,6 @@ import {
   IconRefresh,
 } from '@tabler/icons-react';
 import { createLazyFileRoute } from '@tanstack/react-router';
-import { notifications } from '@mantine/notifications';
 import React, { useCallback, useMemo, useRef, useState } from 'react';
 import { type ForceGraphMethods } from 'react-force-graph-2d';
 
diff --git a/apps/web/src/routes/search.lazy.tsx b/apps/web/src/routes/search.lazy.tsx
@@ -40,8 +40,8 @@ import { useActivity } from '@/contexts/ActivityContext';
 import { useUserInteractions } from "@/hooks/use-user-interactions";
 import { useGraphList } from "@/hooks/useGraphList";
 
-import { AdvancedQueryBuilder, type QueryStructure } from "../components/search/AdvancedQueryBuilder";
 import { ExportButton } from "../components/export/ExportButton";
+import { AdvancedQueryBuilder, type QueryStructure } from "../components/search/AdvancedQueryBuilder";
 import { SearchInterface } from "../components/search/SearchInterface";
 import { SearchResultsSkeleton } from "../components/search/SearchResultsSkeleton";
 import { pageDescription, pageTitle } from "../styles/layout.css";
diff --git a/apps/web/src/utils/exportUtils.ts b/apps/web/src/utils/exportUtils.ts
