➕ Re-added yarn.lock

.gitignore

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

Dockerfile

@@ -3,20 +3,17 @@ LABEL maintainer="Rishi Ghan <rishi.ghan@gmail.com>"
 
 WORKDIR /threetwo
 
-# Copy package.json and lock file first to leverage Docker cache
 COPY package.json ./
 COPY yarn.lock ./
+COPY nodemon.json ./
+COPY jsdoc.json ./
 
-# Install build dependencies necessary for native modules
-RUN apk --no-cache add g++ make libpng-dev git python3 autoconf automake libjpeg-turbo-dev mesa-dev mesa libxi build-base gcc libtool nasm
+# RUN apt-get update && apt-get install -y git python3 build-essential autoconf automake g++ libpng-dev make
+RUN apk --no-cache add g++ make libpng-dev git python3 libc6-compat autoconf automake libjpeg-turbo-dev libpng-dev mesa-dev mesa libxi build-base gcc libtool nasm
+RUN yarn --ignore-engines
 
-# Install node modules
-RUN yarn install --ignore-engines
 
-# Copy the rest of the application
 COPY . .
-
 EXPOSE 5173
 
-# Use yarn start if you want to stick with yarn, or change to npm start if you prefer npm
-ENTRYPOINT [ "yarn", "start" ]
+ENTRYPOINT [ "npm", "start" ]

README.md

@@ -6,25 +6,14 @@ ThreeTwo! _aims to be_ a comic book curation app.
 
 ### Screenshots
 
-#### Dashboard
+![](https://github.com/rishighan/threetwo-visual-updates/raw/67e56878eb0381c73c1dea746a45253d3dcaa184/update_december_2022/Dashboard.png)
 
-![](https://raw.githubusercontent.com/rishighan/threetwo/ef05dee6005f683f1e4547631217681def9ebe86/screenshots/Dashboard.jpg)
+![](https://github.com/rishighan/threetwo-visual-updates/raw/67e56878eb0381c73c1dea746a45253d3dcaa184/update_december_2022/Library.png)
 
-#### Issue View
+![](https://github.com/rishighan/threetwo-visual-updates/raw/67e56878eb0381c73c1dea746a45253d3dcaa184/update_december_2022/DC%2B%2B%20integration.png)
 
-![](https://raw.githubusercontent.com/rishighan/threetwo/ef05dee6005f683f1e4547631217681def9ebe86/screenshots/ComicDetail.jpg)
+![](https://github.com/rishighan/threetwo-visual-updates/raw/67e56878eb0381c73c1dea746a45253d3dcaa184/update_december_2022/ComicVine%20Matching.png)
 
-#### DC++ Search
-
-![](https://raw.githubusercontent.com/rishighan/threetwo/ef05dee6005f683f1e4547631217681def9ebe86/screenshots/DC%2B%2BSearching.jpg)
-
-#### Import
-
-![](https://raw.githubusercontent.com/rishighan/threetwo/ef05dee6005f683f1e4547631217681def9ebe86/screenshots/Import.jpg)
-
-#### Comic Vine Matching, Metadata Scraping
-
-![](https://raw.githubusercontent.com/rishighan/threetwo/ef05dee6005f683f1e4547631217681def9ebe86/screenshots/CVMatching.jpg)
 
 ### 🦄 Early Development Support Channel
 
@@ -39,8 +28,7 @@ ThreeTwo! currently is set up as:
 1. The UI, this repo.
 2. [threetwo-core-service](https://github.com/rishighan/threetwo-core-service)
 3. [threetwo-metadata-service](https://github.com/rishighan/threetwo-metadata-service)
-4. [threetwo-acquisition-service](https://github.com/rishighan/threetwo-acquisition-service)
-5. [threetwo-ui-typings](https://github.com/rishighan/threetwo-frontend-types) which are the types used across the UI, installable as an `npm` dependency.
+4. [threetwo-ui-typings](https://github.com/rishighan/threetwo-frontend-types) which are the types used across the UI, installable as an `npm` dependency.
 
 ## Docker Instructions
 
@@ -55,18 +43,20 @@ For debugging and troubleshooting, you can run this app locally using these step
 3. This will open `http://localhost:5173` in your default browser
 4. Note that this is simply the UI layer and won't offer anything beyond a scaffold. You have to spin up the microservices locally to get it to work.
 
-## Troubleshooting
 
+## Troubleshooting
 ### Docker
 
 1. `docker-compose up` is taking a long time
-
+   
    This is primarily because `threetwo-import-service` pulls `calibre` from the CDN and it has been known to be extremely slow. I can't find a more reliable alternative, so give it some time to finish downloading.
 
 2. What folder do my comics go in?
-
+   
    Your comics go in the `comics` directory at the root of this project.
+   
 
 ## Contribution Guidelines
 
 See [contribution guidelines](https://github.com/rishighan/threetwo/blob/master/contributing.md)
+

index.html

@@ -1,14 +1,16 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
-    <title>Three Two!</title>
-  </head>
 
-  <body class="dark:bg-slate-600">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Three Two!</title>
+</head>
+
+<body>
     <div id="root"></div>
     <script type="module" src="/src/client/index.tsx"></script>
-  </body>
-</html>
+</body>
+
+</html>

package.json

@@ -1,7 +1,7 @@
 {
   "name": "threetwo",
-  "version": "0.1.0",
-  "description": "ThreeTwo! A good comic book curator.",
+  "version": "0.0.2",
+  "description": "ThreeTwo! A comic book curator.",
   "main": "server/index.js",
   "typings": "server/index.js",
   "scripts": {
@@ -18,37 +18,29 @@
     "@dnd-kit/core": "^6.0.8",
     "@dnd-kit/sortable": "^7.0.2",
     "@dnd-kit/utilities": "^3.2.1",
-    "@floating-ui/react": "^0.26.12",
-    "@floating-ui/react-dom": "^2.0.8",
     "@fortawesome/fontawesome-free": "^6.3.0",
-    "@popperjs/core": "^2.11.8",
+    "@redux-devtools/extension": "^3.2.5",
     "@rollup/plugin-node-resolve": "^15.0.1",
     "@tanstack/react-query": "^5.0.5",
     "@tanstack/react-table": "^8.9.3",
     "@types/mime-types": "^2.1.0",
     "@types/react-router-dom": "^5.3.3",
-    "@vitejs/plugin-react": "^4.2.1",
+    "@vitejs/plugin-react": "^3.1.0",
     "airdcpp-apisocket": "^2.5.0-beta.2",
-    "axios": "^1.6.8",
+    "axios": "^1.3.4",
     "axios-cache-interceptor": "^1.0.1",
     "axios-rate-limit": "^1.3.0",
     "babel-plugin-styled-components": "^2.1.4",
     "date-fns": "^2.28.0",
     "dayjs": "^1.10.6",
     "ellipsize": "^0.5.1",
-    "express": "^4.19.2",
+    "express": "^4.17.1",
     "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",
-    "i18next": "^23.11.1",
-    "i18next-browser-languagedetector": "^7.2.1",
-    "i18next-http-backend": "^2.5.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",
@@ -56,34 +48,33 @@
     "react": "^18.2.0",
     "react-collapsible": "^2.9.0",
     "react-comic-viewer": "^0.4.0",
-    "react-day-picker": "^8.10.0",
+    "react-day-picker": "^8.6.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-i18next": "^14.1.0",
     "react-loader-spinner": "^4.0.0",
+    "react-masonry-css": "^1.0.16",
     "react-modal": "^3.15.1",
     "react-router": "^6.9.0",
     "react-router-dom": "^6.9.0",
-    "react-select": "^5.8.0",
+    "react-select": "^5.3.2",
     "react-select-async-paginate": "^0.7.2",
+    "react-slick": "^0.29.0",
     "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",
+    "styled-components": "^6.0.7",
     "threetwo-ui-typings": "^1.0.14",
-
-    "vite": "^5.2.7",
-
+    "vite": "^4.5.0",
     "vite-plugin-html": "^3.2.0",
     "websocket": "^1.0.34",
     "zustand": "^4.4.6"
   },
   "devDependencies": {
-    "@iconify-json/solar": "^1.1.8",
-    "@iconify/tailwind": "^0.1.4",
     "@storybook/addon-essentials": "^7.4.1",
     "@storybook/addon-interactions": "^7.4.1",
     "@storybook/addon-links": "^7.4.1",
@@ -103,8 +94,8 @@
     "@types/react": "^18.0.28",
     "@types/react-dom": "^18.0.11",
     "@types/react-redux": "^7.1.25",
-    "autoprefixer": "^10.4.16",
     "body-parser": "^1.19.0",
+    "bulma": "^0.9.4",
     "docdash": "^2.0.2",
     "eslint": "^8.49.0",
     "eslint-config-prettier": "^8.1.0",
@@ -115,22 +106,19 @@
     "eslint-plugin-prettier": "^3.3.1",
     "eslint-plugin-react": "^7.22.0",
     "eslint-plugin-storybook": "^0.6.13",
-    "express": "^4.19.2",
+    "express": "^4.17.1",
     "install": "^0.13.0",
     "jest": "^29.6.3",
     "nodemon": "^3.0.1",
-    "postcss": "^8.4.32",
-    "postcss-import": "^15.1.0",
     "prettier": "^2.2.1",
     "react-refresh": "^0.14.0",
     "rimraf": "^4.1.3",
-    "sass": "^1.77.0",
+    "sass": "^1.66.1",
     "storybook": "^7.3.2",
-    "tailwindcss": "^3.4.1",
     "tui-jsdoc-template": "^1.2.2",
     "typescript": "^5.1.6"
   },
   "resolutions": {
-    "jackspeak": "2.1.1"
+    "styled-components": "^5"
   }
 }

postcss.config.js

@@ -1,7 +0,0 @@
-module.exports = {
-  plugins: {
-    "postcss-import": {},
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-};

src/client/actions/airdcpp.actions.tsx

@@ -33,9 +33,9 @@ interface SearchData {
   priority: PriorityEnum;
 }
 
-export const sleep = (ms: number): Promise<NodeJS.Timeout> => {
+function sleep(ms: number): Promise<NodeJS.Timeout> {
   return new Promise((resolve) => setTimeout(resolve, ms));
-};
+}
 
 export const toggleAirDCPPSocketConnectionStatus =
   (status: String, payload?: any) => async (dispatch) => {
@@ -59,6 +59,83 @@ export const toggleAirDCPPSocketConnectionStatus =
         break;
     }
   };
+export const search =
+  (data: SearchData, ADCPPSocket: any, credentials: any) =>
+  async (dispatch) => {
+    try {
+      if (!ADCPPSocket.isConnected()) {
+        await ADCPPSocket();
+      }
+      const instance: SearchInstance = await ADCPPSocket.post("search");
+      dispatch({
+        type: AIRDCPP_SEARCH_IN_PROGRESS,
+      });
+
+      // We want to get notified about every new result in order to make the user experience better
+      await ADCPPSocket.addListener(
+        `search`,
+        "search_result_added",
+        async (groupedResult) => {
+          // ...add the received result in the UI
+          // (it's probably a good idea to have some kind of throttling for the UI updates as there can be thousands of results)
+
+          dispatch({
+            type: AIRDCPP_SEARCH_RESULTS_ADDED,
+            groupedResult,
+          });
+        },
+        instance.id,
+      );
+
+      // We also want to update the existing items in our list when new hits arrive for the previously listed files/directories
+      await ADCPPSocket.addListener(
+        `search`,
+        "search_result_updated",
+        async (groupedResult) => {
+          // ...update properties of the existing result in the UI
+          dispatch({
+            type: AIRDCPP_SEARCH_RESULTS_UPDATED,
+            groupedResult,
+          });
+        },
+        instance.id,
+      );
+
+      // We need to show something to the user in case the search won't yield any results so that he won't be waiting forever)
+      // Wait for 5 seconds for any results to arrive after the searches were sent to the hubs
+      await ADCPPSocket.addListener(
+        `search`,
+        "search_hub_searches_sent",
+        async (searchInfo) => {
+          await sleep(5000);
+
+          // Check the number of received results (in real use cases we should know that even without calling the API)
+          const currentInstance = await ADCPPSocket.get(
+            `search/${instance.id}`,
+          );
+          if (currentInstance.result_count === 0) {
+            // ...nothing was received, show an informative message to the user
+            console.log("No more search results.");
+          }
+
+          // The search can now be considered to be "complete"
+          // If there's an "in progress" indicator in the UI, that could also be disabled here
+          dispatch({
+            type: AIRDCPP_HUB_SEARCHES_SENT,
+            searchInfo,
+            instance,
+          });
+        },
+        instance.id,
+      );
+      // Finally, perform the actual search
+      await ADCPPSocket.post(`search/${instance.id}/hub_search`, data);
+    } catch (error) {
+      console.log(error);
+      throw error;
+    }
+  };
+
 export const downloadAirDCPPItem =
   (
     searchInstanceId: Number,

src/client/assets/scss/App.scss

@@ -1,15 +1,635 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "/node_modules/bulma/bulma.sass";
+$fa-font-path: "/node_modules/@fortawesome/fontawesome-free/webfonts";
+@import "/node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss";
+@import "/node_modules/@fortawesome/fontawesome-free/scss/regular.scss";
+@import "/node_modules/@fortawesome/fontawesome-free/scss/solid.scss";
+$bg-color: yellow;
+$border-color: red;
 
-@layer base {
-  @font-face {
-    font-family: "PP Object Sans Regular";
-    src: url("/fonts/PPObjectSans-Regular.otf") format("opentype");
-  }
+$volume-color: #fdecd1;
+$issue-color: #f2f1f9;
+$size-8: 0.9rem;
+$size-9: 0.7rem;
+$flexSize: 4em;
+$boxSpacing: 1em;
+$colorText: #404646;
 
-  @font-face {
-    font-family: "Hasklig Regular";
-    src: url("/fonts/Hasklig-Regular.otf") format("opentype");
+.is-size-8 {
+  font-size: $size-8;
+}
+
+.is-size-9 {
+  font-size: $size-9;
+}
+
+.small-tag {
+  align-items: center;
+  background-color: #fff6de;
+  border-radius: 4px;
+  color: #4a4a4a;
+  display: inline-flex;
+  font-size: $size-9;
+  height: 1.5em;
+  justify-content: center;
+  line-height: 1.5;
+  padding-left: 0.55em;
+  padding-right: 0.55em;
+  white-space: nowrap;
+}
+
+// global style overrides
+
+pre {
+  border-radius: 0.5rem;
+}
+
+.container {
+  margin-top: 2em;
+}
+.app {
+  font-family: helvetica, arial, sans-serif;
+  padding: 2em;
+  border: 5px solid $border-color;
+
+  p {
+    background-color: $bg-color;
+  }
+}
+// Navbar
+.navbar {
+  border-bottom: 1px solid #f2f1f9;
+  .download-progress-meter {
+    margin-left: -300px;
+    min-width: 500px;
+  }
+  .airdcpp-status {
+    min-width: 300px;
+    line-height: 1.7rem;
+  }
+  body {
+    background: #454a59;
+  }
+
+  body {
+    background: #454a59;
+  }
+
+  .pulsating-circle {
+    position: relative;
+    left: -120%;
+    top: 20%;
+    transform: translateX(-50%) translateY(-50%);
+    width: 15px;
+    height: 15px;
+
+    &:before {
+      content: "";
+      position: relative;
+      display: block;
+      width: 300%;
+      height: 300%;
+      box-sizing: border-box;
+      margin-left: -100%;
+      margin-top: -100%;
+      border-radius: 45px;
+      background-color: #01a4e9;
+      animation: pulse-ring 1.25s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
+    }
+
+    &:after {
+      content: "";
+      position: absolute;
+      left: 0;
+      top: 0;
+      display: block;
+      width: 100%;
+      height: 100%;
+      background-color: green;
+      border-radius: 15px;
+      box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
+      animation: pulse-dot 1.25s cubic-bezier(0.455, 0.03, 0.515, 0.955) -0.4s infinite;
+    }
+  }
+
+  @keyframes pulse-ring {
+    0% {
+      transform: scale(0.33);
+    }
+    80%,
+    100% {
+      opacity: 0;
+    }
+  }
+
+  @keyframes pulse-dot {
+    0% {
+      transform: scale(0.8);
+    }
+    50% {
+      transform: scale(1);
+    }
+    100% {
+      transform: scale(0.8);
+    }
+  }
+}
+
+.navbar-item.is-mega {
+  position: static;
+
+  .is-mega-menu-title {
+    margin-bottom: 0;
+    padding: 0.375rem 1rem;
+  }
+}
+
+// Dashboard
+
+// slick slider overrides
+.slick-slider {
+  margin-left: -10px;
+  .slick-list {
+    padding: 0 0px 15px 10px;
+  }
+}
+.recent-comics-container {
+  display: -webkit-box; /* Not needed if autoprefixing */
+  display: -ms-flexbox; /* Not needed if autoprefixing */
+  display: flex;
+  margin-left: -22px; /* gutter size offset */
+  width: auto;
+
+  .recent-comics-column {
+    padding-left: 22px; /* gutter size */
+    background-clip: padding-box;
+    & > div {
+      /* change div to reference your elements you put in <Masonry> */
+      margin-bottom: 20px;
+    }
+  }
+}
+.volumes-container {
+  .stack {
+    display: inline-block;
+    border-radius: 0.5rem;
+    box-shadow:
+    /* The top layer shadow */ 0 -1px 1px rgba(0, 0, 0, 0.15),
+      /* The second layer */ 0 -10px 0 -5px #eee,
+      /* The second layer shadow */ 0 -10px 1px -4px rgba(0, 0, 0, 0.15),
+      /* The third layer */ 0 -20px 0 -10px #eee,
+      /* The third layer shadow */ 0 -20px 1px -9px rgba(0, 0, 0, 0.15);
+    img {
+      height: auto;
+      border-top-left-radius: 0.5rem;
+      border-top-right-radius: 0.5rem;
+      border-bottom-left-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+    .stack-title {
+      margin-bottom: 0.4rem;
+    }
+    .content {
+      margin: -5px 0 0 0;
+      padding: 0.5rem 1rem;
+      border-bottom-left-radius: 0.25rem;
+      box-shadow: 1px 8px 23px 7px rgba(0, 0, 0, 0.12);
+      border-bottom-right-radius: 0.25rem;
+    }
+  }
+
+  .volumes-grid {
+    display: -webkit-box; /* Not needed if autoprefixing */
+    display: -ms-flexbox; /* Not needed if autoprefixing */
+    display: flex;
+    margin-left: -30px; /* gutter size offset */
+    width: auto;
+  }
+  .volumes-grid-column {
+    padding-left: 22px; /* gutter size */
+    background-clip: padding-box;
+    & > div {
+      /* change div to reference your elements you put in <Masonry> */
+      margin-bottom: 20px;
+    }
+  }
+}
+
+.min {
+  overflow: visible;
+  margin: auto;
+  .tag__custom {
+    height: auto !important;
+    padding: 0.3rem;
+    white-space: unset !important;
+    width: 100%;
+    background-color: #effaf5;
+    color: #257953;
+  }
+  .tags {
+    display: inline;
+    margin-right: 5px;
+    margin-left: 5px;
+    &:first-child {
+      margin-left: 0;
+    }
+  }
+  pre {
+    border-radius: 0.4em;
+    margin: 10px 0 10px 0;
+    white-space: pre-wrap;
+  }
+}
+
+.generic-card {
+  display: inline-block;
+  background-color: #fff;
+  border-top-left-radius: 0.4rem;
+  border-top-right-radius: 0.4rem;
+  border-bottom-left-radius: 0.4rem;
+  border-bottom-right-radius: 0.4rem;
+  box-shadow: 1px 8px 23px 7px rgba(0, 0, 0, 0.12);
+
+  .green-border {
+    border: 1px dotted #168b64;
+    border-radius: 0.4rem;
+  }
+
+  .truncate {
+    width: 100px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .partial-rounded-card-image {
+    figure {
+      display: flex;
+      img {
+        border-top-left-radius: 0.4rem;
+        border-top-right-radius: 0.4rem;
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 0;
+      }
+    }
+  }
+  .rounded-card-image {
+    figure {
+      display: flex;
+      img {
+        border-radius: 0.4rem;
+      }
+    }
+  }
+  .card-content {
+    .card-title {
+      margin-bottom: 0.4rem;
+    }
+    .custom-icon,
+    i {
+      margin: 4px 4px 4px 0;
+    }
+    padding: 0.5rem 1rem;
+  }
+}
+.card-container {
+  // display: grid;
+  // grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  // column-gap: 0.5em;
+  // row-gap: 1.2em;
+
+  .card {
+    margin: 0 0 15px 0;
+
+    .partial-rounded-card-image {
+      img {
+        border-top-left-radius: 0.4rem;
+        border-top-right-radius: 0.4rem;
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 0;
+      }
+    }
+    .rounded-card-image {
+      border-radius: 0.4rem;
+    }
+
+    .is-horizontal {
+      // margin: $boxSpacing / 2;
+      border-radius: 1.5em;
+      height: $flexSize;
+      max-width: $flexSize * 3;
+      flex: 1 1 auto;
+      display: flex;
+      .card-image {
+        // leaving this here... for posterity
+        img.image {
+          border-top-left-radius: 8px;
+          border-bottom-left-radius: 8px;
+          border-top-right-radius: 0;
+          border-bottom-right-radius: 0;
+          height: 100%;
+          max-width: $flexSize * 1.3;
+          object-fit: cover;
+          flex: 1 1 auto;
+        }
+        img.cropped-image {
+          width: 70px;
+          border-top-left-radius: 8px;
+          border-bottom-left-radius: 8px;
+          border-top-right-radius: 0;
+          border-bottom-right-radius: 0;
+          height: 64px;
+          object-fit: cover;
+          object-position: 100% 0;
+          //  flex: 1 1 auto;
+        }
+      }
+    }
+    .card-content {
+      align-self: top;
+      flex: 1;
+      padding-left: 0.7em;
+      padding-top: 0.4em;
+      padding-bottom: 0em;
+    }
+  }
+}
+
+// raw file details
+.raw-file-details {
+  padding: 1rem;
+  background-color: beige;
+  border-radius: 0.5rem;
+}
+
+.comic-viewer {
+  border: 1px solid red;
+}
+
+// comicvine metadata
+.comicvine-metadata {
+  background-color: #f2f1f9;
+  padding: 0.8rem;
+  border-radius: 0.5rem;
+}
+
+.issue-metadata {
+  background-color: #fbffee;
+  padding: 0.8em;
+  border-radius: 0.5rem;
+  .name {
+    font-size: 0.95rem;
+    color: #4a4f50;
+  }
+}
+
+.comicInfo-metadata {
+  background-color: #f7ebdd;
+  padding: 0.8rem;
+  border-radius: 0.5rem;
+}
+
+// Comic Detail
+.comic-detail {
+  dl {
+    dd {
+      margin: 0;
+    }
+  }
+  .button {
+    .airdcpp-text {
+      margin: 0 0 0 0.2rem;
+    }
+  }
+}
+
+// AirDC++ search results
+.dupe-search-result {
+  background: lavender;
+}
+
+// Search
+.search {
+  .main-search-bar {
+    border: 0;
+    border-bottom: 1px solid #999;
+    border-radius: 0;
+    outline: 0;
+    background: transparent;
+    box-shadow: none;
+  }
+}
+// Library
+.header-area {
+  width: 100%;
+  padding: 25px 0 15px 0;
+  position: sticky;
+  z-index:9999;
+  background: #fffffc;
+  top: 50px;
+}
+
+.library {
+  .table-controls {
+    background: #fffffc;
+    justify-content: space-between;
+    position: sticky;
+    top: 126px;
+    padding-bottom: 10px;
+  }
+  .pagination {
+    margin: 0;
+    background: #fffffc;
+  }
+
+  table {
+    border-collapse: separate;
+    width: 100%;
+    thead {
+      position: sticky;
+      top: 250px;
+      z-index: 1;
+      background: #fffffc;
+      min-height: 130px;
+    }
+    tr {
+      td {
+        border: 0 none;
+        .card {
+          margin: 8px 0 7px 0;
+          .name {
+            margin: 0 0 4px 0;
+          }
+        }
+      }
+    }
+    tbody {
+      padding: 10px 0 0 0;
+    }
+  }
+}
+
+// Comic Detail
+.control-palette {
+  background-color: #fff6de;
+  display: inline-block;
+  i {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    // padding: 1.5rem 2rem;
+  }
+}
+
+// airdcpp downloads tab
+.tabs {
+  .download-icon-labels {
+    .downloads-count {
+      margin: 0 1em -1px 0.4em;
+      border: 1px solid #ccc;
+    }
+  }
+  .download-tab-name {
+  }
+}
+
+// drawer content padding override
+.slide-pane__content {
+  padding: 24px 12px;
+}
+
+.slide-pane__header {
+  margin-top: 3.5rem;
+}
+
+.comic-vine-match-drawer {
+  // comic detail drawer
+
+  .search-criteria-card {
+    width: 100%;
+    .card-content {
+      padding: 10px;
+      .ant-divider-horizontal {
+        margin: 12px 0;
+      }
+    }
+  }
+
+  .field {
+    margin: 5px 0 0 0;
+  }
+}
+
+// Volume detail
+.volume-details {
+  .is-volume-related {
+    $tag-background-color: $volume-color;
+  }
+  .issues-container {
+    display: -webkit-box; /* Not needed if autoprefixing */
+    display: -ms-flexbox; /* Not needed if autoprefixing */
+    display: flex;
+    margin-left: -10px; /* gutter size offset */
+    width: auto;
+    .issues-column {
+      max-width: 102px;
+      margin: 10px;
+      background-clip: padding-box;
+      & > div {
+        /* change div to reference your elements you put in <Masonry> */
+        margin-bottom: 20px;
+      }
+    }
+  }
+}
+// Potential issue matches in library slideout panel
+.potential-matches-container {
+  .potential-issue-match {
+    border-radius: 0.3rem;
+    background-color: beige;
+    padding: 10px;
+    pre {
+      padding: 5px;
+      background-color: transparent;
+      border-radius: 0.3rem;
+      white-space: pre-wrap; /* Since CSS 2.1 */
+      white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
+      white-space: -pre-wrap; /* Opera 4-6 */
+      white-space: -o-pre-wrap; /* Opera 7 */
+      word-wrap: break-word;
+    }
+    .generic-card {
+      max-width: 90px;
+    }
+  }
+}
+
+// comicvine search results
+.search-results-container {
+  margin: 15px 0 0 0;
+  overflow: hidden;
+
+  .search-result {
+    margin: 0 0 10px 0;
+    padding: 1em;
+    border-radius: 10px;
+    background: #f2f1f9;
+    .cover-image {
+      border-radius: 5px;
+    }
+    .search-result-details {
+      .score {
+        float: right;
+      }
+    }
+    .volume-information {
+      margin-top: -2.5em;
+      width: 80%;
+      background: #fdecd1;
+      border-radius: 10px;
+    }
+    .vertical-line {
+      position: relative;
+      top: -25px;
+      left: 1.5rem;
+      border: 2px dotted #ccc;
+      width: 20px;
+      min-height: 35px;
+
+      border-color: transparent transparent #f3a22d #f3a22d;
+      border-bottom-left-radius: 10px;
+    }
+  }
+}
+
+// Library grid
+.my-masonry-grid {
+  display: -webkit-box; /* Not needed if autoprefixing */
+  display: -ms-flexbox; /* Not needed if autoprefixing */
+  display: flex;
+  margin-left: -30px; /* gutter size offset */
+  width: auto;
+}
+.my-masonry-grid_column {
+  padding-left: 30px; /* gutter size */
+  background-clip: padding-box;
+}
+
+.my-masonry-grid_column > div {
+  /* change div to reference your elements you put in <Masonry> */
+  margin-bottom: 20px;
+}
+
+// progress
+.progress-indicator-container {
+  height: 100%;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  .indicator {
+    padding: 5px;
+    width: 120px;
+    height: 120px;
   }
 }

src/client/components/App.tsx

@@ -1,15 +1,52 @@
-import React, { ReactElement } from "react";
-import { Outlet } from "react-router-dom";
-import { Navbar2 } from "./shared/Navbar2";
+import React, { ReactElement, useContext, useEffect } from "react";
+import Dashboard from "./Dashboard/Dashboard";
+import Import from "./Import/Import";
+import { ComicDetailContainer } from "./ComicDetail/ComicDetailContainer";
+import TabulatedContentContainer from "./Library/TabulatedContentContainer";
+import LibraryGrid from "./Library/LibraryGrid";
+import Search from "./Search/Search";
+import Settings from "./Settings/Settings";
+import VolumeDetail from "./VolumeDetail/VolumeDetail";
+import Downloads from "./Downloads/Downloads";
+
+import { Routes, Route } from "react-router-dom";
+import Navbar from "./shared/Navbar";
 import "../assets/scss/App.scss";
 
+import { SocketIOProvider } from "../context/SocketIOContext";
+import socketIOConnectionInstance from "../shared/socket.io/instance";
+import { isEmpty, isNil, isUndefined } from "lodash";
+import {
+  AIRDCPP_DOWNLOAD_PROGRESS_TICK,
+  LS_SINGLE_IMPORT,
+} from "../constants/action-types";
+
+/**
+ * Method that initializes an AirDC++ socket connection
+ * 1. Initializes event listeners for download init, tick and complete events
+ * 2. Handles errors in case the connection to AirDC++ is not established or terminated
+ * @returns void
+ */
+
 export const App = (): ReactElement => {
-  return (
-    <>
-      <Navbar2 />
-      <Outlet />
-    </>
-  );
+  // useEffect(() => {
+  //   // Check if there is a sessionId in localStorage
+  //   const sessionId = localStorage.getItem("sessionId");
+  //   if (!isNil(sessionId)) {
+  //     // Resume the session
+  //     dispatch({
+  //       type: "RESUME_SESSION",
+  //       meta: { remote: true },
+  //       session: { sessionId },
+  //     });
+  //   } else {
+  //     // Inititalize the session and persist the sessionId to localStorage
+  //     socketIOConnectionInstance.on("sessionInitialized", (sessionId) => {
+  //       localStorage.setItem("sessionId", sessionId);
+  //     });
+  //   }
+  // }, []);
+  return <>{/* The rest of your application */}</>;
 };
 
 export default App;

src/client/components/ComicDetail/AcquisitionPanel.tsx

@@ -1,16 +1,21 @@
-import React, { useCallback, ReactElement, useEffect, useState } from "react";
-import { getBundlesForComic, sleep } from "../../actions/airdcpp.actions";
-import { SearchQuery, PriorityEnum, SearchResponse } from "threetwo-ui-typings";
+import React, {
+  useCallback,
+  useContext,
+  ReactElement,
+  useEffect,
+  useState,
+} from "react";
+import {
+  search,
+  downloadAirDCPPItem,
+  getBundlesForComic,
+} from "../../actions/airdcpp.actions";
+import { useDispatch, useSelector } from "react-redux";
 import { RootState, SearchInstance } from "threetwo-ui-typings";
 import ellipsize from "ellipsize";
 import { Form, Field } from "react-final-form";
-import { difference } from "../../shared/utils/object.utils";
 import { isEmpty, isNil, map } from "lodash";
-import { useStore } from "../../store";
-import { useShallow } from "zustand/react/shallow";
-import { useQuery, useQueryClient } from "@tanstack/react-query";
-import axios from "axios";
-import { AIRDCPP_SERVICE_BASE_URI } from "../../constants/endpoints";
+import { AirDCPPSocketContext } from "../../context/AirDCPPSocket";
 
 interface IAcquisitionPanelProps {
   query: any;
@@ -22,241 +27,162 @@ interface IAcquisitionPanelProps {
 export const AcquisitionPanel = (
   props: IAcquisitionPanelProps,
 ): ReactElement => {
-  const { socketIOInstance } = useStore(
-    useShallow((state) => ({
-      socketIOInstance: state.socketIOInstance,
-    })),
-  );
-
-  interface SearchData {
-    query: Pick<SearchQuery, "pattern"> & Partial<Omit<SearchQuery, "pattern">>;
-    hub_urls: string[] | undefined | null;
-    priority: PriorityEnum;
-  }
-  interface SearchResult {
-    result: {
-      id: number;
-    };
-    search_id: number;
-    // Add other properties as needed
-  }
-
-  const handleSearch = (searchQuery) => {
-    // Use the already connected socket instance to emit events
-    socketIOInstance.emit("initiateSearch", searchQuery);
-  };
-
-  const {
-    data: settings,
-    isLoading,
-    isError,
-  } = useQuery({
-    queryKey: ["settings"],
-    queryFn: async () =>
-      await axios({
-        url: "http://localhost:3000/api/settings/getAllSettings",
-        method: "GET",
-      }),
-  });
-  /**
-   * Get the hubs list from an AirDCPP Socket
-   */
-  const { data: hubs } = useQuery({
-    queryKey: ["hubs"],
-    queryFn: async () =>
-      await axios({
-        url: `${AIRDCPP_SERVICE_BASE_URI}/getHubs`,
-        method: "POST",
-        data: {
-          host: settings?.data.directConnect?.client?.host,
-        },
-      }),
-    enabled: !isEmpty(settings?.data.directConnect?.client?.host),
-  });
-  const { comicObjectId } = props;
   const issueName = props.query.issue.name || "";
+  // const { settings } = props;
   const sanitizedIssueName = issueName.replace(/[^a-zA-Z0-9 ]/g, " ");
 
+  // Selectors for picking state
+  const airDCPPSearchResults = useSelector((state: RootState) => {
+    return state.airdcpp.searchResults;
+  });
+  const isAirDCPPSearchInProgress = useSelector(
+    (state: RootState) => state.airdcpp.isAirDCPPSearchInProgress,
+  );
+  const searchInfo = useSelector(
+    (state: RootState) => state.airdcpp.searchInfo,
+  );
+  const searchInstance: SearchInstance = useSelector(
+    (state: RootState) => state.airdcpp.searchInstance,
+  );
+
+  // const settings = useSelector((state: RootState) => state.settings.data);
+  const airDCPPConfiguration = useContext(AirDCPPSocketContext);
+
+  const dispatch = useDispatch();
   const [dcppQuery, setDcppQuery] = useState({});
-  const [airDCPPSearchResults, setAirDCPPSearchResults] = useState<
-    SearchResult[]
-  >([]);
-  const [airDCPPSearchStatus, setAirDCPPSearchStatus] = useState(false);
-  const [airDCPPSearchInstance, setAirDCPPSearchInstance] = useState({});
-  const [airDCPPSearchInfo, setAirDCPPSearchInfo] = useState({});
-  const queryClient = useQueryClient();
 
-  // Construct a AirDC++ query based on metadata inferred, upon component mount
-  // Pre-populate the search input with the search string, so that
-  // all the user has to do is hit "Search AirDC++" to perform a search
   useEffect(() => {
-    // AirDC++ search query
-    const dcppSearchQuery = {
-      query: {
-        pattern: `${sanitizedIssueName.replace(/#/g, "")}`,
-        extensions: ["cbz", "cbr", "cb7"],
-      },
-      hub_urls: map(hubs?.data, (item) => item.value),
-      priority: 5,
-    };
-    setDcppQuery(dcppSearchQuery);
-  }, []);
-
-  /**
-   * Method to perform a search via an AirDC++ websocket
-   * @param {SearchData} data - a SearchData query
-   * @param {any} ADCPPSocket - an intialized AirDC++ socket instance
-   */
-  const search = async (searchData: any) => {
-    setAirDCPPSearchResults([]);
-    socketIOInstance.emit(
-      "call",
-      "socket.search",
-      {
-        query: searchData,
-        config: {
-          protocol: `ws`,
-          hostname: `localhost:5600`,
-          username: `user`,
-          password: `pass`,
+    if (!isEmpty(airDCPPConfiguration.airDCPPState.settings)) {
+      // AirDC++ search query
+      const dcppSearchQuery = {
+        query: {
+          pattern: `${sanitizedIssueName.replace(/#/g, "")}`,
+          extensions: ["cbz", "cbr", "cb7"],
         },
-      },
-      (data: any) => console.log(data),
-    );
-  };
-
-  socketIOInstance.on("searchResultAdded", (data: SearchResult) => {
-    setAirDCPPSearchResults((previousState) => {
-      const exists = previousState.some(
-        (item) => data.result.id === item.result.id,
-      );
-      if (!exists) {
-        return [...previousState, data];
-      }
-      return previousState;
-    });
-  });
-
-  socketIOInstance.on("searchResultUpdated", (groupedResult: SearchResult) => {
-    // ...update properties of the existing result in the UI
-    const bundleToUpdateIndex = airDCPPSearchResults?.findIndex(
-      (bundle) => bundle.result.id === groupedResult.result.id,
-    );
-    const updatedState = [...airDCPPSearchResults];
-    if (!isNil(difference(updatedState[bundleToUpdateIndex], groupedResult))) {
-      updatedState[bundleToUpdateIndex] = groupedResult;
+        hub_urls: map(
+          airDCPPConfiguration.airDCPPState.settings.directConnect.client.hubs,
+          (item) => item.value,
+        ),
+        priority: 5,
+      };
+      setDcppQuery(dcppSearchQuery);
     }
-    setAirDCPPSearchResults((state) => [...state, ...updatedState]);
-  });
+  }, [airDCPPConfiguration]);
 
-  socketIOInstance.on("searchInitiated", (data) => {
-    setAirDCPPSearchInstance(data.instance);
-  });
-  socketIOInstance.on("searchesSent", (data) => {
-    setAirDCPPSearchInfo(data.searchInfo);
-  });
-
-  /**
-   * Method to download a bundle associated with a search result from AirDC++
-   * @param {Number} searchInstanceId - description
-   * @param {String} resultId - description
-   * @param {String} comicObjectId - description
-   * @param {String} name - description
-   * @param {Number} size - description
-   * @param {any} type - description
-   * @param {any} config - description
-   * @returns {void}  - description
-   */
-  const download = async (
-    searchInstanceId: Number,
-    resultId: String,
-    comicObjectId: String,
-    name: String,
-    size: Number,
-    type: any,
-    config: any,
-  ): void => {
-    socketIOInstance.emit(
-      "call",
-      "socket.download",
-      {
-        searchInstanceId,
-        resultId,
-        comicObjectId,
-        name,
-        size,
-        type,
-        config,
-      },
-      (data: any) => console.log(data),
-    );
-  };
-  const getDCPPSearchResults = async (searchQuery) => {
-    const manualQuery = {
-      query: {
-        pattern: `${searchQuery.issueName}`,
-        extensions: ["cbz", "cbr", "cb7"],
-      },
-      hub_urls: map(hubs?.data, (hub) => hub.hub_url),
-      priority: 5,
-    };
-
-    search(manualQuery);
-  };
+  const getDCPPSearchResults = useCallback(
+    async (searchQuery) => {
+      const manualQuery = {
+        query: {
+          pattern: `${searchQuery.issueName}`,
+          extensions: ["cbz", "cbr", "cb7"],
+        },
+        hub_urls: map(
+          airDCPPConfiguration.airDCPPState.settings.directConnect.client.hubs,
+          (item) => item.value,
+        ),
+        priority: 5,
+      };
+      dispatch(
+        search(manualQuery, airDCPPConfiguration.airDCPPState.socket, {
+          username: `${airDCPPConfiguration.airDCPPState.settings.directConnect.client.host.username}`,
+          password: `${airDCPPConfiguration.airDCPPState.settings.directConnect.client.host.password}`,
+        }),
+      );
+    },
+    [dispatch, airDCPPConfiguration],
+  );
 
+  // 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}`,
+          },
+        ),
+      );
+    },
+    [airDCPPConfiguration],
+  );
   return (
     <>
-      <div className="mt-5">
-        {!isEmpty(hubs?.data) ? (
+      <div className="comic-detail columns">
+        {!isEmpty(airDCPPConfiguration.airDCPPState.socket) ? (
           <Form
             onSubmit={getDCPPSearchResults}
             initialValues={{
               issueName,
             }}
             render={({ handleSubmit, form, submitting, pristine, values }) => (
-              <form onSubmit={handleSubmit}>
-                <Field name="issueName">
-                  {({ input, meta }) => {
-                    return (
-                      <div className="max-w-fit">
-                        <div className="flex flex-row bg-slate-300 dark:bg-slate-400 rounded-l-lg">
-                          <div className="w-10 pl-2 pt-1 text-gray-400 dark:text-gray-200">
-                            <i className="icon-[solar--magnifer-bold-duotone] h-7 w-7" />
+              <form
+                onSubmit={handleSubmit}
+                className="column is-three-quarters"
+              >
+                <div className="box search">
+                  <div className="columns">
+                    <Field name="issueName">
+                      {({ input, meta }) => {
+                        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">
+                              Use this to perform a manual search.
+                            </span>
                           </div>
-                          <input
-                            {...input}
-                            className="dark:bg-slate-400 bg-slate-300 py-2 px-2 rounded-l-md border-gray-300 h-10 min-w-full dark:text-slate-800 sm:text-md sm:leading-5 focus:outline-none focus:shadow-outline-blue focus:border-blue-300"
-                            placeholder="Type an issue/volume name"
-                          />
+                        );
+                      }}
+                    </Field>
 
-                          <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"
-                          >
-                            <div className="flex flex-row">
-                              Search DC++
-                              <div className="h-5 w-5 ml-2">
-                                <img
-                                  src="/src/client/assets/img/airdcpp_logo.svg"
-                                  className="h-5 w-5"
-                                />
-                              </div>
-                            </div>
-                          </button>
-                        </div>
-                      </div>
-                    );
-                  }}
-                </Field>
+                    <div className="column">
+                      <button
+                        type="submit"
+                        className={
+                          isAirDCPPSearchInProgress
+                            ? "button is-loading is-warning"
+                            : "button"
+                        }
+                      >
+                        <span className="icon is-small">
+                          <img src="/src/client/assets/img/airdcpp_logo.svg" />
+                        </span>
+                        <span className="airdcpp-text">Search on AirDC++</span>
+                      </button>
+                    </div>
+                  </div>
+                </div>
               </form>
             )}
           />
         ) : (
-          <div className="">
-            <article className="">
-              <div className="">
+          <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 &gt; AirDC++ &gt; Connection</code>.
+                <code>Settings</code>.
               </div>
             </article>
           </div>
@@ -264,127 +190,91 @@ export const AcquisitionPanel = (
       </div>
 
       {/* AirDC++ search instance details */}
-      {!isNil(airDCPPSearchInstance) &&
-        !isEmpty(airDCPPSearchInfo) &&
-        !isNil(hubs) && (
-          <div className="flex flex-row gap-3 my-5 font-hasklig">
-            <div className="block max-w-sm h-fit p-6 text-sm bg-white border border-gray-200 rounded-lg shadow dark:bg-slate-400 dark:border-gray-700">
-              <dl>
-                <dt>
-                  <div className="mb-1">
-                    {hubs?.data.map((value, idx) => (
-                      <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>
-                  Extensions:
-                  <span className="has-text-weight-semibold">
-                    {airDCPPSearchInfo.query.extensions.join(", ")}
-                  </span>
-                </dd>
-                <dd>
-                  File type:
-                  <span className="has-text-weight-semibold">
-                    {airDCPPSearchInfo.query.file_type}
-                  </span>
-                </dd>
-              </dl>
-            </div>
-            <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">
-              <dl>
-                <dt>Search Instance: {airDCPPSearchInstance.id}</dt>
-                <dt>Owned by {airDCPPSearchInstance.owner}</dt>
-                <dd>Expires in: {airDCPPSearchInstance.expires_in}</dd>
-              </dl>
+      {!isNil(searchInfo) && !isNil(searchInstance) && (
+        <div className="columns">
+          <div className="column is-one-quarter is-size-7">
+            <div className="card">
+              <div className="card-content">
+                <dl>
+                  <dt>
+                    <div className="tags mb-1">
+                      {airDCPPConfiguration.airDCPPState.settings.directConnect.client.hubs.map(
+                        ({ value }) => (
+                          <span className="tag is-warning" key={value}>
+                            {value}
+                          </span>
+                        ),
+                      )}
+                    </div>
+                  </dt>
+                  <dt>
+                    Query:{" "}
+                    <span className="has-text-weight-semibold">
+                      {searchInfo.query.pattern}
+                    </span>
+                  </dt>
+                  <dd>Extensions: {searchInfo.query.extensions.join(", ")}</dd>
+                  <dd>File type: {searchInfo.query.file_type}</dd>
+                </dl>
+              </div>
             </div>
           </div>
-        )}
+          <div className="column is-one-quarter is-size-7">
+            <div className="card">
+              <div className="card-content">
+                <dl>
+                  <dt>Search Instance: {searchInstance.id}</dt>
+                  <dt>Owned by {searchInstance.owner}</dt>
+                  <dd>Expires in: {searchInstance.expires_in}</dd>
+                </dl>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
 
       {/* AirDC++ results */}
       <div className="columns">
         {!isNil(airDCPPSearchResults) && !isEmpty(airDCPPSearchResults) ? (
-          <div className="overflow-x-auto w-fit mt-4 rounded-lg border border-gray-200 dark:border-gray-500">
-            <table className="min-w-full divide-y-2 divide-gray-200 dark:divide-gray-500 text-md">
+          <div className="column">
+            <table className="table">
               <thead>
                 <tr>
-                  <th className="whitespace-nowrap px-2 py-2 font-medium text-gray-900 dark:text-slate-200">
-                    Name
-                  </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>
+                  <th>Name</th>
+                  <th>Type</th>
+                  <th>Slots</th>
+                  <th>Actions</th>
                 </tr>
               </thead>
-              <tbody className="divide-y divide-slate-100 dark:divide-gray-500">
-                {map(airDCPPSearchResults, ({ result, search_id }, idx) => {
+              <tbody>
+                {map(airDCPPSearchResults, ({ result }, idx) => {
                   return (
                     <tr
                       key={idx}
                       className={
-                        !isNil(result.dupe)
-                          ? "bg-gray-100 dark:bg-gray-700"
-                          : "w-fit text-sm"
+                        !isNil(result.dupe) ? "dupe-search-result" : ""
                       }
                     >
-                      <td className="whitespace-nowrap px-3 py-3 text-gray-700 dark:text-slate-300">
+                      <td>
                         <p className="mb-2">
                           {result.type.id === "directory" ? (
                             <i className="fas fa-folder"></i>
-                          ) : null}
+                          ) : null}{" "}
                           {ellipsize(result.name, 70)}
                         </p>
 
                         <dl>
                           <dd>
-                            <div className="inline-flex flex-row gap-2">
+                            <div className="tags">
                               {!isNil(result.dupe) ? (
-                                <span className="inline-flex items-center bg-slate-50 text-slate-800 text-xs font-medium px-2 rounded-md dark:text-slate-900 dark:bg-slate-400">
-                                  <span className="pr-1 pt-1">
-                                    <i className="icon-[solar--copy-bold-duotone] w-5 h-5"></i>
-                                  </span>
-
-                                  <span className="text-md text-slate-500 dark:text-slate-900">
-                                    Dupe
-                                  </span>
-                                </span>
+                                <span className="tag is-warning">Dupe</span>
                               ) : null}
-
-                              {/* Nicks */}
-                              <span className="inline-flex items-center bg-slate-50 text-slate-800 text-xs font-medium px-2 rounded-md dark:text-slate-900 dark:bg-slate-400">
-                                <span className="pr-1 pt-1">
-                                  <i className="icon-[solar--user-rounded-bold-duotone] w-5 h-5"></i>
-                                </span>
-
-                                <span className="text-md text-slate-500 dark:text-slate-900">
-                                  {result.users.user.nicks}
-                                </span>
+                              <span className="tag is-light is-info">
+                                {result.users.user.nicks}
                               </span>
-                              {/* Flags */}
                               {result.users.user.flags.map((flag, idx) => (
-                                <span className="inline-flex items-center bg-slate-50 text-slate-800 text-xs font-medium px-2 rounded-md dark:text-slate-900 dark:bg-slate-400">
-                                  <span className="pr-1 pt-1">
-                                    <i className="icon-[solar--tag-horizontal-bold-duotone] w-5 h-5"></i>
-                                  </span>
-
-                                  <span className="text-md text-slate-500 dark:text-slate-900">
-                                    {flag}
-                                  </span>
+                                <span className="tag is-light" key={idx}>
+                                  {flag}
                                 </span>
                               ))}
                             </div>
@@ -392,54 +282,36 @@ export const AcquisitionPanel = (
                         </dl>
                       </td>
                       <td>
-                        {/* Extension */}
-                        <span className="inline-flex items-center bg-slate-50 text-slate-800 text-xs font-medium px-2 rounded-md dark:text-slate-900 dark:bg-slate-400">
-                          <span className="pr-1 pt-1">
-                            <i className="icon-[solar--zip-file-bold-duotone] w-5 h-5"></i>
-                          </span>
-
-                          <span className="text-md text-slate-500 dark:text-slate-900">
-                            {result.type.str}
-                          </span>
+                        <span className="tag is-light is-info">
+                          {result.type.id === "directory"
+                            ? "directory"
+                            : result.type.str}
                         </span>
                       </td>
-                      <td className="px-2">
-                        {/* Slots */}
-                        <span className="inline-flex items-center bg-slate-50 text-slate-800 text-xs font-medium px-2 rounded-md dark:text-slate-900 dark:bg-slate-400">
-                          <span className="pr-1 pt-1">
-                            <i className="icon-[solar--settings-minimalistic-bold-duotone] w-5 h-5"></i>
+                      <td>
+                        <div className="tags has-addons">
+                          <span className="tag is-success">
+                            {result.slots.free} free
                           </span>
-
-                          <span className="text-md text-slate-500 dark:text-slate-900">
-                            {result.slots.total} slots; {result.slots.free} free
+                          <span className="tag is-light">
+                            {result.slots.total}
                           </span>
-                        </span>
+                        </div>
                       </td>
-                      <td className="px-2">
-                        <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"
+                      <td>
+                        <a
                           onClick={() =>
-                            download(
-                              airDCPPSearchInstance.id,
+                            downloadDCPPResult(
+                              searchInstance.id,
                               result.id,
-                              comicObjectId,
                               result.name,
                               result.size,
                               result.type,
-                              {
-                                protocol: `ws`,
-                                hostname: `localhost:5600`,
-                                username: `user`,
-                                password: `pass`,
-                              },
                             )
                           }
                         >
-                          <span className="text-xs">Download</span>
-                          <span className="w-5 h-5">
-                            <i className="h-5 w-5 icon-[solar--download-bold-duotone]"></i>
-                          </span>
-                        </button>
+                          <i className="fas fa-file-download"></i>
+                        </a>
                       </td>
                     </tr>
                   );
@@ -448,28 +320,13 @@ export const AcquisitionPanel = (
             </table>
           </div>
         ) : (
-          <div className="">
-            <article
-              role="alert"
-              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"
-            >
-              <div>
-                The default search term is an auto-detected title; you may need
-                to change it to get better matches if the auto-detected one
-                doesn't work.
-              </div>
-            </article>
-
-            <article
-              role="alert"
-              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"
-            >
-              <div>
+          <div className="column is-three-fifths">
+            <article className="message is-info">
+              <div className="message-body is-size-6 is-family-secondary">
                 Searching via <strong>AirDC++</strong> is still in{" "}
                 <strong>alpha</strong>. Some searches may take arbitrarily long,
-                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.
+                or may not work at all. Searches from <code>ADCS</code> hubs are
+                more reliable than <code>NMDCS</code> ones.
               </div>
             </article>
           </div>
@@ -479,4 +336,4 @@ export const AcquisitionPanel = (
   );
 };
 
-export default AcquisitionPanel;
+export default AcquisitionPanel;

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

@@ -1,26 +1,87 @@
-import React, { ReactElement } from "react";
-import Select from "react-select";
+import { filter, isEmpty, isNil, isUndefined } from "lodash";
+import React, { ReactElement, useCallback } from "react";
+import { useSelector, useDispatch } from "react-redux";
+import Select, { components } from "react-select";
+import { fetchComicVineMatches } from "../../../actions/fileops.actions";
+import { refineQuery } from "filename-parser";
 
 export const Menu = (props): ReactElement => {
-  const {
-    filteredActionOptions,
-    customStyles,
-    handleActionSelection,
-    Placeholder,
-  } = props.configuration;
+  const { data } = props;
+  const { setSlidingPanelContentId, setVisible } = props.handlers;
+  const dispatch = useDispatch();
+  const openDrawerWithCVMatches = useCallback(() => {
+    let seriesSearchQuery: IComicVineSearchQuery = {} as IComicVineSearchQuery;
+    let issueSearchQuery: IComicVineSearchQuery = {} as IComicVineSearchQuery;
+
+    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);
+  }, [dispatch, 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;
+    }
+  };
 
   return (
     <Select
+      className="basic-single"
+      classNamePrefix="select"
       components={{ Placeholder }}
       placeholder={
-        <span className="inline-flex flex-row items-center gap-2 pt-1">
-          <div className="w-6 h-6">
-            <i className="icon-[solar--cursor-bold-duotone] w-6 h-6"></i>
-          </div>
-          <div>Select An Action</div>
+        <span>
+          <i className="fa-solid fa-list"></i> Actions
         </span>
       }
-      styles={customStyles}
       name="actions"
       isSearchable={false}
       options={filteredActionOptions}

src/client/components/ComicDetail/AirDCPPBundles.tsx

@@ -1,51 +0,0 @@
-import React from "react";
-import prettyBytes from "pretty-bytes";
-import dayjs from "dayjs";
-import ellipsize from "ellipsize";
-import { map } from "lodash";
-
-export const AirDCPPBundles = (props) => {
-  return (
-    <div className="overflow-x-auto w-fit mt-4 rounded-lg border border-gray-200">
-      <table className="min-w-full divide-y-2 divide-gray-200 dark:divide-gray-200 text-md">
-        <thead>
-          <tr>
-            <th className="whitespace-nowrap px-4 py-2 font-medium text-gray-900 dark:text-slate-200">
-              Filename
-            </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 className="divide-y divide-gray-200">
-          {map(props.data, (bundle) => (
-            <tr key={bundle.id} className="text-sm">
-              <td className="whitespace-nowrap px-2 py-2 text-gray-700 dark:text-slate-300">
-                <h5>{ellipsize(bundle.name, 58)}</h5>
-                <span className="text-xs">{ellipsize(bundle.target, 88)}</span>
-              </td>
-              <td className="whitespace-nowrap px-2 py-2 text-gray-700 dark:text-slate-300">
-                {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 className="whitespace-nowrap px-2 py-2 text-gray-700 dark:text-slate-300">
-                <span className="tag is-warning">{bundle.id}</span>
-              </td>
-            </tr>
-          ))}
-        </tbody>
-      </table>
-    </div>
-  );
-};

src/client/components/ComicDetail/ComicDetail.tsx

@@ -1,4 +1,5 @@
 import React, { useState, ReactElement, useCallback } from "react";
+import { useDispatch, useSelector } from "react-redux";
 import { useParams } from "react-router-dom";
 import Card from "../shared/Carda";
 import { ComicVineMatchPanel } from "./ComicVineMatchPanel";
@@ -12,12 +13,10 @@ import { Menu } from "./ActionMenu/Menu";
 import { ArchiveOperations } from "./Tabs/ArchiveOperations";
 import { ComicInfoXML } from "./Tabs/ComicInfoXML";
 import AcquisitionPanel from "./AcquisitionPanel";
-import TorrentSearchPanel from "./TorrentSearchPanel";
 import DownloadsPanel from "./DownloadsPanel";
 import { VolumeInformation } from "./Tabs/VolumeInformation";
 
-import { isEmpty, isUndefined, isNil, filter } from "lodash";
-import { components } from "react-select";
+import { isEmpty, isUndefined, isNil } from "lodash";
 import { RootState } from "threetwo-ui-typings";
 
 import "react-sliding-pane/dist/react-sliding-pane.css";
@@ -29,10 +28,6 @@ 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 = {};
 /**
@@ -52,9 +47,6 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => {
       rawFileDetails,
       inferredMetadata,
       sourcedMetadata: { comicvine, locg, comicInfo },
-      acquisition,
-      createdAt,
-      updatedAt,
     },
     userSettings,
   } = data;
@@ -62,29 +54,37 @@ 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();
+  const dispatch = useDispatch();
 
   const openModal = useCallback((filePath) => {
     setIsOpen(true);
-    // dispatch(
-    //   extractComicArchive(filePath, {
-    //     type: "full",
-    //     purpose: "reading",
-    //     imageResizeOptions: {
-    //       baseWidth: 1024,
-    //     },
-    //   }),
-    // );
+    dispatch(
+      extractComicArchive(filePath, {
+        type: "full",
+        purpose: "reading",
+        imageResizeOptions: {
+          baseWidth: 1024,
+        },
+      }),
+    );
   }, []);
 
-  // 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";
@@ -100,183 +100,57 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => {
     CVMatches: {
       content: (props) => (
         <>
-          <div>
-            <ComicVineSearchForm data={rawFileDetails} />
+          <div className="card search-criteria-card">
+            <div className="card-content">
+              <ComicVineSearchForm data={rawFileDetails} />
+            </div>
           </div>
-
-          <div className="border-slate-500 border rounded-lg p-2 mt-3">
-            <p className="">Searching for:</p>
-            {inferredMetadata.issue ? (
-              <>
-                <span className="">{inferredMetadata.issue.name} </span>
-                <span className=""> # {inferredMetadata.issue.number} </span>
-              </>
-            ) : null}
-          </div>
-          <ComicVineMatchPanel
-            props={{
-              comicVineMatches,
-              comicObjectId,
-            }}
-          />
+          <p className="is-size-5 mt-3 mb-2 ml-3">Searching for:</p>
+          {inferredMetadata.issue ? (
+            <div className="ml-3">
+              <span className="tag mr-3">{inferredMetadata.issue.name} </span>
+              <span className="tag"> # {inferredMetadata.issue.number} </span>
+            </div>
+          ) : null}
+          {!comicVineAPICallProgress ? (
+            <ComicVineMatchPanel
+              props={{
+                comicVineSearchQueryObject,
+                comicVineAPICallProgress,
+                comicVineSearchResults,
+                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 data={rawFileDetails} />,
+      content: () => <EditMetadataPanel />,
     },
   };
 
-  // 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);
+    !isUndefined(rawFileDetails) && !isEmpty(rawFileDetails.cover);
 
   const { issueName, url } = determineCoverFile({
     rawFileDetails,
@@ -296,9 +170,7 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => {
     {
       id: 1,
       name: "Volume Information",
-      icon: (
-        <i className="h-5 w-5 icon-[solar--book-2-bold] text-slate-500 dark:text-slate-300"></i>
-      ),
+      icon: <i className="fa-solid fa-layer-group"></i>,
       content: isComicBookMetadataAvailable ? (
         <VolumeInformation data={data.data} key={1} />
       ) : null,
@@ -307,30 +179,26 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => {
     {
       id: 2,
       name: "ComicInfo.xml",
-      icon: (
-        <i className="h-5 w-5 icon-[solar--code-file-bold-duotone] text-slate-500 dark:text-slate-300" />
-      ),
+      icon: <i className="fa-solid fa-code"></i>,
       content: (
-        <div key={2}>
-          {!isNil(comicInfo) && <ComicInfoXML json={comicInfo} />}
+        <div className="columns" key={2}>
+          <div className="column is-three-quarters">
+            {!isNil(comicInfo) && <ComicInfoXML json={comicInfo} />}
+          </div>
         </div>
       ),
       shouldShow: !isEmpty(comicInfo),
     },
     {
       id: 3,
-      icon: (
-        <i className="h-5 w-5 icon-[solar--winrar-bold-duotone] text-slate-500 dark:text-slate-300" />
-      ),
+      icon: <i className="fa-regular fa-file-archive"></i>,
       name: "Archive Operations",
       content: <ArchiveOperations data={data.data} key={3} />,
       shouldShow: areRawFileDetailsAvailable,
     },
     {
       id: 4,
-      icon: (
-        <i className="h-5 w-5 icon-[solar--folder-path-connect-bold-duotone] text-slate-500 dark:text-slate-300" />
-      ),
+      icon: <i className="fa-solid fa-circle-nodes"></i>,
       name: "DC++ Search",
       content: (
         <AcquisitionPanel
@@ -345,37 +213,26 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => {
     },
     {
       id: 5,
-      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>
-      ),
+      icon: <i className="fa-solid fa-droplet"></i>,
       name: "Torrent Search",
-      content: <TorrentSearchPanel comicObjectId={_id} issueName={issueName} />,
+      content: <>Torrents</>,
       shouldShow: true,
     },
     {
       id: 6,
-      name: "Downloads",
-      icon: (
-        <>
-          {acquisition?.directconnect?.downloads?.length +
-            acquisition?.torrent.length}
-        </>
+      icon: null,
+      name: !isEmpty(data.data) ? (
+        <span className="download-tab-name">Downloads</span>
+      ) : (
+        "Downloads"
+      ),
+      content: !isNil(data.data) && !isEmpty(data.data) && (
+        <DownloadsPanel
+          data={data.data.acquisition.directconnect}
+          comicObjectId={comicObjectId}
+          key={5}
+        />
       ),
-      content:
-        !isNil(data.data) && !isEmpty(data.data) ? (
-          <DownloadsPanel key={5} />
-        ) : (
-          <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>
-        ),
       shouldShow: true,
     },
   ];
@@ -387,74 +244,73 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => {
   // 2. from the CV-scraped version
 
   return (
-    <section className="container mx-auto">
+    <section className="container">
       <div className="section">
         {!isNil(data) && !isEmpty(data) && (
           <>
-            <div>
-              <div className="flex flex-row mt-5">
+            <h1 className="title">{issueName}</h1>
+            <div className="columns is-multiline">
+              <div className="column is-narrow">
                 <Card
                   imageUrl={url}
-                  orientation={"cover-only"}
+                  orientation={"vertical"}
                   hasDetails={false}
+                  cardContainerStyle={{ maxWidth: 275 }}
                 />
-
-                {/* raw file details */}
+                {/* action dropdown */}
+                <div className="mt-4 is-size-7">
+                  <Menu
+                    data={data.data}
+                    handlers={{ setSlidingPanelContentId, setVisible }}
+                  />
+                </div>
+              </div>
+              {/* raw file details */}
+              <div className="column">
                 {!isUndefined(rawFileDetails) &&
                   !isEmpty(rawFileDetails.cover) && (
-                    <div className="grid">
+                    <>
                       <RawFileDetails
                         data={{
                           rawFileDetails: rawFileDetails,
                           inferredMetadata: inferredMetadata,
-                          created_at: createdAt,
-                          updated_at: updatedAt,
                         }}
+                      />
+                      {/* Read comic button */}
+                      <button
+                        className="button is-success is-light"
+                        onClick={() => openModal(rawFileDetails.filePath)}
                       >
-                        {/* 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,
+                        <i className="fa-solid fa-book-open mr-2"></i>
+                        Read
+                      </button>
+
+                      <Modal
+                        style={{ content: { marginTop: "2rem" } }}
+                        isOpen={modalIsOpen}
+                        onAfterOpen={afterOpenModal}
+                        onRequestClose={closeModal}
+                        contentLabel="Example Modal"
+                      >
+                        <button onClick={closeModal}>close</button>
+                        {extractedComicBook && (
+                          <ComicViewer
+                            pages={extractedComicBook}
+                            direction="ltr"
+                            className={{
+                              closeButton: "border: 1px solid red;",
                             }}
                           />
-                        </div>
-                      </RawFileDetails>
-
-                      {/* <Modal
-                      style={{ content: { marginTop: "2rem" } }}
-                      isOpen={modalIsOpen}
-                      onAfterOpen={afterOpenModal}
-                      onRequestClose={closeModal}
-                      contentLabel="Example Modal"
-                    >
-                      <button onClick={closeModal}>close</button>
-                      {extractedComicBook && (
-                        <ComicViewer
-                          pages={extractedComicBook}
-                          direction="ltr"
-                          className={{
-                            closeButton: "border: 1px solid red;",
-                          }}
-                        />
-                      )}
-                    </Modal> */}
-                    </div>
+                        )}
+                      </Modal>
+                    </>
                   )}
               </div>
             </div>
 
-            <TabControls
-              filteredTabs={filteredTabs}
-              downloadCount={acquisition?.directconnect?.downloads?.length}
-            />
+            {<TabControls filteredTabs={filteredTabs} />}
 
-            <StyledSlidingPanel
+            <SlidingPane
               isOpen={visible}
               onRequestClose={() => setVisible(false)}
               title={"Comic Vine Search Matches"}
@@ -462,7 +318,7 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => {
             >
               {slidingPanelContentId !== "" &&
                 contentForSlidingPanel[slidingPanelContentId].content()}
-            </StyledSlidingPanel>
+            </SlidingPane>
           </>
         )}
       </div>

src/client/components/ComicDetail/ComicDetailContainer.tsx

@@ -1,35 +1,22 @@
-import React, { ReactElement } from "react";
+import { isEmpty, isNil, isUndefined } from "lodash";
+import React, { ReactElement, useContext, useEffect, useState } from "react";
+import { useSelector, useDispatch } from "react-redux";
 import { useParams } from "react-router-dom";
+import { getComicBookDetailById } from "../../actions/comicinfo.actions";
 import { ComicDetail } from "../ComicDetail/ComicDetail";
-import { useQuery } from "@tanstack/react-query";
-import { LIBRARY_SERVICE_BASE_URI } from "../../constants/endpoints";
-import axios from "axios";
 
 export const ComicDetailContainer = (): ReactElement | null => {
-  const { comicObjectId } = useParams<{ comicObjectId: string }>();
-  const {
-    data: comicBookDetailData,
-    isLoading,
-    isError,
-  } = useQuery({
-    queryKey: ["comicBookMetadata"],
-    queryFn: async () =>
-      await axios({
-        url: `${LIBRARY_SERVICE_BASE_URI}/getComicBookById`,
-        method: "POST",
-        data: {
-          id: comicObjectId,
-        },
-      }),
-  });
-
-  {
-    isError && <>Error</>;
-  }
-  {
-    isLoading && <>Loading...</>;
-  }
-  return (
-    comicBookDetailData?.data && <ComicDetail data={comicBookDetailData.data} />
+  const comicBookDetailData = useSelector(
+    (state: RootState) => state.comicInfo.comicBookDetail,
   );
+  const dispatch = useDispatch();
+
+  const { comicObjectId } = useParams<{ comicObjectId: string }>();
+  useEffect(() => {
+    dispatch(getComicBookDetailById(comicObjectId));
+    // dispatch(getSettings());
+  }, [dispatch]);
+  return !isEmpty(comicBookDetailData) ? (
+    <ComicDetail data={comicBookDetailData} />
+  ) : null;
 };

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 { isEmpty, isUndefined } from "lodash";
+import { 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="text-slate-500 dark:text-gray-400">
-      <div className="">
-        <div>
-          <div className="flex flex-row gap-4">
-            <div className="min-w-fit">
-              <Card
-                imageUrl={data.volumeInformation.image.thumb_url}
-                orientation={"cover-only"}
-                hasDetails={false}
-                // cardContainerStyle={{ maxWidth: 200 }}
-              />
-            </div>
-            <div className="flex flex-col gap-5">
-              <div className="flex flex-row">
-                <div>
-                  {/* Title */}
-                  <div>
-                    <div className="text-lg">{data.name}</div>
-                    <div className="text-sm">
-                      Is a part of{" "}
-                      <span className="has-text-info">
-                        {data.volumeInformation.name}
-                      </span>
-                    </div>
-                  </div>
+    <div className="column is-half">
+      <div className="comic-detail comicvine-metadata">
+        <dl>
+          <dt>ComicVine Metadata</dt>
+          <dd className="is-size-7">
+            Last scraped on {dayjs(updatedAt).format("MMM D YYYY [at] h:mm a")}
+          </dd>
 
-                  {/* 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>
+          <dd>
+            <div className="columns mt-2">
+              <div className="column is-2">
+                <Card
+                  imageUrl={data.volumeInformation.image.thumb_url}
+                  orientation={"vertical"}
+                  hasDetails={false}
+                  // cardContainerStyle={{ maxWidth: 200 }}
+                />
+              </div>
+              <div className="column is-10">
+                <dl>
+                  <dt>
+                    <h6 className="has-text-weight-bold mb-2">{data.name}</h6>
+                  </dt>
+                  <dd>
+                    Is a part of{" "}
+                    <span className="has-text-info">
+                      {data.volumeInformation.name}
                     </span>
-                  </div>
-                  <div>
-                    {data.issue_number && (
-                      <div className="">
-                        <span>Issue Number</span>
-                        <span>{data.issue_number}</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>
-                    )}
-                    {!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>
+                  </dd>
+                </dl>
               </div>
             </div>
-          </div>
-        </div>
+          </dd>
+        </dl>
       </div>
     </div>
   );

src/client/components/ComicDetail/ComicVineMatchPanel.tsx

@@ -2,41 +2,22 @@ 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 { comicObjectId, comicVineMatches } = comicVineData.props;
-  const { comicvine } = useStore(
-    useShallow((state) => ({
-      comicvine: state.comicvine,
-    })),
-  );
+  const {
+    comicObjectId,
+    comicVineSearchQueryObject,
+    comicVineAPICallProgress,
+    comicVineSearchResults,
+  } = comicVineData.props;
   return (
     <>
-      <div>
-        {!isEmpty(comicVineMatches) ? (
+      <div className="search-results-container">
+        {!isEmpty(comicVineSearchResults) && (
           <MatchResult
-            matchData={comicVineMatches}
+            matchData={comicVineSearchResults}
             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

@@ -2,6 +2,7 @@ import React, { useCallback } from "react";
 import { Form, Field } from "react-final-form";
 import Collapsible from "react-collapsible";
 import { fetchComicVineMatches } from "../../actions/fileops.actions";
+import { useDispatch } from "react-redux";
 
 /**
  * Component for performing search against ComicVine
@@ -13,6 +14,7 @@ import { fetchComicVineMatches } from "../../actions/fileops.actions";
  * )
  */
 export const ComicVineSearchForm = (data) => {
+  const dispatch = useDispatch();
   const onSubmit = useCallback((value) => {
     const userInititatedQuery = {
       inferredIssueDetails: {
@@ -22,7 +24,7 @@ export const ComicVineSearchForm = (data) => {
         year: value.issueYear,
       },
     };
-    // dispatch(fetchComicVineMatches(data, userInititatedQuery));
+    dispatch(fetchComicVineMatches(data, userInititatedQuery));
   }, []);
   const validate = () => {
     return true;
@@ -34,55 +36,83 @@ export const ComicVineSearchForm = (data) => {
       validate={validate}
       render={({ handleSubmit }) => (
         <form onSubmit={handleSubmit}>
-          <span className="flex items-center">
-            <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 className="field is-normal">
+            <label className="label mb-2 is-size-5">Search Manually</label>
           </span>
-          <label className="block py-1">Issue Name</label>
-          <Field name="issueName">
-            {(props) => (
-              <input
-                {...props.input}
-                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"
-                placeholder="Type the issue name"
-              />
-            )}
-          </Field>
-          <div className="flex flex-row gap-4">
-            <div>
-              <label className="block py-1">Number</label>
-              <Field name="issueNumber">
-                {(props) => (
-                  <input
-                    {...props.input}
-                    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>
-              <label className="block py-1">Year</label>
-              <Field name="issueYear">
-                {(props) => (
-                  <input
-                    {...props.input}
-                    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"
-                    placeholder="1984"
-                  />
-                )}
-              </Field>
+          <div className="field is-horizontal">
+            <div className="field-body">
+              <div className="field">
+                <Field name="issueName">
+                  {(props) => (
+                    <p className="control is-expanded has-icons-left">
+                      <input
+                        {...props.input}
+                        className="input is-normal"
+                        placeholder="Type the issue name"
+                      />
+                      <span className="icon is-small is-left">
+                        <i className="fas fa-journal-whills"></i>
+                      </span>
+                    </p>
+                  )}
+                </Field>
+              </div>
             </div>
+          </div>
 
-            <div className="flex justify-end mt-5">
-              <button
-                type="submit"
-                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"
-              >
-                Search
-              </button>
+          <div className="field is-horizontal">
+            <div className="field-body">
+              <div className="field">
+                <Field name="issueNumber">
+                  {(props) => (
+                    <p className="control has-icons-left">
+                      <input
+                        {...props.input}
+                        className="input is-normal"
+                        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="field-body">
+              <div className="field">
+                <div className="control">
+                  <button
+                    type="submit"
+                    className="button is-success is-light is-outlined is-small"
+                  >
+                    <span className="icon">
+                      <i className="fas fa-search"></i>
+                    </span>
+                    <span>Search</span>
+                  </button>
+                </div>
+              </div>
             </div>
           </div>
         </form>

src/client/components/ComicDetail/DownloadProgressTick.tsx

@@ -3,10 +3,10 @@ import React, { ReactElement } from "react";
 
 export const DownloadProgressTick = (props): ReactElement => {
   return (
-    <div>
-      <h4 className="is-size-5">{props.data.name}</h4>
+    <div >
+      <h4 className="is-size-6">{props.data.name}</h4>
       <div>
-        <span className="is-size-4 has-text-weight-semibold">
+        <span className="is-size-3 has-text-weight-semibold">
           {prettyBytes(props.data.downloaded_bytes)} of{" "}
           {prettyBytes(props.data.size)}{" "}
         </span>
@@ -20,12 +20,13 @@ export const DownloadProgressTick = (props): ReactElement => {
           %
         </progress>
       </div>
-      <div className="is-size-6 mt-1 mb-2">
-        <p>{prettyBytes(props.data.speed)} per second.</p>
+      <div className="is-size-5">
+        {prettyBytes(props.data.speed)} per second.
+      </div>
+      <div className="is-size-5">
         Time left:
         {Math.round(parseInt(props.data.seconds_left) / 60)}
       </div>
-
       <div>{props.data.target}</div>
     </div>
   );

src/client/components/ComicDetail/DownloadsPanel.tsx

@@ -1,145 +1,106 @@
-import React, { useEffect, useContext, ReactElement, useState } from "react";
+import React, { useEffect, useContext, ReactElement } from "react";
+import { getBundlesForComic } from "../../actions/airdcpp.actions";
+import { useDispatch, useSelector } from "react-redux";
 import { RootState } from "threetwo-ui-typings";
-import { isEmpty, map } from "lodash";
-import { AirDCPPBundles } from "./AirDCPPBundles";
-import { TorrentDownloads } from "./TorrentDownloads";
-import { useQuery } from "@tanstack/react-query";
-import axios from "axios";
-import {
-  LIBRARY_SERVICE_BASE_URI,
-  QBITTORRENT_SERVICE_BASE_URI,
-  TORRENT_JOB_SERVICE_BASE_URI,
-} from "../../constants/endpoints";
-import { useStore } from "../../store";
-import { useShallow } from "zustand/react/shallow";
-import { useParams } from "react-router-dom";
+import { isEmpty, isNil, map } from "lodash";
+import prettyBytes from "pretty-bytes";
+import dayjs from "dayjs";
+import ellipsize from "ellipsize";
+import { AirDCPPSocketContext } from "../../context/AirDCPPSocket";
 
 interface IDownloadsPanelProps {
-  key: number;
+  data: any;
+  comicObjectId: string;
 }
 
 export const DownloadsPanel = (
   props: IDownloadsPanelProps,
 ): ReactElement | null => {
-  const { comicObjectId } = useParams<{ comicObjectId: string }>();
-  const [bundles, setBundles] = useState([]);
-  const [infoHashes, setInfoHashes] = useState<string[]>([]);
-  const [torrentDetails, setTorrentDetails] = useState([]);
-  const [activeTab, setActiveTab] = useState("torrents");
-  const { airDCPPSocketInstance, socketIOInstance } = useStore(
-    useShallow((state: any) => ({
-      airDCPPSocketInstance: state.airDCPPSocketInstance,
-      socketIOInstance: state.socketIOInstance,
-    })),
-  );
+  const bundles = useSelector((state: RootState) => {
+    return state.airdcpp.bundles;
+  });
 
-  // React to torrent progress data sent over websockets
-  socketIOInstance.on("AS_TORRENT_DATA", (data) => {
-    const torrents = data.torrents
-      .flatMap(({ _id, details }) => {
-        if (_id === comicObjectId) {
-          return details;
-        }
-      })
-      .filter((item) => item !== undefined);
-    setTorrentDetails(torrents);
-  });
+  // AirDCPP Socket initialization
+  const userSettings = useSelector((state: RootState) => state.settings.data);
+  const airDCPPConfiguration = useContext(AirDCPPSocketContext);
+
+  const {
+    airDCPPState: { socket, settings },
+  } = airDCPPConfiguration;
+
+  const dispatch = useDispatch();
   // Fetch the downloaded files and currently-downloading file(s) from AirDC++
-  const { data: comicObject, isSuccess } = useQuery({
-    queryKey: ["bundles"],
-    queryFn: async () =>
-      await axios({
-        url: `${LIBRARY_SERVICE_BASE_URI}/getComicBookById`,
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json; charset=utf-8",
-        },
-        data: {
-          id: `${comicObjectId}`,
-        },
-      }),
-  });
-  const getBundles = async (comicObject) => {
-    if (comicObject?.data.acquisition.directconnect) {
-      const filteredBundles =
-        comicObject.data.acquisition.directconnect.downloads.map(
-          async ({ bundleId }) => {
-            return await airDCPPSocketInstance.get(`queue/bundles/${bundleId}`);
-          },
+  useEffect(() => {
+    try {
+      if (!isEmpty(userSettings)) {
+        dispatch(
+          getBundlesForComic(props.comicObjectId, socket, {
+            username: `${settings.directConnect.client.host.username}`,
+            password: `${settings.directConnect.client.host.password}`,
+          }),
         );
-      return await Promise.all(filteredBundles);
+      }
+    } catch (error) {
+      throw new Error(error);
     }
+  }, [dispatch, airDCPPConfiguration]);
+
+  const Bundles = (props) => {
+    return !isEmpty(props.data) ? (
+      <div className="column is-full">
+        <table className="table is-striped">
+          <thead>
+            <tr>
+              <th>Filename</th>
+              <th>Size</th>
+              <th>Download Time</th>
+              <th>Bundle ID</th>
+            </tr>
+          </thead>
+          <tbody>
+            {map(props.data, (bundle) => (
+              <tr key={bundle.id}>
+                <td>
+                  <h5>{ellipsize(bundle.name, 58)}</h5>
+                  <span className="is-size-7">{bundle.target}</span>
+                </td>
+                <td>{prettyBytes(bundle.size)}</td>
+                <td>
+                  {dayjs
+                    .unix(bundle.time_finished)
+                    .format("h:mm on ddd, D MMM, YYYY")}
+                </td>
+                <td>
+                  <span className="tag is-warning">{bundle.id}</span>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    ) : (
+      <div className="column is-full"> {"No Downloads Found"} </div>
+    );
   };
 
-  // Call the scheduled job for fetching torrent data
-  // triggered by the active tab been set to "torrents"
-  const { data: torrentData } = useQuery({
-    queryFn: () =>
-      axios({
-        url: `${TORRENT_JOB_SERVICE_BASE_URI}/getTorrentData`,
-        method: "GET",
-        params: {
-          trigger: activeTab,
-        },
-      }),
-    queryKey: [activeTab],
-  });
-
-  useEffect(() => {
-    getBundles(comicObject).then((result) => {
-      setBundles(result);
-    });
-  }, [comicObject]);
-
-  return (
-    <div className="columns is-multiline">
-      <div>
-        <div className="sm:hidden">
-          <label htmlFor="Download Type" className="sr-only">
-            Download Type
-          </label>
-
-          <select id="Tab" className="w-full rounded-md border-gray-200">
-            <option>DC++ Downloads</option>
-            <option>Torrents</option>
-          </select>
-        </div>
-
-        <div className="hidden sm:block">
-          <nav className="flex gap-6" aria-label="Tabs">
-            <a
-              href="#"
-              className={`shrink-0 rounded-lg p-2 text-sm font-medium hover:bg-gray-50 hover:text-gray-700 ${
-                activeTab === "directconnect"
-                  ? "bg-slate-200 dark:text-slate-200 dark:bg-slate-400 text-slate-800"
-                  : "dark:text-slate-400 text-slate-800"
-              }`}
-              aria-current="page"
-              onClick={() => setActiveTab("directconnect")}
-            >
-              DC++ Downloads
-            </a>
-
-            <a
-              href="#"
-              className={`shrink-0 rounded-lg p-2 text-sm font-medium hover:bg-gray-50 hover:text-gray-700 ${
-                activeTab === "torrents"
-                  ? "bg-slate-200 text-slate-800"
-                  : "dark:text-slate-400 text-slate-800"
-              }`}
-              onClick={() => setActiveTab("torrents")}
-            >
-              Torrents
-            </a>
-          </nav>
-        </div>
+  return !isNil(props.data) ? (
+    <>
+      <div className="columns is-multiline">
+        {!isEmpty(socket) ? (
+          <Bundles data={bundles} />
+        ) : (
+          <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>
-
-      {activeTab === "torrents" && <TorrentDownloads data={torrentDetails} />}
-      {!isEmpty(airDCPPSocketInstance) &&
-        !isEmpty(bundles) &&
-        activeTab === "directconnect" && <AirDCPPBundles data={bundles} />}
-    </div>
-  );
+    </>
+  ) : null;
 };
+
 export default DownloadsPanel;

src/client/components/ComicDetail/EditMetadataPanel.tsx

@@ -1,4 +1,5 @@
 import React, { ReactElement, useCallback, useEffect, useState } from "react";
+import { useSelector, useDispatch } from "react-redux";
 import { Form, Field } from "react-final-form";
 import arrayMutators from "final-form-arrays";
 import { FieldArray } from "react-final-form-arrays";
@@ -8,9 +9,7 @@ import TextareaAutosize from "react-textarea-autosize";
 export const EditMetadataPanel = (props): ReactElement => {
   const validate = async () => {};
   const onSubmit = async () => {};
-
-  const { data } = props;
-
+ 
   const AsyncSelectPaginateAdapter = ({ input, ...rest }) => {
     return (
       <AsyncSelectPaginate
@@ -29,9 +28,10 @@ export const EditMetadataPanel = (props): ReactElement => {
       />
     );
   };
-  // const rawFileDetails = useSelector(
-  //   (state: RootState) => state.comicInfo.comicBookDetail.rawFileDetails.name,
-  // );
+  const rawFileDetails = useSelector(
+    (state: RootState) => state.comicInfo.comicBookDetail.rawFileDetails.name,
+  );
+  const dispatch = useDispatch();
 
   return (
     <>
@@ -58,59 +58,90 @@ export const EditMetadataPanel = (props): ReactElement => {
                 <label className="label">Issue Details</label>
               </div>
               <div className="field-body">
-                <Field
-                  name="issue_name"
-                  component="input"
-                  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"
-                  initialValue={data.name}
-                  placeholder={"Issue Name"}
-                />
+                <div className="field">
+                  <p className="control is-expanded has-icons-left">
+                    <Field
+                      name="issue_name"
+                      component="input"
+                      className="input"
+                      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="mt-4 flex flex-row gap-2">
-              <div>
-                <div className="text-sm">Issue Number</div>
-                <Field
-                  name="issue_number"
-                  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="Issue Number"
-                />
-                <p className="text-xs">Do not enter the first zero</p>
-              </div>
-              <div>
+            <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="issue_number"
+                      component="input"
+                      className="input"
+                      placeholder="Issue Number"
+                    />
+                    <span className="icon is-small is-left">
+                      <i className="fa-solid fa-hashtag"></i>
+                    </span>
+                  </p>
+                  <p className="help">Do not enter the first zero</p>
+                </div>
                 {/* year */}
-                <div className="text-sm">Issue Year</div>
-                <Field
-                  name="issue_year"
-                  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"
-                />
-              </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 className="field">
+                  <p className="control">
+                    <Field
+                      name="issue_year"
+                      component="input"
+                      className="input"
+                    />
+                  </p>
+                </div>
               </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="mt-2">
-              <label className="text-sm">Description</label>
-              <Field
-                name={"description"}
-                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"
-                component={TextareaAutosizeAdapter}
-                placeholder={"Description"}
-              />
+            <div className="field is-horizontal">
+              <div className="field-label is-normal">
+                <label className="label">Description</label>
+              </div>
+              <div className="field-body">
+                <div className="field">
+                  <p className="control is-expanded has-icons-left">
+                    <Field
+                      name={"description"}
+                      className="textarea"
+                      component={TextareaAutosizeAdapter}
+                      placeholder={"Description"}
+                    />
+                  </p>
+                </div>
+              </div>
             </div>
 
             <hr size="1" />

src/client/components/ComicDetail/MatchResult.tsx

@@ -1,9 +1,9 @@
-import React from "react";
+import React, { useCallback } from "react";
+import { useDispatch, useSelector } from "react-redux";
 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;
@@ -15,24 +15,15 @@ const handleBrokenImage = (e) => {
 };
 
 export const MatchResult = (props: MatchResultProps) => {
-  const applyCVMatch = async (match, comicObjectId) => {
-    return await axios.request({
-      url: `${LIBRARY_SERVICE_BASE_URI}/applyComicVineMetadata`,
-      method: "POST",
-      data: {
-        match,
-        comicObjectId,
-      },
-    });
-  };
+  const dispatch = useDispatch();
+  const applyCVMatch = useCallback(
+    (match, comicObjectId) => {
+      dispatch(applyComicVineMatch(match, comicObjectId));
+    },
+    [dispatch],
+  );
   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)) {
@@ -42,90 +33,88 @@ export const MatchResult = (props: MatchResultProps) => {
             },
           });
         }
-        const bestMatchCSSClass = idx === 0 ? "bg-green-100" : "bg-slate-300";
         return (
-          <div className={`${bestMatchCSSClass} my-5 p-4 rounded-lg`} key={idx}>
-            <div className="flex flex-row gap-4">
-              <div className="min-w-fit">
+          <div className="search-result mb-4" key={idx}>
+            <div className="columns">
+              <div className="column is-one-fifth">
                 <img
-                  className="rounded-md"
+                  className="cover-image"
                   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}
 
-                  {/* score */}
-                  <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">
-                      <i className="icon-[solar--course-up-line-duotone] w-4 h-4"></i>
-                    </span>
-                    <span className="text-slate-900 dark:text-slate-900">
-                      {parseInt(match.score, 10)}
-                    </span>
-                  </span>
+              <div className="search-result-details column">
+                <div className="is-size-5">{match.name}</div>
+
+                <div className="field is-grouped is-grouped-multiline mt-1">
+                  <div className="control">
+                    <div className="tags has-addons">
+                      <span className="tag">Number</span>
+                      <span className="tag is-primary">
+                        {match.issue_number}
+                      </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>
-                <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">
+                <div className="is-size-7">
                   {ellipsize(issueDescription, 300)}
                 </div>
               </div>
             </div>
 
-            <div className="flex flex-row gap-2 my-4 ml-10">
-              <div className="">
+            <div className="vertical-line"></div>
+
+            <div className="columns ml-6 volume-information">
+              <div className="column is-one-fifth">
                 <img
                   src={match.volumeInformation.results.image.icon_url}
-                  className="rounded-md w-full"
+                  className="cover-image"
                   onError={handleBrokenImage}
                 />
               </div>
 
-              <div className="">
-                <span>{match.volume.name}</span>
-                <div className="text-sm">
-                  <p>
-                    Total Issues:
-                    {match.volumeInformation.results.count_of_issues}
-                  </p>
-                  <p>
-                    Published by{" "}
-                    {match.volumeInformation.results.publisher.name}
-                  </p>
+              <div className="column">
+                <div className="is-size-6">{match.volume.name}</div>
+                <div className="field is-grouped is-grouped-multiline mt-2">
+                  <div className="control">
+                    <div className="tags has-addons">
+                      <span className="tag">Total Issues</span>
+                      <span className="tag is-warning">
+                        {match.volumeInformation.results.count_of_issues}
+                      </span>
+                    </div>
+                  </div>
+
+                  <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="flex justify-end">
-              <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"
-                onClick={() => applyCVMatch(match, props.comicObjectId)}
-              >
-                <span className="text-md">Apply Match</span>
-                <span className="w-5 h-5">
-                  <i className="h-5 w-5 icon-[solar--magic-stick-3-bold-duotone]"></i>
-                </span>
-              </button>
+            <div className="columns">
+              <div className="column">
+                <button
+                  className="button is-normal is-outlined is-primary is-light is-pulled-right"
+                  onClick={() => applyCVMatch(match, props.comicObjectId)}
+                >
+                  <span className="icon is-size-5">
+                    <i className="fas fa-clipboard-check"></i>
+                  </span>
+                  <span>Apply Match</span>
+                </button>
+              </div>
             </div>
           </div>
         );

src/client/components/ComicDetail/RawFileDetails.tsx

@@ -2,96 +2,78 @@ import React, { ReactElement } from "react";
 import PropTypes from "prop-types";
 import prettyBytes from "pretty-bytes";
 import { isEmpty } from "lodash";
-import { format, parseISO } from "date-fns";
 
 export const RawFileDetails = (props): ReactElement => {
-  const { rawFileDetails, inferredMetadata, created_at, updated_at } =
-    props.data;
+  const { rawFileDetails, inferredMetadata } = props.data;
   return (
     <>
-      <div className="max-w-2xl ml-5">
-        <div className="px-4 sm:px-6">
-          <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 dark:text-gray-400">
-                Raw File Details
-              </dt>
-              <dd className="mt-1 text-sm text-gray-900 dark:text-gray-400">
-                {rawFileDetails.containedIn +
-                  "/" +
-                  rawFileDetails.name +
-                  rawFileDetails.extension}
-              </dd>
-            </div>
-            <div className="sm:col-span-1">
-              <dt className="text-sm font-medium text-gray-500 dark:text-gray-400">
-                Inferred Issue Metadata
-              </dt>
-              <dd className="mt-1 text-sm text-gray-900 dark:text-gray-400">
-                Series Name: {inferredMetadata.issue.name}
-                {!isEmpty(inferredMetadata.issue.number) ? (
-                  <span className="tag is-primary is-light">
-                    {inferredMetadata.issue.number}
-                  </span>
-                ) : null}
-              </dd>
-            </div>
-            <div className="sm:col-span-1">
-              <dt className="text-sm font-medium text-gray-500 dark:text-gray-400">
-                MIMEType
-              </dt>
-              <dd className="mt-1 text-sm text-gray-500 dark:text-slate-900">
-                {/* File extension */}
-                <span className="inline-flex items-center bg-slate-50 text-slate-800 text-xs font-medium px-2 rounded-md dark:text-slate-900 dark:bg-slate-400">
-                  <span className="pt-1">
-                    <i className="icon-[solar--zip-file-bold-duotone] w-5 h-5"></i>
-                  </span>
-
-                  <span className="text-md text-slate-500 dark:text-slate-900">
-                    {rawFileDetails.mimeType}
-                  </span>
-                </span>
-              </dd>
-            </div>
-            <div className="sm:col-span-1">
-              <dt className="text-sm font-medium text-gray-500 dark:text-gray-400">
-                File Size
-              </dt>
-              <dd className="mt-1 text-sm text-gray-500 dark:text-slate-900">
-                {/* size */}
-                <span className="inline-flex items-center bg-slate-50 text-slate-800 text-xs font-medium px-2 rounded-md dark:text-slate-900 dark:bg-slate-400">
-                  <span className="pr-1 pt-1">
-                    <i className="icon-[solar--mirror-right-bold-duotone] w-5 h-5"></i>
-                  </span>
-
-                  <span className="text-md text-slate-500 dark:text-slate-900">
+      <div className="comic-detail raw-file-details column is-three-fifths">
+        <dl>
+          <dt>Raw File Details</dt>
+          <dd className="is-size-7">
+            {rawFileDetails.containedIn +
+              "/" +
+              rawFileDetails.name +
+              rawFileDetails.extension}
+          </dd>
+          <dd>
+            <div className="field is-grouped mt-2">
+              <div className="control">
+                <div className="tags has-addons">
+                  <span className="tag">Size</span>
+                  <span className="tag is-info is-light">
                     {prettyBytes(rawFileDetails.fileSize)}
                   </span>
-                </span>
-              </dd>
+                </div>
+              </div>
+              <div className="control">
+                <div className="tags has-addons">
+                  <span className="tag">Extension</span>
+                  <span className="tag is-primary is-light">
+                    {rawFileDetails.extension}
+                  </span>
+                </div>
+              </div>
+              <div className="control">
+                <div className="tags has-addons">
+                  <span className="tag">MIME type</span>
+                  <span className="tag is-primary is-light">
+                    {rawFileDetails.mimeType}
+                  </span>
+                </div>
+              </div>
             </div>
-            <div className="sm:col-span-2">
-              <dt className="text-sm font-medium text-gray-500 dark:text-gray-400">
-                Import Details
-              </dt>
-              <dd className="mt-1 text-sm text-gray-900 dark:text-gray-400">
-                {format(parseISO(created_at), "dd MMMM, yyyy")},{" "}
-                {format(parseISO(created_at), "h aaaa")}
-              </dd>
+          </dd>
+        </dl>
+      </div>
+
+      <div className="content comic-detail raw-file-details mt-3 column is-three-fifths">
+        <dl>
+          {/* inferred metadata */}
+          <dt>Inferred Issue Metadata</dt>
+          <dd>
+            <div className="field is-grouped mt-2">
+              <div className="control">
+                <div className="tags has-addons">
+                  <span className="tag">Name</span>
+                  <span className="tag is-info is-light">
+                    {inferredMetadata.issue.name}
+                  </span>
+                </div>
+              </div>
+              {!isEmpty(inferredMetadata.issue.number) ? (
+                <div className="control">
+                  <div className="tags has-addons">
+                    <span className="tag">Number</span>
+                    <span className="tag is-primary is-light">
+                      {inferredMetadata.issue.number}
+                    </span>
+                  </div>
+                </div>
+              ) : null}
             </div>
-            <div className="sm:col-span-2">
-              <dt className="text-sm font-medium text-gray-500 dark:text-gray-400">
-                Actions
-              </dt>
-              <dd className="mt-1 text-sm text-gray-900">{props.children}</dd>
-            </div>
-          </dl>
-        </div>
+          </dd>
+        </dl>
       </div>
     </>
   );
@@ -120,8 +102,5 @@ RawFileDetails.propTypes = {
         subtitle: PropTypes.string,
       }),
     }),
-    created_at: PropTypes.string,
-    updated_at: PropTypes.string,
   }),
-  children: PropTypes.any,
-};
+};

src/client/components/ComicDetail/TabControls.tsx

@@ -1,47 +1,49 @@
-import React, { ReactElement, useState } from "react";
-import { isNil } from "lodash";
+import React, { ReactElement, useEffect, useState } from "react";
+import { isEmpty, isNil } from "lodash";
+import { useSelector } from "react-redux";
 
 export const TabControls = (props): ReactElement => {
-  const { filteredTabs, downloadCount } = props;
+  const comicBookDetailData = useSelector(
+    (state: RootState) => state.comicInfo.comicBookDetail,
+  );
+  const { filteredTabs } = props;
+
   const [active, setActive] = useState(filteredTabs[0].id);
+  useEffect(() => {
+    setActive(filteredTabs[0].id);
+  }, [comicBookDetailData]);
 
   return (
     <>
-      <div className="hidden sm:block mt-7 mb-3 w-fit">
-        <div className="border-b border-gray-200">
-          <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 px-1 py-1 text-md font-medium text-gray-500 dark:text-gray-400 hover:border-gray-300 hover:border-b hover:dark:text-slate-200 ${
-                  active === id
-                    ? "border-b border-cyan-50 dark:text-slate-200"
-                    : "border-b border-transparent"
-                }`}
-                aria-current="page"
-                onClick={() => setActive(id)}
-              >
-                {/* Downloads tab and count badge */}
-                <>
-                  {id === 6 && !isNil(downloadCount) ? (
-                    <span className="inline-flex flex-row">
-                      {/* download count */}
-                      <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-orange-400">
-                        <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" />
+      <div className="tabs">
+        <ul>
+          {filteredTabs.map(({ id, name, icon }) => (
+            <li
+              key={id}
+              className={id === active ? "is-active" : ""}
+              onClick={() => setActive(id)}
+            >
+              {/* Downloads tab and count badge */}
+              <a>
+                {id === 6 &&
+                !isNil(comicBookDetailData.acquisition.directconnect) ? (
+                  <span className="download-icon-labels">
+                    <i className="fa-solid fa-download"></i>
+                    <span className="tag downloads-count is-info is-light">
+                      {
+                        comicBookDetailData.acquisition.directconnect.downloads
+                          .length
+                      }
                     </span>
-                  ) : (
-                    <span className="w-5 h-5">{icon}</span>
-                  )}
-                  {name}
-                </>
+                  </span>
+                ) : (
+                  <span className="icon is-small">{icon}</span>
+                )}
+                {name}
               </a>
-            ))}
-          </nav>
-        </div>
+            </li>
+          ))}
+        </ul>
       </div>
       {filteredTabs.map(({ id, content }) => {
         return active === id ? content : null;

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

@@ -1,134 +1,44 @@
-import React, { ReactElement, useCallback, useEffect, useState } from "react";
+import React, { ReactElement, useCallback, useState } from "react";
+import { useSelector, useDispatch } from "react-redux";
 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 { socketIOInstance } = useStore(
-    useShallow((state) => ({
-      socketIOInstance: state.socketIOInstance,
-    })),
+  const isComicBookExtractionInProgress = useSelector(
+    (state: RootState) => state.fileOps.comicBookExtractionInProgress,
   );
-  const queryClient = useQueryClient();
+  const extractedComicBookArchive = useSelector(
+    (state: RootState) => state.fileOps.extractedComicBookArchive.analysis,
+  );
+
+  const imageAnalysisResult = useSelector((state: RootState) => {
+    return state.fileOps.imageAnalysisResults;
+  });
+
+  const dispatch = useDispatch();
+  const unpackComicArchive = useCallback(() => {
+    dispatch(
+      extractComicArchive(data.rawFileDetails.filePath, {
+        type: "full",
+        purpose: "analysis",
+        imageResizeOptions: {
+          baseWidth: 275,
+        },
+      }),
+    );
+  }, []);
+
   // 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 [shouldRefetchComicBookData, setShouldRefetchComicBookData] =
-    useState(false);
-  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);
-                setShouldRefetchComicBookData(true);
-              }
-            },
-          });
-        } 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 && shouldRefetchComicBookData) {
-    queryClient.invalidateQueries({ queryKey: ["comicBookMetadata"] });
-    setShouldRefetchComicBookData(false);
-  }
 
   // sliding panel init
   const contentForSlidingPanel = {
@@ -136,13 +46,13 @@ export const ArchiveOperations = (props): ReactElement => {
       content: () => {
         return (
           <div>
-            <pre className="text-sm">{currentImage}</pre>
+            <pre className="is-size-7">{currentImage}</pre>
             {!isEmpty(imageAnalysisResult) ? (
-              <pre className="p-2 mt-3">
+              <pre className="is-size-7 p-2 mt-3">
                 <Canvas data={imageAnalysisResult} />
               </pre>
             ) : null}
-            <pre className="font-hasklig mt-3 text-sm">
+            <pre className="is-size-7 mt-3">
               {JSON.stringify(imageAnalysisResult.analyzedData, null, 2)}
             </pre>
           </div>
@@ -154,81 +64,54 @@ export const ArchiveOperations = (props): ReactElement => {
   // sliding panel handlers
   const openImageAnalysisPanel = useCallback((imageFilePath) => {
     setSlidingPanelContentId("imageAnalysis");
-    analyzeImage(imageFilePath);
+    dispatch(analyzeImage(imageFilePath));
     setCurrentImage(imageFilePath);
     setVisible(true);
   }, []);
 
   return (
     <div key={2}>
-      <article
-        role="alert"
-        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
+        className={
+          isComicBookExtractionInProgress
+            ? "button is-loading is-warning"
+            : "button is-warning"
+        }
+        onClick={unpackComicArchive}
       >
-        <div>
-          <p>You can perform several operations on your comic book archive.</p>
-          <p>
-            Uncompressing, re-organizing the individual pages, then
-            re-compressing to a different format, for example.
-          </p>
-          <p>You can also analyze color histograms of pages.</p>
-        </div>
-      </article>
-      <div className="mt-5">
-        {data.rawFileDetails.archive?.uncompressed &&
-        !isEmpty(uncompressedArchive) ? (
-          <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">
-          {isEmpty(uncompressedArchive) ? (
-            <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) ? (
+        <span className="icon is-small">
+          <i className="fa-solid fa-box-open"></i>
+        </span>
+        <span>Unpack comic archive</span>
+      </button>
+      <div className="columns">
+        <div className="mt-5">
+          {!isEmpty(extractedComicBookArchive) ? (
             <DnD
-              data={uncompressedArchive}
+              data={extractedComicBookArchive}
               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}
@@ -243,4 +126,4 @@ export const ArchiveOperations = (props): ReactElement => {
   );
 };
 
-export default ArchiveOperations;
+export default ArchiveOperations;

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

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

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

@@ -1,15 +1,30 @@
 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}>
-      <ComicVineDetails
-        data={data.sourcedMetadata.comicvine}
-        updatedAt={data.updatedAt}
-      />
+      <div className="columns is-multiline">
+        <ComicVineDetails
+          data={data.sourcedMetadata.comicvine}
+          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/ComicDetail/TorrentDownloads.tsx

@@ -1,77 +0,0 @@
-import React from "react";
-import dayjs from "dayjs";
-import prettyBytes from "pretty-bytes";
-
-export const TorrentDownloads = (props) => {
-  const { data } = props;
-  console.log(Object.values(data));
-  return (
-    <>
-      {data.map(({ torrent }) => {
-        return (
-          <dl className="mt-5 dark:text-slate-200 text-slate-600">
-            <dt className="text-lg">{torrent.name}</dt>
-            <p className="text-sm">{torrent.hash}</p>
-            <p className="text-sm">
-              Added on {dayjs.unix(torrent.added_on).format("ddd, D MMM, YYYY")}
-            </p>
-
-            <p className="flex gap-2 mt-1">
-              {torrent.progress > 0 ? (
-                <>
-                  <progress
-                    className="w-80 mt-2 [&::-webkit-progress-bar]:rounded-lg [&::-webkit-progress-value]:rounded-lg [&::-webkit-progress-bar]:bg-slate-300 [&::-webkit-progress-value]:bg-green-400 [&::-moz-progress-bar]:bg-green-400 h-2"
-                    value={Math.floor(torrent.progress * 100).toString()}
-                    max="100"
-                  ></progress>
-
-                  <span>{Math.floor(torrent.progress * 100)}%</span>
-
-                  {/* downloaded/left */}
-                  <p className="inline-flex items-center bg-slate-200 text-green-800 dark:text-green-900 text-xs font-medium px-2.5 py-1 rounded-md dark:bg-slate-400">
-                    <span className="pr-1">
-                      <i className="icon-[solar--arrow-to-down-left-outline] h-4 w-4"></i>
-                    </span>
-                    <span className="text-md">
-                      {prettyBytes(torrent.downloaded)}
-                    </span>
-                    {/* uploaded */}
-                    <span className="pr-1 text-orange-800 dark:text-orange-900 ml-2">
-                      <i className="icon-[solar--arrow-to-top-left-outline] h-4 w-4"></i>
-                    </span>
-                    <span className="text-md text-orange-800 dark:text-orange-900">
-                      {prettyBytes(torrent.uploaded)}
-                    </span>
-                  </p>
-                </>
-              ) : null}
-            </p>
-            <div className="flex gap-4 mt-2">
-              {/* Peers */}
-              <span className="inline-flex items-center bg-slate-200 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">
-                  <i className="icon-[solar--station-minimalistic-line-duotone] h-5 w-5"></i>
-                </span>
-                <span className="text-md text-slate-900">
-                  {torrent.trackers_count}
-                </span>
-              </span>
-
-              {/* Size */}
-              <span className="inline-flex items-center bg-slate-200 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--mirror-right-bold-duotone] h-4 w-4"></i>
-                </span>
-                <span className="text-md text-slate-900">
-                  {prettyBytes(torrent.total_size)}
-                </span>
-              </span>
-            </div>
-          </dl>
-        );
-      })}
-    </>
-  );
-};
-
-export default TorrentDownloads;

src/client/components/ComicDetail/TorrentSearchPanel.tsx

@@ -1,202 +0,0 @@
-import React, { useState } from "react";
-import { useMutation, useQuery } from "@tanstack/react-query";
-import axios from "axios";
-import { Form, Field } from "react-final-form";
-import {
-  PROWLARR_SERVICE_BASE_URI,
-  QBITTORRENT_SERVICE_BASE_URI,
-} from "../../constants/endpoints";
-import { isEmpty, isNil } from "lodash";
-import ellipsize from "ellipsize";
-import prettyBytes from "pretty-bytes";
-
-export const TorrentSearchPanel = (props) => {
-  const { issueName, comicObjectId } = props;
-  // Initialize searchTerm with issueName from props
-  const [searchTerm, setSearchTerm] = useState({ issueName });
-  const [torrentToDownload, setTorrentToDownload] = useState("");
-
-  const { data, isSuccess, isLoading } = useQuery({
-    queryKey: ["searchResults", searchTerm.issueName],
-    queryFn: async () => {
-      return await axios({
-        url: `${PROWLARR_SERVICE_BASE_URI}/search`,
-        method: "POST",
-        data: {
-          prowlarrQuery: {
-            port: "9696",
-            apiKey: "c4f42e265fb044dc81f7e88bd41c3367",
-            offset: 0,
-            categories: [7030],
-            query: searchTerm.issueName,
-            host: "localhost",
-            limit: 100,
-            type: "search",
-            indexerIds: [2],
-          },
-        },
-      });
-    },
-    enabled: !isNil(searchTerm.issueName) && searchTerm.issueName.trim() !== "", // Make sure searchTerm is not empty
-  });
-  const mutation = useMutation({
-    mutationFn: async (newTorrent) =>
-      axios.post(`${QBITTORRENT_SERVICE_BASE_URI}/addTorrent`, newTorrent),
-    onSuccess: async (data) => {
-      console.log(data);
-    },
-  });
-  const searchIndexer = (values) => {
-    setSearchTerm({ issueName: values.issueName }); // Update searchTerm based on the form submission
-  };
-  const downloadTorrent = (evt) => {
-    const newTorrent = {
-      comicObjectId,
-      torrentToDownload: evt,
-    };
-    mutation.mutate(newTorrent);
-  };
-  return (
-    <>
-      <div className="mt-5">
-        <Form
-          onSubmit={searchIndexer}
-          initialValues={searchTerm}
-          render={({ handleSubmit }) => (
-            <form onSubmit={handleSubmit}>
-              <Field name="issueName">
-                {({ input, meta }) => (
-                  <div className="max-w-fit">
-                    <div className="flex flex-row bg-slate-300 dark:bg-slate-400 rounded-l-lg">
-                      <div className="w-10 pl-2 pt-1 text-gray-400 dark:text-gray-200">
-                        {/* Icon placeholder */}
-                        <i className="icon-[solar--magnifer-bold-duotone] h-7 w-7" />
-                      </div>
-                      <input
-                        {...input}
-                        type="text"
-                        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="Enter a search term"
-                      />
-                      <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"
-                      >
-                        <div className="flex flex-row">
-                          Search Indexer
-                          <div className="h-5 w-5 ml-1">
-                            <i className="h-6 w-6 icon-[solar--magnet-bold-duotone]" />
-                          </div>
-                        </div>
-                      </button>
-                    </div>
-                  </div>
-                )}
-              </Field>
-            </form>
-          )}
-        />
-      </div>
-
-      <article
-        role="alert"
-        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"
-      >
-        <div>
-          The default search term is an auto-detected title; you may need to
-          change it to get better matches if the auto-detected one doesn't work.
-        </div>
-      </article>
-      {!isEmpty(data?.data) ? (
-        <div className="overflow-x-auto w-fit mt-4 rounded-lg border border-gray-200 dark:border-gray-500">
-          <table className="min-w-full divide-y-2 divide-gray-200 dark:divide-gray-500 text-md">
-            <thead>
-              <tr>
-                <th className="whitespace-nowrap px-2 py-2 font-medium text-gray-900 dark:text-slate-200">
-                  Name
-                </th>
-                <th className="whitespace-nowrap py-2 font-medium text-gray-900 dark:text-slate-200">
-                  Indexer
-                </th>
-
-                <th className="whitespace-nowrap py-2 font-medium text-gray-900 dark:text-slate-200">
-                  Action
-                </th>
-              </tr>
-            </thead>
-            <tbody className="divide-y divide-slate-100 dark:divide-gray-500">
-              {data?.data.map((result, idx) => (
-                <tr key={idx}>
-                  <td className="px-3 py-3 text-gray-700 dark:text-slate-300 text-md">
-                    <p>{ellipsize(result.fileName, 90)}</p>
-                    {/* Seeders/Leechers */}
-                    <div className="flex gap-3 mt-2">
-                      <span className="inline-flex items-center bg-slate-50 text-slate-800 text-xs font-medium px-2 rounded-md dark:text-slate-900 dark:bg-slate-400">
-                        <span className="pr-1 pt-1">
-                          <i className="icon-[solar--archive-up-minimlistic-bold-duotone] w-5 h-5"></i>
-                        </span>
-
-                        <span className="text-md text-slate-500 dark:text-slate-900">
-                          {result.seeders} seeders
-                        </span>
-                      </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--archive-down-minimlistic-bold-duotone] w-5 h-5"></i>
-                        </span>
-
-                        <span className="text-md text-slate-500 dark:text-slate-900">
-                          {result.leechers} leechers
-                        </span>
-                      </span>
-                      {/* Size */}
-                      <span className="inline-flex items-center bg-slate-50 text-slate-800 text-xs font-medium px-2 rounded-md dark:text-slate-900 dark:bg-slate-400">
-                        <span className="pr-1 pt-1">
-                          <i className="icon-[solar--mirror-right-bold-duotone] w-5 h-5"></i>
-                        </span>
-
-                        <span className="text-md text-slate-500 dark:text-slate-900">
-                          {prettyBytes(result.size)}
-                        </span>
-                      </span>
-
-                      {/* Files */}
-                      <span className="inline-flex items-center bg-slate-50 text-slate-800 text-xs font-medium px-2 rounded-md dark:text-slate-900 dark:bg-slate-400">
-                        <span className="pr-1 pt-1">
-                          <i className="icon-[solar--documents-bold-duotone] w-5 h-5"></i>
-                        </span>
-
-                        <span className="text-md text-slate-500 dark:text-slate-900">
-                          {result.files} files
-                        </span>
-                      </span>
-                    </div>
-                  </td>
-
-                  <td className="px-3 py-3 text-gray-700 dark:text-slate-300 text-sm">
-                    {result.indexer}
-                  </td>
-
-                  <td className="px-3 py-3 text-gray-700 dark:text-slate-300 text-sm">
-                    <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"
-                      onClick={() => downloadTorrent(result.downloadUrl)}
-                    >
-                      <span className="text-xs">Download</span>
-                      <span className="w-5 h-5">
-                        <i className="h-5 w-5 icon-[solar--download-bold-duotone]"></i>
-                      </span>
-                    </button>
-                  </td>
-                </tr>
-              ))}
-            </tbody>
-          </table>
-        </div>
-      ) : null}
-    </>
-  );
-};
-
-export default TorrentSearchPanel;

src/client/components/Dashboard/Dashboard.tsx

@@ -1,81 +1,65 @@
-import React, { ReactElement } from "react";
+import React, { ReactElement, useEffect } 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 { useQuery } from "@tanstack/react-query";
-import axios from "axios";
-import { LIBRARY_SERVICE_BASE_URI } from "../../constants/endpoints";
+import {
+  fetchVolumeGroups,
+  getComicBooks,
+} from "../../actions/fileops.actions";
+import { getLibraryStatistics } from "../../actions/comicinfo.actions";
+import { isEmpty, isNil } from "lodash";
+import Header from "../shared/Header";
 
 export const Dashboard = (): ReactElement => {
-  const { data: recentComics } = useQuery({
-    queryFn: async () =>
-      await axios({
-        url: `${LIBRARY_SERVICE_BASE_URI}/getComicBooks`,
-        method: "POST",
-        data: {
-          paginationOptions: {
-            page: 0,
-            limit: 5,
-            sort: { updatedAt: "-1" },
-          },
-          predicate: {
-            wanted: { $exists: false },
-          },
-          comicStatus: "recent",
-        },
-      }),
-    queryKey: ["recentComics"],
-  });
-  // Wanted Comics
-  const { data: wantedComics } = useQuery({
-    queryFn: async () =>
-      await axios({
-        url: `${LIBRARY_SERVICE_BASE_URI}/getComicBooks`,
-        method: "POST",
-        data: {
-          paginationOptions: {
-            page: 0,
-            limit: 5,
-            sort: { updatedAt: "-1" },
-          },
-          predicate: {
-            wanted: { $exists: true, $ne: null },
-          },
-        },
-      }),
-    queryKey: ["wantedComics"],
-  });
-  const { data: volumeGroups } = useQuery({
-    queryFn: async () =>
-      await axios({
-        url: `${LIBRARY_SERVICE_BASE_URI}/getComicBookGroups`,
-        method: "GET",
-      }),
-    queryKey: ["volumeGroups"],
-  });
-
-  const { data: statistics } = useQuery({
-    queryFn: async () =>
-      await axios({
-        url: `${LIBRARY_SERVICE_BASE_URI}/libraryStatistics`,
-        method: "GET",
-      }),
-    queryKey: ["libraryStatistics"],
-  });
-
+  //   useEffect(() => {
+  //     dispatch(fetchVolumeGroups());
+  //     dispatch(
+  //       getComicBooks({
+  //         paginationOptions: {
+  //           page: 0,
+  //           limit: 5,
+  //           sort: { updatedAt: "-1" },
+  //         },
+  //         predicate: { "acquisition.source.wanted": false },
+  //         comicStatus: "recent",
+  //       }),
+  //     );
+  //     dispatch(
+  //       getComicBooks({
+  //         paginationOptions: {
+  //           page: 0,
+  //           limit: 5,
+  //           sort: { updatedAt: "-1" },
+  //         },
+  //         predicate: { "acquisition.source.wanted": true },
+  //         comicStatus: "wanted",
+  //       }),
+  //     );
+  //     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">
-      <PullList />
-      {recentComics && <RecentlyImported comics={recentComics?.data.docs} />}
-      {/* Wanted comics */}
-      <WantedComicsList comics={wantedComics?.data?.docs} />
-      {/* Library Statistics */}
-      {statistics && <LibraryStatistics stats={statistics?.data} />}
-      {/* Volume groups */}
-      <VolumeGroups volumeGroups={volumeGroups?.data} />
+    <div className="container">
+      <section className="section">
+        <h1 className="title">Dashboard</h1>
+      </section>
     </div>
   );
 };

src/client/components/Dashboard/LibraryStatistics.tsx

@@ -1,99 +1,113 @@
 import React, { ReactElement, useEffect } from "react";
 import prettyBytes from "pretty-bytes";
 import { isEmpty, isUndefined, map } from "lodash";
-import Header from "../shared/Header";
 
 export const LibraryStatistics = (
   props: ILibraryStatisticsProps,
 ): ReactElement => {
-  const { stats } = props;
+  // const { stats } = props;
   return (
     <div className="mt-5">
-      <Header
-        headerContent="Your Library In Numbers"
-        subHeaderContent={
-          <span className="text-md">A brief snapshot of your library.</span>
-        }
-        iconClassNames="fa-solid fa-binoculars mr-2"
-      />
-
-      <div className="mt-3">
-        <div className="flex flex-row gap-5">
-          <div className="flex flex-col rounded-lg bg-green-100 dark:bg-green-200 px-4 py-6 text-center">
-            <dt className="text-lg font-medium text-gray-500">Library size</dt>
-            <dd className="text-3xl text-green-600 md:text-5xl">
-              {props.stats.totalDocuments} files
+      <h4 className="title is-4">
+        <i className="fa-solid fa-chart-simple"></i> Your Library In Numbers 
+      </h4>
+      <p className="subtitle is-7">A brief snapshot of your library.</p>
+      <div className="columns is-multiline">
+        <div className="column is-narrow is-two-quarter">
+          <dl className="box">
+            <dd className="is-size-4">
+              <span className="has-text-weight-bold">
+                {props.stats.totalDocuments}
+              </span>{" "}
+              files
             </dd>
-            <dd>
-              <span className="text-2xl text-green-600">
+            <dd className="is-size-4">
+              Library size
+              <span className="has-text-weight-bold">
+                {" "}
                 {props.stats.comicDirectorySize &&
                   prettyBytes(props.stats.comicDirectorySize)}
               </span>
             </dd>
-          </div>
-          {/* comicinfo and comicvine tagged issues */}
-          <div className="flex flex-col gap-4">
             {!isUndefined(props.stats.statistics) &&
               !isEmpty(props.stats.statistics[0].issues) && (
-                <div className="flex flex-col h-fit rounded-lg bg-green-100 dark:bg-green-200 px-4 py-3 text-center">
-                  <span className="text-xl">
+                <dd className="is-size-6">
+                  <span className="has-text-weight-bold">
                     {props.stats.statistics[0].issues.length}
                   </span>{" "}
                   tagged with ComicVine
-                </div>
+                </dd>
               )}
             {!isUndefined(props.stats.statistics) &&
               !isEmpty(props.stats.statistics[0].issuesWithComicInfoXML) && (
-                <div className="flex flex-col h-fit rounded-lg bg-green-100 dark:bg-green-200 px-4 py-3 text-center">
-                  <span className="text-xl">
+                <dd className="is-size-6">
+                  <span className="has-text-weight-bold">
                     {props.stats.statistics[0].issuesWithComicInfoXML.length}
                   </span>{" "}
+                  with
                   <span className="tag is-warning has-text-weight-bold mr-2 ml-1">
-                    with ComicInfo.xml
+                    ComicInfo.xml
                   </span>
-                </div>
+                </dd>
               )}
-          </div>
+          </dl>
+        </div>
 
-          <div className="">
-            {!isUndefined(props.stats.statistics) &&
-              !isEmpty(props.stats.statistics[0].fileTypes) &&
-              map(props.stats.statistics[0].fileTypes, (fileType, idx) => {
-                return (
-                  <span
-                    key={idx}
-                    className="flex flex-col mb-4 h-fit text-xl rounded-lg bg-green-100 dark:bg-green-200 px-4 py-3 text-center"
-                  >
-                    {fileType.data.length} {fileType._id}
-                  </span>
-                );
-              })}
-          </div>
+        <div className="p-3 column is-one-quarter">
+          <dl className="box">
+            <dd className="is-size-6">
+              <span className="has-text-weight-bold"></span> Issues
+            </dd>
+            <dd className="is-size-6">
+              <span className="has-text-weight-bold">304</span> Volumes
+            </dd>
+            <dd className="is-size-6">
+              {!isUndefined(props.stats.statistics) &&
+                !isEmpty(props.stats.statistics[0].fileTypes) &&
+                map(props.stats.statistics[0].fileTypes, (fileType, idx) => {
+                  return (
+                    <span key={idx}>
+                      <span className="has-text-weight-bold">
+                        {fileType.data.length}
+                      </span>
+                      <span className="tag is-warning has-text-weight-bold mr-2 ml-1">
+                        {fileType._id}
+                      </span>
+                    </span>
+                  );
+                })}
+            </dd>
+          </dl>
+        </div>
 
-          {/* file types */}
-          <div className="flex flex-col h-fit text-lg rounded-lg bg-green-100 dark:bg-green-200 px-4 py-3">
-            {/* publisher with most issues */}
+        {/* file types */}
+        <div className="p-3 column is-two-fifths">
+          {/* publisher with most issues */}
+          <dl className="box">
             {!isUndefined(props.stats.statistics) &&
               !isEmpty(
                 props.stats.statistics[0].publisherWithMostComicsInLibrary[0],
               ) && (
-                <>
-                  <span className="">
+                <dd className="is-size-6">
+                  <span className="has-text-weight-bold">
                     {
                       props.stats.statistics[0]
                         .publisherWithMostComicsInLibrary[0]._id
                     }
                   </span>
                   {" has the most issues "}
-                  <span className="">
+                  <span className="has-text-weight-bold">
                     {
                       props.stats.statistics[0]
                         .publisherWithMostComicsInLibrary[0].count
                     }
                   </span>
-                </>
+                </dd>
               )}
-          </div>
+            <dd className="is-size-6">
+              <span className="has-text-weight-bold">304</span> Volumes
+            </dd>
+          </dl>
         </div>
       </div>
     </div>

src/client/components/Dashboard/PullList.tsx

@@ -1,165 +1,160 @@
-import React, { ReactElement, useState } from "react";
-import { map } from "lodash";
+import { isNil, map } from "lodash";
+import React, { createRef, ReactElement, useCallback, useEffect } from "react";
 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;
 };
 
-const http = rateLimiter(axios.create(), {
-  maxRequests: 1,
-  perMilliseconds: 1000,
-  maxRPS: 1,
-});
-const cachedAxios = setupCache(axios);
-export const PullList = (): ReactElement => {
-  // datepicker
-  const date = new Date();
-  const [inputValue, setInputValue] = useState<string>(
-    format(date, "M-dd-yyyy"),
-  );
-
-  // keen slider
-  const [sliderRef, instanceRef] = useKeenSlider(
-    {
-      loop: true,
-      slides: {
-        origin: "auto",
-        number: 15,
-        perView: 5,
-        spacing: 15,
-      },
-      slideChanged() {
-        console.log("slide changed");
-      },
-    },
-    [
-      // 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" },
+export const PullList = ({ issues }: PullListProps): ReactElement => {
+  const dispatch = useDispatch();
+  useEffect(() => {
+    dispatch(
+      getWeeklyPullList({
+        startDate: "2023-9-9",
+        pageSize: "15",
+        currentPage: "1",
       }),
-    queryKey: ["pullList", inputValue],
-  });
-  const addToLibrary = (sourceName: string, locgMetadata) =>
-    importToDB(sourceName, { locg: locgMetadata });
+    );
+  }, []);
+  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);
+  let sliderRef = createRef();
+  const settings = {
+    dots: false,
+    infinite: false,
+    speed: 500,
+    slidesToShow: 5,
+    slidesToScroll: 5,
+    initialSlide: 0,
+    responsive: [
+      {
+        breakpoint: 1024,
+        settings: {
+          slidesToShow: 3,
+          slidesToScroll: 3,
+          infinite: false,
+        },
+      },
+      {
+        breakpoint: 600,
+        settings: {
+          slidesToShow: 2,
+          slidesToScroll: 2,
+          initialSlide: 0,
+        },
+      },
+      {
+        breakpoint: 480,
+        settings: {
+          slidesToShow: 1,
+          slidesToScroll: 1,
+        },
+      },
+    ],
+  };
 
   const next = () => {
-    // sliderRef.slickNext();
+    sliderRef.slickNext();
   };
   const previous = () => {
-    // sliderRef.slickPrev();
+    sliderRef.slickPrev();
   };
-
   return (
     <>
       <div className="content">
-        <Header
-          headerContent="Discover"
-          subHeaderContent={
-            <span className="text-md">
-              Pull List aggregated for the week from{" "}
-              <span className="underline">
-                <a href="https://leagueofcomicgeeks.com/comics/new-comics">
-                  League Of Comic Geeks
-                </a>
-                <i className="icon-[solar--arrow-right-up-outline] w-4 h-4" />
-              </span>
-            </span>
-          }
-          iconClassNames="fa-solid fa-binoculars mr-2"
-          link="/pull-list/all/"
-        />
-        <div className="flex flex-row gap-5 mb-3">
+        <Header headerContent="Discover"
+                subHeaderContent="Pull List aggregated for the week from League Of Comic Geeks"
+                iconClassNames="fa-solid fa-binoculars mr-2"/>
+        <div className="field is-grouped">
           {/* select week */}
-          <div className="flex flex-row gap-4 my-3">
-            <Form
-              onSubmit={() => {}}
-              render={({ handleSubmit }) => (
-                <form>
-                  <div className="flex flex-col gap-2">
-                    {/* week selection for pull list */}
-                    <DatePickerDialog
-                      inputValue={inputValue}
-                      setter={setInputValue}
-                    />
-                    {inputValue && (
-                      <div className="text-sm">
-                        Showing pull list for{" "}
-                        <span className="inline-flex mb-2 items-center bg-slate-50 text-slate-800 text-xs font-medium px-2.5 py-1 rounded-md dark:text-slate-900 dark:bg-slate-400">
-                          {inputValue}
-                        </span>
-                      </div>
-                    )}
-                  </div>
-                </form>
-              )}
-            />
+          <div className="control">
+            <div className="select is-small">
+              <select>
+                <option>Select Week</option>
+                <option>With options</option>
+              </select>
+            </div>
+          </div>
+          {/* See all pull list issues */}
+          <div className="control">
+            <Link to={"/pull-list/all/"}>
+              <button className="button is-small">View all issues</button>
+            </Link>
+          </div>
+          <div className="field has-addons">
+            <div className="control">
+              <button className="button is-rounded is-small" onClick={previous}>
+                <i className="fa-solid fa-caret-left"></i>
+              </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>
-
-      {isSuccess && !isLoading && (
-        <div ref={sliderRef} className="keen-slider flex flex-row">
-          {map(pullList?.data.result, (issue, idx) => {
+      <Slider {...settings} ref={(c) => (sliderRef = c)}>
+        {!isNil(pullList) &&
+          pullList &&
+          map(pullList, ({ issue }, idx) => {
             return (
-              <div key={idx} className="keen-slider__slide">
-                <Card
-                  orientation={"vertical-2"}
-                  imageUrl={issue.cover}
-                  hasDetails
-                  title={ellipsize(issue.name, 25)}
-                >
-                  <div className="px-1">
-                    <span className="inline-flex mb-2 items-center bg-slate-50 text-slate-800 text-xs font-medium px-2.5 py-1 rounded-md dark:text-slate-900 dark:bg-slate-400">
-                      {issue.publisher}
-                    </span>
-                    <div className="flex flex-row justify-end">
-                      <button
-                        className="flex space-x-1 mb-2 sm:mt-0 sm:flex-row sm:items-center rounded-lg border border-green-400 dark:border-green-200 bg-green-200 px-2 py-1 text-gray-500 hover:bg-transparent hover:text-green-600 focus:outline-none focus:ring active:text-indigo-500"
-                        onClick={() => addToLibrary("locg", issue)}
-                      >
-                        <i className="icon-[solar--add-square-bold-duotone] w-5 h-5 mr-2"></i>{" "}
-                        Want
-                      </button>
-                    </div>
+              <Card
+                key={idx}
+                orientation={"vertical"}
+                imageUrl={issue.cover}
+                hasDetails
+                title={ellipsize(issue.name, 18)}
+                cardContainerStyle={{
+                  marginRight: 22,
+                  boxShadow: "-2px 4px 15px -6px rgba(0,0,0,0.57)",
+                }}
+              >
+                <div className="content">
+                  <div className="control">
+                    <span className="tag">{issue.publisher}</span>
                   </div>
-                </Card>
-              </div>
+                  <div className="mt-2">
+                    <button
+                      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>
             );
           })}
-        </div>
-      )}
-      {isLoading ? <div>Loading...</div> : null}
-      {isError ? (
-        <div>An error occurred while retrieving the pull list.</div>
-      ) : null}
+      </Slider>
     </>
   );
 };

src/client/components/Dashboard/RecentlyImported.tsx

@@ -4,37 +4,50 @@ 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 = {
-  comics: any;
+  comicBookCovers: any;
 };
 
-export const RecentlyImported = (
-  comics: RecentlyImportedProps,
-): ReactElement => {
-  console.log(comics);
+export const RecentlyImported = ({
+  comicBookCovers,
+}: RecentlyImportedProps): ReactElement => {
+  const breakpointColumnsObj = {
+    default: 5,
+    1100: 4,
+    700: 2,
+    600: 2,
+  };
   return (
-    <div>
-      <Header
-        headerContent="Recently Imported"
-        subHeaderContent="Recent Library activity such as imports, tagging, etc."
-        iconClassNames="fa-solid fa-binoculars mr-2"
-      />
-      <div className="grid grid-cols-5 gap-6 mt-3">
-        {comics?.comics.map(
+    <>
+      <div className="content mt-5">
+        <h4 className="title is-4">
+          <i className="fa-solid fa-file-arrow-down"></i> Recently Imported
+        </h4>
+        <p className="subtitle is-7">
+          Recent Library activity such as imports, tagging, etc.
+        </p>
+      </div>
+      <Masonry
+        breakpointCols={breakpointColumnsObj}
+        className="recent-comics-container"
+        columnClassName="recent-comics-column"
+      >
+        {map(
+          comicBookCovers,
           (
             {
               _id,
               rawFileDetails,
               sourcedMetadata: { comicvine, comicInfo, locg },
-              inferredMetadata,
-              wanted: { source } = {},
+              acquisition: {
+                source: { name },
+              },
             },
             idx,
           ) => {
@@ -44,88 +57,90 @@ export const RecentlyImported = (
               comicInfo,
               locg,
             });
-            const { issue, coverURL, icon } = determineExternalMetadata(
-              source,
-              {
-                comicvine,
-                comicInfo,
-                locg,
-              },
-            );
-            const isComicVineMetadataAvailable =
+            const { issue, coverURL, icon } = determineExternalMetadata(name, {
+              comicvine,
+              comicInfo,
+              locg,
+            });
+            const isComicBookMetadataAvailable =
               !isUndefined(comicvine) &&
               !isUndefined(comicvine.volumeInformation);
 
+            const titleElement = (
+              <Link to={"/comic/details/" + _id}>
+                {ellipsize(issueName, 20)}
+              </Link>
+            );
             return (
-              <Card
-                orientation="vertical-2"
-                key={idx}
-                imageUrl={`${LIBRARY_SERVICE_HOST}/${rawFileDetails.cover.filePath}`}
-                title={inferredMetadata.issue.name}
-                hasDetails
-              >
-                <div>
-                  <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>
+              <React.Fragment key={_id}>
+                <Card
+                  orientation={"vertical"}
+                  imageUrl={url}
+                  hasDetails
+                  title={issueName ? titleElement : null}
+                >
+                  <div className="content is-flex is-flex-direction-row">
+                    {/* Raw file presence  */}
+                    {isNil(rawFileDetails) && (
+                      <span className="icon custom-icon is-small has-text-danger mr-2">
+                        <img src="/src/client/assets/img/missing-file.svg" />
                       </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) && (
-                      <div mt-1>
-                        <i className="h-7 w-7 icon-[solar--code-file-bold-duotone] text-yellow-500 dark:text-yellow-300"></i>
-                      </div>
+                      <span className="icon custom-icon is-small has-text-danger">
+                        <img
+                          src="/src/client/assets/img/comicinfoxml.svg"
+                          alt={"ComicInfo.xml file detected."}
+                        />
+                      </span>
                     )}
                     {/* ComicVine metadata presence */}
-                    {isComicVineMetadataAvailable && (
-                      <span className="w-7 h-7">
+                    {isComicBookMetadataAvailable && (
+                      <span className="icon custom-icon">
                         <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>
-                  {/* 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>
+                </Card>
+                {/* metadata card */}
+                {!isNil(name) && (
+                  <Card orientation="horizontal" hasDetails imageUrl={coverURL}>
+                    <dd className="is-size-9">
+                      <dl>
+                        <span className="icon custom-icon">
+                          <img src={`/src/client/assets/img/${icon}`} />
+                        </span>
+                      </dl>
+                      <dl>
+                        <span className="small-tag">
+                          {ellipsize(issue, 15)}
+                        </span>
+                      </dl>
+                    </dd>
+                  </Card>
+                )}
+              </React.Fragment>
             );
           },
         )}
-      </div>
-    </div>
+      </Masonry>
+    </>
   );
-};
+};

src/client/components/Dashboard/VolumeGroups.tsx

@@ -2,10 +2,15 @@ import { map, unionBy } from "lodash";
 import React, { ReactElement } from "react";
 import ellipsize from "ellipsize";
 import { Link, useNavigate } from "react-router-dom";
-import Card from "../shared/Carda";
-import Header from "../shared/Header";
+import Masonry from "react-masonry-css";
 
 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();
@@ -14,48 +19,44 @@ export const VolumeGroups = (props): ReactElement => {
   };
 
   return (
-    <section>
-      <Header
-        headerContent="Volumes"
-        subHeaderContent="Based on ComicVine Volume information"
-        iconClassNames="fa-solid fa-binoculars mr-2"
-        link={"/volumes"}
-      />
-      <div className="grid grid-cols-5 gap-6 mt-3">
+    <section className="volumes-container mt-4">
+      <div className="content">
+        <a className="mb-1" onClick={navigateToVolumes}>
+          <span className="is-size-4 has-text-weight-semibold">
+            <i className="fa-solid fa-layer-group"></i> Volumes
+          </span>
+          <span className="icon mt-1">
+            <i className="fa-solid fa-angle-right"></i>
+          </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="max-w-sm mx-auto" key={data._id}>
-              <Card
-                orientation="vertical-2"
-                key={data._id}
-                imageUrl={data.volumes.image.small_url}
-                hasDetails
-              >
-                <div className="py-3">
-                  <div className="text-sm">
-                    <Link to={`/volume/details/${data._id}`}>
-                      {ellipsize(data.volumes.name, 48)}
-                    </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>
+            <div className="stack" key={data._id}>
+              <img src={data.volumes.image.small_url} />
+              <div className="content">
+                <div className="stack-title is-size-8">
+                  <Link to={`/volume/details/${data._id}`}>
+                    {ellipsize(data.volumes.name, 18)}
+                  </Link>
+                </div>
+                <div className="control">
+                  <span className="tags has-addons">
+                    <span className="tag is-primary is-light">Issues</span>
+                    <span className="tag">{data.volumes.count_of_issues}</span>
                   </span>
                 </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>
             </div>
           );
         })}
-      </div>
+      </Masonry>
     </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,26 +14,47 @@ type WantedComicsListProps = {
 export const WantedComicsList = ({
   comics,
 }: WantedComicsListProps): ReactElement => {
-  const navigate = useNavigate();
+  const breakpointColumnsObj = {
+    default: 5,
+    1100: 4,
+    700: 2,
+    500: 1,
+  };
 
+  const navigate = useNavigate();
+  const navigateToWantedComics = (row) => {
+    navigate(`/wanted/all`);
+  };
   return (
     <>
-      <Header
-        headerContent="Wanted Comics"
-        subHeaderContent="Comics marked as wanted from various sources"
-        iconClassNames="fa-solid fa-binoculars mr-2"
-        link={"/wanted"}
-      />
-      <div className="grid grid-cols-5 gap-6 mt-3">
+      <div className="content mt-6">
+        <a className="mb-1" onClick={navigateToWantedComics}>
+          <span className="is-size-4 has-text-weight-semibold">
+            <i className="fa-solid fa-asterisk"></i> Wanted Comics
+          </span>
+          <span className="icon mt-1">
+            <i className="fa-solid fa-angle-right"></i>
+          </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,
           ({
             _id,
             rawFileDetails,
             sourcedMetadata: { comicvine, comicInfo, locg },
-            wanted,
           }) => {
-            const isComicBookMetadataAvailable = !isUndefined(comicvine);
+            const isComicBookMetadataAvailable =
+              !isUndefined(comicvine) &&
+              !isUndefined(comicvine.volumeInformation);
             const consolidatedComicMetadata = {
               rawFileDetails,
               comicvine,
@@ -41,82 +62,53 @@ export const WantedComicsList = ({
               locg,
             };
 
-            const {
-              issueName,
-              url,
-              publisher = null,
-            } = determineCoverFile(consolidatedComicMetadata);
+            const { issueName, url } = determineCoverFile(
+              consolidatedComicMetadata,
+            );
             const titleElement = (
               <Link to={"/comic/details/" + _id}>
                 {ellipsize(issueName, 20)}
-                <p>{publisher}</p>
               </Link>
             );
             return (
               <Card
                 key={_id}
-                orientation={"vertical-2"}
+                orientation={"vertical"}
                 imageUrl={url}
                 hasDetails
                 title={issueName ? titleElement : <span>No Name</span>}
               >
-                <div className="pb-1">
-                  <div className="flex flex-row gap-2">
-                    {/* Issue type */}
-                    {isComicBookMetadataAvailable &&
-                    !isNil(detectIssueTypes(comicvine.description)) ? (
-                      <div className="my-2">
-                        <span className="inline-flex items-center bg-slate-50 text-slate-800 text-xs font-medium px-2.5 py-0.5 rounded-md dark:text-slate-900 dark:bg-slate-400">
-                          <span className="pr-1 pt-1">
-                            <i className="icon-[solar--book-2-line-duotone] w-5 h-5"></i>
-                          </span>
-
-                          <span className="text-md text-slate-500 dark:text-slate-900">
-                            {
-                              detectIssueTypes(comicvine.description)
-                                .displayName
-                            }
-                          </span>
-                        </span>
-                      </div>
-                    ) : null}
-                    {/* issues marked as wanted, part of this volume */}
-                    {wanted?.markEntireVolumeWanted ? (
-                      <div className="text-sm">sagla volume pahije</div>
-                    ) : (
-                      <div className="my-2">
-                        <span className="inline-flex items-center bg-slate-50 text-slate-800 text-xs font-medium px-2.5 py-0.5 rounded-md dark:text-slate-900 dark:bg-slate-400">
-                          <span className="pr-1 pt-1">
-                            <i className="icon-[solar--documents-bold-duotone] w-5 h-5"></i>
-                          </span>
-
-                          <span className="text-md text-slate-500 dark:text-slate-900">
-                            {wanted.issues.length}
-                          </span>
-                        </span>
-                      </div>
-                    )}
-                  </div>
+                <div className="content is-flex is-flex-direction-row">
                   {/* comicVine metadata presence */}
                   {isComicBookMetadataAvailable && (
-                    <img
-                      src="/src/client/assets/img/cvlogo.svg"
-                      alt={"ComicVine metadata detected."}
-                      className="w-7 h-7"
-                    />
+                    <span className="icon custom-icon">
+                      <img src="/src/client/assets/img/cvlogo.svg" />
+                    </span>
                   )}
                   {!isEmpty(locg) && (
-                    <img
-                      src="/src/client/assets/img/locglogo.svg"
-                      className="w-7 h-7"
-                    />
+                    <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">
+                      {
+                        detectIssueTypes(
+                          comicvine.volumeInformation.description,
+                        ).displayName
+                      }
+                    </span>
+                  ) : null}
                 </div>
               </Card>
             );
           },
         )}
-      </div>
+      </Masonry>
     </>
   );
 };

src/client/components/Dashboard/ZeroState.tsx

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

src/client/components/Downloads/Downloads.tsx

@@ -1,5 +1,13 @@
-import React, { ReactElement, useEffect, useState } from "react";
+import React, {
+  ReactElement,
+  useCallback,
+  useContext,
+  useEffect,
+  useState,
+} from "react";
 import { getTransfers } from "../../actions/airdcpp.actions";
+import { useDispatch, useSelector } from "react-redux";
+import { AirDCPPSocketContext } from "../../context/AirDCPPSocket";
 import { isEmpty, isNil, isUndefined } from "lodash";
 import { determineCoverFile } from "../../shared/utils/metadata.utils";
 import MetadataPanel from "../shared/MetadataPanel";
@@ -9,18 +17,18 @@ interface IDownloadsProps {
 }
 
 export const Downloads = (props: IDownloadsProps): ReactElement => {
-  // const airDCPPConfiguration = useContext(AirDCPPSocketContext);
+  const airDCPPConfiguration = useContext(AirDCPPSocketContext);
   const {
     airDCPPState: { settings, socket },
   } = airDCPPConfiguration;
-  // const dispatch = useDispatch();
+  const dispatch = useDispatch();
 
-  // const airDCPPTransfers = useSelector(
-  //   (state: RootState) => state.airdcpp.transfers,
-  // );
-  // const issueBundles = useSelector(
-  //   (state: RootState) => state.airdcpp.issue_bundles,
-  // );
+  const airDCPPTransfers = useSelector(
+    (state: RootState) => state.airdcpp.transfers,
+  );
+  const issueBundles = useSelector(
+    (state: RootState) => state.airdcpp.issue_bundles,
+  );
   const [bundles, setBundles] = useState([]);
   // Make the call to get all transfers from AirDC++
   useEffect(() => {

src/client/components/Import/Import.tsx

@@ -1,12 +1,14 @@
 import React, { ReactElement, useCallback, useEffect } from "react";
+import { useSelector, useDispatch } from "react-redux";
+import {
+  fetchComicBookMetadata,
+  getImportJobResultStatistics,
+  setQueueControl,
+} from "../../actions/fileops.actions";
 import "react-loader-spinner/dist/loader/css/react-spinner-loader.css";
 import { format } from "date-fns";
 import Loader from "react-loader-spinner";
 import { isEmpty, isNil, isUndefined } from "lodash";
-import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
-import { useStore } from "../../store";
-import { useShallow } from "zustand/react/shallow";
-import axios from "axios";
 
 interface IProps {
   matches?: unknown;
@@ -16,7 +18,10 @@ interface IProps {
 }
 
 /**
- * Component to facilitate the import of comics to the ThreeTwo library
+ * Returns the average of two numbers.
+ *
+ * @remarks
+ * This method is part of the {@link core-library#Statistics | Statistics subsystem}.
  *
  * @param x - The first input number
  * @param y - The second input number
@@ -26,84 +31,62 @@ interface IProps {
  */
 
 export const Import = (props: IProps): ReactElement => {
-  const queryClient = useQueryClient();
-  const { importJobQueue, socketIOInstance } = useStore(
-    useShallow((state) => ({
-      importJobQueue: state.importJobQueue,
-      socketIOInstance: state.socketIOInstance,
-    })),
+  const dispatch = useDispatch();
+  const successfulImportJobCount = useSelector(
+    (state: RootState) => state.fileOps.successfulJobCount,
+  );
+  const failedImportJobCount = useSelector(
+    (state: RootState) => state.fileOps.failedJobCount,
   );
 
-  const sessionId = localStorage.getItem("sessionId");
-  const { mutate: initiateImport } = useMutation({
-    mutationFn: async () =>
-      await axios.request({
-        url: `http://localhost:3000/api/library/newImport`,
-        method: "POST",
-        data: { sessionId },
-      }),
-  });
+  const lastQueueJob = useSelector(
+    (state: RootState) => state.fileOps.lastQueueJob,
+  );
+  const libraryQueueImportStatus = useSelector(
+    (state: RootState) => state.fileOps.LSQueueImportStatus,
+  );
 
-  const { data, isError, isLoading } = useQuery({
-    queryKey: ["allImportJobResults"],
-    queryFn: async () =>
-      await axios({
-        method: "GET",
-        url: "http://localhost:3000/api/jobqueue/getJobResultStatistics",
-      }),
-  });
+  const allImportJobResults = useSelector(
+    (state: RootState) => state.fileOps.importJobStatistics,
+  );
+
+  const initiateImport = useCallback(() => {
+    if (typeof props.path !== "undefined") {
+      dispatch(fetchComicBookMetadata(props.path));
+    }
+  }, [dispatch]);
+
+  const toggleQueue = useCallback(
+    (queueAction: string, queueStatus: string) => {
+      dispatch(setQueueControl(queueAction, queueStatus));
+    },
+    [],
+  );
+  useEffect(() => {
+    dispatch(getImportJobResultStatistics());
+  }, []);
 
-  const toggleQueue = (queueAction: string, queueStatus: string) => {
-    socketIOInstance.emit(
-      "call",
-      "socket.setQueueStatus",
-      {
-        queueAction,
-        queueStatus,
-      },
-      (data) => console.log(data),
-    );
-  };
-  /**
-   * Method to render import job queue pause/resume controls on the UI
-   *
-   * @param status The `string` status (either `"pause"` or `"resume"`)
-   * @returns ReactElement A `<button/>` that toggles queue status
-   * @remarks Sets the global `importJobQueue.status` state upon toggling
-   */
   const renderQueueControls = (status: string): ReactElement | null => {
     switch (status) {
       case "running":
         return (
-          <div>
+          <div className="control">
             <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"
-              onClick={() => {
-                toggleQueue("pause", "paused");
-                importJobQueue.setStatus("paused");
-              }}
+              className="button is-warning is-light"
+              onClick={() => toggleQueue("pause", "paused")}
             >
-              <span className="text-md">Pause</span>
-              <span className="w-5 h-5">
-                <i className="h-5 w-5 icon-[solar--pause-bold]"></i>
-              </span>
+              <i className="fa-solid fa-pause mr-2"></i> Pause
             </button>
           </div>
         );
       case "paused":
         return (
-          <div>
+          <div className="control">
             <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"
-              onClick={() => {
-                toggleQueue("resume", "running");
-                importJobQueue.setStatus("running");
-              }}
+              className="button is-success is-light"
+              onClick={() => toggleQueue("resume", "running")}
             >
-              <span className="text-md">Resume</span>
-              <span className="w-5 h-5">
-                <i className="h-5 w-5 icon-[solar--play-bold]"></i>
-              </span>
+              <i className="fa-solid fa-play mr-2"></i> Resume
             </button>
           </div>
         );
@@ -116,180 +99,136 @@ export const Import = (props: IProps): ReactElement => {
     }
   };
   return (
-    <div>
-      <section>
-        <header className="bg-slate-200 dark:bg-slate-500">
-          <div className="mx-auto max-w-screen-xl px-2 py-2 sm:px-6 sm:py-8 lg:px-8 lg:py-4">
-            <div className="sm:flex sm:items-center sm:justify-between">
-              <div className="text-center sm:text-left">
-                <h1 className="text-2xl font-bold text-gray-900 dark:text-white sm:text-3xl">
-                  Import
-                </h1>
-
-                <p className="mt-1.5 text-sm text-gray-500 dark:text-white">
-                  Import comics into the ThreeTwo library.
-                </p>
-              </div>
-            </div>
-          </div>
-        </header>
-
-        <div className="mx-auto max-w-screen-xl px-4 py-4 sm:px-6 sm:py-8 lg:px-8">
-          <article
-            role="alert"
-            className="rounded-lg max-w-screen-md border-s-4 border-blue-500 bg-blue-50 p-4 dark:border-s-4 dark:border-blue-600 dark:bg-blue-300 dark:text-slate-600"
-          >
-            <div>
-              <p>
-                Importing will add comics identified from the mapped folder into
-                ThreeTwo's database.
-              </p>
-              <p>
-                Metadata from ComicInfo.xml, if present, will also be extracted.
-              </p>
-              <p>
-                This process could take a while, if you have a lot of comics, or
-                are importing over a network connection.
-              </p>
-            </div>
-          </article>
-
-          <div className="my-4">
-            {importJobQueue.status === "drained" ||
-              (importJobQueue.status === undefined && (
-                <button
-                  className="flex space-x-1 sm:mt-0 sm:flex-row sm:items-center rounded-lg border border-green-400 dark:border-green-200 bg-green-200 px-5 py-3 text-gray-500 hover:bg-transparent hover:text-green-600 focus:outline-none focus:ring active:text-indigo-500"
-                  onClick={() => {
-                    initiateImport();
-                    importJobQueue.setStatus("running");
-                  }}
-                >
-                  <span className="text-md">Start Import</span>
-                  <span className="w-6 h-6">
-                    <i className="h-6 w-6 icon-[solar--file-left-bold-duotone]"></i>
-                  </span>
-                </button>
-              ))}
-          </div>
-
-          {/* Activity */}
-          {(importJobQueue.status === "running" ||
-            importJobQueue.status === "paused") && (
-            <>
-              <span className="flex items-center my-5 max-w-screen-lg">
-                <span className="text-xl text-slate-500 dark:text-slate-200 pr-5">
-                  Import Activity
-                </span>
-                <span className="h-px flex-1 bg-slate-200 dark:bg-slate-400"></span>
+    <div className="container">
+      <section className="section is-small">
+        <h1 className="title">Import Comics</h1>
+        <article className="message is-dark">
+          <div className="message-body">
+            <p className="mb-2">
+              <span className="tag is-medium is-info is-light">
+                Import Comics
               </span>
-              <div className="mt-5 flex flex-col gap-4 sm:mt-0 sm:flex-row sm:items-center">
-                <dl className="grid grid-cols-2 gap-4 sm:grid-cols-2">
-                  {/* Successful import counts */}
-                  <div className="flex flex-col rounded-lg bg-green-100 dark:bg-green-200 px-4 py-6 text-center">
-                    <dd className="text-3xl text-green-600 md:text-5xl">
-                      {importJobQueue.successfulJobCount}
-                    </dd>
-                    <dt className="text-lg font-medium text-gray-500">
-                      imported
-                    </dt>
-                  </div>
-                  {/* Failed job counts */}
-                  <div className="flex flex-col rounded-lg bg-red-100 dark:bg-red-200 px-4 py-6 text-center">
-                    <dd className="text-3xl text-red-600 md:text-5xl">
-                      {importJobQueue.failedJobCount}
-                    </dd>
-                    <dt className="text-lg font-medium text-gray-500">
-                      failed
-                    </dt>
-                  </div>
+              will add comics identified from the mapped folder into ThreeTwo's
+              database.
+            </p>
+            <p>
+              Metadata from ComicInfo.xml, if present, will also be extracted.
+            </p>
+            <p>
+              This process could take a while, if you have a lot of comics, or
+              are importing over a network connection.
+            </p>
+          </div>
+        </article>
+        <p className="buttons">
+          <button
+            className={
+              libraryQueueImportStatus === "drained" ||
+              libraryQueueImportStatus === undefined
+                ? "button is-medium"
+                : "button is-loading is-medium"
+            }
+            onClick={initiateImport}
+          >
+            <span className="icon">
+              <i className="fas fa-file-import"></i>
+            </span>
+            <span>Start Import</span>
+          </button>
+        </p>
+        {libraryQueueImportStatus !== "drained" &&
+          !isUndefined(libraryQueueImportStatus) && (
+            <>
+              <table className="table">
+                <thead>
+                  <tr>
+                    <th>Completed Jobs</th>
+                    <th>Failed Jobs</th>
+                    <th>Queue Controls</th>
+                    <th>Queue Status</th>
+                  </tr>
+                </thead>
 
-                  <div className="flex flex-col dark:text-slate-200 text-slate-400">
-                    <dd>{renderQueueControls(importJobQueue.status)}</dd>
-                  </div>
-                </dl>
-              </div>
-              <div className="flex">
-                <span className="mt-2 dark:text-slate-200 text-slate-400">
-                  Imported: <span>{importJobQueue.mostRecentImport}</span>
-                </span>
-              </div>
+                <tbody>
+                  <tr>
+                    <th>
+                      {successfulImportJobCount > 0 && (
+                        <div className="box has-background-success-light has-text-centered">
+                          <span className="is-size-2 has-text-weight-bold">
+                            {successfulImportJobCount}
+                          </span>
+                        </div>
+                      )}
+                    </th>
+                    <td>
+                      {failedImportJobCount > 0 && (
+                        <div className="box has-background-danger has-text-centered">
+                          <span className="is-size-2 has-text-weight-bold">
+                            {failedImportJobCount}
+                          </span>
+                        </div>
+                      )}
+                    </td>
+
+                    <td>{renderQueueControls(libraryQueueImportStatus)}</td>
+                    <td>
+                      {libraryQueueImportStatus !== undefined ? (
+                        <span className="tag is-warning">
+                          {libraryQueueImportStatus}
+                        </span>
+                      ) : null}
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+              Imported{" "}
+              <span className="has-text-weight-bold">{lastQueueJob}</span>
             </>
           )}
 
-          {/* Past imports */}
-          {!isLoading && !isEmpty(data?.data) && (
-            <div className="max-w-screen-lg">
-              <span className="flex items-center mt-6">
-                <span className="text-xl text-slate-500 dark:text-slate-200 pr-5">
-                  Past Imports
-                </span>
-                <span className="h-px flex-1 bg-slate-200 dark:bg-slate-400"></span>
-              </span>
+        {/* Past imports */}
 
-              <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>
-                      <th className="whitespace-nowrap px-4 py-2 font-medium text-gray-900 dark:text-slate-200">
-                        Time Started
-                      </th>
-                      <th className="whitespace-nowrap px-4 py-2 font-medium text-gray-900 dark:text-slate-200">
-                        Session Id
-                      </th>
-                      <th className="whitespace-nowrap px-4 py-2 font-medium text-gray-900 dark:text-slate-200">
-                        Imported
-                      </th>
-                      <th className="whitespace-nowrap px-4 py-2 font-medium text-gray-900 dark:text-slate-200">
-                        Failed
-                      </th>
-                    </tr>
-                  </thead>
+        <h3 className="subtitle is-4 mt-5">Past Imports</h3>
+        <table className="table">
+          <thead>
+            <tr>
+              <th>Time Started</th>
+              <th>Session Id</th>
+              <th>Imported</th>
+              <th>Failed</th>
+            </tr>
+          </thead>
 
-                  <tbody className="divide-y divide-gray-200">
-                    {data?.data.map((jobResult, id) => {
-                      return (
-                        <tr key={id}>
-                          <td className="whitespace-nowrap px-2 py-2 text-gray-700 dark:text-slate-300">
-                            {format(
-                              new Date(jobResult.earliestTimestamp),
-                              "EEEE, hh:mma, do LLLL Y",
-                            )}
-                          </td>
-                          <td className="whitespace-nowrap px-2 py-2 text-gray-700 dark:text-slate-300">
-                            <span className="tag is-warning">
-                              {jobResult.sessionId}
-                            </span>
-                          </td>
-                          <td className="whitespace-nowrap px-4 py-2 text-gray-700 dark:text-slate-300">
-                            <span className="inline-flex items-center justify-center rounded-full bg-emerald-100 px-2 py-0.5 text-emerald-700">
-                              <span className="h-5 w-6">
-                                <i className="icon-[solar--check-circle-line-duotone] h-5 w-5"></i>
-                              </span>
-                              <p className="whitespace-nowrap text-sm">
-                                {jobResult.completedJobs}
-                              </p>
-                            </span>
-                          </td>
-                          <td className="whitespace-nowrap px-4 py-2 text-gray-700 dark:text-slate-300">
-                            <span className="inline-flex items-center justify-center rounded-full bg-red-100 px-2 py-0.5 text-red-700">
-                              <span className="h-5 w-6">
-                                <i className="icon-[solar--close-circle-line-duotone] h-5 w-5"></i>
-                              </span>
-
-                              <p className="whitespace-nowrap text-sm">
-                                {jobResult.failedJobs}
-                              </p>
-                            </span>
-                          </td>
-                        </tr>
-                      );
-                    })}
-                  </tbody>
-                </table>
-              </div>
-            </div>
-          )}
-        </div>
+          <tbody>
+            {allImportJobResults.map((jobResult, id) => {
+              return (
+                <tr key={id}>
+                  <td>
+                    {format(
+                      new Date(jobResult.earliestTimestamp),
+                      "EEEE, hh:mma, do LLLL Y",
+                    )}
+                  </td>
+                  <td>
+                    <span className="tag is-warning">
+                      {jobResult.sessionId}
+                    </span>
+                  </td>
+                  <td>
+                    <span className="tag is-success">
+                      {jobResult.completedJobs}
+                    </span>
+                  </td>
+                  <td>
+                    <span className="tag is-danger">
+                      {jobResult.failedJobs}
+                    </span>
+                  </td>
+                </tr>
+              );
+            })}
+          </tbody>
+        </table>
       </section>
     </div>
   );

src/client/components/Library/Library.tsx

@@ -1,18 +1,12 @@
-import React, { useMemo, ReactElement, useState, useEffect } from "react";
+import React, { useMemo, ReactElement, useCallback, 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 { useDispatch, useSelector } from "react-redux";
+import { searchIssue } from "../../actions/fileops.actions";
 import ellipsize from "ellipsize";
-import {
-  useQuery,
-  keepPreviousData,
-  useQueryClient,
-} from "@tanstack/react-query";
-import axios from "axios";
-import { format, fromUnixTime, parseISO } from "date-fns";
 
 /**
  * Component that tabulates the contents of the user's ThreeTwo Library.
@@ -22,60 +16,30 @@ import { format, fromUnixTime, parseISO } from "date-fns";
  * <Library />
  */
 export const Library = (): ReactElement => {
-  // Default page state
-  // offset: 0
-  const [offset, setOffset] = useState(0);
-  const [searchQuery, setSearchQuery] = useState({
-    query: {},
-    pagination: {
-      size: 25,
-      from: offset,
-    },
-    type: "all",
-    trigger: "libraryPage",
-  });
-  const queryClient = useQueryClient();
+  const searchResults = useSelector(
+    (state: RootState) => state.fileOps.libraryComics,
+  );
+  const searchError = useSelector((state: RootState) => state.fileOps.librarySearchError);
+  const dispatch = useDispatch();
+  useEffect(() => {
+    dispatch(
+      searchIssue(
+        {
+          query: {},
+        },
+        {
+          pagination: {
+            size: 15,
+            from: 0,
+          },
+          type: "all",
+          trigger: "libraryPage",
+        },
+      ),
+    );
+  }, []);
 
-  /**
-   * 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: {
-        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, searchQuery],
-    queryFn: () => fetchIssues(searchQuery),
-    placeholderData: keepPreviousData,
-  });
-
-  const searchResults = data?.data;
-  // Programmatically navigate to comic detail
+  // programatically navigate to comic detail
   const navigate = useNavigate();
   const navigateToComicDetail = (row) => {
     navigate(`/comic/details/${row.original._id}`);
@@ -83,42 +47,45 @@ export const Library = (): ReactElement => {
 
   const ComicInfoXML = (value) => {
     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 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>
-          <span className="text-md text-slate-900 dark:text-slate-900">
-            {ellipsize(value.data.series[0], 45)}
-          </span>
-        </span>
-        <div className="flex flex-row mt-2 gap-2">
-          {/* Pages */}
-          <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--notebook-minimalistic-bold-duotone] w-5 h-5"></i>
-            </span>
-            <span className="text-md text-slate-900 dark:text-slate-900">
-              Pages: {value.data.pagecount[0]}
+      <div className="comicvine-metadata mt-3">
+        <dl>
+          <span className="tags has-addons is-size-7">
+            <span className="tag">Series</span>
+            <span className="tag is-warning is-light">
+              {ellipsize(value.data.series[0], 25)}
             </span>
           </span>
-          {/* Issue number */}
-          <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--hashtag-outline] w-3.5 h-3.5"></i>
-            </span>
-            <span className="text-slate-900 dark:text-slate-900">
-              {!isNil(value.data.number) && (
-                <span>{parseInt(value.data.number[0], 10)}</span>
-              )}
-            </span>
-          </span>
-        </div>
-      </dl>
+        </dl>
+        <dl>
+          <div className="field is-grouped is-grouped-multiline">
+            <div className="control">
+              <span className="tags has-addons is-size-7  mt-2">
+                <span className="tag">Pages</span>
+                <span className="tag is-info is-light has-text-weight-bold">
+                  {value.data.pagecount[0]}
+                </span>
+              </span>
+            </div>
+
+            <div className="control">
+              <span className="tags has-addons is-size-7 mt-2">
+                <span className="tag">Issue</span>
+                {!isNil(value.data.number) && (
+                  <span className="tag has-text-weight-bold is-success is-light">
+                    {parseInt(value.data.number[0], 10)}
+                  </span>
+                )}
+              </span>
+            </div>
+          </div>
+        </dl>
+      </div>
     ) : null;
   };
 
+  const WantedStatus = ({ value }) => {
+    return !value ? <span className="tag is-info is-light">Wanted</span> : null;
+  };
   const columns = useMemo(
     () => [
       {
@@ -137,10 +104,14 @@ export const Library = (): ReactElement => {
           {
             header: "ComicInfo.xml",
             accessorKey: "_source.sourcedMetadata.comicInfo",
+            align: "center",
+            minWidth: 250,
             cell: (info) =>
               !isEmpty(info.getValue()) ? (
                 <ComicInfoXML data={info.getValue()} />
-              ) : null,
+              ) : (
+                <span className="tag mt-5">No ComicInfo.xml</span>
+              ),
           },
         ],
       },
@@ -148,41 +119,28 @@ export const Library = (): ReactElement => {
         header: "Additional Metadata",
         columns: [
           {
-            header: "Date of Import",
-            accessorKey: "_source.createdAt",
+            header: "Publisher",
+            accessorKey: "_source.sourcedMetadata.comicvine.volumeInformation",
             cell: (info) => {
-              return !isNil(info.getValue()) ? (
-                <div className="text-sm w-max ml-3 my-3 text-slate-600 dark:text-slate-900">
-                  <p>{format(parseISO(info.getValue()), "dd MMMM, yyyy")} </p>
-                  {format(parseISO(info.getValue()), "h aaaa")}
-                </div>
-              ) : null;
+              return (
+                !isNil(info.getValue()) && (
+                  <h6 className="is-size-7 has-text-weight-bold">
+                    {info.getValue().publisher.name}
+                  </h6>
+                )
+              );
             },
           },
           {
-            header: "Downloads",
-            accessorKey: "_source.acquisition",
-            cell: (info) => (
-              <div className="flex flex-col gap-2 ml-3 my-3">
-                <span className="inline-flex items-center w-fit bg-slate-50 text-slate-800 text-xs px-2 rounded-md dark:text-slate-900 dark:bg-slate-400">
-                  <span className="pr-1 pt-1">
-                    <i className="icon-[solar--folder-path-connect-bold-duotone] w-5 h-5"></i>
-                  </span>
-                  <span className="text-md text-slate-900 dark:text-slate-900">
-                    DC++: {info.getValue().directconnect.downloads.length}
-                  </span>
-                </span>
-
-                <span className="inline-flex w-fit items-center bg-slate-50 text-slate-800 text-xs px-2 rounded-md dark:text-slate-900 dark:bg-slate-400">
-                  <span className="pr-1 pt-1">
-                    <i className="icon-[solar--magnet-bold-duotone] w-5 h-5"></i>
-                  </span>
-                  <span className="text-md text-slate-900 dark:text-slate-900">
-                    Torrent: {info.getValue().torrent.length}
-                  </span>
-                </span>
-              </div>
-            ),
+            header: "Something",
+            accessorKey: "_source.acquisition.source.wanted",
+            cell: (info) => {
+              !isUndefined(info.getValue()) ? (
+                <WantedStatus value={info.getValue().toString()} />
+              ) : (
+                "Nothing"
+              );
+            },
           },
         ],
       },
@@ -198,21 +156,23 @@ export const Library = (): ReactElement => {
    * @returns void
    *
    **/
-  const nextPage = (pageIndex: number, pageSize: number) => {
-    if (!isPlaceholderData) {
-      queryClient.invalidateQueries({ queryKey: ["comics"] });
-      setSearchQuery({
-        query: {},
-        pagination: {
-          size: 15,
-          from: pageSize * pageIndex + 1,
+  const nextPage = useCallback((pageIndex: number, pageSize: number) => {
+    dispatch(
+      searchIssue(
+        {
+          query: {},
         },
-        type: "all",
-        trigger: "libraryPage",
-      });
-      // setOffset(pageSize * pageIndex + 1);
-    }
-  };
+        {
+          pagination: {
+            size: pageSize,
+            from: pageSize * pageIndex + 1,
+          },
+          type: "all",
+          trigger: "libraryPage",
+        },
+      ),
+    );
+  }, []);
 
   /**
    * Pagination control that fetches the previous x (pageSize) items
@@ -221,95 +181,77 @@ export const Library = (): ReactElement => {
    * @param {number} pageSize
    * @returns void
    **/
-  const previousPage = (pageIndex: number, pageSize: number) => {
+  const previousPage = useCallback((pageIndex: number, pageSize: number) => {
     let from = 0;
     if (pageIndex === 2) {
-      from = (pageIndex - 1) * pageSize + 2 - (pageSize + 2);
+      from = (pageIndex - 1) * pageSize + 2 - 17;
     } else {
-      from = (pageIndex - 1) * pageSize + 2 - (pageSize + 1);
+      from = (pageIndex - 1) * pageSize + 2 - 16;
     }
-    queryClient.invalidateQueries({ queryKey: ["comics"] });
-    setSearchQuery({
-      query: {},
-      pagination: {
-        size: 15,
-        from,
-      },
-      type: "all",
-      trigger: "libraryPage",
-    });
-    // setOffset(from);
-  };
+    dispatch(
+      searchIssue(
+        {
+          query: {},
+        },
+        {
+          pagination: {
+            size: pageSize,
+            from,
+          },
+          type: "all",
+          trigger: "libraryPage",
+        },
+      ),
+    );
+  }, []);
 
   // ImportStatus.propTypes = {
   //   value: PropTypes.bool.isRequired,
   // };
   return (
-    <div>
-      <section>
-        <header className="bg-slate-200 dark:bg-slate-500">
-          <div className="mx-auto max-w-screen-xl px-2 py-2 sm:px-6 sm:py-8 lg:px-8 lg:py-4">
-            <div className="sm:flex sm:items-center sm:justify-between">
-              <div className="text-center sm:text-left">
-                <h1 className="text-2xl font-bold text-gray-900 dark:text-white sm:text-3xl">
-                  Library
-                </h1>
-
-                <p className="mt-1.5 text-sm text-gray-500 dark:text-white">
-                  Browse your comic book collection.
-                </p>
-              </div>
-            </div>
-          </div>
-        </header>
-        {!isUndefined(searchResults?.hits) ? (
+    <section className="container">
+      <div className="section">
+        <div className="header-area">
+          <h1 className="title">Library</h1>
+        </div>
+        {!isEmpty(searchResults) ? (
           <div>
-            <div>
+            <div className="library">
               <T2Table
-                totalPages={searchResults.hits.total.value}
+                totalPages={searchResults.total.value}
                 columns={columns}
-                sourceData={searchResults?.hits.hits}
+                sourceData={searchResults?.hits}
                 rowClickHandler={navigateToComicDetail}
                 paginationHandlers={{
                   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"
-            >
-              <div>
-                <p>
+          <div className="columns">
+            <div className="column is-two-thirds">
+              <article className="message is-link">
+                <div className="message-body">
                   No comics were found in the library, Elasticsearch reports no
                   indices. Try importing a few comics into the library and come
                   back.
-                </p>
-              </div>
-            </article>
-            <div className="block max-w-md p-6 bg-white border border-gray-200 my-3 rounded-lg shadow dark:bg-slate-400 dark:border-gray-700">
-              <pre className="text-sm font-hasklig text-slate-700 dark:text-slate-700">
-                {!isUndefined(searchResults?.data?.meta?.body) ? (
-                  <p>
-                    {JSON.stringify(
-                      searchResults?.data.meta.body.error.root_cause,
-                      null,
-                      4,
-                    )}
-                  </p>
-                ) : null}
+                </div>
+              </article>
+              <pre>
+                {!isUndefined(searchError.data) &&
+                  JSON.stringify(
+                    searchError.data.meta.body.error.root_cause,
+                    null,
+                    4,
+                  )}
               </pre>
             </div>
           </div>
         )}
-      </section>
-    </div>
+      </div>
+    </section>
   );
 };
 

src/client/components/Library/SearchBar.tsx

@@ -1,47 +1,63 @@
-import React, { ReactElement } from "react";
+import React, { ReactElement, useCallback } from "react";
 import PropTypes from "prop-types";
 import { Form, Field } from "react-final-form";
 import { Link } from "react-router-dom";
+import { useDispatch } from "react-redux";
+import { searchIssue } from "../../actions/fileops.actions";
 
-export const SearchBar = (props): ReactElement => {
-  const { searchHandler } = props;
+export const SearchBar = (): ReactElement => {
+  const dispatch = useDispatch();
+  const handleSubmit = useCallback((e) => {
+    dispatch(
+      searchIssue(
+        {
+          query: {
+            volumeName: e.search,
+          },
+        },
+        {
+          pagination: {
+            size: 25,
+            from: 0,
+          },
+          type: "volumeName",
+          trigger: "libraryPage",
+        },
+      ),
+    );
+  }, []);
   return (
-    <Form
-      onSubmit={searchHandler}
-      initialValues={{}}
-      render={({ handleSubmit, form, submitting, pristine, values }) => (
-        <form onSubmit={handleSubmit}>
-          <Field name="search">
-            {({ input, meta }) => {
-              return (
-                <div className="flex flex-row w-full">
-                  <div className="flex flex-row bg-slate-300 dark:bg-slate-500 rounded-l-lg p-2 min-w-full">
-                    <div className="w-10 text-gray-400">
-                      <i className="icon-[solar--magnifer-bold-duotone] h-7 w-7" />
-                    </div>
-
-                    <input
-                      {...input}
-                      className="bg-slate-300 dark:bg-slate-500 outline-none text-lg text-gray-700 w-full"
-                      type="text"
-                      id="search"
-                      placeholder="Type an issue/volume name"
-                    />
-                  </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>
-              );
-            }}
-          </Field>
-        </form>
-      )}
-    />
+    <div className="box">
+      <Form
+        onSubmit={handleSubmit}
+        initialValues={{}}
+        render={({ handleSubmit, form, submitting, pristine, values }) => (
+          <form onSubmit={handleSubmit}>
+            <div className="field is-grouped">
+              <div className="control search is-expanded">
+                <Field name="search">
+                  {({ input, meta }) => {
+                    return (
+                      <input
+                        {...input}
+                        className="input main-search-bar is-medium"
+                        placeholder="Type an issue/volume name"
+                      />
+                    );
+                  }}
+                </Field>
+              </div>
+              <div className="control">
+                <button className="button is-medium" type="submit">
+                  Search
+                </button>
+              </div>
+            </div>
+          </form>
+        )}
+      />
+      
+    </div>
   );
 };
 

src/client/components/PullList/PullList.tsx

@@ -1,23 +1,25 @@
 import React, { ReactElement, useEffect, useMemo } from "react";
 import T2Table from "../shared/T2Table";
 import { getWeeklyPullList } from "../../actions/comicinfo.actions";
+import { useDispatch, useSelector } from "react-redux";
 import Card from "../shared/Carda";
 import ellipsize from "ellipsize";
 import { isNil } from "lodash";
 
 export const PullList = (): ReactElement => {
-  // const pullListComics = useSelector(
-  //   (state: RootState) => state.comicInfo.pullList,
-  // );
+  const pullListComics = useSelector(
+    (state: RootState) => state.comicInfo.pullList,
+  );
 
+  const dispatch = useDispatch();
   useEffect(() => {
-    // dispatch(
-    //   getWeeklyPullList({
-    //     startDate: "2023-7-28",
-    //     pageSize: "15",
-    //     currentPage: "1",
-    //   }),
-    // );
+    dispatch(
+      getWeeklyPullList({
+        startDate: "2023-7-28",
+        pageSize: "15",
+        currentPage: "1",
+      }),
+    );
   }, []);
   const nextPageHandler = () => {};
   const previousPageHandler = () => {};

src/client/components/Search/Search.tsx

@@ -1,21 +1,15 @@
-import React, { ReactElement, useState } from "react";
-import { isNil, isEmpty, isUndefined } from "lodash";
+import React, { useCallback, ReactElement } from "react";
+import { isNil, isEmpty } from "lodash";
 import { IExtractedComicBookCoverFile, RootState } from "threetwo-ui-typings";
-import { detectIssueTypes } from "../../shared/utils/tradepaperback.utils";
+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";
 import Card from "../shared/Carda";
 import ellipsize from "ellipsize";
 import { convert } from "html-to-text";
-import { useTranslation } from "react-i18next";
-import "../../shared/utils/i18n.util";
-import PopoverButton from "../shared/PopoverButton";
 import dayjs from "dayjs";
-import { useMutation } from "@tanstack/react-query";
-import {
-  COMICVINE_SERVICE_URI,
-  LIBRARY_SERVICE_BASE_URI,
-} from "../../constants/endpoints";
-import axios from "axios";
 
 interface ISearchProps {}
 
@@ -23,445 +17,164 @@ export const Search = ({}: ISearchProps): ReactElement => {
   const formData = {
     search: "",
   };
-  const [comicVineMetadata, setComicVineMetadata] = useState({});
-  const [selectedResource, setSelectedResource] = useState("volume");
-  const { t } = useTranslation();
-  const handleResourceChange = (value) => {
-    setSelectedResource(value);
-  };
-
-  const {
-    mutate,
-    data: comicVineSearchResults,
-    isPending,
-    isSuccess,
-  } = useMutation({
-    mutationFn: async (data: { search: string; resource: string }) => {
-      const { search, resource } = data;
-      return await axios({
-        url: `${COMICVINE_SERVICE_URI}/search`,
-        method: "GET",
-        params: {
-          api_key: "a5fa0663683df8145a85d694b5da4b87e1c92c69",
-          query: search,
-          format: "json",
-          limit: "10",
-          offset: "0",
-          field_list:
-            "id,name,deck,api_detail_url,image,description,volume,cover_date,start_year,count_of_issues,publisher,issue_number",
-          resources: resource,
-        },
-      });
-    },
-  });
-
-  // add to library
-  const { data: additionResult, mutate: addToWantedList } = useMutation({
-    mutationFn: async ({
-      source,
-      comicObject,
-      markEntireVolumeWanted,
-      resourceType,
-    }) => {
-      console.log("jigni", comicObject);
-      let volumeInformation = {};
-      let issues = [];
-      switch (resourceType) {
-        case "issue":
-          const { id, api_detail_url, image, cover_date, issue_number } =
-            comicObject;
-          // Add issue metadata
-          issues.push({
-            id,
-            api_detail_url,
-            image,
-            coverDate: cover_date,
-            issueNumber: issue_number,
-          });
-          // Get volume metadata from CV
-          const response = await axios({
-            url: `${COMICVINE_SERVICE_URI}/getVolumes`,
-            method: "POST",
-            data: {
-              volumeURI: comicObject.volume.api_detail_url,
-              fieldList:
-                "id,name,deck,api_detail_url,image,description,start_year,year,count_of_issues,publisher,first_issue,last_issue",
-            },
-          });
-          // set volume metadata key
-          volumeInformation = response.data?.results;
-          break;
-
-        case "volume":
-          const {
-            id: volumeId,
-            api_detail_url: apiUrl,
-            image: volumeImage,
-            name,
-            publisher,
-          } = comicObject;
-          volumeInformation = {
-            id: volumeId,
-            url: apiUrl,
-            image: volumeImage,
-            name,
-            publisher,
-          };
-          break;
-
-        default:
-          console.log("Invalid resource type.");
-          break;
-      }
-      // Add to wanted list
-      return await axios({
-        url: `${LIBRARY_SERVICE_BASE_URI}/rawImportToDb`,
-        method: "POST",
-        data: {
-          importType: "new",
-          payload: {
-            importStatus: {
-              isImported: false, // wanted, but not acquired yet.
-              tagged: false,
-              matchedResult: {
-                score: "0",
-              },
-            },
-            wanted: {
-              source,
-              markEntireVolumeWanted,
-              issues,
-              volume: volumeInformation,
-            },
-            sourcedMetadata: { comicvine: volumeInformation },
+  const dispatch = useDispatch();
+  const getCVSearchResults = useCallback(
+    (searchQuery) => {
+      dispatch(
+        comicinfoAPICall({
+          callURIAction: "search",
+          callMethod: "GET",
+          callParams: {
+            api_key: "a5fa0663683df8145a85d694b5da4b87e1c92c69",
+            query: searchQuery.search,
+            format: "json",
+            limit: "10",
+            offset: "0",
+            field_list:
+              "id,name,deck,api_detail_url,image,description,volume,cover_date",
+            resources: "issue",
           },
-        },
-      });
+        }),
+      );
     },
-  });
+    [dispatch],
+  );
 
-  const addToLibrary = (sourceName: string, comicData) =>
-    setComicVineMetadata({ sourceName, comicData });
+  const addToLibrary = useCallback(
+    (sourceName: string, comicData) =>
+      dispatch(importToDB(sourceName, { comicvine: comicData })),
+    [],
+  );
 
+  const comicVineSearchResults = useSelector(
+    (state: RootState) => state.comicInfo.searchResults,
+  );
   const createDescriptionMarkup = (html) => {
     return { __html: html };
   };
 
-  const onSubmit = async (values) => {
-    const formData = { ...values, resource: selectedResource };
-    try {
-      mutate(formData);
-    } catch (error) {
-      // Handle error
-    }
-  };
-
   return (
-    <div>
-      <section>
-        <header className="bg-slate-200 dark:bg-slate-500">
-          <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>
+    <>
+      <section className="container">
+        <div className="section search">
+          <h1 className="title">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={onSubmit}
+            onSubmit={getCVSearchResults}
             initialValues={{
               ...formData,
             }}
             render={({ handleSubmit, form, submitting, pristine, values }) => (
-              <form onSubmit={handleSubmit}>
-                <div className="flex flex-row w-full">
-                  <div className="flex flex-row bg-slate-300 dark:bg-slate-500 rounded-l-lg p-2 min-w-full">
-                    <div className="w-10 text-gray-400">
-                      <i className="icon-[solar--magnifer-bold-duotone] h-7 w-7" />
-                    </div>
-
-                    <Field name="search">
-                      {({ input, meta }) => {
-                        return (
-                          <input
-                            {...input}
-                            className="bg-slate-300 dark:bg-slate-500 outline-none text-lg text-gray-700 w-full"
-                            placeholder="Type an issue/volume name"
-                          />
-                        );
-                      }}
-                    </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"
-                  >
+              <form onSubmit={handleSubmit} className="form columns search">
+                <div className="column is-three-quarters search">
+                  <Field name="search">
+                    {({ input, meta }) => {
+                      return (
+                        <input
+                          {...input}
+                          className="input main-search-bar is-large"
+                          placeholder="Type an issue/volume name"
+                        />
+                      );
+                    }}
+                  </Field>
+                </div>
+                <div className="column">
+                  <button type="submit" className="button is-medium">
                     Search
                   </button>
                 </div>
-                {/* resource type selection: volume, issue etc. */}
-                <div className="flex flex-row gap-3 mt-4">
-                  <Field name="resource" type="radio" value="volume">
-                    {({ input: volumesInput, meta }) => (
-                      <div className="w-fit rounded-xl">
-                        <div>
-                          <input
-                            {...volumesInput}
-                            type="radio"
-                            id="volume"
-                            checked={selectedResource === "volume"}
-                            onChange={() => handleResourceChange("volume")}
-                            className="peer hidden"
-                          />
-                          <label
-                            htmlFor="volume"
-                            className="block cursor-pointer select-none rounded-xl p-2 text-center peer-checked:bg-blue-500 peer-checked:font-bold peer-checked:text-white"
-                          >
-                            Volumes
-                          </label>
-                        </div>
-                      </div>
-                    )}
-                  </Field>
-
-                  <Field name="resource" type="radio" value="issue">
-                    {({ input: issuesInput, meta }) => (
-                      <div className="w-fit rounded-xl">
-                        <div>
-                          <input
-                            {...issuesInput}
-                            type="radio"
-                            id="issue"
-                            checked={selectedResource === "issue"}
-                            onChange={() => handleResourceChange("issue")}
-                            className="peer hidden"
-                          />
-                          <label
-                            htmlFor="issue"
-                            className="block cursor-pointer select-none rounded-xl p-2 text-center peer-checked:bg-blue-500 peer-checked:font-bold peer-checked:text-white"
-                          >
-                            Issues
-                          </label>
-                        </div>
-                      </div>
-                    )}
-                  </Field>
-                </div>
               </form>
             )}
           />
-        </div>
-        {isPending && (
-          <div className="max-w-screen-xl px-4 py-4 sm:px-6 sm:py-8 lg:px-8">
-            Loading results...
-          </div>
-        )}
-        {!isEmpty(comicVineSearchResults?.data?.results) ? (
-          <div className="mx-auto max-w-screen-xl px-4 py-4 sm:px-6 sm:py-8 lg:px-8">
-            {comicVineSearchResults.data.results.map((result) => {
-              return result.resource_type === "issue" ? (
-                <div
-                  key={result.id}
-                  className="mb-5 dark:bg-slate-400 p-4 rounded-lg"
-                >
-                  <div className="flex flex-row">
-                    <div className="mr-5 min-w-[80px] max-w-[13%]">
-                      <Card
-                        key={result.id}
-                        orientation={"cover-only"}
-                        imageUrl={result.image.small_url}
-                        hasDetails={false}
-                      />
-                    </div>
-                    <div className="w-3/4">
-                      <div className="text-xl">
-                        {!isEmpty(result.volume.name) ? (
-                          result.volume.name
-                        ) : (
-                          <span className="is-size-3">No Name</span>
-                        )}
-                      </div>
-                      {result.cover_date && (
-                        <p>
-                          <span className="tag is-light">Cover date</span>
-                          {dayjs(result.cover_date).format("MMM D, YYYY")}
-                        </p>
-                      )}
-
-                      <p className="tag is-warning">{result.id}</p>
-
-                      <a href={result.api_detail_url}>
-                        {result.api_detail_url}
-                      </a>
-                      <p className="text-sm">
-                        {ellipsize(
-                          convert(result.description, {
-                            baseElements: {
-                              selectors: ["p", "div"],
-                            },
-                          }),
-                          320,
-                        )}
-                      </p>
-                      <div className="mt-2">
-                        <PopoverButton
-                          content={`This will add ${result.volume.name} to your wanted list.`}
-                          clickHandler={() =>
-                            addToWantedList({
-                              source: "comicvine",
-                              comicObject: result,
-                              markEntireVolumeWanted: false,
-                              resourceType: "issue",
-                            })
-                          }
-                        />
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              ) : (
-                result.resource_type === "volume" && (
+          {!isNil(comicVineSearchResults.results) &&
+          !isEmpty(comicVineSearchResults.results) ? (
+            <div className="columns is-multiline">
+              {comicVineSearchResults.results.map((result) => {
+                return (
                   <div
                     key={result.id}
-                    className="mb-5 dark:bg-slate-500 p-4 rounded-lg"
+                    className="comicvine-metadata column is-10 mb-3"
                   >
-                    <div className="flex flex-row">
-                      <div className="mr-5 min-w-[80px] max-w-[13%]">
+                    <div className="columns">
+                      <div className="column is-one-quarter">
                         <Card
                           key={result.id}
-                          orientation={"cover-only"}
+                          orientation={"vertical"}
                           imageUrl={result.image.small_url}
+                          title={result.name}
                           hasDetails={false}
-                        />
+                        ></Card>
                       </div>
-                      <div className="w-3/4">
-                        <div className="text-xl">
+                      <div className="column">
+                        <div className="is-size-3">
                           {!isEmpty(result.name) ? (
                             result.name
                           ) : (
-                            <span className="text-xl">No Name</span>
+                            <span className="is-size-3">No Name</span>
                           )}
-                          {result.start_year && <> ({result.start_year})</>}
                         </div>
-
-                        <div className="flex flex-row gap-2">
-                          {/* issue count */}
-                          {result.count_of_issues && (
-                            <div className="my-2">
-                              <span className="inline-flex items-center bg-slate-50 text-slate-800 text-xs font-medium px-2 rounded-md dark:text-slate-900 dark:bg-slate-400">
-                                <span className="pr-1 pt-1">
-                                  <i className="icon-[solar--documents-minimalistic-bold-duotone] w-5 h-5"></i>
-                                </span>
-
-                                <span className="text-md text-slate-500 dark:text-slate-900">
-                                  {t("issueWithCount", {
-                                    count: result.count_of_issues,
-                                  })}
-                                </span>
+                        <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>
-                          )}
-                          {/* type: TPB, one-shot, graphic novel etc. */}
-                          {!isNil(result.description) &&
-                            !isUndefined(result.description) && (
-                              <>
-                                {!isEmpty(
-                                  detectIssueTypes(result.description),
-                                ) && (
-                                  <div className="my-2">
-                                    <span className="inline-flex items-center bg-slate-50 text-slate-800 text-xs font-medium px-2 rounded-md dark:text-slate-900 dark:bg-slate-400">
-                                      <span className="pr-1 pt-1">
-                                        <i className="icon-[solar--book-2-line-duotone] w-5 h-5"></i>
-                                      </span>
+                          </div>
 
-                                      <span className="text-md text-slate-500 dark:text-slate-900">
-                                        {
-                                          detectIssueTypes(result.description)
-                                            .displayName
-                                        }
-                                      </span>
-                                    </span>
-                                  </div>
-                                )}
-                              </>
-                            )}
+                          <div className="control">
+                            <div className="tags has-addons">
+                              <span className="tag is-warning">
+                                {result.id}
+                              </span>
+                            </div>
+                          </div>
                         </div>
 
-                        <span className="tag is-warning">{result.id}</span>
+                        <a href={result.api_detail_url}>
+                          {result.api_detail_url}
+                        </a>
                         <p>
-                          <a href={result.api_detail_url}>
-                            {result.api_detail_url}
-                          </a>
-                        </p>
-
-                        {/* description */}
-                        <p className="text-sm">
                           {ellipsize(
                             convert(result.description, {
                               baseElements: {
-                                selectors: ["p", "div"],
+                                selectors: ["p"],
                               },
                             }),
                             320,
                           )}
                         </p>
-                        <div className="mt-2">
-                          <PopoverButton
-                            content={`Adding this volume will add ${t(
-                              "issueWithCount",
-                              {
-                                count: result.count_of_issues,
-                              },
-                            )} to your wanted list.`}
-                            clickHandler={() =>
-                              addToWantedList({
-                                source: "comicvine",
-                                comicObject: result,
-                                markEntireVolumeWanted: true,
-                                resourceType: "volume",
-                              })
-                            }
-                          />
-                        </div>
+                        <button
+                          className="button is-success is-light is-outlined mt-2"
+                          onClick={() => addToLibrary("comicvine", result)}
+                        >
+                          <i className="fa-solid fa-plus mr-2"></i> Want 
+                        </button>
                       </div>
                     </div>
                   </div>
-                )
-              );
-            })}
-          </div>
-        ) : (
-          <div className="mx-auto mx-auto max-w-screen-md px-4 py-4 sm:px-6 sm:py-8 lg:px-8">
-            <article
-              role="alert"
-              className="mt-4 rounded-lg max-w-screen-md border-s-4 border-blue-500 bg-blue-50 p-4 dark:border-s-4 dark:border-blue-600 dark:bg-blue-300 dark:text-slate-600"
-            >
-              <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>
+                );
+              })}
+            </div>
+          ) : (
+            <article className="message is-dark is-half">
+              <div className="message-body">
+                <p className="mb-2">
+                  <span className="tag is-medium is-info is-light">
+                    Search the ComicVine database
+                  </span>
                   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/AirDCPPSettings/AirDCPPHubsForm.tsx

@@ -1,64 +1,39 @@
 import React, { ReactElement, useEffect, useState, useContext } from "react";
 import { Form, Field } from "react-final-form";
+import { useDispatch } from "react-redux";
 import { isEmpty, isNil, isUndefined } from "lodash";
 import Select from "react-select";
-import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
-import axios from "axios";
-import { AIRDCPP_SERVICE_BASE_URI } from "../../../constants/endpoints";
-
-export const AirDCPPHubsForm = (): ReactElement => {
-  const queryClient = useQueryClient();
+import { saveSettings } from "../../../actions/settings.actions";
+import { AirDCPPSocketContext } from "../../../context/AirDCPPSocket";
 
+export const AirDCPPHubsForm = (airDCPPClientUserSettings): ReactElement => {
+  const dispatch = useDispatch();
+  const [hubList, setHubList] = useState([]);
+  const airDCPPConfiguration = useContext(AirDCPPSocketContext);
   const {
-    data: settings,
-    isLoading,
-    isError,
-  } = useQuery({
-    queryKey: ["settings"],
-    queryFn: async () =>
-      await axios({
-        url: "http://localhost:3000/api/settings/getAllSettings",
-        method: "GET",
-      }),
-  });
+    airDCPPState: { settings, socket },
+  } = airDCPPConfiguration;
+
+  useEffect(() => {
+    (async () => {
+      if (!isEmpty(settings)) {
+        const hubs = await socket.get(`hubs`);
+        const hubSelectionOptions = hubs.map(({ hub_url, identity }) => ({
+          value: hub_url,
+          label: identity.name,
+        }));
+
+        setHubList(hubSelectionOptions);
+      }
+    })();
+  }, []);
+
+  const onSubmit = (values) => {
+    if (!isUndefined(values.hubs)) {
+      dispatch(saveSettings({ ...settings, hubs: values.hubs }, settings._id));
+    }
+  };
 
-  /**
-   * Get the hubs list from an AirDCPP Socket
-   */
-  const { data: hubs } = useQuery({
-    queryKey: ["hubs"],
-    queryFn: async () =>
-      await axios({
-        url: `${AIRDCPP_SERVICE_BASE_URI}/getHubs`,
-        method: "POST",
-        data: {
-          host: settings?.data.directConnect?.client?.host,
-        },
-      }),
-    enabled: !isEmpty(settings?.data.directConnect?.client?.host),
-  });
-  let hubList = {};
-  if (!isNil(hubs)) {
-    hubList = hubs?.data.map(({ hub_url, identity }) => ({
-      value: hub_url,
-      label: identity.name,
-    }));
-  }
-  const { mutate } = useMutation({
-    mutationFn: async (values) =>
-      await axios({
-        url: `http://localhost:3000/api/settings/saveSettings`,
-        method: "POST",
-        data: {
-          settingsPayload: values,
-          settingsObjectId: settings?.data._id,
-          settingsKey: "directConnect",
-        },
-      }),
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ["settings"] });
-    },
-  });
   const validate = async () => {};
 
   const SelectAdapter = ({ input, ...rest }) => {
@@ -67,73 +42,53 @@ export const AirDCPPHubsForm = (): ReactElement => {
 
   return (
     <>
-      {!isEmpty(hubList) && !isUndefined(hubs) ? (
-        <Form
-          onSubmit={mutate}
-          validate={validate}
-          render={({ handleSubmit }) => (
-            <form onSubmit={handleSubmit}>
-              <div>
-                <h3 className="title">Hubs</h3>
-                <h6 className="subtitle has-text-grey-light">
-                  Select the hubs you want to perform searches against.
-                </h6>
-              </div>
-              <div className="field">
-                <label className="label">AirDC++ Host</label>
-                <div className="control">
-                  <Field
-                    name="hubs"
-                    component={SelectAdapter}
-                    className="basic-multi-select"
-                    placeholder="Select Hubs to Search Against"
-                    options={hubList}
-                  />
-                </div>
-              </div>
-
-              <button type="submit" className="button is-primary">
-                Submit
-              </button>
-            </form>
-          )}
-        />
-      ) : (
-        <>
-          <article
-            role="alert"
-            className="mt-4 rounded-lg max-w-screen-md border-s-4 border-yellow-500 bg-yellow-50 p-4 dark:border-s-4 dark:border-yellow-600 dark:bg-yellow-300 dark:text-slate-600"
-          >
-            <div className="message-body">
-              No configured hubs detected in AirDC++. <br />
-              Configure to a hub in AirDC++ and then select a default hub here.
+      <Form
+        onSubmit={onSubmit}
+        validate={validate}
+        render={({ handleSubmit }) => (
+          <form onSubmit={handleSubmit}>
+            <div>
+              <h3 className="title">Hubs</h3>
+              <h6 className="subtitle has-text-grey-light">
+                Select the hubs you want to perform searches against.
+              </h6>
             </div>
-          </article>
-        </>
-      )}
-      {!isEmpty(settings?.data.directConnect?.client.hubs) ? (
-        <>
-          <div className="mt-4">
-            <article className="message is-warning">
-              <div className="message-body is-size-6 is-family-secondary">
-                Your selection in the dropdown <strong>will replace</strong> the
-                existing selection.
+            <div className="field">
+              <label className="label">AirDC++ Host</label>
+              <div className="control">
+                <Field
+                  name="hubs"
+                  component={SelectAdapter}
+                  className="basic-multi-select"
+                  placeholder="Select Hubs to Search Against"
+                  options={hubList}
+                />
               </div>
-            </article>
+            </div>
+
+            <button type="submit" className="button is-primary">
+              Submit
+            </button>
+          </form>
+        )}
+      />
+      <div className="mt-4">
+        <article className="message is-warning">
+          <div className="message-body is-size-6 is-family-secondary">
+            Your selection in the dropdown <strong>will replace</strong> the
+            existing selection.
           </div>
-          <div className="box mt-3">
-            <h6>Default Hub For Searches:</h6>
-            {settings?.data.directConnect?.client.hubs.map(
-              ({ value, label }) => (
-                <div key={value}>
-                  <div>{label}</div>
-                  <span className="is-size-7">{value}</span>
-                </div>
-              ),
-            )}
+        </article>
+      </div>
+      <div className="box mt-3">
+        <h6>Selected hubs</h6>
+        {settings.directConnect.client.hubs.map(({ value, label }) => (
+          <div key={value}>
+            <div>{label}</div>
+            <span className="is-size-7">{value}</span>
           </div>
-        </>
-      ) : null}
+        ))}
+      </div>
     </>
   );
 };

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

@@ -3,36 +3,29 @@ import React, { ReactElement } from "react";
 export const AirDCPPSettingsConfirmation = (settingsObject): ReactElement => {
   const { settings } = settingsObject;
   return (
-    <div>
-      <span className="flex items-center mt-10 mb-4">
-        <span className="text-xl text-slate-500 dark:text-slate-200 pr-5">
-          AirDC++ Client Information
-        </span>
-        <span className="h-px flex-1 bg-slate-200 dark:bg-slate-400"></span>
-      </span>
-      <div className="block max-w-sm p-6 bg-white border border-gray-200 rounded-lg shadow dark:bg-slate-400 dark:border-gray-700">
-        <span className="inline-flex justify-center rounded-full bg-emerald-100 mb-4 px-2 py-0.5 text-emerald-700">
-          <span className="h-5 w-6">
-            <i className="icon-[solar--plug-circle-bold] h-5 w-5"></i>
-          </span>
-          <p className="whitespace-nowrap text-sm">Connected</p>
-        </span>
-        <p className="font-hasklig text-sm text-slate-700 dark:text-slate-700">
-          <dl>
-            <dt>{settings._id}</dt>
-            <dt>Client version: {settings.system_info.client_version}</dt>
-            <dt>Hostname: {settings.system_info.hostname}</dt>
-            <dt>Platform: {settings.system_info.platform}</dt>
+    <div className="mt-4 is-clearfix">
+      <div className="card">
+        <div className="card-content">
+          <span className="tag is-pulled-right is-primary">Connected</span>
+          <div className="content is-size-7">
+            <dl>
+              <dt>{settings._id}</dt>
+              <dt>Client version: {settings.system_info.client_version}</dt>
+              <dt>Hostname: {settings.system_info.hostname}</dt>
+              <dt>Platform: {settings.system_info.platform}</dt>
 
-            <dt>Username: {settings.user.username}</dt>
+              <dt>Username: {settings.user.username}</dt>
 
-            <dt>Active Sessions: {settings.user.active_sessions}</dt>
-            <dt>
-              Permissions:{" "}
-              {JSON.stringify(settings.user.permissions, undefined, 2)}
-            </dt>
-          </dl>
-        </p>
+              <dt>Active Sessions: {settings.user.active_sessions}</dt>
+              <dt>
+                Permissions:{" "}
+                <pre>
+                  {JSON.stringify(settings.user.permissions, undefined, 2)}
+                </pre>
+              </dt>
+            </dl>
+          </div>
+        </div>
       </div>
     </div>
   );

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

@@ -1,87 +1,65 @@
-import React, { useState, useEffect } from "react";
+import React, { ReactElement, useCallback } from "react";
 import { AirDCPPSettingsConfirmation } from "./AirDCPPSettingsConfirmation";
+import { isUndefined, isEmpty } from "lodash";
 import { ConnectionForm } from "../../shared/ConnectionForm/ConnectionForm";
-import { useMutation, useQuery } from "@tanstack/react-query";
-import axios from "axios";
-import {
-  AIRDCPP_SERVICE_BASE_URI,
-  SETTINGS_SERVICE_BASE_URI,
-} from "../../../constants/endpoints";
+import { useStore } from "../../../store/index";
+import { useShallow } from "zustand/react/shallow";
 
-export const AirDCPPSettingsForm = () => {
-  const [airDCPPSessionInformation, setAirDCPPSessionInformation] =
-    useState(null);
-  // Fetching all settings
-  const { data: settingsData, isSuccess: settingsSuccess } = useQuery({
-    queryKey: ["airDCPPSettings"],
-    queryFn: () => axios.get(`${SETTINGS_SERVICE_BASE_URI}/getAllSettings`),
-  });
-
-  // Fetch session information
-  const fetchSessionInfo = (host) => {
-    return axios.post(`${AIRDCPP_SERVICE_BASE_URI}/initialize`, { host });
-  };
-
-  // Use effect to trigger side effects on settings fetch success
-  useEffect(() => {
-    if (settingsSuccess && settingsData?.data?.directConnect?.client?.host) {
-      const host = settingsData.data.directConnect.client.host;
-      fetchSessionInfo(host).then((response) => {
-        setAirDCPPSessionInformation(response.data);
-      });
-    }
-  }, [settingsSuccess, settingsData]);
-
-  // Handle setting update and subsequent AirDC++ initialization
-  const { mutate } = useMutation({
-    mutationFn: (values) => {
-      console.log(values);
-      return axios.post("http://localhost:3000/api/settings/saveSettings", {
-        settingsPayload: values,
-        settingsKey: "directConnect",
-      });
-    },
-    onSuccess: async (response) => {
-      const host = response?.data?.directConnect?.client?.host;
-      if (host) {
-        const response = await fetchSessionInfo(host);
-        setAirDCPPSessionInformation(response.data);
-        // setState({ airDCPPClientConfiguration: host });
-      }
-    },
-  });
-
-  const deleteSettingsMutation = useMutation(() =>
-    axios.post("http://localhost:3000/api/settings/saveSettings", {
-      settingsPayload: {},
-      settingsKey: "directConnect",
-    }),
+export const AirDCPPSettingsForm = (): ReactElement => {
+  // cherry-picking selectors for:
+  // 1. initial values for the form
+  // 2. If initial values are present, get the socket information to display
+  const {
+    airDCPPSocketConnected,
+    airDCPPDisconnectionInfo,
+    airDCPPSocketConnectionInformation,
+    airDCPPClientConfiguration,
+  } = useStore(
+    useShallow((state) => ({
+      airDCPPSocketConnected: state.airDCPPSocketConnected,
+      airDCPPDisconnectionInfo: state.airDCPPDisconnectionInfo,
+      airDCPPClientConfiguration: state.airDCPPClientConfiguration,
+      airDCPPSocketConnectionInformation:
+        state.airDCPPSocketConnectionInformation,
+    })),
   );
 
-  const initFormData = settingsData?.data?.directConnect?.client?.host ?? {};
+  const onSubmit = useCallback(async (values) => {
+    try {
+      // airDCPPSettings.setSettings(values);
+    } catch (error) {
+      console.log(error);
+    }
+  }, []);
+  const removeSettings = useCallback(async () => {
+    // airDCPPSettings.setSettings({});
+  }, []);
+  //
+  const initFormData = !isUndefined(airDCPPClientConfiguration)
+    ? airDCPPClientConfiguration
+    : {};
 
   return (
     <>
       <ConnectionForm
         initialData={initFormData}
-        submitHandler={mutate}
+        submitHandler={onSubmit}
         formHeading={"Configure AirDC++"}
       />
 
-      {airDCPPSessionInformation && (
-        <AirDCPPSettingsConfirmation settings={airDCPPSessionInformation} />
-      )}
+      {!isEmpty(airDCPPSocketConnectionInformation) ? (
+        <AirDCPPSettingsConfirmation
+          settings={airDCPPSocketConnectionInformation}
+        />
+      ) : null}
 
-      {settingsData?.data && (
+      {!isEmpty(airDCPPClientConfiguration) ? (
         <p className="control mt-4">
-          <button
-            className="button is-danger"
-            onClick={() => deleteSettingsMutation.mutate()}
-          >
+          <button className="button is-danger" onClick={removeSettings}>
             Delete
           </button>
         </p>
-      )}
+      ) : null}
     </>
   );
 };

src/client/components/Settings/ProwlarrSettings/ProwlarrSettingsForm.tsx

@@ -1,62 +0,0 @@
-import React from "react";
-import { useQuery } from "@tanstack/react-query";
-import { Form, Field } from "react-final-form";
-import { PROWLARR_SERVICE_BASE_URI } from "../../../constants/endpoints";
-import axios from "axios";
-
-export const ProwlarrSettingsForm = (props) => {
-  const { data } = useQuery({
-    queryFn: async (): any => {
-      return await axios({
-        url: `${PROWLARR_SERVICE_BASE_URI}/getIndexers`,
-        method: "POST",
-        data: {
-          host: "localhost",
-          port: "9696",
-          apiKey: "c4f42e265fb044dc81f7e88bd41c3367",
-        },
-      });
-    },
-    queryKey: ["prowlarrConnectionResult"],
-  });
-  console.log(data);
-  const submitHandler = () => {};
-  const initialData = {};
-  return (
-    <>
-      Prowlarr Settings.
-      <Form
-        onSubmit={submitHandler}
-        initialValues={initialData}
-        render={({ handleSubmit }) => (
-          <form>
-            <article
-              role="alert"
-              className="mt-4 rounded-lg max-w-screen-md border-s-4 border-blue-500 bg-blue-50 p-4 dark:border-s-4 dark:border-blue-600 dark:bg-blue-300 dark:text-slate-600"
-            >
-              <div>
-                <p>Configure Prowlarr integration here.</p>
-                <p>
-                  Note that you need a Prowlarr instance hosted and running to
-                  configure the integration.
-                </p>
-                <p>
-                  See{" "}
-                  <a
-                    className="underline"
-                    href="http://airdcpp.net/docs/installation/installation.html"
-                  >
-                    here
-                  </a>{" "}
-                  for Prowlarr installation instructions for various platforms.
-                </p>
-              </div>
-            </article>
-          </form>
-        )}
-      />
-    </>
-  );
-};
-
-export default ProwlarrSettingsForm;

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

@@ -1,10 +1,9 @@
 import React, { ReactElement } from "react";
 import { ConnectionForm } from "../../shared/ConnectionForm/ConnectionForm";
-import { useQuery, useMutation, QueryClient } from "@tanstack/react-query";
+import { useQuery, useMutation } from "@tanstack/react-query";
 import axios from "axios";
 
 export const QbittorrentConnectionForm = (): ReactElement => {
-  const queryClient = new QueryClient();
   // fetch settings
   const { data, isLoading, isError } = useQuery({
     queryKey: ["settings"],
@@ -14,9 +13,18 @@ export const QbittorrentConnectionForm = (): ReactElement => {
         method: "GET",
       }),
   });
-  const hostDetails = data?.data?.bittorrent?.client?.host;
+  const hostDetails = data?.data.bittorrent.client.host;
   // connect to qbittorrent client
-
+  const { data: connectionDetails } = useQuery({
+    queryKey: [],
+    queryFn: async () =>
+      await axios({
+        url: "http://localhost:3060/api/qbittorrent/connect",
+        method: "POST",
+        data: hostDetails,
+      }),
+    enabled: !!hostDetails,
+  });
   // get qbittorrent client info
   const { data: qbittorrentClientInfo } = useQuery({
     queryKey: ["qbittorrentClientInfo"],
@@ -25,7 +33,9 @@ export const QbittorrentConnectionForm = (): ReactElement => {
         url: "http://localhost:3060/api/qbittorrent/getClientInfo",
         method: "GET",
       }),
+    enabled: !!connectionDetails,
   });
+  console.log(qbittorrentClientInfo?.data);
   // Update action using a mutation
   const { mutate } = useMutation({
     mutationFn: async (values) =>
@@ -34,11 +44,6 @@ export const QbittorrentConnectionForm = (): ReactElement => {
         method: "POST",
         data: { settingsPayload: values, settingsKey: "bittorrent" },
       }),
-    onSuccess: () => {
-      queryClient.invalidateQueries({
-        queryKey: ["settings", "qbittorrentClientInfo"],
-      });
-    },
   });
 
   if (isError)
@@ -56,24 +61,9 @@ export const QbittorrentConnectionForm = (): ReactElement => {
           submitHandler={mutate}
         />
 
-        <span className="flex items-center mt-10 mb-4">
-          <span className="text-xl text-slate-500 dark:text-slate-200 pr-5">
-            qBittorrent Client Information
-          </span>
-          <span className="h-px flex-1 bg-slate-200 dark:bg-slate-400"></span>
-        </span>
-
-        <div className="block max-w-sm p-6 bg-white border border-gray-200 rounded-lg shadow dark:bg-slate-400 dark:border-gray-700">
-          <span className="inline-flex justify-center rounded-full bg-emerald-100 mb-4 px-2 py-0.5 text-emerald-700">
-            <span className="h-5 w-6">
-              <i className="icon-[solar--plug-circle-bold] h-5 w-5"></i>
-            </span>
-            <p className="whitespace-nowrap text-sm">Connected</p>
-          </span>
-          <pre className="font-hasklig text-sm text-slate-700 dark:text-slate-700">
-            {JSON.stringify(qbittorrentClientInfo?.data, null, 4)}
-          </pre>
-        </div>
+        <pre className="mt-5">
+          {JSON.stringify(qbittorrentClientInfo?.data, null, 4)}
+        </pre>
       </>
     );
   }

src/client/components/Settings/Settings.tsx

@@ -3,7 +3,6 @@ import { AirDCPPSettingsForm } from "./AirDCPPSettings/AirDCPPSettingsForm";
 import { AirDCPPHubsForm } from "./AirDCPPSettings/AirDCPPHubsForm";
 import { QbittorrentConnectionForm } from "./QbittorrentSettings/QbittorrentConnectionForm";
 import { SystemSettingsForm } from "./SystemSettings/SystemSettingsForm";
-import ProwlarrSettingsForm from "./ProwlarrSettings/ProwlarrSettingsForm";
 import { ServiceStatuses } from "../ServiceStatuses/ServiceStatuses";
 import settingsObject from "../../constants/settings/settingsMenu.json";
 import { isUndefined, map } from "lodash";
@@ -12,15 +11,10 @@ interface ISettingsProps {}
 
 export const Settings = (props: ISettingsProps): ReactElement => {
   const [active, setActive] = useState("gen-db");
-  console.log(active);
   const settingsContent = [
     {
       id: "adc-hubs",
-      content: (
-        <div key="adc-hubs">
-          <AirDCPPHubsForm />
-        </div>
-      ),
+      content: <div key="adc-hubs">{/* <AirDCPPHubsForm /> */}</div>,
     },
     {
       id: "adc-connection",
@@ -38,116 +32,81 @@ export const Settings = (props: ISettingsProps): ReactElement => {
         </div>
       ),
     },
-    {
-      id: "prwlr-connection",
-      content: (
-        <>
-          <ProwlarrSettingsForm />
-        </>
-      ),
-    },
     {
       id: "core-service",
       content: <>a</>,
     },
     {
       id: "flushdb",
-      content: (
-        <div key="flushdb">
-          <SystemSettingsForm />
-        </div>
-      ),
+      content: <div key="flushdb">{/* <SystemSettingsForm /> */}</div>,
     },
   ];
   return (
-    <div>
-      <section>
-        <header className="bg-slate-200 dark:bg-slate-500">
-          <div className="mx-auto max-w-screen-xl px-2 py-2 sm:px-6 sm:py-8 lg:px-8 lg:py-4">
-            <div className="sm:flex sm:items-center sm:justify-between">
-              <div className="text-center sm:text-left">
-                <h1 className="text-2xl font-bold text-gray-900 dark:text-white sm:text-3xl">
-                  Settings
-                </h1>
+    <section className="container">
+      <div className="columns">
+        <div className="section column is-one-quarter">
+          <h1 className="title">Settings</h1>
+          <aside className="menu">
+            {map(settingsObject, (settingObject, idx) => {
+              return (
+                <div key={idx}>
+                  <p className="menu-label">{settingObject.category}</p>
+                  {/* First level children */}
+                  {!isUndefined(settingObject.children) ? (
+                    <ul className="menu-list" key={settingObject.id}>
+                      {map(settingObject.children, (item, idx) => {
+                        return (
+                          <li key={idx}>
+                            <a
+                              className={
+                                item.id.toString() === active ? "is-active" : ""
+                              }
+                              onClick={() => setActive(item.id.toString())}
+                            >
+                              {item.displayName}
+                            </a>
+                            {/* Second level children */}
+                            {!isUndefined(item.children) ? (
+                              <ul>
+                                {map(item.children, (item, idx) => (
+                                  <li key={item.id}>
+                                    <a
+                                      className={
+                                        item.id.toString() === active
+                                          ? "is-active"
+                                          : ""
+                                      }
+                                      onClick={() =>
+                                        setActive(item.id.toString())
+                                      }
+                                    >
+                                      {item.displayName}
+                                    </a>
+                                  </li>
+                                ))}
+                              </ul>
+                            ) : null}
+                          </li>
+                        );
+                      })}
+                    </ul>
+                  ) : null}
+                </div>
+              );
+            })}
+          </aside>
+        </div>
 
-                <p className="mt-1.5 text-sm text-gray-500 dark:text-white">
-                  Import comics into the ThreeTwo library.
-                </p>
-              </div>
-            </div>
-          </div>
-        </header>
-        <div className="flex flex-row">
-          <div className="inset-y-0 w-80 dark:bg-gray-800 bg-slate-300 text-white overflow-y-auto">
-            <aside className="px-4 py-4 sm:px-6 sm:py-8 lg:px-8">
-              {map(settingsObject, (settingObject, idx) => {
-                return (
-                  <div
-                    className="w-64 py-2 text-slate-700 dark:text-slate-400"
-                    key={idx}
-                  >
-                    <h3 className="text-l pb-2">
-                      {settingObject.category.toUpperCase()}
-                    </h3>
-                    {/* First level children */}
-                    {!isUndefined(settingObject.children) ? (
-                      <ul key={settingObject.id}>
-                        {map(settingObject.children, (item, idx) => {
-                          return (
-                            <li key={idx} className="mb-2">
-                              <a
-                                className={
-                                  item.id.toString() === active
-                                    ? "is-active flex items-center"
-                                    : "flex items-center"
-                                }
-                                onClick={() => setActive(item.id.toString())}
-                              >
-                                {item.displayName}
-                              </a>
-                              {/* Second level children */}
-                              {!isUndefined(item.children) ? (
-                                <ul className="pl-4 mt-2">
-                                  {map(item.children, (item, idx) => (
-                                    <li key={item.id} className="mb-2">
-                                      <a
-                                        className={
-                                          item.id.toString() === active
-                                            ? "is-active flex items-center"
-                                            : "flex items-center"
-                                        }
-                                        onClick={() =>
-                                          setActive(item.id.toString())
-                                        }
-                                      >
-                                        {item.displayName}
-                                      </a>
-                                    </li>
-                                  ))}
-                                </ul>
-                              ) : null}
-                            </li>
-                          );
-                        })}
-                      </ul>
-                    ) : null}
-                  </div>
-                );
-              })}
-            </aside>
-          </div>
-
-          {/* content for settings */}
-          <div className="flex mx-12">
-            <div className="">
-              {map(settingsContent, ({ id, content }) =>
-                active === id ? content : null,
-              )}
-            </div>
+        {/* content for settings */}
+        <div className="section column is-half mt-6">
+          <div className="content">
+            {map(settingsContent, ({ id, content }) =>
+              active === id ? content : null,
+            )}
           </div>
         </div>
-      </section>
-    </div>
+      </div>
+    </section>
   );
 };
 

src/client/components/Settings/SystemSettings/SystemSettingsForm.tsx

@@ -1,16 +1,15 @@
-import React, { ReactElement } from "react";
-import { useMutation } from "@tanstack/react-query";
-import axios from "axios";
+import React, { ReactElement, useCallback } from "react";
+import { flushDb } from "../../../actions/settings.actions";
+import { useDispatch, useSelector } from "react-redux";
 
 export const SystemSettingsForm = (): ReactElement => {
-  const { mutate: flushDb, isLoading } = useMutation({
-    mutationFn: async () => {
-      await axios({
-        url: `http://localhost:3000/api/library/flushDb`,
-        method: "POST",
-      });
-    },
-  });
+  const dispatch = useDispatch();
+  const isSettingsCallInProgress = useSelector(
+    (state: RootState) => state.settings.inProgress,
+  );
+  const flushDatabase = useCallback(() => {
+    dispatch(flushDb());
+  }, []);
 
   return (
     <div className="is-clearfix">
@@ -48,11 +47,15 @@ export const SystemSettingsForm = (): ReactElement => {
         </article>
 
         <button
-          className="flex space-x-1 sm:mt-0 sm:flex-row sm:items-center rounded-lg border border-red-400 dark:border-red-200 bg-red-200 px-2 py-1 text-gray-500 hover:bg-transparent hover:text-red-600 focus:outline-none focus:ring active:text-indigo-500"
-          onClick={() => flushDb()}
+          className={
+            isSettingsCallInProgress
+              ? "button is-danger is-loading"
+              : "button is-danger"
+          }
+          onClick={flushDatabase}
         >
-          <span className="pt-1 px-1">
-            <i className="icon-[solar--trash-bin-trash-bold-duotone] w-7 h-7"></i>
+          <span className="icon">
+            <i className="fas fa-eraser"></i>
           </span>
           <span>Flush DB & Temporary Folders</span>
         </button>

src/client/components/VolumeDetail/VolumeDetail.tsx

@@ -1,25 +1,30 @@
-import { isEmpty, isNil, isUndefined, map, partialRight, pick } from "lodash";
-import React, { ReactElement, useState, useCallback } from "react";
+import { isEmpty, isUndefined, map, partialRight, pick } from "lodash";
+import React, { useEffect, ReactElement, useState, useCallback } from "react";
+import { useDispatch, useSelector } from "react-redux";
 import { useParams } from "react-router";
-import { analyzeLibrary } from "../../actions/comicinfo.actions";
-import { useQuery, useMutation, QueryClient } from "@tanstack/react-query";
+import {
+  getComicBookDetailById,
+  getIssuesForSeries,
+  analyzeLibrary,
+} from "../../actions/comicinfo.actions";
 import PotentialLibraryMatches from "./PotentialLibraryMatches";
+import Masonry from "react-masonry-css";
 import { Card } from "../shared/Carda";
 import SlidingPane from "react-sliding-pane";
 import { convert } from "html-to-text";
 import ellipsize from "ellipsize";
-import {
-  COMICVINE_SERVICE_URI,
-  LIBRARY_SERVICE_BASE_URI,
-} from "../../constants/endpoints";
-import axios from "axios";
 
 const VolumeDetails = (props): ReactElement => {
+  const breakpointColumnsObj = {
+    default: 6,
+    1100: 4,
+    700: 3,
+    500: 2,
+  };
   // sliding panel config
   const [visible, setVisible] = useState(false);
   const [slidingPanelContentId, setSlidingPanelContentId] = useState("");
   const [matches, setMatches] = useState([]);
-  const [storyArcsData, setStoryArcsData] = useState([]);
   const [active, setActive] = useState(1);
 
   // sliding panel init
@@ -28,9 +33,7 @@ const VolumeDetails = (props): ReactElement => {
       content: () => {
         const ids = map(matches, partialRight(pick, "_id"));
         const matchIds = ids.map((id: any) => id._id);
-        {
-          /* return <PotentialLibraryMatches matches={matchIds} />; */
-        }
+        return <PotentialLibraryMatches matches={matchIds} />;
       },
     },
   };
@@ -42,145 +45,68 @@ const VolumeDetails = (props): ReactElement => {
     setVisible(true);
   }, []);
 
-  //   const analyzeIssues = useCallback((issues) => {
-  //     dispatch(analyzeLibrary(issues));
-  //   }, []);
-  //
+  const analyzeIssues = useCallback((issues) => {
+    dispatch(analyzeLibrary(issues));
+  }, []);
+
+  const comicBookDetails = useSelector(
+    (state: RootState) => state.comicInfo.comicBookDetail,
+  );
+  const issuesForVolume = useSelector(
+    (state: RootState) => state.comicInfo.issuesForVolume,
+  );
+
+  const dispatch = useDispatch();
+  useEffect(() => {
+    dispatch(getIssuesForSeries(comicObjectId));
+    dispatch(getComicBookDetailById(comicObjectId));
+  }, []);
 
   const { comicObjectId } = useParams<{ comicObjectId: string }>();
 
-  const { data: comicObject, isSuccess: isComicObjectFetchedSuccessfully } =
-    useQuery({
-      queryFn: async () =>
-        axios({
-          url: `${LIBRARY_SERVICE_BASE_URI}/getComicBookById`,
-          method: "POST",
-          data: {
-            id: comicObjectId,
-          },
-        }),
-      queryKey: ["comicObject"],
-    });
-
-  // get issues for a series
-  const {
-    data: issuesForSeries,
-    isSuccess,
-    isFetching,
-  } = useQuery({
-    queryFn: async () =>
-      await axios({
-        url: `${COMICVINE_SERVICE_URI}/getIssuesForVolume`,
-        method: "POST",
-        data: {
-          volumeId:
-            comicObject?.data?.sourcedMetadata.comicvine.volumeInformation.id,
-        },
-      }),
-    queryKey: ["issuesForSeries", comicObject?.data],
-    enabled: !isUndefined(comicObject?.data),
-  });
-  // get story arcs
-  const useGetStoryArcs = () => {
-    return useMutation({
-      mutationFn: async (comicObject) =>
-        axios({
-          url: `${COMICVINE_SERVICE_URI}/getResource`,
-          method: "POST",
-          data: {
-            comicObject,
-            resource: "issue",
-            filter: `id:${comicObject?.sourcedMetadata.comicvine.id}`,
-          },
-        }),
-      onSuccess: (data) => {
-        setStoryArcsData(data?.data.results);
-      },
-    });
-  };
-
-  const {
-    mutate: getStoryArcs,
-    isIdle,
-    isError,
-    data,
-    error,
-    status,
-  } = useGetStoryArcs();
-
   const IssuesInVolume = () => (
     <>
-      {!isUndefined(issuesForSeries) ? (
-        <div className="button" onClick={() => analyzeIssues(issuesForSeries)}>
+      {!isUndefined(issuesForVolume) ? (
+        <div className="button" onClick={() => analyzeIssues(issuesForVolume)}>
           Analyze Library
         </div>
       ) : null}
-      <>
-        {isSuccess &&
-          issuesForSeries.data.map((issue) => {
-            return (
-              <>
+      <Masonry
+        breakpointCols={breakpointColumnsObj}
+        className="issues-container"
+        columnClassName="issues-column"
+      >
+        {!isUndefined(issuesForVolume) && !isEmpty(issuesForVolume)
+          ? issuesForVolume.map((issue) => {
+              return (
                 <Card
                   key={issue.id}
-                  imageUrl={issue.image.small_url}
-                  orientation={"cover-only"}
-                  hasDetails={false}
-                />
-                <span className="tag is-warning mr-1">
-                  {issue.issue_number}
-                </span>
-                {!isEmpty(issue.matches) ? (
-                  <>
-                    <span className="icon has-text-success">
-                      <i className="fa-regular fa-asterisk"></i>
-                    </span>
-                  </>
-                ) : null}
-              </>
-            );
-          })}
-      </>
-    </>
-  );
-
-  const Issues = () => (
-    <>
-      <article
-        role="alert"
-        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"
-      >
-        <div>
-          You can add a single issue or the whole volume, and it will be added
-          to the list of `Wanted` items.
-        </div>
-      </article>
-      <div className="flex flex-wrap">
-        {isSuccess &&
-          issuesForSeries?.data.map((issue) => {
-            return (
-              <div className="my-3 dark:bg-slate-400 bg-slate-300 p-4 rounded-lg w-3/4">
-                <div className="flex flex-row gap-4 mb-2">
-                  <div className="w-fit">
-                    <img
-                      src={issue.image.thumb_url}
-                      className="w-full rounded-md"
-                    />
-                  </div>
-                  <div className="w-3/4">
-                    <p className="text-xl">{issue.name}</p>
-                    <p className="text-sm">
-                      {convert(issue.description, {
-                        baseElements: {
-                          selectors: ["p"],
-                        },
-                      })}
-                    </p>
-                  </div>
-                </div>
-              </div>
-            );
-          })}
-      </div>
+                  imageUrl={issue.image.thumb_url}
+                  orientation={"vertical"}
+                  hasDetails
+                  borderColorClass={
+                    !isEmpty(issue.matches) ? "green-border" : ""
+                  }
+                  backgroundColor={!isEmpty(issue.matches) ? "beige" : ""}
+                  onClick={() =>
+                    openPotentialLibraryMatchesPanel(issue.matches)
+                  }
+                >
+                  <span className="tag is-warning mr-1">
+                    {issue.issue_number}
+                  </span>
+                  {!isEmpty(issue.matches) ? (
+                    <>
+                      <span className="icon has-text-success">
+                        <i className="fa-regular fa-asterisk"></i>
+                      </span>
+                    </>
+                  ) : null}
+                </Card>
+              );
+            })
+          : "loading"}
+      </Masonry>
     </>
   );
 
@@ -189,44 +115,20 @@ const VolumeDetails = (props): ReactElement => {
     {
       id: 1,
       name: "Issues in Volume",
-      icon: <i className="icon-[solar--documents-bold-duotone] w-6 h-6"></i>,
-      content: <Issues />,
+      icon: <i className="fa-solid fa-layer-group"></i>,
+      content: <IssuesInVolume key={1} />,
     },
     {
       id: 2,
-      icon: (
-        <i className="icon-[solar--users-group-rounded-bold-duotone] w-6 h-6"></i>
-      ),
+      icon: <i className="fa-regular fa-mask"></i>,
       name: "Characters",
-      content: <div key={2}>Characters</div>,
+      content: <div key={2}>asdasd</div>,
     },
     {
       id: 3,
-      icon: (
-        <i className="icon-[solar--book-bookmark-bold-duotone] w-6 h-6"></i>
-      ),
-      name: "Story Arcs",
-      content: (
-        <div key={3}>
-          <button className="" onClick={() => getStoryArcs(comicObject?.data)}>
-            Get story arcs
-          </button>
-          {status === "pending" && <>{status}</>}
-          {!isEmpty(storyArcsData) && status === "success" && (
-            <>
-              <ul>
-                {storyArcsData.map((storyArc) => {
-                  return (
-                    <li>
-                      <span className="text-lg">{storyArc?.name}</span>
-                    </li>
-                  );
-                })}
-              </ul>
-            </>
-          )}
-        </div>
-      ),
+      icon: <i className="fa-solid fa-scroll"></i>,
+      name: "Arcs",
+      content: <div key={3}>asdasd</div>,
     },
   ];
 
@@ -234,26 +136,21 @@ const VolumeDetails = (props): ReactElement => {
   const MetadataTabGroup = () => {
     return (
       <>
-        <div className="hidden sm:block mt-7 mb-3 w-fit">
-          <div className="border-b border-gray-200">
-            <nav className="flex gap-4" aria-label="Tabs">
-              {tabGroup.map(({ id, name, icon }) => (
-                <a
-                  key={id}
-                  className={`inline-flex shrink-0 items-center gap-2 px-1 py-1 text-md font-medium text-gray-500 dark:text-gray-400 hover:border-gray-300 hover:border-b hover:dark:text-slate-200 ${
-                    active === id
-                      ? "border-b border-cyan-50 dark:text-slate-200"
-                      : "border-b border-transparent"
-                  }`}
-                  aria-current="page"
-                  onClick={() => setActive(id)}
-                >
-                  <span className="pt-1">{icon}</span>
+        <div className="tabs">
+          <ul>
+            {tabGroup.map(({ id, name, icon }) => (
+              <li
+                key={id}
+                className={id === active ? "is-active" : ""}
+                onClick={() => setActive(id)}
+              >
+                <a>
+                  <span className="icon is-small">{icon}</span>
                   {name}
                 </a>
-              ))}
-            </nav>
-          </div>
+              </li>
+            ))}
+          </ul>
         </div>
         {tabGroup.map(({ id, content }) => {
           return active === id ? content : null;
@@ -261,103 +158,97 @@ const VolumeDetails = (props): ReactElement => {
       </>
     );
   };
-  if (isComicObjectFetchedSuccessfully && !isUndefined(comicObject.data)) {
-    const { sourcedMetadata } = comicObject.data;
-    return (
-      <>
-        <header className="bg-slate-200 dark:bg-slate-500">
-          <div className="mx-auto max-w-screen-xl px-2 py-2 sm:px-6 sm:py-8 lg:px-8 lg:py-4">
-            <div className="sm:flex sm:items-center sm:justify-between">
-              <div className="text-center sm:text-left">
-                <h1 className="text-2xl font-bold text-gray-900 dark:text-white sm:text-3xl">
-                  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>
-        <div className="container mx-auto mt-4">
-          <div>
-            <div className="flex flex-row gap-4">
-              {/* Volume cover */}
+  if (
+    !isUndefined(comicBookDetails.sourcedMetadata) &&
+    !isUndefined(comicBookDetails.sourcedMetadata.comicvine.volumeInformation)
+  ) {
+    return (
+      <div className="container volume-details">
+        <div className="section">
+          {/* Title */}
+          <h1 className="title">
+            {comicBookDetails.sourcedMetadata.comicvine.volumeInformation.name}
+          </h1>
+          <div className="columns is-multiline">
+            {/* Volume cover */}
+            <div className="column is-narrow">
               <Card
                 imageUrl={
-                  sourcedMetadata.comicvine.volumeInformation.image.small_url
+                  comicBookDetails.sourcedMetadata.comicvine.volumeInformation
+                    .image.small_url
                 }
-                orientation={"cover-only"}
+                cardContainerStyle={{ maxWidth: 275 }}
+                orientation={"vertical"}
                 hasDetails={false}
               />
+            </div>
 
-              <div>
-                <div className="field is-grouped">
-                  {/* Title */}
-                  <span className="text-2xl">
-                    {sourcedMetadata.comicvine.volumeInformation.name}
-                  </span>
-                  {/* Comicvine Id */}
-                  <div className="control">
-                    <div className="tags has-addons">
-                      <span className="tag">ComicVine Id</span>
-                      <span className="tag is-info is-light">
-                        {sourcedMetadata.comicvine.volumeInformation.id}
-                      </span>
-                    </div>
-                  </div>
-                  {/* Publisher */}
-                  <div className="control">
-                    <div className="tags has-addons">
-                      <span className="tag is-warning is-light">Publisher</span>
-                      <span className="tag is-volume-related">
-                        {
-                          sourcedMetadata.comicvine.volumeInformation.publisher
-                            .name
-                        }
-                      </span>
-                    </div>
+            <div className="column is-three-fifths">
+              <div className="field is-grouped mt-2">
+                {/* Comicvine Id */}
+                <div className="control">
+                  <div className="tags has-addons">
+                    <span className="tag">ComicVine Id</span>
+                    <span className="tag is-info is-light">
+                      {
+                        comicBookDetails.sourcedMetadata.comicvine
+                          .volumeInformation.id
+                      }
+                    </span>
                   </div>
                 </div>
-
-                {/* Deck */}
-                <div>
-                  {!isEmpty(
-                    sourcedMetadata.comicvine.volumeInformation.description,
-                  )
-                    ? ellipsize(
-                        convert(
-                          sourcedMetadata.comicvine.volumeInformation
-                            .description,
-                          {
-                            baseElements: {
-                              selectors: ["p"],
-                            },
-                          },
-                        ),
-                        300,
-                      )
-                    : null}
+                {/* Publisher */}
+                <div className="control">
+                  <div className="tags has-addons">
+                    <span className="tag is-warning is-light">Publisher</span>
+                    <span className="tag is-volume-related">
+                      {
+                        comicBookDetails.sourcedMetadata.comicvine
+                          .volumeInformation.publisher.name
+                      }
+                    </span>
+                  </div>
                 </div>
               </div>
 
-              {/* <pre>{JSON.stringify(issuesForVolume, undefined, 2)}</pre> */}
+              {/* Deck */}
+              <div>
+                {!isEmpty(
+                  comicBookDetails.sourcedMetadata.comicvine.volumeInformation
+                    .description,
+                )
+                  ? ellipsize(
+                      convert(
+                        comicBookDetails.sourcedMetadata.comicvine
+                          .volumeInformation.description,
+                        {
+                          baseElements: {
+                            selectors: ["p"],
+                          },
+                        },
+                      ),
+                      300,
+                    )
+                  : null}
+              </div>
             </div>
-            <MetadataTabGroup />
-          </div>
 
-          <SlidingPane
-            isOpen={visible}
-            onRequestClose={() => setVisible(false)}
-            title={"Potential Matches in Library"}
-            width={"600px"}
-          >
-            {slidingPanelContentId !== "" &&
-              contentForSlidingPanel[slidingPanelContentId].content()}
-          </SlidingPane>
+            {/* <pre>{JSON.stringify(issuesForVolume, undefined, 2)}</pre> */}
+          </div>
+          <MetadataTabGroup />
         </div>
-      </>
+
+        <SlidingPane
+          isOpen={visible}
+          onRequestClose={() => setVisible(false)}
+          title={"Potential Matches in Library"}
+          width={"600px"}
+        >
+          {slidingPanelContentId !== "" &&
+            contentForSlidingPanel[slidingPanelContentId].content()}
+        </SlidingPane>
+      </div>
     );
   } else {
     return <></>;

src/client/components/Volumes/Volumes.tsx

@@ -1,28 +1,22 @@
 import React, { ReactElement, useEffect, useMemo } from "react";
+import { useDispatch, useSelector } from "react-redux";
 import { searchIssue } from "../../actions/fileops.actions";
 import Card from "../shared/Carda";
 import T2Table from "../shared/T2Table";
 import ellipsize from "ellipsize";
 import { convert } from "html-to-text";
-import { Link } from "react-router-dom";
-import { useQuery } from "@tanstack/react-query";
-import axios from "axios";
-import { SEARCH_SERVICE_BASE_URI } from "../../constants/endpoints";
+import { isUndefined } from "lodash";
 
 export const Volumes = (props): ReactElement => {
-  // const volumes = useSelector((state: RootState) => state.fileOps.volumes);
-  const {
-    data: volumes,
-    isSuccess,
-    isError,
-    isLoading,
-  } = useQuery({
-    queryFn: async () =>
-      await axios({
-        url: `${SEARCH_SERVICE_BASE_URI}/searchIssue`,
-        method: "POST",
-        data: {
+  const volumes = useSelector((state: RootState) => state.fileOps.volumes);
+  const dispatch = useDispatch();
+  useEffect(() => {
+    dispatch(
+      searchIssue(
+        {
           query: {},
+        },
+        {
           pagination: {
             size: 25,
             from: 0,
@@ -30,61 +24,106 @@ export const Volumes = (props): ReactElement => {
           type: "volumes",
           trigger: "volumesPage",
         },
-      }),
-    queryKey: ["volumes"],
-  });
-  console.log(volumes);
+      ),
+    );
+  }, []);
   const columnData = useMemo(
-    (): any => [
+    () => [
       {
         header: "Volume Details",
         id: "volumeDetails",
         minWidth: 450,
-        accessorFn: (row) => row,
-        cell: (row): any => {
-          const comicObject = row.getValue();
-          const {
-            _source: { sourcedMetadata },
-          } = comicObject;
-          console.log("jaggu", row.getValue());
+        accessorKey: "_source",
+        cell: (row) => {
+          const foo = row.getValue();
           return (
-            <div className="flex flex-row gap-3 mt-5">
-              <Link to={`/volume/details/${comicObject._id}`}>
-                <Card
-                  imageUrl={
-                    sourcedMetadata.comicvine.volumeInformation.image.small_url
-                  }
-                  orientation={"cover-only"}
-                  hasDetails={false}
-                />
-              </Link>
-              <div className="dark:bg-[#647587] bg-slate-200 rounded-lg w-3/4 h-fit p-3">
-                <div className="text-xl mb-1 w-fit">
-                  {sourcedMetadata.comicvine.volumeInformation.name}
+            <div className="columns">
+              <div className="column">
+                <div className="comic-detail issue-metadata">
+                  <dl>
+                    <dd>
+                      <div className="columns mt-2">
+                        <div className="">
+                          <Card
+                            imageUrl={
+                              foo.sourcedMetadata.comicvine.volumeInformation
+                                .image.thumb_url
+                            }
+                            orientation={"vertical"}
+                            hasDetails={false}
+                            // cardContainerStyle={{ maxWidth: 200 }}
+                          />
+                        </div>
+                        <div className="column">
+                          <dl>
+                            <dt>
+                              <h6 className="name has-text-weight-medium mb-1">
+                                {
+                                  foo.sourcedMetadata.comicvine
+                                    .volumeInformation.name
+                                }
+                              </h6>
+                            </dt>
+                            <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>
-                <p>
-                  {ellipsize(
-                    convert(
-                      sourcedMetadata.comicvine.volumeInformation.description,
-                      {
-                        baseElements: {
-                          selectors: ["p"],
-                        },
-                      },
-                    ),
-                    180,
-                  )}
-                </p>
               </div>
             </div>
           );
         },
       },
       {
-        header: "Other Details",
+        header: "Download Status",
         columns: [
           {
-            header: "Downloads",
+            header: "Files",
             accessorKey: "_source.acquisition.directconnect",
             align: "right",
             cell: (props) => {
@@ -105,34 +144,12 @@ export const Volumes = (props): ReactElement => {
             },
           },
           {
-            header: "Publisher",
-            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",
+            id: "Air",
           },
           {
-            header: "Issue Count",
-            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>
-              );
-            },
+            header: "Type",
+            id: "dcc",
           },
         ],
       },
@@ -140,45 +157,28 @@ export const Volumes = (props): ReactElement => {
     [],
   );
   return (
-    <div>
-      <section className="">
-        <header className="bg-slate-200 dark:bg-slate-500">
-          <div className="mx-auto max-w-screen-xl px-2 py-2 sm:px-6 sm:py-8 lg:px-8 lg:py-4">
-            <div className="sm:flex sm:items-center sm:justify-between">
-              <div className="text-center sm:text-left">
-                <h1 className="text-2xl font-bold text-gray-900 dark:text-white sm:text-3xl">
-                  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 ? (
+    <section className="container">
+      <div className="section">
+        <div className="header-area">
+          <h1 className="title">Volumes</h1>
+        </div>
+        {!isUndefined(volumes.hits) && (
           <div>
             <div className="library">
               <T2Table
-                sourceData={volumes?.data.hits.hits}
-                totalPages={volumes?.data.hits.hits.length}
+                sourceData={volumes?.hits}
+                totalPages={volumes.hits.length}
                 paginationHandlers={{
                   nextPage: () => {},
                   previousPage: () => {},
                 }}
-                rowClickHandler={() => {}}
                 columns={columnData}
               />
             </div>
           </div>
-        ) : null}
-        {isError ? (
-          <div>An error was encountered while retrieving volumes</div>
-        ) : null}
-        {isLoading ? <>Loading...</> : null}
-      </section>
-    </div>
+        )}
+      </div>
+    </section>
   );
 };
 

src/client/components/WantedComics/WantedComics.tsx

@@ -1,37 +1,34 @@
 import React, { ReactElement, useCallback, useEffect, useMemo } from "react";
+import { useDispatch, useSelector } from "react-redux";
+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 {
-    data: wantedComics,
-    isSuccess,
-    isFetched,
-    isError,
-    isLoading,
-  } = useQuery({
-    queryFn: async () =>
-      await axios({
-        url: `${SEARCH_SERVICE_BASE_URI}/searchIssue`,
-        method: "POST",
-        data: {
+  const wantedComics = useSelector(
+    (state: RootState) => state.fileOps.wantedComics,
+  );
+  const dispatch = useDispatch();
+  useEffect(() => {
+    dispatch(
+      searchIssue(
+        {
           query: {},
-
+        },
+        {
           pagination: {
             size: 25,
             from: 0,
           },
           type: "wanted",
-          trigger: "wantedComicsPage",
+          trigger: "wantedComicsPage"
         },
-      }),
-    queryKey: ["wantedComics"],
-    enabled: true,
-  });
+      ),
+    );
+  }, []);
+
   const columnData = [
     {
       header: "Comic Information",
@@ -40,12 +37,8 @@ export const WantedComics = (props): ReactElement => {
           header: "Details",
           id: "comicDetails",
           minWidth: 350,
-          accessorFn: (data) => data,
-          cell: (value) => {
-            console.log("ASDASd", value);
-            const row = value.getValue()._source;
-            return row && <MetadataPanel data={row} />;
-          },
+          accessorFn: data => data,
+          cell: (value) => <MetadataPanel data={value.getValue()} />,
         },
       ],
     },
@@ -54,12 +47,10 @@ export const WantedComics = (props): ReactElement => {
       columns: [
         {
           header: "Files",
+          accessorKey: "acquisition",
           align: "right",
-          accessorKey: "_source.acquisition",
-          cell: (props) => {
-            const {
-              directconnect: { downloads },
-            } = props.getValue();
+          cell: props => {
+            const { directconnect: { downloads } } = props.getValue();
             return (
               <div
                 style={{
@@ -69,7 +60,9 @@ export const WantedComics = (props): ReactElement => {
                 }}
               >
                 {downloads.length > 0 ? (
-                  <span className="tag is-warning">{downloads.length}</span>
+                  <span className="tag is-warning">
+                    {downloads.length}
+                  </span>
                 ) : null}
               </div>
             );
@@ -78,18 +71,12 @@ export const WantedComics = (props): ReactElement => {
         {
           header: "Download Details",
           id: "downloadDetails",
-          accessorKey: "_source.acquisition",
-          cell: (data) => (
-            <ol>
-              {data.getValue().directconnect.downloads.map((download, idx) => {
-                return (
-                  <li className="is-size-7" key={idx}>
-                    {download.name}
-                  </li>
-                );
-              })}
-            </ol>
-          ),
+          accessorKey: "acquisition",
+          cell: data => <ol>
+            {data.getValue().directconnect.downloads.map((download, idx) => {
+              return <li className="is-size-7" key={idx}>{download.name}</li>;
+            })}
+          </ol>
         },
         {
           header: "Type",
@@ -105,25 +92,26 @@ export const WantedComics = (props): ReactElement => {
    * @param {number} pageIndex
    * @param {number} pageSize
    * @returns void
-   *
+   *  
    **/
-  // const nextPage = useCallback((pageIndex: number, pageSize: number) => {
-  //   dispatch(
-  //     searchIssue(
-  //       {
-  //         query: {},
-  //       },
-  //       {
-  //         pagination: {
-  //           size: pageSize,
-  //           from: pageSize * pageIndex + 1,
-  //         },
-  //         type: "wanted",
-  //         trigger: "wantedComicsPage",
-  //       },
-  //     ),
-  //   );
-  // }, []);
+  const nextPage = useCallback((pageIndex: number, pageSize: number) => {
+    dispatch(
+      searchIssue(
+        {
+          query: {},
+        },
+        {
+          pagination: {
+            size: pageSize,
+            from: pageSize * pageIndex + 1,
+          },
+          type: "wanted",
+          trigger: "wantedComicsPage",
+        },
+      ),
+    );
+  }, []);
+
 
   /**
    * Pagination control that fetches the previous x (pageSize) items
@@ -132,71 +120,55 @@ export const WantedComics = (props): ReactElement => {
    * @param {number} pageSize
    * @returns void
    **/
-  // const previousPage = useCallback((pageIndex: number, pageSize: number) => {
-  //   let from = 0;
-  //   if (pageIndex === 2) {
-  //     from = (pageIndex - 1) * pageSize + 2 - 17;
-  //   } else {
-  //     from = (pageIndex - 1) * pageSize + 2 - 16;
-  //   }
-  //   dispatch(
-  //     searchIssue(
-  //       {
-  //         query: {},
-  //       },
-  //       {
-  //         pagination: {
-  //           size: pageSize,
-  //           from,
-  //         },
-  //         type: "wanted",
-  //         trigger: "wantedComicsPage",
-  //       },
-  //     ),
-  //   );
-  // }, []);
+  const previousPage = useCallback((pageIndex: number, pageSize: number) => {
+    let from = 0;
+    if (pageIndex === 2) {
+      from = (pageIndex - 1) * pageSize + 2 - 17;
+    } else {
+      from = (pageIndex - 1) * pageSize + 2 - 16;
+    }
+    dispatch(
+      searchIssue(
+        {
+          query: {},
+        },
+        {
+          pagination: {
+            size: pageSize,
+            from,
+          },
+          type: "wanted",
+          trigger: "wantedComicsPage"
+        },
+      ),
+    );
+  }, []);
 
   return (
-    <div className="">
-      <section className="">
-        <header className="bg-slate-200 dark:bg-slate-500">
-          <div className="mx-auto max-w-screen-xl px-2 py-2 sm:px-6 sm:py-8 lg:px-8 lg:py-4">
-            <div className="sm:flex sm:items-center sm:justify-between">
-              <div className="text-center sm:text-left">
-                <h1 className="text-2xl font-bold text-gray-900 dark:text-white sm:text-3xl">
-                  Wanted Comics
-                </h1>
-
-                <p className="mt-1.5 text-sm text-gray-500 dark:text-white">
-                  Browse through comics you marked as "wanted."
-                </p>
-              </div>
-            </div>
-          </div>
-        </header>
-        {isSuccess && wantedComics?.data.hits?.hits ? (
+    <section className="container">
+      <div className="section">
+        <div className="header-area">
+          <h1 className="title">Wanted Comics</h1>
+        </div>
+        {!isEmpty(wantedComics) && (
           <div>
             <div className="library">
               <T2Table
-                sourceData={wantedComics?.data.hits.hits}
-                totalPages={wantedComics?.data.hits.hits.length}
+                sourceData={wantedComics}
+                totalPages={wantedComics.length}
                 columns={columnData}
                 paginationHandlers={{
-                  nextPage: () => {},
-                  previousPage: () => {},
+                  nextPage: nextPage,
+                  previousPage: previousPage,
                 }}
-                // rowClickHandler={navigateToComicDetail}
+              // rowClickHandler={navigateToComicDetail}
               />
               {/* pagination controls */}
             </div>
           </div>
-        ) : null}
-        {isLoading ? <div>Loading...</div> : null}
-        {isError ? (
-          <div>An error occurred while retrieving the pull list.</div>
-        ) : null}
-      </section>
-    </div>
+        )}
+      </div>
+    </section>
   );
 };
 

src/client/components/shared/Canvas.tsx

@@ -1,7 +1,8 @@
 import React, { useEffect, useRef } from "react";
 
-export const Canvas = ({ data }) => {
-  const { colorHistogramData } = data;
+export const Canvas = (data) => {
+  const { colorHistogramData } = data.data;
+  console.log(data);
   const width = 559;
   const height = 200;
   const pixelRatio = window.devicePixelRatio;
@@ -9,11 +10,7 @@ export const Canvas = ({ data }) => {
   const canvas = useRef(null);
 
   useEffect(() => {
-    const context = canvas.current?.getContext("2d");
-    if (!context) {
-      return;
-    }
-
+    const context = canvas.current.getContext("2d");
     context.scale(pixelRatio, pixelRatio);
     const guideHeight = 8;
     const startY = height - guideHeight;
@@ -49,24 +46,18 @@ 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/Card.tsx

@@ -0,0 +1,70 @@
+import * as React from "react";
+import { IExtractedComicBookCoverFile } from "threetwo-ui-typings";
+import {
+  removeLeadingPeriod,
+  escapePoundSymbol,
+} from "../shared/utils/formatting.utils";
+import { isUndefined, isEmpty, isNil } from "lodash";
+import { Link } from "react-router-dom";
+import { LIBRARY_SERVICE_HOST } from "../constants/endpoints";
+import ellipsize from "ellipsize";
+
+interface IProps {
+  comicBookCoversMetadata?: IExtractedComicBookCoverFile;
+  mongoObjId?: number;
+  hasTitle: boolean;
+  title?: string;
+  isHorizontal: boolean;
+}
+interface IState {}
+
+class Card extends React.Component<IProps, IState> {
+  constructor(props: IProps) {
+    super(props);
+  }
+
+  public drawCoverCard = (
+    metadata: IExtractedComicBookCoverFile,
+  ): JSX.Element => {
+    const encodedFilePath = encodeURI(
+      `${LIBRARY_SERVICE_HOST}` + removeLeadingPeriod(metadata.path),
+    );
+    const filePath = escapePoundSymbol(encodedFilePath);
+    return (
+      <div>
+        <div className="card generic-card">
+          <div className={this.props.isHorizontal ? "is-horizontal" : ""}>
+            <div className="card-image">
+              <figure className="image">
+                <img src={filePath} alt="Placeholder image" />
+              </figure>
+            </div>
+            {this.props.hasTitle && (
+              <div className="card-content">
+                <ul>
+                  <Link to={"/comic/details/" + this.props.mongoObjId}>
+                    <li className="has-text-weight-semibold">
+                      {ellipsize(metadata.name, 18)}
+                    </li>
+                  </Link>
+                </ul>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    );
+  };
+
+  public render() {
+    return (
+      <>
+        {!isUndefined(this.props.comicBookCoversMetadata) &&
+          !isEmpty(this.props.comicBookCoversMetadata) &&
+          this.drawCoverCard(this.props.comicBookCoversMetadata)}
+      </>
+    );
+  }
+}
+
+export default Card;

src/client/components/shared/Carda.tsx

@@ -4,8 +4,8 @@ import { isEmpty, isNil } from "lodash";
 
 interface ICardProps {
   orientation: string;
-  imageUrl?: string;
-  hasDetails?: boolean;
+  imageUrl: string;
+  hasDetails: boolean;
   title?: PropTypes.ReactElementLike | null;
   children?: PropTypes.ReactNodeLike;
   borderColorClass?: string;
@@ -80,87 +80,6 @@ const renderCard = (props: ICardProps): ReactElement => {
           </div>
         </div>
       );
-
-    case "vertical-2":
-      return (
-        <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"
-          />
-
-          {props.title ? (
-            <div className="px-3 pt-3 mb-2">
-              <dd className="text-sm text-slate-500 dark:text-black">
-                {props.title}
-              </dd>
-            </div>
-          ) : null}
-
-          {props.hasDetails ? (
-            <div className="px-2">
-              <>{props.children}</>
-            </div>
-          ) : null}
-        </div>
-      );
-
-    case "horizontal-small":
-      return (
-        <>
-          <div className="flex flex-row justify-start align-top gap-3 bg-slate-200 h-fit rounded-md shadow-md shadow-white-400">
-            {/* thumbnail */}
-            <div className="rounded-md overflow-hidden">
-              <img src={props.imageUrl} className="object-cover h-20 w-20" />
-            </div>
-            {/* details */}
-            <div className="w-fit h-fit pl-1 pr-2 py-1">
-              <p className="text-sm">{props.title}</p>
-            </div>
-          </div>
-        </>
-      );
-
-    case "horizontal-medium":
-      return (
-        <>
-          <div className="flex flex-row items-center align-top gap-3 bg-slate-200 h-fit p-2 rounded-md shadow-md shadow-white-400">
-            {/* thumbnail */}
-            <div className="rounded-md overflow-hidden">
-              <img src={props.imageUrl} />
-            </div>
-            {/* details */}
-            <div className="pl-1 pr-2 py-1">
-              <p className="text-sm">{props.title}</p>
-              {props.hasDetails && <>{props.children}</>}
-            </div>
-          </div>
-        </>
-      );
-
-    case "cover-only":
-      return (
-        <>
-          {/* thumbnail */}
-          <div className="rounded-lg shadow-lg overflow-hidden w-fit h-fit">
-            <img src={props.imageUrl} />
-          </div>
-        </>
-      );
-    case "card-with-info-panel":
-      return (
-        <>
-          <div className="flex flex-row">
-            {/* thumbnail */}
-            <div className="rounded-md overflow-hidden w-fit h-fit">
-              <img src={props.imageUrl} />
-            </div>
-            {/* myata-dyata */}
-          </div>
-        </>
-      );
-
     default:
       return <></>;
   }

src/client/components/shared/ConnectionForm/ConnectionForm.tsx

@@ -14,141 +14,91 @@ export const ConnectionForm = ({
         onSubmit={submitHandler}
         initialValues={initialData}
         render={({ handleSubmit }) => (
-          <form onSubmit={handleSubmit} className="mt-10">
-            <h2 className="text-xl">{formHeading}</h2>
-            <article
-              role="alert"
-              className="mt-4 rounded-lg max-w-screen-md border-s-4 border-blue-500 bg-blue-50 p-4 dark:border-s-4 dark:border-blue-600 dark:bg-blue-300 dark:text-slate-600"
-            >
-              <div>
-                <p>Configure your AirDC++ client connection here.</p>
-                <p>
-                  Note that you need an instance of AirDC++ already running to
-                  use this form to connect to it.
-                </p>
-                <p>
-                  See{" "}
-                  <a
-                    className="underline"
-                    href="http://airdcpp.net/docs/installation/installation.html"
-                  >
-                    here
-                  </a>{" "}
-                  for AirDC++ installation instructions for various platforms.
-                </p>
-              </div>
-            </article>
-
-            <span className="flex items-center mt-6">
-              <span className="text-xl text-slate-500 dark:text-slate-200 pr-5">
-                Configure Connection
-              </span>
-              <span className="h-px flex-1 bg-slate-200 dark:bg-slate-400"></span>
-            </span>
-
-            <div className="flex flex-row mt-4">
-              <div className="relative">
-                {/* protocol */}
-                <label className="block py-1">Protocol</label>
-                <Field
-                  name="protocol"
-                  component="select"
-                  className="appearance-none 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"
-                >
-                  <option>Protocol</option>
-                  <option value="http">http://</option>
-                  <option value="https">https://</option>
-                </Field>
-                <div className="absolute h-7 w-7 right-0 px-1 top-11 pointer-events-none">
-                  <i className="icon-[solar--alt-arrow-down-bold]" />
-                </div>
-              </div>
-              {/* hostname */}
-              <Field name="hostname" validate={hostNameValidator}>
-                {({ input, meta }) => (
-                  <div className="flex flex-col">
-                    <label className="block px-2 py-1">Hostname</label>
-                    <input
-                      {...input}
-                      type="text"
-                      placeholder="Hostname"
-                      className="ml-2 dark:bg-slate-400 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"
-                    />
+          <form onSubmit={handleSubmit}>
+            <h2>{formHeading}</h2>
+            <label className="label">Hostname</label>
+            <div className="field has-addons">
+              <p className="control">
+                <span className="select">
+                  <Field name="protocol" component="select">
+                    <option>Protocol</option>
+                    <option value="http">http://</option>
+                    <option value="https">https://</option>
+                  </Field>
+                </span>
+              </p>
+              <div className="control is-expanded">
+                <Field name="hostname" validate={hostNameValidator}>
+                  {({ input, meta }) => (
                     <div>
+                      <input
+                        {...input}
+                        type="text"
+                        placeholder="hostname"
+                        className="input"
+                      />
                       {meta.error && meta.touched && (
-                        <span className="text-sm text-red-400 px-2">
+                        <span className="is-size-7 has-text-danger">
                           {meta.error}
                         </span>
                       )}
                     </div>
-                  </div>
-                )}
-              </Field>
-
-              {/* port */}
-              <div className="flex flex-col">
-                <label className="block px-2 py-1">Port</label>
+                  )}
+                </Field>
+              </div>
+              <p className="control">
                 <Field
                   name="port"
                   component="input"
-                  className="ml-2 dark:bg-slate-400 bg-slate-100 px-2 block h-10 rounded-md sm:text-md sm:leading-5 focus:outline-none focus:shadow-outline-blue focus:border-blue-300"
-                  placeholder="Port"
+                  className="input"
+                  placeholder="port"
                 />
-              </div>
+              </p>
             </div>
-
-            <div className="flex flex-row mt-5">
-              <div>
-                <label className="block py-1">Username</label>
-                <div className="relative">
-                  <Field
-                    name="username"
-                    component="input"
-                    className="h-10 dark:bg-slate-500 bg-slate-200 rounded-md text-gray-700 dark:text-slate-200 py-1 px-10 mr-5 sm:text-md sm:leading-5 focus:outline-none focus:shadow-outline-blue focus:border-blue-300"
-                    placeholder="Username"
-                  />
-                  <span className="absolute h-6 w-6 left-2 top-2 inset-y-0 flex items-center px-0 pointer-events-none">
-                    <i className="icon-[solar--user-bold-duotone] h-6 w-6 dark:text-slate-200" />
-                  </span>
+            <div className="field">
+              <label className="label">Credentials</label>
+              <div className="field-body">
+                <div className="field">
+                  <p className="control is-expanded has-icons-left">
+                    <Field
+                      name="username"
+                      component="input"
+                      className="input"
+                      placeholder="Username"
+                    />
+                    <span className="icon is-small is-left">
+                      <i className="fa-solid fa-user-ninja"></i>
+                    </span>
+                  </p>
                 </div>
-              </div>
-              <div>
-                <div>
-                  <label className="block py-1">Password</label>
-                  <div className="relative">
+                <div className="field">
+                  <p className="control is-expanded has-icons-left has-icons-right">
                     <Field
                       name="password"
                       component="input"
                       type="password"
-                      className="h-10 dark:bg-slate-500 bg-slate-200 rounded-md text-gray-700 dark:text-slate-200 py-1 px-10 sm:text-md sm:leading-5 focus:outline-none focus:shadow-outline-blue focus:border-blue-300"
+                      className="input"
                       placeholder="Password"
                     />
-                    <span className="absolute left-2 top-2 inset-y-0 flex items-center px-0 pointer-events-none h-6 w-6">
-                      <i className="icon-[solar--lock-password-bold-duotone] h-6 w-6 dark:text-slate-200" />
+                    <span className="icon is-small is-left">
+                      <i className="fa-solid fa-lock"></i>
                     </span>
-                  </div>
+                  </p>
                 </div>
               </div>
             </div>
-            <div className="flex flex-row gap-2">
-              <button
-                className="flex space-x-1 sm:mt-5 sm:flex-row sm:items-center rounded-lg border border-green-400 dark:border-green-200 bg-green-200 px-4 py-2 text-gray-500 hover:bg-transparent hover:text-green-600 focus:outline-none focus:ring active:text-indigo-500"
-                type="submit"
-              >
-                <span className="text-md">
+            <div className="field is-grouped">
+              <p className="control">
+                <button type="submit" className="button is-primary">
                   {!isEmpty(initialData) ? "Update" : "Save"}
-                </span>
-                <span className="w-6 h-6">
-                  <i className="h-6 w-6 icon-[solar--diskette-bold-duotone]"></i>
-                </span>
-              </button>
+                </button>
+              </p>
 
-              <button
-                type="submit"
-                className="flex space-x-1 sm:mt-5 sm:flex-row sm:items-center rounded-lg border border-red-400 dark:border-red-200 bg-red-200 px-4 py-2 text-gray-500 hover:bg-transparent hover:text-red-600 focus:outline-none focus:ring active:text-indigo-500"
-              >
-                {!isEmpty(initialData) && "Delete"}
-              </button>
+              <p className="control">
+                <button type="submit" className="button is-danger">
+                  {!isEmpty(initialData) && "Delete"}
+                </button>
+              </p>
             </div>
           </form>
         )}

src/client/components/shared/DatePicker.tsx

@@ -1,98 +0,0 @@
-import React, { useRef, useState } from "react";
-import { format } from "date-fns";
-import FocusTrap from "focus-trap-react";
-import { ClassNames, DayPicker } from "react-day-picker";
-import { useFloating, offset, flip, autoUpdate } from "@floating-ui/react-dom";
-import styles from "react-day-picker/dist/style.module.css";
-
-export const DatePickerDialog = (props) => {
-  const { setter, apiAction } = props;
-  const [selected, setSelected] = useState<Date>();
-  const [isPopperOpen, setIsPopperOpen] = useState(false);
-
-  const classNames: ClassNames = {
-    ...styles,
-    head: "custom-head",
-  };
-  const buttonRef = useRef<HTMLButtonElement>(null);
-  const { x, y, reference, floating, strategy, refs, update } = useFloating({
-    placement: "bottom-end",
-    middleware: [offset(10), flip()],
-    strategy: "absolute",
-  });
-
-  const closePopper = () => {
-    setIsPopperOpen(false);
-    buttonRef.current?.focus();
-  };
-
-  const handleButtonClick = () => {
-    setIsPopperOpen(true);
-    if (refs.reference.current && refs.floating.current) {
-      autoUpdate(refs.reference.current, refs.floating.current, update);
-    }
-  };
-
-  const handleDaySelect = (date) => {
-    setSelected(date);
-    if (date) {
-      setter(format(date, "yyyy-MM-dd"));
-      apiAction();
-      closePopper();
-    } else {
-      setter("");
-    }
-  };
-
-  return (
-    <div>
-      <div ref={reference}>
-        <button
-          ref={buttonRef}
-          type="button"
-          aria-label="Pick a date"
-          onClick={handleButtonClick}
-          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"
-        >
-          Pick a date
-        </button>
-      </div>
-      {isPopperOpen && (
-        <FocusTrap
-          active
-          focusTrapOptions={{
-            initialFocus: false,
-            allowOutsideClick: true,
-            clickOutsideDeactivates: true,
-            onDeactivate: closePopper,
-            fallbackFocus: buttonRef.current || undefined,
-          }}
-        >
-          <div
-            ref={floating}
-            style={{
-              position: strategy,
-              zIndex: "999",
-              borderRadius: "10px",
-              boxShadow: "0 4px 6px rgba(0,0,0,0.1)", // Example of adding a shadow
-            }}
-            className="bg-slate-400 dark:bg-slate-500"
-            role="dialog"
-            aria-label="DayPicker calendar"
-          >
-            <DayPicker
-              initialFocus={isPopperOpen}
-              mode="single"
-              defaultMonth={selected}
-              selected={selected}
-              onSelect={handleDaySelect}
-              classNames={classNames}
-            />
-          </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 control-palette">
+                  <div className="box p-2 pl-3 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,6 +8,7 @@ export function Grid({ children, columns }) {
         gridTemplateColumns: `repeat(${columns}, 200px)`,
         columnGap: 1,
         gridGap: 10,
+        padding: 10,
       }}
     >
       {children}

src/client/components/shared/ErrorPage.tsx

@@ -1,5 +0,0 @@
-import React from "react";
-
-export const ErrorPage = () => {
-  return <>Error has been encountered.</>;
-};

src/client/components/shared/Header.tsx

@@ -1,32 +1,19 @@
 import React, { ReactElement } from "react";
-import { Link } from "react-router-dom";
 
 type IHeaderProps = {
   headerContent: string;
-  subHeaderContent: ReactElement;
+  subHeaderContent: string;
   iconClassNames: string;
-  link?: string;
 };
 
 export const Header = (props: IHeaderProps): ReactElement => {
   return (
-    <div className="mt-7">
-      <div className="">
-        {props.link ? (
-          <Link to={props.link}>
-            <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>
+    <>
+      <h4 className="title is-4">
+        <i className={props.iconClassNames}></i> {props.headerContent}
+      </h4>
+      <p className="subtitle is-7">{props.subHeaderContent}</p>
+    </>
   );
 };
 

src/client/components/shared/MetadataPanel.tsx

@@ -31,62 +31,61 @@ export const MetadataPanel = (props: IMetadatPanelProps): ReactElement => {
     {
       name: "rawFileDetails",
       content: () => (
-        <dl className="dark:bg-[#647587] bg-slate-200 p-3 rounded-lg">
+        <dl>
           <dt>
-            <p className="text-lg">{issueName}</p>
+            <h6
+              className="name has-text-weight-medium mb-1"
+              style={props.titleStyle}
+            >
+              {issueName}
+            </h6>
           </dt>
-          <dd className="text-sm">
-            is a part of{" "}
-            <span className="underline">
+          <dd className="is-size-7">
+            Is a part of{" "}
+            <span className="has-text-weight-semibold">
               {inferredMetadata.issue.name}
-              <i className="icon-[solar--arrow-right-up-outline] w-4 h-4" />
             </span>
           </dd>
 
-          {/* Issue number */}
-          {inferredMetadata.issue.number && (
-            <dd className="my-2">
-              <span className="inline-flex items-center bg-slate-50 text-slate-800 text-xs font-medium px-2 rounded-md dark:text-slate-900 dark:bg-slate-400">
-                <span className="pr-1 pt-1">
-                  <i className="icon-[solar--hashtag-outline] w-3.5 h-3.5"></i>
+          <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"
+                    style={props.tagsStyle}
+                  >
+                    {rawFileDetails.extension}
+                  </span>
+                  <span
+                    className="tag is-success is-light has-text-weight-semibold"
+                    style={props.tagsStyle}
+                  >
+                    {rawFileDetails.mimeType}
+                  </span>
+                  <span
+                    className="tag is-success is-light"
+                    style={props.tagsStyle}
+                  >
+                    {prettyBytes(rawFileDetails.fileSize)}
+                  </span>
                 </span>
-                <span className="text-md text-slate-900 dark:text-slate-900">
-                  {inferredMetadata.issue.number}
-                </span>
-              </span>
-            </dd>
-          )}
-          <dd className="flex flex-row gap-2 w-max">
-            {/* File extension */}
-            <span className="inline-flex items-center bg-slate-50 text-slate-800 text-xs font-medium px-2 rounded-md dark:text-slate-900 dark:bg-slate-400">
-              <span className="pr-1 pt-1">
-                <i className="icon-[solar--zip-file-bold-duotone] w-5 h-5"></i>
-              </span>
+              </div>
+              <div className="control">
+                {inferredMetadata.issue.number && (
+                  <div className="tags has-addons">
+                    <span className="tag is-light" style={props.tagsStyle}>
+                      Issue #
+                    </span>
+                    <span className="tag is-warning" style={props.tagsStyle}>
+                      {inferredMetadata.issue.number}
+                    </span>
+                  </div>
+                )}
+              </div>
 
-              <span className="text-md text-slate-500 dark:text-slate-900">
-                {rawFileDetails.mimeType}
-              </span>
-            </span>
-
-            {/* size */}
-            <span className="inline-flex items-center bg-slate-50 text-slate-800 text-xs font-medium px-2 rounded-md dark:text-slate-900 dark:bg-slate-400">
-              <span className="pr-1 pt-1">
-                <i className="icon-[solar--mirror-right-bold-duotone] w-5 h-5"></i>
-              </span>
-
-              <span className="text-md text-slate-500 dark:text-slate-900">
-                {prettyBytes(rawFileDetails.fileSize)}
-              </span>
-            </span>
-
-            {/* Uncompressed version available? */}
-            {rawFileDetails.archive?.uncompressed && (
-              <span className="inline-flex items-center bg-slate-50 text-slate-800 text-xs px-2 rounded-md dark:text-slate-900 dark:bg-slate-400">
-                <span className="pr-1 pt-1">
-                  <i className="icon-[solar--bookmark-bold-duotone] w-3.5 h-3.5"></i>
-                </span>
-              </span>
-            )}
+            </div>
+            
           </dd>
         </dl>
       ),
@@ -114,6 +113,7 @@ export const MetadataPanel = (props: IMetadatPanelProps): ReactElement => {
                 </span>
               </span>
             </dd>
+
             <dd className="is-size-7">
               <span>
                 {ellipsize(
@@ -126,13 +126,42 @@ export const MetadataPanel = (props: IMetadatPanelProps): ReactElement => {
                 )}
               </span>
             </dd>
+
             <dd className="is-size-7 mt-2">
-              <span className="my-3 mx-2">
-                {comicvine.volumeInformation.start_year}
-              </span>
-              {comicvine.volumeInformation.count_of_issues}
-              ComicVine ID
-              {comicvine.id}
+              <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"
+                      style={props.tagsStyle}
+                    >
+                      {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>
         ),
@@ -179,14 +208,25 @@ export const MetadataPanel = (props: IMetadatPanelProps): ReactElement => {
   });
 
   return (
-    <div className="flex gap-5 my-3">
-      <Card
-        imageUrl={url}
-        orientation={"cover-only"}
-        hasDetails={false}
-        imageStyle={props.imageStyle}
-      />
-      <div>{metadataPanel.content()}</div>
+    <div className="column" style={props.containerStyle}>
+      <div className="comic-detail issue-metadata">
+        <dl>
+          <dd>
+            <div className="columns mt-2">
+              <div className="column is-3">
+                <Card
+                  imageUrl={url}
+                  orientation={"vertical"}
+                  hasDetails={false}
+                  imageStyle={props.imageStyle}
+                // cardContainerStyle={{ maxWidth: 200 }}
+                />
+              </div>
+              <div className="column">{metadataPanel.content()}</div>
+            </div>
+          </dd>
+        </dl>
+      </div>
     </div>
   );
 };

src/client/components/shared/Navbar.tsx

@@ -0,0 +1,184 @@
+import React, { useContext } from "react";
+import { SearchBar } from "../GlobalSearchBar/SearchBar";
+import { DownloadProgressTick } from "../ComicDetail/DownloadProgressTick";
+import { Link } from "react-router-dom";
+import { isUndefined } from "lodash";
+import { format, fromUnixTime } from "date-fns";
+
+const Navbar: React.FunctionComponent = (props) => {
+  return (
+    <nav className="navbar is-fixed-top">
+      <div className="navbar-brand">
+        <Link to="/" className="navbar-item">
+          <img
+            src="/src/client/assets/img/threetwo.svg"
+            alt="ThreeTwo! A comic book curator"
+            width="112"
+            height="28"
+          />
+        </Link>
+
+        <a className="navbar-item is-hidden-desktop">
+          <span className="icon">
+            <i className="fas fa-github"></i>
+          </span>
+        </a>
+
+        <a className="navbar-item is-hidden-desktop">
+          <span className="icon">
+            <i className="fas fa-twitter"></i>
+          </span>
+        </a>
+
+        <div className="navbar-burger burger" data-target="navMenubd-example">
+          <span></span>
+          <span></span>
+          <span></span>
+        </div>
+      </div>
+
+      <div id="navMenubd-example" className="navbar-menu">
+        <div className="navbar-start">
+          <Link to="/" className="navbar-item">
+            Dashboard
+          </Link>
+
+          <Link to="/import" className="navbar-item">
+            Import
+          </Link>
+
+          <Link to="/library" className="navbar-item">
+            Library
+          </Link>
+
+          <Link to="/downloads" className="navbar-item">
+            Downloads
+          </Link>
+
+          <Link to="/search" className="navbar-item">
+            Search ComicVine
+          </Link>
+        </div>
+
+        <div className="navbar-end">
+          <a className="navbar-item is-hidden-desktop-only"></a>
+
+          {/* AirDC++ socket connection status */}
+
+          <div className="navbar-item has-dropdown is-hoverable is-mega">
+            <div className="navbar-link flex">Blog</div>
+            <div id="blogDropdown" className="navbar-dropdown">
+              <div className="container is-fluid">
+                <div className="columns">
+                  <div className="column">
+                    <h1 className="title is-6 is-mega-menu-title">
+                      Sub Menu Title
+                    </h1>
+                    <a className="navbar-item" href="/2017/08/03/list-of-tags/">
+                      <div className="navbar-content">
+                        <p>
+                          <small className="has-text-info">03 Aug 2017</small>
+                        </p>
+                        <p>New feature: list of tags</p>
+                      </div>
+                    </a>
+                    <a className="navbar-item" href="/2017/08/03/list-of-tags/">
+                      <div className="navbar-content">
+                        <p>
+                          <small className="has-text-info">03 Aug 2017</small>
+                        </p>
+                        <p>New feature: list of tags</p>
+                      </div>
+                    </a>
+                    <a className="navbar-item" href="/2017/08/03/list-of-tags/">
+                      <div className="navbar-content">
+                        <p>
+                          <small className="has-text-info">03 Aug 2017</small>
+                        </p>
+                        <p>New feature: list of tags</p>
+                      </div>
+                    </a>
+                  </div>
+                  <div className="column">
+                    <h1 className="title is-6 is-mega-menu-title">
+                      Sub Menu Title
+                    </h1>
+
+                    <a
+                      className="navbar-item "
+                      href="http://bulma.io/documentation/columns/basics/"
+                    >
+                      Columns
+                    </a>
+                  </div>
+                  <div className="column">
+                    <h1 className="title is-6 is-mega-menu-title">
+                      Sub Menu Title
+                    </h1>
+
+                    <a className="navbar-item" href="/2017/08/03/list-of-tags/">
+                      <div className="navbar-content">
+                        <p>
+                          <small className="has-text-info">03 Aug 2017</small>
+                        </p>
+                        <p>New feature: list of tags</p>
+                      </div>
+                    </a>
+                  </div>
+                  <div className="column">
+                    <h1 className="title is-6 is-mega-menu-title">
+                      Sub Menu Title
+                    </h1>
+                    <a
+                      className="navbar-item "
+                      href="/documentation/overview/start/"
+                    >
+                      Overview
+                    </a>
+                  </div>
+                </div>
+              </div>
+
+              <hr className="navbar-divider" />
+              <div className="navbar-item">
+                <div className="navbar-content">
+                  <div className="level is-mobile">
+                    <div className="level-left">
+                      <div className="level-item">
+                        <strong>Stay up to date!</strong>
+                      </div>
+                    </div>
+                    <div className="level-right">
+                      <div className="level-item">
+                        <a
+                          className="button bd-is-rss is-small"
+                          href="http://bulma.io/atom.xml"
+                        >
+                          <span className="icon is-small">
+                            <i className="fa fa-rss"></i>
+                          </span>
+                          <span>Subscribe</span>
+                        </a>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div className="navbar-item">
+            <div className="field is-grouped">
+              <p className="control">
+                <Link to="/settings" className="navbar-item">
+                  Settings
+                </Link>
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </nav>
+  );
+};
+
+export default Navbar;

src/client/components/shared/Navbar2.tsx

@@ -1,129 +0,0 @@
-import React, { ReactElement, useState } from "react";
-import { Link } from "react-router-dom";
-import { useDarkMode } from "../../hooks/useDarkMode";
-
-export const Navbar2 = (): ReactElement => {
-  const [colorTheme, setTheme] = useDarkMode();
-  const [darkMode, setDarkMode] = useState(false);
-
-  const toggleDarkMode = (checked) => {
-    setTheme(colorTheme);
-    setDarkMode(!darkMode);
-  };
-
-  return (
-    <header className="bg-white dark:bg-gray-900 gap-8 px-5 py-5 h-18 border-b-2 border-gray-300 dark:border-slate-200">
-      {/* Logo */}
-      <div className="mx-auto flex">
-        <img src="/src/client/assets/img/threetwo.png" alt="ThreeTwo!" />
-
-        {/* Main Navigation */}
-        <div className="flex flex-1 items-center justify-end md:justify-between">
-          <nav
-            aria-label="ThreeTwo Main Navigation"
-            className="hidden md:block"
-          >
-            <ul className="flex items-center gap-6 text-md">
-              <li>
-                <Link
-                  to="/dashboard"
-                  className="text-gray-500 transition hover:text-gray-500/75 dark:text-white dark:hover:text-white/75"
-                >
-                  Dashboard
-                </Link>
-              </li>
-
-              <li>
-                <Link
-                  to="/import"
-                  className="text-gray-500 transition hover:text-gray-500/75 dark:text-white dark:hover:text-white/75"
-                >
-                  Import
-                </Link>
-              </li>
-
-              <li>
-                <Link
-                  to="/library"
-                  className="text-gray-500 transition hover:text-gray-500/75 dark:text-white dark:hover:text-white/75"
-                >
-                  Library
-                </Link>
-              </li>
-
-              <li>
-                <Link
-                  to="/volumes"
-                  className="text-gray-500 transition hover:text-gray-500/75 dark:text-white dark:hover:text-white/75"
-                >
-                  Volumes
-                </Link>
-              </li>
-
-              <li>
-                <a
-                  className="text-gray-500 transition hover:text-gray-500/75 dark:text-white dark:hover:text-white/75"
-                  href="/"
-                >
-                  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>
-
-          {/* Right-most Nav */}
-          <div className="flex items-center gap-4">
-            <ul className="flex items-center gap-6 text-md">
-              {/* Settings Icon and text */}
-              <li>
-                <Link
-                  to="/settings"
-                  className="flex items-center space-x-1 text-gray-500 transition hover:text-gray-500/75 dark:text-white dark:hover:text-white/75"
-                >
-                  <span className="w-5 h-5">
-                    <i className="icon-[solar--settings-outline] h-5 w-5"></i>
-                  </span>
-                  <span>Settings</span>
-                </Link>
-              </li>
-
-              <li>
-                {/* Light/Dark Mode toggle */}
-                <div className="flex items-center space-x-2">
-                  <span className="text-gray-600 dark:text-white">Dark</span>
-                  <label
-                    htmlFor="toggle"
-                    className="relative inline-flex items-center"
-                  >
-                    <input
-                      type="checkbox"
-                      id="toggle"
-                      className="sr-only"
-                      checked={darkMode}
-                      onChange={toggleDarkMode}
-                    />
-                    <span className="bg-gray-300 w-10 h-6 rounded-full"></span>
-                    <span
-                      className={`bg-white w-4 h-4 rounded-full absolute left-1 top-1 transition-transform duration-300 ease-in-out ${
-                        darkMode ? "translate-x-4" : ""
-                      }`}
-                    ></span>
-                  </label>
-                  <span className="text-gray-600 dark:text-white">Light</span>
-                </div>
-              </li>
-            </ul>
-          </div>
-        </div>
-      </div>
-    </header>
-  );
-};

src/client/components/shared/PopoverButton.tsx

@@ -1,45 +0,0 @@
-import React, { useState } from "react";
-import { useFloating, offset, flip } from "@floating-ui/react-dom";
-import { useTranslation } from "react-i18next";
-import "../../shared/utils/i18n.util"; // Ensure you import your i18n configuration
-
-const PopoverButton = ({ content, clickHandler }) => {
-  const [isVisible, setIsVisible] = useState(false);
-  // Use destructuring to obtain the reference and floating setters, among other values.
-  const { x, y, refs, strategy, floatingStyles } = useFloating({
-    placement: "right",
-    middleware: [offset(8), flip()],
-    strategy: "absolute",
-  });
-  const { t } = useTranslation();
-  return (
-    <div>
-      {/* Apply the reference setter directly to the ref prop */}
-      <button
-        ref={refs.setReference}
-        onMouseEnter={() => setIsVisible(true)}
-        onMouseLeave={() => setIsVisible(false)}
-        onFocus={() => setIsVisible(true)}
-        onBlur={() => setIsVisible(false)}
-        aria-describedby="popover"
-        className="flex space-x-1 sm:mt-0 sm:flex-row sm:items-center rounded-lg border border-green-400 dark:border-green-200 bg-green-200 px-2 py-2 text-gray-500 hover:bg-transparent hover:text-green-600 focus:outline-none focus:ring active:text-indigo-500"
-        onClick={clickHandler}
-      >
-        <i className="icon-[solar--add-square-bold-duotone] w-6 h-6 mr-2"></i>{" "}
-        Mark as Wanted
-      </button>
-      {isVisible && (
-        <div
-          ref={refs.setFloating} // Apply the floating setter directly to the ref prop
-          style={floatingStyles}
-          className="text-sm bg-slate-400 p-2 rounded-md"
-          role="tooltip"
-        >
-          {content}
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default PopoverButton;

src/client/components/shared/T2Table.tsx

@@ -1,5 +1,7 @@
 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,
@@ -10,30 +12,26 @@ import {
 } from "@tanstack/react-table";
 
 export const T2Table = (tableOptions): ReactElement => {
-  const {
-    sourceData,
-    columns,
-    paginationHandlers: { nextPage, previousPage },
-    totalPages,
-    rowClickHandler,
-  } = tableOptions;
+  const { sourceData, columns, paginationHandlers: { nextPage, previousPage }, totalPages, rowClickHandler } =
+    tableOptions;
 
-  const [{ pageIndex, pageSize }, setPagination] = useState<PaginationState>({
-    pageIndex: 1,
-    pageSize: 15,
-  });
+  const [{ pageIndex, pageSize }, setPagination] =
+    useState<PaginationState>({
+      pageIndex: 1,
+      pageSize: 15,
+    });
 
   const pagination = useMemo(
     () => ({
       pageIndex,
       pageSize,
     }),
-    [pageIndex, pageSize],
+    [pageIndex, pageSize]
   );
 
   /**
-   * Pagination control to move forward one page
-   * @returns void
+   * Pagination control to move forward one page 
+   * @returns void 
    */
   const goToNextPage = () => {
     setPagination({
@@ -41,10 +39,10 @@ export const T2Table = (tableOptions): ReactElement => {
       pageSize,
     });
     nextPage(pageIndex, pageSize);
-  };
+  }
 
   /**
-   * Pagination control to move backward one page
+   * Pagination control to move backward one page 
    * @returns void
    **/
   const goToPreviousPage = () => {
@@ -53,7 +51,7 @@ export const T2Table = (tableOptions): ReactElement => {
       pageSize,
     });
     previousPage(pageIndex, pageSize);
-  };
+  }
 
   const table = useReactTable({
     data: sourceData,
@@ -68,51 +66,62 @@ export const T2Table = (tableOptions): ReactElement => {
   });
 
   return (
-    <div className="container max-w-fit mx-14">
-      <div>
-        <div className="flex flex-row gap-2 justify-between mt-7">
-          {/* Search bar */}
-          {tableOptions.children}
-          {/* pagination controls */}
-          <div>
-            Page {pageIndex} of {Math.ceil(totalPages / pageSize)}
-            <p>{totalPages} comics in all</p>
-            {/* Prev/Next buttons */}
-            <div className="inline-flex flex-row mt-4 mb-4">
-              <button
-                onClick={() => goToPreviousPage()}
-                disabled={pageIndex === 1}
-                className="dark:bg-slate-500 bg-slate-400 rounded-l border-slate-600 border-r pt-2 px-2"
-              >
-                <i className="icon-[solar--arrow-left-linear] h-6 w-6"></i>
-              </button>
-              <button
-                className="dark:bg-slate-500 bg-slate-400 rounded-r pt-2 px-2"
-                onClick={() => goToNextPage()}
-                disabled={pageIndex > Math.floor(totalPages / pageSize)}
-              >
-                <i className="icon-[solar--arrow-right-linear] h-6 w-6"></i>
-              </button>
+    <>
+      <div className="columns table-controls">
+        {/* Search bar */}
+        <div className="column is-half">
+          <SearchBar />
+        </div>
+        {/* pagination controls */}
+        <nav className="pagination columns">
+          <div className="mr-4 has-text-weight-semibold has-text-left">
+            <p className="is-size-5">Page {pageIndex} of {Math.ceil(totalPages / pageSize)}</p>
+            {/* <p>{totalPages} comics in all</p> */}
+          </div>
+          <div className="field has-addons">
+            <div className="control">
+              <div className="button" onClick={() => goToPreviousPage()}> <i className="fas fa-chevron-left"></i></div>
+            </div>
+            <div className="control">
+              <div className="button" onClick={() => goToNextPage()}> <i className="fas fa-chevron-right"></i> </div>
+            </div>
+
+            <div className="field has-addons ml-5">
+              <p className="control">
+                <button className="button">
+                  <span className="icon is-small">
+                    <i className="fa-solid fa-list"></i>
+                  </span>
+                </button>
+              </p>
+              <p className="control">
+                <button className="button">
+                  <Link to="/library-grid">
+                    <span className="icon is-small">
+                      <i className="fa-solid fa-image"></i>
+                    </span>
+                  </Link>
+                </button>
+              </p>
             </div>
           </div>
-        </div>
+        </nav>
       </div>
-      <table className="table-auto overflow-auto">
-        <thead className="sticky top-0 bg-slate-200 dark:bg-slate-500">
+      <table className="table is-hoverable">
+        <thead>
           {table.getHeaderGroups().map((headerGroup, idx) => (
             <tr key={headerGroup.id}>
               {headerGroup.headers.map((header, idx) => (
                 <th
                   key={header.id}
                   colSpan={header.colSpan}
-                  className="px-3 py-3"
                 >
                   {header.isPlaceholder
                     ? null
                     : flexRender(
-                        header.column.columnDef.header,
-                        header.getContext(),
-                      )}
+                      header.column.columnDef.header,
+                      header.getContext()
+                    )}
                 </th>
               ))}
             </tr>
@@ -122,23 +131,21 @@ export const T2Table = (tableOptions): ReactElement => {
         <tbody>
           {table.getRowModel().rows.map((row, idx) => {
             return (
-              <tr key={row.id} onClick={() => rowClickHandler(row)}>
-                {row.getVisibleCells().map((cell) => {
-                  return (
-                    <td key={cell.id} className="align-top">
-                      {flexRender(
-                        cell.column.columnDef.cell,
-                        cell.getContext(),
-                      )}
-                    </td>
-                  );
-                })}
+              <tr
+                key={row.id}
+                onClick={() => rowClickHandler(row)}
+              >
+                {row.getVisibleCells().map(cell => (
+                  <td key={cell.id}>
+                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                  </td>
+                ))}
               </tr>
             );
           })}
         </tbody>
       </table>
-    </div>
+    </>
   );
 };
 
@@ -151,6 +158,5 @@ T2Table.propTypes = {
     previousPage: PropTypes.func,
   }),
   rowClickHandler: PropTypes.func,
-  children: PropTypes.any,
 };
 export default T2Table;

src/client/constants/comic.model.js

@@ -0,0 +1,48 @@
+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,6 +8,7 @@ export const hostURIBuilder = (options: Record<string, string>): string => {
     options.apiPath
   );
 };
+console.log(import.meta);
 
 export const CORS_PROXY_SERVER_URI = hostURIBuilder({
   protocol: "http",
@@ -90,24 +91,3 @@ export const QBITTORRENT_SERVICE_BASE_URI = hostURIBuilder({
   port: "3060",
   apiPath: `/api/qbittorrent`,
 });
-
-export const PROWLARR_SERVICE_BASE_URI = hostURIBuilder({
-  protocol: "http",
-  host: import.meta.env.UNDERLYING_HOSTNAME || "localhost",
-  port: "3060",
-  apiPath: `/api/prowlarr`,
-});
-
-export const TORRENT_JOB_SERVICE_BASE_URI = hostURIBuilder({
-  protocol: "http",
-  host: import.meta.env.UNDERLYING_HOSTNAME || "localhost",
-  port: "3000",
-  apiPath: `/api/torrentjobs`,
-});
-
-export const AIRDCPP_SERVICE_BASE_URI = hostURIBuilder({
-  protocol: "http",
-  host: import.meta.env.UNDERLYING_HOSTNAME || "localhost",
-  port: "3000",
-  apiPath: `/api/airdcpp`,
-});

src/client/constants/importer.config.ts

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

src/client/constants/settings/settingsMenu.json

@@ -57,7 +57,7 @@
         "displayName": "Prowlarr",
         "children": [
           {
-            "id": "prwlr-connection",
+            "id": "prowlarr-connection",
             "displayName": "Connection"
           },
           {

src/client/context/AirDCPPSocket.tsx

@@ -0,0 +1,108 @@
+import { isEmpty, isUndefined } from "lodash";
+import React, { createContext, useEffect, useState } from "react";
+import { useQuery, useMutation } from "@tanstack/react-query";
+import { useStore } from "../store/index";
+import AirDCPPSocket from "../services/DcppSearchService";
+import axios from "axios";
+
+const AirDCPPSocketContextProvider = ({ children }) => {
+  const { getState, setState } = useStore;
+  // setter for settings for use in the context consumer
+  const setSettings = (settingsObject) => {
+    persistSettings({
+      ...airDCPPState,
+      airDCPPState: {
+        settings: settingsObject,
+        socket: {},
+        socketConnectionInformation: {},
+      },
+    });
+  };
+  // Initial state for AirDC++ configuration
+  const initState = {
+    airDCPPState: {
+      settings: {},
+      socket: {},
+      socketConnectionInformation: {},
+    },
+    setSettings: setSettings,
+  };
+  const [airDCPPState, persistSettings] = useState(initState);
+
+  // 1. get settings from mongo
+  const { data, isLoading, isError } = useQuery({
+    queryKey: ["settings"],
+    queryFn: async () =>
+      await axios({
+        url: "http://localhost:3000/api/settings/getAllSettings",
+        method: "GET",
+      }),
+  });
+
+  const directConnectConfiguration = data?.data.directConnect.client.host;
+
+  // 2. If available, init AirDC++ Socket with those settings
+  useEffect(() => {
+    if (!isEmpty(directConnectConfiguration)) {
+      initializeAirDCPPSocket(directConnectConfiguration);
+    }
+  }, [directConnectConfiguration]);
+
+  // Method to init AirDC++ Socket with supplied settings
+  const initializeAirDCPPSocket = async (configuration) => {
+    console.log("[AirDCPP]: Initializing socket...");
+
+    const initializedAirDCPPSocket = new AirDCPPSocket({
+      protocol: `${configuration.protocol}`,
+      hostname: `${configuration.hostname}:${configuration.port}`,
+      username: `${configuration.username}`,
+      password: `${configuration.password}`,
+    });
+
+    // Set up connect and disconnect handlers
+    initializedAirDCPPSocket.onConnected = (sessionInfo) => {
+      // update global state with socket connection status
+      setState({
+        airDCPPSocketConnected: true,
+      });
+    };
+    initializedAirDCPPSocket.onDisconnected = async (
+      reason,
+      code,
+      wasClean,
+    ) => {
+      // update global state with socket connection status
+      setState({
+        disconnectionInfo: { reason, code, wasClean },
+        airDCPPSocketConnected: false,
+      });
+    };
+    // Attempt connection
+    const socketConnectionInformation =
+      await initializedAirDCPPSocket.connect();
+
+    // update the state with the new socket connection information
+    persistSettings({
+      ...airDCPPState,
+      airDCPPState: {
+        settings: configuration,
+        socket: initializedAirDCPPSocket,
+        socketConnectionInformation,
+      },
+    });
+  };
+
+  console.log("connected?", getState());
+  // the Provider gives access to the context to its children
+  return (
+    <AirDCPPSocketContext.Provider value={airDCPPState}>
+      {children}
+    </AirDCPPSocketContext.Provider>
+  );
+};
+const AirDCPPSocketContext = createContext({
+  airDCPPState: {},
+  saveSettings: () => {},
+});
+
+export { AirDCPPSocketContext, AirDCPPSocketContextProvider };

src/client/context/SocketIOContext.tsx

@@ -0,0 +1,11 @@
+import React, { createContext } from "react";
+
+export const SocketIOContext = createContext({});
+
+export const SocketIOProvider = ({ children, socket }) => {
+  return (
+    <SocketIOContext.Provider value={socket}>
+      {children}
+    </SocketIOContext.Provider>
+  );
+};

src/client/hooks/useDarkMode.tsx

@@ -1,17 +0,0 @@
-import React, { useEffect, useState } from "react";
-
-export const useDarkMode = () => {
-  const [theme, setTheme] = useState(localStorage.theme);
-  const colorTheme = theme === "dark" ? "light" : "dark";
-
-  useEffect(() => {
-    const root = window.document.documentElement;
-    root.classList.remove(colorTheme);
-    root.classList.add(theme);
-
-    // save theme to local storage
-    localStorage.setItem("theme", theme);
-  }, [theme, colorTheme]);
-
-  return [colorTheme, setTheme];
-};

src/client/index.tsx

@@ -4,19 +4,10 @@ import { createRoot } from "react-dom/client";
 import App from "./components/App";
 import { createBrowserRouter, RouterProvider } from "react-router-dom";
 import Settings from "./components/Settings/Settings";
-import { ErrorPage } from "./components/shared/ErrorPage";
 const rootEl = document.getElementById("root");
 const root = createRoot(rootEl);
-import i18n from "./shared/utils/i18n.util";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-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 VolumeDetails from "./components/VolumeDetail/VolumeDetail";
-import WantedComics from "./components/WantedComics/WantedComics";
+import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 
 const queryClient = new QueryClient();
 
@@ -24,30 +15,16 @@ const router = createBrowserRouter([
   {
     path: "/",
     element: <App />,
-    errorElement: <ErrorPage />,
-    children: [
-      { path: "/", element: <Dashboard /> },
-      { path: "dashboard", element: <Dashboard /> },
-      { path: "settings", element: <Settings /> },
-      {
-        path: "library",
-        element: <TabulatedContentContainer category="library" />,
-      },
-      {
-        path: "comic/details/:comicObjectId",
-        element: <ComicDetailContainer />,
-      },
-      { path: "import", element: <Import path={"./comics"} /> },
-      { path: "search", element: <Search /> },
-      { path: "volume/details/:comicObjectId", element: <VolumeDetails /> },
-      { path: "volumes", element: <Volumes /> },
-      { path: "wanted", element: <WantedComics /> },
-    ],
+  },
+  {
+    path: "/settings",
+    element: <Settings />,
   },
 ]);
 
 root.render(
   <QueryClientProvider client={queryClient}>
     <RouterProvider router={router} />
+    <ReactQueryDevtools initialIsOpen={true} />
   </QueryClientProvider>,
 );

src/client/locales/en/translation.json

@@ -1,4 +0,0 @@
-{
-  "issueWithCount_one": "{{count}} issue",
-  "issueWithCount_other": "{{count}} issues"
-}

src/client/reducers/airdcpp.reducer.ts

@@ -0,0 +1,133 @@
+import {
+  AIRDCPP_SEARCH_IN_PROGRESS,
+  AIRDCPP_SEARCH_RESULTS_ADDED,
+  AIRDCPP_SEARCH_RESULTS_UPDATED,
+  AIRDCPP_HUB_SEARCHES_SENT,
+  AIRDCPP_RESULT_DOWNLOAD_INITIATED,
+  AIRDCPP_DOWNLOAD_PROGRESS_TICK,
+  AIRDCPP_FILE_DOWNLOAD_COMPLETED,
+  AIRDCPP_BUNDLES_FETCHED,
+  AIRDCPP_TRANSFERS_FETCHED,
+  LIBRARY_ISSUE_BUNDLES,
+  AIRDCPP_SOCKET_CONNECTED,
+  AIRDCPP_SOCKET_DISCONNECTED,
+} from "../constants/action-types";
+import { LOCATION_CHANGE } from "redux-first-history";
+import { isNil, isUndefined } from "lodash";
+import { difference } from "../shared/utils/object.utils";
+
+const initialState = {
+  searchResults: [],
+  isAirDCPPSearchInProgress: false,
+  searchInfo: null,
+  searchInstance: null,
+  downloadResult: null,
+  bundleDBImportResult: null,
+  downloadFileStatus: {},
+  bundles: [],
+  transfers: [],
+  isAirDCPPSocketConnected: false,
+  airDCPPSessionInfo: {},
+  socketDisconnectionReason: {},
+};
+
+function airdcppReducer(state = initialState, action) {
+  switch (action.type) {
+    case AIRDCPP_SEARCH_RESULTS_ADDED:
+      return {
+        ...state,
+        searchResults: [...state.searchResults, action.groupedResult],
+        isAirDCPPSearchInProgress: true,
+      };
+    case AIRDCPP_SEARCH_RESULTS_UPDATED:
+      const bundleToUpdateIndex = state.searchResults.findIndex(
+        (bundle) => bundle.result.id === action.groupedResult.result.id,
+      );
+      const updatedState = [...state.searchResults];
+
+      if (
+        !isNil(
+          difference(updatedState[bundleToUpdateIndex], action.groupedResult),
+        )
+      ) {
+        updatedState[bundleToUpdateIndex] = action.groupedResult;
+      }
+
+      return {
+        ...state,
+        searchResults: updatedState,
+      };
+    case AIRDCPP_SEARCH_IN_PROGRESS:
+      return {
+        ...state,
+        isAirDCPPSearchInProgress: true,
+      };
+    case AIRDCPP_HUB_SEARCHES_SENT:
+      return {
+        ...state,
+        isAirDCPPSearchInProgress: false,
+        searchInfo: action.searchInfo,
+        searchInstance: action.instance,
+      };
+    case AIRDCPP_RESULT_DOWNLOAD_INITIATED:
+      return {
+        ...state,
+        downloadResult: action.downloadResult,
+        bundleDBImportResult: action.bundleDBImportResult,
+      };
+    case AIRDCPP_DOWNLOAD_PROGRESS_TICK:
+      return {
+        ...state,
+        downloadProgressData: action.downloadProgressData,
+      };
+    case AIRDCPP_BUNDLES_FETCHED:
+      return {
+        ...state,
+        bundles: action.bundles,
+      };
+    case LIBRARY_ISSUE_BUNDLES:
+      return {
+        ...state,
+        issue_bundles: action.issue_bundles,
+      };
+    case AIRDCPP_FILE_DOWNLOAD_COMPLETED:
+      console.log("COMPLETED", action);
+      return {
+        ...state,
+      };
+    case AIRDCPP_TRANSFERS_FETCHED:
+      return {
+        ...state,
+        transfers: action.bundles,
+      };
+
+    case AIRDCPP_SOCKET_CONNECTED:
+      return {
+        ...state,
+        isAirDCPPSocketConnected: true,
+        airDCPPSessionInfo: action.data,
+      };
+
+    case AIRDCPP_SOCKET_DISCONNECTED:
+      return {
+        ...state,
+        isAirDCPPSocketConnected: false,
+        socketDisconnectionReason: action.data,
+      };
+    case LOCATION_CHANGE:
+      return {
+        ...state,
+        searchResults: [],
+        isAirDCPPSearchInProgress: false,
+        searchInfo: null,
+        searchInstance: null,
+        downloadResult: null,
+        bundleDBImportResult: null,
+        // bundles: [],
+      };
+    default:
+      return state;
+  }
+}
+
+export default airdcppReducer;

src/client/reducers/comicinfo.reducer.ts

@@ -0,0 +1,138 @@
+import { isEmpty } from "lodash";
+import {
+  CV_API_CALL_IN_PROGRESS,
+  CV_SEARCH_SUCCESS,
+  CV_CLEANUP,
+  IMS_COMIC_BOOK_DB_OBJECT_FETCHED,
+  IMS_COMIC_BOOKS_DB_OBJECTS_FETCHED,
+  IMS_COMIC_BOOK_DB_OBJECT_CALL_IN_PROGRESS,
+  CV_ISSUES_METADATA_CALL_IN_PROGRESS,
+  CV_ISSUES_MATCHES_IN_LIBRARY_FETCHED,
+  CV_ISSUES_FOR_VOLUME_IN_LIBRARY_SUCCESS,
+  CV_WEEKLY_PULLLIST_FETCHED,
+  CV_WEEKLY_PULLLIST_CALL_IN_PROGRESS,
+  LIBRARY_STATISTICS_CALL_IN_PROGRESS,
+  LIBRARY_STATISTICS_FETCHED,
+} from "../constants/action-types";
+
+const initialState = {
+  pullList: [],
+  libraryStatistics: [],
+  searchResults: [],
+  searchQuery: {},
+  inProgress: false,
+  comicBookDetail: {},
+  comicBooksDetails: [],
+  issuesForVolume: [],
+  IMS_inProgress: false,
+};
+
+function comicinfoReducer(state = initialState, action) {
+  switch (action.type) {
+    case CV_API_CALL_IN_PROGRESS:
+      return {
+        ...state,
+        inProgress: true,
+      };
+    case CV_SEARCH_SUCCESS:
+      return {
+        ...state,
+        searchResults: action.searchResults,
+        searchQuery: action.searchQueryObject,
+        inProgress: false,
+      };
+    case IMS_COMIC_BOOK_DB_OBJECT_CALL_IN_PROGRESS:
+      return {
+        ...state,
+        IMS_inProgress: true,
+      };
+
+    case IMS_COMIC_BOOK_DB_OBJECT_FETCHED:
+      return {
+        ...state,
+        comicBookDetail: action.comicBookDetail,
+        IMS_inProgress: false,
+      };
+    case IMS_COMIC_BOOKS_DB_OBJECTS_FETCHED:
+      return {
+        ...state,
+        comicBooksDetails: action.comicBooks,
+        IMS_inProgress: false,
+      };
+    case CV_CLEANUP:
+      return {
+        ...state,
+        searchResults: [],
+        searchQuery: {},
+        issuesForVolume: [],
+      };
+    case CV_ISSUES_METADATA_CALL_IN_PROGRESS:
+      return {
+        inProgress: true,
+        ...state,
+      };
+
+    case CV_ISSUES_FOR_VOLUME_IN_LIBRARY_SUCCESS:
+      return {
+        ...state,
+        issuesForVolume: action.issues,
+        inProgress: false,
+      };
+
+    case CV_ISSUES_MATCHES_IN_LIBRARY_FETCHED:
+      const updatedState = [...state.issuesForVolume];
+      action.matches.map((match) => {
+        updatedState.map((issue, idx) => {
+          const matches = [];
+          if (!isEmpty(match.hits.hits)) {
+            return match.hits.hits.map((hit) => {
+              if (
+                parseInt(issue.issue_number, 10) ===
+                hit._source.inferredMetadata.issue.number
+              ) {
+                matches.push(hit);
+                const updatedIssueResult = { ...issue, matches };
+                updatedState[idx] = updatedIssueResult;
+              }
+            });
+          }
+        });
+      });
+      return {
+        ...state,
+        issuesForVolume: updatedState,
+      };
+
+    case CV_WEEKLY_PULLLIST_CALL_IN_PROGRESS:
+      return {
+        inProgress: true,
+        ...state,
+      };
+    case CV_WEEKLY_PULLLIST_FETCHED: {
+      const foo = [];
+      action.data.map((item) => {
+        foo.push({issue: item})
+      });
+      return {
+        ...state,
+        inProgress: false,
+        pullList: foo,
+      };
+    }
+    case LIBRARY_STATISTICS_CALL_IN_PROGRESS:
+      return {
+        inProgress: true,
+        ...state,
+      };
+    case LIBRARY_STATISTICS_FETCHED:
+      return {
+        ...state,
+        inProgress: false,
+        libraryStatistics: action.data,
+      };
+    default:
+      return state;
+  }
+}
+
+export default comicinfoReducer;

src/client/reducers/fileops.reducer.ts

@@ -0,0 +1,334 @@
+import { isUndefined, map } from "lodash";
+import { LOCATION_CHANGE } from "redux-first-history";
+import { determineCoverFile } from "../shared/utils/metadata.utils";
+import {
+  IMS_COMICBOOK_METADATA_FETCHED,
+  IMS_RAW_IMPORT_SUCCESSFUL,
+  IMS_RAW_IMPORT_FAILED,
+  IMS_RECENT_COMICS_FETCHED,
+  IMS_WANTED_COMICS_FETCHED,
+  WANTED_COMICS_FETCHED,
+  IMS_CV_METADATA_IMPORT_SUCCESSFUL,
+  IMS_CV_METADATA_IMPORT_FAILED,
+  IMS_CV_METADATA_IMPORT_CALL_IN_PROGRESS,
+  IMS_COMIC_BOOK_GROUPS_CALL_IN_PROGRESS,
+  IMS_COMIC_BOOK_GROUPS_FETCHED,
+  IMS_COMIC_BOOK_GROUPS_CALL_FAILED,
+  IMS_COMIC_BOOK_ARCHIVE_EXTRACTION_CALL_IN_PROGRESS,
+  LS_IMPORT,
+  LS_COVER_EXTRACTED,
+  LS_COVER_EXTRACTION_FAILED,
+  LS_COMIC_ADDED,
+  IMG_ANALYSIS_CALL_IN_PROGRESS,
+  IMG_ANALYSIS_DATA_FETCH_SUCCESS,
+  SS_SEARCH_RESULTS_FETCHED,
+  SS_SEARCH_IN_PROGRESS,
+  FILEOPS_STATE_RESET,
+  LS_IMPORT_CALL_IN_PROGRESS,
+  SS_SEARCH_FAILED,
+  SS_SEARCH_RESULTS_FETCHED_SPECIAL,
+  VOLUMES_FETCHED,
+  COMICBOOK_EXTRACTION_SUCCESS,
+  LIBRARY_SERVICE_HEALTH,
+  LS_IMPORT_QUEUE_DRAINED,
+  LS_SET_QUEUE_STATUS,
+  RESTORE_JOB_COUNTS_AFTER_SESSION_RESTORATION,
+  LS_IMPORT_JOB_STATISTICS_FETCHED,
+} from "../constants/action-types";
+import { removeLeadingPeriod } from "../shared/utils/formatting.utils";
+import { LIBRARY_SERVICE_HOST } from "../constants/endpoints";
+
+const initialState = {
+  IMSCallInProgress: false,
+  IMGCallInProgress: false,
+  SSCallInProgress: false,
+  imageAnalysisResults: {},
+  comicBookExtractionInProgress: false,
+  LSQueueImportStatus: undefined,
+  comicBookMetadata: [],
+  comicVolumeGroups: [],
+  isSocketConnected: false,
+  isComicVineMetadataImportInProgress: false,
+  comicVineMetadataImportError: {},
+  rawImportError: {},
+  extractedComicBookArchive: {
+    reading: [],
+    analysis: [],
+  },
+  recentComics: [],
+  wantedComics: [],
+  libraryComics: [],
+  volumes: [],
+  librarySearchResultsFormatted: [],
+  lastQueueJob: "",
+  successfulJobCount: 0,
+  failedJobCount: 0,
+  importJobStatistics: [],
+  libraryQueueResults: [],
+  librarySearchError: {},
+  libraryServiceStatus: {},
+};
+function fileOpsReducer(state = initialState, action) {
+  switch (action.type) {
+    case IMS_COMICBOOK_METADATA_FETCHED:
+      return {
+        ...state,
+        comicBookMetadata: [...state.comicBookMetadata, action.data],
+        IMSCallInProgress: false,
+      };
+
+    case LS_IMPORT_CALL_IN_PROGRESS: {
+      return {
+        ...state,
+        IMSCallInProgress: true,
+      };
+    }
+    case IMS_RAW_IMPORT_SUCCESSFUL:
+      return {
+        ...state,
+        rawImportDetails: action.rawImportDetails,
+      };
+    case IMS_RAW_IMPORT_FAILED:
+      return {
+        ...state,
+        rawImportErorr: action.rawImportError,
+      };
+    case IMS_RECENT_COMICS_FETCHED:
+      return {
+        ...state,
+        recentComics: action.data.docs,
+      };
+    case IMS_WANTED_COMICS_FETCHED:
+      return {
+        ...state,
+        wantedComics: action.data,
+      };
+    case IMS_CV_METADATA_IMPORT_SUCCESSFUL:
+      return {
+        ...state,
+        isComicVineMetadataImportInProgress: false,
+        comicVineMetadataImportDetails: action.importResult,
+      };
+    case IMS_CV_METADATA_IMPORT_CALL_IN_PROGRESS:
+      return {
+        ...state,
+        isComicVineMetadataImportInProgress: true,
+      };
+    case IMS_CV_METADATA_IMPORT_FAILED:
+      return {
+        ...state,
+        isComicVineMetadataImportInProgress: false,
+        comicVineMetadataImportError: action.importError,
+      };
+    case IMS_COMIC_BOOK_GROUPS_CALL_IN_PROGRESS: {
+      return {
+        ...state,
+        IMSCallInProgress: true,
+      };
+    }
+    case IMS_COMIC_BOOK_GROUPS_FETCHED: {
+      return {
+        ...state,
+        comicVolumeGroups: action.data,
+        IMSCallInProgress: false,
+      };
+    }
+    case IMS_COMIC_BOOK_GROUPS_CALL_FAILED: {
+      return {
+        ...state,
+        IMSCallInProgress: false,
+        error: action.error,
+      };
+    }
+    case IMS_COMIC_BOOK_ARCHIVE_EXTRACTION_CALL_IN_PROGRESS: {
+      return {
+        ...state,
+        comicBookExtractionInProgress: true,
+      };
+    }
+
+    case LOCATION_CHANGE: {
+      return {
+        ...state,
+        extractedComicBookArchive: [],
+      };
+    }
+
+    case LS_IMPORT: {
+      return {
+        ...state,
+        LSQueueImportStatus: "running",
+      };
+    }
+
+    case LS_COVER_EXTRACTED: {
+      if (state.recentComics.length === 5) {
+        state.recentComics.pop();
+      }
+      return {
+        ...state,
+        successfulJobCount: action.completedJobCount,
+        lastQueueJob: action.importResult.rawFileDetails.name,
+        recentComics: [...state.recentComics, action.importResult],
+      };
+    }
+
+    case LS_COVER_EXTRACTION_FAILED: {
+      return {
+        ...state,
+        failedJobCount: action.failedJobCount,
+      };
+    }
+
+    case LS_IMPORT_QUEUE_DRAINED: {
+      localStorage.removeItem("sessionId");
+      return {
+        ...state,
+        LSQueueImportStatus: "drained",
+      };
+    }
+
+    case RESTORE_JOB_COUNTS_AFTER_SESSION_RESTORATION: {
+      console.log("Restoring state for an active import in progress...");
+      return {
+        ...state,
+        successfulJobCount: action.completedJobCount,
+        failedJobCount: action.failedJobCount,
+        LSQueueImportStatus: action.queueStatus,
+      };
+    }
+
+    case LS_SET_QUEUE_STATUS: {
+      return {
+        ...state,
+        LSQueueImportStatus: action.data.queueStatus,
+      };
+    }
+
+    case LS_IMPORT_JOB_STATISTICS_FETCHED: {
+      return {
+        ...state,
+        importJobStatistics: action.data,
+      };
+    }
+
+    case COMICBOOK_EXTRACTION_SUCCESS: {
+      const comicBookPages: string[] = [];
+      map(action.result.files, (page) => {
+        const pageFilePath = removeLeadingPeriod(page);
+        const imagePath = encodeURI(`${LIBRARY_SERVICE_HOST}${pageFilePath}`);
+        comicBookPages.push(imagePath);
+      });
+
+      switch (action.result.purpose) {
+        case "reading":
+          return {
+            ...state,
+            extractedComicBookArchive: {
+              reading: comicBookPages,
+            },
+            comicBookExtractionInProgress: false,
+          };
+
+        case "analysis":
+          return {
+            ...state,
+            extractedComicBookArchive: {
+              analysis: comicBookPages,
+            },
+            comicBookExtractionInProgress: false,
+          };
+      }
+    }
+
+    case LS_COMIC_ADDED: {
+      return {
+        ...state,
+      };
+    }
+    case IMG_ANALYSIS_CALL_IN_PROGRESS: {
+      return {
+        ...state,
+        IMGCallInProgress: true,
+      };
+    }
+    case IMG_ANALYSIS_DATA_FETCH_SUCCESS: {
+      return {
+        ...state,
+        imageAnalysisResults: action.result,
+      };
+    }
+
+    case SS_SEARCH_IN_PROGRESS: {
+      return {
+        ...state,
+        SSCallInProgress: true,
+      };
+    }
+
+    case SS_SEARCH_RESULTS_FETCHED: {
+      return {
+        ...state,
+        libraryComics: action.data,
+        SSCallInProgress: false,
+      };
+    }
+    case SS_SEARCH_RESULTS_FETCHED_SPECIAL: {
+      const foo = [];
+      if (!isUndefined(action.data.hits)) {
+        map(action.data.hits, ({ _source }) => {
+          foo.push(_source);
+        });
+      }
+      return {
+        ...state,
+        librarySearchResultsFormatted: foo,
+        SSCallInProgress: false,
+      };
+    }
+    case WANTED_COMICS_FETCHED: {
+      const foo = [];
+      if (!isUndefined(action.data.hits)) {
+        map(action.data.hits, ({ _source }) => {
+          foo.push(_source);
+        });
+      }
+      return {
+        ...state,
+        wantedComics: foo,
+        SSCallInProgress: false,
+      };
+    }
+
+    case VOLUMES_FETCHED:
+      return {
+        ...state,
+        volumes: action.data,
+        SSCallInProgress: false,
+      };
+
+    case SS_SEARCH_FAILED: {
+      return {
+        ...state,
+        librarySearchError: action.data,
+        SSCallInProgress: false,
+      };
+    }
+    case LIBRARY_SERVICE_HEALTH: {
+      return {
+        ...state,
+        libraryServiceStatus: action.status,
+      };
+    }
+    case FILEOPS_STATE_RESET: {
+      return {
+        ...state,
+        imageAnalysisResults: {},
+      };
+    }
+    default:
+      return state;
+  }
+}
+
+export default fileOpsReducer;

src/client/reducers/index.js

@@ -0,0 +1,11 @@
+import comicinfoReducer from "../reducers/comicinfo.reducer";
+import fileOpsReducer from "../reducers/fileops.reducer";
+import airdcppReducer from "../reducers/airdcpp.reducer";
+// import settingsReducer from "../reducers/settings.reducer";
+
+export const reducers = {
+  comicInfo: comicinfoReducer,
+  fileOps: fileOpsReducer,
+  airdcpp: airdcppReducer,
+  // settings: settingsReducer,
+};

src/client/reducers/settings.reducer.ts

@@ -0,0 +1,67 @@
+import { createSlice, PayloadAction } from "@reduxjs/toolkit";
+import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";
+import { RootState } from "../store";
+import { isUndefined } from "lodash";
+import { SETTINGS_SERVICE_BASE_URI } from "../constants/endpoints";
+
+export interface InitialState {
+  data: object;
+  inProgress: boolean;
+  dbFlushed: boolean;
+  torrentsList: Array<any>;
+}
+const initialState: InitialState = {
+  data: {},
+  inProgress: false,
+  dbFlushed: false,
+  torrentsList: [],
+};
+
+export const settingsSlice = createSlice({
+  name: "settings",
+  initialState,
+  reducers: {
+    SETTINGS_CALL_IN_PROGRESS: (state) => {
+      state.inProgress = true;
+    },
+
+    SETTINGS_OBJECT_FETCHED: (state, action) => {
+      state.data = action.payload;
+      state.inProgress = false;
+    },
+
+    SETTINGS_OBJECT_DELETED: (state, action) => {
+      state.data = action.payload;
+      state.inProgress = false;
+    },
+
+    SETTINGS_DB_FLUSH_SUCCESS: (state, action) => {
+      state.dbFlushed = action.payload;
+      state.inProgress = false;
+    },
+
+    SETTINGS_QBITTORRENT_TORRENTS_LIST_FETCHED: (state, action) => {
+      console.log(state);
+      console.log(action);
+      state.torrentsList = action.payload;
+    },
+  },
+});
+
+export const {
+  SETTINGS_CALL_IN_PROGRESS,
+  SETTINGS_OBJECT_FETCHED,
+  SETTINGS_OBJECT_DELETED,
+  SETTINGS_DB_FLUSH_SUCCESS,
+  SETTINGS_QBITTORRENT_TORRENTS_LIST_FETCHED,
+} = settingsSlice.actions;
+
+// Other code such as selectors can use the imported `RootState` type
+export const torrentsList = (state: RootState) => state.settings.torrentsList;
+export const qBittorrentSettings = (state: RootState) => {
+  console.log(state);
+  if (!isUndefined(state.settings?.data?.bittorrent)) {
+    return state.settings?.data?.bittorrent.client.host;
+  }
+};
+export default settingsSlice.reducer;

src/client/shared/middleware/SocketIOMiddleware.tsx

@@ -0,0 +1,11 @@
+const socketIOMiddleware = (socket) => {
+  return (store) => (next) => (action) => {
+    if (action.type === "EMIT_SOCKET_EVENT") {
+      const { event, data } = action.payload;
+      socket.emit(event, data);
+    }
+    return next(action);
+  };
+};
+
+export default socketIOMiddleware;

src/client/shared/socket.io/instance.tsx

@@ -0,0 +1,10 @@
+import io from "socket.io-client";
+import { SOCKET_BASE_URI } from "../../constants/endpoints";
+const sessionId = localStorage.getItem("sessionId");
+const socketIOConnectionInstance = io(SOCKET_BASE_URI, {
+  transports: ["websocket"],
+  withCredentials: true,
+  query: { sessionId },
+});
+
+export default socketIOConnectionInstance;

src/client/shared/utils/i18n.util.ts

@@ -1,25 +0,0 @@
-// i18n.js
-import i18n from "i18next";
-import { initReactI18next } from "react-i18next";
-import HttpBackend from "i18next-http-backend";
-import LanguageDetector from "i18next-browser-languagedetector";
-
-i18n
-  // Learn more about options: https://www.i18next.com/overview/configuration-options
-  .use(HttpBackend) // Load translations over http
-  .use(LanguageDetector) // Detect language automatically
-  .use(initReactI18next) // Pass i18n instance to react-i18next
-  .init({
-    lng: "en", // Specify the language
-    fallbackLng: "en",
-    debug: true,
-    interpolation: {
-      escapeValue: false, // Not needed for React
-    },
-    backend: {
-      // path where resources get loaded from
-      loadPath: "./src/client/locales/en/translation.json",
-    },
-  });
-
-export default i18n;

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

@@ -1,12 +1,11 @@
-import { filter, isEmpty, isNil, isUndefined, min, minBy } from "lodash";
+import { filter, isEmpty, isUndefined, min, minBy } from "lodash";
 import { LIBRARY_SERVICE_HOST } from "../../constants/endpoints";
 import { escapePoundSymbol } from "./formatting.utils";
 
-export const determineCoverFile = (data): any => {
+export const determineCoverFile = (data) => {
   /* For a payload like this:
   const foo = {
     rawFileDetails: {}, // #1
-    wanted: {}, 
     comicInfo: {},
     comicvine: {}, // #2
     locg: {}, // #3
@@ -20,44 +19,36 @@ export const determineCoverFile = (data): any => {
       issueName: "",
       publisher: "",
     },
-    wanted: {
-      objectReference: "wanted",
-      priority: 2,
-      url: "",
-      issueName: "",
-      publisher: "",
-    },
     comicvine: {
       objectReference: "comicvine",
-      priority: 3,
+      priority: 2,
       url: "",
       issueName: "",
       publisher: "",
     },
     locg: {
       objectReference: "locg",
-      priority: 4,
+      priority: 3,
       url: "",
       issueName: "",
       publisher: "",
     },
   };
-  // comicvine
-  if (!isEmpty(data.comicvine)) {
-    coverFile.comicvine.url = data?.comicvine?.image.small_url;
+  if (
+    !isUndefined(data.comicvine) &&
+    !isUndefined(data.comicvine.volumeInformation)
+  ) {
+    coverFile.comicvine.url = data.comicvine.image.small_url;
     coverFile.comicvine.issueName = data.comicvine.name;
-    coverFile.comicvine.publisher = data.comicvine.publisher.name;
+    coverFile.comicvine.publisher = data.comicvine.volumeInformation.publisher;
   }
-  // rawFileDetails
-  if (!isEmpty(data.rawFileDetails)) {
+  if (!isEmpty(data.rawFileDetails.cover)) {
     const encodedFilePath = encodeURI(
       `${LIBRARY_SERVICE_HOST}/${data.rawFileDetails.cover.filePath}`,
     );
     coverFile.rawFile.url = escapePoundSymbol(encodedFilePath);
     coverFile.rawFile.issueName = data.rawFileDetails.name;
   }
-  // wanted
-
   if (!isUndefined(data.locg)) {
     coverFile.locg.url = data.locg.cover;
     coverFile.locg.issueName = data.locg.name;
@@ -78,30 +69,25 @@ export const determineCoverFile = (data): any => {
 
 export const determineExternalMetadata = (
   metadataSource: string,
-  source: any,
-): any => {
-  if (!isNil(source)) {
-    switch (metadataSource) {
-      case "comicvine":
-        return {
-          coverURL:
-            source.comicvine?.image.small_url ||
-            source.comicvine.volumeInformation?.image.small_url,
-          issue: source.comicvine.name,
-          icon: "cvlogo.svg",
-        };
-      case "locg":
-        return {
-          coverURL: source.locg.cover,
-          issue: source.locg.name,
-          icon: "locglogo.svg",
-        };
-      case undefined:
-        return {};
+  source: any
+) => {
+  switch (metadataSource) {
+    case "comicvine":
+      return {
+        coverURL: source.comicvine.image.small_url,
+        issue: source.comicvine.name,
+        icon: "cvlogo.svg",
+      };
+    case "locg":
+      return {
+        coverURL: source.locg.cover,
+        issue: source.locg.name,
+        icon: "locglogo.svg",
+      };
+    case undefined:
+      return {};
 
-      default:
-        break;
-    }
+    default:
+      break;
   }
-  return null;
-};
+};

src/client/shared/utils/tradepaperback.utils.ts

@@ -16,7 +16,6 @@ export const detectIssueTypes = (deck: string): any => {
   const matches = map(issueTypeMatchers, (matcher) => {
     return getIssueTypeDisplayName(deck, matcher.regex, matcher.displayName);
   });
-
   return compact(matches)[0];
 };
 

src/client/store/index.ts

@@ -1,153 +1,106 @@
 import { create } from "zustand";
-import { isNil } from "lodash";
-import io from "socket.io-client";
-import { SOCKET_BASE_URI } from "../constants/endpoints";
-import { produce } from "immer";
-import { QueryClient } from "@tanstack/react-query";
+import { isEmpty } from "lodash";
+import AirDCPPSocket from "../services/DcppSearchService";
+import axios from "axios";
 
-/*  Broadly, this file sets up:
- *    1. The zustand-based global client state
- *    2. socket.io client
- */
 export const useStore = create((set, get) => ({
+  // AirDC++ state
+  airDCPPSocketConnected: false,
+  airDCPPDisconnectionInfo: {},
+  airDCPPClientConfiguration: {},
+  airDCPPSocketConnectionInformation: {},
+  setAirDCPPSocketConnectionStatus: () =>
+    set((value) => ({
+      airDCPPSocketConnected: value,
+    })),
+  getAirDCPPConnectionStatus: () => {
+    const airDCPPSocketConnectionStatus = get().airDCPPSocketConnected;
+  },
   // Socket.io state
-  socketIOInstance: {},
-  // ComicVine Scraping status
-  comicvine: {
-    scrapingStatus: "",
-  },
-
-  // Import job queue and associated statuses
-  importJobQueue: {
-    successfulJobCount: 0,
-    failedJobCount: 0,
-    status: undefined,
-    setStatus: (status: string) =>
-      set(
-        produce((draftState) => {
-          draftState.importJobQueue.status = status;
-        }),
-      ),
-    setJobCount: (jobType: string, count: Number) => {
-      switch (jobType) {
-        case "successful":
-          set(
-            produce((draftState) => {
-              draftState.importJobQueue.successfulJobCount = count;
-            }),
-          );
-          break;
-
-        case "failed":
-          set(
-            produce((draftState) => {
-              draftState.importJobQueue.failedJobCount = count;
-            }),
-          );
-          break;
-      }
-    },
-    mostRecentImport: null,
-    setMostRecentImport: (fileName: string) => {
-      set(
-        produce((state) => {
-          state.importJobQueue.mostRecentImport = fileName;
-        }),
-      );
-    },
-  },
 }));
 
 const { getState, setState } = useStore;
-const queryClient = new QueryClient();
 
-/** Socket.IO initialization **/
-// 1. Fetch sessionId from localStorage
-const sessionId = localStorage.getItem("sessionId");
-// 2. socket.io instantiation
-const socketIOInstance = io(SOCKET_BASE_URI, {
-  transports: ["websocket"],
-  withCredentials: true,
-  query: { sessionId },
-});
-// 3. Set the instance in global state
-setState({
-  socketIOInstance,
-});
+// Method to init AirDC++ Socket with supplied settings
+const initializeAirDCPPSocket = async (configuration) => {
+  console.log("[AirDCPP]: Initializing socket...");
 
-// Socket.io-based session restoration
-if (!isNil(sessionId)) {
-  // 1. Resume the session
-  socketIOInstance.emit(
-    "call",
-    "socket.resumeSession",
-    {
-      sessionId,
+  const initializedAirDCPPSocket = new AirDCPPSocket({
+    protocol: `${configuration.protocol}`,
+    hostname: `${configuration.hostname}:${configuration.port}`,
+    username: `${configuration.username}`,
+    password: `${configuration.password}`,
+  });
+
+  // Set up connect and disconnect handlers
+  initializedAirDCPPSocket.onConnected = (sessionInfo) => {
+    // update global state with socket connection status
+    setState({
+      airDCPPSocketConnected: true,
+    });
+  };
+  initializedAirDCPPSocket.onDisconnected = async (reason, code, wasClean) => {
+    // update global state with socket connection status
+    setState({
+      disconnectionInfo: { reason, code, wasClean },
+      airDCPPSocketConnected: false,
+    });
+  };
+  // AirDC++ Socket-related connection and post-connection
+  // Attempt connection
+  const airDCPPSocketConnectionInformation =
+    await initializedAirDCPPSocket.connect();
+  setState({
+    airDCPPSocketConnectionInformation,
+  });
+
+  // Set up event listeners
+  initializedAirDCPPSocket.addListener(
+    `queue`,
+    "queue_bundle_tick",
+    async (downloadProgressData) => {
+      console.log(downloadProgressData);
     },
-    (data) => console.log(data),
   );
-} else {
-  // 1. Inititalize the session and persist the sessionId to localStorage
-  socketIOInstance.on("sessionInitialized", (sessionId) => {
-    localStorage.setItem("sessionId", sessionId);
+  initializedAirDCPPSocket.addListener(
+    "queue",
+    "queue_bundle_added",
+    async (data) => {
+      console.log("JEMEN:", data);
+    },
+  );
+
+  initializedAirDCPPSocket.addListener(
+    `queue`,
+    "queue_bundle_status",
+    async (bundleData) => {
+      let count = 0;
+      if (bundleData.status.completed && bundleData.status.downloaded) {
+        // dispatch the action for raw import, with the metadata
+        if (count < 1) {
+          console.log(`[AirDCPP]: Download complete.`);
+
+          count += 1;
+        }
+      }
+    },
+  );
+};
+
+// 1. get settings from mongo
+const { data } = await axios({
+  url: "http://localhost:3000/api/settings/getAllSettings",
+  method: "GET",
+});
+
+const directConnectConfiguration = data?.directConnect.client.host;
+
+// 2. If available, init AirDC++ Socket with those settings
+if (!isEmpty(directConnectConfiguration)) {
+  initializeAirDCPPSocket(directConnectConfiguration);
+  setState({
+    airDCPPClientConfiguration: directConnectConfiguration,
   });
 }
-// 2. If a job is in progress, restore the job counts and persist those to global state
-socketIOInstance.on("RESTORE_JOB_COUNTS_AFTER_SESSION_RESTORATION", (data) => {
-  console.log("Active import in progress detected; restoring counts...");
-  const { completedJobCount, failedJobCount, queueStatus } = data;
-  setState((state) => ({
-    importJobQueue: {
-      ...state.importJobQueue,
-      successfulJobCount: completedJobCount,
-      failedJobCount,
-      status: queueStatus,
-    },
-  }));
-});
 
-// 1a.  Act on each comic issue successfully imported/failed, as indicated
-//      by the LS_COVER_EXTRACTED/LS_COVER_EXTRACTION_FAILED events
-socketIOInstance.on("LS_COVER_EXTRACTED", (data) => {
-  const { completedJobCount, importResult } = data;
-  console.log(importResult);
-  setState((state) => ({
-    importJobQueue: {
-      ...state.importJobQueue,
-      successfulJobCount: completedJobCount,
-      mostRecentImport: importResult.data.rawFileDetails.name,
-    },
-  }));
-});
-socketIOInstance.on("LS_COVER_EXTRACTION_FAILED", (data) => {
-  const { failedJobCount } = data;
-  setState((state) => ({
-    importJobQueue: {
-      ...state.importJobQueue,
-      failedJobCount,
-    },
-  }));
-});
-
-// 1b.  Clear the localStorage sessionId upon receiving the
-//      LS_IMPORT_QUEUE_DRAINED event
-socketIOInstance.on("LS_IMPORT_QUEUE_DRAINED", (data) => {
-  localStorage.removeItem("sessionId");
-  setState((state) => ({
-    importJobQueue: {
-      ...state.importJobQueue,
-      status: "drained",
-    },
-  }));
-  queryClient.invalidateQueries({ queryKey: ["allImportJobResults"] });
-});
-
-// ComicVine Scraping status
-socketIOInstance.on("CV_SCRAPING_STATUS", (data) => {
-  setState((state) => ({
-    comicvine: {
-      ...state.comicvine,
-      scrapingStatus: data.message,
-    },
-  }));
-});
+console.log("connected?", getState());

tailwind.config.ts

@@ -1,25 +0,0 @@
-import { addDynamicIconSelectors } from "@iconify/tailwind";
-
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
-  darkMode: "class",
-  theme: {
-    fontFamily: {
-      sans: ["PP Object Sans Regular", "sans-serif"],
-      hasklig: ["Hasklig Regular", "monospace"],
-    },
-    container: {
-      center: true,
-      padding: {
-        DEFAULT: "1rem",
-        sm: "2rem",
-        lg: "4rem",
-        xl: "5rem",
-        "2xl": "6rem",
-      },
-    },
-  },
-
-  plugins: [addDynamicIconSelectors()],
-};