🔨 Fixed the status updates on Import

src/client/components/Import/Import.tsx

@@ -7,10 +7,11 @@ import { useShallow } from "zustand/react/shallow";
 import axios from "axios";
 import {
   useGetJobResultStatisticsQuery,
-  useGetCachedImportStatisticsQuery,
+  useGetImportStatisticsQuery,
   useStartIncrementalImportMutation
 } from "../../graphql/generated";
 import { RealTimeImportStats } from "./RealTimeImportStats";
+import { useImportSessionStatus } from "../../hooks/useImportSessionStatus";
 
 interface ImportProps {
   path: string;
@@ -23,6 +24,7 @@ interface ImportProps {
 export const Import = (props: ImportProps): ReactElement => {
   const queryClient = useQueryClient();
   const [socketReconnectTrigger, setSocketReconnectTrigger] = useState(0);
+  const [importError, setImportError] = useState<string | null>(null);
   const { importJobQueue, getSocket, disconnectSocket } = useStore(
     useShallow((state) => ({
       importJobQueue: state.importJobQueue,
@@ -35,8 +37,13 @@ export const Import = (props: ImportProps): ReactElement => {
     onSuccess: (data) => {
       if (data.startIncrementalImport.success) {
         importJobQueue.setStatus("running");
+        setImportError(null);
       }
     },
+    onError: (error: any) => {
+      console.error("Failed to start import:", error);
+      setImportError(error?.message || "Failed to start import. Please try again.");
+    },
   });
 
   const { mutate: initiateImport } = useMutation({
@@ -50,10 +57,31 @@ export const Import = (props: ImportProps): ReactElement => {
     },
   });
 
+  // Force re-import mutation - re-imports all files regardless of import status
+  const { mutate: forceReImport, isPending: isForceReImporting } = useMutation({
+    mutationFn: async () => {
+      const sessionId = localStorage.getItem("sessionId") || "";
+      return await axios.request({
+        url: `http://localhost:3000/api/library/forceReImport`,
+        method: "POST",
+        data: { sessionId },
+      });
+    },
+    onSuccess: (response) => {
+      console.log("Force re-import initiated:", response.data);
+      importJobQueue.setStatus("running");
+      setImportError(null);
+    },
+    onError: (error: any) => {
+      console.error("Failed to start force re-import:", error);
+      setImportError(error?.response?.data?.message || error?.message || "Failed to start force re-import. Please try again.");
+    },
+  });
+
   const { data, isError, isLoading, refetch } = useGetJobResultStatisticsQuery();
   
-  // Get cached import statistics to determine if Start Import button should be shown
-  const { data: cachedStats } = useGetCachedImportStatisticsQuery(
+  // Get import statistics to determine if Start Import button should be shown
+  const { data: importStats } = useGetImportStatisticsQuery(
     {},
     {
       refetchOnWindowFocus: false,
@@ -61,25 +89,43 @@ export const Import = (props: ImportProps): ReactElement => {
     }
   );
 
+  // Use custom hook for definitive import session status tracking
+  // NO POLLING - relies on Socket.IO events only
+  const importSession = useImportSessionStatus();
+
+  const hasActiveSession = importSession.isActive;
+
   // Determine if we should show the Start Import button
-  const hasNewFiles = cachedStats?.getCachedImportStatistics?.success &&
-    cachedStats.getCachedImportStatistics.stats &&
-    cachedStats.getCachedImportStatistics.stats.newFiles > 0 &&
-    cachedStats.getCachedImportStatistics.stats.pendingFiles === 0;
+  const hasNewFiles = importStats?.getImportStatistics?.success &&
+    importStats.getImportStatistics.stats &&
+    importStats.getImportStatistics.stats.newFiles > 0;
 
   useEffect(() => {
     const socket = getSocket("/");
     const handleQueueDrained = () => refetch();
     const handleCoverExtracted = () => refetch();
+    
+    const handleSessionStarted = () => {
+      importJobQueue.setStatus("running");
+    };
+
+    const handleSessionCompleted = () => {
+      refetch();
+      importJobQueue.setStatus("drained");
+    };
 
     socket.on("LS_IMPORT_QUEUE_DRAINED", handleQueueDrained);
     socket.on("LS_COVER_EXTRACTED", handleCoverExtracted);
+    socket.on("IMPORT_SESSION_STARTED", handleSessionStarted);
+    socket.on("IMPORT_SESSION_COMPLETED", handleSessionCompleted);
 
     return () => {
       socket.off("LS_IMPORT_QUEUE_DRAINED", handleQueueDrained);
       socket.off("LS_COVER_EXTRACTED", handleCoverExtracted);
+      socket.off("IMPORT_SESSION_STARTED", handleSessionStarted);
+      socket.off("IMPORT_SESSION_COMPLETED", handleSessionCompleted);
     };
-  }, [getSocket, refetch, socketReconnectTrigger]);
+  }, [getSocket, refetch, importJobQueue, socketReconnectTrigger]);
 
   /**
    * Toggles import queue pause/resume state
@@ -97,9 +143,20 @@ export const Import = (props: ImportProps): ReactElement => {
   };
 
   /**
-   * Starts smart import, resetting session if queue was drained
+   * Starts smart import with race condition prevention
    */
-  const handleStartSmartImport = () => {
+  const handleStartSmartImport = async () => {
+    // Clear any previous errors
+    setImportError(null);
+
+    // Check for active session before starting using definitive status
+    if (hasActiveSession) {
+      setImportError(
+        `Cannot start import: An import session "${importSession.sessionId}" is already active. Please wait for it to complete.`
+      );
+      return;
+    }
+
     if (importJobQueue.status === "drained") {
       localStorage.removeItem("sessionId");
       disconnectSocket("/");
@@ -117,6 +174,40 @@ export const Import = (props: ImportProps): ReactElement => {
     }
   };
 
+  /**
+   * Handles force re-import - re-imports all files to fix indexing issues
+   */
+  const handleForceReImport = async () => {
+    setImportError(null);
+
+    // Check for active session before starting using definitive status
+    if (hasActiveSession) {
+      setImportError(
+        `Cannot start import: An import session "${importSession.sessionId}" is already active. Please wait for it to complete.`
+      );
+      return;
+    }
+
+    if (window.confirm(
+      "This will re-import ALL files in your library folder, even those already imported. " +
+      "This can help fix Elasticsearch indexing issues. Continue?"
+    )) {
+      if (importJobQueue.status === "drained") {
+        localStorage.removeItem("sessionId");
+        disconnectSocket("/");
+        setTimeout(() => {
+          getSocket("/");
+          setSocketReconnectTrigger(prev => prev + 1);
+          setTimeout(() => {
+            forceReImport();
+          }, 500);
+        }, 100);
+      } else {
+        forceReImport();
+      }
+    }
+  };
+
   /**
    * Renders pause/resume controls based on queue status
    */
@@ -185,11 +276,6 @@ export const Import = (props: ImportProps): ReactElement => {
         </header>
 
         <div className="mx-auto max-w-screen-xl px-4 py-4 sm:px-6 sm:py-8 lg:px-8">
-          {/* Real-Time Import Statistics Widget */}
-          <div className="mb-6 max-w-screen-lg">
-            <RealTimeImportStats />
-          </div>
-
           <article
             role="alert"
             className="rounded-lg max-w-screen-md border-s-4 border-blue-500 bg-blue-50 p-4 dark:border-s-4 dark:border-blue-600 dark:bg-blue-300 dark:text-slate-600"
@@ -209,65 +295,102 @@ export const Import = (props: ImportProps): ReactElement => {
             </div>
           </article>
 
-          {/* Start Smart Import Button - shown when there are new files and no import is running */}
-          {hasNewFiles &&
-           (importJobQueue.status === "drained" || importJobQueue.status === undefined) && (
-            <div className="my-6 max-w-screen-lg">
+          {/* Import Statistics */}
+          <div className="my-6 max-w-screen-lg">
+            <RealTimeImportStats />
+          </div>
+
+          {/* Error Message */}
+          {importError && (
+            <div className="my-6 max-w-screen-lg rounded-lg border-s-4 border-red-500 bg-red-50 dark:bg-red-900/20 p-4">
+              <div className="flex items-start gap-3">
+                <span className="w-6 h-6 text-red-600 dark:text-red-400 mt-0.5">
+                  <i className="h-6 w-6 icon-[solar--danger-circle-bold]"></i>
+                </span>
+                <div className="flex-1">
+                  <p className="font-semibold text-red-800 dark:text-red-300">
+                    Import Error
+                  </p>
+                  <p className="text-sm text-red-700 dark:text-red-400 mt-1">
+                    {importError}
+                  </p>
+                </div>
+                <button
+                  onClick={() => setImportError(null)}
+                  className="text-red-600 dark:text-red-400 hover:text-red-800 dark:hover:text-red-200"
+                >
+                  <span className="w-5 h-5">
+                    <i className="h-5 w-5 icon-[solar--close-circle-bold]"></i>
+                  </span>
+                </button>
+              </div>
+            </div>
+          )}
+
+          {/* Active Session Warning */}
+          {hasActiveSession && !hasNewFiles && (
+            <div className="my-6 max-w-screen-lg rounded-lg border-s-4 border-yellow-500 bg-yellow-50 dark:bg-yellow-900/20 p-4">
+              <div className="flex items-start gap-3">
+                <span className="w-6 h-6 text-yellow-600 dark:text-yellow-400 mt-0.5">
+                  <i className="h-6 w-6 icon-[solar--info-circle-bold]"></i>
+                </span>
+                <div className="flex-1">
+                  <p className="font-semibold text-yellow-800 dark:text-yellow-300">
+                    Import In Progress
+                  </p>
+                  <p className="text-sm text-yellow-700 dark:text-yellow-400 mt-1">
+                    An import session is currently active. New imports cannot be started until it completes.
+                  </p>
+                </div>
+              </div>
+            </div>
+          )}
+
+          {/* Import Action Buttons */}
+          <div className="my-6 max-w-screen-lg flex flex-col sm:flex-row gap-3">
+            {/* Start Smart Import Button - shown when there are new files, no active session, and no import is running */}
+            {hasNewFiles &&
+             !hasActiveSession &&
+             (importJobQueue.status === "drained" || importJobQueue.status === undefined) && (
               <button
                 className="flex space-x-1 sm:mt-0 sm:flex-row sm:items-center rounded-lg border border-green-400 dark:border-green-200 bg-green-200 px-5 py-3 text-gray-500 hover:bg-transparent hover:text-green-600 focus:outline-none focus:ring active:text-green-500 disabled:opacity-50 disabled:cursor-not-allowed"
                 onClick={handleStartSmartImport}
-                disabled={isStartingImport}
+                disabled={isStartingImport || hasActiveSession}
               >
                 <span className="text-md font-medium">
-                  {isStartingImport ? "Starting Import..." : `Start Smart Import (${cachedStats?.getCachedImportStatistics?.stats?.newFiles} new files)`}
+                  {isStartingImport
+                    ? "Starting Import..."
+                    : importStats?.getImportStatistics?.stats?.alreadyImported === 0
+                      ? `Start Import (${importStats?.getImportStatistics?.stats?.newFiles} files)`
+                      : `Start Incremental Import (${importStats?.getImportStatistics?.stats?.newFiles} new files)`
+                  }
                 </span>
                 <span className="w-6 h-6">
                   <i className="h-6 w-6 icon-[solar--file-left-bold-duotone]"></i>
                 </span>
               </button>
-            </div>
-          )}
+            )}
 
-          {(importJobQueue.status === "running" ||
-            importJobQueue.status === "paused") && (
-            <>
-              <span className="flex items-center my-5 max-w-screen-lg">
-                <span className="text-xl text-slate-500 dark:text-slate-200 pr-5">
-                  Import Activity
+            {/* Force Re-Import Button - always shown when no import is running */}
+            {!hasActiveSession &&
+             (importJobQueue.status === "drained" || importJobQueue.status === undefined) && (
+              <button
+                className="flex space-x-1 sm:mt-0 sm:flex-row sm:items-center rounded-lg border border-orange-400 dark:border-orange-200 bg-orange-200 px-5 py-3 text-gray-700 hover:bg-transparent hover:text-orange-600 focus:outline-none focus:ring active:text-orange-500 disabled:opacity-50 disabled:cursor-not-allowed"
+                onClick={handleForceReImport}
+                disabled={isForceReImporting || hasActiveSession}
+                title="Re-import all files to fix Elasticsearch indexing issues"
+              >
+                <span className="text-md font-medium">
+                  {isForceReImporting ? "Starting Re-Import..." : "Force Re-Import All Files"}
                 </span>
-                <span className="h-px flex-1 bg-slate-200 dark:bg-slate-400"></span>
-              </span>
-              <div className="mt-5 flex flex-col gap-4 sm:mt-0 sm:flex-row sm:items-center">
-                <dl className="grid grid-cols-2 gap-4 sm:grid-cols-2">
-                  <div className="flex flex-col rounded-lg bg-green-100 dark:bg-green-200 px-4 py-6 text-center">
-                    <dd className="text-3xl text-green-600 md:text-5xl">
-                      {importJobQueue.successfulJobCount}
-                    </dd>
-                    <dt className="text-lg font-medium text-gray-500">
-                      imported
-                    </dt>
-                  </div>
-                  <div className="flex flex-col rounded-lg bg-red-100 dark:bg-red-200 px-4 py-6 text-center">
-                    <dd className="text-3xl text-red-600 md:text-5xl">
-                      {importJobQueue.failedJobCount}
-                    </dd>
-                    <dt className="text-lg font-medium text-gray-500">
-                      failed
-                    </dt>
-                  </div>
+                <span className="w-6 h-6">
+                  <i className="h-6 w-6 icon-[solar--refresh-bold-duotone]"></i>
+                </span>
+              </button>
+            )}
+          </div>
 
-                  <div className="flex flex-col dark:text-slate-200 text-slate-400">
-                    <dd>{renderQueueControls(importJobQueue.status)}</dd>
-                  </div>
-                </dl>
-              </div>
-              <div className="flex">
-                <span className="mt-2 dark:text-slate-200 text-slate-400">
-                  Imported: <span>{importJobQueue.mostRecentImport}</span>
-                </span>
-              </div>
-            </>
-          )}
+          {/* Import activity is now shown in the RealTimeImportStats component above */}
 
           {!isLoading && !isEmpty(data?.getJobResultStatistics) && (
             <div className="max-w-screen-lg">