📆 Wired up the datepicker to LoCG pull list

.gitignore

@@ -4,6 +4,7 @@ comics/
 docs/
 userdata/
 dist/
+storybook-static/*
 src/client/assets/scss/App.css
 /server/
 node_modules/

package.json

@@ -1,7 +1,7 @@
 {
   "name": "threetwo",
-  "version": "0.0.2",
+  "version": "0.1.0",
-  "description": "ThreeTwo! A comic book curator.",
+  "description": "ThreeTwo! A good comic book curator.",
   "main": "server/index.js",
   "typings": "server/index.js",
   "scripts": {
@@ -19,7 +19,7 @@
     "@dnd-kit/sortable": "^7.0.2",
     "@dnd-kit/utilities": "^3.2.1",
     "@fortawesome/fontawesome-free": "^6.3.0",
-    "@redux-devtools/extension": "^3.2.5",
+    "@popperjs/core": "^2.11.8",
     "@rollup/plugin-node-resolve": "^15.0.1",
     "@tanstack/react-query": "^5.0.5",
     "@tanstack/react-table": "^8.9.3",
@@ -38,10 +38,12 @@
     "filename-parser": "^1.0.2",
     "final-form": "^4.20.2",
     "final-form-arrays": "^3.0.2",
+    "focus-trap-react": "^10.2.3",
     "history": "^5.3.0",
     "html-to-text": "^8.1.0",
     "immer": "^10.0.3",
     "jsdoc": "^3.6.10",
+    "keen-slider": "^6.8.6",
     "lodash": "^4.17.21",
     "pretty-bytes": "^5.6.0",
     "prop-types": "^15.8.1",
@@ -49,23 +51,21 @@
     "react": "^18.2.0",
     "react-collapsible": "^2.9.0",
     "react-comic-viewer": "^0.4.0",
-    "react-day-picker": "^8.6.0",
+    "react-day-picker": "^8.10.0",
     "react-dom": "^18.2.0",
     "react-fast-compare": "^3.2.0",
     "react-final-form": "^6.5.9",
     "react-final-form-arrays": "^3.1.4",
     "react-loader-spinner": "^4.0.0",
-    "react-masonry-css": "^1.0.16",
     "react-modal": "^3.15.1",
+    "react-popper": "^2.3.0",
     "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-stickynode": "^4.1.0",
     "react-textarea-autosize": "^8.3.4",
     "reapop": "^4.2.1",
-    "slick-carousel": "^1.8.1",
     "socket.io-client": "^4.3.2",
     "styled-components": "^6.1.0",
     "threetwo-ui-typings": "^1.0.14",
@@ -119,8 +119,11 @@
     "rimraf": "^4.1.3",
     "sass": "^1.69.5",
     "storybook": "^7.3.2",
-    "tailwindcss": "^3.3.5",
+    "tailwindcss": "^3.4.1",
     "tui-jsdoc-template": "^1.2.2",
     "typescript": "^5.1.6"
+  },
+  "resolutions": {
+    "jackspeak": "2.1.1"
   }
 }

src/client/components/ComicDetail/AcquisitionPanel.tsx

@@ -8,7 +8,7 @@ import { difference } from "../../shared/utils/object.utils";
 import { isEmpty, isNil, map } from "lodash";
 import { useStore } from "../../store";
 import { useShallow } from "zustand/react/shallow";
-import { useQuery } from "@tanstack/react-query";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
 import axios from "axios";
 
 interface IAcquisitionPanelProps {
@@ -57,6 +57,7 @@ export const AcquisitionPanel = (
   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
@@ -133,7 +134,6 @@ export const AcquisitionPanel = (
           );
           setAirDCPPSearchInstance(currentInstance);
           setAirDCPPSearchInfo(searchInfo);
-          console.log("Asdas", airDCPPSearchInfo);
           if (currentInstance.result_count === 0) {
             // ...nothing was received, show an informative message to the user
             console.log("No more search results.");
@@ -198,6 +198,8 @@ export const AcquisitionPanel = (
             type,
           },
         });
+        console.log(bundleDBImportResult?.data);
+        queryClient.invalidateQueries({ queryKey: ["comicBookMetadata"] });
 
         //         dispatch({
         //           type: AIRDCPP_RESULT_DOWNLOAD_INITIATED,
@@ -228,41 +230,9 @@ export const AcquisitionPanel = (
     search(manualQuery, airDCPPSocketInstance);
   };
 
-  // download via AirDC++
-  const downloadDCPPResult = useCallback(
-    (searchInstanceId, resultId, name, size, type) => {
-      // dispatch(
-      //   downloadAirDCPPItem(
-      //     searchInstanceId,
-      //     resultId,
-      //     props.comicObjectId,
-      //     name,
-      //     size,
-      //     type,
-      //     airDCPPConfiguration.airDCPPState.socket,
-      //     {
-      //       username: `${airDCPPConfiguration.airDCPPState.settings.directConnect.client.host.username}`,
-      //       password: `${airDCPPConfiguration.airDCPPState.settings.directConnect.client.host.password}`,
-      //     },
-      //   ),
-      // );
-      // this is to update the download count badge on the downloads tab
-      // dispatch(
-      //   getBundlesForComic(
-      //     props.comicObjectId,
-      //     airDCPPConfiguration.airDCPPState.socket,
-      //     {
-      //       username: `${airDCPPConfiguration.airDCPPState.settings.directConnect.client.host.username}`,
-      //       password: `${airDCPPConfiguration.airDCPPState.settings.directConnect.client.host.password}`,
-      //     },
-      //   ),
-      // );
-    },
-    [],
-  );
   return (
     <>
-      <div className="comic-detail columns">
+      <div className="mt-5">
         {!isEmpty(airDCPPSocketInstance) ? (
           <Form
             onSubmit={getDCPPSearchResults}
@@ -270,44 +240,40 @@ export const AcquisitionPanel = (
               issueName,
             }}
             render={({ handleSubmit, form, submitting, pristine, values }) => (
-              <form
+              <form onSubmit={handleSubmit}>
-                onSubmit={handleSubmit}
+                <Field name="issueName">
-                className="column is-three-quarters"
+                  {({ input, meta }) => {
-              >
+                    return (
-                <div className="box search">
+                      <div className="max-w-fit">
-                  <div className="columns">
+                        <div className="flex flex-row bg-slate-300 dark:bg-slate-400 rounded-l-lg">
-                    <Field name="issueName">
+                          <div className="w-10 pl-2 pt-1 text-gray-400 dark:text-gray-200">
-                      {({ input, meta }) => {
+                            <i className="icon-[solar--magnifer-bold-duotone] h-7 w-7" />
-                        return (
-                          <div className="column is-two-thirds">
-                            <input
-                              {...input}
-                              className="input main-search-bar is-medium"
-                              placeholder="Type an issue/volume name"
-                            />
-                            <span className="help is-clearfix is-light is-info"></span>
                           </div>
-                        );
+                          <input
-                      }}
+                            {...input}
-                    </Field>
+                            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"
+                          />
 
-                    <div className="column">
+                          <button
-                      <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"
-                        type="submit"
+                            type="submit"
-                        className={
+                          >
-                          airDCPPSearchStatus
+                            <div className="flex flex-row">
-                            ? "button is-loading is-warning"
+                              Search DC++
-                            : "button is-success is-light"
+                              <div className="h-5 w-5 ml-2">
-                        }
+                                <img
-                      >
+                                  src="/src/client/assets/img/airdcpp_logo.svg"
-                        <span className="icon is-small">
+                                  className="h-5 w-5"
-                          <img src="/src/client/assets/img/airdcpp_logo.svg" />
+                                />
-                        </span>
+                              </div>
-                        <span className="airdcpp-text">Search on AirDC++</span>
+                            </div>
-                      </button>
+                          </button>
-                    </div>
+                        </div>
-                  </div>
+                      </div>
-                </div>
+                    );
+                  }}
+                </Field>
               </form>
             )}
           />
@@ -327,52 +293,45 @@ export const AcquisitionPanel = (
       {!isNil(airDCPPSearchInstance) &&
         !isEmpty(airDCPPSearchInfo) &&
         !isNil(hubs) && (
-          <div className="columns">
+          <div className="flex flex-row gap-3 my-5 font-hasklig">
-            <div className="column is-one-quarter is-size-7">
+            <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">
-              <div className="card">
+              <dl>
-                <div className="card-content">
+                <dt>
-                  <dl>
+                  <div className="mb-1">
-                    <dt>
+                    {hubs.map((value, idx) => (
-                      <div className="tags mb-1">
+                      <span className="tag is-warning" key={idx}>
-                        {hubs.map((value, idx) => (
+                        {value.identity.name}
-                          <span className="tag is-warning" key={idx}>
-                            {value.identity.name}
-                          </span>
-                        ))}
-                      </div>
-                    </dt>
-                    <dt>
-                      Query:
-                      <span className="has-text-weight-semibold">
-                        {airDCPPSearchInfo.query.pattern}
                       </span>
-                    </dt>
+                    ))}
-                    <dd>
+                  </div>
-                      Extensions:
+                </dt>
-                      <span className="has-text-weight-semibold">
+
-                        {airDCPPSearchInfo.query.extensions.join(", ")}
+                <dt>
-                      </span>
+                  Query:
-                    </dd>
+                  <span className="has-text-weight-semibold">
-                    <dd>
+                    {airDCPPSearchInfo.query.pattern}
-                      File type:
+                  </span>
-                      <span className="has-text-weight-semibold">
+                </dt>
-                        {airDCPPSearchInfo.query.file_type}
+                <dd>
-                      </span>
+                  Extensions:
-                    </dd>
+                  <span className="has-text-weight-semibold">
-                  </dl>
+                    {airDCPPSearchInfo.query.extensions.join(", ")}
-                </div>
+                  </span>
-              </div>
+                </dd>
+                <dd>
+                  File type:
+                  <span className="has-text-weight-semibold">
+                    {airDCPPSearchInfo.query.file_type}
+                  </span>
+                </dd>
+              </dl>
             </div>
-            <div className="column is-one-quarter is-size-7">
+            <div className="block max-w-sm p-6 h-fit text-sm bg-white border border-gray-200 rounded-lg shadow dark:bg-slate-400 dark:border-gray-700">
-              <div className="card">
+              <dl>
-                <div className="card-content">
+                <dt>Search Instance: {airDCPPSearchInstance.id}</dt>
-                  <dl>
+                <dt>Owned by {airDCPPSearchInstance.owner}</dt>
-                    <dt>Search Instance: {airDCPPSearchInstance.id}</dt>
+                <dd>Expires in: {airDCPPSearchInstance.expires_in}</dd>
-                    <dt>Owned by {airDCPPSearchInstance.owner}</dt>
+              </dl>
-                    <dd>Expires in: {airDCPPSearchInstance.expires_in}</dd>
-                  </dl>
-                </div>
-              </div>
             </div>
           </div>
         )}
@@ -380,26 +339,36 @@ export const AcquisitionPanel = (
       {/* AirDC++ results */}
       <div className="columns">
         {!isNil(airDCPPSearchResults) && !isEmpty(airDCPPSearchResults) ? (
-          <div className="column">
+          <div className="overflow-x-auto w-fit mt-4 rounded-lg border border-gray-200 dark:border-gray-500">
-            <table className="table">
+            <table className="min-w-full divide-y-2 divide-gray-200 dark:divide-gray-500 text-md">
               <thead>
                 <tr>
-                  <th>Name</th>
+                  <th className="whitespace-nowrap px-2 py-2 font-medium text-gray-900 dark:text-slate-200">
-                  <th>Type</th>
+                    Name
-                  <th>Slots</th>
+                  </th>
-                  <th>Actions</th>
+                  <th className="whitespace-nowrap py-2 font-medium text-gray-900 dark:text-slate-200">
+                    Type
+                  </th>
+                  <th className="whitespace-nowrap py-2 font-medium text-gray-900 dark:text-slate-200">
+                    Slots
+                  </th>
+                  <th className="whitespace-nowrap py-2 font-medium text-gray-900 dark:text-slate-200">
+                    Actions
+                  </th>
                 </tr>
               </thead>
-              <tbody>
+              <tbody className="divide-y divide-slate-100 dark:divide-gray-500">
                 {map(airDCPPSearchResults, ({ result }, idx) => {
                   return (
                     <tr
                       key={idx}
                       className={
-                        !isNil(result.dupe) ? "dupe-search-result" : ""
+                        !isNil(result.dupe)
+                          ? "bg-gray-100 dark:bg-gray-700"
+                          : "w-fit text-sm"
                       }
                     >
-                      <td>
+                      <td className="whitespace-nowrap px-3 py-3 text-gray-700 dark:text-slate-300">
                         <p className="mb-2">
                           {result.type.id === "directory" ? (
                             <i className="fas fa-folder"></i>
@@ -409,16 +378,39 @@ export const AcquisitionPanel = (
 
                         <dl>
                           <dd>
-                            <div className="tags">
+                            <div className="inline-flex flex-row gap-2">
                               {!isNil(result.dupe) ? (
-                                <span className="tag is-warning">Dupe</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--copy-bold-duotone] w-5 h-5"></i>
+                                  </span>
+
+                                  <span className="text-md text-slate-500 dark:text-slate-900">
+                                    Dupe
+                                  </span>
+                                </span>
                               ) : null}
-                              <span className="tag is-light is-info">
+
-                                {result.users.user.nicks}
+                              {/* 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>
+                              {/* Flags */}
                               {result.users.user.flags.map((flag, idx) => (
-                                <span className="tag is-light" key={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">
-                                  {flag}
+                                  <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>
@@ -426,25 +418,32 @@ export const AcquisitionPanel = (
                         </dl>
                       </td>
                       <td>
-                        <span className="tag is-light is-info">
+                        {/* Extension */}
-                          {result.type.id === "directory"
+                        <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">
-                            ? "directory"
+                          <span className="pr-1 pt-1">
-                            : result.type.str}
+                            <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">
+                            {result.type.str}
+                          </span>
                         </span>
                       </td>
-                      <td>
+                      <td className="px-2">
-                        <div className="tags has-addons">
+                        {/* Slots */}
-                          <span className="tag is-success">
+                        <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">
-                            {result.slots.free} free
+                          <span className="pr-1 pt-1">
+                            <i className="icon-[solar--settings-minimalistic-bold-duotone] w-5 h-5"></i>
                           </span>
-                          <span className="tag is-light">
+
-                            {result.slots.total}
+                          <span className="text-md text-slate-500 dark:text-slate-900">
+                            {result.slots.total} slots; {result.slots.free} free
                           </span>
-                        </div>
+                        </span>
                       </td>
-                      <td>
+                      <td className="px-2">
                         <button
-                          className="button is-small is-light is-success"
+                          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,
@@ -457,10 +456,10 @@ export const AcquisitionPanel = (
                             )
                           }
                         >
-                          <span className="icon">
+                          <span className="text-xs">Download</span>
-                            <i className="fas fa-file-download"></i>
+                          <span className="w-5 h-5">
+                            <i className="h-5 w-5 icon-[solar--download-bold-duotone]"></i>
                           </span>
-                          <span>Download </span>
                         </button>
                       </td>
                     </tr>
@@ -470,25 +469,28 @@ export const AcquisitionPanel = (
             </table>
           </div>
         ) : (
-          <div className="column is-three-fifths">
+          <div className="">
-            <article className="message is-info">
+            <article
-              <div className="message-body is-size-6 is-family-secondary">
+              role="alert"
-                <p>
+              className="mt-4 rounded-lg text-sm 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"
-                  The default search term is an auto-detected title; you may
+            >
-                  need to change it to get better matches if the auto-detected
+              <div>
-                  one doesn't work.
+                The default search term is an auto-detected title; you may need
-                </p>
+                to change it to get better matches if the auto-detected one
+                doesn't work.
               </div>
             </article>
 
-            <article className="message is-warning">
+            <article
-              <div className="message-body is-size-6 is-family-secondary">
+              role="alert"
-                <p className="content">
+              className="mt-4 rounded-lg text-sm 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"
-                  Searching via <strong>AirDC++</strong> is still in
+            >
-                  <strong>alpha</strong>. Some searches may take arbitrarily
+              <div>
-                  long, or may not work at all. Searches from <code>ADCS</code>
+                Searching via <strong>AirDC++</strong> is still in{" "}
-                  hubs are more reliable than <code>NMDCS</code> ones.
+                <strong>alpha</strong>. Some searches may take arbitrarily long,
-                </p>
+                or may not work at all. Searches from{" "}
+                <code className="font-hasklig">ADCS</code> hubs are more
+                reliable than <code className="font-hasklig">NMDCS</code> ones.
               </div>
             </article>
           </div>

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

@@ -1,94 +1,23 @@
-import { filter, isEmpty, isNil, isUndefined } from "lodash";
+import React, { ReactElement } from "react";
-import React, { ReactElement, useCallback } from "react";
+import Select from "react-select";
-import Select, { components } from "react-select";
-import { fetchComicVineMatches } from "../../../actions/fileops.actions";
-import { refineQuery } from "filename-parser";
 
 export const Menu = (props): ReactElement => {
-  const { data } = props;
+  const {
-  const { setSlidingPanelContentId, setVisible } = props.handlers;
+    filteredActionOptions,
-  const openDrawerWithCVMatches = useCallback(() => {
+    customStyles,
-    let seriesSearchQuery: IComicVineSearchQuery = {} as IComicVineSearchQuery;
+    handleActionSelection,
-    let issueSearchQuery: IComicVineSearchQuery = {} as IComicVineSearchQuery;
+    Placeholder,
-
+  } = props.configuration;
-    if (!isUndefined(data.rawFileDetails)) {
-      issueSearchQuery = refineQuery(data.rawFileDetails.name);
-    } else if (!isEmpty(data.sourcedMetadata)) {
-      issueSearchQuery = refineQuery(data.sourcedMetadata.comicvine.name);
-    }
-    // dispatch(fetchComicVineMatches(data, issueSearchQuery, seriesSearchQuery));
-    setSlidingPanelContentId("CVMatches");
-    setVisible(true);
-  }, [data]);
-
-  const openEditMetadataPanel = useCallback(() => {
-    setSlidingPanelContentId("editComicBookMetadata");
-    setVisible(true);
-  }, []);
-  //  Actions menu options and handler
-  const CVMatchLabel = (
-    <span>
-      <i className="fa-solid fa-wand-magic"></i> Match on ComicVine
-    </span>
-  );
-  const editLabel = (
-    <span>
-      <i className="fa-regular fa-pen-to-square"></i> Edit Metadata
-    </span>
-  );
-  const deleteLabel = (
-    <span>
-      <i className="fa-regular fa-trash-alt"></i> Delete Comic
-    </span>
-  );
-  const Placeholder = (props) => {
-    return <components.Placeholder {...props} />;
-  };
-  const actionOptions = [
-    { value: "match-on-comic-vine", label: CVMatchLabel },
-    { value: "edit-metdata", label: editLabel },
-    { value: "delete-comic", label: deleteLabel },
-  ];
-
-  const filteredActionOptions = filter(actionOptions, (item) => {
-    if (isUndefined(data.rawFileDetails)) {
-      return item.value !== "match-on-comic-vine";
-    }
-    return item;
-  });
-  const handleActionSelection = (action) => {
-    switch (action.value) {
-      case "match-on-comic-vine":
-        openDrawerWithCVMatches();
-        break;
-      case "edit-metdata":
-        openEditMetadataPanel();
-        break;
-      default:
-        console.log("No valid action selected.");
-        break;
-    }
-  };
-  const customStyles = {
-    option: (base, { data, isDisabled, isFocused, isSelected }) => {
-      return {
-        ...base,
-        backgroundColor: isFocused ? "gray" : "black",
-      };
-    },
-    control: (base) => ({
-      ...base,
-      backgroundColor: "black",
-      border: "1px solid #CCC",
-    }),
-  };
 
   return (
     <Select
       components={{ Placeholder }}
       placeholder={
-        <span>
+        <span className="inline-flex flex-row items-center gap-2 pt-1">
-          <i className="fa-solid fa-list"></i> Actions
+          <div className="w-6 h-6">
+            <i className="icon-[solar--cursor-bold-duotone] w-6 h-6"></i>
+          </div>
+          <div>Select An Action</div>
         </span>
       }
       styles={customStyles}

src/client/components/ComicDetail/ComicDetail.tsx

@@ -15,7 +15,8 @@ import AcquisitionPanel from "./AcquisitionPanel";
 import DownloadsPanel from "./DownloadsPanel";
 import { VolumeInformation } from "./Tabs/VolumeInformation";
 
-import { isEmpty, isUndefined, isNil } from "lodash";
+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";
@@ -27,6 +28,10 @@ import ComicViewer from "react-comic-viewer";
 
 import { extractComicArchive } from "../../actions/fileops.actions";
 import { determineCoverFile } from "../../shared/utils/metadata.utils";
+import axios from "axios";
+import { styled } from "styled-components";
+import { COMICVINE_SERVICE_URI } from "../../constants/endpoints";
+import { refineQuery } from "filename-parser";
 
 type ComicDetailProps = {};
 /**
@@ -56,20 +61,8 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => {
   const [visible, setVisible] = useState(false);
   const [slidingPanelContentId, setSlidingPanelContentId] = useState("");
   const [modalIsOpen, setIsOpen] = useState(false);
+  const [comicVineMatches, setComicVineMatches] = useState([]);
 
-  //   const comicVineSearchResults = useSelector(
-  //     (state: RootState) => state.comicInfo.searchResults,
-  //   );
-  //   const comicVineSearchQueryObject = useSelector(
-  //     (state: RootState) => state.comicInfo.searchQuery,
-  //   );
-  //   const comicVineAPICallProgress = useSelector(
-  //     (state: RootState) => state.comicInfo.inProgress,
-  //   );
-  //
-  //   const extractedComicBook = useSelector(
-  //     (state: RootState) => state.fileOps.extractedComicBookArchive.reading,
-  //   );
   const { comicObjectId } = useParams<{ comicObjectId: string }>();
 
   // const dispatch = useDispatch();
@@ -87,6 +80,10 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => {
     // );
   }, []);
 
+  // overridden <SlidingPanel> with some styles
+  const StyledSlidingPanel = styled(SlidingPane)`
+    background: #ccc;
+  `;
   const afterOpenModal = useCallback((things) => {
     // references are now sync'd and can be accessed.
     // subtitle.style.color = "#f00";
@@ -102,57 +99,183 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => {
     CVMatches: {
       content: (props) => (
         <>
-          {/* <div className="card search-criteria-card">
+          <div>
-            <div className="card-content">
+            <ComicVineSearchForm data={rawFileDetails} />
-              <ComicVineSearchForm data={rawFileDetails} />
-            </div>
           </div>
-          <p className="is-size-5 mt-3 mb-2 ml-3">Searching for:</p>
+
-          {inferredMetadata.issue ? (
+          <div className="border-slate-500 border rounded-lg p-2 mt-3">
-            <div className="ml-3">
+            <p className="">Searching for:</p>
-              <span className="tag mr-3">{inferredMetadata.issue.name} </span>
+            {inferredMetadata.issue ? (
-              <span className="tag"> # {inferredMetadata.issue.number} </span>
+              <>
-            </div>
+                <span className="">{inferredMetadata.issue.name} </span>
-          ) : null}
+                <span className=""> # {inferredMetadata.issue.number} </span>
-          {!comicVineAPICallProgress ? (
+              </>
-            <ComicVineMatchPanel
+            ) : null}
-              props={{
+          </div>
-                comicVineSearchQueryObject,
+          <ComicVineMatchPanel
-                comicVineAPICallProgress,
+            props={{
-                comicVineSearchResults,
+              comicVineMatches,
-                comicObjectId,
+              comicObjectId,
-              }}
+            }}
-            />
+          />
-          ) : (
-            <div className="progress-indicator-container">
-              <div className="indicator">
-                <Loader
-                  type="MutatingDots"
-                  color="#CCC"
-                  secondaryColor="#999"
-                  height={100}
-                  width={100}
-                  visible={comicVineAPICallProgress}
-                />
-              </div>
-            </div>
-          )} */}
         </>
       ),
     },
 
     editComicBookMetadata: {
-      content: () => <EditMetadataPanel />,
+      content: () => <EditMetadataPanel data={rawFileDetails} />,
     },
   };
 
+  // Actions
+
+  const fetchComicVineMatches = async (
+    searchPayload,
+    issueSearchQuery,
+    seriesSearchQuery,
+  ) => {
+    try {
+      const response = await axios({
+        url: `${COMICVINE_SERVICE_URI}/volumeBasedSearch`,
+        method: "POST",
+        data: {
+          format: "json",
+          // hack
+          query: issueSearchQuery.inferredIssueDetails.name
+            .replace(/[^a-zA-Z0-9 ]/g, "")
+            .trim(),
+          limit: "100",
+          page: 1,
+          resources: "volume",
+          scorerConfiguration: {
+            searchParams: issueSearchQuery.inferredIssueDetails,
+          },
+          rawFileDetails: searchPayload,
+        },
+        transformResponse: (r) => {
+          const matches = JSON.parse(r);
+          return matches;
+          // return sortBy(matches, (match) => -match.score);
+        },
+      });
+      let matches: any = [];
+      if (!isNil(response.data.results) && response.data.results.length === 1) {
+        matches = response.data.results;
+      } else {
+        matches = response.data.map((match) => match);
+      }
+      const scoredMatches = matches.sort((a, b) => b.score - a.score);
+      setComicVineMatches(scoredMatches);
+    } catch (err) {
+      console.log(err);
+    }
+  };
+
+  // Action event handlers
+  const openDrawerWithCVMatches = () => {
+    let seriesSearchQuery: IComicVineSearchQuery = {} as IComicVineSearchQuery;
+    let issueSearchQuery: IComicVineSearchQuery = {} as IComicVineSearchQuery;
+
+    if (!isUndefined(rawFileDetails)) {
+      issueSearchQuery = refineQuery(rawFileDetails.name);
+    } else if (!isEmpty(comicvine)) {
+      issueSearchQuery = refineQuery(comicvine.name);
+    }
+    fetchComicVineMatches(rawFileDetails, issueSearchQuery, seriesSearchQuery);
+    setSlidingPanelContentId("CVMatches");
+    setVisible(true);
+  };
+
+  const openEditMetadataPanel = useCallback(() => {
+    setSlidingPanelContentId("editComicBookMetadata");
+    setVisible(true);
+  }, []);
+
+  //  Actions menu options and handler
+  const CVMatchLabel = (
+    <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>Match on ComicVine</div>
+    </span>
+  );
+  const editLabel = (
+    <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>Edit Metadata</div>
+    </span>
+  );
+  const deleteLabel = (
+    <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>Delete Comic</div>
+    </span>
+  );
+  const Placeholder = (props) => {
+    return <components.Placeholder {...props} />;
+  };
+  const actionOptions = [
+    { value: "match-on-comic-vine", label: CVMatchLabel },
+    { value: "edit-metdata", label: editLabel },
+    { value: "delete-comic", label: deleteLabel },
+  ];
+
+  const filteredActionOptions = filter(actionOptions, (item) => {
+    if (isUndefined(rawFileDetails)) {
+      return item.value !== "match-on-comic-vine";
+    }
+    return item;
+  });
+  const handleActionSelection = (action) => {
+    switch (action.value) {
+      case "match-on-comic-vine":
+        openDrawerWithCVMatches();
+        break;
+      case "edit-metdata":
+        openEditMetadataPanel();
+        break;
+      default:
+        console.log("No valid action selected.");
+        break;
+    }
+  };
+  const customStyles = {
+    menu: (base) => ({
+      ...base,
+      backgroundColor: "rgb(156, 163, 175)",
+    }),
+    placeholder: (base) => ({
+      ...base,
+      color: "black",
+    }),
+    option: (base, { data, isDisabled, isFocused, isSelected }) => ({
+      ...base,
+      backgroundColor: isFocused ? "gray" : "rgb(156, 163, 175)",
+    }),
+    singleValue: (base) => ({
+      ...base,
+      paddingTop: "0.4rem",
+    }),
+    control: (base) => ({
+      ...base,
+      backgroundColor: "rgb(156, 163, 175)",
+      color: "black",
+      border: "1px solid rgb(156, 163, 175)",
+    }),
+  };
+
   // check for the availability of CV metadata
   const isComicBookMetadataAvailable =
     !isUndefined(comicvine) && !isUndefined(comicvine.volumeInformation);
 
   // check for the availability of rawFileDetails
   const areRawFileDetailsAvailable =
-    !isUndefined(rawFileDetails) && !isEmpty(rawFileDetails.cover);
+    !isUndefined(rawFileDetails) && !isEmpty(rawFileDetails);
 
   const { issueName, url } = determineCoverFile({
     rawFileDetails,
@@ -172,7 +295,9 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => {
     {
       id: 1,
       name: "Volume Information",
-      icon: <i className="fa-solid fa-layer-group"></i>,
+      icon: (
+        <i className="h-5 w-5 icon-[solar--book-2-bold] text-slate-500 dark:text-slate-300"></i>
+      ),
       content: isComicBookMetadataAvailable ? (
         <VolumeInformation data={data.data} key={1} />
       ) : null,
@@ -181,28 +306,30 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => {
     {
       id: 2,
       name: "ComicInfo.xml",
-      icon: <i className="fa-solid fa-code"></i>,
+      icon: (
+        <i className="h-5 w-5 icon-[solar--code-file-bold-duotone] text-slate-500 dark:text-slate-300" />
+      ),
       content: (
-        <div className="columns" key={2}>
+        <div key={2}>
-          <div className="column is-three-quarters">
+          {!isNil(comicInfo) && <ComicInfoXML json={comicInfo} />}
-            {!isNil(comicInfo) && <ComicInfoXML json={comicInfo} />}
-          </div>
         </div>
       ),
       shouldShow: !isEmpty(comicInfo),
     },
     {
       id: 3,
-      icon: <i className="fa-regular fa-file-archive"></i>,
+      icon: (
+        <i className="h-5 w-5 icon-[solar--winrar-bold-duotone] text-slate-500 dark:text-slate-300" />
+      ),
       name: "Archive Operations",
-      content: <></>,
+      content: <ArchiveOperations data={data.data} key={3} />,
-      /*
-      <ArchiveOperations data={data.data} key={3} /> */
       shouldShow: areRawFileDetailsAvailable,
     },
     {
       id: 4,
-      icon: <i className="fa-solid fa-circle-nodes"></i>,
+      icon: (
+        <i className="h-5 w-5 icon-[solar--folder-path-connect-bold-duotone] text-slate-500 dark:text-slate-300" />
+      ),
       name: "DC++ Search",
       content: (
         <AcquisitionPanel
@@ -217,26 +344,32 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => {
     },
     {
       id: 5,
-      icon: <i className="fa-solid fa-droplet"></i>,
+      icon: (
+        <span className="inline-flex flex-row">
+          <i className="h-5 w-5 icon-[solar--magnet-bold-duotone] text-slate-500 dark:text-slate-300" />
+        </span>
+      ),
       name: "Torrent Search",
       content: <>Torrents</>,
       shouldShow: true,
     },
     {
       id: 6,
-      icon: null,
+      name: "Downloads",
-      name: !isEmpty(data.data) ? (
+      icon: <>{acquisition?.directconnect?.downloads?.length}</>,
-        <span className="download-tab-name">Downloads</span>
+      content:
-      ) : (
+        !isNil(data.data) && !isEmpty(data.data) ? (
-        "Downloads"
+          <DownloadsPanel key={5} />
-      ),
+        ) : (
-      content: !isNil(data.data) && !isEmpty(data.data) && (
+          <div className="column is-three-fifths">
-        <DownloadsPanel
+            <article className="message is-info">
-          data={data.data.acquisition.directconnect}
+              <div className="message-body is-size-6 is-family-secondary">
-          comicObjectId={comicObjectId}
+                AirDC++ is not configured. Please configure it in{" "}
-          key={5}
+                <code>Settings</code>.
-        />
+              </div>
-      ),
+            </article>
+          </div>
+        ),
       shouldShow: true,
     },
   ];
@@ -271,7 +404,21 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => {
                           created_at: createdAt,
                           updated_at: updatedAt,
                         }}
-                      />
+                      >
+                        {/* action dropdown */}
+                        <div className="mt-1 flex flex-row gap-2 w-full">
+                          <Menu
+                            data={data.data}
+                            handlers={{ setSlidingPanelContentId, setVisible }}
+                            configuration={{
+                              filteredActionOptions,
+                              customStyles,
+                              handleActionSelection,
+                              Placeholder,
+                            }}
+                          />
+                        </div>
+                      </RawFileDetails>
 
                       {/* <Modal
                       style={{ content: { marginTop: "2rem" } }}
@@ -293,22 +440,15 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => {
                     </Modal> */}
                     </div>
                   )}
-                {/* action dropdown */}
-                {/* <div className="mt-4 is-size-7">
-                  <Menu
-                    data={data.data}
-                    handlers={{ setSlidingPanelContentId, setVisible }}
-                  />
-                </div> */}
               </div>
             </div>
 
             <TabControls
               filteredTabs={filteredTabs}
-              acquisition={acquisition}
+              downloadCount={acquisition?.directconnect?.downloads?.length}
             />
 
-            <SlidingPane
+            <StyledSlidingPanel
               isOpen={visible}
               onRequestClose={() => setVisible(false)}
               title={"Comic Vine Search Matches"}
@@ -316,7 +456,7 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => {
             >
               {slidingPanelContentId !== "" &&
                 contentForSlidingPanel[slidingPanelContentId].content()}
-            </SlidingPane>
+            </StyledSlidingPanel>
           </>
         )}
       </div>

src/client/components/ComicDetail/ComicDetailContainer.tsx

@@ -14,7 +14,7 @@ export const ComicDetailContainer = (): ReactElement | null => {
     isLoading,
     isError,
   } = useQuery({
-    queryKey: [],
+    queryKey: ["comicBookMetadata"],
     queryFn: async () =>
       await axios({
         url: `${LIBRARY_SERVICE_BASE_URI}/getComicBookById`,
@@ -24,11 +24,6 @@ export const ComicDetailContainer = (): ReactElement | null => {
         },
       }),
   });
-  console.log(comicBookDetailData);
-  useEffect(() => {
-    // dispatch(getComicBookDetailById(comicObjectId));
-    // dispatch(getSettings());
-  }, []);
 
   {
     isError && <>Error</>;

src/client/components/ComicDetail/ComicVineDetails.tsx

@@ -2,105 +2,105 @@ import React, { ReactElement } from "react";
 import PropTypes from "prop-types";
 import { detectIssueTypes } from "../../shared/utils/tradepaperback.utils";
 import dayjs from "dayjs";
-import { isUndefined } from "lodash";
+import { isEmpty, isUndefined } from "lodash";
 import Card from "../shared/Carda";
+import { convert } from "html-to-text";
+
 export const ComicVineDetails = (props): ReactElement => {
   const { data, updatedAt } = props;
   return (
-    <div className="column is-half">
+    <div className="text-slate-500 dark:text-gray-400">
-      <div className="comic-detail comicvine-metadata">
+      <div className="">
-        <dl>
+        <div>
-          <dt>ComicVine Metadata</dt>
+          <div className="flex flex-row gap-4">
-          <dd className="is-size-7">
+            <div className="min-w-fit">
-            Last scraped on {dayjs(updatedAt).format("MMM D YYYY [at] h:mm a")}
+              <Card
-          </dd>
+                imageUrl={data.volumeInformation.image.thumb_url}
-
+                orientation={"vertical-2"}
-          <dd>
+                hasDetails={false}
-            <div className="columns mt-2">
+                // cardContainerStyle={{ maxWidth: 200 }}
-              <div className="column is-2">
+              />
-                <Card
+            </div>
-                  imageUrl={data.volumeInformation.image.thumb_url}
+            <div className="flex flex-col gap-5">
-                  orientation={"vertical"}
+              <div className="flex flex-row">
-                  hasDetails={false}
+                <div>
-                  // cardContainerStyle={{ maxWidth: 200 }}
+                  {/* Title */}
-                />
+                  <div>
-              </div>
+                    <div className="text-lg">{data.name}</div>
-              <div className="column is-10">
+                    <div className="text-sm">
-                <dl>
+                      Is a part of{" "}
-                  <dt>
+                      <span className="has-text-info">
-                    <h6 className="has-text-weight-bold mb-2">{data.name}</h6>
+                        {data.volumeInformation.name}
-                  </dt>
+                      </span>
-                  <dd>
-                    Is a part of{" "}
-                    <span className="has-text-info">
-                      {data.volumeInformation.name}
-                    </span>
-                  </dd>
-
-                  <dd>
-                    Published by
-                    <span className="has-text-weight-semibold">
-                      {" "}
-                      {data.volumeInformation.publisher.name}
-                    </span>
-                  </dd>
-                  <dd>
-                    Total issues in this volume:
-                    {data.volumeInformation.count_of_issues}
-                  </dd>
-
-                  <dd>
-                    <div className="field is-grouped mt-2">
-                      {data.issue_number && (
-                        <div className="control">
-                          <div className="tags has-addons">
-                            <span className="tag is-light">Issue Number</span>
-                            <span className="tag is-warning">
-                              {data.issue_number}
-                            </span>
-                          </div>
-                        </div>
-                      )}
-                      {!isUndefined(
-                        detectIssueTypes(data.volumeInformation.description),
-                      ) ? (
-                        <div className="control">
-                          <div className="tags has-addons">
-                            <span className="tag is-light">Detected Type</span>
-                            <span className="tag is-warning">
-                              {
-                                detectIssueTypes(
-                                  data.volumeInformation.description,
-                                ).displayName
-                              }
-                            </span>
-                          </div>
-                        </div>
-                      ) : data.resource_type ? (
-                        <div className="control">
-                          <div className="tags has-addons">
-                            <span className="tag is-light">Type</span>
-                            <span className="tag is-warning">
-                              {data.resource_type}
-                            </span>
-                          </div>
-                        </div>
-                      ) : null}
-                      <div className="control">
-                        <div className="tags has-addons">
-                          <span className="tag is-light">
-                            ComicVine Issue ID
-                          </span>
-                          <span className="tag is-success">{data.id}</span>
-                        </div>
-                      </div>
                     </div>
-                  </dd>
+                  </div>
-                </dl>
+
+                  {/* Comicvine metadata */}
+                  <div className="mt-2">
+                    <div className="text-md">ComicVine Metadata</div>
+                    <div className="text-sm">
+                      Last scraped on{" "}
+                      {dayjs(updatedAt).format("MMM D YYYY [at] h:mm a")}
+                    </div>
+                    <div className="text-sm">
+                      ComicVine Issue ID
+                      <span>{data.id}</span>
+                    </div>
+                  </div>
+                </div>
+
+                {/* Publisher details */}
+                <div className="ml-8">
+                  Published by{" "}
+                  <span>{data.volumeInformation.publisher.name}</span>
+                  <div>
+                    Total issues in this volume{" "}
+                    <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="text-md text-slate-900 dark:text-slate-900">
+                        {data.volumeInformation.count_of_issues}
+                      </span>
+                    </span>
+                  </div>
+                  <div>
+                    {data.issue_number && (
+                      <div className="">
+                        <span>Issue Number</span>
+                        <span>{data.issue_number}</span>
+                      </div>
+                    )}
+                    {!isUndefined(
+                      detectIssueTypes(data.volumeInformation.description),
+                    ) ? (
+                      <div>
+                        <span>Detected Type</span>
+                        <span>
+                          {
+                            detectIssueTypes(data.volumeInformation.description)
+                              .displayName
+                          }
+                        </span>
+                      </div>
+                    ) : data.resource_type ? (
+                      <div>
+                        <span>Type</span>
+                        <span>{data.resource_type}</span>
+                      </div>
+                    ) : null}
+                  </div>
+                </div>
+              </div>
+              {/* Description */}
+              <div className="mt-3 w-3/4">
+                {!isEmpty(data.description) &&
+                  convert(data.description, {
+                    baseElements: {
+                      selectors: ["p"],
+                    },
+                  })}
               </div>
             </div>
-          </dd>
+          </div>
-        </dl>
+        </div>
       </div>
     </div>
   );

src/client/components/ComicDetail/ComicVineMatchPanel.tsx

@@ -2,22 +2,41 @@ import React, { ReactElement } from "react";
 import { ComicVineSearchForm } from "../ComicVineSearchForm";
 import MatchResult from "./MatchResult";
 import { isEmpty } from "lodash";
+import { useStore } from "../../store";
+import { useShallow } from "zustand/react/shallow";
 
 export const ComicVineMatchPanel = (comicVineData): ReactElement => {
-  const {
+  const { comicObjectId, comicVineMatches } = comicVineData.props;
-    comicObjectId,
+  const { comicvine } = useStore(
-    comicVineSearchQueryObject,
+    useShallow((state) => ({
-    comicVineAPICallProgress,
+      comicvine: state.comicvine,
-    comicVineSearchResults,
+    })),
-  } = comicVineData.props;
+  );
   return (
     <>
-      <div className="search-results-container">
+      <div>
-        {!isEmpty(comicVineSearchResults) && (
+        {!isEmpty(comicVineMatches) ? (
           <MatchResult
-            matchData={comicVineSearchResults}
+            matchData={comicVineMatches}
             comicObjectId={comicObjectId}
           />
+        ) : (
+          <>
+            <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 text-sm"
+            >
+              <div>
+                <p>ComicVine match results are an approximation.</p>
+                <p>
+                  Auto-matching is not available yet. If you see no results or
+                  poor quality ones, you can override the search query
+                  parameters to get better ones.
+                </p>
+              </div>
+            </article>
+            <div className="text-md my-5">{comicvine.scrapingStatus}</div>
+          </>
         )}
       </div>
     </>

src/client/components/ComicDetail/ComicVineSearchForm.tsx

@@ -34,83 +34,55 @@ export const ComicVineSearchForm = (data) => {
       validate={validate}
       render={({ handleSubmit }) => (
         <form onSubmit={handleSubmit}>
-          <span className="field is-normal">
+          <span className="flex items-center">
-            <label className="label mb-2 is-size-5">Search Manually</label>
+            <span className="text-md text-slate-500 dark:text-slate-500 pr-5">
+              Override Search Query
+            </span>
+            <span className="h-px flex-1 bg-slate-200 dark:bg-slate-400"></span>
           </span>
-          <div className="field is-horizontal">
+          <label className="block py-1">Issue Name</label>
-            <div className="field-body">
+          <Field name="issueName">
-              <div className="field">
+            {(props) => (
-                <Field name="issueName">
+              <input
-                  {(props) => (
+                {...props.input}
-                    <p className="control is-expanded has-icons-left">
+                className="appearance-none dark:bg-slate-100 bg-slate-100 h-10 w-full rounded-md border-none text-gray-700 dark:text-slate-200 py-1 pr-7 pl-3 sm:text-md sm:leading-5 focus:outline-none focus:shadow-outline-blue focus:border-blue-300"
-                      <input
+                placeholder="Type the issue name"
-                        {...props.input}
+              />
-                        className="input is-normal"
+            )}
-                        placeholder="Type the issue name"
+          </Field>
-                      />
+          <div className="flex flex-row gap-4">
-                      <span className="icon is-small is-left">
+            <div>
-                        <i className="fas fa-journal-whills"></i>
+              <label className="block py-1">Number</label>
-                      </span>
+              <Field name="issueNumber">
-                    </p>
+                {(props) => (
-                  )}
+                  <input
-                </Field>
+                    {...props.input}
-              </div>
+                    className="appearance-none dark:bg-slate-100 bg-slate-100 h-10 w-14 rounded-md border-none text-gray-700 dark:text-slate-200 py-1 pr-7 pl-3 sm:text-md sm:leading-5 focus:outline-none focus:shadow-outline-blue focus:border-blue-300"
+                    placeholder="#"
+                  />
+                )}
+              </Field>
             </div>
-          </div>
+            <div>
-
+              <label className="block py-1">Year</label>
-          <div className="field is-horizontal">
+              <Field name="issueYear">
-            <div className="field-body">
+                {(props) => (
-              <div className="field">
+                  <input
-                <Field name="issueNumber">
+                    {...props.input}
-                  {(props) => (
+                    className="appearance-none dark:bg-slate-100 bg-slate-100 h-10 w-20 rounded-md border-none text-gray-700 dark:text-slate-200 py-1 pr-7 pl-3 sm:text-md sm:leading-5 focus:outline-none focus:shadow-outline-blue focus:border-blue-300"
-                    <p className="control has-icons-left">
+                    placeholder="1984"
-                      <input
+                  />
-                        {...props.input}
+                )}
-                        className="input is-normal"
+              </Field>
-                        placeholder="Type the issue number"
-                      />
-                      <span className="icon is-small is-left">
-                        <i className="fas fa-hashtag"></i>
-                      </span>
-                    </p>
-                  )}
-                </Field>
-              </div>
-
-              <div className="field">
-                <Field name="issueYear">
-                  {(props) => (
-                    <p className="control has-icons-left">
-                      <input
-                        {...props.input}
-                        className="input is-normal"
-                        placeholder="Type the issue year"
-                      />
-                      <span className="icon is-small is-left">
-                        <i className="fas fa-hashtag"></i>
-                      </span>
-                    </p>
-                  )}
-                </Field>
-              </div>
             </div>
-          </div>
 
-          <div className="field is-horizontal">
+            <div className="flex justify-end mt-5">
-            <div className="field-body">
+              <button
-              <div className="field">
+                type="submit"
-                <div className="control">
+                className="flex h-10 sm:mt-3 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-red-600 focus:outline-none focus:ring active:text-indigo-500"
-                  <button
+              >
-                    type="submit"
+                Search
-                    className="button is-success is-light is-outlined is-small"
+              </button>
-                  >
-                    <span className="icon">
-                      <i className="fas fa-search"></i>
-                    </span>
-                    <span>Search</span>
-                  </button>
-                </div>
-              </div>
             </div>
           </div>
         </form>

src/client/components/ComicDetail/DownloadsPanel.tsx

@@ -1,73 +1,103 @@
-import React, { useEffect, useContext, ReactElement } from "react";
+import React, { useEffect, useContext, ReactElement, useState } from "react";
-import { getBundlesForComic } from "../../actions/airdcpp.actions";
 import { RootState } from "threetwo-ui-typings";
-import { isEmpty, isNil, map } from "lodash";
+import { isEmpty, map } from "lodash";
 import prettyBytes from "pretty-bytes";
 import dayjs from "dayjs";
 import ellipsize from "ellipsize";
+import { useQuery } from "@tanstack/react-query";
+import axios from "axios";
+import { LIBRARY_SERVICE_BASE_URI } from "../../constants/endpoints";
+import { useStore } from "../../store";
+import { useShallow } from "zustand/react/shallow";
+import { useParams } from "react-router-dom";
 
 interface IDownloadsPanelProps {
-  data: any;
+  key: number;
-  comicObjectId: string;
 }
 
 export const DownloadsPanel = (
   props: IDownloadsPanelProps,
 ): ReactElement | null => {
-  //   const bundles = useSelector((state: RootState) => {
+  const { comicObjectId } = useParams<{ comicObjectId: string }>();
-  //     return state.airdcpp.bundles;
+  const [bundles, setBundles] = useState([]);
-  //   });
+  const { airDCPPSocketInstance } = useStore(
-  //
+    useShallow((state) => ({
-  //   // AirDCPP Socket initialization
+      airDCPPSocketInstance: state.airDCPPSocketInstance,
-  //   const userSettings = useSelector((state: RootState) => state.settings.data);
+    })),
-  //   const airDCPPConfiguration = useContext(AirDCPPSocketContext);
+  );
-
-  const {
-    airDCPPState: { socket, settings },
-  } = airDCPPConfiguration;
 
   // Fetch the downloaded files and currently-downloading file(s) from AirDC++
-  useEffect(() => {
+  const { data: comicObject, isSuccess } = useQuery({
-    try {
+    queryKey: ["bundles"],
-      if (!isEmpty(userSettings)) {
+    queryFn: async () =>
-        // dispatch(
+      await axios({
-        //   getBundlesForComic(props.comicObjectId, socket, {
+        url: `${LIBRARY_SERVICE_BASE_URI}/getComicBookById`,
-        //     username: `${settings.directConnect.client.host.username}`,
+        method: "POST",
-        //     password: `${settings.directConnect.client.host.password}`,
+        headers: {
-        //   }),
+          "Content-Type": "application/json; charset=utf-8",
-        // );
+        },
-      }
+        data: {
-    } catch (error) {
+          id: `${comicObjectId}`,
-      throw new Error(error);
+        },
+      }),
+  });
+
+  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);
     }
-  }, [airDCPPConfiguration]);
+  };
+
+  useEffect(() => {
+    getBundles(comicObject).then((result) => {
+      setBundles(result);
+    });
+  }, [comicObject]);
 
   const Bundles = (props) => {
-    return !isEmpty(props.data) ? (
+    return (
-      <div className="column is-full">
+      <div className="overflow-x-auto w-fit mt-4 rounded-lg border border-gray-200">
-        <table className="table is-striped">
+        <table className="min-w-full divide-y-2 divide-gray-200 dark:divide-gray-200 text-md">
           <thead>
             <tr>
-              <th>Filename</th>
+              <th className="whitespace-nowrap px-4 py-2 font-medium text-gray-900 dark:text-slate-200">
-              <th>Size</th>
+                Filename
-              <th>Download Time</th>
+              </th>
-              <th>Bundle ID</th>
+              <th className="whitespace-nowrap px-4 py-2 font-medium text-gray-900 dark:text-slate-200">
+                Size
+              </th>
+              <th className="whitespace-nowrap px-4 py-2 font-medium text-gray-900 dark:text-slate-200">
+                Download Time
+              </th>
+              <th className="whitespace-nowrap px-4 py-2 font-medium text-gray-900 dark:text-slate-200">
+                Bundle ID
+              </th>
             </tr>
           </thead>
-          <tbody>
+          <tbody className="divide-y divide-gray-200">
             {map(props.data, (bundle) => (
-              <tr key={bundle.id}>
+              <tr key={bundle.id} className="text-sm">
-                <td>
+                <td className="whitespace-nowrap px-2 py-2 text-gray-700 dark:text-slate-300">
                   <h5>{ellipsize(bundle.name, 58)}</h5>
-                  <span className="is-size-7">{bundle.target}</span>
+                  <span className="text-xs">
+                    {ellipsize(bundle.target, 88)}
+                  </span>
                 </td>
-                <td>{prettyBytes(bundle.size)}</td>
+                <td className="whitespace-nowrap px-2 py-2 text-gray-700 dark:text-slate-300">
-                <td>
+                  {prettyBytes(bundle.size)}
+                </td>
+                <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>
+                <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>
@@ -75,29 +105,15 @@ export const DownloadsPanel = (
           </tbody>
         </table>
       </div>
-    ) : (
-      <div className="column is-full"> {"No Downloads Found"} </div>
     );
   };
 
-  return !isNil(props.data) ? (
+  return (
-    <>
+    <div className="columns is-multiline">
-      <div className="columns is-multiline">
+      {!isEmpty(airDCPPSocketInstance) && !isEmpty(bundles) && (
-        {!isEmpty(socket) ? (
+        <Bundles data={bundles} />
-          <Bundles data={bundles} />
+      )}
-        ) : (
+    </div>
-          <div className="column is-three-fifths">
+  );
-            <article className="message is-info">
-              <div className="message-body is-size-6 is-family-secondary">
-                AirDC++ is not configured. Please configure it in{" "}
-                <code>Settings</code>.
-              </div>
-            </article>
-          </div>
-        )}
-      </div>
-    </>
-  ) : null;
 };
-
 export default DownloadsPanel;

src/client/components/ComicDetail/EditMetadataPanel.tsx

@@ -9,6 +9,8 @@ export const EditMetadataPanel = (props): ReactElement => {
   const validate = async () => {};
   const onSubmit = async () => {};
 
+  const { data } = props;
+
   const AsyncSelectPaginateAdapter = ({ input, ...rest }) => {
     return (
       <AsyncSelectPaginate
@@ -56,90 +58,59 @@ export const EditMetadataPanel = (props): ReactElement => {
                 <label className="label">Issue Details</label>
               </div>
               <div className="field-body">
-                <div className="field">
+                <Field
-                  <p className="control is-expanded has-icons-left">
+                  name="issue_name"
-                    <Field
+                  component="input"
-                      name="issue_name"
+                  className="appearance-none w-full dark:bg-slate-400 bg-slate-100 h-10 rounded-md border-none text-gray-700 dark:text-slate-200 py-1 pr-7 pl-3 sm:text-md sm:leading-5 focus:outline-none focus:shadow-outline-blue focus:border-blue-300"
-                      component="input"
+                  initialValue={data.name}
-                      className="input"
+                  placeholder={"Issue Name"}
-                      initialValue={rawFileDetails}
+                />
-                      placeholder={"Issue Name"}
-                    />
-                    <span className="icon is-small is-left">
-                      <i className="fa-solid fa-user-ninja"></i>
-                    </span>
-                  </p>
-                </div>
               </div>
             </div>
             {/* Issue Number and year */}
-            <div className="field is-horizontal">
+            <div className="mt-4 flex flex-row gap-2">
-              <div className="field-label"></div>
+              <div>
-              <div className="field-body">
+                <div className="text-sm">Issue Number</div>
-                <div className="field">
+                <Field
-                  <p className="control has-icons-left">
+                  name="issue_number"
-                    <Field
+                  component="input"
-                      name="issue_number"
+                  className="dark:bg-slate-400 w-20 bg-slate-100 py-2 px-2 rounded-md border-gray-300 h-10 dark:text-slate-200 sm:text-md sm:leading-5 focus:outline-none focus:shadow-outline-blue focus:border-blue-300"
-                      component="input"
+                  placeholder="Issue Number"
-                      className="input"
+                />
-                      placeholder="Issue Number"
+                <p className="text-xs">Do not enter the first zero</p>
-                    />
+              </div>
-                    <span className="icon is-small is-left">
+              <div>
-                      <i className="fa-solid fa-hashtag"></i>
-                    </span>
-                  </p>
-                  <p className="help">Do not enter the first zero</p>
-                </div>
                 {/* year */}
-                <div className="field">
+                <div className="text-sm">Issue Year</div>
-                  <p className="control">
+                <Field
-                    <Field
+                  name="issue_year"
-                      name="issue_year"
+                  component="input"
-                      component="input"
+                  className="dark:bg-slate-400 w-20 bg-slate-100 py-2 px-2 rounded-md border-gray-300 h-10 dark:text-slate-200 sm:text-md sm:leading-5 focus:outline-none focus:shadow-outline-blue focus:border-blue-300"
-                      className="input"
+                />
-                    />
+              </div>
-                  </p>
+
-                </div>
+              <div>
+                <div className="text-sm">Page Count</div>
+                <Field
+                  name="page_count"
+                  component="input"
+                  className="dark:bg-slate-400 w-20 bg-slate-100 py-2 px-2 rounded-md border-gray-300 h-10 dark:text-slate-200 sm:text-md sm:leading-5 focus:outline-none focus:shadow-outline-blue focus:border-blue-300"
+                  placeholder="Page Count"
+                />
               </div>
             </div>
 
             {/* page count */}
-            <div className="field is-horizontal">
-              <div className="field-label"></div>
-              <div className="field-body">
-                <div className="field">
-                  <p className="control has-icons-left">
-                    <Field
-                      name="page_count"
-                      component="input"
-                      className="input"
-                      placeholder="Page Count"
-                    />
-                    <span className="icon is-small is-left">
-                      <i className="fa-solid fa-note-sticky"></i>
-                    </span>
-                  </p>
-                </div>
-              </div>
-            </div>
 
             {/* Description */}
-            <div className="field is-horizontal">
+            <div className="mt-2">
-              <div className="field-label is-normal">
+              <label className="text-sm">Description</label>
-                <label className="label">Description</label>
+              <Field
-              </div>
+                name={"description"}
-              <div className="field-body">
+                className="dark:bg-slate-400 w-full min-h-24 bg-slate-100 py-2 px-2 rounded-md border-gray-300 h-10 dark:text-slate-200 sm:text-md sm:leading-5 focus:outline-none focus:shadow-outline-blue focus:border-blue-300"
-                <div className="field">
+                component={TextareaAutosizeAdapter}
-                  <p className="control is-expanded has-icons-left">
+                placeholder={"Description"}
-                    <Field
+              />
-                      name={"description"}
-                      className="textarea"
-                      component={TextareaAutosizeAdapter}
-                      placeholder={"Description"}
-                    />
-                  </p>
-                </div>
-              </div>
             </div>
 
             <hr size="1" />

src/client/components/ComicDetail/MatchResult.tsx

@@ -1,8 +1,9 @@
-import React, { useCallback } from "react";
+import React from "react";
 import { isNil, map } from "lodash";
-import { applyComicVineMatch } from "../../actions/comicinfo.actions";
 import { convert } from "html-to-text";
 import ellipsize from "ellipsize";
+import { LIBRARY_SERVICE_BASE_URI } from "../../constants/endpoints";
+import axios from "axios";
 
 interface MatchResultProps {
   matchData: any;
@@ -14,14 +15,24 @@ const handleBrokenImage = (e) => {
 };
 
 export const MatchResult = (props: MatchResultProps) => {
-  const applyCVMatch = useCallback(
+  const applyCVMatch = async (match, comicObjectId) => {
-    // (match, comicObjectId) => {
+    return await axios.request({
-    //   dispatch(applyComicVineMatch(match, comicObjectId));
+      url: `${LIBRARY_SERVICE_BASE_URI}/applyComicVineMetadata`,
-    // },
+      method: "POST",
-    [],
+      data: {
-  );
+        match,
+        comicObjectId,
+      },
+    });
+  };
   return (
     <>
+      <span className="flex items-center mt-6">
+        <span className="text-md text-slate-500 dark:text-slate-500 pr-5">
+          ComicVine Matches
+        </span>
+        <span className="h-px flex-1 bg-slate-200 dark:bg-slate-400"></span>
+      </span>
       {map(props.matchData, (match, idx) => {
         let issueDescription = "";
         if (!isNil(match.description)) {
@@ -31,88 +42,90 @@ export const MatchResult = (props: MatchResultProps) => {
             },
           });
         }
+        const bestMatchCSSClass = idx === 0 ? "bg-green-100" : "bg-slate-300";
         return (
-          <div className="search-result mb-4" key={idx}>
+          <div className={`${bestMatchCSSClass} my-5 p-4 rounded-lg`} key={idx}>
-            <div className="columns">
+            <div className="flex flex-row gap-4">
-              <div className="column is-one-fifth">
+              <div className="min-w-fit">
                 <img
-                  className="cover-image"
+                  className="rounded-md"
                   src={match.image.thumb_url}
                   onError={handleBrokenImage}
                 />
               </div>
+              <div>
+                <div className="flex flex-row mb-1 justify-end">
+                  {match.name ? (
+                    <p className="text-md w-full">{match.name}</p>
+                  ) : null}
 
-              <div className="search-result-details column">
+                  {/* score */}
-                <div className="is-size-5">{match.name}</div>
+                  <span className="inline-flex h-fit w-fit items-center bg-green-50 text-sm text-slate-800 font-medium px-2 rounded-md dark:text-slate-900 dark:bg-green-400">
-
+                    <span className="pr-1 pt-1">
-                <div className="field is-grouped is-grouped-multiline mt-1">
+                      <i className="icon-[solar--course-up-line-duotone] w-4 h-4"></i>
-                  <div className="control">
+                    </span>
-                    <div className="tags has-addons">
+                    <span className="text-slate-900 dark:text-slate-900">
-                      <span className="tag">Number</span>
+                      {parseInt(match.score, 10)}
-                      <span className="tag is-primary">
+                    </span>
-                        {match.issue_number}
+                  </span>
-                      </span>
-                    </div>
-                  </div>
-                  <div className="control">
-                    <div className="tags has-addons">
-                      <span className="tag">Cover Date</span>
-                      <span className="tag is-warning">{match.cover_date}</span>
-                    </div>
-                  </div>
                 </div>
-                <div className="is-size-7">
+                <span className="flex flex-row gap-2 mb-2">
+                  <span className="inline-flex items-center bg-slate-50 text-sm text-slate-800 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-4 h-4"></i>
+                    </span>
+                    <span className="text-slate-900 dark:text-slate-900">
+                      {parseInt(match.issue_number, 10)}
+                    </span>
+                  </span>
+                  <span className="inline-flex items-center bg-slate-50 text-slate-800 text-sm font-medium px-2 rounded-md dark:text-slate-900 dark:bg-slate-400">
+                    <span className="pr-1 pt-1">
+                      <i className="icon-[solar--calendar-mark-bold-duotone] w-5 h-5"></i>
+                    </span>
+                    <span className="text-slate-900 dark:text-slate-900">
+                      Cover Date: {match.cover_date}
+                    </span>
+                  </span>
+                </span>
+                <div className="text-sm">
                   {ellipsize(issueDescription, 300)}
                 </div>
               </div>
             </div>
 
-            <div className="vertical-line"></div>
+            <div className="flex flex-row gap-2 my-4 ml-10">
-
+              <div className="">
-            <div className="columns ml-6 volume-information">
-              <div className="column is-one-fifth">
                 <img
                   src={match.volumeInformation.results.image.icon_url}
-                  className="cover-image"
+                  className="rounded-md w-full"
                   onError={handleBrokenImage}
                 />
               </div>
 
-              <div className="column">
+              <div className="">
-                <div className="is-size-6">{match.volume.name}</div>
+                <span>{match.volume.name}</span>
-                <div className="field is-grouped is-grouped-multiline mt-2">
+                <div className="text-sm">
-                  <div className="control">
+                  <p>
-                    <div className="tags has-addons">
+                    Total Issues:
-                      <span className="tag">Total Issues</span>
+                    {match.volumeInformation.results.count_of_issues}
-                      <span className="tag is-warning">
+                  </p>
-                        {match.volumeInformation.results.count_of_issues}
+                  <p>
-                      </span>
+                    Published by{" "}
-                    </div>
+                    {match.volumeInformation.results.publisher.name}
-                  </div>
+                  </p>
-
-                  <div className="control">
-                    <div className="tags has-addons">
-                      <span className="tag">Publisher</span>
-                      <span className="tag is-warning">
-                        {match.volumeInformation.results.publisher.name}
-                      </span>
-                    </div>
-                  </div>
                 </div>
               </div>
             </div>
-            <div className="columns">
+            <div className="flex justify-end">
-              <div className="column">
+              <button
-                <button
+                className="flex space-x-1 sm:mt-0 sm:flex-row sm:items-center rounded-lg border border-green-400 dark:border-green-200 bg-green-200 px-3 py-1 text-gray-500 hover:bg-transparent hover:text-green-600 focus:outline-none focus:ring active:text-indigo-500"
-                  className="button is-normal is-outlined is-primary is-light is-pulled-right"
+                onClick={() => applyCVMatch(match, props.comicObjectId)}
-                  onClick={() => applyCVMatch(match, props.comicObjectId)}
+              >
-                >
+                <span className="text-md">Apply Match</span>
-                  <span className="icon is-size-5">
+                <span className="w-5 h-5">
-                    <i className="fas fa-clipboard-check"></i>
+                  <i className="h-5 w-5 icon-[solar--magic-stick-3-bold-duotone]"></i>
-                  </span>
+                </span>
-                  <span>Apply Match</span>
+              </button>
-                </button>
-              </div>
             </div>
           </div>
         );

src/client/components/ComicDetail/RawFileDetails.tsx

@@ -7,22 +7,21 @@ import { format, parseISO } from "date-fns";
 export const RawFileDetails = (props): ReactElement => {
   const { rawFileDetails, inferredMetadata, created_at, updated_at } =
     props.data;
-  const PaperClipIcon = () => <></>;
   return (
     <>
       <div className="max-w-2xl ml-5">
         <div className="px-4 sm:px-6">
-          <p className="text-gray-500">
+          <p className="text-gray-500 dark:text-gray-400">
             <span className="text-xl">{rawFileDetails.name}</span>
           </p>
         </div>
         <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">
+              <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">
+              <dd className="mt-1 text-sm text-gray-900 dark:text-gray-400">
                 {rawFileDetails.containedIn +
                   "/" +
                   rawFileDetails.name +
@@ -30,10 +29,10 @@ export const RawFileDetails = (props): ReactElement => {
               </dd>
             </div>
             <div className="sm:col-span-1">
-              <dt className="text-sm font-medium text-gray-500">
+              <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">
+              <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">
@@ -43,8 +42,10 @@ export const RawFileDetails = (props): ReactElement => {
               </dd>
             </div>
             <div className="sm:col-span-1">
-              <dt className="text-sm font-medium text-gray-500">MIMEType</dt>
+              <dt className="text-sm font-medium text-gray-500 dark:text-gray-400">
-              <dd className="mt-1 text-sm text-gray-900">
+                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="pr-1 pt-1">
@@ -56,11 +57,12 @@ export const RawFileDetails = (props): ReactElement => {
                   </span>
                 </span>
               </dd>
-              <dd className="text-sm text-gray-900"></dd>
             </div>
             <div className="sm:col-span-1">
-              <dt className="text-sm font-medium text-gray-500">File Size</dt>
+              <dt className="text-sm font-medium text-gray-500 dark:text-gray-400">
-              <dd className="mt-1 text-sm text-gray-900">
+                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">
@@ -74,62 +76,19 @@ export const RawFileDetails = (props): ReactElement => {
               </dd>
             </div>
             <div className="sm:col-span-2">
-              <dt className="text-sm font-medium text-gray-500">
+              <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">
+              <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">Attachments</dt>
+              <dt className="text-sm font-medium text-gray-500 dark:text-gray-400">
-              <dd className="mt-1 text-sm text-gray-900">
+                Actions
-                <ul
+              </dt>
-                  role="list"
+              <dd className="mt-1 text-sm text-gray-900">{props.children}</dd>
-                  className="divide-y divide-gray-200 rounded-md border border-gray-200"
-                >
-                  <li className="flex items-center justify-between py-3 pl-3 pr-4 text-sm">
-                    <div className="flex w-0 flex-1 items-center">
-                      <PaperClipIcon
-                        className="h-5 w-5 flex-shrink-0 text-gray-400"
-                        aria-hidden="true"
-                      />
-                      <span className="ml-2 w-0 flex-1 truncate">
-                        resume_back_end_developer.pdf
-                      </span>
-                    </div>
-                    <div className="ml-4 flex-shrink-0">
-                      <a
-                        href="#"
-                        className="font-medium text-indigo-600 hover:text-indigo-500"
-                      >
-                        Download
-                      </a>
-                    </div>
-                  </li>
-                  <li className="flex items-center justify-between py-3 pl-3 pr-4 text-sm">
-                    <div className="flex w-0 flex-1 items-center">
-                      {/* Read comic button */}
-                      <button
-                        className="button is-success is-light"
-                        onClick={() => {}}
-                      >
-                        <i className="fa-solid fa-book-open mr-2"></i>
-                        Read
-                      </button>
-                    </div>
-                    <div className="ml-4 flex-shrink-0">
-                      <a
-                        href="#"
-                        className="font-medium text-indigo-600 hover:text-indigo-500"
-                      >
-                        Download
-                      </a>
-                    </div>
-                  </li>
-                </ul>
-              </dd>
             </div>
           </dl>
         </div>
@@ -164,4 +123,5 @@ RawFileDetails.propTypes = {
     created_at: PropTypes.string,
     updated_at: PropTypes.string,
   }),
+  children: PropTypes.any,
 };

src/client/components/ComicDetail/TabControls.tsx

@@ -1,43 +1,45 @@
 import React, { ReactElement, useEffect, useState } from "react";
-import { isEmpty, isNil } from "lodash";
+import { isNil } from "lodash";
 
 export const TabControls = (props): ReactElement => {
   // const comicBookDetailData = useSelector(
   //   (state: RootState) => state.comicInfo.comicBookDetail,
   // );
-  const { filteredTabs, acquisition } = props;
+  const { filteredTabs, downloadCount } = props;
   const [active, setActive] = useState(filteredTabs[0].id);
-  useEffect(() => {
+  // useEffect(() => {
-    setActive(filteredTabs[0].id);
+  //   setActive(filteredTabs[0].id);
-  }, [acquisition]);
+  // }, [filteredTabs]);
 
   return (
     <>
-      <div className="hidden sm:block mt-7">
+      <div className="hidden sm:block mt-7 mb-3 w-fit">
         <div className="border-b border-gray-200">
-          <nav className="-mb-px flex gap-6" aria-label="Tabs">
+          <nav className="flex gap-6" aria-label="Tabs">
             {filteredTabs.map(({ id, name, icon }) => (
               <a
                 key={id}
-                className="inline-flex shrink-0 items-center gap-2 border-b-2 border-transparent px-1 pb-4 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700"
+                className="inline-flex shrink-0 items-center gap-2 border-b border-transparent px-1 py-1 text-md font-medium text-gray-500 dark:text-gray-400 hover:border-gray-300 hover:text-gray-700"
                 aria-current="page"
                 onClick={() => setActive(id)}
               >
                 {/* Downloads tab and count badge */}
-                {/* <a>
+                <>
-                {id === 6 && !isNil(acquisition.directconnect) ? (
+                  {id === 6 && !isNil(downloadCount) ? (
-                  <span className="download-icon-labels">
+                    <span className="inline-flex flex-row">
-                    <i className="fa-solid fa-download"></i>
+                      {/* download count */}
-                    <span className="tag downloads-count is-info is-light">
+                      <span className="inline-flex mx-2 items-center bg-slate-200 text-slate-800 text-xs font-medium px-2 rounded-md dark:text-slate-900 dark:bg-slate-400">
-                      {acquisition.directconnect.downloads.length}
+                        <span className="text-md text-slate-500 dark:text-slate-900">
+                          {icon}
+                        </span>
+                      </span>
+                      <i className="h-5 w-5 icon-[solar--download-bold-duotone] text-slate-500 dark:text-slate-300" />
                     </span>
-                  </span>
+                  ) : (
-                ) : (
+                    <span className="w-5 h-5">{icon}</span>
-                  <span className="icon is-small">{icon}</span>
+                  )}
-                )}
+                  {name}
-                {name}
+                </>
-              </a> */}
-                {name}
               </a>
             ))}
           </nav>

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

@@ -1,42 +1,130 @@
-import React, { ReactElement, useCallback, useState } from "react";
+import React, { ReactElement, useCallback, useEffect, useState } from "react";
 import { DnD } from "../../shared/Draggable/DnD";
 import { isEmpty } from "lodash";
-import Sticky from "react-stickynode";
 import SlidingPane from "react-sliding-pane";
-import { extractComicArchive } from "../../../actions/fileops.actions";
-import { analyzeImage } from "../../../actions/fileops.actions";
 import { Canvas } from "../../shared/Canvas";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import axios from "axios";
+import {
+  IMAGETRANSFORMATION_SERVICE_BASE_URI,
+  LIBRARY_SERVICE_BASE_URI,
+  LIBRARY_SERVICE_HOST,
+} from "../../../constants/endpoints";
+import { useStore } from "../../../store";
+import { useShallow } from "zustand/react/shallow";
+import { escapePoundSymbol } from "../../../shared/utils/formatting.utils";
 
 export const ArchiveOperations = (props): ReactElement => {
   const { data } = props;
-  //   const isComicBookExtractionInProgress = useSelector(
-  //     (state: RootState) => state.fileOps.comicBookExtractionInProgress,
-  //   );
-  //   const extractedComicBookArchive = useSelector(
-  //     (state: RootState) => state.fileOps.extractedComicBookArchive.analysis,
-  //   );
-  //
-  //   const imageAnalysisResult = useSelector((state: RootState) => {
-  //     return state.fileOps.imageAnalysisResults;
-  //   });
-
-  const unpackComicArchive = useCallback(() => {
-    // dispatch(
-    //   extractComicArchive(data.rawFileDetails.filePath, {
-    //     type: "full",
-    //     purpose: "analysis",
-    //     imageResizeOptions: {
-    //       baseWidth: 275,
-    //     },
-    //   }),
-    // );
-  }, []);
 
+  const { socketIOInstance } = useStore(
+    useShallow((state) => ({
+      socketIOInstance: state.socketIOInstance,
+    })),
+  );
+  const queryClient = useQueryClient();
   // sliding panel config
   const [visible, setVisible] = useState(false);
   const [slidingPanelContentId, setSlidingPanelContentId] = useState("");
   // current image
   const [currentImage, setCurrentImage] = useState([]);
+  const [uncompressedArchive, setUncompressedArchive] = useState([]);
+  const [imageAnalysisResult, setImageAnalysisResult] = useState({});
+  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
+  socketIOInstance.on("LS_UNCOMPRESSION_JOB_COMPLETE", (data) => {
+    setUncompressedArchive(constructImagePaths(data?.uncompressedArchive));
+  });
+
+  useEffect(() => {
+    let isMounted = true;
+
+    if (data.rawFileDetails?.archive?.uncompressed) {
+      const fetchUncompressedArchive = async () => {
+        try {
+          const response = await axios({
+            url: `${LIBRARY_SERVICE_BASE_URI}/walkFolders`,
+            method: "POST",
+            data: {
+              basePathToWalk: data?.rawFileDetails?.archive?.expandedPath,
+              extensions: [".jpg", ".jpeg", ".png", ".bmp", "gif"],
+            },
+            transformResponse: async (responseData) => {
+              const parsedData = JSON.parse(responseData);
+              const paths = parsedData.map((pathObject) => {
+                return `${pathObject.containedIn}/${pathObject.name}${pathObject.extension}`;
+              });
+              const uncompressedArchive = constructImagePaths(paths);
+
+              if (isMounted) {
+                setUncompressedArchive(uncompressedArchive);
+              }
+            },
+          });
+        } catch (error) {
+          console.error("Error fetching uncompressed archive:", error);
+          // Handle error if necessary
+        }
+      };
+      fetchUncompressedArchive();
+    }
+
+    // Cleanup function
+    return () => {
+      isMounted = false;
+      setUncompressedArchive([]);
+    };
+  }, [data]);
+
+  const analyzeImage = async (imageFilePath: string) => {
+    const response = await axios({
+      url: `${IMAGETRANSFORMATION_SERVICE_BASE_URI}/analyze`,
+      method: "POST",
+      data: {
+        imageFilePath,
+      },
+    });
+    setImageAnalysisResult(response?.data);
+    queryClient.invalidateQueries({ queryKey: ["uncompressedArchive"] });
+  };
+
+  const {
+    data: uncompressionResult,
+    refetch,
+    isLoading,
+    isSuccess,
+  } = useQuery({
+    queryFn: async () =>
+      await axios({
+        method: "POST",
+        url: `http://localhost:3000/api/library/uncompressFullArchive`,
+        headers: {
+          "Content-Type": "application/json; charset=utf-8",
+        },
+        data: {
+          filePath: data.rawFileDetails.filePath,
+          comicObjectId: data._id,
+          options: {
+            type: "full",
+            purpose: "analysis",
+            imageResizeOptions: {
+              baseWidth: 275,
+            },
+          },
+        },
+      }),
+    queryKey: ["uncompressedArchive"],
+    enabled: false,
+  });
+
+  if (isSuccess) {
+    queryClient.invalidateQueries({ queryKey: ["comicBookMetadata"] });
+  }
 
   // sliding panel init
   const contentForSlidingPanel = {
@@ -44,13 +132,13 @@ export const ArchiveOperations = (props): ReactElement => {
       content: () => {
         return (
           <div>
-            <pre className="is-size-7">{currentImage}</pre>
+            <pre className="text-sm">{currentImage}</pre>
             {!isEmpty(imageAnalysisResult) ? (
-              <pre className="is-size-7 p-2 mt-3">
+              <pre className="p-2 mt-3">
                 <Canvas data={imageAnalysisResult} />
               </pre>
             ) : null}
-            <pre className="is-size-7 mt-3">
+            <pre className="font-hasklig mt-3 text-sm">
               {JSON.stringify(imageAnalysisResult.analyzedData, null, 2)}
             </pre>
           </div>
@@ -62,54 +150,80 @@ export const ArchiveOperations = (props): ReactElement => {
   // sliding panel handlers
   const openImageAnalysisPanel = useCallback((imageFilePath) => {
     setSlidingPanelContentId("imageAnalysis");
-    // dispatch(analyzeImage(imageFilePath));
+    analyzeImage(imageFilePath);
     setCurrentImage(imageFilePath);
     setVisible(true);
   }, []);
 
   return (
     <div key={2}>
-      <button
+      <article
-        className={
+        role="alert"
-          isComicBookExtractionInProgress
+        className="mt-4 text-md 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"
-            ? "button is-loading is-warning"
-            : "button is-warning"
-        }
-        onClick={unpackComicArchive}
       >
-        <span className="icon is-small">
+        <div>
-          <i className="fa-solid fa-box-open"></i>
+          <p>You can perform several operations on your comic book archive.</p>
-        </span>
+          <p>
-        <span>Unpack comic archive</span>
+            Uncompressing, re-organizing the individual pages, then
-      </button>
+            re-compressing to a different format, for example.
-      <div className="columns">
+          </p>
-        <div className="mt-5">
+          <p>You can also analyze color histograms of pages.</p>
-          {!isEmpty(extractedComicBookArchive) ? (
+        </div>
+      </article>
+      <div className="mt-5">
+        {data.rawFileDetails.archive?.uncompressed ? (
+          <article
+            role="alert"
+            className="mt-4 text-md 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"
+          >
+            This issue is already uncompressed at:
+            <p>
+              <code className="font-hasklig text-sm">
+                {data.rawFileDetails.archive.expandedPath}
+              </code>
+              <div className="">It has {uncompressedArchive?.length} pages</div>
+            </p>
+          </article>
+        ) : null}
+
+        <div className="flex flex-row gap-2 mt-4">
+          {!data.rawFileDetails?.archive?.uncompressed ? (
+            <button
+              className="flex space-x-1 sm:mt-0 sm:flex-row sm:items-center rounded-lg border border-green-400 dark:border-green-200 bg-green-200 px-3 py-2 text-gray-500 hover:bg-transparent hover:text-green-600 focus:outline-none focus:ring active:text-indigo-500"
+              onClick={() => refetch()}
+            >
+              <span className="text-md">Unpack Comic Archive</span>
+              <span className="w-6 h-6">
+                <i className="h-6 w-6 icon-[solar--box-bold-duotone]"></i>
+              </span>
+            </button>
+          ) : null}
+
+          {!isEmpty(uncompressedArchive) ? (
+            <div>
+              <button
+                className="flex space-x-1 sm:mt-0 sm:flex-row sm:items-center rounded-lg border border-green-400 dark:border-green-200 bg-green-200 px-3 py-2 text-gray-500 hover:bg-transparent hover:text-green-600 focus:outline-none focus:ring active:text-indigo-500"
+                onClick={() => refetch()}
+              >
+                <span className="text-md">Convert to .cbz</span>
+                <span className="w-6 h-6">
+                  <i className="h-6 w-6 icon-[solar--zip-file-bold-duotone]"></i>
+                </span>
+              </button>
+            </div>
+          ) : null}
+        </div>
+      </div>
+
+      <div>
+        <div className="mt-10">
+          {!isEmpty(uncompressedArchive) ? (
             <DnD
-              data={extractedComicBookArchive}
+              data={uncompressedArchive}
               onClickHandler={openImageAnalysisPanel}
             />
           ) : null}
         </div>
-        {!isEmpty(extractedComicBookArchive) ? (
-          <div className="column mt-5">
-            <Sticky enabled={true} top={70} bottomBoundary={3000}>
-              <div className="card">
-                <div className="card-content">
-                  <span className="has-text-size-4">
-                    {extractedComicBookArchive.length} pages
-                  </span>
-                  <button className="button is-small is-light is-primary is-outlined">
-                    <span className="icon is-small">
-                      <i className="fa-solid fa-compress"></i>
-                    </span>
-                    <span>Convert to CBZ</span>
-                  </button>
-                </div>
-              </div>
-            </Sticky>
-          </div>
-        ) : null}
       </div>
       <SlidingPane
         isOpen={visible}

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

@@ -4,52 +4,59 @@ import React, { ReactElement } from "react";
 export const ComicInfoXML = (data): ReactElement => {
   const { json } = data;
   return (
-    <div className="comicInfo-metadata">
+    <div className="flex md:w-4/5 lg:w-78">
-      <dl className="has-text-size-7">
+      <dl className="dark:bg-yellow-600 bg-yellow-200 p-3 rounded-lg">
-        <dd className="has-text-weight-medium">{json.series[0]}</dd>
+        <dt>
-        <dd className="mt-2 mb-2">
+          <p className="text-lg">{json.series[0]}</p>
-          <div className="field is-grouped is-grouped-multiline">
+        </dt>
-            <div className="control">
+        <dd className="text-sm">
-              <span className="tags has-addons">
+          published by{" "}
-                <span className="tag">Pages</span>
+          <span className="underline">
-                <span className="tag is-warning is-light">
+            {json.publisher[0]}
-                  {json.publisher[0]}
+            <i className="icon-[solar--arrow-right-up-outline] w-4 h-4" />
+          </span>
+        </dd>
+        <span className="inline-flex flex-row gap-2">
+          {/* Issue number */}
+          {!isUndefined(json.number) && (
+            <dd className="my-2">
+              <span className="inline-flex items-center bg-slate-50 text-sm text-slate-800 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-4 h-4"></i>
+                </span>
+                <span className="text-slate-900 dark:text-slate-900">
+                  {parseInt(json.number[0], 10)}
                 </span>
               </span>
-            </div>
+            </dd>
-            <div className="control">
+          )}
-              <span className="tags has-addons">
+          <dd className="my-2">
-                <span className="tag">Issue #</span>
+            {/* Genre */}
-                <span className="tag is-warning is-light">
+            <span className="inline-flex items-center bg-slate-50 text-slate-800 text-sm font-medium px-2 rounded-md dark:text-slate-900 dark:bg-slate-400">
-                  {!isUndefined(json.number) && parseInt(json.number[0], 10)}
+              <span className="pr-1 pt-1">
-                </span>
+                <i className="icon-[solar--sticker-smile-circle-bold-duotone] w-5 h-5"></i>
               </span>
-            </div>
+
-            <div className="control">
+              <span className="text-slate-500 dark:text-slate-900">
-              <span className="tags has-addons">
+                {json.genre[0]}
-                <span className="tag">Pages</span>
-                <span className="tag is-warning is-light">
-                  {json.pagecount[0]}
-                </span>
               </span>
-            </div>
+            </span>
-            {!isUndefined(json.genre) && (
+          </dd>
-              <div className="control">
+        </span>
-                <span className="tags has-addons">
+
-                  <span className="tag">Genre</span>
+        <dd className="my-1">
-                  <span className="tag is-success is-light">
+          {/* Summary */}
-                    {json.genre[0]}
+          {!isUndefined(json.summary) && (
-                  </span>
+            <span className="text-md text-slate-500 dark:text-slate-900">
-                </span>
+              {json.summary[0]}
-              </div>
+            </span>
-            )}
+          )}
-          </div>
         </dd>
         <dd>
-          <span className="is-size-7">{json.notes[0]}</span>
+          {/* Notes */}
-        </dd>
+          <span className="text-sm text-slate-500 dark:text-slate-900">
-        <dd className="mt-1 mb-1">
+            {json.notes[0]}
-          {!isUndefined(json.summary) && json.summary[0]}
+          </span>
         </dd>
       </dl>
     </div>

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

@@ -1,30 +1,15 @@
 import React, { ReactElement } from "react";
 import ComicVineDetails from "../ComicVineDetails";
-import { convert } from "html-to-text";
-import { isEmpty } from "lodash";
 
 export const VolumeInformation = (props): ReactElement => {
   const { data } = props;
-  const createDescriptionMarkup = (html) => {
-    return { __html: html };
-  };
 
   return (
     <div key={1}>
-      <div className="columns is-multiline">
+      <ComicVineDetails
-        <ComicVineDetails
+        data={data.sourcedMetadata.comicvine}
-          data={data.sourcedMetadata.comicvine}
+        updatedAt={data.updatedAt}
-          updatedAt={data.updatedAt}
+      />
-        />
-        <div className="column is-8">
-          {!isEmpty(data.sourcedMetadata.comicvine.description) &&
-            convert(data.sourcedMetadata.comicvine.description, {
-              baseElements: {
-                selectors: ["p"],
-              },
-            })}
-        </div>
-      </div>
     </div>
   );
 };

src/client/components/Dashboard/Dashboard.tsx

@@ -1,29 +1,14 @@
-import React, { ReactElement, useEffect } from "react";
+import React, { ReactElement } from "react";
-import { useDispatch, useSelector } from "react-redux";
 import ZeroState from "./ZeroState";
 import { RecentlyImported } from "./RecentlyImported";
 import { WantedComicsList } from "./WantedComicsList";
 import { VolumeGroups } from "./VolumeGroups";
 import { LibraryStatistics } from "./LibraryStatistics";
 import { PullList } from "./PullList";
-import {
-  fetchVolumeGroups,
-  getComicBooks,
-} from "../../actions/fileops.actions";
 import { getLibraryStatistics } from "../../actions/comicinfo.actions";
-import { isEmpty, isNil, isUndefined } from "lodash";
+import { useQuery } from "@tanstack/react-query";
-import Header from "../shared/Header";
-import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
 import axios from "axios";
-import { Card } from "../shared/Carda";
+import { LIBRARY_SERVICE_BASE_URI } from "../../constants/endpoints";
-import {
-  LIBRARY_SERVICE_BASE_URI,
-  LIBRARY_SERVICE_HOST,
-} from "../../constants/endpoints";
-import {
-  determineCoverFile,
-  determineExternalMetadata,
-} from "../../shared/utils/metadata.utils";
 
 export const Dashboard = (): ReactElement => {
   const { data: recentComics } = useQuery({
@@ -44,145 +29,43 @@ export const Dashboard = (): ReactElement => {
     queryKey: ["recentComics"],
   });
 
-  console.log("hari om", recentComics);
+  const { data: wantedComics } = useQuery({
-  //   useEffect(() => {
+    queryFn: async () =>
-  //     dispatch(fetchVolumeGroups());
+      await axios({
-  //     dispatch(
+        url: `${LIBRARY_SERVICE_BASE_URI}/getComicBooks`,
-  //       getComicBooks({
+        method: "POST",
-  //         paginationOptions: {
+        data: {
-  //           page: 0,
+          paginationOptions: {
-  //           limit: 5,
+            page: 0,
-  //           sort: { updatedAt: "-1" },
+            limit: 5,
-  //         },
+            sort: { updatedAt: "-1" },
-  //         predicate: { "acquisition.source.wanted": false },
+          },
-  //         comicStatus: "recent",
+          predicate: { "acquisition.source.wanted": true },
-  //       }),
+        },
-  //     );
+      }),
-  //     dispatch(
+    queryKey: ["wantedComics"],
-  //       getComicBooks({
+  });
-  //         paginationOptions: {
+  const { data: volumeGroups } = useQuery({
-  //           page: 0,
+    queryFn: async () =>
-  //           limit: 5,
+      await axios({
-  //           sort: { updatedAt: "-1" },
+        url: `${LIBRARY_SERVICE_BASE_URI}/getComicBookGroups`,
-  //         },
+        method: "GET",
-  //         predicate: { "acquisition.source.wanted": true },
+      }),
-  //         comicStatus: "wanted",
+    queryKey: ["volumeGroups"],
-  //       }),
+  });
-  //     );
+
-  //     dispatch(getLibraryStatistics());
-  //   }, []);
-  //
-  //   const recentComics = useSelector(
-  //     (state: RootState) => state.fileOps.recentComics,
-  //   );
-  //   const wantedComics = useSelector(
-  //     (state: RootState) => state.fileOps.wantedComics,
-  //   );
-  //   const volumeGroups = useSelector(
-  //     (state: RootState) => state.fileOps.comicVolumeGroups,
-  //   );
   //
   //   const libraryStatistics = useSelector(
   //     (state: RootState) => state.comicInfo.libraryStatistics,
   //   );
   return (
     <div className="container mx-auto max-w-full">
-      <section>
+      <PullList />
-        <h1>Dashboard</h1>
+      {recentComics && <RecentlyImported comics={recentComics?.data.docs} />}
-        <div className="grid grid-cols-5 gap-6">
+      {/* Wanted comics */}
-          {recentComics?.data.docs.map(
+      <WantedComicsList comics={wantedComics?.data?.docs} />
-            (
+      {/* Volume groups */}
-              {
+      <VolumeGroups volumeGroups={volumeGroups?.data} />
-                _id,
-                rawFileDetails,
-                sourcedMetadata: { comicvine, comicInfo, locg },
-                inferredMetadata,
-                acquisition: {
-                  source: { name },
-                },
-              },
-              idx,
-            ) => {
-              const { issueName, url } = determineCoverFile({
-                rawFileDetails,
-                comicvine,
-                comicInfo,
-                locg,
-              });
-              const { issue, coverURL, icon } = determineExternalMetadata(
-                name,
-                {
-                  comicvine,
-                  comicInfo,
-                  locg,
-                },
-              );
-              const isComicVineMetadataAvailable =
-                !isUndefined(comicvine) &&
-                !isUndefined(comicvine.volumeInformation);
-
-              return (
-                <Card
-                  orientation="vertical-2"
-                  key={idx}
-                  imageUrl={`${LIBRARY_SERVICE_HOST}/${rawFileDetails.cover.filePath}`}
-                  title={inferredMetadata.issue.name}
-                  hasDetails
-                >
-                  <div>
-                    <dt className="sr-only">Address</dt>
-                    <dd className="text-sm my-1 flex flex-row gap-1">
-                      {/* Issue number */}
-                      <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-outline]"></i>
-                        </span>
-                        <span className="text-md text-slate-900">
-                          {inferredMetadata.issue.number}
-                        </span>
-                      </span>
-                      {/* File extension */}
-                      <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--file-bold-duotone] w-4 h-4"></i>
-                        </span>
-
-                        <span className="text-md text-slate-500 dark:text-slate-900">
-                          {rawFileDetails.extension}
-                        </span>
-                      </span>
-                    </dd>
-                  </div>
-
-                  <div className="flex flex-row items-center gap-1 my-2">
-                    <div className="sm:inline-flex sm:shrink-0 sm:items-center sm:gap-2">
-                      {/* ComicInfo.xml presence */}
-                      {!isNil(comicInfo) && !isEmpty(comicInfo) && (
-                        <i className="h-7 w-7 icon-[solar--code-file-bold-duotone] text-slate-500 dark:text-slate-300"></i>
-                      )}
-                      {/* ComicVine metadata presence */}
-                      {isComicVineMetadataAvailable && (
-                        <span className="w-7 h-7">
-                          <img
-                            src="/src/client/assets/img/cvlogo.svg"
-                            alt={"ComicVine metadata detected."}
-                          />
-                        </span>
-                      )}
-                    </div>
-                    {/* Raw file presence  */}
-                    {isNil(rawFileDetails) && (
-                      <span className="h-6 w-5 sm:shrink-0 sm:items-center sm:gap-2">
-                        <i className="icon-[solar--file-corrupted-outline] h-5 w-5" />
-                      </span>
-                    )}
-                  </div>
-                </Card>
-              );
-            },
-          )}
-        </div>
-      </section>
     </div>
   );
 };

src/client/components/Dashboard/PullList.tsx

@@ -1,160 +1,152 @@
-import { isNil, map } from "lodash";
+import React, { ReactElement, useState } from "react";
-import React, { createRef, ReactElement, useCallback, useEffect } from "react";
+import { map } from "lodash";
 import Card from "../shared/Carda";
 import Header from "../shared/Header";
-import Masonry from "react-masonry-css";
-import { useDispatch, useSelector } from "react-redux";
-import { getWeeklyPullList } from "../../actions/comicinfo.actions";
 import { importToDB } from "../../actions/fileops.actions";
 import ellipsize from "ellipsize";
-import Slider from "react-slick";
-import "slick-carousel/slick/slick.css";
-import "slick-carousel/slick/slick-theme.css";
 import { Link } from "react-router-dom";
 
+import axios from "axios";
+import rateLimiter from "axios-rate-limit";
+import { setupCache } from "axios-cache-interceptor";
+import { useQuery } from "@tanstack/react-query";
+import "keen-slider/keen-slider.min.css";
+import { useKeenSlider } from "keen-slider/react";
+import { COMICVINE_SERVICE_URI } from "../../constants/endpoints";
+import { Field, Form } from "react-final-form";
+import DatePickerDialog from "../shared/DatePicker";
+import { format } from "date-fns";
+
 type PullListProps = {
   issues: any;
 };
 
-export const PullList = ({ issues }: PullListProps): ReactElement => {
+const http = rateLimiter(axios.create(), {
-  const dispatch = useDispatch();
+  maxRequests: 1,
-  useEffect(() => {
+  perMilliseconds: 1000,
-    dispatch(
+  maxRPS: 1,
-      getWeeklyPullList({
+});
-        startDate: "2023-9-9",
+const cachedAxios = setupCache(axios);
-        pageSize: "15",
+export const PullList = (): ReactElement => {
-        currentPage: "1",
+  // datepicker
-      }),
+  const date = new Date();
-    );
+  const [inputValue, setInputValue] = useState<string>(
-  }, []);
+    format(date, "M-dd-yyyy"),
-  const addToLibrary = useCallback(
-    (sourceName: string, locgMetadata) =>
-      dispatch(importToDB(sourceName, { locg: locgMetadata })),
-    [],
   );
-  /*
-  const foo = {
-    coverFile: {}, // pointer to which cover file to use
-    rawFileDetails: {}, // #1
-    sourcedMetadata: {
-      comicInfo: {},
-      comicvine: {}, // #2
-      locg: {}, // #2
-    },
-  };
-  */
 
-  const pullList = useSelector((state: RootState) => state.comicInfo.pullList);
+  // keen slider
-  let sliderRef = createRef();
+  const [sliderRef, instanceRef] = useKeenSlider(
-  const settings = {
+    {
-    dots: false,
+      loop: true,
-    infinite: false,
+      slides: {
-    speed: 500,
+        origin: "auto",
-    slidesToShow: 5,
+        number: 15,
-    slidesToScroll: 5,
+        perView: 5,
-    initialSlide: 0,
+        spacing: 15,
-    responsive: [
-      {
-        breakpoint: 1024,
-        settings: {
-          slidesToShow: 3,
-          slidesToScroll: 3,
-          infinite: false,
-        },
       },
-      {
+      slideChanged() {
-        breakpoint: 600,
+        console.log("slide changed");
-        settings: {
-          slidesToShow: 2,
-          slidesToScroll: 2,
-          initialSlide: 0,
-        },
-      },
-      {
-        breakpoint: 480,
-        settings: {
-          slidesToShow: 1,
-          slidesToScroll: 1,
-        },
       },
+    },
+    [
+      // add plugins here
     ],
-  };
+  );
+
+  const {
+    data: pullList,
+    refetch,
+    isSuccess,
+    isLoading,
+    isError,
+  } = useQuery({
+    queryFn: async (): any =>
+      await cachedAxios(`${COMICVINE_SERVICE_URI}/getWeeklyPullList`, {
+        method: "get",
+        params: { startDate: inputValue, pageSize: "15", currentPage: "1" },
+      }),
+    queryKey: ["pullList", inputValue],
+  });
+  const addToLibrary = (sourceName: string, locgMetadata) =>
+    importToDB(sourceName, { locg: locgMetadata });
 
   const next = () => {
-    sliderRef.slickNext();
+    // sliderRef.slickNext();
   };
   const previous = () => {
-    sliderRef.slickPrev();
+    // sliderRef.slickPrev();
   };
+
   return (
     <>
       <div className="content">
-        <Header headerContent="Discover"
+        <Header
-                subHeaderContent="Pull List aggregated for the week from League Of Comic Geeks"
+          headerContent="Discover"
-                iconClassNames="fa-solid fa-binoculars mr-2"/>
+          subHeaderContent="Pull List aggregated for the week from League Of Comic Geeks"
-        <div className="field is-grouped">
+          iconClassNames="fa-solid fa-binoculars mr-2"
+          link="/pull-list/all/"
+        />
+        <div className="flex flex-row gap-5 mb-3">
           {/* select week */}
-          <div className="control">
+          <div className="flex flex-row gap-4 my-3">
-            <div className="select is-small">
+            <Form
-              <select>
+              onSubmit={() => {}}
-                <option>Select Week</option>
+              render={({ handleSubmit }) => (
-                <option>With options</option>
+                <form>
-              </select>
+                  <div className="flex flex-col gap-2">
-            </div>
+                    {/* week selection for pull list */}
-          </div>
+                    <DatePickerDialog
-          {/* See all pull list issues */}
+                      inputValue={inputValue}
-          <div className="control">
+                      setter={setInputValue}
-            <Link to={"/pull-list/all/"}>
+                    />
-              <button className="button is-small">View all issues</button>
+                    {inputValue && (
-            </Link>
+                      <div className="text-sm">
-          </div>
+                        Showing pull list for <span>{inputValue}</span>
-          <div className="field has-addons">
+                      </div>
-            <div className="control">
+                    )}
-              <button className="button is-rounded is-small" onClick={previous}>
+                  </div>
-                <i className="fa-solid fa-caret-left"></i>
+                </form>
-              </button>
+              )}
-            </div>
+            />
-            <div className="control">
-              <button className="button is-rounded is-small" onClick={next}>
-                <i className="fa-solid fa-caret-right"></i>
-              </button>
-            </div>
           </div>
         </div>
       </div>
-      <Slider {...settings} ref={(c) => (sliderRef = c)}>
+
-        {!isNil(pullList) &&
+      {isSuccess && !isLoading && (
-          pullList &&
+        <div ref={sliderRef} className="keen-slider flex flex-row">
-          map(pullList, ({ issue }, idx) => {
+          {map(pullList?.data.result, (issue, idx) => {
             return (
-              <Card
+              <div key={idx} className="keen-slider__slide">
-                key={idx}
+                <Card
-                orientation={"vertical"}
+                  orientation={"vertical-2"}
-                imageUrl={issue.cover}
+                  imageUrl={issue.cover}
-                hasDetails
+                  hasDetails
-                title={ellipsize(issue.name, 18)}
+                  title={ellipsize(issue.name, 25)}
-                cardContainerStyle={{
+                >
-                  marginRight: 22,
+                  <div className="px-1">
-                  boxShadow: "-2px 4px 15px -6px rgba(0,0,0,0.57)",
+                    <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="content">
+                    <div className="flex flex-row justify-end">
-                  <div className="control">
+                      <button
-                    <span className="tag">{issue.publisher}</span>
+                        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 className="mt-2">
+                </Card>
-                    <button
+              </div>
-                      className="button is-small is-success is-outlined is-light"
-                      onClick={() => addToLibrary("locg", issue)}
-                    >
-                      <i className="fa-solid fa-plus"></i> Want
-                    </button>
-                  </div>
-                </div>
-              </Card>
             );
           })}
-      </Slider>
+        </div>
+      )}
+      {isLoading ? <div>Loading...</div> : null}
+      {isError ? (
+        <div>An error occurred while retrieving the pull list.</div>
+      ) : null}
     </>
   );
 };

src/client/components/Dashboard/RecentlyImported.tsx

@@ -4,47 +4,35 @@ import { Link } from "react-router-dom";
 import ellipsize from "ellipsize";
 import { isEmpty, isNil, isUndefined, map } from "lodash";
 import { detectIssueTypes } from "../../shared/utils/tradepaperback.utils";
-import Masonry from "react-masonry-css";
 import {
   determineCoverFile,
   determineExternalMetadata,
 } from "../../shared/utils/metadata.utils";
+import { LIBRARY_SERVICE_HOST } from "../../constants/endpoints";
+import Header from "../shared/Header";
 
 type RecentlyImportedProps = {
-  comicBookCovers: any;
+  comics: any;
 };
 
-export const RecentlyImported = ({
+export const RecentlyImported = (
-  comicBookCovers,
+  comics: RecentlyImportedProps,
-}: RecentlyImportedProps): ReactElement => {
+): ReactElement => {
-  const breakpointColumnsObj = {
-    default: 5,
-    1100: 4,
-    700: 2,
-    600: 2,
-  };
   return (
-    <>
+    <div>
-      <div className="content mt-5">
+      <Header
-        <h4 className="title is-4">
+        headerContent="Recently Imported"
-          <i className="fa-solid fa-file-arrow-down"></i> Recently Imported
+        subHeaderContent="Recent Library activity such as imports, tagging, etc."
-        </h4>
+        iconClassNames="fa-solid fa-binoculars mr-2"
-        <p className="subtitle is-7">
+      />
-          Recent Library activity such as imports, tagging, etc.
+      <div className="grid grid-cols-5 gap-6 mt-3">
-        </p>
+        {comics?.comics.map(
-      </div>
-      <Masonry
-        breakpointCols={breakpointColumnsObj}
-        className="recent-comics-container"
-        columnClassName="recent-comics-column"
-      >
-        {map(
-          comicBookCovers,
           (
             {
               _id,
               rawFileDetails,
               sourcedMetadata: { comicvine, comicInfo, locg },
+              inferredMetadata,
               acquisition: {
                 source: { name },
               },
@@ -62,85 +50,80 @@ export const RecentlyImported = ({
               comicInfo,
               locg,
             });
-            const isComicBookMetadataAvailable =
+            const isComicVineMetadataAvailable =
               !isUndefined(comicvine) &&
               !isUndefined(comicvine.volumeInformation);
 
-            const titleElement = (
-              <Link to={"/comic/details/" + _id}>
-                {ellipsize(issueName, 20)}
-              </Link>
-            );
             return (
-              <React.Fragment key={_id}>
+              <Card
-                <Card
+                orientation="vertical-2"
-                  orientation={"vertical"}
+                key={idx}
-                  imageUrl={url}
+                imageUrl={`${LIBRARY_SERVICE_HOST}/${rawFileDetails.cover.filePath}`}
-                  hasDetails
+                title={inferredMetadata.issue.name}
-                  title={issueName ? titleElement : null}
+                hasDetails
-                >
+              >
-                  <div className="content is-flex is-flex-direction-row">
+                <div>
-                    {/* Raw file presence  */}
+                  <dd className="text-sm my-1 flex flex-row gap-1">
-                    {isNil(rawFileDetails) && (
+                    {/* Issue number */}
-                      <span className="icon custom-icon is-small has-text-danger mr-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">
-                        <img src="/src/client/assets/img/missing-file.svg" />
+                      <span className="pr-1 pt-1">
+                        <i className="icon-[solar--hashtag-outline]"></i>
                       </span>
-                    )}
+                      <span className="text-md text-slate-900">
+                        {inferredMetadata.issue.number}
+                      </span>
+                    </span>
+                    {/* File extension */}
+                    <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--file-bold-duotone] w-4 h-4"></i>
+                      </span>
+
+                      <span className="text-md text-slate-500 dark:text-slate-900">
+                        {rawFileDetails.extension}
+                      </span>
+                    </span>
+                    {/* Uncompressed status  */}
+                    {rawFileDetails?.archive?.uncompressed ? (
+                      <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--bookmark-bold-duotone] w-4 h-4"></i>
+                        </span>
+                      </span>
+                    ) : null}
+                  </dd>
+                </div>
+
+                <div className="flex flex-row items-center gap-1 mt-2 pb-1">
+                  <div className="sm:inline-flex sm:shrink-0 sm:items-center sm:gap-2">
                     {/* ComicInfo.xml presence */}
                     {!isNil(comicInfo) && !isEmpty(comicInfo) && (
-                      <span className="icon custom-icon is-small has-text-danger">
+                      <div mt-1>
-                        <img
+                        <i className="h-7 w-7 icon-[solar--code-file-bold-duotone] text-yellow-500 dark:text-yellow-300"></i>
-                          src="/src/client/assets/img/comicinfoxml.svg"
+                      </div>
-                          alt={"ComicInfo.xml file detected."}
-                        />
-                      </span>
                     )}
                     {/* ComicVine metadata presence */}
-                    {isComicBookMetadataAvailable && (
+                    {isComicVineMetadataAvailable && (
-                      <span className="icon custom-icon">
+                      <span className="w-7 h-7">
                         <img
                           src="/src/client/assets/img/cvlogo.svg"
                           alt={"ComicVine metadata detected."}
                         />
                       </span>
                     )}
-                    {/* Issue type */}
-                    {isComicBookMetadataAvailable &&
-                    !isNil(
-                      detectIssueTypes(comicvine.volumeInformation.description),
-                    ) ? (
-                      <span className="tag is-warning">
-                        {
-                          detectIssueTypes(
-                            comicvine.volumeInformation.description,
-                          ).displayName
-                        }
-                      </span>
-                    ) : null}
                   </div>
-                </Card>
+                  {/* Raw file presence  */}
-                {/* metadata card */}
+                  {isNil(rawFileDetails) && (
-                {!isNil(name) && (
+                    <span className="h-6 w-5 sm:shrink-0 sm:items-center sm:gap-2">
-                  <Card orientation="horizontal" hasDetails imageUrl={coverURL}>
+                      <i className="icon-[solar--file-corrupted-outline] h-5 w-5" />
-                    <dd className="is-size-9">
+                    </span>
-                      <dl>
+                  )}
-                        <span className="icon custom-icon">
+                </div>
-                          <img src={`/src/client/assets/img/${icon}`} />
+              </Card>
-                        </span>
-                      </dl>
-                      <dl>
-                        <span className="small-tag">
-                          {ellipsize(issue, 15)}
-                        </span>
-                      </dl>
-                    </dd>
-                  </Card>
-                )}
-              </React.Fragment>
             );
           },
         )}
-      </Masonry>
+      </div>
-    </>
+    </div>
   );
-};
+};

src/client/components/Dashboard/VolumeGroups.tsx

@@ -2,15 +2,10 @@ import { map, unionBy } from "lodash";
 import React, { ReactElement } from "react";
 import ellipsize from "ellipsize";
 import { Link, useNavigate } from "react-router-dom";
-import Masonry from "react-masonry-css";
+import Card from "../shared/Carda";
+import Header from "../shared/Header";
 
 export const VolumeGroups = (props): ReactElement => {
-  const breakpointColumnsObj = {
-    default: 5,
-    1100: 4,
-    700: 2,
-    500: 1,
-  };
   // Till mongo gives us back the deduplicated results with the ObjectId
   const deduplicatedGroups = unionBy(props.volumeGroups, "volumes.id");
   const navigate = useNavigate();
@@ -19,44 +14,48 @@ export const VolumeGroups = (props): ReactElement => {
   };
 
   return (
-    <section className="volumes-container mt-4">
+    <section>
-      <div className="content">
+      <Header
-        <a className="mb-1" onClick={navigateToVolumes}>
+        headerContent="Volumes"
-          <span className="is-size-4 has-text-weight-semibold">
+        subHeaderContent="Based on ComicVine Volume information"
-            <i className="fa-solid fa-layer-group"></i> Volumes
+        iconClassNames="fa-solid fa-binoculars mr-2"
-          </span>
+        link={"/volumes"}
-          <span className="icon mt-1">
+      />
-            <i className="fa-solid fa-angle-right"></i>
+      <div className="grid grid-cols-5 gap-6 mt-3">
-          </span>
-        </a>
-        <p className="subtitle is-7">Based on ComicVine Volume information</p>
-      </div>
-      <Masonry
-        breakpointCols={breakpointColumnsObj}
-        className="volumes-grid"
-        columnClassName="volumes-grid-column"
-      >
         {map(deduplicatedGroups, (data) => {
           return (
-            <div className="stack" key={data._id}>
+            <div className="max-w-sm mx-auto" key={data._id}>
-              <img src={data.volumes.image.small_url} />
+              <Card
-              <div className="content">
+                orientation="vertical-2"
-                <div className="stack-title is-size-8">
+                key={data._id}
-                  <Link to={`/volume/details/${data._id}`}>
+                imageUrl={data.volumes.image.small_url}
-                    {ellipsize(data.volumes.name, 18)}
+                hasDetails
-                  </Link>
+              >
-                </div>
+                <div className="py-3">
-                <div className="control">
+                  <div className="text-sm">
-                  <span className="tags has-addons">
+                    <Link to={`/volume/details/${data._id}`}>
-                    <span className="tag is-primary is-light">Issues</span>
+                      {ellipsize(data.volumes.name, 48)}
-                    <span className="tag">{data.volumes.count_of_issues}</span>
+                    </Link>
+                  </div>
+                  {/* issue count */}
+                  <span className="inline-flex mt-1 items-center bg-slate-50 text-slate-800 text-xs font-medium px-2.5 py-0.5 rounded-md dark:text-slate-600 dark:bg-slate-400">
+                    <span className="pr-1 pt-1">
+                      <i className="icon-[solar--documents-minimalistic-bold-duotone] w-5 h-5"></i>
+                    </span>
+
+                    <span className="text-md text-slate-500 dark:text-slate-900">
+                      {data.volumes.count_of_issues} issues
+                    </span>
                   </span>
                 </div>
-              </div>
+              </Card>
+              <div className="w-11/12 h-2 mx-auto bg-slate-900 rounded-b opacity-75"></div>
+              <div className="w-10/12 h-2 mx-auto bg-slate-900 rounded-b opacity-50"></div>
+              <div className="w-9/12 h-2 mx-auto bg-slate-900 rounded-b opacity-25"></div>
             </div>
           );
         })}
-      </Masonry>
+      </div>
     </section>
   );
 };

src/client/components/Dashboard/WantedComicsList.tsx

@@ -4,8 +4,8 @@ import { Link, useNavigate } from "react-router-dom";
 import ellipsize from "ellipsize";
 import { isEmpty, isNil, isUndefined, map } from "lodash";
 import { detectIssueTypes } from "../../shared/utils/tradepaperback.utils";
-import Masonry from "react-masonry-css";
 import { determineCoverFile } from "../../shared/utils/metadata.utils";
+import Header from "../shared/Header";
 
 type WantedComicsListProps = {
   comics: any;
@@ -14,37 +14,17 @@ type WantedComicsListProps = {
 export const WantedComicsList = ({
   comics,
 }: WantedComicsListProps): ReactElement => {
-  const breakpointColumnsObj = {
-    default: 5,
-    1100: 4,
-    700: 2,
-    500: 1,
-  };
-
   const navigate = useNavigate();
-  const navigateToWantedComics = (row) => {
+
-    navigate(`/wanted/all`);
-  };
   return (
     <>
-      <div className="content mt-6">
+      <Header
-        <a className="mb-1" onClick={navigateToWantedComics}>
+        headerContent="Wanted Comics"
-          <span className="is-size-4 has-text-weight-semibold">
+        subHeaderContent="Comics marked as wanted from various sources"
-            <i className="fa-solid fa-asterisk"></i> Wanted Comics
+        iconClassNames="fa-solid fa-binoculars mr-2"
-          </span>
+        link={"/wanted"}
-          <span className="icon mt-1">
+      />
-            <i className="fa-solid fa-angle-right"></i>
+      <div className="grid grid-cols-5 gap-6 mt-3">
-          </span>
-        </a>
-        <p className="subtitle is-7">
-          Comics marked as wanted from various sources.
-        </p>
-      </div>
-      <Masonry
-        breakpointCols={breakpointColumnsObj}
-        className="recent-comics-container"
-        columnClassName="recent-comics-column"
-      >
         {map(
           comics,
           ({
@@ -73,42 +53,54 @@ export const WantedComicsList = ({
             return (
               <Card
                 key={_id}
-                orientation={"vertical"}
+                orientation={"vertical-2"}
                 imageUrl={url}
                 hasDetails
                 title={issueName ? titleElement : <span>No Name</span>}
               >
-                <div className="content is-flex is-flex-direction-row">
+                <div className="pb-1">
-                  {/* comicVine metadata presence */}
-                  {isComicBookMetadataAvailable && (
-                    <span className="icon custom-icon">
-                      <img src="/src/client/assets/img/cvlogo.svg" />
-                    </span>
-                  )}
-                  {!isEmpty(locg) && (
-                    <span className="icon custom-icon">
-                      <img src="/src/client/assets/img/locglogo.svg" />
-                    </span>
-                  )}
                   {/* Issue type */}
                   {isComicBookMetadataAvailable &&
                   !isNil(
                     detectIssueTypes(comicvine.volumeInformation.description),
                   ) ? (
-                    <span className="tag is-warning">
+                    <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">
-                        detectIssueTypes(
+                        <span className="pr-1 pt-1">
-                          comicvine.volumeInformation.description,
+                          <i className="icon-[solar--book-2-line-duotone] w-5 h-5"></i>
-                        ).displayName
+                        </span>
-                      }
+
-                    </span>
+                        <span className="text-md text-slate-500 dark:text-slate-900">
+                          {
+                            detectIssueTypes(
+                              comicvine.volumeInformation.description,
+                            ).displayName
+                          }
+                        </span>
+                      </span>
+                    </div>
                   ) : null}
+
+                  {/* 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>
             );
           },
         )}
-      </Masonry>
+      </div>
     </>
   );
 };

src/client/components/Dashboard/ZeroState.tsx

@@ -6,8 +6,8 @@ interface ZeroStateProps {
 }
 const ZeroState: React.FunctionComponent<ZeroStateProps> = (props) => {
   return (
-    <article className="message is-info">
+    <article className="">
-      <div className="message-body">
+      <div className="">
         <p>{props.header}</p>
         {props.message}
       </div>

src/client/components/Import/Import.tsx

@@ -226,7 +226,7 @@ export const Import = (props: IProps): ReactElement => {
                 <span className="h-px flex-1 bg-slate-200 dark:bg-slate-400"></span>
               </span>
 
-              <div className="overflow-x-auto mt-4 rounded-lg border border-gray-200">
+              <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 className="ltr:text-left rtl:text-right">
                     <tr>

src/client/components/Library/Library.tsx

@@ -1,11 +1,16 @@
-import React, { useMemo, ReactElement, useState } from "react";
+import React, { useMemo, ReactElement, useState, useEffect } from "react";
 import PropTypes from "prop-types";
 import { useNavigate } from "react-router-dom";
 import { isEmpty, isNil, isUndefined } from "lodash";
 import MetadataPanel from "../shared/MetadataPanel";
 import T2Table from "../shared/T2Table";
+import SearchBar from "../Library/SearchBar";
 import ellipsize from "ellipsize";
-import { useQuery, keepPreviousData } from "@tanstack/react-query";
+import {
+  useQuery,
+  keepPreviousData,
+  useQueryClient,
+} from "@tanstack/react-query";
 import axios from "axios";
 import { format, fromUnixTime, parseISO } from "date-fns";
 
@@ -20,32 +25,56 @@ export const Library = (): ReactElement => {
   // Default page state
   // offset: 0
   const [offset, setOffset] = useState(0);
-
+  const [searchQuery, setSearchQuery] = useState({
-  // Method to fetch paginated issues
+    query: {},
-  const fetchIssues = async (searchQuery, offset, type) => {
+    pagination: {
-    let pagination = {
+      size: 25,
-      size: 15,
       from: offset,
-    };
+    },
+    type: "all",
+    trigger: "libraryPage",
+  });
+  const queryClient = useQueryClient();
+
+  /**
+   * Method that queries the Elasticsearch index "comics" for issues specified by the query
+   * @param searchQuery - A searchQuery object that contains the search term, type, and pagination params.
+   */
+  const fetchIssues = async (searchQuery) => {
+    const { pagination, query, type } = searchQuery;
     return await axios({
       method: "POST",
       url: "http://localhost:3000/api/search/searchIssue",
       data: {
-        searchQuery,
+        query,
         pagination,
         type,
       },
     });
   };
 
+  const searchIssues = (e) => {
+    queryClient.invalidateQueries({ queryKey: ["comics"] });
+    setSearchQuery({
+      query: {
+        volumeName: e.search,
+      },
+      pagination: {
+        size: 15,
+        from: 0,
+      },
+      type: "volumeName",
+      trigger: "libraryPage",
+    });
+  };
+
   const { data, isLoading, isError, isPlaceholderData } = useQuery({
-    queryKey: ["comics", offset],
+    queryKey: ["comics", offset, searchQuery],
-    queryFn: () => fetchIssues({}, offset, "all"),
+    queryFn: () => fetchIssues(searchQuery),
     placeholderData: keepPreviousData,
   });
 
   const searchResults = data?.data;
-
   // Programmatically navigate to comic detail
   const navigate = useNavigate();
   const navigateToComicDetail = (row) => {
@@ -56,7 +85,7 @@ export const Library = (): ReactElement => {
     return value.data ? (
       <dl className="flex flex-col text-md p-3 ml-4 my-3 rounded-lg dark:bg-yellow-500 bg-yellow-300 w-max">
         {/* Series Name */}
-        <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="inline-flex items-center w-fit 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--bookmark-square-minimalistic-bold-duotone] w-5 h-5"></i>
           </span>
@@ -123,7 +152,7 @@ export const Library = (): ReactElement => {
             accessorKey: "_source.createdAt",
             cell: (info) => {
               return !isNil(info.getValue()) ? (
-                <div className="text-xs w-max ml-3 my-3 text-slate-600">
+                <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>
@@ -171,7 +200,17 @@ export const Library = (): ReactElement => {
    **/
   const nextPage = (pageIndex: number, pageSize: number) => {
     if (!isPlaceholderData) {
-      setOffset(pageSize * pageIndex + 1);
+      queryClient.invalidateQueries({ queryKey: ["comics"] });
+      setSearchQuery({
+        query: {},
+        pagination: {
+          size: 15,
+          from: pageSize * pageIndex + 1,
+        },
+        type: "all",
+        trigger: "libraryPage",
+      });
+      // setOffset(pageSize * pageIndex + 1);
     }
   };
 
@@ -189,7 +228,17 @@ export const Library = (): ReactElement => {
     } else {
       from = (pageIndex - 1) * pageSize + 2 - (pageSize + 1);
     }
-    setOffset(from);
+    queryClient.invalidateQueries({ queryKey: ["comics"] });
+    setSearchQuery({
+      query: {},
+      pagination: {
+        size: 15,
+        from,
+      },
+      type: "all",
+      trigger: "libraryPage",
+    });
+    // setOffset(from);
   };
 
   // ImportStatus.propTypes = {
@@ -215,7 +264,7 @@ export const Library = (): ReactElement => {
         </header>
         {!isUndefined(searchResults?.hits) ? (
           <div>
-            <div className="library">
+            <div>
               <T2Table
                 totalPages={searchResults.hits.total.value}
                 columns={columns}
@@ -225,11 +274,13 @@ export const Library = (): ReactElement => {
                   nextPage,
                   previousPage,
                 }}
-              />
+              >
+                <SearchBar searchHandler={(e) => searchIssues(e)} />
+              </T2Table>
             </div>
           </div>
         ) : (
-          <>
+          <div className="mx-auto max-w-screen-xl mt-5">
             <article
               role="alert"
               className="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"
@@ -247,7 +298,7 @@ export const Library = (): ReactElement => {
                 {!isUndefined(searchResults?.data?.meta?.body) ? (
                   <p>
                     {JSON.stringify(
-                      searchResults.data.meta.body.error.root_cause,
+                      searchResults?.data.meta.body.error.root_cause,
                       null,
                       4,
                     )}
@@ -255,7 +306,7 @@ export const Library = (): ReactElement => {
                 ) : null}
               </pre>
             </div>
-          </>
+          </div>
         )}
       </section>
     </div>

src/client/components/Library/SearchBar.tsx

@@ -1,32 +1,13 @@
-import React, { ReactElement, useCallback } from "react";
+import React, { ReactElement } from "react";
 import PropTypes from "prop-types";
 import { Form, Field } from "react-final-form";
 import { Link } from "react-router-dom";
-import { searchIssue } from "../../actions/fileops.actions";
 
-export const SearchBar = (): ReactElement => {
+export const SearchBar = (props): ReactElement => {
-  const handleSubmit = useCallback((e) => {
+  const { searchHandler } = props;
-    // dispatch(
-    //   searchIssue(
-    //     {
-    //       query: {
-    //         volumeName: e.search,
-    //       },
-    //     },
-    //     {
-    //       pagination: {
-    //         size: 25,
-    //         from: 0,
-    //       },
-    //       type: "volumeName",
-    //       trigger: "libraryPage",
-    //     },
-    //   ),
-    // );
-  }, []);
   return (
     <Form
-      onSubmit={handleSubmit}
+      onSubmit={searchHandler}
       initialValues={{}}
       render={({ handleSubmit, form, submitting, pristine, values }) => (
         <form onSubmit={handleSubmit}>

src/client/components/Search/Search.tsx

@@ -1,8 +1,7 @@
-import React, { useCallback, ReactElement } from "react";
+import React, { useCallback, ReactElement, useState } from "react";
 import { isNil, isEmpty } from "lodash";
 import { IExtractedComicBookCoverFile, RootState } from "threetwo-ui-typings";
 import { importToDB } from "../../actions/fileops.actions";
-import { useSelector, useDispatch } from "react-redux";
 import { comicinfoAPICall } from "../../actions/comicinfo.actions";
 import { search } from "../../services/api/SearchApi";
 import { Form, Field } from "react-final-form";
@@ -10,6 +9,12 @@ import Card from "../shared/Carda";
 import ellipsize from "ellipsize";
 import { convert } from "html-to-text";
 import dayjs from "dayjs";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import {
+  COMICVINE_SERVICE_URI,
+  LIBRARY_SERVICE_BASE_URI,
+} from "../../constants/endpoints";
+import axios from "axios";
 
 interface ISearchProps {}
 
@@ -17,164 +22,223 @@ export const Search = ({}: ISearchProps): ReactElement => {
   const formData = {
     search: "",
   };
-  const dispatch = useDispatch();
+  const queryClient = useQueryClient();
-  const getCVSearchResults = useCallback(
+  const [searchQuery, setSearchQuery] = useState("");
-    (searchQuery) => {
+  const [comicVineMetadata, setComicVineMetadata] = useState({});
-      dispatch(
+  const getCVSearchResults = (searchQuery) => {
-        comicinfoAPICall({
+    setSearchQuery(searchQuery.search);
-          callURIAction: "search",
+    // queryClient.invalidateQueries({ queryKey: ["comicvineSearchResults"] });
-          callMethod: "GET",
+  };
-          callParams: {
+
-            api_key: "a5fa0663683df8145a85d694b5da4b87e1c92c69",
+  const {
-            query: searchQuery.search,
+    data: comicVineSearchResults,
-            format: "json",
+    isLoading,
-            limit: "10",
+    isSuccess,
-            offset: "0",
+  } = useQuery({
-            field_list:
+    queryFn: async () =>
-              "id,name,deck,api_detail_url,image,description,volume,cover_date",
+      await axios({
-            resources: "issue",
+        url: `${COMICVINE_SERVICE_URI}/search`,
+        method: "GET",
+        params: {
+          api_key: "a5fa0663683df8145a85d694b5da4b87e1c92c69",
+          query: searchQuery,
+          format: "json",
+          limit: "10",
+          offset: "0",
+          field_list:
+            "id,name,deck,api_detail_url,image,description,volume,cover_date",
+          resources: "issue",
+        },
+      }),
+    queryKey: ["comicvineSearchResults", searchQuery],
+    enabled: !isNil(searchQuery),
+  });
+
+  // add to library
+  const { data: additionResult } = useQuery({
+    queryFn: async () =>
+      await axios({
+        url: `${LIBRARY_SERVICE_BASE_URI}/rawImportToDb`,
+        method: "POST",
+        data: {
+          importType: "new",
+          payload: {
+            rawFileDetails: {
+              name: "",
+            },
+            importStatus: {
+              isImported: true,
+              tagged: false,
+              matchedResult: {
+                score: "0",
+              },
+            },
+            sourcedMetadata:
+              { comicvine: comicVineMetadata?.comicData } || null,
+            acquisition: { source: { wanted: true, name: "comicvine" } },
           },
-        }),
+        },
-      );
+      }),
-    },
+    queryKey: ["additionResult"],
-    [dispatch],
+    enabled: !isNil(comicVineMetadata.comicData),
-  );
+  });
 
-  const addToLibrary = useCallback(
+  const addToLibrary = (sourceName: string, comicData) =>
-    (sourceName: string, comicData) =>
+    setComicVineMetadata({ sourceName, comicData });
-      dispatch(importToDB(sourceName, { comicvine: comicData })),
-    [],
-  );
 
-  const comicVineSearchResults = useSelector(
-    (state: RootState) => state.comicInfo.searchResults,
-  );
   const createDescriptionMarkup = (html) => {
     return { __html: html };
   };
 
   return (
-    <>
+    <div>
-      <section className="container">
+      <section>
-        <div className="section search">
+        <header className="bg-slate-200 dark:bg-slate-500">
-          <h1 className="title">Search</h1>
+          <div className="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">
+                  Search
+                </h1>
 
+                <p className="mt-1.5 text-sm text-gray-500 dark:text-white">
+                  Browse your comic book collection.
+                </p>
+              </div>
+            </div>
+          </div>
+        </header>
+        <div className="mx-auto max-w-screen-sm px-4 py-4 sm:px-6 sm:py-8 lg:px-8">
           <Form
             onSubmit={getCVSearchResults}
             initialValues={{
               ...formData,
             }}
             render={({ handleSubmit, form, submitting, pristine, values }) => (
-              <form onSubmit={handleSubmit} className="form columns search">
+              <form onSubmit={handleSubmit}>
-                <div className="column is-three-quarters search">
+                <div className="flex flex-row w-full">
-                  <Field name="search">
+                  <div className="flex flex-row bg-slate-300 dark:bg-slate-500 rounded-l-lg p-2 min-w-full">
-                    {({ input, meta }) => {
+                    <div className="w-10 text-gray-400">
-                      return (
+                      <i className="icon-[solar--magnifer-bold-duotone] h-7 w-7" />
-                        <input
+                    </div>
-                          {...input}
+
-                          className="input main-search-bar is-large"
+                    <Field name="search">
-                          placeholder="Type an issue/volume name"
+                      {({ input, meta }) => {
-                        />
+                        return (
-                      );
+                          <input
-                    }}
+                            {...input}
-                  </Field>
+                            className="bg-slate-300 dark:bg-slate-500 outline-none text-lg text-gray-700 w-full"
-                </div>
+                            placeholder="Type an issue/volume name"
-                <div className="column">
+                          />
-                  <button type="submit" className="button is-medium">
+                        );
+                      }}
+                    </Field>
+                  </div>
+
+                  <button
+                    className="sm:mt-0 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"
+                  >
                     Search
                   </button>
                 </div>
               </form>
             )}
           />
-          {!isNil(comicVineSearchResults.results) &&
+        </div>
-          !isEmpty(comicVineSearchResults.results) ? (
+        {!isNil(comicVineSearchResults?.data.results) &&
-            <div className="columns is-multiline">
+        !isEmpty(comicVineSearchResults?.data.results) ? (
-              {comicVineSearchResults.results.map((result) => {
+          <div className="mx-auto max-w-screen-xl px-4 py-4 sm:px-6 sm:py-8 lg:px-8">
-                return (
+            {comicVineSearchResults.data.results.map((result) => {
-                  <div
+              return isSuccess ? (
-                    key={result.id}
+                <div key={result.id} className="mb-5">
-                    className="comicvine-metadata column is-10 mb-3"
+                  <div className="flex flex-row">
-                  >
+                    <div className="mr-5">
-                    <div className="columns">
+                      <Card
-                      <div className="column is-one-quarter">
+                        key={result.id}
-                        <Card
+                        orientation={"cover-only"}
-                          key={result.id}
+                        imageUrl={result.image.small_url}
-                          orientation={"vertical"}
+                        hasDetails={false}
-                          imageUrl={result.image.small_url}
+                      />
-                          title={result.name}
+                    </div>
-                          hasDetails={false}
+                    <div className="column">
-                        ></Card>
+                      <div className="text-xl">
+                        {!isEmpty(result.volume.name) ? (
+                          result.volume.name
+                        ) : (
+                          <span className="is-size-3">No Name</span>
+                        )}
                       </div>
-                      <div className="column">
+                      <div className="field is-grouped mt-1">
-                        <div className="is-size-3">
+                        <div className="control">
-                          {!isEmpty(result.name) ? (
+                          <div className="tags has-addons">
-                            result.name
+                            <span className="tag is-light">Cover date</span>
-                          ) : (
+                            <span className="tag is-info is-light">
-                            <span className="is-size-3">No Name</span>
+                              {dayjs(result.cover_date).format("MMM D, YYYY")}
-                          )}
+                            </span>
-                        </div>
-                        <div className="field is-grouped mt-1">
-                          <div className="control">
-                            <div className="tags has-addons">
-                              <span className="tag is-light">Cover date</span>
-                              <span className="tag is-info is-light">
-                                {dayjs(result.cover_date).format("MMM D, YYYY")}
-                              </span>
-                            </div>
-                          </div>
-
-                          <div className="control">
-                            <div className="tags has-addons">
-                              <span className="tag is-warning">
-                                {result.id}
-                              </span>
-                            </div>
                           </div>
                         </div>
 
-                        <a href={result.api_detail_url}>
+                        <div className="control">
-                          {result.api_detail_url}
+                          <div className="tags has-addons">
-                        </a>
+                            <span className="tag is-warning">{result.id}</span>
-                        <p>
+                          </div>
-                          {ellipsize(
+                        </div>
-                            convert(result.description, {
+                      </div>
-                              baseElements: {
+
-                                selectors: ["p"],
+                      <a href={result.api_detail_url}>
-                              },
+                        {result.api_detail_url}
-                            }),
+                      </a>
-                            320,
+                      <p>
-                          )}
+                        {ellipsize(
-                        </p>
+                          convert(result.description, {
+                            baseElements: {
+                              selectors: ["p", "div"],
+                            },
+                          }),
+                          320,
+                        )}
+                      </p>
+                      <div className="mt-2">
                         <button
-                          className="button is-success is-light is-outlined mt-2"
+                          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={() => addToLibrary("comicvine", result)}
                         >
-                          <i className="fa-solid fa-plus mr-2"></i> Want 
+                          <i className="icon-[solar--add-square-bold-duotone] w-6 h-6 mr-2"></i>{" "}
+                          Mark as Wanted
                         </button>
                       </div>
                     </div>
                   </div>
-                );
+                </div>
-              })}
+              ) : (
-            </div>
+                <div>Loading</div>
-          ) : (
+              );
-            <article className="message is-dark is-half">
+            })}
-              <div className="message-body">
+          </div>
-                <p className="mb-2">
+        ) : (
-                  <span className="tag is-medium is-info is-light">
+          <div className="mx-auto mx-auto max-w-screen-md px-4 py-4 sm:px-6 sm:py-8 lg:px-8">
-                    Search the ComicVine database
+            <article
-                  </span>
+              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"
+            >
+              <div>
+                <p> Search the ComicVine database</p>
+                <p>
+                  Note that you need an instance of AirDC++ already running to
+                  use this form to connect to it.
+                </p>
+                <p>
                   Search and add issues, series and trade paperbacks to your
                   library. Then, download them using the configured AirDC++ or
                   torrent clients.
                 </p>
               </div>
             </article>
-          )}
+          </div>
-        </div>
+        )}
       </section>
-    </>
+    </div>
   );
 };
 

src/client/components/Settings/QbittorrentSettings/QbittorrentConnectionForm.tsx

@@ -14,7 +14,6 @@ export const QbittorrentConnectionForm = (): ReactElement => {
         method: "GET",
       }),
   });
-  console.log(data);
   const hostDetails = data?.data?.bittorrent?.client?.host;
   // connect to qbittorrent client
   const { data: connectionDetails } = useQuery({

src/client/components/Settings/Settings.tsx

@@ -11,6 +11,7 @@ interface ISettingsProps {}
 
 export const Settings = (props: ISettingsProps): ReactElement => {
   const [active, setActive] = useState("gen-db");
+  console.log(active);
   const settingsContent = [
     {
       id: "adc-hubs",
@@ -67,67 +68,69 @@ export const Settings = (props: ISettingsProps): ReactElement => {
             </div>
           </div>
         </header>
-        <div className="flex flex-cols max-w-screen-xl mx-auto">
+        <div className="flex flex-row">
-          <aside className="px-4 py-4 sm:px-6 sm:py-8 lg:px-8">
+          <div className="inset-y-0 w-80 dark:bg-gray-800 bg-slate-300 text-white overflow-y-auto">
-            {map(settingsObject, (settingObject, idx) => {
+            <aside className="px-4 py-4 sm:px-6 sm:py-8 lg:px-8">
-              return (
+              {map(settingsObject, (settingObject, idx) => {
-                <div
+                return (
-                  className="w-64 py-2 text-slate-700 dark:text-slate-400"
+                  <div
-                  key={idx}
+                    className="w-64 py-2 text-slate-700 dark:text-slate-400"
-                >
+                    key={idx}
-                  <h3 className="text-l pb-2">
+                  >
-                    {settingObject.category.toUpperCase()}
+                    <h3 className="text-l pb-2">
-                  </h3>
+                      {settingObject.category.toUpperCase()}
-                  {/* First level children */}
+                    </h3>
-                  {!isUndefined(settingObject.children) ? (
+                    {/* First level children */}
-                    <ul key={settingObject.id}>
+                    {!isUndefined(settingObject.children) ? (
-                      {map(settingObject.children, (item, idx) => {
+                      <ul key={settingObject.id}>
-                        return (
+                        {map(settingObject.children, (item, idx) => {
-                          <li key={idx} className="mb-2">
+                          return (
-                            <a
+                            <li key={idx} className="mb-2">
-                              className={
+                              <a
-                                item.id.toString() === active
+                                className={
-                                  ? "is-active flex items-center"
+                                  item.id.toString() === active
-                                  : "flex items-center"
+                                    ? "is-active flex items-center"
-                              }
+                                    : "flex items-center"
-                              onClick={() => setActive(item.id.toString())}
+                                }
-                            >
+                                onClick={() => setActive(item.id.toString())}
-                              {item.displayName}
+                              >
-                            </a>
+                                {item.displayName}
-                            {/* Second level children */}
+                              </a>
-                            {!isUndefined(item.children) ? (
+                              {/* Second level children */}
-                              <ul className="pl-4 mt-2">
+                              {!isUndefined(item.children) ? (
-                                {map(item.children, (item, idx) => (
+                                <ul className="pl-4 mt-2">
-                                  <li key={item.id} className="mb-2">
+                                  {map(item.children, (item, idx) => (
-                                    <a
+                                    <li key={item.id} className="mb-2">
-                                      className={
+                                      <a
-                                        item.id.toString() === active
+                                        className={
-                                          ? "is-active flex items-center"
+                                          item.id.toString() === active
-                                          : "flex items-center"
+                                            ? "is-active flex items-center"
-                                      }
+                                            : "flex items-center"
-                                      onClick={() =>
+                                        }
-                                        setActive(item.id.toString())
+                                        onClick={() =>
-                                      }
+                                          setActive(item.id.toString())
-                                    >
+                                        }
-                                      {item.displayName}
+                                      >
-                                    </a>
+                                        {item.displayName}
-                                  </li>
+                                      </a>
-                                ))}
+                                    </li>
-                              </ul>
+                                  ))}
-                            ) : null}
+                                </ul>
-                          </li>
+                              ) : null}
-                        );
+                            </li>
-                      })}
+                          );
-                    </ul>
+                        })}
-                  ) : null}
+                      </ul>
-                </div>
+                    ) : null}
-              );
+                  </div>
-            })}
+                );
-          </aside>
+              })}
+            </aside>
+          </div>
 
           {/* content for settings */}
-          <div className="max-w-screen-xl">
+          <div className="flex mx-12">
-            <div className="content">
+            <div className="">
               {map(settingsContent, ({ id, content }) =>
                 active === id ? content : null,
               )}

src/client/components/Volumes/Volumes.tsx

@@ -4,124 +4,82 @@ import Card from "../shared/Carda";
 import T2Table from "../shared/T2Table";
 import ellipsize from "ellipsize";
 import { convert } from "html-to-text";
-import { isUndefined } from "lodash";
+import { useQuery } from "@tanstack/react-query";
+import axios from "axios";
+import { SEARCH_SERVICE_BASE_URI } from "../../constants/endpoints";
 
 export const Volumes = (props): ReactElement => {
   // const volumes = useSelector((state: RootState) => state.fileOps.volumes);
-  useEffect(() => {
+  const {
-    // dispatch(
+    data: volumes,
-    //   searchIssue(
+    isSuccess,
-    //     {
+    isError,
-    //       query: {},
+    isLoading,
-    //     },
+  } = useQuery({
-    //     {
+    queryFn: async () =>
-    //       pagination: {
+      await axios({
-    //         size: 25,
+        url: `${SEARCH_SERVICE_BASE_URI}/searchIssue`,
-    //         from: 0,
+        method: "POST",
-    //       },
+        data: {
-    //       type: "volumes",
+          query: {},
-    //       trigger: "volumesPage",
+          pagination: {
-    //     },
+            size: 25,
-    //   ),
+            from: 0,
-    // );
+          },
-  }, []);
+          type: "volumes",
+          trigger: "volumesPage",
+        },
+      }),
+    queryKey: ["volumes"],
+  });
+  console.log(volumes);
   const columnData = useMemo(
-    () => [
+    (): any => [
       {
         header: "Volume Details",
         id: "volumeDetails",
         minWidth: 450,
         accessorKey: "_source",
-        cell: (row) => {
+        cell: (row): any => {
           const foo = row.getValue();
           return (
-            <div className="columns">
+            <div className="flex flex-row gap-3 mt-5">
-              <div className="column">
+              <Card
-                <div className="comic-detail issue-metadata">
+                imageUrl={
-                  <dl>
+                  foo.sourcedMetadata.comicvine.volumeInformation.image
-                    <dd>
+                    .small_url
-                      <div className="columns mt-2">
+                }
-                        <div className="">
+                orientation={"cover-only"}
-                          <Card
+                hasDetails={false}
-                            imageUrl={
+              />
-                              foo.sourcedMetadata.comicvine.volumeInformation
+              <div className="dark:bg-[#647587] bg-slate-200 p-3 rounded-lg h-fit">
-                                .image.thumb_url
+                <span className="text-xl mb-1">
-                            }
+                  {foo.sourcedMetadata.comicvine.volumeInformation.name}
-                            orientation={"vertical"}
+                </span>
-                            hasDetails={false}
+                <p>
-                            // cardContainerStyle={{ maxWidth: 200 }}
+                  {ellipsize(
-                          />
+                    convert(
-                        </div>
+                      foo.sourcedMetadata.comicvine.volumeInformation
-                        <div className="column">
+                        .description,
-                          <dl>
+                      {
-                            <dt>
+                        baseElements: {
-                              <h6 className="name has-text-weight-medium mb-1">
+                          selectors: ["p"],
-                                {
+                        },
-                                  foo.sourcedMetadata.comicvine
+                      },
-                                    .volumeInformation.name
+                    ),
-                                }
+                    120,
-                              </h6>
+                  )}
-                            </dt>
+                </p>
-                            <dd className="is-size-7">
-                              published by{" "}
-                              <span className="has-text-weight-semibold">
-                                {
-                                  foo.sourcedMetadata.comicvine
-                                    .volumeInformation.publisher.name
-                                }
-                              </span>
-                            </dd>
-
-                            <dd className="is-size-7">
-                              <span>
-                                {ellipsize(
-                                  convert(
-                                    foo.sourcedMetadata.comicvine
-                                      .volumeInformation.description,
-                                    {
-                                      baseElements: {
-                                        selectors: ["p"],
-                                      },
-                                    },
-                                  ),
-                                  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">
-                                      Total Issues
-                                    </span>
-                                    <span className="tag is-success is-light">
-                                      {
-                                        foo.sourcedMetadata.comicvine
-                                          .volumeInformation.count_of_issues
-                                      }
-                                    </span>
-                                  </span>
-                                </div>
-                              </div>
-                            </dd>
-                          </dl>
-                        </div>
-                      </div>
-                    </dd>
-                  </dl>
-                </div>
               </div>
             </div>
           );
         },
       },
       {
-        header: "Download Status",
+        header: "Other Details",
         columns: [
           {
-            header: "Files",
+            header: "Downloads",
             accessorKey: "_source.acquisition.directconnect",
             align: "right",
             cell: (props) => {
@@ -142,12 +100,34 @@ export const Volumes = (props): ReactElement => {
             },
           },
           {
-            header: "Type",
+            header: "Publisher",
-            id: "Air",
+            accessorKey: "_source.sourcedMetadata.comicvine.volumeInformation",
+            cell: (props): any => {
+              const row = props.getValue();
+              return <div className="mt-5 text-md">{row.publisher.name}</div>;
+            },
           },
           {
-            header: "Type",
+            header: "Issue Count",
-            id: "dcc",
+            accessorKey:
+              "_source.sourcedMetadata.comicvine.volumeInformation.count_of_issues",
+            cell: (props): any => {
+              const row = props.getValue();
+              return (
+                <div className="mt-5">
+                  {/* issue count */}
+                  <span className="inline-flex items-center bg-slate-50 text-slate-800 font-medium px-2.5 py-0.5 rounded-md dark:text-slate-600 dark:bg-slate-400">
+                    <span className="pr-1 pt-1">
+                      <i className="icon-[solar--documents-minimalistic-bold-duotone] w-6 h-6"></i>
+                    </span>
+
+                    <span className="text-lg text-slate-500 dark:text-slate-900">
+                      {row}
+                    </span>
+                  </span>
+                </div>
+              );
+            },
           },
         ],
       },
@@ -155,17 +135,29 @@ export const Volumes = (props): ReactElement => {
     [],
   );
   return (
-    <section className="container">
+    <div>
-      <div className="section">
+      <section className="">
-        <div className="header-area">
+        <header className="bg-slate-200 dark:bg-slate-500">
-          <h1 className="title">Volumes</h1>
+          <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>
+            <div className="sm:flex sm:items-center sm:justify-between">
-        {!isUndefined(volumes.hits) && (
+              <div className="text-center sm:text-left">
+                <h1 className="text-2xl font-bold text-gray-900 dark:text-white sm:text-3xl">
+                  Volumes
+                </h1>
+
+                <p className="mt-1.5 text-sm text-gray-500 dark:text-white">
+                  Browse your collection of volumes.
+                </p>
+              </div>
+            </div>
+          </div>
+        </header>
+        {isSuccess ? (
           <div>
             <div className="library">
               <T2Table
-                sourceData={volumes?.hits}
+                sourceData={volumes?.data.hits.hits}
-                totalPages={volumes.hits.length}
+                totalPages={volumes?.data.hits.hits.length}
                 paginationHandlers={{
                   nextPage: () => {},
                   previousPage: () => {},
@@ -174,9 +166,13 @@ export const Volumes = (props): ReactElement => {
               />
             </div>
           </div>
-        )}
+        ) : null}
-      </div>
+        {isError ? (
-    </section>
+          <div>An error was encountered while retrieving volumes</div>
+        ) : null}
+        {isLoading ? <>Loading...</> : null}
+      </section>
+    </div>
   );
 };
 

src/client/components/WantedComics/WantedComics.tsx

@@ -1,32 +1,36 @@
 import React, { ReactElement, useCallback, useEffect, useMemo } from "react";
-import { searchIssue } from "../../actions/fileops.actions";
 import SearchBar from "../Library/SearchBar";
 import T2Table from "../shared/T2Table";
-import { isEmpty, isUndefined } from "lodash";
 import MetadataPanel from "../shared/MetadataPanel";
+import { useQuery } from "@tanstack/react-query";
+import axios from "axios";
+import { SEARCH_SERVICE_BASE_URI } from "../../constants/endpoints";
 
 export const WantedComics = (props): ReactElement => {
-  // const wantedComics = useSelector(
+  const {
-  //   (state: RootState) => state.fileOps.wantedComics,
+    data: wantedComics,
-  // );
+    isSuccess,
-  useEffect(() => {
+    isError,
-    // dispatch(
+    isLoading,
-    //   searchIssue(
+  } = useQuery({
-    //     {
+    queryFn: async () =>
-    //       query: {},
+      await axios({
-    //     },
+        url: `${SEARCH_SERVICE_BASE_URI}/searchIssue`,
-    //     {
+        method: "POST",
-    //       pagination: {
+        data: {
-    //         size: 25,
+          query: {},
-    //         from: 0,
-    //       },
-    //       type: "wanted",
-    //       trigger: "wantedComicsPage"
-    //     },
-    //   ),
-    // );
-  }, []);
 
+          pagination: {
+            size: 25,
+            from: 0,
+          },
+          type: "wanted",
+          trigger: "wantedComicsPage",
+        },
+      }),
+    queryKey: ["wantedComics"],
+    enabled: true,
+  });
   const columnData = [
     {
       header: "Comic Information",
@@ -36,7 +40,10 @@ export const WantedComics = (props): ReactElement => {
           id: "comicDetails",
           minWidth: 350,
           accessorFn: (data) => data,
-          cell: (value) => <MetadataPanel data={value.getValue()} />,
+          cell: (value) => {
+            const row = value.getValue()._source;
+            return row && <MetadataPanel data={row} />;
+          },
         },
       ],
     },
@@ -45,8 +52,8 @@ export const WantedComics = (props): ReactElement => {
       columns: [
         {
           header: "Files",
-          accessorKey: "acquisition",
           align: "right",
+          accessorKey: "_source.acquisition",
           cell: (props) => {
             const {
               directconnect: { downloads },
@@ -69,7 +76,7 @@ export const WantedComics = (props): ReactElement => {
         {
           header: "Download Details",
           id: "downloadDetails",
-          accessorKey: "acquisition",
+          accessorKey: "_source.acquisition",
           cell: (data) => (
             <ol>
               {data.getValue().directconnect.downloads.map((download, idx) => {
@@ -98,23 +105,23 @@ export const WantedComics = (props): ReactElement => {
    * @returns void
    *
    **/
-  const nextPage = useCallback((pageIndex: number, pageSize: number) => {
+  // const nextPage = useCallback((pageIndex: number, pageSize: number) => {
-    dispatch(
+  //   dispatch(
-      searchIssue(
+  //     searchIssue(
-        {
+  //       {
-          query: {},
+  //         query: {},
-        },
+  //       },
-        {
+  //       {
-          pagination: {
+  //         pagination: {
-            size: pageSize,
+  //           size: pageSize,
-            from: pageSize * pageIndex + 1,
+  //           from: pageSize * pageIndex + 1,
-          },
+  //         },
-          type: "wanted",
+  //         type: "wanted",
-          trigger: "wantedComicsPage",
+  //         trigger: "wantedComicsPage",
-        },
+  //       },
-      ),
+  //     ),
-    );
+  //   );
-  }, []);
+  // }, []);
 
   /**
    * Pagination control that fetches the previous x (pageSize) items
@@ -123,55 +130,71 @@ export const WantedComics = (props): ReactElement => {
    * @param {number} pageSize
    * @returns void
    **/
-  const previousPage = useCallback((pageIndex: number, pageSize: number) => {
+  // const previousPage = useCallback((pageIndex: number, pageSize: number) => {
-    let from = 0;
+  //   let from = 0;
-    if (pageIndex === 2) {
+  //   if (pageIndex === 2) {
-      from = (pageIndex - 1) * pageSize + 2 - 17;
+  //     from = (pageIndex - 1) * pageSize + 2 - 17;
-    } else {
+  //   } else {
-      from = (pageIndex - 1) * pageSize + 2 - 16;
+  //     from = (pageIndex - 1) * pageSize + 2 - 16;
-    }
+  //   }
-    dispatch(
+  //   dispatch(
-      searchIssue(
+  //     searchIssue(
-        {
+  //       {
-          query: {},
+  //         query: {},
-        },
+  //       },
-        {
+  //       {
-          pagination: {
+  //         pagination: {
-            size: pageSize,
+  //           size: pageSize,
-            from,
+  //           from,
-          },
+  //         },
-          type: "wanted",
+  //         type: "wanted",
-          trigger: "wantedComicsPage",
+  //         trigger: "wantedComicsPage",
-        },
+  //       },
-      ),
+  //     ),
-    );
+  //   );
-  }, []);
+  // }, []);
 
   return (
-    <section className="container">
+    <div className="">
-      <div className="section">
+      <section className="">
-        <div className="header-area">
+        <header className="bg-slate-200 dark:bg-slate-500">
-          <h1 className="title">Wanted Comics</h1>
+          <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>
+            <div className="sm:flex sm:items-center sm:justify-between">
-        {!isEmpty(wantedComics) && (
+              <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>
+        </header>
+        {isSuccess ? (
           <div>
             <div className="library">
               <T2Table
-                sourceData={wantedComics}
+                sourceData={wantedComics?.data.hits.hits}
-                totalPages={wantedComics.length}
+                totalPages={wantedComics?.data.hits.hits.length}
                 columns={columnData}
                 paginationHandlers={{
-                  nextPage: nextPage,
+                  nextPage: () => {},
-                  previousPage: previousPage,
+                  previousPage: () => {},
                 }}
                 // rowClickHandler={navigateToComicDetail}
               />
               {/* pagination controls */}
             </div>
           </div>
-        )}
+        ) : null}
-      </div>
+        {isLoading ? <div>Loading...</div> : null}
-    </section>
+        {isError ? (
+          <div>An error occurred while retrieving the pull list.</div>
+        ) : null}
+      </section>
+    </div>
   );
 };
 

src/client/components/shared/Canvas.tsx

@@ -1,8 +1,7 @@
 import React, { useEffect, useRef } from "react";
 
-export const Canvas = (data) => {
+export const Canvas = ({ data }) => {
-  const { colorHistogramData } = data.data;
+  const { colorHistogramData } = data;
-  console.log(data);
   const width = 559;
   const height = 200;
   const pixelRatio = window.devicePixelRatio;
@@ -10,7 +9,11 @@ export const Canvas = (data) => {
   const canvas = useRef(null);
 
   useEffect(() => {
-    const context = canvas.current.getContext("2d");
+    const context = canvas.current?.getContext("2d");
+    if (!context) {
+      return;
+    }
+
     context.scale(pixelRatio, pixelRatio);
     const guideHeight = 8;
     const startY = height - guideHeight;
@@ -46,18 +49,24 @@ export const Canvas = (data) => {
       context.stroke();
 
       // Guide
-      context.strokeStyle = "rgb(" + i + ", " + i + ", " + i + ")";
+      context.strokeStyle = `rgb(${i}, ${i}, ${i})`;
       context.beginPath();
       context.moveTo(x, startY);
       context.lineTo(x, height);
       context.closePath();
       context.stroke();
     }
-  });
+
+    // Cleanup function
+    return () => {
+      // Perform cleanup actions here
+    };
+  }, [colorHistogramData, pixelRatio]);
 
   const dw = Math.floor(pixelRatio * width);
   const dh = Math.floor(pixelRatio * height);
   const style = { width, height };
+
   return <canvas ref={canvas} width={dw} height={dh} style={style} />;
 };
 

src/client/components/shared/Carda.tsx

@@ -83,24 +83,26 @@ const renderCard = (props: ICardProps): ReactElement => {
 
     case "vertical-2":
       return (
-        <div className="block rounded-md w-fit 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"
           />
 
-          <div className="mt-2 px-2">
+          {props.title ? (
-            <dl>
+            <div className="px-3 pt-3 mb-2">
-              <div>
+              <dd className="text-sm text-slate-500 dark:text-black">
-                <dd className="text-md text-slate-500 dark:text-black">
+                {props.title}
-                  {props.title}
+              </dd>
-                </dd>
+            </div>
-              </div>
+          ) : null}
-            </dl>
 
-            {props.hasDetails && <>{props.children}</>}
+          {props.hasDetails ? (
-          </div>
+            <div className="px-2">
+              <>{props.children}</>
+            </div>
+          ) : null}
         </div>
       );
 

src/client/components/shared/DatePicker.tsx

@@ -0,0 +1,128 @@
+import React, { ChangeEventHandler, useRef, useState } from "react";
+
+import { format, isValid, parse, parseISO } from "date-fns";
+import FocusTrap from "focus-trap-react";
+import { DayPicker, SelectSingleEventHandler } from "react-day-picker";
+import { usePopper } from "react-popper";
+
+export const DatePickerDialog = (props) => {
+  console.log(props);
+  const { setter, apiAction } = props;
+  const [selected, setSelected] = useState<Date>();
+  const [isPopperOpen, setIsPopperOpen] = useState(false);
+
+  const popperRef = useRef<HTMLDivElement>(null);
+  const buttonRef = useRef<HTMLButtonElement>(null);
+  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(
+    null,
+  );
+
+  const customStyles = {
+    container: {
+      // Style for the entire container
+      border: "1px solid #ccc",
+      borderRadius: "4px",
+      padding: "10px",
+      width: "300px",
+    },
+    day: {
+      // Style for individual days
+
+      padding: "5px",
+      margin: "2px",
+    },
+    selected: {
+      // Style for selected days
+      backgroundColor: "#007bff",
+      color: "#fff",
+    },
+    disabled: {
+      // Style for disabled days
+      color: "#ccc",
+    },
+    today: {
+      // Style for today's date
+      backgroundColor: "#f0f0f0",
+    },
+    dayWrapper: {
+      // Style for the wrapper around each day
+      display: "inline-block",
+    },
+  };
+
+  const popper = usePopper(popperRef.current, popperElement, {
+    placement: "bottom-start",
+  });
+
+  const closePopper = () => {
+    setIsPopperOpen(false);
+    buttonRef?.current?.focus();
+  };
+
+  const handleButtonClick = () => {
+    setIsPopperOpen(true);
+  };
+
+  const handleDaySelect: SelectSingleEventHandler = (date) => {
+    setSelected(date);
+    if (date) {
+      setter(format(date, "M-dd-yyyy"));
+      apiAction();
+      closePopper();
+    } else {
+      setter("");
+    }
+  };
+
+  return (
+    <div>
+      <div ref={popperRef}>
+        <button
+          ref={buttonRef}
+          type="button"
+          aria-label="Pick a date"
+          onClick={handleButtonClick}
+          className="flex space-x-1 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"
+        >
+          <span className="pr-1 pt-0.5 h-8">
+            <span className="icon-[solar--calendar-date-bold-duotone] w-6 h-6"></span>
+          </span>
+          Pick a date
+        </button>
+      </div>
+      {isPopperOpen && (
+        <FocusTrap
+          active
+          focusTrapOptions={{
+            initialFocus: false,
+            allowOutsideClick: true,
+            clickOutsideDeactivates: true,
+            onDeactivate: closePopper,
+            fallbackFocus: buttonRef.current || undefined,
+          }}
+        >
+          <div
+            tabIndex={-1}
+            style={popper.styles.popper}
+            className="bg-slate-200 mt-3 p-2 rounded-lg z-50"
+            {...popper.attributes.popper}
+            ref={setPopperElement}
+            role="dialog"
+            aria-label="DayPicker calendar"
+          >
+            <DayPicker
+              initialFocus={isPopperOpen}
+              mode="single"
+              defaultMonth={selected}
+              selected={selected}
+              onSelect={handleDaySelect}
+              styles={customStyles}
+            />
+          </div>
+        </FocusTrap>
+      )}
+    </div>
+  );
+};
+
+export default DatePickerDialog;

src/client/components/shared/Draggable/DnD.tsx

@@ -64,7 +64,7 @@ export const DnD = (data) => {
                   className="mt-2 mb-2"
                   onClick={(e) => data.onClickHandler(url)}
                 >
-                  <div className="box p-2 pl-3 control-palette">
+                  <div className="box p-2 control-palette">
                     <span className="tag is-warning mr-2">{index}</span>
                     <span className="icon is-small mr-2">
                       <i className="fa-solid fa-vial"></i>

src/client/components/shared/Draggable/Grid.tsx

@@ -8,7 +8,6 @@ export function Grid({ children, columns }) {
         gridTemplateColumns: `repeat(${columns}, 200px)`,
         columnGap: 1,
         gridGap: 10,
-        padding: 10,
       }}
     >
       {children}

src/client/components/shared/Header.tsx

@@ -1,19 +1,32 @@
 import React, { ReactElement } from "react";
+import { Link } from "react-router-dom";
 
 type IHeaderProps = {
   headerContent: string;
   subHeaderContent: string;
   iconClassNames: string;
+  link?: string;
 };
 
 export const Header = (props: IHeaderProps): ReactElement => {
   return (
-    <>
+    <div className="mt-7">
-      <h4 className="title is-4">
+      <div className="">
-        <i className={props.iconClassNames}></i> {props.headerContent}
+        {props.link ? (
-      </h4>
+          <Link to={props.link}>
-      <p className="subtitle is-7">{props.subHeaderContent}</p>
+            <span className="text-xl">
-    </>
+              <span className="underline">
+                {props.headerContent}{" "}
+                <i className="icon-[solar--arrow-right-up-outline] w-4 h-4" />
+              </span>
+            </span>
+          </Link>
+        ) : (
+          <div className="text-xl">{props.headerContent}</div>
+        )}
+        <p className="">{props.subHeaderContent}</p>
+      </div>
+    </div>
   );
 };
 

src/client/components/shared/MetadataPanel.tsx

@@ -16,6 +16,7 @@ interface IMetadatPanelProps {
   containerStyle: any;
 }
 export const MetadataPanel = (props: IMetadatPanelProps): ReactElement => {
+  console.log(props);
   const {
     rawFileDetails,
     inferredMetadata,
@@ -78,6 +79,15 @@ export const MetadataPanel = (props: IMetadatPanelProps): ReactElement => {
                 {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">
+                <span className="pr-1 pt-1">
+                  <i className="icon-[solar--bookmark-bold-duotone] w-3.5 h-3.5"></i>
+                </span>
+              </span>
+            )}
           </dd>
         </dl>
       ),
@@ -105,7 +115,6 @@ export const MetadataPanel = (props: IMetadatPanelProps): ReactElement => {
                 </span>
               </span>
             </dd>
-
             <dd className="is-size-7">
               <span>
                 {ellipsize(
@@ -118,42 +127,13 @@ export const MetadataPanel = (props: IMetadatPanelProps): ReactElement => {
                 )}
               </span>
             </dd>
-
             <dd className="is-size-7 mt-2">
-              <div className="field is-grouped is-grouped-multiline">
+              <span className="my-3 mx-2">
-                <div className="control">
+                {comicvine.volumeInformation.start_year}
-                  <span className="tags">
+              </span>
-                    <span
+              {comicvine.volumeInformation.count_of_issues}
-                      className="tag is-success is-light has-text-weight-semibold"
+              ComicVine ID
-                      style={props.tagsStyle}
+              {comicvine.id}
-                    >
-                      {comicvine.volumeInformation.start_year}
-                    </span>
-                    <span
-                      className="tag is-success is-light"
-                      style={props.tagsStyle}
-                    >
-                      {comicvine.volumeInformation.count_of_issues}
-                    </span>
-                  </span>
-                </div>
-                <div className="control">
-                  <div className="tags has-addons">
-                    <span
-                      className="tag is-primary is-light"
-                      style={props.tagsStyle}
-                    >
-                      ComicVine ID
-                    </span>
-                    <span
-                      className="tag is-info is-light"
-                      style={props.tagsStyle}
-                    >
-                      {comicvine.id}
-                    </span>
-                  </div>
-                </div>
-              </div>
             </dd>
           </dl>
         ),

src/client/components/shared/Navbar2.tsx

@@ -52,12 +52,12 @@ export const Navbar2 = (): ReactElement => {
               </li>
 
               <li>
-                <a
+                <Link
+                  to="/volumes"
                   className="text-gray-500 transition hover:text-gray-500/75 dark:text-white dark:hover:text-white/75"
-                  href="/"
                 >
                   Volumes
-                </a>
+                </Link>
               </li>
 
               <li>
@@ -68,6 +68,14 @@ export const Navbar2 = (): ReactElement => {
                   Downloads
                 </a>
               </li>
+              <li>
+                <Link
+                  className="text-gray-500 transition hover:text-gray-500/75 dark:text-white dark:hover:text-white/75"
+                  to="/search"
+                >
+                  Comicvine Search
+                </Link>
+              </li>
             </ul>
           </nav>
 

src/client/components/shared/T2Table.tsx

@@ -1,7 +1,5 @@
 import React, { ReactElement, useMemo, useState } from "react";
 import PropTypes from "prop-types";
-import SearchBar from "../Library/SearchBar";
-import { Link } from "react-router-dom";
 import {
   ColumnDef,
   flexRender,
@@ -72,10 +70,9 @@ export const T2Table = (tableOptions): ReactElement => {
   return (
     <div className="container max-w-fit mx-14">
       <div>
-        {/* Search bar */}
+        <div className="flex flex-row gap-2 justify-between mt-7">
-        <div className="flex flex-row gap-2 justify-between mt-5">
+          {/* Search bar */}
-          <SearchBar />
+          {tableOptions.children}
-
           {/* pagination controls */}
           <div>
             Page {pageIndex} of {Math.ceil(totalPages / pageSize)}
@@ -154,5 +151,6 @@ T2Table.propTypes = {
     previousPage: PropTypes.func,
   }),
   rowClickHandler: PropTypes.func,
+  children: PropTypes.any,
 };
 export default T2Table;

src/client/constants/comic.model.js

@@ -1,48 +0,0 @@
-export const comicModel = {
-  name: "",
-  type: "",
-  import: {
-    isImported: false,
-  },
-  userAddedMetadata: {
-    tags: [],
-  },
-
-  comicStructure: {
-    cover: {
-      thumb: "http://thumb",
-      medium: "http://medium",
-      large: "http://large",
-    },
-    collection: {
-      publishDate: "",
-      type: "", // issue, series, trade paperback
-      metadata: {
-        publisher: "",
-        issueNumber: "",
-        description: "",
-        synopsis: "",
-        team: {},
-      },
-    },
-  },
-  sourcedMetadata: {
-    comicvine: {},
-    shortboxed: {},
-    gcd: {},
-  },
-  rawFileDetails: {
-    fileName: "",
-    path: "",
-    extension: "",
-  },
-  acquisition: {
-    release: {},
-    torrent: {
-      magnet: "",
-      tracker: "",
-      status: "",
-    },
-    usenet: {},
-  },
-};

src/client/constants/endpoints.ts

@@ -8,7 +8,6 @@ export const hostURIBuilder = (options: Record<string, string>): string => {
     options.apiPath
   );
 };
-console.log(import.meta);
 
 export const CORS_PROXY_SERVER_URI = hostURIBuilder({
   protocol: "http",

src/client/constants/importer.config.ts

@@ -1 +0,0 @@
-export const SUPPORTED_COMIC_ARCHIVES = [".cbz", ".cbr"];

src/client/hooks/useBlazeSlider.tsx

@@ -0,0 +1,16 @@
+import React, { useEffect } from "react";
+import BlazeSlider from "blaze-slider";
+
+export const useBlazeSlider = (config) => {
+  const sliderRef = React.useRef();
+  const elRef = React.useRef();
+
+  useEffect(() => {
+    // if not already initialized
+    if (!sliderRef.current) {
+      sliderRef.current = new BlazeSlider(elRef.current, config);
+    }
+  }, []);
+
+  return elRef;
+};

src/client/index.tsx

@@ -11,8 +11,11 @@ import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 import Import from "./components/Import/Import";
 import Dashboard from "./components/Dashboard/Dashboard";
+import Search from "./components/Search/Search";
 import TabulatedContentContainer from "./components/Library/TabulatedContentContainer";
 import { ComicDetailContainer } from "./components/ComicDetail/ComicDetailContainer";
+import Volumes from "./components/Volumes/Volumes";
+import WantedComics from "./components/WantedComics/WantedComics";
 
 const queryClient = new QueryClient();
 
@@ -22,6 +25,7 @@ const router = createBrowserRouter([
     element: <App />,
     errorElement: <ErrorPage />,
     children: [
+      { path: "/", element: <Dashboard /> },
       { path: "dashboard", element: <Dashboard /> },
       { path: "settings", element: <Settings /> },
       {
@@ -33,6 +37,9 @@ const router = createBrowserRouter([
         element: <ComicDetailContainer />,
       },
       { path: "import", element: <Import path={"./comics"} /> },
+      { path: "search", element: <Search /> },
+      { path: "volumes", element: <Volumes /> },
+      { path: "wanted", element: <WantedComics /> },
     ],
   },
 ]);

src/client/store/index.ts

@@ -1,5 +1,5 @@
 import { create } from "zustand";
-import { isEmpty, isNil, isUndefined } from "lodash";
+import { isNil } from "lodash";
 import io from "socket.io-client";
 import { SOCKET_BASE_URI } from "../constants/endpoints";
 import { produce } from "immer";
@@ -28,6 +28,11 @@ export const useStore = create((set, get) => ({
   // Socket.io state
   socketIOInstance: {},
 
+  // ComicVine Scraping status
+  comicvine: {
+    scrapingStatus: "",
+  },
+
   // Import job queue and associated statuses
   importJobQueue: {
     successfulJobCount: 0,
@@ -153,6 +158,16 @@ socketIOInstance.on("LS_IMPORT_QUEUE_DRAINED", (data) => {
   queryClient.invalidateQueries({ queryKey: ["allImportJobResults"] });
 });
 
+// ComicVine Scraping status
+socketIOInstance.on("CV_SCRAPING_STATUS", (data) => {
+  setState((state) => ({
+    comicvine: {
+      ...state.comicvine,
+      scrapingStatus: data.message,
+    },
+  }));
+});
+
 /**
  * Method to init AirDC++ Socket with supplied settings
  * @param configuration - credentials, and hostname details to init AirDC++ connection
@@ -254,5 +269,3 @@ if (!isNil(directConnectConfiguration)) {
 } else {
   console.log("problem");
 }
-
-console.log("connected?", getState());