Merge branch 'main' into comicvine-integration-improvements

Included # of issues in a wanted volume

Dockerfile

@@ -1,36 +1,22 @@
-# Use Node.js 22 as the base image
-FROM node:22-alpine
-
+FROM node:18.15.0-alpine
 LABEL maintainer="Rishi Ghan <rishi.ghan@gmail.com>"
 
-# Set the working directory inside the container
 WORKDIR /threetwo
 
-# Copy package.json and yarn.lock to leverage Docker cache
-COPY package.json yarn.lock ./
+# Copy package.json and lock file first to leverage Docker cache
+COPY package.json ./
+COPY yarn.lock ./
 
-# Install build dependencies necessary for native modules (for node-sass)
-RUN apk --no-cache add \
-    g++ \
-    make \
-    python3 \
-    autoconf \
-    automake \
-    libtool \
-    nasm \
-    git
+# Install build dependencies necessary for native modules
+RUN apk --no-cache add g++ make libpng-dev git python3 autoconf automake libjpeg-turbo-dev mesa-dev mesa libxi build-base gcc libtool nasm
 
 # Install node modules
 RUN yarn install --ignore-engines
 
-# Explicitly install sass
-RUN yarn add -D sass
-
-# Copy the rest of the application files into the container
+# Copy the rest of the application
 COPY . .
 
-# Expose the application port (default for Vite)
 EXPOSE 5173
 
-# Start the application with yarn
-ENTRYPOINT ["yarn", "start"]
+# Use yarn start if you want to stick with yarn, or change to npm start if you prefer npm
+ENTRYPOINT [ "yarn", "start" ]

package.json

@@ -29,20 +29,18 @@
     "@types/react-router-dom": "^5.3.3",
     "@vitejs/plugin-react": "^4.2.1",
     "airdcpp-apisocket": "^2.5.0-beta.2",
-    "axios": "^1.8.2",
+    "axios": "^1.6.8",
     "axios-cache-interceptor": "^1.0.1",
     "axios-rate-limit": "^1.3.0",
     "babel-plugin-styled-components": "^2.1.4",
     "date-fns": "^2.28.0",
     "dayjs": "^1.10.6",
     "ellipsize": "^0.5.1",
-    "express": "^4.20.0",
+    "express": "^4.19.2",
     "filename-parser": "^1.0.2",
     "final-form": "^4.20.2",
     "final-form-arrays": "^3.0.2",
     "focus-trap-react": "^10.2.3",
-    "graphql": "^16.0.0",
-    "graphql-request": "^7.2.0",
     "history": "^5.3.0",
     "html-to-text": "^8.1.0",
     "i18next": "^23.11.1",
@@ -55,7 +53,7 @@
     "pretty-bytes": "^5.6.0",
     "prop-types": "^15.8.1",
     "qs": "^6.10.5",
-    "react": "^18.3.1",
+    "react": "^18.2.0",
     "react-collapsible": "^2.9.0",
     "react-comic-viewer": "^0.4.0",
     "react-day-picker": "^8.10.0",
@@ -66,17 +64,19 @@
     "react-i18next": "^14.1.0",
     "react-loader-spinner": "^4.0.0",
     "react-modal": "^3.15.1",
-    "react-router": "^7.5.2",
+    "react-router": "^6.9.0",
     "react-router-dom": "^6.9.0",
     "react-select": "^5.8.0",
     "react-select-async-paginate": "^0.7.2",
     "react-sliding-pane": "^7.1.0",
     "react-textarea-autosize": "^8.3.4",
-    "react-toastify": "^10.0.5",
+    "reapop": "^4.2.1",
     "socket.io-client": "^4.3.2",
     "styled-components": "^6.1.0",
     "threetwo-ui-typings": "^1.0.14",
-    "vite": "^5.4.19",
+
+    "vite": "^5.2.7",
+
     "vite-plugin-html": "^3.2.0",
     "websocket": "^1.0.34",
     "zustand": "^4.4.6"
@@ -115,7 +115,7 @@
     "eslint-plugin-prettier": "^3.3.1",
     "eslint-plugin-react": "^7.22.0",
     "eslint-plugin-storybook": "^0.6.13",
-    "express": "^4.20.0",
+    "express": "^4.19.2",
     "install": "^0.13.0",
     "jest": "^29.6.3",
     "nodemon": "^3.0.1",

src/client/components/App.tsx

@@ -1,20 +1,13 @@
-import React, { ReactElement, useEffect } from "react";
+import React, { ReactElement } from "react";
 import { Outlet } from "react-router-dom";
 import { Navbar2 } from "./shared/Navbar2";
-import { ToastContainer } from "react-toastify";
 import "../assets/scss/App.scss";
-import { useStore } from "../store";
 
 export const App = (): ReactElement => {
-  useEffect(() => {
-    useStore.getState().getSocket("/"); // Connect to the base namespace
-  }, []);
-  
   return (
     <>
       <Navbar2 />
       <Outlet />
-      <ToastContainer stacked hideProgressBar />
     </>
   );
 };

src/client/components/ComicDetail/AcquisitionPanel.tsx

@@ -1,11 +1,7 @@
-import React, {
-  useCallback,
-  ReactElement,
-  useEffect,
-  useRef,
-  useState,
-} from "react";
-import { SearchQuery, PriorityEnum, SearchResponse, SearchInstance } from "threetwo-ui-typings";
+import React, { useCallback, ReactElement, useEffect, useState } from "react";
+import { getBundlesForComic, sleep } from "../../actions/airdcpp.actions";
+import { SearchQuery, PriorityEnum, SearchResponse } from "threetwo-ui-typings";
+import { RootState, SearchInstance } from "threetwo-ui-typings";
 import ellipsize from "ellipsize";
 import { Form, Field } from "react-final-form";
 import { difference } from "../../shared/utils/object.utils";
@@ -14,194 +10,59 @@ import { useStore } from "../../store";
 import { useShallow } from "zustand/react/shallow";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
 import axios from "axios";
-import { AIRDCPP_SERVICE_BASE_URI, SETTINGS_SERVICE_BASE_URI } from "../../constants/endpoints";
-import type { Socket } from "socket.io-client";
+import { AIRDCPP_SERVICE_BASE_URI } from "../../constants/endpoints";
 
 interface IAcquisitionPanelProps {
   query: any;
-  comicObjectId: string;
+  comicObjectId: any;
   comicObject: any;
   settings: any;
 }
 
-interface AirDCPPConfig {
-  protocol: string;
-  hostname: string;
-  username: string;
-  password: string;
-}
-
-interface SearchResult {
-  id: string;
-  name: string;
-  type: {
-    id: string;
-    str: string;
-  };
-  size: number;
-  slots: {
-    total: number;
-    free: number;
-  };
-  users: {
-    user: {
-      nicks: string;
-      flags: string[];
-    };
-  };
-  dupe?: any;
-}
-
-interface SearchInstanceData {
-  id: number;
-  owner: string;
-  expires_in: number;
-}
-
-interface SearchInfo {
-  query: {
-    pattern: string;
-    extensions: string[];
-    file_type: string;
-  };
-}
-
-interface Hub {
-  hub_url: string;
-  identity: {
-    name: string;
-  };
-  value: string;
-}
-
-interface SearchFormValues {
-  issueName: string;
-}
-
 export const AcquisitionPanel = (
   props: IAcquisitionPanelProps,
 ): ReactElement => {
-  const socketRef = useRef<Socket>();
-  const queryClient = useQueryClient();
-  const searchTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+  const { socketIOInstance } = useStore(
+    useShallow((state) => ({
+      socketIOInstance: state.socketIOInstance,
+    })),
+  );
 
-  const [dcppQuery, setDcppQuery] = useState<SearchQuery | null>(null);
-  const [airDCPPSearchResults, setAirDCPPSearchResults] = useState<SearchResult[]>([]);
-  const [airDCPPSearchStatus, setAirDCPPSearchStatus] = useState(false);
-  const [isSearching, setIsSearching] = useState(false);
-  const [airDCPPSearchInstance, setAirDCPPSearchInstance] = useState<SearchInstanceData | null>(null);
-  const [airDCPPSearchInfo, setAirDCPPSearchInfo] = useState<SearchInfo | null>(null);
-  const [searchError, setSearchError] = useState<string | null>(null);
-
-  const { comicObjectId } = props;
-  const issueName = props.query.issue.name || "";
-  const sanitizedIssueName = issueName.replace(/[^a-zA-Z0-9 ]/g, " ");
-
-  // Search timeout duration in milliseconds (30 seconds)
-  const SEARCH_TIMEOUT_MS = 30000;
-
-  useEffect(() => {
-    const socket = useStore.getState().getSocket("manual");
-    socketRef.current = socket;
-
-    // --- Handlers ---
-    const handleResultAdded = ({ result }: { result: SearchResult }) => {
-      setAirDCPPSearchResults((prev) =>
-        prev.some((r) => r.id === result.id) ? prev : [...prev, result],
-      );
+  interface SearchData {
+    query: Pick<SearchQuery, "pattern"> & Partial<Omit<SearchQuery, "pattern">>;
+    hub_urls: string[] | undefined | null;
+    priority: PriorityEnum;
+  }
+  interface SearchResult {
+    result: {
+      id: number;
     };
+    search_id: number;
+    // Add other properties as needed
+  }
 
-    const handleResultUpdated = ({ result }: { result: SearchResult }) => {
-      setAirDCPPSearchResults((prev) => {
-        const idx = prev.findIndex((r) => r.id === result.id);
-        if (idx === -1) return prev;
-        if (JSON.stringify(prev[idx]) === JSON.stringify(result)) return prev;
-        const next = [...prev];
-        next[idx] = result;
-        return next;
-      });
-    };
-
-    const handleSearchInitiated = (data: { instance: SearchInstanceData }) => {
-      setAirDCPPSearchInstance(data.instance);
-      setIsSearching(true);
-      setSearchError(null);
-      
-      // Clear any existing timeout
-      if (searchTimeoutRef.current) {
-        clearTimeout(searchTimeoutRef.current);
-      }
-      
-      // Set a timeout to stop searching after SEARCH_TIMEOUT_MS
-      searchTimeoutRef.current = setTimeout(() => {
-        setIsSearching(false);
-        console.log(`Search timeout reached after ${SEARCH_TIMEOUT_MS / 1000} seconds`);
-      }, SEARCH_TIMEOUT_MS);
-    };
-
-    const handleSearchesSent = (data: { searchInfo: SearchInfo }) => {
-      setAirDCPPSearchInfo(data.searchInfo);
-    };
-
-    const handleSearchError = (error: { message: string }) => {
-      setSearchError(error.message || "Search failed");
-      setIsSearching(false);
-      
-      // Clear timeout on error
-      if (searchTimeoutRef.current) {
-        clearTimeout(searchTimeoutRef.current);
-        searchTimeoutRef.current = null;
-      }
-    };
-
-    const handleSearchCompleted = () => {
-      setIsSearching(false);
-      
-      // Clear timeout when search completes
-      if (searchTimeoutRef.current) {
-        clearTimeout(searchTimeoutRef.current);
-        searchTimeoutRef.current = null;
-      }
-    };
-
-    // --- Subscribe once ---
-    socket.on("searchResultAdded", handleResultAdded);
-    socket.on("searchResultUpdated", handleResultUpdated);
-    socket.on("searchInitiated", handleSearchInitiated);
-    socket.on("searchesSent", handleSearchesSent);
-    socket.on("searchError", handleSearchError);
-    socket.on("searchCompleted", handleSearchCompleted);
-
-    return () => {
-      socket.off("searchResultAdded", handleResultAdded);
-      socket.off("searchResultUpdated", handleResultUpdated);
-      socket.off("searchInitiated", handleSearchInitiated);
-      socket.off("searchesSent", handleSearchesSent);
-      socket.off("searchError", handleSearchError);
-      socket.off("searchCompleted", handleSearchCompleted);
-      
-      // Clean up timeout on unmount
-      if (searchTimeoutRef.current) {
-        clearTimeout(searchTimeoutRef.current);
-      }
-    };
-  }, [SEARCH_TIMEOUT_MS]);
+  const handleSearch = (searchQuery) => {
+    // Use the already connected socket instance to emit events
+    socketIOInstance.emit("initiateSearch", searchQuery);
+  };
 
   const {
     data: settings,
-    isLoading: isLoadingSettings,
-    isError: isSettingsError,
+    isLoading,
+    isError,
   } = useQuery({
     queryKey: ["settings"],
     queryFn: async () =>
       await axios({
-        url: `${SETTINGS_SERVICE_BASE_URI}/getAllSettings`,
+        url: "http://localhost:3000/api/settings/getAllSettings",
         method: "GET",
       }),
   });
-
-  const { data: hubs, isLoading: isLoadingHubs } = useQuery({
-    queryKey: ["hubs", settings?.data.directConnect?.client?.host],
+  /**
+   * Get the hubs list from an AirDCPP Socket
+   */
+  const { data: hubs } = useQuery({
+    queryKey: ["hubs"],
     queryFn: async () =>
       await axios({
         url: `${AIRDCPP_SERVICE_BASE_URI}/getHubs`,
@@ -210,72 +71,112 @@ export const AcquisitionPanel = (
           host: settings?.data.directConnect?.client?.host,
         },
       }),
-    enabled: !!settings?.data?.directConnect?.client?.host,
+    enabled: !isEmpty(settings?.data.directConnect?.client?.host),
   });
+  const { comicObjectId } = props;
+  const issueName = props.query.issue.name || "";
+  const sanitizedIssueName = issueName.replace(/[^a-zA-Z0-9 ]/g, " ");
 
-  // Get AirDC++ config from settings
-  const airDCPPConfig: AirDCPPConfig | null = settings?.data?.directConnect?.client
-    ? {
-        protocol: settings.data.directConnect.client.protocol || "ws",
-        hostname: typeof settings.data.directConnect.client.host === 'string'
-          ? settings.data.directConnect.client.host
-          : `${settings.data.directConnect.client.host?.hostname || 'localhost'}:${settings.data.directConnect.client.host?.port || '5600'}`,
-        username: settings.data.directConnect.client.username || "admin",
-        password: settings.data.directConnect.client.password || "password",
-      }
-    : null;
+  const [dcppQuery, setDcppQuery] = useState({});
+  const [airDCPPSearchResults, setAirDCPPSearchResults] = useState<
+    SearchResult[]
+  >([]);
+  const [airDCPPSearchStatus, setAirDCPPSearchStatus] = useState(false);
+  const [airDCPPSearchInstance, setAirDCPPSearchInstance] = useState({});
+  const [airDCPPSearchInfo, setAirDCPPSearchInfo] = useState({});
+  const queryClient = useQueryClient();
 
+  // Construct a AirDC++ query based on metadata inferred, upon component mount
+  // Pre-populate the search input with the search string, so that
+  // all the user has to do is hit "Search AirDC++" to perform a search
   useEffect(() => {
-    if (hubs?.data && Array.isArray(hubs.data) && hubs.data.length > 0) {
-      const dcppSearchQuery = {
-        query: {
-          pattern: `${sanitizedIssueName.replace(/#/g, "")}`,
-          extensions: ["cbz", "cbr", "cb7"],
-        },
-        hub_urls: map(hubs.data, (item) => item.value),
-        priority: 5,
-      };
-      setDcppQuery(dcppSearchQuery as any);
-    }
-  }, [hubs, sanitizedIssueName]);
+    // AirDC++ search query
+    const dcppSearchQuery = {
+      query: {
+        pattern: `${sanitizedIssueName.replace(/#/g, "")}`,
+        extensions: ["cbz", "cbr", "cb7"],
+      },
+      hub_urls: map(hubs?.data, (item) => item.value),
+      priority: 5,
+    };
+    setDcppQuery(dcppSearchQuery);
+  }, []);
 
+  /**
+   * Method to perform a search via an AirDC++ websocket
+   * @param {SearchData} data - a SearchData query
+   * @param {any} ADCPPSocket - an intialized AirDC++ socket instance
+   */
   const search = async (searchData: any) => {
-    if (!airDCPPConfig) {
-      setSearchError("AirDC++ configuration not found in settings");
-      return;
-    }
-
-    if (!socketRef.current) {
-      setSearchError("Socket connection not available");
-      return;
-    }
-
     setAirDCPPSearchResults([]);
-    setIsSearching(true);
-    setSearchError(null);
-    
-    socketRef.current.emit("call", "socket.search", {
-      query: searchData,
-      namespace: "/manual",
-      config: airDCPPConfig,
-    });
+    socketIOInstance.emit(
+      "call",
+      "socket.search",
+      {
+        query: searchData,
+        config: {
+          protocol: `ws`,
+          hostname: `localhost:5600`,
+          username: `user`,
+          password: `pass`,
+        },
+      },
+      (data: any) => console.log(data),
+    );
   };
 
-  const download = async (
-    searchInstanceId: number,
-    resultId: string,
-    comicObjectId: string,
-    name: string,
-    size: number,
-    type: SearchResult["type"],
-    config: AirDCPPConfig,
-  ): Promise<void> => {
-    if (!socketRef.current) {
-      console.error("Socket connection not available");
-      return;
-    }
+  socketIOInstance.on("searchResultAdded", (data: SearchResult) => {
+    setAirDCPPSearchResults((previousState) => {
+      const exists = previousState.some(
+        (item) => data.result.id === item.result.id,
+      );
+      if (!exists) {
+        return [...previousState, data];
+      }
+      return previousState;
+    });
+  });
 
-    socketRef.current.emit(
+  socketIOInstance.on("searchResultUpdated", (groupedResult: SearchResult) => {
+    // ...update properties of the existing result in the UI
+    const bundleToUpdateIndex = airDCPPSearchResults?.findIndex(
+      (bundle) => bundle.result.id === groupedResult.result.id,
+    );
+    const updatedState = [...airDCPPSearchResults];
+    if (!isNil(difference(updatedState[bundleToUpdateIndex], groupedResult))) {
+      updatedState[bundleToUpdateIndex] = groupedResult;
+    }
+    setAirDCPPSearchResults((state) => [...state, ...updatedState]);
+  });
+
+  socketIOInstance.on("searchInitiated", (data) => {
+    setAirDCPPSearchInstance(data.instance);
+  });
+  socketIOInstance.on("searchesSent", (data) => {
+    setAirDCPPSearchInfo(data.searchInfo);
+  });
+
+  /**
+   * Method to download a bundle associated with a search result from AirDC++
+   * @param {Number} searchInstanceId - description
+   * @param {String} resultId - description
+   * @param {String} comicObjectId - description
+   * @param {String} name - description
+   * @param {Number} size - description
+   * @param {any} type - description
+   * @param {any} config - description
+   * @returns {void}  - description
+   */
+  const download = async (
+    searchInstanceId: Number,
+    resultId: String,
+    comicObjectId: String,
+    name: String,
+    size: Number,
+    type: any,
+    config: any,
+  ): void => {
+    socketIOInstance.emit(
       "call",
       "socket.download",
       {
@@ -287,27 +188,16 @@ export const AcquisitionPanel = (
         type,
         config,
       },
-      (data: any) => console.log("Download initiated:", data),
+      (data: any) => console.log(data),
     );
   };
-
-  const getDCPPSearchResults = async (searchQuery: SearchFormValues) => {
-    if (!searchQuery.issueName || searchQuery.issueName.trim() === "") {
-      setSearchError("Please enter a search term");
-      return;
-    }
-
-    if (!hubs?.data || !Array.isArray(hubs.data) || hubs.data.length === 0) {
-      setSearchError("No hubs configured");
-      return;
-    }
-
+  const getDCPPSearchResults = async (searchQuery) => {
     const manualQuery = {
       query: {
-        pattern: `${searchQuery.issueName.trim()}`,
+        pattern: `${searchQuery.issueName}`,
         extensions: ["cbz", "cbr", "cb7"],
       },
-      hub_urls: [hubs.data[0].hub_url],
+      hub_urls: map(hubs?.data, (hub) => hub.hub_url),
       priority: 5,
     };
 
@@ -316,13 +206,8 @@ export const AcquisitionPanel = (
 
   return (
     <>
-      <div className="mt-5 mb-3">
-        {isLoadingSettings || isLoadingHubs ? (
-          <div className="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400">
-            <i className="icon-[solar--refresh-bold-duotone] h-5 w-5 animate-spin" />
-            Loading configuration...
-          </div>
-        ) : !isEmpty(hubs?.data) ? (
+      <div className="mt-5">
+        {!isEmpty(hubs?.data) ? (
           <Form
             onSubmit={getDCPPSearchResults}
             initialValues={{
@@ -342,31 +227,20 @@ export const AcquisitionPanel = (
                             {...input}
                             className="dark:bg-slate-400 bg-slate-300 py-2 px-2 rounded-l-md border-gray-300 h-10 min-w-full dark:text-slate-800 sm:text-md sm:leading-5 focus:outline-none focus:shadow-outline-blue focus:border-blue-300"
                             placeholder="Type an issue/volume name"
-                            disabled={isSearching}
                           />
 
                           <button
-                            className="sm:mt-0 min-w-fit rounded-r-lg border border-green-400 dark:border-green-200 bg-green-200 px-3 py-1 text-gray-500 hover:bg-transparent hover:text-green-600 focus:outline-none focus:ring active:text-indigo-500 disabled:opacity-50 disabled:cursor-not-allowed"
+                            className="sm:mt-0 min-w-fit rounded-r-lg border border-green-400 dark:border-green-200 bg-green-200 px-3 py-1 text-gray-500 hover:bg-transparent hover:text-green-600 focus:outline-none focus:ring active:text-indigo-500"
                             type="submit"
-                            disabled={isSearching}
                           >
-                            <div className="flex flex-row items-center">
-                              {isSearching ? (
-                                <>
-                                  <i className="icon-[solar--refresh-bold-duotone] h-5 w-5 animate-spin mr-2" />
-                                  Searching...
-                                </>
-                              ) : (
-                                <>
-                                  Search DC++
-                                  <div className="h-5 w-5 ml-2">
-                                    <img
-                                      src="/src/client/assets/img/airdcpp_logo.svg"
-                                      className="h-5 w-5"
-                                    />
-                                  </div>
-                                </>
-                              )}
+                            <div className="flex flex-row">
+                              Search DC++
+                              <div className="h-5 w-5 ml-2">
+                                <img
+                                  src="/src/client/assets/img/airdcpp_logo.svg"
+                                  className="h-5 w-5"
+                                />
+                              </div>
                             </div>
                           </button>
                         </div>
@@ -378,45 +252,27 @@ export const AcquisitionPanel = (
             )}
           />
         ) : (
-          <article
-            role="alert"
-            className="mt-4 rounded-lg text-sm max-w-screen-md border-s-4 border-yellow-500 bg-yellow-50 p-4 dark:border-s-4 dark:border-yellow-600 dark:bg-yellow-300 dark:text-slate-600"
-          >
-            No AirDC++ hub configured. Please configure it in{" "}
-            <code>Settings &gt; AirDC++ &gt; Hubs</code>.
-          </article>
+          <div className="">
+            <article className="">
+              <div className="">
+                AirDC++ is not configured. Please configure it in{" "}
+                <code>Settings &gt; AirDC++ &gt; Connection</code>.
+              </div>
+            </article>
+          </div>
         )}
       </div>
 
-      {/* Search Error Display */}
-      {searchError && (
-        <article
-          role="alert"
-          className="mt-4 rounded-lg text-sm max-w-screen-md border-s-4 border-red-500 bg-red-50 p-4 dark:border-s-4 dark:border-red-600 dark:bg-red-300 dark:text-slate-600"
-        >
-          <strong>Error:</strong> {searchError}
-        </article>
-      )}
-      {/* configured hub */}
-      {!isEmpty(hubs?.data) && hubs?.data[0] && (
-        <span className="inline-flex items-center bg-green-50 text-slate-800 text-xs font-medium px-2.5 py-0.5 rounded-md dark:text-slate-900 dark:bg-green-300">
-          <span className="pr-1 pt-1">
-            <i className="icon-[solar--server-2-bold-duotone] w-5 h-5"></i>
-          </span>
-          {hubs.data[0].hub_url}
-        </span>
-      )}
-
       {/* AirDC++ search instance details */}
-      {airDCPPSearchInstance &&
-        airDCPPSearchInfo &&
-        hubs?.data && (
+      {!isNil(airDCPPSearchInstance) &&
+        !isEmpty(airDCPPSearchInfo) &&
+        !isNil(hubs) && (
           <div className="flex flex-row gap-3 my-5 font-hasklig">
             <div className="block max-w-sm h-fit p-6 text-sm bg-white border border-gray-200 rounded-lg shadow dark:bg-slate-400 dark:border-gray-700">
               <dl>
                 <dt>
                   <div className="mb-1">
-                    {hubs.data.map((value: Hub, idx: number) => (
+                    {hubs?.data.map((value, idx) => (
                       <span className="tag is-warning" key={idx}>
                         {value.identity.name}
                       </span>
@@ -455,119 +311,143 @@ export const AcquisitionPanel = (
         )}
 
       {/* AirDC++ results */}
-      <div className="">
-        {airDCPPSearchResults.length > 0 ? (
-          <div className="overflow-x-auto max-w-full mt-6">
-            <table className="w-full table-auto text-sm text-gray-900 dark:text-slate-100">
+      <div className="columns">
+        {!isNil(airDCPPSearchResults) && !isEmpty(airDCPPSearchResults) ? (
+          <div className="overflow-x-auto w-fit mt-4 rounded-lg border border-gray-200 dark:border-gray-500">
+            <table className="min-w-full divide-y-2 divide-gray-200 dark:divide-gray-500 text-md">
               <thead>
-                <tr className="border-b border-gray-300 dark:border-slate-700">
-                  <th className="whitespace-nowrap px-3 py-2 text-left text-[11px] font-semibold tracking-wide text-gray-500 dark:text-slate-400 uppercase">
+                <tr>
+                  <th className="whitespace-nowrap px-2 py-2 font-medium text-gray-900 dark:text-slate-200">
                     Name
                   </th>
-                  <th className="whitespace-nowrap px-3 py-2 text-left text-[11px] font-semibold tracking-wide text-gray-500 dark:text-slate-400 uppercase">
+                  <th className="whitespace-nowrap py-2 font-medium text-gray-900 dark:text-slate-200">
                     Type
                   </th>
-                  <th className="whitespace-nowrap px-3 py-2 text-left text-[11px] font-semibold tracking-wide text-gray-500 dark:text-slate-400 uppercase">
+                  <th className="whitespace-nowrap py-2 font-medium text-gray-900 dark:text-slate-200">
                     Slots
                   </th>
-                  <th className="whitespace-nowrap px-3 py-2 text-left text-[11px] font-semibold tracking-wide text-gray-500 dark:text-slate-400 uppercase">
+                  <th className="whitespace-nowrap py-2 font-medium text-gray-900 dark:text-slate-200">
                     Actions
                   </th>
                 </tr>
               </thead>
-              <tbody>
-                {map(
-                  airDCPPSearchResults,
-                  ({ dupe, type, name, id, slots, users, size }, idx) => (
+              <tbody className="divide-y divide-slate-100 dark:divide-gray-500">
+                {map(airDCPPSearchResults, ({ result, search_id }, idx) => {
+                  return (
                     <tr
                       key={idx}
                       className={
-                        !isNil(dupe)
-                          ? "border-b border-gray-200 dark:border-slate-700 bg-gray-100 dark:bg-gray-700"
-                          : "border-b border-gray-200 dark:border-slate-700 text-sm"
+                        !isNil(result.dupe)
+                          ? "bg-gray-100 dark:bg-gray-700"
+                          : "w-fit text-sm"
                       }
                     >
-                      {/* NAME */}
-                      <td className="whitespace-nowrap px-3 py-3 text-gray-700 dark:text-slate-300 max-w-xs">
+                      <td className="whitespace-nowrap px-3 py-3 text-gray-700 dark:text-slate-300">
                         <p className="mb-2">
-                          {type.id === "directory" && (
-                            <i className="fas fa-folder mr-1"></i>
-                          )}
-                          {ellipsize(name, 45)}
+                          {result.type.id === "directory" ? (
+                            <i className="fas fa-folder"></i>
+                          ) : null}
+                          {ellipsize(result.name, 70)}
                         </p>
+
                         <dl>
                           <dd>
-                            <div className="inline-flex flex-wrap gap-1">
-                              {!isNil(dupe) && (
-                                <span className="inline-flex items-center gap-1 bg-slate-100 text-slate-800 text-xs font-medium py-0.5 px-2 rounded dark:bg-slate-400 dark:text-slate-900">
-                                  <i className="icon-[solar--copy-bold-duotone] w-4 h-4"></i>
-                                  Dupe
+                            <div className="inline-flex flex-row gap-2">
+                              {!isNil(result.dupe) ? (
+                                <span className="inline-flex items-center bg-slate-50 text-slate-800 text-xs font-medium px-2 rounded-md dark:text-slate-900 dark:bg-slate-400">
+                                  <span className="pr-1 pt-1">
+                                    <i className="icon-[solar--copy-bold-duotone] w-5 h-5"></i>
+                                  </span>
+
+                                  <span className="text-md text-slate-500 dark:text-slate-900">
+                                    Dupe
+                                  </span>
+                                </span>
+                              ) : null}
+
+                              {/* Nicks */}
+                              <span className="inline-flex items-center bg-slate-50 text-slate-800 text-xs font-medium px-2 rounded-md dark:text-slate-900 dark:bg-slate-400">
+                                <span className="pr-1 pt-1">
+                                  <i className="icon-[solar--user-rounded-bold-duotone] w-5 h-5"></i>
+                                </span>
+
+                                <span className="text-md text-slate-500 dark:text-slate-900">
+                                  {result.users.user.nicks}
                                 </span>
-                              )}
-                              <span className="inline-flex items-center gap-1 bg-slate-100 text-slate-800 text-xs font-medium py-0.5 px-2 rounded dark:bg-slate-400 dark:text-slate-900">
-                                <i className="icon-[solar--user-rounded-bold-duotone] w-4 h-4"></i>
-                                {users.user.nicks}
                               </span>
-                              {users.user.flags.map((flag: string, flagIdx: number) => (
-                                <span
-                                  key={flagIdx}
-                                  className="inline-flex items-center gap-1 bg-slate-100 text-slate-800 text-xs font-medium py-0.5 px-2 rounded dark:bg-slate-400 dark:text-slate-900"
-                                >
-                                  <i className="icon-[solar--tag-horizontal-bold-duotone] w-4 h-4"></i>
-                                  {flag}
+                              {/* Flags */}
+                              {result.users.user.flags.map((flag, idx) => (
+                                <span className="inline-flex items-center bg-slate-50 text-slate-800 text-xs font-medium px-2 rounded-md dark:text-slate-900 dark:bg-slate-400">
+                                  <span className="pr-1 pt-1">
+                                    <i className="icon-[solar--tag-horizontal-bold-duotone] w-5 h-5"></i>
+                                  </span>
+
+                                  <span className="text-md text-slate-500 dark:text-slate-900">
+                                    {flag}
+                                  </span>
                                 </span>
                               ))}
                             </div>
                           </dd>
                         </dl>
                       </td>
+                      <td>
+                        {/* Extension */}
+                        <span className="inline-flex items-center bg-slate-50 text-slate-800 text-xs font-medium px-2 rounded-md dark:text-slate-900 dark:bg-slate-400">
+                          <span className="pr-1 pt-1">
+                            <i className="icon-[solar--zip-file-bold-duotone] w-5 h-5"></i>
+                          </span>
 
-                      {/* TYPE */}
-                      <td className="px-2 py-3">
-                        <span className="inline-flex items-center gap-1 bg-slate-100 text-slate-800 text-xs font-medium py-0.5 px-2 rounded dark:bg-slate-400 dark:text-slate-900">
-                          <i className="icon-[solar--zip-file-bold-duotone] w-4 h-4"></i>
-                          {type.str}
+                          <span className="text-md text-slate-500 dark:text-slate-900">
+                            {result.type.str}
+                          </span>
                         </span>
                       </td>
+                      <td className="px-2">
+                        {/* Slots */}
+                        <span className="inline-flex items-center bg-slate-50 text-slate-800 text-xs font-medium px-2 rounded-md dark:text-slate-900 dark:bg-slate-400">
+                          <span className="pr-1 pt-1">
+                            <i className="icon-[solar--settings-minimalistic-bold-duotone] w-5 h-5"></i>
+                          </span>
 
-                      {/* SLOTS */}
-                      <td className="px-2 py-3">
-                        <span className="inline-flex items-center gap-1 bg-slate-100 text-slate-800 text-xs font-medium py-0.5 px-2 rounded dark:bg-slate-400 dark:text-slate-900">
-                          <i className="icon-[solar--settings-minimalistic-bold-duotone] w-4 h-4"></i>
-                          {slots.total} slots; {slots.free} free
+                          <span className="text-md text-slate-500 dark:text-slate-900">
+                            {result.slots.total} slots; {result.slots.free} free
+                          </span>
                         </span>
                       </td>
-
-                      {/* ACTIONS */}
-                      <td className="px-2 py-3">
+                      <td className="px-2">
                         <button
-                          className="inline-flex items-center gap-1 rounded border border-green-500 bg-green-500 px-2 py-1 text-xs font-medium text-white hover:bg-transparent hover:text-green-400 dark:border-green-300 dark:bg-green-300 dark:text-slate-900 dark:hover:bg-transparent disabled:opacity-50 disabled:cursor-not-allowed"
-                          onClick={() => {
-                            if (airDCPPSearchInstance && airDCPPConfig) {
-                              download(
-                                airDCPPSearchInstance.id,
-                                id,
-                                comicObjectId,
-                                name,
-                                size,
-                                type,
-                                airDCPPConfig,
-                              );
-                            }
-                          }}
-                          disabled={!airDCPPSearchInstance || !airDCPPConfig}
+                          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-3 py-1 text-gray-500 hover:bg-transparent hover:text-green-600 focus:outline-none focus:ring active:text-indigo-500"
+                          onClick={() =>
+                            download(
+                              airDCPPSearchInstance.id,
+                              result.id,
+                              comicObjectId,
+                              result.name,
+                              result.size,
+                              result.type,
+                              {
+                                protocol: `ws`,
+                                hostname: `localhost:5600`,
+                                username: `user`,
+                                password: `pass`,
+                              },
+                            )
+                          }
                         >
-                          Download
-                          <i className="icon-[solar--download-bold-duotone] w-4 h-4"></i>
+                          <span className="text-xs">Download</span>
+                          <span className="w-5 h-5">
+                            <i className="h-5 w-5 icon-[solar--download-bold-duotone]"></i>
+                          </span>
                         </button>
                       </td>
                     </tr>
-                  ),
-                )}
+                  );
+                })}
               </tbody>
             </table>
           </div>
-        ) : !isSearching ? (
+        ) : (
           <div className="">
             <article
               role="alert"
@@ -593,11 +473,6 @@ export const AcquisitionPanel = (
               </div>
             </article>
           </div>
-        ) : (
-          <div className="flex items-center justify-center gap-2 text-sm text-gray-600 dark:text-gray-400 mt-6 p-4">
-            <i className="icon-[solar--refresh-bold-duotone] h-6 w-6 animate-spin" />
-            Searching...
-          </div>
         )}
       </div>
     </>

src/client/components/ComicDetail/ActionMenu/Menu.tsx

@@ -1,7 +1,7 @@
 import React, { ReactElement } from "react";
 import Select from "react-select";
 
-export const Menu = (props: any): ReactElement => {
+export const Menu = (props): ReactElement => {
   const {
     filteredActionOptions,
     customStyles,
@@ -13,11 +13,11 @@ export const Menu = (props: any): ReactElement => {
     <Select
       components={{ Placeholder }}
       placeholder={
-        <span className="inline-flex flex-row items-center gap-1.5 pt-1">
-          <div className="w-4 h-4">
-            <i className="icon-[solar--cursor-bold-duotone] w-4 h-4"></i>
+        <span className="inline-flex flex-row items-center gap-2 pt-1">
+          <div className="w-6 h-6">
+            <i className="icon-[solar--cursor-bold-duotone] w-6 h-6"></i>
           </div>
-          <div className="text-sm">Select An Action</div>
+          <div>Select An Action</div>
         </span>
       }
       styles={customStyles}

src/client/components/ComicDetail/AirDCPPBundles.tsx

@@ -3,55 +3,44 @@ import prettyBytes from "pretty-bytes";
 import dayjs from "dayjs";
 import ellipsize from "ellipsize";
 import { map } from "lodash";
-import { DownloadProgressTick } from "./DownloadProgressTick";
+
 export const AirDCPPBundles = (props) => {
   return (
-    <div className="overflow-x-auto w-fit mt-6">
-      <table className="min-w-full text-sm text-gray-900 dark:text-slate-100">
+    <div className="overflow-x-auto w-fit mt-4 rounded-lg border border-gray-200">
+      <table className="min-w-full divide-y-2 divide-gray-200 dark:divide-gray-200 text-md">
         <thead>
-          <tr className="border-b border-gray-300 dark:border-slate-700">
-            <th className="px-3 py-2 text-left text-[11px] font-semibold tracking-wide text-gray-500 dark:text-slate-400 uppercase">
+          <tr>
+            <th className="whitespace-nowrap px-4 py-2 font-medium text-gray-900 dark:text-slate-200">
               Filename
             </th>
-            <th className="px-3 py-2 text-left text-[11px] font-semibold tracking-wide text-gray-500 dark:text-slate-400 uppercase">
+            <th className="whitespace-nowrap px-4 py-2 font-medium text-gray-900 dark:text-slate-200">
               Size
             </th>
-            <th className="px-3 py-2 text-left text-[11px] font-semibold tracking-wide text-gray-500 dark:text-slate-400 uppercase">
-              Download Status
+            <th className="whitespace-nowrap px-4 py-2 font-medium text-gray-900 dark:text-slate-200">
+              Download Time
             </th>
-            <th className="px-3 py-2 text-left text-[11px] font-semibold tracking-wide text-gray-500 dark:text-slate-400 uppercase">
+            <th className="whitespace-nowrap px-4 py-2 font-medium text-gray-900 dark:text-slate-200">
               Bundle ID
             </th>
           </tr>
         </thead>
-        <tbody>
-          {map(props.data, (bundle, index) => (
-            <tr
-              key={bundle.id}
-              className={
-                Number(index) !== props.data.length - 1
-                  ? "border-b border-gray-200 dark:border-slate-700"
-                  : ""
-              }
-            >
-              <td className="px-3 py-2 align-top">
-                <h5 className="font-medium text-gray-800 dark:text-slate-200">
-                  {ellipsize(bundle.name, 58)}
-                </h5>
-                <p className="text-xs text-gray-500 dark:text-slate-400">
-                  {ellipsize(bundle.target, 88)}
-                </p>
+        <tbody className="divide-y divide-gray-200">
+          {map(props.data, (bundle) => (
+            <tr key={bundle.id} className="text-sm">
+              <td className="whitespace-nowrap px-2 py-2 text-gray-700 dark:text-slate-300">
+                <h5>{ellipsize(bundle.name, 58)}</h5>
+                <span className="text-xs">{ellipsize(bundle.target, 88)}</span>
               </td>
-              <td className="px-3 py-2 align-top">
+              <td className="whitespace-nowrap px-2 py-2 text-gray-700 dark:text-slate-300">
                 {prettyBytes(bundle.size)}
               </td>
-              <td className="px-3 py-2 align-top">
-                <DownloadProgressTick bundleId={bundle.id} />
+              <td className="whitespace-nowrap px-2 py-2 text-gray-700 dark:text-slate-300">
+                {dayjs
+                  .unix(bundle.time_finished)
+                  .format("h:mm on ddd, D MMM, YYYY")}
               </td>
-              <td className="px-3 py-2 align-top">
-                <span className="text-xs text-yellow-800 dark:text-yellow-300 font-medium">
-                  {bundle.id}
-                </span>
+              <td className="whitespace-nowrap px-2 py-2 text-gray-700 dark:text-slate-300">
+                <span className="tag is-warning">{bundle.id}</span>
               </td>
             </tr>
           ))}

src/client/components/ComicDetail/AsyncSelectPaginate/AsyncSelectPaginate.tsx

@@ -1,17 +1,11 @@
 import React, { ReactElement, useCallback, useState } from "react";
+import PropTypes from "prop-types";
 import { fetchMetronResource } from "../../../actions/metron.actions";
 import Creatable from "react-select/creatable";
 import { withAsyncPaginate } from "react-select-async-paginate";
 const CreatableAsyncPaginate = withAsyncPaginate(Creatable);
 
-interface AsyncSelectPaginateProps {
-  metronResource: string;
-  placeholder?: string;
-  value?: object;
-  onChange?(...args: unknown[]): unknown;
-}
-
-export const AsyncSelectPaginate = (props: AsyncSelectPaginateProps): ReactElement => {
+export const AsyncSelectPaginate = (props): ReactElement => {
   const [value, setValue] = useState(null);
   const [isAddingInProgress, setIsAddingInProgress] = useState(false);
 
@@ -44,4 +38,11 @@ export const AsyncSelectPaginate = (props: AsyncSelectPaginateProps): ReactEleme
   );
 };
 
+AsyncSelectPaginate.propTypes = {
+  metronResource: PropTypes.string.isRequired,
+  placeholder: PropTypes.string,
+  value: PropTypes.object,
+  onChange: PropTypes.func,
+};
+
 export default AsyncSelectPaginate;

src/client/components/ComicDetail/ComicDetail.tsx

@@ -18,6 +18,7 @@ import { VolumeInformation } from "./Tabs/VolumeInformation";
 
 import { isEmpty, isUndefined, isNil, filter } from "lodash";
 import { components } from "react-select";
+import { RootState } from "threetwo-ui-typings";
 
 import "react-sliding-pane/dist/react-sliding-pane.css";
 import "react-loader-spinner/dist/loader/css/react-spinner-loader.css";
@@ -33,34 +34,7 @@ import { styled } from "styled-components";
 import { COMICVINE_SERVICE_URI } from "../../constants/endpoints";
 import { refineQuery } from "filename-parser";
 
-interface ComicDetailProps {
-  data: {
-    _id: string;
-    rawFileDetails?: any;
-    inferredMetadata?: {
-      issue?: {
-        year?: string;
-        name?: string;
-        number?: number;
-        subtitle?: string;
-      };
-    };
-    sourcedMetadata: {
-      comicvine?: any;
-      locg?: any;
-      comicInfo?: any;
-    };
-    acquisition?: {
-      directconnect?: {
-        downloads?: any[];
-      };
-      torrent?: any[];
-    };
-    createdAt: string;
-    updatedAt: string;
-  };
-  userSettings?: any;
-}
+type ComicDetailProps = {};
 /**
  * Component for displaying the metadata for a comic in greater detail.
  *
@@ -94,7 +68,7 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => {
 
   // const dispatch = useDispatch();
 
-  const openModal = useCallback((filePath: string) => {
+  const openModal = useCallback((filePath) => {
     setIsOpen(true);
     // dispatch(
     //   extractComicArchive(filePath, {
@@ -111,7 +85,7 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => {
   const StyledSlidingPanel = styled(SlidingPane)`
     background: #ccc;
   `;
-  const afterOpenModal = useCallback((things: any) => {
+  const afterOpenModal = useCallback((things) => {
     // references are now sync'd and can be accessed.
     // subtitle.style.color = "#f00";
     console.log("kolaveri", things);
@@ -122,9 +96,9 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => {
   }, []);
 
   // sliding panel init
-  const contentForSlidingPanel: Record<string, { content: (props?: any) => JSX.Element }> = {
+  const contentForSlidingPanel = {
     CVMatches: {
-      content: (props?: any) => (
+      content: (props) => (
         <>
           <div>
             <ComicVineSearchForm data={rawFileDetails} />
@@ -132,7 +106,7 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => {
 
           <div className="border-slate-500 border rounded-lg p-2 mt-3">
             <p className="">Searching for:</p>
-            {inferredMetadata?.issue ? (
+            {inferredMetadata.issue ? (
               <>
                 <span className="">{inferredMetadata.issue.name} </span>
                 <span className=""> # {inferredMetadata.issue.number} </span>
@@ -157,9 +131,9 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => {
   // Actions
 
   const fetchComicVineMatches = async (
-    searchPayload: any,
-    issueSearchQuery: any,
-    seriesSearchQuery: any,
+    searchPayload,
+    issueSearchQuery,
+    seriesSearchQuery,
   ) => {
     try {
       const response = await axios({
@@ -179,7 +153,7 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => {
           },
           rawFileDetails: searchPayload,
         },
-        transformResponse: (r: string) => {
+        transformResponse: (r) => {
           const matches = JSON.parse(r);
           return matches;
           // return sortBy(matches, (match) => -match.score);
@@ -189,9 +163,9 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => {
       if (!isNil(response.data.results) && response.data.results.length === 1) {
         matches = response.data.results;
       } else {
-        matches = response.data.map((match: any) => match);
+        matches = response.data.map((match) => match);
       }
-      const scoredMatches = matches.sort((a: any, b: any) => b.score - a.score);
+      const scoredMatches = matches.sort((a, b) => b.score - a.score);
       setComicVineMatches(scoredMatches);
     } catch (err) {
       console.log(err);
@@ -200,13 +174,13 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => {
 
   // Action event handlers
   const openDrawerWithCVMatches = () => {
-    let seriesSearchQuery: any = {};
-    let issueSearchQuery: any = {};
+    let seriesSearchQuery: IComicVineSearchQuery = {} as IComicVineSearchQuery;
+    let issueSearchQuery: IComicVineSearchQuery = {} as IComicVineSearchQuery;
 
     if (!isUndefined(rawFileDetails)) {
-      issueSearchQuery = refineQuery((rawFileDetails as any).name);
+      issueSearchQuery = refineQuery(rawFileDetails.name);
     } else if (!isEmpty(comicvine)) {
-      issueSearchQuery = refineQuery((comicvine as any).name);
+      issueSearchQuery = refineQuery(comicvine.name);
     }
     fetchComicVineMatches(rawFileDetails, issueSearchQuery, seriesSearchQuery);
     setSlidingPanelContentId("CVMatches");
@@ -220,30 +194,30 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => {
 
   //  Actions menu options and handler
   const CVMatchLabel = (
-    <span className="inline-flex flex-row items-center gap-1.5">
-      <div className="w-4 h-4">
-        <i className="icon-[solar--magic-stick-3-bold-duotone] w-4 h-4"></i>
+    <span className="inline-flex flex-row items-center gap-2">
+      <div className="w-6 h-6">
+        <i className="icon-[solar--magic-stick-3-bold-duotone] w-6 h-6"></i>
       </div>
-      <div className="text-sm">Match on ComicVine</div>
+      <div>Match on ComicVine</div>
     </span>
   );
   const editLabel = (
-    <span className="inline-flex flex-row items-center gap-1.5">
-      <div className="w-4 h-4">
-        <i className="icon-[solar--pen-2-bold-duotone] w-4 h-4"></i>
+    <span className="inline-flex flex-row items-center gap-2">
+      <div className="w-6 h-6">
+        <i className="icon-[solar--pen-2-bold-duotone] w-6 h-6"></i>
       </div>
-      <div className="text-sm">Edit Metadata</div>
+      <div>Edit Metadata</div>
     </span>
   );
   const deleteLabel = (
-    <span className="inline-flex flex-row items-center gap-1.5">
-      <div className="w-4 h-4">
-        <i className="icon-[solar--trash-bin-trash-bold-duotone] w-4 h-4"></i>
+    <span className="inline-flex flex-row items-center gap-2">
+      <div className="w-6 h-6">
+        <i className="icon-[solar--trash-bin-trash-bold-duotone] w-6 h-6"></i>
       </div>
-      <div className="text-sm">Delete Comic</div>
+      <div>Delete Comic</div>
     </span>
   );
-  const Placeholder = (props: any) => {
+  const Placeholder = (props) => {
     return <components.Placeholder {...props} />;
   };
   const actionOptions = [
@@ -258,7 +232,7 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => {
     }
     return item;
   });
-  const handleActionSelection = (action: any) => {
+  const handleActionSelection = (action) => {
     switch (action.value) {
       case "match-on-comic-vine":
         openDrawerWithCVMatches();
@@ -272,23 +246,23 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => {
     }
   };
   const customStyles = {
-    menu: (base: any) => ({
+    menu: (base) => ({
       ...base,
       backgroundColor: "rgb(156, 163, 175)",
     }),
-    placeholder: (base: any) => ({
+    placeholder: (base) => ({
       ...base,
       color: "black",
     }),
-    option: (base: any, { data, isDisabled, isFocused, isSelected }: any) => ({
+    option: (base, { data, isDisabled, isFocused, isSelected }) => ({
       ...base,
       backgroundColor: isFocused ? "gray" : "rgb(156, 163, 175)",
     }),
-    singleValue: (base: any) => ({
+    singleValue: (base) => ({
       ...base,
       paddingTop: "0.4rem",
     }),
-    control: (base: any) => ({
+    control: (base) => ({
       ...base,
       backgroundColor: "rgb(156, 163, 175)",
       color: "black",
@@ -298,7 +272,7 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => {
 
   // check for the availability of CV metadata
   const isComicBookMetadataAvailable =
-    !isUndefined(comicvine) && !isUndefined((comicvine as any)?.volumeInformation);
+    !isUndefined(comicvine) && !isUndefined(comicvine.volumeInformation);
 
   // check for the availability of rawFileDetails
   const areRawFileDetailsAvailable =
@@ -363,7 +337,7 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => {
           query={airDCPPQuery}
           comicObjectId={_id}
           comicObject={data.data}
-          settings={userSettings}
+          userSettings={userSettings}
           key={4}
         />
       ),
@@ -385,8 +359,8 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => {
       name: "Downloads",
       icon: (
         <>
-          {(acquisition?.directconnect?.downloads?.length || 0) +
-            (acquisition?.torrent?.length || 0)}
+          {acquisition?.directconnect?.downloads?.length +
+            acquisition?.torrent.length}
         </>
       ),
       content:
@@ -423,12 +397,11 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => {
                   imageUrl={url}
                   orientation={"cover-only"}
                   hasDetails={false}
-                  cardContainerStyle={{ maxWidth: "290px", width: "100%" }}
                 />
 
                 {/* raw file details */}
                 {!isUndefined(rawFileDetails) &&
-                  !isEmpty((rawFileDetails as any)?.cover) && (
+                  !isEmpty(rawFileDetails.cover) && (
                     <div className="grid">
                       <RawFileDetails
                         data={{
@@ -478,7 +451,7 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => {
 
             <TabControls
               filteredTabs={filteredTabs}
-              downloadCount={acquisition?.directconnect?.downloads?.length || 0}
+              downloadCount={acquisition?.directconnect?.downloads?.length}
             />
 
             <StyledSlidingPanel

src/client/components/ComicDetail/ComicVineDetails.tsx

@@ -1,21 +1,12 @@
 import React, { ReactElement } from "react";
+import PropTypes from "prop-types";
 import { detectIssueTypes } from "../../shared/utils/tradepaperback.utils";
 import dayjs from "dayjs";
 import { isEmpty, isUndefined } from "lodash";
 import Card from "../shared/Carda";
 import { convert } from "html-to-text";
 
-interface ComicVineDetailsProps {
-  updatedAt?: string;
-  data?: {
-    name?: string;
-    number?: string;
-    resource_type?: string;
-    id?: number;
-  };
-}
-
-export const ComicVineDetails = (props: ComicVineDetailsProps): ReactElement => {
+export const ComicVineDetails = (props): ReactElement => {
   const { data, updatedAt } = props;
   return (
     <div className="text-slate-500 dark:text-gray-400">
@@ -116,3 +107,13 @@ export const ComicVineDetails = (props: ComicVineDetailsProps): ReactElement =>
 };
 
 export default ComicVineDetails;
+
+ComicVineDetails.propTypes = {
+  updatedAt: PropTypes.string,
+  data: PropTypes.shape({
+    name: PropTypes.string,
+    number: PropTypes.string,
+    resource_type: PropTypes.string,
+    id: PropTypes.number,
+  }),
+};

src/client/components/ComicDetail/DownloadProgressTick.tsx

@@ -1,129 +1,32 @@
 import prettyBytes from "pretty-bytes";
-import React, { ReactElement, useEffect, useRef, useState } from "react";
-import { useStore } from "../../store";
-import type { Socket } from "socket.io-client";
-
-/**
- * @typedef {Object} DownloadProgressTickProps
- * @property {string} bundleId    - The bundle ID to filter ticks by (as string)
- */
-interface DownloadProgressTickProps {
-  bundleId: string;
-}
-
-/**
- * Shape of the download tick data received over the socket.
- *
- * @typedef DownloadTickData
- * @property {number} id                 - Unique download ID
- * @property {string} name               - File name (e.g. "movie.mkv")
- * @property {number} downloaded_bytes   - Bytes downloaded so far
- * @property {number} size               - Total size in bytes
- * @property {number} speed              - Current download speed (bytes/sec)
- * @property {number} seconds_left       - Estimated seconds remaining
- * @property {{ id: string; str: string; completed: boolean; downloaded: boolean; failed: boolean; hook_error: any }} status
- *                                           - Status object (e.g. `{ id: "queued", str: "Running (15.1%)", ... }`)
- * @property {{ online: number; total: number; str: string }} sources
- *                                           - Peer count (e.g. `{ online: 1, total: 1, str: "1/1 online" }`)
- * @property {string} target             - Download destination (e.g. "/Downloads/movie.mkv")
- */
-interface DownloadTickData {
-  id: number;
-  name: string;
-  downloaded_bytes: number;
-  size: number;
-  speed: number;
-  seconds_left: number;
-  status: {
-    id: string;
-    str: string;
-    completed: boolean;
-    downloaded: boolean;
-    failed: boolean;
-    hook_error: any;
-  };
-  sources: {
-    online: number;
-    total: number;
-    str: string;
-  };
-  target: string;
-}
-
-export const DownloadProgressTick: React.FC<DownloadProgressTickProps> = ({
-  bundleId,
-}): ReactElement | null => {
-  const socketRef = useRef<Socket>();
-  const [tick, setTick] = useState<DownloadTickData | null>(null);
-  useEffect(() => {
-    const socket = useStore.getState().getSocket("manual");
-    socketRef.current = socket;
-
-    socket.emit("call", "socket.listenFileProgress", {
-      namespace: "/manual",
-      config: {
-        protocol: `ws`,
-        hostname: `192.168.1.119:5600`,
-        username: `admin`,
-        password: `password`,
-      },
-    });
-
-    /**
-     * Handler for each "downloadTick" event.
-     * Only update state if event.id matches bundleId.
-     *
-     * @param {DownloadTickData} data - Payload from the server
-     */
-    const onDownloadTick = (data: DownloadTickData) => {
-      // Compare numeric data.id to string bundleId
-      console.log(data.id);
-      console.log(`bundleId is ${bundleId}`)
-      if (data.id === parseInt(bundleId, 10)) {
-        setTick(data);
-      }
-    };
-
-    socket.on("downloadTick", onDownloadTick);
-    return () => {
-      socket.off("downloadTick", onDownloadTick);
-    };
-  }, [socketRef, bundleId]);
-
-  if (!tick) {
-    return <>Nothing detected.</>;
-  }
-
-  // Compute human-readable values and percentages
-  const downloaded = prettyBytes(tick.downloaded_bytes);
-  const total = prettyBytes(tick.size);
-  const percent = tick.size > 0
-    ? Math.round((tick.downloaded_bytes / tick.size) * 100)
-    : 0;
-  const speed = prettyBytes(tick.speed) + "/s";
-  const minutesLeft = Math.round(tick.seconds_left / 60);
+import React, { ReactElement } from "react";
 
+export const DownloadProgressTick = (props): ReactElement => {
   return (
-    <div className="mt-2 p-2 border rounded-md bg-white shadow-sm">
-      {/* Downloaded vs Total */}
-      <div className="mt-1 flex items-center space-x-2">
-        <span className="text-sm text-gray-700">{downloaded} of {total}</span>
+    <div>
+      <h4 className="is-size-5">{props.data.name}</h4>
+      <div>
+        <span className="is-size-4 has-text-weight-semibold">
+          {prettyBytes(props.data.downloaded_bytes)} of{" "}
+          {prettyBytes(props.data.size)}{" "}
+        </span>
+        <progress
+          className="progress is-small is-success"
+          value={props.data.downloaded_bytes}
+          max={props.data.size}
+        >
+          {(parseInt(props.data.downloaded_bytes) / parseInt(props.data.size)) *
+            100}
+          %
+        </progress>
+      </div>
+      <div className="is-size-6 mt-1 mb-2">
+        <p>{prettyBytes(props.data.speed)} per second.</p>
+        Time left:
+        {Math.round(parseInt(props.data.seconds_left) / 60)}
       </div>
 
-      {/* Progress bar */}
-      <div className="relative mt-2 h-2 bg-gray-200 rounded overflow-hidden">
-        <div
-          className="absolute inset-y-0 left-0 bg-green-500"
-          style={{ width: `${percent}%` }}
-        />
-      </div>
-      <div className="mt-1 text-xs text-gray-600">{percent}% complete</div>
-
-      {/* Speed and Time Left */}
-      <div className="mt-2 flex space-x-4 text-xs text-gray-600">
-        <span>Speed: {speed}</span>
-        <span>Time left: {minutesLeft} min</span>
-      </div>
+      <div>{props.data.target}</div>
     </div>
   );
 };

src/client/components/ComicDetail/DownloadsPanel.tsx

@@ -1,5 +1,6 @@
-import React, { useEffect, ReactElement, useState, useMemo } from "react";
-import { isEmpty, isNil, isUndefined, map } from "lodash";
+import React, { useEffect, useContext, ReactElement, useState } from "react";
+import { RootState } from "threetwo-ui-typings";
+import { isEmpty, map } from "lodash";
 import { AirDCPPBundles } from "./AirDCPPBundles";
 import { TorrentDownloads } from "./TorrentDownloads";
 import { useQuery } from "@tanstack/react-query";
@@ -13,142 +14,132 @@ import { useStore } from "../../store";
 import { useShallow } from "zustand/react/shallow";
 import { useParams } from "react-router-dom";
 
-export interface TorrentDetails {
-  infoHash: string;
-  progress: number;
-  downloadSpeed?: number;
-  uploadSpeed?: number;
+interface IDownloadsPanelProps {
+  key: number;
 }
 
-/**
- * DownloadsPanel displays two tabs of download information for a specific comic:
- * - DC++ (AirDCPP) bundles
- * - Torrent downloads
- * It also listens for real-time torrent updates via a WebSocket.
- *
- * @component
- * @returns {ReactElement | null} The rendered DownloadsPanel or null if no socket is available.
- */
-export const DownloadsPanel = (): ReactElement | null => {
+export const DownloadsPanel = (
+  props: IDownloadsPanelProps,
+): ReactElement | null => {
   const { comicObjectId } = useParams<{ comicObjectId: string }>();
+  const [bundles, setBundles] = useState([]);
   const [infoHashes, setInfoHashes] = useState<string[]>([]);
-  const [torrentDetails, setTorrentDetails] = useState<TorrentDetails[]>([]);
-  const [activeTab, setActiveTab] = useState<"directconnect" | "torrents">(
-    "directconnect",
+  const [torrentDetails, setTorrentDetails] = useState([]);
+  const [activeTab, setActiveTab] = useState("torrents");
+  const { airDCPPSocketInstance, socketIOInstance } = useStore(
+    useShallow((state: any) => ({
+      airDCPPSocketInstance: state.airDCPPSocketInstance,
+      socketIOInstance: state.socketIOInstance,
+    })),
   );
 
-  const { socketIOInstance } = useStore(
-    useShallow((state: any) => ({ socketIOInstance: state.socketIOInstance })),
-  );
-
-  /**
-   * Registers socket listeners on mount and cleans up on unmount.
-   */
-  useEffect(() => {
-    if (!socketIOInstance) return;
-
-    /**
-     * Handler for incoming torrent data events.
-     * Merges new entries or updates existing ones by infoHash.
-     *
-     * @param {TorrentDetails} data - Payload from the socket event.
-     */
-    const handleTorrentData = (data: TorrentDetails) => {
-      setTorrentDetails((prev) => {
-        const idx = prev.findIndex((t) => t.infoHash === data.infoHash);
-        if (idx === -1) {
-          return [...prev, data];
+  // React to torrent progress data sent over websockets
+  socketIOInstance.on("AS_TORRENT_DATA", (data) => {
+    const torrents = data.torrents
+      .flatMap(({ _id, details }) => {
+        if (_id === comicObjectId) {
+          return details;
         }
-        const next = [...prev];
-        next[idx] = { ...next[idx], ...data };
-        return next;
-      });
-    };
-
-    socketIOInstance.on("AS_TORRENT_DATA", handleTorrentData);
-
-    return () => {
-      socketIOInstance.off("AS_TORRENT_DATA", handleTorrentData);
-    };
-  }, [socketIOInstance]);
-
-  // ————— DC++ Bundles (via REST) —————
-  const { data: bundles } = useQuery({
-    queryKey: ["bundles", comicObjectId],
+      })
+      .filter((item) => item !== undefined);
+    setTorrentDetails(torrents);
+  });
+  // Fetch the downloaded files and currently-downloading file(s) from AirDC++
+  const { data: comicObject, isSuccess } = useQuery({
+    queryKey: ["bundles"],
     queryFn: async () =>
       await axios({
-        url: `${LIBRARY_SERVICE_BASE_URI}/getBundles`,
+        url: `${LIBRARY_SERVICE_BASE_URI}/getComicBookById`,
         method: "POST",
+        headers: {
+          "Content-Type": "application/json; charset=utf-8",
+        },
         data: {
-          comicObjectId,
-          config: {
-            protocol: `ws`,
-            hostname: `192.168.1.119:5600`,
-            username: `admin`,
-            password: `password`,
-          },
+          id: `${comicObjectId}`,
         },
       }),
   });
+  const getBundles = async (comicObject) => {
+    if (comicObject?.data.acquisition.directconnect) {
+      const filteredBundles =
+        comicObject.data.acquisition.directconnect.downloads.map(
+          async ({ bundleId }) => {
+            return await airDCPPSocketInstance.get(`queue/bundles/${bundleId}`);
+          },
+        );
+      return await Promise.all(filteredBundles);
+    }
+  };
 
-  // ————— Torrent Jobs (via REST) —————
-  const { data: rawJobs = [] } = useQuery<any[]>({
-    queryKey: ["torrents", comicObjectId],
-    queryFn: async () => {
-      const { data } = await axios.get(
-        `${TORRENT_JOB_SERVICE_BASE_URI}/getTorrentData`,
-        { params: { trigger: activeTab } },
-      );
-      return Array.isArray(data) ? data : [];
-    },
-    initialData: [],
-    enabled: activeTab === "torrents",
+  // Call the scheduled job for fetching torrent data
+  // triggered by the active tab been set to "torrents"
+  const { data: torrentData } = useQuery({
+    queryFn: () =>
+      axios({
+        url: `${TORRENT_JOB_SERVICE_BASE_URI}/getTorrentData`,
+        method: "GET",
+        params: {
+          trigger: activeTab,
+        },
+      }),
+    queryKey: [activeTab],
   });
 
-  // Only when rawJobs changes *and* activeTab === "torrents" should we update infoHashes:
   useEffect(() => {
-    if (activeTab !== "torrents") return;
-    setInfoHashes(rawJobs.map((j: any) => j.infoHash));
-  }, [activeTab]);
+    getBundles(comicObject).then((result) => {
+      setBundles(result);
+    });
+  }, [comicObject]);
 
   return (
-    <>
-      <div className="mt-5 mb-3">
-        <nav className="flex space-x-2">
-          <button
-            onClick={() => setActiveTab("directconnect")}
-            className={`px-4 py-1 rounded-full text-sm font-medium transition-colors ${
-              activeTab === "directconnect"
-                ? "bg-green-500 text-white"
-                : "bg-gray-200 text-gray-700 hover:bg-gray-300"
-            }`}
-          >
-            DC++
-          </button>
-          <button
-            onClick={() => setActiveTab("torrents")}
-            className={`px-4 py-1 rounded-full text-sm font-medium transition-colors ${
-              activeTab === "torrents"
-                ? "bg-blue-500 text-white"
-                : "bg-gray-200 text-gray-700 hover:bg-gray-300"
-            }`}
-          >
-            Torrents
-          </button>
-        </nav>
+    <div className="columns is-multiline">
+      <div>
+        <div className="sm:hidden">
+          <label htmlFor="Download Type" className="sr-only">
+            Download Type
+          </label>
 
-        <div className="mt-4">
-          {activeTab === "torrents" ? (
-            <TorrentDownloads data={torrentDetails} />
-          ) : !isNil(bundles?.data) && bundles.data.length > 0 ? (
-            <AirDCPPBundles data={bundles.data} />
-          ) : (
-            <p>No DC++ bundles found.</p>
-          )}
+          <select id="Tab" className="w-full rounded-md border-gray-200">
+            <option>DC++ Downloads</option>
+            <option>Torrents</option>
+          </select>
+        </div>
+
+        <div className="hidden sm:block">
+          <nav className="flex gap-6" aria-label="Tabs">
+            <a
+              href="#"
+              className={`shrink-0 rounded-lg p-2 text-sm font-medium hover:bg-gray-50 hover:text-gray-700 ${
+                activeTab === "directconnect"
+                  ? "bg-slate-200 dark:text-slate-200 dark:bg-slate-400 text-slate-800"
+                  : "dark:text-slate-400 text-slate-800"
+              }`}
+              aria-current="page"
+              onClick={() => setActiveTab("directconnect")}
+            >
+              DC++ Downloads
+            </a>
+
+            <a
+              href="#"
+              className={`shrink-0 rounded-lg p-2 text-sm font-medium hover:bg-gray-50 hover:text-gray-700 ${
+                activeTab === "torrents"
+                  ? "bg-slate-200 text-slate-800"
+                  : "dark:text-slate-400 text-slate-800"
+              }`}
+              onClick={() => setActiveTab("torrents")}
+            >
+              Torrents
+            </a>
+          </nav>
         </div>
       </div>
-    </>
+
+      {activeTab === "torrents" && <TorrentDownloads data={torrentDetails} />}
+      {!isEmpty(airDCPPSocketInstance) &&
+        !isEmpty(bundles) &&
+        activeTab === "directconnect" && <AirDCPPBundles data={bundles} />}
+    </div>
   );
 };
-
 export default DownloadsPanel;

src/client/components/ComicDetail/RawFileDetails.tsx

@@ -1,157 +1,127 @@
 import React, { ReactElement } from "react";
+import PropTypes from "prop-types";
 import prettyBytes from "pretty-bytes";
 import { isEmpty } from "lodash";
 import { format, parseISO } from "date-fns";
 
-interface RawFileDetailsProps {
-  data?: {
-    rawFileDetails?: {
-      containedIn?: string;
-      name?: string;
-      fileSize?: number;
-      path?: string;
-      extension?: string;
-      mimeType?: string;
-      cover?: {
-        filePath?: string;
-      };
-    };
-    inferredMetadata?: {
-      issue?: {
-        year?: string;
-        name?: string;
-        number?: number;
-        subtitle?: string;
-      };
-    };
-    created_at?: string;
-    updated_at?: string;
-  };
-  children?: any;
-}
-
-export const RawFileDetails = (props: RawFileDetailsProps): ReactElement | null => {
+export const RawFileDetails = (props): ReactElement => {
   const { rawFileDetails, inferredMetadata, created_at, updated_at } =
-    props.data || {};
-  if (!rawFileDetails) return null;
-
+    props.data;
   return (
     <>
       <div className="max-w-2xl ml-5">
-        {/* Title */}
-        <div className="px-4 sm:px-6 mb-6">
+        <div className="px-4 sm:px-6">
           <p className="text-gray-500 dark:text-gray-400">
-            <span className="text-xl font-semibold">{rawFileDetails?.name}</span>
+            <span className="text-xl">{rawFileDetails.name}</span>
           </p>
         </div>
-
-        {/* File Binary Details Section */}
-        <div className="mb-8 px-4 pb-8 border-b border-gray-200 dark:border-gray-700">
-          <div className="mb-4">
-            <h3 className="text-sm font-medium text-gray-600 dark:text-gray-300 uppercase tracking-wide flex items-center gap-1">
-              <i className="icon-[solar--document-bold-duotone] w-5 h-5"></i>
-              File Binary Details
-            </h3>
-          </div>
-          <div className="pl-6">
-            <dl className="space-y-4">
-              <div>
-                <dt className="text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wide mb-1">
-                  File Path
-                </dt>
-                <dd className="text-sm text-gray-900 dark:text-gray-300 font-mono break-all">
-                  {rawFileDetails?.containedIn}/{rawFileDetails?.name}{rawFileDetails?.extension}
-                </dd>
-              </div>
-              
-              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
-                <div>
-                  <dt className="text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wide mb-1">
-                    MIME Type
-                  </dt>
-                  <dd className="text-sm text-gray-700 dark:text-gray-300 flex items-center gap-1">
-                    <i className="icon-[solar--zip-file-bold-duotone] w-5 h-5"></i>
-                    {rawFileDetails?.mimeType}
-                  </dd>
-                </div>
-                
-                <div>
-                  <dt className="text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wide mb-1">
-                    File Size
-                  </dt>
-                  <dd className="text-sm text-gray-700 dark:text-gray-300 flex items-center gap-1">
-                    <i className="icon-[solar--mirror-right-bold-duotone] w-5 h-5"></i>
-                    {rawFileDetails?.fileSize ? prettyBytes(rawFileDetails.fileSize) : 'N/A'}
-                  </dd>
-                </div>
-              </div>
-            </dl>
-          </div>
-        </div>
-
-        {/* Import Details Section */}
-        <div className="mb-8 px-4">
-          <div className="mb-4">
-            <h3 className="text-sm font-medium text-gray-600 dark:text-gray-300 uppercase tracking-wide flex items-center gap-1">
-              <i className="icon-[solar--import-bold-duotone] w-5 h-5"></i>
-              Import Details
-            </h3>
-          </div>
-          <div className="pl-6">
-            <dl className="space-y-4">
-              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
-                <div>
-                  <dt className="text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wide mb-1">
-                    Imported On
-                  </dt>
-                  <dd className="text-sm text-gray-700 dark:text-gray-300">
-                    {created_at ? format(parseISO(created_at), "dd MMMM, yyyy 'at' h:mm aaaa") : 'N/A'}
-                  </dd>
-                </div>
-                
-                <div>
-                  <dt className="text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wide mb-1">
-                    Last Updated
-                  </dt>
-                  <dd className="text-sm text-gray-700 dark:text-gray-300">
-                    {updated_at ? format(parseISO(updated_at), "dd MMMM, yyyy 'at' h:mm aaaa") : 'N/A'}
-                  </dd>
-                </div>
-              </div>
-
-              {inferredMetadata?.issue && (
-                <div>
-                  <dt className="text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wide mb-1">
-                    Inferred Metadata
-                  </dt>
-                  <dd className="text-sm text-gray-700 dark:text-gray-300">
-                    <span className="font-medium">{inferredMetadata.issue.name}</span>
-                    {!isEmpty(inferredMetadata.issue.number) && (
-                      <span className="ml-2 text-xs text-gray-500 dark:text-gray-400">
-                        #{inferredMetadata.issue.number}
-                      </span>
-                    )}
-                  </dd>
-                </div>
-              )}
-            </dl>
-          </div>
-        </div>
-
-        {/* Actions Section */}
-        {props.children && (
-          <div className="px-4">
-            <div className="mb-3">
-              <h4 className="text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wide">
-                Actions
-              </h4>
+        <div className="px-4 py-5 sm:px-6">
+          <dl className="grid grid-cols-1 gap-x-4 gap-y-4 sm:grid-cols-2">
+            <div className="sm:col-span-1">
+              <dt className="text-sm font-medium text-gray-500 dark:text-gray-400">
+                Raw File Details
+              </dt>
+              <dd className="mt-1 text-sm text-gray-900 dark:text-gray-400">
+                {rawFileDetails.containedIn +
+                  "/" +
+                  rawFileDetails.name +
+                  rawFileDetails.extension}
+              </dd>
             </div>
-            <div>{props.children}</div>
-          </div>
-        )}
+            <div className="sm:col-span-1">
+              <dt className="text-sm font-medium text-gray-500 dark:text-gray-400">
+                Inferred Issue Metadata
+              </dt>
+              <dd className="mt-1 text-sm text-gray-900 dark:text-gray-400">
+                Series Name: {inferredMetadata.issue.name}
+                {!isEmpty(inferredMetadata.issue.number) ? (
+                  <span className="tag is-primary is-light">
+                    {inferredMetadata.issue.number}
+                  </span>
+                ) : null}
+              </dd>
+            </div>
+            <div className="sm:col-span-1">
+              <dt className="text-sm font-medium text-gray-500 dark:text-gray-400">
+                MIMEType
+              </dt>
+              <dd className="mt-1 text-sm text-gray-500 dark:text-slate-900">
+                {/* File extension */}
+                <span className="inline-flex items-center bg-slate-50 text-slate-800 text-xs font-medium px-2 rounded-md dark:text-slate-900 dark:bg-slate-400">
+                  <span className="pt-1">
+                    <i className="icon-[solar--zip-file-bold-duotone] w-5 h-5"></i>
+                  </span>
+
+                  <span className="text-md text-slate-500 dark:text-slate-900">
+                    {rawFileDetails.mimeType}
+                  </span>
+                </span>
+              </dd>
+            </div>
+            <div className="sm:col-span-1">
+              <dt className="text-sm font-medium text-gray-500 dark:text-gray-400">
+                File Size
+              </dt>
+              <dd className="mt-1 text-sm text-gray-500 dark:text-slate-900">
+                {/* size */}
+                <span className="inline-flex items-center bg-slate-50 text-slate-800 text-xs font-medium px-2 rounded-md dark:text-slate-900 dark:bg-slate-400">
+                  <span className="pr-1 pt-1">
+                    <i className="icon-[solar--mirror-right-bold-duotone] w-5 h-5"></i>
+                  </span>
+
+                  <span className="text-md text-slate-500 dark:text-slate-900">
+                    {prettyBytes(rawFileDetails.fileSize)}
+                  </span>
+                </span>
+              </dd>
+            </div>
+            <div className="sm:col-span-2">
+              <dt className="text-sm font-medium text-gray-500 dark:text-gray-400">
+                Import Details
+              </dt>
+              <dd className="mt-1 text-sm text-gray-900 dark:text-gray-400">
+                {format(parseISO(created_at), "dd MMMM, yyyy")},{" "}
+                {format(parseISO(created_at), "h aaaa")}
+              </dd>
+            </div>
+            <div className="sm:col-span-2">
+              <dt className="text-sm font-medium text-gray-500 dark:text-gray-400">
+                Actions
+              </dt>
+              <dd className="mt-1 text-sm text-gray-900">{props.children}</dd>
+            </div>
+          </dl>
+        </div>
       </div>
     </>
   );
 };
 
 export default RawFileDetails;
+
+RawFileDetails.propTypes = {
+  data: PropTypes.shape({
+    rawFileDetails: PropTypes.shape({
+      containedIn: PropTypes.string,
+      name: PropTypes.string,
+      fileSize: PropTypes.number,
+      path: PropTypes.string,
+      extension: PropTypes.string,
+      mimeType: PropTypes.string,
+      cover: PropTypes.shape({
+        filePath: PropTypes.string,
+      }),
+    }),
+    inferredMetadata: PropTypes.shape({
+      issue: PropTypes.shape({
+        year: PropTypes.string,
+        name: PropTypes.string,
+        number: PropTypes.number,
+        subtitle: PropTypes.string,
+      }),
+    }),
+    created_at: PropTypes.string,
+    updated_at: PropTypes.string,
+  }),
+  children: PropTypes.any,
+};

src/client/components/ComicDetail/Tabs/ArchiveOperations.tsx

@@ -14,16 +14,12 @@ import { useStore } from "../../../store";
 import { useShallow } from "zustand/react/shallow";
 import { escapePoundSymbol } from "../../../shared/utils/formatting.utils";
 
-interface ArchiveOperationsProps {
-  data: any;
-}
-
-export const ArchiveOperations = (props: ArchiveOperationsProps): ReactElement => {
+export const ArchiveOperations = (props): ReactElement => {
   const { data } = props;
 
-  const { getSocket } = useStore(
+  const { socketIOInstance } = useStore(
     useShallow((state) => ({
-      getSocket: state.getSocket,
+      socketIOInstance: state.socketIOInstance,
     })),
   );
   const queryClient = useQueryClient();
@@ -31,32 +27,21 @@ export const ArchiveOperations = (props: ArchiveOperationsProps): ReactElement =
   const [visible, setVisible] = useState(false);
   const [slidingPanelContentId, setSlidingPanelContentId] = useState("");
   // current image
-  const [currentImage, setCurrentImage] = useState<string>("");
-  const [uncompressedArchive, setUncompressedArchive] = useState<string[]>([]);
-  const [imageAnalysisResult, setImageAnalysisResult] = useState<any>({});
+  const [currentImage, setCurrentImage] = useState([]);
+  const [uncompressedArchive, setUncompressedArchive] = useState([]);
+  const [imageAnalysisResult, setImageAnalysisResult] = useState({});
   const [shouldRefetchComicBookData, setShouldRefetchComicBookData] =
     useState(false);
-  const constructImagePaths = (data: string[]): Array<string> => {
+  const constructImagePaths = (data): Array<string> => {
     return data?.map((path: string) =>
       escapePoundSymbol(encodeURI(`${LIBRARY_SERVICE_HOST}/${path}`)),
     );
   };
 
   // Listen to the uncompression complete event and orchestrate the final payload
-  useEffect(() => {
-    const socket = getSocket("/");
-    
-    const handleUncompressionComplete = (data: any) => {
-      setUncompressedArchive(constructImagePaths(data?.uncompressedArchive));
-    };
-
-    socket.on("LS_UNCOMPRESSION_JOB_COMPLETE", handleUncompressionComplete);
-
-    // Cleanup listener on unmount
-    return () => {
-      socket.off("LS_UNCOMPRESSION_JOB_COMPLETE", handleUncompressionComplete);
-    };
-  }, [getSocket]);
+  socketIOInstance.on("LS_UNCOMPRESSION_JOB_COMPLETE", (data) => {
+    setUncompressedArchive(constructImagePaths(data?.uncompressedArchive));
+  });
 
   useEffect(() => {
     let isMounted = true;
@@ -73,7 +58,7 @@ export const ArchiveOperations = (props: ArchiveOperationsProps): ReactElement =
             },
             transformResponse: async (responseData) => {
               const parsedData = JSON.parse(responseData);
-              const paths = parsedData.map((pathObject: any) => {
+              const paths = parsedData.map((pathObject) => {
                 return `${pathObject.containedIn}/${pathObject.name}${pathObject.extension}`;
               });
               const uncompressedArchive = constructImagePaths(paths);
@@ -146,7 +131,7 @@ export const ArchiveOperations = (props: ArchiveOperationsProps): ReactElement =
   }
 
   // sliding panel init
-  const contentForSlidingPanel: Record<string, { content: () => JSX.Element }> = {
+  const contentForSlidingPanel = {
     imageAnalysis: {
       content: () => {
         return (
@@ -158,7 +143,7 @@ export const ArchiveOperations = (props: ArchiveOperationsProps): ReactElement =
               </pre>
             ) : null}
             <pre className="font-hasklig mt-3 text-sm">
-              {JSON.stringify(imageAnalysisResult?.analyzedData, null, 2)}
+              {JSON.stringify(imageAnalysisResult.analyzedData, null, 2)}
             </pre>
           </div>
         );
@@ -167,7 +152,7 @@ export const ArchiveOperations = (props: ArchiveOperationsProps): ReactElement =
   };
 
   // sliding panel handlers
-  const openImageAnalysisPanel = useCallback((imageFilePath: string) => {
+  const openImageAnalysisPanel = useCallback((imageFilePath) => {
     setSlidingPanelContentId("imageAnalysis");
     analyzeImage(imageFilePath);
     setCurrentImage(imageFilePath);

src/client/components/ComicDetail/TorrentSearchPanel.tsx

@@ -25,7 +25,7 @@ export const TorrentSearchPanel = (props) => {
         data: {
           prowlarrQuery: {
             port: "9696",
-            apiKey: "38c2656e8f5d4790962037b8c4416a8f",
+            apiKey: "c4f42e265fb044dc81f7e88bd41c3367",
             offset: 0,
             categories: [7030],
             query: searchTerm.issueName,

src/client/components/Dashboard/PullList.tsx

@@ -1,4 +1,4 @@
-import React, { ReactElement, useState, useEffect } from "react";
+import React, { ReactElement, useState } from "react";
 import { map } from "lodash";
 import Card from "../shared/Carda";
 import Header from "../shared/Header";
@@ -31,38 +31,27 @@ export const PullList = (): ReactElement => {
   // datepicker
   const date = new Date();
   const [inputValue, setInputValue] = useState<string>(
-    format(date, "yyyy/M/dd"),
+    format(date, "M-dd-yyyy"),
   );
 
-  // Responsive slides per view
-  const [slidesPerView, setSlidesPerView] = useState(1);
-
-
-
   // keen slider
-  const [sliderRef, instanceRef] = useKeenSlider({
-    loop: true,
-    mode: "free-snap",
-    slides: {
-      perView: slidesPerView,
-      spacing: 15,
+  const [sliderRef, instanceRef] = useKeenSlider(
+    {
+      loop: true,
+      slides: {
+        origin: "auto",
+        number: 15,
+        perView: 5,
+        spacing: 15,
+      },
+      slideChanged() {
+        console.log("slide changed");
+      },
     },
-    slideChanged() {
-      console.log("slide changed");
-    },
-  });
-
-  // Update slider when slidesPerView changes
-  useEffect(() => {
-    if (instanceRef.current) {
-      instanceRef.current.update({
-        slides: {
-          perView: slidesPerView,
-          spacing: 15,
-        },
-      });
-    }
-  }, [slidesPerView, instanceRef]);
+    [
+      // add plugins here
+    ],
+  );
 
   const {
     data: pullList,
@@ -91,81 +80,79 @@ export const PullList = (): ReactElement => {
   return (
     <>
       <div className="content">
-        <div className="mx-auto">
-          <Header
-            headerContent="Discover"
-            subHeaderContent={
-              <span className="text-md">
-                Pull List aggregated for the week from{" "}
-                <span className="underline">
-                  <a href="https://leagueofcomicgeeks.com">
-                    League Of Comic Geeks
-                  </a>
-                  <i className="icon-[solar--arrow-right-up-outline] w-4 h-4" />
-                </span>
+        <Header
+          headerContent="Discover"
+          subHeaderContent={
+            <span className="text-md">
+              Pull List aggregated for the week from{" "}
+              <span className="underline">
+                <a href="https://leagueofcomicgeeks.com/comics/new-comics">
+                  League Of Comic Geeks
+                </a>
+                <i className="icon-[solar--arrow-right-up-outline] w-4 h-4" />
               </span>
-            }
-            iconClassNames="fa-solid fa-binoculars mr-2"
-            link="/pull-list/all/"
-          />
-          <div className="flex flex-row gap-5 mb-3">
-            {/* select week */}
-            <div className="flex flex-row gap-4 my-3">
-              <Form
-                onSubmit={() => {}}
-                render={({ handleSubmit }) => (
-                  <form>
-                    <div className="flex flex-col gap-2">
-                      {/* week selection for pull list */}
-                      <DatePickerDialog
-                        inputValue={inputValue}
-                        setter={setInputValue}
-                      />
-                      {inputValue && (
-                        <div className="text-sm">
-                          Showing pull list for{" "}
-                          <span className="inline-flex mb-2 items-center bg-slate-50 text-slate-800 text-xs font-medium px-2.5 py-1 rounded-md dark:text-slate-900 dark:bg-slate-400">
-                            {inputValue}
-                          </span>
-                        </div>
-                      )}
-                    </div>
-                  </form>
-                )}
-              />
-            </div>
+            </span>
+          }
+          iconClassNames="fa-solid fa-binoculars mr-2"
+          link="/pull-list/all/"
+        />
+        <div className="flex flex-row gap-5 mb-3">
+          {/* select week */}
+          <div className="flex flex-row gap-4 my-3">
+            <Form
+              onSubmit={() => {}}
+              render={({ handleSubmit }) => (
+                <form>
+                  <div className="flex flex-col gap-2">
+                    {/* week selection for pull list */}
+                    <DatePickerDialog
+                      inputValue={inputValue}
+                      setter={setInputValue}
+                    />
+                    {inputValue && (
+                      <div className="text-sm">
+                        Showing pull list for{" "}
+                        <span className="inline-flex mb-2 items-center bg-slate-50 text-slate-800 text-xs font-medium px-2.5 py-1 rounded-md dark:text-slate-900 dark:bg-slate-400">
+                          {inputValue}
+                        </span>
+                      </div>
+                    )}
+                  </div>
+                </form>
+              )}
+            />
           </div>
         </div>
       </div>
 
       {isSuccess && !isLoading && (
-        <div ref={sliderRef} className="keen-slider">
+        <div ref={sliderRef} className="keen-slider flex flex-row">
           {map(pullList?.data.result, (issue, idx) => {
-          return (
-            <div key={idx} className="keen-slider__slide">
-              <Card
-                orientation={"vertical-2"}
-                imageUrl={issue.coverImageUrl}
-                hasDetails
-                title={ellipsize(issue.issueName, 25)}
-              >
-                <div className="px-1">
-                  <span className="inline-flex mb-2 items-center bg-slate-50 text-slate-800 text-xs font-medium px-2.5 py-1 rounded-md dark:text-slate-900 dark:bg-slate-400">
-                    {issue.publicationDate}
-                  </span>
-                  <div className="flex flex-row justify-end">
-                    <button
-                      className="flex space-x-1 mb-2 sm:mt-0 sm:flex-row sm:items-center rounded-lg border border-green-400 dark:border-green-200 bg-green-200 px-2 py-1 text-gray-500 hover:bg-transparent hover:text-green-600 focus:outline-none focus:ring active:text-indigo-500"
-                      onClick={() => addToLibrary("locg", issue)}
-                    >
-                      <i className="icon-[solar--add-square-bold-duotone] w-5 h-5 mr-2"></i>{" "}
-                      Want
-                    </button>
+            return (
+              <div key={idx} className="keen-slider__slide">
+                <Card
+                  orientation={"vertical-2"}
+                  imageUrl={issue.cover}
+                  hasDetails
+                  title={ellipsize(issue.name, 25)}
+                >
+                  <div className="px-1">
+                    <span className="inline-flex mb-2 items-center bg-slate-50 text-slate-800 text-xs font-medium px-2.5 py-1 rounded-md dark:text-slate-900 dark:bg-slate-400">
+                      {issue.publisher}
+                    </span>
+                    <div className="flex flex-row justify-end">
+                      <button
+                        className="flex space-x-1 mb-2 sm:mt-0 sm:flex-row sm:items-center rounded-lg border border-green-400 dark:border-green-200 bg-green-200 px-2 py-1 text-gray-500 hover:bg-transparent hover:text-green-600 focus:outline-none focus:ring active:text-indigo-500"
+                        onClick={() => addToLibrary("locg", issue)}
+                      >
+                        <i className="icon-[solar--add-square-bold-duotone] w-5 h-5 mr-2"></i>{" "}
+                        Want
+                      </button>
+                    </div>
                   </div>
-                </div>
-              </Card>
-            </div>
-          );
+                </Card>
+              </div>
+            );
           })}
         </div>
       )}

src/client/components/Dashboard/RecentlyImported.tsx

@@ -21,13 +21,12 @@ export const RecentlyImported = (
   console.log(comics);
   return (
     <div>
-      <div className="mx-auto" style={{ maxWidth: '1400px' }}>
-        <Header
-          headerContent="Recently Imported"
-          subHeaderContent="Recent Library activity such as imports, tagging, etc."
-          iconClassNames="fa-solid fa-binoculars mr-2"
-        />
-        <div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 xl:grid-cols-5 gap-6 mt-3">
+      <Header
+        headerContent="Recently Imported"
+        subHeaderContent="Recent Library activity such as imports, tagging, etc."
+        iconClassNames="fa-solid fa-binoculars mr-2"
+      />
+      <div className="grid grid-cols-5 gap-6 mt-3">
         {comics?.comics.map(
           (
             {
@@ -126,7 +125,6 @@ export const RecentlyImported = (
             );
           },
         )}
-        </div>
       </div>
     </div>
   );

src/client/components/Dashboard/WantedComicsList.tsx

@@ -6,7 +6,6 @@ import { isEmpty, isNil, isUndefined, map } from "lodash";
 import { detectIssueTypes } from "../../shared/utils/tradepaperback.utils";
 import { determineCoverFile } from "../../shared/utils/metadata.utils";
 import Header from "../shared/Header";
-import useEmblaCarousel from "embla-carousel-react";
 
 type WantedComicsListProps = {
   comics: any;
@@ -17,126 +16,107 @@ export const WantedComicsList = ({
 }: WantedComicsListProps): ReactElement => {
   const navigate = useNavigate();
 
-  // embla carousel
-  const [emblaRef, emblaApi] = useEmblaCarousel({
-    loop: false,
-    align: "start",
-    containScroll: "trimSnaps",
-    slidesToScroll: 1,
-  });
-
   return (
-    <div>
+    <>
       <Header
         headerContent="Wanted Comics"
         subHeaderContent="Comics marked as wanted from various sources"
         iconClassNames="fa-solid fa-binoculars mr-2"
         link={"/wanted"}
       />
-      <div className="overflow-hidden -mr-4 sm:-mr-8 lg:-mr-16 xl:-mr-20 2xl:-mr-24 mt-3">
-        <div className="overflow-hidden" ref={emblaRef}>
-          <div className="flex">
-            {map(
-              comics,
-              (
-                {
-                  _id,
-                  rawFileDetails,
-                  sourcedMetadata: { comicvine, comicInfo, locg },
-                  wanted,
-                },
-                idx,
-              ) => {
-                const isComicBookMetadataAvailable = !isUndefined(comicvine);
-                const consolidatedComicMetadata = {
-                  rawFileDetails,
-                  comicvine,
-                  comicInfo,
-                  locg,
-                };
+      <div className="grid grid-cols-5 gap-6 mt-3">
+        {map(
+          comics,
+          ({
+            _id,
+            rawFileDetails,
+            sourcedMetadata: { comicvine, comicInfo, locg },
+            wanted,
+          }) => {
+            const isComicBookMetadataAvailable = !isUndefined(comicvine);
+            const consolidatedComicMetadata = {
+              rawFileDetails,
+              comicvine,
+              comicInfo,
+              locg,
+            };
 
-                const {
-                  issueName,
-                  url,
-                  publisher = null,
-                } = determineCoverFile(consolidatedComicMetadata);
-                const titleElement = (
-                  <Link to={"/comic/details/" + _id}>
-                    {ellipsize(issueName, 20)}
-                    <p>{publisher}</p>
-                  </Link>
-                );
-                return (
-                  <div
-                    key={idx}
-                    className="flex-[0_0_200px] min-w-0 sm:flex-[0_0_220px] md:flex-[0_0_240px] lg:flex-[0_0_260px] xl:flex-[0_0_280px] pr-[15px]"
-                  >
-                    <Card
-                      orientation={"vertical-2"}
-                      imageUrl={url}
-                      hasDetails
-                      title={issueName ? titleElement : <span>No Name</span>}
-                    >
-                      <div className="pb-1">
-                        <div className="flex flex-row gap-2">
-                          {/* Issue type */}
-                          {isComicBookMetadataAvailable &&
-                          !isNil(detectIssueTypes(comicvine.description)) ? (
-                            <div className="my-2">
-                              <span className="inline-flex items-center bg-slate-50 text-slate-800 text-xs font-medium px-2.5 py-0.5 rounded-md dark:text-slate-900 dark:bg-slate-400">
-                                <span className="pr-1 pt-1">
-                                  <i className="icon-[solar--book-2-line-duotone] w-5 h-5"></i>
-                                </span>
+            const {
+              issueName,
+              url,
+              publisher = null,
+            } = determineCoverFile(consolidatedComicMetadata);
+            const titleElement = (
+              <Link to={"/comic/details/" + _id}>
+                {ellipsize(issueName, 20)}
+                <p>{publisher}</p>
+              </Link>
+            );
+            return (
+              <Card
+                key={_id}
+                orientation={"vertical-2"}
+                imageUrl={url}
+                hasDetails
+                title={issueName ? titleElement : <span>No Name</span>}
+              >
+                <div className="pb-1">
+                  <div className="flex flex-row gap-2">
+                    {/* Issue type */}
+                    {isComicBookMetadataAvailable &&
+                    !isNil(detectIssueTypes(comicvine.description)) ? (
+                      <div className="my-2">
+                        <span className="inline-flex items-center bg-slate-50 text-slate-800 text-xs font-medium px-2.5 py-0.5 rounded-md dark:text-slate-900 dark:bg-slate-400">
+                          <span className="pr-1 pt-1">
+                            <i className="icon-[solar--book-2-line-duotone] w-5 h-5"></i>
+                          </span>
 
-                                <span className="text-md text-slate-500 dark:text-slate-900">
-                                  {
-                                    detectIssueTypes(comicvine.description)
-                                      .displayName
-                                  }
-                                </span>
-                              </span>
-                            </div>
-                          ) : null}
-                          {/* issues marked as wanted, part of this volume */}
-                          {wanted?.markEntireVolumeWanted ? (
-                            <div className="text-sm">sagla volume pahije</div>
-                          ) : (
-                            <div className="my-2">
-                              <span className="inline-flex items-center bg-slate-50 text-slate-800 text-xs font-medium px-2.5 py-0.5 rounded-md dark:text-slate-900 dark:bg-slate-400">
-                                <span className="pr-1 pt-1">
-                                  <i className="icon-[solar--documents-bold-duotone] w-5 h-5"></i>
-                                </span>
-
-                                <span className="text-md text-slate-500 dark:text-slate-900">
-                                  {wanted.issues.length}
-                                </span>
-                              </span>
-                            </div>
-                          )}
-                        </div>
-                        {/* comicVine metadata presence */}
-                        {isComicBookMetadataAvailable && (
-                          <img
-                            src="/src/client/assets/img/cvlogo.svg"
-                            alt={"ComicVine metadata detected."}
-                            className="inline-block w-6 h-6 md:w-7 md:h-7 flex-shrink-0 object-contain"
-                          />
-                        )}
-                        {!isEmpty(locg) && (
-                          <img
-                            src="/src/client/assets/img/locglogo.svg"
-                            className="w-7 h-7"
-                          />
-                        )}
+                          <span className="text-md text-slate-500 dark:text-slate-900">
+                            {
+                              detectIssueTypes(comicvine.description)
+                                .displayName
+                            }
+                          </span>
+                        </span>
                       </div>
-                    </Card>
+                    ) : null}
+                    {/* issues marked as wanted, part of this volume */}
+                    {wanted?.markEntireVolumeWanted ? (
+                      <div className="text-sm">sagla volume pahije</div>
+                    ) : (
+                      <div className="my-2">
+                        <span className="inline-flex items-center bg-slate-50 text-slate-800 text-xs font-medium px-2.5 py-0.5 rounded-md dark:text-slate-900 dark:bg-slate-400">
+                          <span className="pr-1 pt-1">
+                            <i className="icon-[solar--documents-bold-duotone] w-5 h-5"></i>
+                          </span>
+
+                          <span className="text-md text-slate-500 dark:text-slate-900">
+                            {wanted.issues.length}
+                          </span>
+                        </span>
+                      </div>
+                    )}
                   </div>
-                );
-              },
-            )}
-          </div>
-        </div>
+                  {/* comicVine metadata presence */}
+                  {isComicBookMetadataAvailable && (
+                    <img
+                      src="/src/client/assets/img/cvlogo.svg"
+                      alt={"ComicVine metadata detected."}
+                      className="w-7 h-7"
+                    />
+                  )}
+                  {!isEmpty(locg) && (
+                    <img
+                      src="/src/client/assets/img/locglogo.svg"
+                      className="w-7 h-7"
+                    />
+                  )}
+                </div>
+              </Card>
+            );
+          },
+        )}
       </div>
-    </div>
+    </>
   );
 };

src/client/components/Import/Import.tsx

@@ -1,4 +1,4 @@
-import React, { ReactElement, useCallback, useEffect, useRef } from "react";
+import React, { ReactElement, useCallback, useEffect } from "react";
 import "react-loader-spinner/dist/loader/css/react-spinner-loader.css";
 import { format } from "date-fns";
 import Loader from "react-loader-spinner";
@@ -27,21 +27,12 @@ interface IProps {
 
 export const Import = (props: IProps): ReactElement => {
   const queryClient = useQueryClient();
-  const { importJobQueue, getSocket, setQueryClientRef } = useStore(
+  const { importJobQueue, socketIOInstance } = useStore(
     useShallow((state) => ({
       importJobQueue: state.importJobQueue,
-      getSocket: state.getSocket,
-      setQueryClientRef: state.setQueryClientRef,
+      socketIOInstance: state.socketIOInstance,
     })),
   );
-  
-  const previousResultCountRef = useRef<number>(0);
-  const pollingIntervalRef = useRef<NodeJS.Timeout | null>(null);
-
-  // Set the queryClient reference in the store so socket events can use it
-  useEffect(() => {
-    setQueryClientRef({ current: queryClient });
-  }, [queryClient, setQueryClientRef]);
 
   const sessionId = localStorage.getItem("sessionId");
   const { mutate: initiateImport } = useMutation({
@@ -53,91 +44,24 @@ export const Import = (props: IProps): ReactElement => {
       }),
   });
 
-  const { data, isError, isLoading, refetch } = useQuery({
+  const { data, isError, isLoading } = useQuery({
     queryKey: ["allImportJobResults"],
-    queryFn: async () => {
-      const response = await axios({
+    queryFn: async () =>
+      await axios({
         method: "GET",
         url: "http://localhost:3000/api/jobqueue/getJobResultStatistics",
-        params: {
-          _t: Date.now(), // Cache buster
-        },
-        headers: {
-          'Cache-Control': 'no-cache',
-          'Pragma': 'no-cache',
-        },
-      });
-      
-      // Track the result count
-      if (response.data?.length) {
-        previousResultCountRef.current = response.data.length;
-      }
-      
-      return response;
-    },
-    refetchOnMount: true,
-    refetchOnWindowFocus: false,
-    staleTime: 0, // Always consider data stale
-    gcTime: 0, // Don't cache the data (replaces cacheTime in newer versions)
-    // Poll every 5 seconds when import is running
-    refetchInterval: importJobQueue.status === "running" || importJobQueue.status === "paused" ? 5000 : false,
+      }),
   });
 
-  // Listen for import queue drained event to refresh the table
-  useEffect(() => {
-    const socket = getSocket("/");
-    
-    const handleQueueDrained = () => {
-      const initialCount = previousResultCountRef.current;
-      let attempts = 0;
-      const maxAttempts = 20; // Poll for up to 20 seconds
-      
-      // Clear any existing polling interval
-      if (pollingIntervalRef.current) {
-        clearInterval(pollingIntervalRef.current);
-      }
-      
-      // Poll every second until we see new data or hit max attempts
-      pollingIntervalRef.current = setInterval(async () => {
-        attempts++;
-        
-        const result = await refetch();
-        const newCount = result.data?.data?.length || 0;
-        
-        if (newCount > initialCount) {
-          if (pollingIntervalRef.current) {
-            clearInterval(pollingIntervalRef.current);
-            pollingIntervalRef.current = null;
-          }
-        } else if (attempts >= maxAttempts) {
-          if (pollingIntervalRef.current) {
-            clearInterval(pollingIntervalRef.current);
-            pollingIntervalRef.current = null;
-          }
-        }
-      }, 1000);
-    };
-
-    socket.on("LS_IMPORT_QUEUE_DRAINED", handleQueueDrained);
-
-    return () => {
-      socket.off("LS_IMPORT_QUEUE_DRAINED", handleQueueDrained);
-      if (pollingIntervalRef.current) {
-        clearInterval(pollingIntervalRef.current);
-      }
-    };
-  }, [getSocket, queryClient, refetch]);
-
   const toggleQueue = (queueAction: string, queueStatus: string) => {
-    const socket = getSocket("/");
-    socket.emit(
+    socketIOInstance.emit(
       "call",
       "socket.setQueueStatus",
       {
         queueAction,
         queueStatus,
       },
-      (data: any) => console.log(data),
+      (data) => console.log(data),
     );
   };
   /**
@@ -322,7 +246,7 @@ export const Import = (props: IProps): ReactElement => {
                   </thead>
 
                   <tbody className="divide-y divide-gray-200">
-                    {data?.data.map((jobResult: any, id: number) => {
+                    {data?.data.map((jobResult, id) => {
                       return (
                         <tr key={id}>
                           <td className="whitespace-nowrap px-2 py-2 text-gray-700 dark:text-slate-300">

src/client/components/Library/Library.tsx

@@ -152,10 +152,10 @@ export const Library = (): ReactElement => {
             accessorKey: "_source.createdAt",
             cell: (info) => {
               return !isNil(info.getValue()) ? (
-                <span className="inline-flex items-center bg-slate-300 dark:bg-slate-500 text-xs font-medium text-slate-700 dark:text-slate-200 px-3 py-1 rounded-md shadow-sm whitespace-nowrap ml-3 my-3">
-                  <i className="icon-[solar--file-download-bold] w-4 h-4 mr-2 opacity-70" />
-                  {format(parseISO(info.getValue()), "dd MMM yyyy, h:mm a")}
-                </span>
+                <div className="text-sm w-max ml-3 my-3 text-slate-600 dark:text-slate-900">
+                  <p>{format(parseISO(info.getValue()), "dd MMMM, yyyy")} </p>
+                  {format(parseISO(info.getValue()), "h aaaa")}
+                </div>
               ) : null;
             },
           },
@@ -164,25 +164,23 @@ export const Library = (): ReactElement => {
             accessorKey: "_source.acquisition",
             cell: (info) => (
               <div className="flex flex-col gap-2 ml-3 my-3">
-                {/* DC++ Downloads */}
-                {info.getValue().directconnect?.downloads?.length > 0 ? (
-                  <span className="inline-flex items-center bg-slate-50 text-slate-800 text-xs font-medium px-2.5 py-1 rounded-md dark:text-slate-900 dark:bg-slate-400">
-                    <i className="icon-[solar--folder-path-connect-bold-duotone] w-4 h-4 mr-1 opacity-70" />
-                    <span>
-                      DC++: {info.getValue().directconnect.downloads.length}
-                    </span>
+                <span className="inline-flex items-center w-fit bg-slate-50 text-slate-800 text-xs px-2 rounded-md dark:text-slate-900 dark:bg-slate-400">
+                  <span className="pr-1 pt-1">
+                    <i className="icon-[solar--folder-path-connect-bold-duotone] w-5 h-5"></i>
                   </span>
-                ) : null}
+                  <span className="text-md text-slate-900 dark:text-slate-900">
+                    DC++: {info.getValue().directconnect.downloads.length}
+                  </span>
+                </span>
 
-                {/* Torrent Downloads */}
-                {info.getValue().torrent.length > 0 ? (
-                  <span className="inline-flex items-center whitespace-nowrap bg-slate-50 text-slate-800 text-xs font-medium px-2.5 py-1 rounded-md dark:text-slate-900 dark:bg-slate-400">
-                    <i className="icon-[solar--magnet-bold-duotone] w-4 h-4 mr-1 opacity-70" />
-                    <span className="whitespace-nowrap">
-                      Torrent: {info.getValue().torrent.length}
-                    </span>
+                <span className="inline-flex w-fit items-center bg-slate-50 text-slate-800 text-xs px-2 rounded-md dark:text-slate-900 dark:bg-slate-400">
+                  <span className="pr-1 pt-1">
+                    <i className="icon-[solar--magnet-bold-duotone] w-5 h-5"></i>
                   </span>
-                ) : null}
+                  <span className="text-md text-slate-900 dark:text-slate-900">
+                    Torrent: {info.getValue().torrent.length}
+                  </span>
+                </span>
               </div>
             ),
           },

src/client/components/Search/Search.tsx

@@ -63,6 +63,7 @@ export const Search = ({}: ISearchProps): ReactElement => {
       markEntireVolumeWanted,
       resourceType,
     }) => {
+      console.log("jigni", comicObject);
       let volumeInformation = {};
       let issues = [];
       switch (resourceType) {
@@ -72,12 +73,11 @@ export const Search = ({}: ISearchProps): ReactElement => {
           // Add issue metadata
           issues.push({
             id,
-            url: api_detail_url,
+            api_detail_url,
             image,
             coverDate: cover_date,
             issueNumber: issue_number,
           });
-          console.log(issues);
           // Get volume metadata from CV
           const response = await axios({
             url: `${COMICVINE_SERVICE_URI}/getVolumes`,
@@ -266,80 +266,55 @@ export const Search = ({}: ISearchProps): ReactElement => {
           </div>
         )}
         {!isEmpty(comicVineSearchResults?.data?.results) ? (
-          <div className="mx-auto w-full sm:w-[90vw] md:w-[80vw] lg:w-[70vw] max-w-6xl px-4 py-6">
+          <div className="mx-auto max-w-screen-xl px-4 py-4 sm:px-6 sm:py-8 lg:px-8">
             {comicVineSearchResults.data.results.map((result) => {
               return result.resource_type === "issue" ? (
                 <div
                   key={result.id}
-                  className="relative flex gap-4 py-6 px-3 border-b border-slate-200 dark:border-slate-700 hover:bg-slate-100/50 dark:hover:bg-slate-800/30 transition-colors duration-150 group"
+                  className="mb-5 dark:bg-slate-400 p-4 rounded-lg"
                 >
-                  {/* IMAGE */}
-                  <div className="flex-shrink-0">
-                    <Card
-                      orientation="cover-only"
-                      imageUrl={result.image.small_url}
-                      hasDetails={false}
-                      cardContainerStyle={{ width: "120px", maxWidth: "150px" }}
-                    />
-                  </div>
-
-                  {/* RIGHT-SIDE CONTENT */}
-                  <div className="flex-1 min-w-0">
-                    {/* TITLE */}
-                    <div className="text-base font-medium text-slate-800 dark:text-white tracking-tight truncate">
-                      {result.volume?.name || <span>No Name</span>}
+                  <div className="flex flex-row">
+                    <div className="mr-5 min-w-[80px] max-w-[13%]">
+                      <Card
+                        key={result.id}
+                        orientation={"cover-only"}
+                        imageUrl={result.image.small_url}
+                        hasDetails={false}
+                      />
                     </div>
-
-                    {/* SUBMETA */}
-                    <div className="flex flex-wrap gap-2 mt-2">
-                      {/* Cover Date Token */}
+                    <div className="w-3/4">
+                      <div className="text-xl">
+                        {!isEmpty(result.volume.name) ? (
+                          result.volume.name
+                        ) : (
+                          <span className="is-size-3">No Name</span>
+                        )}
+                      </div>
                       {result.cover_date && (
-                        <span className="inline-flex items-center bg-slate-50 text-slate-800 text-xs font-medium px-2.5 py-0.5 rounded-md dark:text-slate-900 dark:bg-slate-400">
-                          <span className="pr-1 pt-1">
-                            <i className="icon-[solar--calendar-bold-duotone] w-4 h-4"></i>
-                          </span>
-                          <span className="text-xs text-slate-500 dark:text-slate-900">
-                            {dayjs(result.cover_date).format("MMM YYYY")}
-                          </span>
-                        </span>
+                        <p>
+                          <span className="tag is-light">Cover date</span>
+                          {dayjs(result.cover_date).format("MMM D, YYYY")}
+                        </p>
                       )}
 
-                      {/* ID Token */}
-                      <span className="inline-flex items-center bg-slate-50 text-slate-800 text-xs font-medium px-2.5 py-0.5 rounded-md dark:text-slate-900 dark:bg-slate-400">
-                        <span className="pr-1 pt-1">
-                          <i className="icon-[solar--hashtag-bold-duotone] w-4 h-4"></i>
-                        </span>
-                        <span className="text-xs text-slate-500 dark:text-slate-900">
-                          {result.id}
-                        </span>
-                      </span>
-                    </div>
+                      <p className="tag is-warning">{result.id}</p>
 
-                    {/* LINK */}
-                    <a
-                      href={result.api_detail_url}
-                      className="text-xs text-blue-500 underline mt-1 inline-block break-all"
-                    >
-                      {result.api_detail_url}
-                    </a>
-
-                    {/* DESCRIPTION */}
-                    {result.description && (
-                      <p className="text-sm text-slate-600 dark:text-slate-200 mt-2 line-clamp-3">
+                      <a href={result.api_detail_url}>
+                        {result.api_detail_url}
+                      </a>
+                      <p className="text-sm">
                         {ellipsize(
-                          convert(result.description ?? "", {
-                            baseElements: { selectors: ["p", "div"] },
+                          convert(result.description, {
+                            baseElements: {
+                              selectors: ["p", "div"],
+                            },
                           }),
-                          300,
+                          320,
                         )}
                       </p>
-                    )}
-
-                    {/* CTA BUTTON */}
-                    {result.volume.name && (
-                      <div className="absolute bottom-4 right-4">
+                      <div className="mt-2">
                         <PopoverButton
-                          content={`This will add ${result?.volume?.name} to your wanted list.`}
+                          content={`This will add ${result.volume.name} to your wanted list.`}
                           clickHandler={() =>
                             addToWantedList({
                               source: "comicvine",
@@ -350,109 +325,114 @@ export const Search = ({}: ISearchProps): ReactElement => {
                           }
                         />
                       </div>
-                    )}
+                    </div>
                   </div>
                 </div>
               ) : (
                 result.resource_type === "volume" && (
                   <div
                     key={result.id}
-                    className="relative flex gap-4 py-6 px-3 border-b border-slate-200 dark:border-slate-700 hover:bg-slate-100/50 dark:hover:bg-slate-800/30 transition-colors duration-150 group"
+                    className="mb-5 dark:bg-slate-500 p-4 rounded-lg"
                   >
-                    {/* LEFT COLUMN: COVER */}
-                    <Card
-                      orientation="cover-only"
-                      imageUrl={result.image.small_url}
-                      hasDetails={false}
-                      cardContainerStyle={{
-                        width: "120px",
-                        maxWidth: "150px",
-                      }}
-                    />
-
-                    {/* RIGHT COLUMN */}
-                    <div className="flex-1 min-w-0">
-                      {/* TITLE */}
-                      <div className="text-lg font-bold text-gray-900 dark:text-white">
-                        {result.name || <span>No Name</span>}
-                        {result.start_year && <> ({result.start_year})</>}
+                    <div className="flex flex-row">
+                      <div className="mr-5 min-w-[80px] max-w-[13%]">
+                        <Card
+                          key={result.id}
+                          orientation={"cover-only"}
+                          imageUrl={result.image.small_url}
+                          hasDetails={false}
+                        />
                       </div>
-
-                      {/* TOKENS */}
-                      <div className="flex flex-wrap gap-2 mt-2">
-                        {/* ISSUE COUNT */}
-                        {result.count_of_issues && (
-                          <span className="inline-flex items-center bg-slate-50 text-slate-800 text-xs font-medium px-2.5 py-0.5 rounded-md dark:text-slate-900 dark:bg-slate-400">
-                            <span className="pr-1 pt-1">
-                              <i className="icon-[solar--documents-minimalistic-bold-duotone] w-4 h-4" />
-                            </span>
-                            <span>
-                              {t("issueWithCount", {
-                                count: result.count_of_issues,
-                              })}
-                            </span>
-                          </span>
-                        )}
-
-                        {/* FORMAT DETECTED */}
-                        {result.description &&
-                          !isEmpty(detectIssueTypes(result.description)) && (
-                            <span className="inline-flex items-center bg-slate-50 text-slate-800 text-xs font-medium px-2.5 py-0.5 rounded-md dark:text-slate-900 dark:bg-slate-400">
-                              <span className="pr-1 pt-1">
-                                <i className="icon-[solar--book-2-line-duotone] w-4 h-4" />
-                              </span>
-                              <span>
-                                {
-                                  detectIssueTypes(result.description)
-                                    .displayName
-                                }
-                              </span>
-                            </span>
+                      <div className="w-3/4">
+                        <div className="text-xl">
+                          {!isEmpty(result.name) ? (
+                            result.name
+                          ) : (
+                            <span className="text-xl">No Name</span>
                           )}
+                          {result.start_year && <> ({result.start_year})</>}
+                        </div>
 
-                        {/* ID */}
-                        <span className="inline-flex items-center bg-slate-50 text-slate-800 text-xs font-medium px-2.5 py-0.5 rounded-md dark:text-slate-900 dark:bg-slate-400">
-                          <span className="pr-1 pt-1">
-                            <i className="icon-[solar--hashtag-bold-duotone] w-4 h-4" />
-                          </span>
-                          <span>{result.id}</span>
-                        </span>
-                      </div>
+                        <div className="flex flex-row gap-2">
+                          {/* issue count */}
+                          {result.count_of_issues && (
+                            <div className="my-2">
+                              <span className="inline-flex items-center bg-slate-50 text-slate-800 text-xs font-medium px-2 rounded-md dark:text-slate-900 dark:bg-slate-400">
+                                <span className="pr-1 pt-1">
+                                  <i className="icon-[solar--documents-minimalistic-bold-duotone] w-5 h-5"></i>
+                                </span>
 
-                      {/* LINK */}
-                      <a
-                        href={result.api_detail_url}
-                        className="text-sm text-blue-500 underline mt-2 break-all"
-                      >
-                        {result.api_detail_url}
-                      </a>
+                                <span className="text-md text-slate-500 dark:text-slate-900">
+                                  {t("issueWithCount", {
+                                    count: result.count_of_issues,
+                                  })}
+                                </span>
+                              </span>
+                            </div>
+                          )}
+                          {/* type: TPB, one-shot, graphic novel etc. */}
+                          {!isNil(result.description) &&
+                            !isUndefined(result.description) && (
+                              <>
+                                {!isEmpty(
+                                  detectIssueTypes(result.description),
+                                ) && (
+                                  <div className="my-2">
+                                    <span className="inline-flex items-center bg-slate-50 text-slate-800 text-xs font-medium px-2 rounded-md dark:text-slate-900 dark:bg-slate-400">
+                                      <span className="pr-1 pt-1">
+                                        <i className="icon-[solar--book-2-line-duotone] w-5 h-5"></i>
+                                      </span>
 
-                      {/* DESCRIPTION */}
-                      {result.description && (
-                        <p className="text-sm mt-2 text-slate-700 dark:text-slate-200 break-words line-clamp-3">
+                                      <span className="text-md text-slate-500 dark:text-slate-900">
+                                        {
+                                          detectIssueTypes(result.description)
+                                            .displayName
+                                        }
+                                      </span>
+                                    </span>
+                                  </div>
+                                )}
+                              </>
+                            )}
+                        </div>
+
+                        <span className="tag is-warning">{result.id}</span>
+                        <p>
+                          <a href={result.api_detail_url}>
+                            {result.api_detail_url}
+                          </a>
+                        </p>
+
+                        {/* description */}
+                        <p className="text-sm">
                           {ellipsize(
                             convert(result.description, {
-                              baseElements: { selectors: ["p", "div"] },
+                              baseElements: {
+                                selectors: ["p", "div"],
+                              },
                             }),
                             320,
                           )}
                         </p>
-                      )}
-                      {result.name ? (
-                        <div className="mt-4 justify-self-end">
+                        <div className="mt-2">
                           <PopoverButton
-                            content={`This will add ${result.count_of_issues} issues your wanted list.`}
+                            content={`Adding this volume will add ${t(
+                              "issueWithCount",
+                              {
+                                count: result.count_of_issues,
+                              },
+                            )} to your wanted list.`}
                             clickHandler={() =>
                               addToWantedList({
                                 source: "comicvine",
                                 comicObject: result,
-                                markEntireVolumeWanted: false,
-                                resourceType: "issue",
+                                markEntireVolumeWanted: true,
+                                resourceType: "volume",
                               })
                             }
                           />
                         </div>
-                      ) : null}
+                      </div>
                     </div>
                   </div>
                 )

src/client/components/Settings/AirDCPPSettings/AirDCPPHubsForm.tsx

@@ -1,10 +1,9 @@
-import React, { ReactElement, useState } from "react";
+import React, { ReactElement, useEffect, useState, useContext } from "react";
 import { Form, Field } from "react-final-form";
 import { isEmpty, isNil, isUndefined } from "lodash";
 import Select from "react-select";
 import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
 import axios from "axios";
-import { produce } from "immer";
 import { AIRDCPP_SERVICE_BASE_URI } from "../../../constants/endpoints";
 
 export const AirDCPPHubsForm = (): ReactElement => {
@@ -14,7 +13,6 @@ export const AirDCPPHubsForm = (): ReactElement => {
     data: settings,
     isLoading,
     isError,
-    refetch,
   } = useQuery({
     queryKey: ["settings"],
     queryFn: async () =>
@@ -22,9 +20,11 @@ export const AirDCPPHubsForm = (): ReactElement => {
         url: "http://localhost:3000/api/settings/getAllSettings",
         method: "GET",
       }),
-    staleTime: Infinity,
   });
 
+  /**
+   * Get the hubs list from an AirDCPP Socket
+   */
   const { data: hubs } = useQuery({
     queryKey: ["hubs"],
     queryFn: async () =>
@@ -37,16 +37,14 @@ export const AirDCPPHubsForm = (): ReactElement => {
       }),
     enabled: !isEmpty(settings?.data.directConnect?.client?.host),
   });
-
-  let hubList: any[] = [];
+  let hubList = {};
   if (!isNil(hubs)) {
     hubList = hubs?.data.map(({ hub_url, identity }) => ({
       value: hub_url,
       label: identity.name,
     }));
   }
-
-  const mutation = useMutation({
+  const { mutate } = useMutation({
     mutationFn: async (values) =>
       await axios({
         url: `http://localhost:3000/api/settings/saveSettings`,
@@ -57,112 +55,82 @@ export const AirDCPPHubsForm = (): ReactElement => {
           settingsKey: "directConnect",
         },
       }),
-    onSuccess: (data) => {
-      queryClient.setQueryData(["settings"], (oldData: any) =>
-        produce(oldData, (draft: any) => {
-          draft.data.directConnect.client = {
-            ...draft.data.directConnect.client,
-            ...data.data.directConnect.client,
-          };
-        }),
-      );
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["settings"] });
     },
   });
-
-  const validate = async (values) => {
-    const errors = {};
-    // Add any validation logic here if needed
-    return errors;
-  };
+  const validate = async () => {};
 
   const SelectAdapter = ({ input, ...rest }) => {
     return <Select {...input} {...rest} isClearable isMulti />;
   };
 
-  if (isLoading) {
-    return <div>Loading...</div>;
-  }
-
-  if (isError) {
-    return <div>Error loading settings.</div>;
-  }
-
   return (
     <>
       {!isEmpty(hubList) && !isUndefined(hubs) ? (
         <Form
-          onSubmit={(values) => {
-            mutation.mutate(values);
-          }}
+          onSubmit={mutate}
           validate={validate}
           render={({ handleSubmit }) => (
-            <form onSubmit={handleSubmit} className="mt-10">
-              <h2 className="text-xl">Configure DC++ Hubs</h2>
-              <article
-                role="alert"
-                className="mt-4 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"
-              >
+            <form onSubmit={handleSubmit}>
+              <div>
+                <h3 className="title">Hubs</h3>
                 <h6 className="subtitle has-text-grey-light">
-                  Select the hubs you want to perform searches against. Your
-                  selection in the dropdown <strong>will replace</strong> the
-                  existing selection.
+                  Select the hubs you want to perform searches against.
                 </h6>
-              </article>
-
-              <div className="field">
-                <label className="block py-1 mt-3">AirDC++ Host</label>
-                <Field
-                  name="hubs"
-                  component={SelectAdapter}
-                  className="basic-multi-select"
-                  placeholder="Select Hubs to Search Against"
-                  options={hubList}
-                />
               </div>
-              <button
-                type="submit"
-                className="flex space-x-1 sm:mt-5 sm:flex-row sm:items-center rounded-lg border border-green-400 dark:border-green-200 bg-green-200 px-4 py-2 text-gray-500 hover:bg-transparent hover:text-green-600 focus:outline-none focus:ring active:text-indigo-500"
-              >
+              <div className="field">
+                <label className="label">AirDC++ Host</label>
+                <div className="control">
+                  <Field
+                    name="hubs"
+                    component={SelectAdapter}
+                    className="basic-multi-select"
+                    placeholder="Select Hubs to Search Against"
+                    options={hubList}
+                  />
+                </div>
+              </div>
+
+              <button type="submit" className="button is-primary">
                 Submit
               </button>
             </form>
           )}
         />
       ) : (
-        <article
-          role="alert"
-          className="mt-4 rounded-lg max-w-screen-md border-s-4 border-yellow-500 bg-yellow-50 p-4 dark:border-s-4 dark:border-yellow-600 dark:bg-yellow-300 dark:text-slate-600"
-        >
-          <div className="message-body">
-            No configured hubs detected in AirDC++. <br />
-            Configure to a hub in AirDC++ and then select a default hub here.
-          </div>
-        </article>
+        <>
+          <article
+            role="alert"
+            className="mt-4 rounded-lg max-w-screen-md border-s-4 border-yellow-500 bg-yellow-50 p-4 dark:border-s-4 dark:border-yellow-600 dark:bg-yellow-300 dark:text-slate-600"
+          >
+            <div className="message-body">
+              No configured hubs detected in AirDC++. <br />
+              Configure to a hub in AirDC++ and then select a default hub here.
+            </div>
+          </article>
+        </>
       )}
       {!isEmpty(settings?.data.directConnect?.client.hubs) ? (
         <>
           <div className="mt-4">
             <article className="message is-warning">
-              <div className="message-body is-size-6 is-family-secondary"></div>
+              <div className="message-body is-size-6 is-family-secondary">
+                Your selection in the dropdown <strong>will replace</strong> the
+                existing selection.
+              </div>
             </article>
           </div>
-          <div>
-            <span className="flex items-center mt-10 mb-4">
-              <span className="text-xl text-slate-500 dark:text-slate-200 pr-5">
-                Default Hub for Searches
-              </span>
-              <span className="h-px flex-1 bg-slate-200 dark:bg-slate-400"></span>
-            </span>
-            <div className="block max-w-sm p-6 bg-white border border-gray-200 rounded-lg shadow dark:bg-slate-400 dark:border-gray-700">
-              {settings?.data.directConnect?.client.hubs.map(
-                ({ value, label }) => (
-                  <div key={value}>
-                    <div>{label}</div>
-                    <span className="is-size-7">{value}</span>
-                  </div>
-                ),
-              )}
-            </div>
+          <div className="box mt-3">
+            <h6>Default Hub For Searches:</h6>
+            {settings?.data.directConnect?.client.hubs.map(
+              ({ value, label }) => (
+                <div key={value}>
+                  <div>{label}</div>
+                  <span className="is-size-7">{value}</span>
+                </div>
+              ),
+            )}
           </div>
         </>
       ) : null}

src/client/components/Settings/AirDCPPSettings/AirDCPPSettingsForm.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from "react";
 import { AirDCPPSettingsConfirmation } from "./AirDCPPSettingsConfirmation";
 import { ConnectionForm } from "../../shared/ConnectionForm/ConnectionForm";
-import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { useMutation, useQuery } from "@tanstack/react-query";
 import axios from "axios";
 import {
   AIRDCPP_SERVICE_BASE_URI,

src/client/components/Settings/DockerVars/DockerVars.tsx

@@ -1,38 +0,0 @@
-import React from "react";
-import { useQuery, useQueryClient } from "@tanstack/react-query";
-import axios from "axios";
-
-export const DockerVars = (): React.ReactElement => {
-  const [environmentVariables, setEnvironmentVariables] = React.useState<
-    Record<string, string>
-  >({});
-  const { data } = useQuery({
-    queryKey: ["docker-vars"],
-    queryFn: async () => {
-      await axios({
-        method: "GET",
-        url: "http://localhost:3000/api/settings/getEnvironmentVariables",
-      }).then((response) => {
-        setEnvironmentVariables(response.data);
-      });
-    },
-    refetchOnWindowFocus: false,
-    refetchOnReconnect: false,
-  });
-  console.log("Docker Vars: ", environmentVariables);
-  return (
-    <div className="flex flex-col gap-4">
-      <h2 className="text-xl font-semibold">Docker Environment Variables</h2>
-      <p className="text-gray-600 dark:text-gray-400">
-        <pre>
-          {Object.entries(environmentVariables).length > 0
-            ? JSON.stringify(environmentVariables, null, 2)
-            : "No environment variables found."}
-        </pre>
-      </p>
-      {/* Add your form or content for Docker environment variables here */}
-    </div>
-  );
-};
-
-export default DockerVars;

src/client/components/Settings/Settings.tsx

@@ -4,7 +4,6 @@ import { AirDCPPHubsForm } from "./AirDCPPSettings/AirDCPPHubsForm";
 import { QbittorrentConnectionForm } from "./QbittorrentSettings/QbittorrentConnectionForm";
 import { SystemSettingsForm } from "./SystemSettings/SystemSettingsForm";
 import ProwlarrSettingsForm from "./ProwlarrSettings/ProwlarrSettingsForm";
-import DockerVars from "./DockerVars/DockerVars";
 import { ServiceStatuses } from "../ServiceStatuses/ServiceStatuses";
 import settingsObject from "../../constants/settings/settingsMenu.json";
 import { isUndefined, map } from "lodash";
@@ -13,130 +12,139 @@ interface ISettingsProps {}
 
 export const Settings = (props: ISettingsProps): ReactElement => {
   const [active, setActive] = useState("gen-db");
-  const [expanded, setExpanded] = useState<Record<string, boolean>>({});
-
-  const toggleExpanded = (id: string) => {
-    setExpanded((prev) => ({
-      ...prev,
-      [id]: !prev[id],
-    }));
-  };
-
+  console.log(active);
   const settingsContent = [
-    { id: "adc-hubs", content: <AirDCPPHubsForm /> },
-    { id: "adc-connection", content: <AirDCPPSettingsForm /> },
-    {id: "gen-docker-vars", content: <DockerVars />},
-    { id: "qbt-connection", content: <QbittorrentConnectionForm /> },
-    { id: "prwlr-connection", content: <ProwlarrSettingsForm /> },
-    { id: "core-service", content: <>a</> },
-    { id: "flushdb", content: <SystemSettingsForm /> },
+    {
+      id: "adc-hubs",
+      content: (
+        <div key="adc-hubs">
+          <AirDCPPHubsForm />
+        </div>
+      ),
+    },
+    {
+      id: "adc-connection",
+      content: (
+        <div key="adc-connection">
+          <AirDCPPSettingsForm />
+        </div>
+      ),
+    },
+    {
+      id: "qbt-connection",
+      content: (
+        <div key="qbt-connection">
+          <QbittorrentConnectionForm />
+        </div>
+      ),
+    },
+    {
+      id: "prwlr-connection",
+      content: (
+        <>
+          <ProwlarrSettingsForm />
+        </>
+      ),
+    },
+    {
+      id: "core-service",
+      content: <>a</>,
+    },
+    {
+      id: "flushdb",
+      content: (
+        <div key="flushdb">
+          <SystemSettingsForm />
+        </div>
+      ),
+    },
   ];
-
   return (
     <div>
       <section>
-        {/* Header */}
         <header className="bg-slate-200 dark:bg-slate-500">
-          <div className="mx-auto max-w-screen-xl px-4 py-6 sm:px-6 lg:px-8">
+          <div className="mx-auto max-w-screen-xl px-2 py-2 sm:px-6 sm:py-8 lg:px-8 lg:py-4">
             <div className="sm:flex sm:items-center sm:justify-between">
               <div className="text-center sm:text-left">
-                <h1 className="text-2xl sm:text-3xl font-bold text-gray-900 dark:text-white">
+                <h1 className="text-2xl font-bold text-gray-900 dark:text-white sm:text-3xl">
                   Settings
                 </h1>
-                <p className="mt-1 text-sm text-gray-500 dark:text-white">
+
+                <p className="mt-1.5 text-sm text-gray-500 dark:text-white">
                   Import comics into the ThreeTwo library.
                 </p>
               </div>
             </div>
           </div>
         </header>
-
-        {/* Main Layout */}
-        <div className="flex gap-8 px-12 py-6">
-          {/* Sidebar */}
-          <div className="relative z-30">
-            <aside
-              className="sticky top-6 w-72 max-h-[90vh]
-             rounded-2xl shadow-xl backdrop-blur-md
-             bg-white/70 dark:bg-slate-800/60
-             border border-slate-200 dark:border-slate-700
-             overflow-hidden"
-            >
-              <div className="px-4 py-6 overflow-y-auto">
-                {map(settingsObject, (settingObject, idx) => (
+        <div className="flex flex-row">
+          <div className="inset-y-0 w-80 dark:bg-gray-800 bg-slate-300 text-white overflow-y-auto">
+            <aside className="px-4 py-4 sm:px-6 sm:py-8 lg:px-8">
+              {map(settingsObject, (settingObject, idx) => {
+                return (
                   <div
+                    className="w-64 py-2 text-slate-700 dark:text-slate-400"
                     key={idx}
-                    className="mb-6 text-slate-700 dark:text-slate-300"
                   >
-                    <h3 className="text-xs font-semibold text-slate-500 dark:text-slate-400 tracking-wide mb-3">
+                    <h3 className="text-l pb-2">
                       {settingObject.category.toUpperCase()}
                     </h3>
-
-                    {!isUndefined(settingObject.children) && (
-                      <ul>
+                    {/* First level children */}
+                    {!isUndefined(settingObject.children) ? (
+                      <ul key={settingObject.id}>
                         {map(settingObject.children, (item, idx) => {
-                          const isOpen = expanded[item.id];
-
                           return (
-                            <li key={idx} className="mb-1">
-                              <div
-                                onClick={() => toggleExpanded(item.id)}
-                                className={`cursor-pointer flex justify-between items-center px-1 py-1 rounded-md transition-colors hover:bg-white/50 dark:hover:bg-slate-700 ${
-                                  item.id === active
-                                    ? "font-semibold text-blue-600 dark:text-blue-400"
-                                    : ""
-                                }`}
+                            <li key={idx} className="mb-2">
+                              <a
+                                className={
+                                  item.id.toString() === active
+                                    ? "is-active flex items-center"
+                                    : "flex items-center"
+                                }
+                                onClick={() => setActive(item.id.toString())}
                               >
-                                <span
-                                  onClick={() => setActive(item.id.toString())}
-                                  className="flex-1"
-                                >
-                                  {item.displayName}
-                                </span>
-                                {!isUndefined(item.children) && (
-                                  <span className="text-xs opacity-60">
-                                    {isOpen ? "−" : "+"}
-                                  </span>
-                                )}
-                              </div>
-
-                              {!isUndefined(item.children) && isOpen && (
-                                <ul className="pl-4 mt-1">
-                                  {map(item.children, (subItem) => (
-                                    <li key={subItem.id} className="mb-1">
+                                {item.displayName}
+                              </a>
+                              {/* Second level children */}
+                              {!isUndefined(item.children) ? (
+                                <ul className="pl-4 mt-2">
+                                  {map(item.children, (item, idx) => (
+                                    <li key={item.id} className="mb-2">
                                       <a
-                                        onClick={() =>
-                                          setActive(subItem.id.toString())
+                                        className={
+                                          item.id.toString() === active
+                                            ? "is-active flex items-center"
+                                            : "flex items-center"
+                                        }
+                                        onClick={() =>
+                                          setActive(item.id.toString())
                                         }
-                                        className={`cursor-pointer flex items-center px-1 py-1 rounded-md transition-colors hover:bg-white/50 dark:hover:bg-slate-700 ${
-                                          subItem.id.toString() === active
-                                            ? "font-semibold text-blue-600 dark:text-blue-400"
-                                            : ""
-                                        }`}
                                       >
-                                        {subItem.displayName}
+                                        {item.displayName}
                                       </a>
                                     </li>
                                   ))}
                                 </ul>
-                              )}
+                              ) : null}
                             </li>
                           );
                         })}
                       </ul>
-                    )}
+                    ) : null}
                   </div>
-                ))}
-              </div>
+                );
+              })}
             </aside>
           </div>
 
-          {/* Content */}
-          <main className="flex-1 px-2 py-2">
-            {settingsContent.map(({ id, content }) =>
-              active === id ? <div key={id}>{content}</div> : null,
-            )}
-          </main>
+          {/* content for settings */}
+          <div className="flex mx-12">
+            <div className="">
+              {map(settingsContent, ({ id, content }) =>
+                active === id ? content : null,
+              )}
+            </div>
+          </div>
         </div>
       </section>
     </div>

src/client/components/WantedComics/WantedComics.tsx

@@ -1,87 +1,37 @@
-import React from "react";
-import { useQuery } from "@tanstack/react-query";
-import { gql, GraphQLClient } from "graphql-request";
+import React, { ReactElement, useCallback, useEffect, useMemo } from "react";
+import SearchBar from "../Library/SearchBar";
 import T2Table from "../shared/T2Table";
 import MetadataPanel from "../shared/MetadataPanel";
+import { useQuery } from "@tanstack/react-query";
+import axios from "axios";
+import { SEARCH_SERVICE_BASE_URI } from "../../constants/endpoints";
 
-/**
- * GraphQL client for interfacing with Moleculer Apollo server.
- */
-const client = new GraphQLClient("http://localhost:3000/graphql");
+export const WantedComics = (props): ReactElement => {
+  const {
+    data: wantedComics,
+    isSuccess,
+    isFetched,
+    isError,
+    isLoading,
+  } = useQuery({
+    queryFn: async () =>
+      await axios({
+        url: `${SEARCH_SERVICE_BASE_URI}/searchIssue`,
+        method: "POST",
+        data: {
+          query: {},
 
-/**
- * GraphQL query to fetch wanted comics.
- */
-const WANTED_COMICS_QUERY = gql`
-  query {
-    wantedComics(limit: 25, offset: 0) {
-      total
-      comics
-    }
-  }
-`;
-
-/**
- * Shape of an individual comic returned by the backend.
- */
-type Comic = {
-  _id: string;
-  sourcedMetadata?: {
-    comicvine?: {
-      name?: string;
-      start_year?: string;
-      publisher?: {
-        name?: string;
-      };
-    };
-  };
-  acquisition?: {
-    directconnect?: {
-      downloads?: Array<{
-        name: string;
-      }>;
-    };
-  };
-};
-
-/**
- * Shape of the GraphQL response returned for wanted comics.
- */
-type WantedComicsResponse = {
-  wantedComics: {
-    total: number;
-    comics: Comic[];
-  };
-};
-
-/**
- * React component rendering the "Wanted Comics" table using T2Table.
- * Fetches data from GraphQL backend via graphql-request + TanStack Query.
- *
- * @component
- * @returns {JSX.Element} React component
- */
-const WantedComics = (): JSX.Element => {
-  const { data, isLoading, isError, isSuccess, error } = useQuery<
-    WantedComicsResponse["wantedComics"]
-  >({
+          pagination: {
+            size: 25,
+            from: 0,
+          },
+          type: "wanted",
+          trigger: "wantedComicsPage",
+        },
+      }),
     queryKey: ["wantedComics"],
-    queryFn: async () => {
-      const res = await client.request<WantedComicsResponse>(
-        WANTED_COMICS_QUERY,
-      );
-
-      if (!res?.wantedComics?.comics) {
-        throw new Error("No comics returned");
-      }
-
-      return res.wantedComics;
-    },
-    retry: false,
-    refetchOnWindowFocus: false,
-    refetchOnReconnect: false,
+    enabled: true,
   });
-
   const columnData = [
     {
       header: "Comic Information",
@@ -90,11 +40,11 @@ const WantedComics = (): JSX.Element => {
           header: "Details",
           id: "comicDetails",
           minWidth: 350,
-          accessorFn: (data: Comic) => data,
-          cell: (value: any) => {
-            const row = value.getValue();
-            console.log("Comic row data:", row);
-            return row ? <MetadataPanel data={row} /> : null;
+          accessorFn: (data) => data,
+          cell: (value) => {
+            console.log("ASDASd", value);
+            const row = value.getValue()._source;
+            return row && <MetadataPanel data={row} />;
           },
         },
       ],
@@ -105,73 +55,148 @@ const WantedComics = (): JSX.Element => {
         {
           header: "Files",
           align: "right",
-          accessorFn: (row: Comic) =>
-            row?.acquisition?.directconnect?.downloads || [],
-          cell: (props: any) => {
-            const downloads = props.getValue();
-            return downloads?.length > 0 ? (
-              <span className="tag is-warning">{downloads.length}</span>
-            ) : null;
+          accessorKey: "_source.acquisition",
+          cell: (props) => {
+            const {
+              directconnect: { downloads },
+            } = props.getValue();
+            return (
+              <div
+                style={{
+                  display: "flex",
+                  // flexDirection: "column",
+                  justifyContent: "center",
+                }}
+              >
+                {downloads.length > 0 ? (
+                  <span className="tag is-warning">{downloads.length}</span>
+                ) : null}
+              </div>
+            );
           },
         },
         {
           header: "Download Details",
           id: "downloadDetails",
-          accessorFn: (row: Comic) =>
-            row?.acquisition?.directconnect?.downloads || [],
-          cell: (data: any) => (
+          accessorKey: "_source.acquisition",
+          cell: (data) => (
             <ol>
-              {data.getValue()?.map((download: any, idx: number) => (
-                <li className="is-size-7" key={idx}>
-                  {download.name}
-                </li>
-              ))}
+              {data.getValue().directconnect.downloads.map((download, idx) => {
+                return (
+                  <li className="is-size-7" key={idx}>
+                    {download.name}
+                  </li>
+                );
+              })}
             </ol>
           ),
         },
+        {
+          header: "Type",
+          id: "dcc",
+        },
       ],
     },
   ];
 
+  /**
+   * Pagination control that fetches the next x (pageSize) items
+   * based on the y (pageIndex) offset from the Elasticsearch index
+   * @param {number} pageIndex
+   * @param {number} pageSize
+   * @returns void
+   *
+   **/
+  // const nextPage = useCallback((pageIndex: number, pageSize: number) => {
+  //   dispatch(
+  //     searchIssue(
+  //       {
+  //         query: {},
+  //       },
+  //       {
+  //         pagination: {
+  //           size: pageSize,
+  //           from: pageSize * pageIndex + 1,
+  //         },
+  //         type: "wanted",
+  //         trigger: "wantedComicsPage",
+  //       },
+  //     ),
+  //   );
+  // }, []);
+
+  /**
+   * Pagination control that fetches the previous x (pageSize) items
+   * based on the y (pageIndex) offset from the Elasticsearch index
+   * @param {number} pageIndex
+   * @param {number} pageSize
+   * @returns void
+   **/
+  // const previousPage = useCallback((pageIndex: number, pageSize: number) => {
+  //   let from = 0;
+  //   if (pageIndex === 2) {
+  //     from = (pageIndex - 1) * pageSize + 2 - 17;
+  //   } else {
+  //     from = (pageIndex - 1) * pageSize + 2 - 16;
+  //   }
+  //   dispatch(
+  //     searchIssue(
+  //       {
+  //         query: {},
+  //       },
+  //       {
+  //         pagination: {
+  //           size: pageSize,
+  //           from,
+  //         },
+  //         type: "wanted",
+  //         trigger: "wantedComicsPage",
+  //       },
+  //     ),
+  //   );
+  // }, []);
+
   return (
-    <section>
-      <header className="bg-slate-200 dark:bg-slate-500">
-        <div className="mx-auto max-w-screen-xl px-2 py-2 sm:px-6 sm:py-8 lg:px-8 lg:py-4">
-          <div className="sm:flex sm:items-center sm:justify-between">
-            <div className="text-center sm:text-left">
-              <h1 className="text-2xl font-bold text-gray-900 dark:text-white sm:text-3xl">
-                Wanted Comics
-              </h1>
-              <p className="mt-1.5 text-sm text-gray-500 dark:text-white">
-                Browse through comics you marked as "wanted."
-              </p>
+    <div className="">
+      <section className="">
+        <header className="bg-slate-200 dark:bg-slate-500">
+          <div className="mx-auto max-w-screen-xl px-2 py-2 sm:px-6 sm:py-8 lg:px-8 lg:py-4">
+            <div className="sm:flex sm:items-center sm:justify-between">
+              <div className="text-center sm:text-left">
+                <h1 className="text-2xl font-bold text-gray-900 dark:text-white sm:text-3xl">
+                  Wanted Comics
+                </h1>
+
+                <p className="mt-1.5 text-sm text-gray-500 dark:text-white">
+                  Browse through comics you marked as "wanted."
+                </p>
+              </div>
             </div>
           </div>
-        </div>
-      </header>
-
-      {isLoading && (
-        <div className="animate-pulse p-4 space-y-4">
-          {Array.from({ length: 5 }).map((_, idx) => (
-            <div
-              key={idx}
-              className="h-24 bg-slate-300 dark:bg-slate-600 rounded-md"
-            />
-          ))}
-        </div>
-      )}
-      {isError && <div>Error fetching wanted comics. {error?.message}</div>}
-      {isSuccess && data?.comics?.length > 0 ? (
-        <T2Table
-          sourceData={data.comics}
-          totalPages={data.comics.length}
-          columns={columnData}
-          paginationHandlers={{}}
-        />
-      ) : isSuccess ? (
-        <div>No comics found.</div>
-      ) : null}
-    </section>
+        </header>
+        {isSuccess && wantedComics?.data.hits?.hits ? (
+          <div>
+            <div className="library">
+              <T2Table
+                sourceData={wantedComics?.data.hits.hits}
+                totalPages={wantedComics?.data.hits.hits.length}
+                columns={columnData}
+                paginationHandlers={{
+                  nextPage: () => {},
+                  previousPage: () => {},
+                }}
+                // rowClickHandler={navigateToComicDetail}
+              />
+              {/* pagination controls */}
+            </div>
+          </div>
+        ) : null}
+        {isLoading ? <div>Loading...</div> : null}
+        {isError ? (
+          <div>An error occurred while retrieving the pull list.</div>
+        ) : null}
+      </section>
+    </div>
   );
 };
 

src/client/components/shared/Carda.tsx

@@ -11,8 +11,8 @@ interface ICardProps {
   borderColorClass?: string;
   backgroundColor?: string;
   onClick?: (event: React.MouseEvent<HTMLElement>) => void;
-  cardContainerStyle?: any;
-  imageStyle?: any;
+  cardContainerStyle?: PropTypes.object;
+  imageStyle?: PropTypes.object;
 }
 
 const renderCard = (props: ICardProps): ReactElement => {
@@ -83,11 +83,11 @@ const renderCard = (props: ICardProps): ReactElement => {
 
     case "vertical-2":
       return (
-        <div className="block rounded-md max-w-64 h-fit shadow-md shadow-white-400 bg-gray-200 dark:bg-slate-500">
+        <div className="block rounded-md w-64 h-fit shadow-md shadow-white-400 bg-gray-200 dark:bg-slate-500">
           <img
             alt="Home"
             src={props.imageUrl}
-            className="rounded-t-md object-cover w-full"
+            className="rounded-t-md object-cover"
           />
 
           {props.title ? (
@@ -140,31 +140,14 @@ const renderCard = (props: ICardProps): ReactElement => {
       );
 
     case "cover-only":
-      const containerStyle = {
-        width: props.cardContainerStyle?.width || "100%",
-        height: props.cardContainerStyle?.height || "auto",
-        maxWidth: props.cardContainerStyle?.maxWidth || "none",
-        ...props.cardContainerStyle,
-      };
-
-      const imageStyle = {
-        width: "100%",
-        height: "100%",
-        objectFit: "cover",
-        ...props.imageStyle,
-      };
-
       return (
-        <div
-          className={`rounded-2xl overflow-hidden shadow-md bg-white dark:bg-slate-800 ${
-            props.cardContainerStyle?.height ? "" : "aspect-[2/3]"
-          }`}
-          style={containerStyle}
-        >
-          <img src={props.imageUrl} alt="Comic cover" style={imageStyle} />
-        </div>
+        <>
+          {/* thumbnail */}
+          <div className="rounded-lg shadow-lg overflow-hidden w-fit h-fit">
+            <img src={props.imageUrl} />
+          </div>
+        </>
       );
-      
     case "card-with-info-panel":
       return (
         <>

src/client/components/shared/DatePicker.tsx

@@ -36,7 +36,7 @@ export const DatePickerDialog = (props) => {
   const handleDaySelect = (date) => {
     setSelected(date);
     if (date) {
-      setter(format(date, "yyyy/MM/dd"));
+      setter(format(date, "yyyy-MM-dd"));
       apiAction();
       closePopper();
     } else {

src/client/components/shared/MetadataPanel.tsx

@@ -1,4 +1,5 @@
 import React, { ReactElement } from "react";
+import PropTypes from "prop-types";
 import ellipsize from "ellipsize";
 import prettyBytes from "pretty-bytes";
 import { Card } from "../shared/Carda";
@@ -6,48 +7,26 @@ import { convert } from "html-to-text";
 import { determineCoverFile } from "../../shared/utils/metadata.utils";
 import { find, isUndefined } from "lodash";
 
-/**
- * Props for the MetadataPanel component.
- */
-interface MetadataPanelProps {
-  /**
-   * Comic metadata object passed into the panel.
-   */
-  data: any;
-
-  /**
-   * Optional custom styling for the cover image.
-   */
-  imageStyle?: React.CSSProperties;
-
-  /**
-   * Optional custom styling for the title section.
-   */
-  titleStyle?: React.CSSProperties;
+interface IMetadatPanelProps {
+  value: any;
+  children: any;
+  imageStyle: any;
+  titleStyle: any;
+  tagsStyle: any;
+  containerStyle: any;
 }
-
-/**
- * MetadataPanel component
- *
- * Displays structured comic metadata based on the best available source
- * (raw file data, ComicVine, or League of Comic Geeks).
- *
- * @component
- * @param {MetadataPanelProps} props
- * @returns {ReactElement}
- */
-export const MetadataPanel = (props: MetadataPanelProps): ReactElement => {
+export const MetadataPanel = (props: IMetadatPanelProps): ReactElement => {
   const {
     rawFileDetails,
     inferredMetadata,
     sourcedMetadata: { comicvine, locg },
   } = props.data;
-
   const { issueName, url, objectReference } = determineCoverFile({
     comicvine,
     locg,
     rawFileDetails,
   });
+
   const metadataContentPanel = [
     {
       name: "rawFileDetails",
@@ -64,29 +43,48 @@ export const MetadataPanel = (props: MetadataPanelProps): ReactElement => {
             </span>
           </dd>
 
+          {/* Issue number */}
           {inferredMetadata.issue.number && (
             <dd className="my-2">
-              <span className="inline-flex items-center bg-slate-100 dark:bg-slate-400 text-slate-800 dark:text-slate-900 text-xs font-medium px-2 py-1 rounded-md">
-                <i className="icon-[solar--hashtag-bold-duotone] w-4 h-4 mr-1 opacity-70"></i>
-                <span>{inferredMetadata.issue.number}</span>
+              <span className="inline-flex items-center bg-slate-50 text-slate-800 text-xs font-medium px-2 rounded-md dark:text-slate-900 dark:bg-slate-400">
+                <span className="pr-1 pt-1">
+                  <i className="icon-[solar--hashtag-outline] w-3.5 h-3.5"></i>
+                </span>
+                <span className="text-md text-slate-900 dark:text-slate-900">
+                  {inferredMetadata.issue.number}
+                </span>
               </span>
             </dd>
           )}
-
           <dd className="flex flex-row gap-2 w-max">
-            <span className="inline-flex items-center bg-slate-100 dark:bg-slate-400 text-slate-800 dark:text-slate-900 text-xs font-medium px-2 py-1 rounded-md">
-              <i className="icon-[solar--file-text-bold-duotone] w-4 h-4 mr-1 opacity-70" />
-              {rawFileDetails.mimeType}
+            {/* File extension */}
+            <span className="inline-flex items-center bg-slate-50 text-slate-800 text-xs font-medium px-2 rounded-md dark:text-slate-900 dark:bg-slate-400">
+              <span className="pr-1 pt-1">
+                <i className="icon-[solar--zip-file-bold-duotone] w-5 h-5"></i>
+              </span>
+
+              <span className="text-md text-slate-500 dark:text-slate-900">
+                {rawFileDetails.mimeType}
+              </span>
             </span>
 
-            <span className="inline-flex items-center bg-slate-100 dark:bg-slate-400 text-slate-800 dark:text-slate-900 text-xs font-medium px-2 py-1 rounded-md">
-              <i className="icon-[solar--database-bold-duotone] w-4 h-4 mr-1 opacity-70" />
-              {prettyBytes(rawFileDetails.fileSize)}
+            {/* size */}
+            <span className="inline-flex items-center bg-slate-50 text-slate-800 text-xs font-medium px-2 rounded-md dark:text-slate-900 dark:bg-slate-400">
+              <span className="pr-1 pt-1">
+                <i className="icon-[solar--mirror-right-bold-duotone] w-5 h-5"></i>
+              </span>
+
+              <span className="text-md text-slate-500 dark:text-slate-900">
+                {prettyBytes(rawFileDetails.fileSize)}
+              </span>
             </span>
 
+            {/* Uncompressed version available? */}
             {rawFileDetails.archive?.uncompressed && (
               <span className="inline-flex items-center bg-slate-50 text-slate-800 text-xs px-2 rounded-md dark:text-slate-900 dark:bg-slate-400">
-                <i className="icon-[solar--bookmark-bold-duotone] w-3.5 h-3.5 pr-1 pt-1" />
+                <span className="pr-1 pt-1">
+                  <i className="icon-[solar--bookmark-bold-duotone] w-3.5 h-3.5"></i>
+                </span>
               </span>
             )}
           </dd>
@@ -96,56 +94,49 @@ export const MetadataPanel = (props: MetadataPanelProps): ReactElement => {
 
     {
       name: "comicvine",
-      content: () => {
-        return (
-          !isUndefined(comicvine?.volumeInformation) && (
-            <dl className="space-y-1 text-sm text-slate-700 dark:text-slate-200">
-              {/* Title */}
-              <dt className="text-base font-semibold text-slate-900 dark:text-white">
-                {ellipsize(issueName, 28)}
-              </dt>
-
-              {/* Volume Name */}
-              <dd>
-                <span className="text-sm text-slate-600 dark:text-slate-300">
-                  Part of{" "}
-                  <span className="font-medium text-slate-800 dark:text-white">
-                    {comicvine.volumeInformation.name}
-                  </span>
+      content: () =>
+        !isUndefined(comicvine) &&
+        !isUndefined(comicvine.volumeInformation) && (
+          <dl>
+            <dt>
+              <h6
+                className="name has-text-weight-medium mb-1"
+                style={props.titleStyle}
+              >
+                {ellipsize(issueName, 18)}
+              </h6>
+            </dt>
+            <dd>
+              <span className="is-size-7">
+                Is a part of{" "}
+                <span className="has-text-weight-semibold">
+                  {comicvine.volumeInformation.name}
                 </span>
-              </dd>
-
-              {/* Description */}
-              <dd className="text-slate-600 dark:text-slate-300">
+              </span>
+            </dd>
+            <dd className="is-size-7">
+              <span>
                 {ellipsize(
-                  convert(comicvine.description || "", {
-                    baseElements: { selectors: ["p"] },
+                  convert(comicvine.description, {
+                    baseElements: {
+                      selectors: ["p"],
+                    },
                   }),
-                  160,
+                  120,
                 )}
-              </dd>
-
-              {/* Misc Info */}
-              <dd className="flex flex-wrap items-center gap-2 pt-2 text-xs text-slate-500 dark:text-slate-300">
-                <span className="inline-flex items-center bg-slate-100 dark:bg-slate-600 px-2 py-0.5 rounded-md">
-                  <i className="icon-[solar--calendar-bold-duotone] w-4 h-4 mr-1 opacity-70" />
-                  {comicvine.volumeInformation.start_year}
-                </span>
-                <span className="inline-flex items-center bg-slate-100 dark:bg-slate-600 px-2 py-0.5 rounded-md">
-                  <i className="icon-[solar--book-bold-duotone] w-4 h-4 mr-1 opacity-70" />
-                  {comicvine.volumeInformation.count_of_issues} issues
-                </span>
-                <span className="inline-flex items-center bg-slate-100 dark:bg-slate-600 px-2 py-0.5 rounded-md">
-                  <i className="icon-[solar--hashtag-bold-duotone] w-4 h-4 mr-1 opacity-70" />
-                  ID: {comicvine.id}
-                </span>
-              </dd>
-            </dl>
-          )
-        );
-      },
+              </span>
+            </dd>
+            <dd className="is-size-7 mt-2">
+              <span className="my-3 mx-2">
+                {comicvine.volumeInformation.start_year}
+              </span>
+              {comicvine.volumeInformation.count_of_issues}
+              ComicVine ID
+              {comicvine.id}
+            </dd>
+          </dl>
+        ),
     },
-
     {
       name: "locg",
       content: () => (
@@ -156,22 +147,23 @@ export const MetadataPanel = (props: MetadataPanelProps): ReactElement => {
             </h6>
           </dt>
           <dd className="is-size-7">
-            <span>{ellipsize(locg?.description || "", 120)}</span>
+            <span>{ellipsize(locg.description, 120)}</span>
           </dd>
+
           <dd className="is-size-7 mt-2">
             <div className="field is-grouped is-grouped-multiline">
               <div className="control">
                 <span className="tags">
                   <span className="tag is-success is-light has-text-weight-semibold">
-                    {locg?.price}
+                    {locg.price}
                   </span>
-                  <span className="tag is-success is-light">{locg?.pulls}</span>
+                  <span className="tag is-success is-light">{locg.pulls}</span>
                 </span>
               </div>
               <div className="control">
                 <div className="tags has-addons">
                   <span className="tag is-primary is-light">rating</span>
-                  <span className="tag is-info is-light">{locg?.rating}</span>
+                  <span className="tag is-info is-light">{locg.rating}</span>
                 </div>
               </div>
             </div>
@@ -181,19 +173,20 @@ export const MetadataPanel = (props: MetadataPanelProps): ReactElement => {
     },
   ];
 
+  // Find the panel to display
   const metadataPanel = find(metadataContentPanel, {
     name: objectReference,
   });
+
   return (
     <div className="flex gap-5 my-3">
       <Card
         imageUrl={url}
-        orientation="cover-only"
+        orientation={"cover-only"}
         hasDetails={false}
         imageStyle={props.imageStyle}
-        cardContainerStyle={{ width: "190px", maxWidth: "230px" }}
       />
-      <div>{metadataPanel?.content()}</div>
+      <div>{metadataPanel.content()}</div>
     </div>
   );
 };

src/client/components/shared/PopoverButton.tsx

@@ -22,7 +22,7 @@ const PopoverButton = ({ content, clickHandler }) => {
         onFocus={() => setIsVisible(true)}
         onBlur={() => setIsVisible(false)}
         aria-describedby="popover"
-        className="flex text-sm 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-1.5 py-1 text-gray-500 hover:bg-transparent hover:text-green-600 focus:outline-none focus:ring active:text-indigo-500"
+        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-2 py-2 text-gray-500 hover:bg-transparent hover:text-green-600 focus:outline-none focus:ring active:text-indigo-500"
         onClick={clickHandler}
       >
         <i className="icon-[solar--add-square-bold-duotone] w-6 h-6 mr-2"></i>{" "}
@@ -32,7 +32,7 @@ const PopoverButton = ({ content, clickHandler }) => {
         <div
           ref={refs.setFloating} // Apply the floating setter directly to the ref prop
           style={floatingStyles}
-          className="text-xs bg-slate-400 p-1.5 rounded-md"
+          className="text-sm bg-slate-400 p-2 rounded-md"
           role="tooltip"
         >
           {content}

src/client/components/shared/T2Table.tsx

@@ -1,4 +1,5 @@
 import React, { ReactElement, useMemo, useState } from "react";
+import PropTypes from "prop-types";
 import {
   ColumnDef,
   flexRender,
@@ -8,19 +9,7 @@ import {
   PaginationState,
 } from "@tanstack/react-table";
 
-interface T2TableProps {
-  sourceData?: unknown[];
-  totalPages?: number;
-  columns?: unknown[];
-  paginationHandlers?: {
-    nextPage?(...args: unknown[]): unknown;
-    previousPage?(...args: unknown[]): unknown;
-  };
-  rowClickHandler?(...args: unknown[]): unknown;
-  children?: any;
-}
-
-export const T2Table = (tableOptions: T2TableProps): ReactElement => {
+export const T2Table = (tableOptions): ReactElement => {
   const {
     sourceData,
     columns,
@@ -71,7 +60,7 @@ export const T2Table = (tableOptions: T2TableProps): ReactElement => {
     columns,
     manualPagination: true,
     getCoreRowModel: getCoreRowModel(),
-    pageCount: sourceData?.length ?? -1,
+    pageCount: sourceData.length ?? -1,
     state: {
       pagination,
     },
@@ -81,47 +70,42 @@ export const T2Table = (tableOptions: T2TableProps): ReactElement => {
   return (
     <div className="container max-w-fit mx-14">
       <div>
-        <div className="flex flex-row gap-2 justify-between mt-6 mb-4">
+        <div className="flex flex-row gap-2 justify-between mt-7">
           {/* Search bar */}
           {tableOptions.children}
-
-          {/* Pagination controls */}
-          <div className="text-sm text-gray-800 dark:text-slate-200">
-            <div className="mb-1">
-              Page {pageIndex} of {Math.ceil(totalPages / pageSize)}
-            </div>
-            <p className="text-xs text-gray-600 dark:text-slate-400">
-              {totalPages} comics in all
-            </p>
-            <div className="inline-flex flex-row mt-3">
+          {/* pagination controls */}
+          <div>
+            Page {pageIndex} of {Math.ceil(totalPages / pageSize)}
+            <p>{totalPages} comics in all</p>
+            {/* Prev/Next buttons */}
+            <div className="inline-flex flex-row mt-4 mb-4">
               <button
                 onClick={() => goToPreviousPage()}
                 disabled={pageIndex === 1}
-                className="dark:bg-slate-400 bg-gray-300 rounded-l px-2 py-1 border-r border-slate-600"
+                className="dark:bg-slate-500 bg-slate-400 rounded-l border-slate-600 border-r pt-2 px-2"
               >
-                <i className="icon-[solar--arrow-left-linear] h-5 w-5"></i>
+                <i className="icon-[solar--arrow-left-linear] h-6 w-6"></i>
               </button>
               <button
-                className="dark:bg-slate-400 bg-gray-300 rounded-r px-2 py-1"
+                className="dark:bg-slate-500 bg-slate-400 rounded-r pt-2 px-2"
                 onClick={() => goToNextPage()}
                 disabled={pageIndex > Math.floor(totalPages / pageSize)}
               >
-                <i className="icon-[solar--arrow-right-linear] h-5 w-5"></i>
+                <i className="icon-[solar--arrow-right-linear] h-6 w-6"></i>
               </button>
             </div>
           </div>
         </div>
       </div>
-
-      <table className="table-auto w-full text-sm text-gray-900 dark:text-slate-100 border-separate border-spacing-0">
-        <thead className="sticky top-0 bg-white dark:bg-slate-900 z-10 border-b border-gray-300 dark:border-slate-700">
-          {table.getHeaderGroups().map((headerGroup) => (
+      <table className="table-auto overflow-auto">
+        <thead className="sticky top-0 bg-slate-200 dark:bg-slate-500">
+          {table.getHeaderGroups().map((headerGroup, idx) => (
             <tr key={headerGroup.id}>
-              {headerGroup.headers.map((header) => (
+              {headerGroup.headers.map((header, idx) => (
                 <th
                   key={header.id}
                   colSpan={header.colSpan}
-                  className="px-3 py-2 text-[11px] font-semibold tracking-wide uppercase text-left text-gray-500 dark:text-slate-400"
+                  className="px-3 py-3"
                 >
                   {header.isPlaceholder
                     ? null
@@ -136,23 +120,37 @@ export const T2Table = (tableOptions: T2TableProps): ReactElement => {
         </thead>
 
         <tbody>
-          {table.getRowModel().rows.map((row) => (
-            <tr
-              key={row.id}
-              onClick={() => rowClickHandler(row)}
-              className="border-b border-gray-200 dark:border-slate-700 hover:bg-gray-50 dark:hover:bg-slate-800 transition-colors"
-            >
-              {row.getVisibleCells().map((cell) => (
-                <td key={cell.id} className="px-3 py-2 align-top">
-                  {flexRender(cell.column.columnDef.cell, cell.getContext())}
-                </td>
-              ))}
-            </tr>
-          ))}
+          {table.getRowModel().rows.map((row, idx) => {
+            return (
+              <tr key={row.id} onClick={() => rowClickHandler(row)}>
+                {row.getVisibleCells().map((cell) => {
+                  return (
+                    <td key={cell.id} className="align-top">
+                      {flexRender(
+                        cell.column.columnDef.cell,
+                        cell.getContext(),
+                      )}
+                    </td>
+                  );
+                })}
+              </tr>
+            );
+          })}
         </tbody>
       </table>
     </div>
   );
 };
 
+T2Table.propTypes = {
+  sourceData: PropTypes.array,
+  totalPages: PropTypes.number,
+  columns: PropTypes.array,
+  paginationHandlers: PropTypes.shape({
+    nextPage: PropTypes.func,
+    previousPage: PropTypes.func,
+  }),
+  rowClickHandler: PropTypes.func,
+  children: PropTypes.any,
+};
 export default T2Table;

src/client/constants/settings/settingsMenu.json

@@ -9,8 +9,8 @@
         "displayName": "Dashboard"
       },
       {
-        "id": "gen-docker-vars",
-        "displayName": "Docker ENV vars"
+        "id": "gen-gls",
+        "displayName": "Global Search"
       }
     ]
   },

src/client/shared/utils/metadata.utils.ts

@@ -45,8 +45,8 @@ export const determineCoverFile = (data): any => {
   // comicvine
   if (!isEmpty(data.comicvine)) {
     coverFile.comicvine.url = data?.comicvine?.image.small_url;
-    coverFile.comicvine.issueName = data.comicvine?.name;
-    coverFile.comicvine.publisher = data.comicvine?.publisher?.name;
+    coverFile.comicvine.issueName = data.comicvine.name;
+    coverFile.comicvine.publisher = data.comicvine.publisher.name;
   }
   // rawFileDetails
   if (!isEmpty(data.rawFileDetails)) {

src/client/store/index.ts

@@ -1,177 +1,153 @@
 import { create } from "zustand";
-import io, { Socket } from "socket.io-client";
-import { SOCKET_BASE_URI } from "../constants/endpoints";
 import { isNil } from "lodash";
-import { toast } from "react-toastify";
-import "react-toastify/dist/ReactToastify.min.css";
-
-// Type for global state
-interface StoreState {
-  socketInstances: Record<string, Socket>;
-  getSocket: (namespace?: string) => Socket;
-  disconnectSocket: (namespace: string) => void;
-  queryClientRef: { current: any } | null;
-  setQueryClientRef: (ref: any) => void;
-
-  comicvine: {
-    scrapingStatus: string;
-  };
-
-  importJobQueue: {
-    successfulJobCount: number;
-    failedJobCount: number;
-    status: string | undefined;
-    mostRecentImport: string | null;
-
-    setStatus: (status: string) => void;
-    setJobCount: (jobType: string, count: number) => void;
-    setMostRecentImport: (fileName: string) => void;
-  };
-}
-
-export const useStore = create<StoreState>((set, get) => ({
-  socketInstances: {},
-  queryClientRef: null,
-  setQueryClientRef: (ref: any) => set({ queryClientRef: ref }),
-
-  getSocket: (namespace = "/") => {
-    const fullNamespace = namespace === "/" ? "" : namespace;
-    const existing = get().socketInstances[namespace];
-
-    if (existing && existing.connected) return existing;
-
-    const sessionId = localStorage.getItem("sessionId");
-    const socket = io(`${SOCKET_BASE_URI}${fullNamespace}`, {
-      transports: ["websocket"],
-      withCredentials: true,
-      query: { sessionId },
-    });
-
-    socket.on("connect", () => {
-      console.log(`✅ Connected to ${namespace}:`, socket.id);
-    });
-
-    if (sessionId) {
-      socket.emit("call", "socket.resumeSession", { sessionId, namespace });
-    } else {
-      socket.on("sessionInitialized", (id) => {
-        localStorage.setItem("sessionId", id);
-      });
-    }
-
-    socket.on("RESTORE_JOB_COUNTS_AFTER_SESSION_RESTORATION", (data) => {
-      const { completedJobCount, failedJobCount, queueStatus } = data;
-      set((state) => ({
-        importJobQueue: {
-          ...state.importJobQueue,
-          successfulJobCount: completedJobCount,
-          failedJobCount,
-          status: queueStatus,
-        },
-      }));
-    });
-
-    socket.on("LS_COVER_EXTRACTED", ({ completedJobCount, importResult }) => {
-      set((state) => ({
-        importJobQueue: {
-          ...state.importJobQueue,
-          successfulJobCount: completedJobCount,
-          mostRecentImport: importResult.data.rawFileDetails.name,
-        },
-      }));
-    });
-
-    socket.on("LS_COVER_EXTRACTION_FAILED", ({ failedJobCount }) => {
-      set((state) => ({
-        importJobQueue: {
-          ...state.importJobQueue,
-          failedJobCount,
-        },
-      }));
-    });
-
-    socket.on("LS_IMPORT_QUEUE_DRAINED", () => {
-      localStorage.removeItem("sessionId");
-      set((state) => ({
-        importJobQueue: {
-          ...state.importJobQueue,
-          status: "drained",
-        },
-      }));
-      const queryClientRef = get().queryClientRef;
-      if (queryClientRef?.current) {
-        queryClientRef.current.invalidateQueries({ queryKey: ["allImportJobResults"] });
-      }
-    });
-
-    socket.on("CV_SCRAPING_STATUS", (data) => {
-      set((state) => ({
-        comicvine: {
-          ...state.comicvine,
-          scrapingStatus: data.message,
-        },
-      }));
-    });
-
-    socket.on("searchResultsAvailable", (data) => {
-      toast(`Results found for query: ${JSON.stringify(data.query, null, 2)}`);
-    });
-
-    set((state) => ({
-      socketInstances: {
-        ...state.socketInstances,
-        [namespace]: socket,
-      },
-    }));
-
-    return socket;
-  },
-
-  disconnectSocket: (namespace: string) => {
-    const socket = get().socketInstances[namespace];
-    if (socket) {
-      socket.disconnect();
-      set((state) => {
-        const { [namespace]: _, ...rest } = state.socketInstances;
-        return { socketInstances: rest };
-      });
-    }
-  },
+import io from "socket.io-client";
+import { SOCKET_BASE_URI } from "../constants/endpoints";
+import { produce } from "immer";
+import { QueryClient } from "@tanstack/react-query";
 
+/*  Broadly, this file sets up:
+ *    1. The zustand-based global client state
+ *    2. socket.io client
+ */
+export const useStore = create((set, get) => ({
+  // Socket.io state
+  socketIOInstance: {},
+  // ComicVine Scraping status
   comicvine: {
     scrapingStatus: "",
   },
 
+  // Import job queue and associated statuses
   importJobQueue: {
     successfulJobCount: 0,
     failedJobCount: 0,
     status: undefined,
-    mostRecentImport: null,
-
     setStatus: (status: string) =>
-      set((state) => ({
-        importJobQueue: {
-          ...state.importJobQueue,
-          status,
-        },
-      })),
+      set(
+        produce((draftState) => {
+          draftState.importJobQueue.status = status;
+        }),
+      ),
+    setJobCount: (jobType: string, count: Number) => {
+      switch (jobType) {
+        case "successful":
+          set(
+            produce((draftState) => {
+              draftState.importJobQueue.successfulJobCount = count;
+            }),
+          );
+          break;
 
-    setJobCount: (jobType: string, count: number) =>
-      set((state) => ({
-        importJobQueue: {
-          ...state.importJobQueue,
-          ...(jobType === "successful"
-            ? { successfulJobCount: count }
-            : { failedJobCount: count }),
-        },
-      })),
-
-    setMostRecentImport: (fileName: string) =>
-      set((state) => ({
-        importJobQueue: {
-          ...state.importJobQueue,
-          mostRecentImport: fileName,
-        },
-      })),
+        case "failed":
+          set(
+            produce((draftState) => {
+              draftState.importJobQueue.failedJobCount = count;
+            }),
+          );
+          break;
+      }
+    },
+    mostRecentImport: null,
+    setMostRecentImport: (fileName: string) => {
+      set(
+        produce((state) => {
+          state.importJobQueue.mostRecentImport = fileName;
+        }),
+      );
+    },
   },
 }));
+
+const { getState, setState } = useStore;
+const queryClient = new QueryClient();
+
+/** Socket.IO initialization **/
+// 1. Fetch sessionId from localStorage
+const sessionId = localStorage.getItem("sessionId");
+// 2. socket.io instantiation
+const socketIOInstance = io(SOCKET_BASE_URI, {
+  transports: ["websocket"],
+  withCredentials: true,
+  query: { sessionId },
+});
+// 3. Set the instance in global state
+setState({
+  socketIOInstance,
+});
+
+// Socket.io-based session restoration
+if (!isNil(sessionId)) {
+  // 1. Resume the session
+  socketIOInstance.emit(
+    "call",
+    "socket.resumeSession",
+    {
+      sessionId,
+    },
+    (data) => console.log(data),
+  );
+} else {
+  // 1. Inititalize the session and persist the sessionId to localStorage
+  socketIOInstance.on("sessionInitialized", (sessionId) => {
+    localStorage.setItem("sessionId", sessionId);
+  });
+}
+// 2. If a job is in progress, restore the job counts and persist those to global state
+socketIOInstance.on("RESTORE_JOB_COUNTS_AFTER_SESSION_RESTORATION", (data) => {
+  console.log("Active import in progress detected; restoring counts...");
+  const { completedJobCount, failedJobCount, queueStatus } = data;
+  setState((state) => ({
+    importJobQueue: {
+      ...state.importJobQueue,
+      successfulJobCount: completedJobCount,
+      failedJobCount,
+      status: queueStatus,
+    },
+  }));
+});
+
+// 1a.  Act on each comic issue successfully imported/failed, as indicated
+//      by the LS_COVER_EXTRACTED/LS_COVER_EXTRACTION_FAILED events
+socketIOInstance.on("LS_COVER_EXTRACTED", (data) => {
+  const { completedJobCount, importResult } = data;
+  console.log(importResult);
+  setState((state) => ({
+    importJobQueue: {
+      ...state.importJobQueue,
+      successfulJobCount: completedJobCount,
+      mostRecentImport: importResult.data.rawFileDetails.name,
+    },
+  }));
+});
+socketIOInstance.on("LS_COVER_EXTRACTION_FAILED", (data) => {
+  const { failedJobCount } = data;
+  setState((state) => ({
+    importJobQueue: {
+      ...state.importJobQueue,
+      failedJobCount,
+    },
+  }));
+});
+
+// 1b.  Clear the localStorage sessionId upon receiving the
+//      LS_IMPORT_QUEUE_DRAINED event
+socketIOInstance.on("LS_IMPORT_QUEUE_DRAINED", (data) => {
+  localStorage.removeItem("sessionId");
+  setState((state) => ({
+    importJobQueue: {
+      ...state.importJobQueue,
+      status: "drained",
+    },
+  }));
+  queryClient.invalidateQueries({ queryKey: ["allImportJobResults"] });
+});
+
+// ComicVine Scraping status
+socketIOInstance.on("CV_SCRAPING_STATUS", (data) => {
+  setState((state) => ({
+    comicvine: {
+      ...state.comicvine,
+      scrapingStatus: data.message,
+    },
+  }));
+});