🛠 changed import to account for graphql

Bumps [vite](https://github.com/vitejs/vite/tree/HEAD/packages/vite) from 5.2.14 to 5.4.12.
- [Release notes](https://github.com/vitejs/vite/releases)
- [Changelog](https://github.com/vitejs/vite/blob/v5.4.12/packages/vite/CHANGELOG.md)
- [Commits](https://github.com/vitejs/vite/commits/v5.4.12/packages/vite)

---
updated-dependencies:
- dependency-name: vite
  dependency-type: direct:production
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

.babelrc

@@ -1,17 +0,0 @@
-{
-  "presets": [
-    "@babel/preset-env",
-    "@babel/preset-react",
-    "@babel/preset-typescript"
-  ],
-  "plugins": [
-    "@babel/transform-runtime",
-    "@babel/plugin-proposal-class-properties",
-    "@babel/plugin-syntax-top-level-await"
-  ],
-  "env": {
-    "production": {
-      "presets": ["minify"]
-    }
-  }
-}

.eslintrc.js

@@ -1,14 +1,14 @@
 module.exports = {
-  extends: ["plugin:react/recommended", "plugin:@typescript-eslint/recommended", "plugin:prettier/recommended", "plugin:css-modules/recommended", "plugin:storybook/recommended", "plugin:storybook/recommended", "plugin:storybook/recommended"],
+  extends: ["plugin:react/recommended", "plugin:@typescript-eslint/recommended", "plugin:prettier/recommended", "plugin:css-modules/recommended", "plugin:storybook/recommended", "plugin:storybook/recommended", "plugin:storybook/recommended", "plugin:storybook/recommended"],
   parser: "@typescript-eslint/parser",
   parserOptions: {
     sourceType: "module",
     ecmaVersion: 2020,
     ecmaFeatures: {
       jsx: true // Allows for the parsing of JSX
-
     }
   },
+
   plugins: ["@typescript-eslint", "css-modules"],
   settings: {
     "import/resolver": {
@@ -18,9 +18,9 @@ module.exports = {
     },
     react: {
       version: "detect" // Tells eslint-plugin-react to automatically detect the version of React to use
-
     }
   },
+
   // Fine tune rules
   rules: {
     "@typescript-eslint/no-var-requires": 0

.github/workflows/docker-image.yml

@@ -12,7 +12,7 @@ jobs:
     steps:
     - uses: actions/checkout@master
     - name: Publish to Registry
-      uses: elgohr/Publish-Docker-Github-Action@master
+      uses: elgohr/Publish-Docker-Github-Action@v5
       with:
         name: frishi/threetwo
         username: ${{ secrets.DOCKER_USERNAME }}

.gitignore

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

.storybook/main.js

@@ -1,19 +0,0 @@
-module.exports = {
-  stories: [
-    "../src/client/stories/*.stories.mdx",
-    "../src/client/stories/*.stories.@(js|jsx|ts|tsx)",
-  ],
-  staticDirs: [
-    "../src/client/stories/assets"
-  ],
-  addons: [
-    "@storybook/addon-links",
-    "@storybook/preset-scss",
-    "@storybook/addon-essentials",
-    "@storybook/addon-interactions",
-  ],
-  framework: "@storybook/react",
-  core: {
-    builder: "webpack5",
-  },
-};

.storybook/main.ts

@@ -0,0 +1,19 @@
+import type { StorybookConfig } from "@storybook/react-vite";
+
+const config: StorybookConfig = {
+  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-onboarding",
+    "@storybook/addon-interactions",
+  ],
+  framework: {
+    name: "@storybook/react-vite",
+    options: {},
+  },
+  docs: {
+    autodocs: "tag",
+  },
+};
+export default config;

.storybook/preview-head.html

@@ -0,0 +1,3 @@
+<script>
+  window.global = window;
+</script>

.storybook/preview.js

@@ -1,9 +0,0 @@
-export const parameters = {
-  actions: { argTypesRegex: "^on[A-Z].*" },
-  controls: {
-    matchers: {
-      color: /(background|color)$/i,
-      date: /Date$/,
-    },
-  },
-}

.storybook/preview.ts

@@ -0,0 +1,18 @@
+import type { Preview } from "@storybook/react";
+
+const preview: Preview = {
+  parameters: {
+    backgrounds: {
+      default: "light",
+    },
+    actions: { argTypesRegex: "^on[A-Z].*" },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+  },
+};
+
+export default preview;

Dockerfile

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

README.md

@@ -6,14 +6,25 @@ ThreeTwo! _aims to be_ a comic book curation app.
 
 ### Screenshots
 
-![](https://raw.githubusercontent.com/rishighan/threetwo/rishighan-screenshots-dec-2022/Dashboard.png)
+#### Dashboard
 
-![](https://raw.githubusercontent.com/rishighan/threetwo/rishighan-screenshots-dec-2022/Library.png)
+![](https://raw.githubusercontent.com/rishighan/threetwo/ef05dee6005f683f1e4547631217681def9ebe86/screenshots/Dashboard.jpg)
 
-![](https://raw.githubusercontent.com/rishighan/threetwo/rishighan-screenshots-dec-2022/DC%2B%2B%20integration.png)
+#### Issue View
 
-![](https://raw.githubusercontent.com/rishighan/threetwo/rishighan-screenshots-dec-2022/ComicVine%20Matching.png)
+![](https://raw.githubusercontent.com/rishighan/threetwo/ef05dee6005f683f1e4547631217681def9ebe86/screenshots/ComicDetail.jpg)
 
+#### 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
 
@@ -28,7 +39,8 @@ 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-ui-typings](https://github.com/rishighan/threetwo-frontend-types) which are the types used across the UI, installable as an `npm` dependency.
+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.
 
 ## Docker Instructions
 
@@ -40,24 +52,21 @@ For debugging and troubleshooting, you can run this app locally using these step
 
 1. Clone this repo using `git clone https://github.com/rishighan/threetwo.git`
 2. `yarn run dev` (you can ignore the warnings)
-3. This will open `http://localhost:3050` in your default browser
+3. This will open `http://localhost:5173` in your default browser
-4. For testing `OPDS` functionality, create a folder called `comics` under `/src/server` and put some comics in there. The `OPDS` feed is accessed to `http://localhost:8050/api/opds`
+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.
-5. 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
+
 ### 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

@@ -0,0 +1,14 @@
+<!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">
+    <div id="root"></div>
+    <script type="module" src="/src/client/index.tsx"></script>
+  </body>
+</html>

jsdoc.json

@@ -1,34 +1,25 @@
 {
-  "tags": {
+    "tags": {
-    "allowUnknownTags": true,
+        "allowUnknownTags": false
-    "dictionaries": [
+    },
-      "jsdoc",
+    "source": {
-      "closure"
+        "include": [
-    ]
+          "./src/client"
-  },
+        ],
-  "source": {
+        "includePattern": "\\.(jsx|js|ts|tsx)$"
-    "include": [
+    },
-      "./src/client"
+    "plugins": [
+        "plugins/markdown"
     ],
-    "includePattern": "\\.(jsx|js|ts|tsx)$"
+    "opts": {
-  },
+        "template": "node_modules/tui-jsdoc-template",
-  "plugins": [
+        "encoding": "utf8",
-    "better-docs/component",
+        "destination": "docs/",
-    "better-docs/category",
+        "recurse": true,
-    "plugins/markdown",
+        "verbose": true
-    "node_modules/better-docs/typescript"
+    },
-  ],
+    "templates": {
-  "templates": {
+        "cleverLinks": false,
-    "better-docs": {
+        "monospaceLinks": false
-      "name": "ThreeTwo UI components"
     }
-  },
-  "opts": {
-    "destination": "docs/",
-    "readme": "README.md",
-    "recurse": true,
-    "encoding": "utf8",
-    "verbose": true,
-    "template": "node_modules/better-docs"
-  }
 }

package.json

@@ -1,180 +1,136 @@
 {
   "name": "threetwo",
-  "version": "0.0.2",
+  "version": "0.1.0",
-  "description": "ThreeTwo! A comic book curator.",
+  "description": "ThreeTwo! A good comic book curator.",
   "main": "server/index.js",
   "typings": "server/index.js",
   "scripts": {
-    "build": "webpack --mode production",
+    "build": "vite build",
-    "start": "npm run build && npm run server",
+    "dev": "rimraf dist && npm run build && vite",
-    "client": "webpack serve --mode development --devtool inline-source-map --hot",
+    "start": "npm run build && vite",
-    "server": "tsc -p tsconfig.server.json && node server/",
-    "dev": "concurrently \"nodemon\" \"npm run client\"",
-    "server-dev": "nodemon",
     "docs": "jsdoc -c jsdoc.json",
-    "storybook": "start-storybook -p 6006",
+    "storybook": "storybook dev -p 6006",
-    "build-storybook": "build-storybook"
+    "build-storybook": "storybook build"
   },
   "author": "Rishi Ghan",
   "license": "MIT",
   "dependencies": {
-    "@babel/runtime": "^7.13.17",
+    "@dnd-kit/core": "^6.0.8",
-    "@bluelovers/fast-glob": "https://github.com/rishighan/fast-glob-v2-api.git",
+    "@dnd-kit/sortable": "^7.0.2",
-    "@dnd-kit/core": "^4.0.0",
+    "@dnd-kit/utilities": "^3.2.1",
-    "@dnd-kit/sortable": "^5.0.0",
+    "@floating-ui/react": "^0.26.12",
-    "@dnd-kit/utilities": "^3.2.0",
+    "@floating-ui/react-dom": "^2.0.8",
-    "@fortawesome/fontawesome-free": "^6.1.1",
+    "@fortawesome/fontawesome-free": "^6.3.0",
-    "@parcel/config-default": "^2.6.0",
+    "@popperjs/core": "^2.11.8",
-    "@redux-devtools/extension": "^3.2.2",
+    "@rollup/plugin-node-resolve": "^15.0.1",
-    "@tanstack/react-table": "^8.5.11",
+    "@tanstack/react-query": "^5.0.5",
+    "@tanstack/react-table": "^8.9.3",
     "@types/mime-types": "^2.1.0",
-    "@types/react": "^17.0.3",
+    "@types/react-router-dom": "^5.3.3",
-    "@types/react-dom": "^17.0.2",
+    "@vitejs/plugin-react": "^4.2.1",
-    "@types/react-redux": "^7.1.16",
+    "airdcpp-apisocket": "^2.5.0-beta.2",
-    "@types/react-router-dom": "^5.1.7",
+    "axios": "^1.8.2",
-    "@types/sharp": "^0.28.0",
+    "axios-cache-interceptor": "^1.0.1",
-    "@types/socket.io": "^3.0.2",
-    "@types/socket.io-client": "^3.0.0",
-    "airdcpp-apisocket": "^2.4.4",
-    "array-sort-by": "^1.2.1",
-    "axios": "^0.27.2",
     "axios-rate-limit": "^1.3.0",
-    "axios-simple-cache-adapter": "^1.1.0",
+    "babel-plugin-styled-components": "^2.1.4",
-    "babel-polyfill": "^6.26.0",
-    "babel-preset-minify": "^0.5.2",
-    "better-docs": "^2.7.2",
-    "comlink-loader": "^2.0.0",
     "date-fns": "^2.28.0",
     "dayjs": "^1.10.6",
-    "ellipsize": "^0.1.0",
+    "ellipsize": "^0.5.1",
-    "express": "^4.17.1",
+    "express": "^4.20.0",
-    "fastest-validator": "^1.11.0",
     "filename-parser": "^1.0.2",
     "final-form": "^4.20.2",
     "final-form-arrays": "^3.0.2",
+    "focus-trap-react": "^10.2.3",
+    "graphql": "^16.0.0",
+    "graphql-request": "^7.2.0",
+    "history": "^5.3.0",
     "html-to-text": "^8.1.0",
+    "i18next": "^23.11.1",
+    "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",
-    "opds-extra": "^3.0.9",
     "pretty-bytes": "^5.6.0",
     "prop-types": "^15.8.1",
     "qs": "^6.10.5",
-    "react": "^18.2.0",
+    "react": "^18.3.1",
     "react-collapsible": "^2.9.0",
     "react-comic-viewer": "^0.4.0",
-    "react-day-picker": "^8.0.6",
+    "react-day-picker": "^8.10.0",
-    "react-dom": "^18.1.0",
+    "react-dom": "^18.2.0",
     "react-fast-compare": "^3.2.0",
     "react-final-form": "^6.5.9",
-    "react-final-form-arrays": "^3.1.3",
+    "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-redux": "^7.2.6",
+    "react-router": "^7.5.2",
-    "react-router": "^6.2.2",
+    "react-router-dom": "^6.9.0",
-    "react-router-dom": "^6.2.2",
+    "react-select": "^5.8.0",
-    "react-select": "^5.3.2",
+    "react-select-async-paginate": "^0.7.2",
-    "react-select-async-paginate": "^0.6.1",
-    "react-slick": "^0.29.0",
     "react-sliding-pane": "^7.1.0",
-    "react-stickynode": "^4.0.0",
     "react-textarea-autosize": "^8.3.4",
-    "reapop": "^4.0.5",
+    "react-toastify": "^10.0.5",
-    "redux-first-history": "^5.0.9",
-    "redux-socket.io-middleware": "^1.0.4",
-    "redux-thunk": "^2.4.1",
-    "sharp": "^0.30.5",
-    "slick-carousel": "^1.8.1",
     "socket.io-client": "^4.3.2",
-    "styled-components": "^5.3.5",
+    "styled-components": "^6.1.0",
     "threetwo-ui-typings": "^1.0.14",
-    "voca": "^1.4.0",
+    "vite": "^5.4.19",
+    "vite-plugin-html": "^3.2.0",
     "websocket": "^1.0.34",
-    "ws": "^7.5.3",
+    "zustand": "^4.4.6"
-    "xml2js": "^0.4.23",
-    "xregexp": "^5.0.2"
   },
   "devDependencies": {
-    "@babel/cli": "^7.13.10",
+    "@iconify-json/solar": "^1.1.8",
-    "@babel/core": "^7.13.10",
+    "@iconify/tailwind": "^0.1.4",
-    "@babel/plugin-syntax-top-level-await": "^7.14.5",
+    "@storybook/addon-essentials": "^7.4.1",
-    "@babel/plugin-transform-runtime": "^7.13.15",
+    "@storybook/addon-interactions": "^7.4.1",
-    "@babel/preset-env": "^7.13.10",
+    "@storybook/addon-links": "^7.4.1",
-    "@babel/preset-react": "^7.12.13",
+    "@storybook/addon-onboarding": "^1.0.8",
-    "@babel/preset-typescript": "^7.13.0",
+    "@storybook/blocks": "^7.4.1",
-    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.7",
+    "@storybook/react": "^7.4.1",
-    "@storybook/addon-actions": "^6.5.9",
+    "@storybook/react-vite": "^7.4.1",
-    "@storybook/addon-essentials": "^6.5.9",
+    "@storybook/testing-library": "^0.2.0",
-    "@storybook/addon-interactions": "^6.5.9",
+    "@tanstack/eslint-plugin-query": "^5.0.5",
-    "@storybook/addon-links": "^6.5.9",
+    "@tanstack/react-query-devtools": "^5.1.0",
-    "@storybook/builder-webpack4": "^6.5.9",
-    "@storybook/builder-webpack5": "^6.5.9",
-    "@storybook/manager-webpack4": "^6.5.9",
-    "@storybook/manager-webpack5": "^6.5.9",
-    "@storybook/preset-scss": "^1.0.3",
-    "@storybook/react": "^6.5.9",
-    "@storybook/testing-library": "^0.0.13",
-    "@teamsupercell/typings-for-css-modules-loader": "^2.5.1",
     "@tsconfig/node14": "^1.0.0",
+    "@types/ellipsize": "^0.1.1",
     "@types/express": "^4.17.8",
     "@types/jest": "^26.0.20",
     "@types/lodash": "^4.14.168",
     "@types/node": "^14.14.34",
-    "@types/react": "^17.0.3",
+    "@types/react": "^18.0.28",
-    "@types/react-dom": "^17.0.2",
+    "@types/react-dom": "^18.0.11",
-    "@types/react-redux": "^7.1.16",
+    "@types/react-redux": "^7.1.25",
-    "@typescript-eslint/eslint-plugin": "^4.17.0",
+    "autoprefixer": "^10.4.16",
-    "@typescript-eslint/parser": "^4.17.0",
-    "awesome-typescript-loader": "^5.2.1",
-    "babel-eslint": "^10.0.0",
-    "babel-loader": "^8.2.2",
-    "babel-plugin-transform-class-properties": "^6.24.1",
     "body-parser": "^1.19.0",
-    "buffer": "^6.0.3",
+    "docdash": "^2.0.2",
-    "bulma": "^0.9.3",
+    "eslint": "^8.49.0",
-    "clean-webpack-plugin": "^1.0.0",
-    "comlink": "^4.3.0",
-    "concurrently": "^4.0.0",
-    "copy-webpack-plugin": "^9.0.1",
-    "css-loader": "^5.1.2",
-    "eslint": "^7.22.0",
-    "eslint-config-airbnb": "^18.2.1",
-    "eslint-config-airbnb-base": "^14.2.1",
     "eslint-config-prettier": "^8.1.0",
     "eslint-plugin-css-modules": "^2.11.0",
     "eslint-plugin-import": "^2.22.1",
+    "eslint-plugin-jsdoc": "^46.6.0",
     "eslint-plugin-jsx-a11y": "^6.0.3",
     "eslint-plugin-prettier": "^3.3.1",
     "eslint-plugin-react": "^7.22.0",
-    "express": "^4.17.1",
+    "eslint-plugin-storybook": "^0.6.13",
-    "file-loader": "^6.2.0",
+    "express": "^4.20.0",
-    "fs-extra": "^9.1.0",
-    "html-webpack-plugin": "^5.3.1",
-    "http-response-stream": "^1.0.9",
-    "image-webpack-loader": "^8.1.0",
     "install": "^0.13.0",
-    "jest": "^26.6.3",
+    "jest": "^29.6.3",
-    "mini-css-extract-plugin": "^1.4.1",
+    "nodemon": "^3.0.1",
-    "node-sass": "^7.0.1",
+    "postcss": "^8.4.32",
-    "nodemon": "^1.17.3",
+    "postcss-import": "^15.1.0",
-    "npm": "^8.11.0",
     "prettier": "^2.2.1",
     "react-refresh": "^0.14.0",
-    "rimraf": "^3.0.2",
+    "rimraf": "^4.1.3",
-    "sass-loader": "^11.0.1",
+    "sass": "^1.77.0",
-    "source-map-loader": "^0.2.4",
+    "storybook": "^7.3.2",
-    "string-similarity": "^4.0.4",
+    "tailwindcss": "^3.4.1",
-    "style-loader": "^2.0.0",
+    "tui-jsdoc-template": "^1.2.2",
-    "tslint": "^6.1.3",
+    "typescript": "^5.1.6"
-    "typescript": "^4.2.3",
-    "url-loader": "^1.0.1",
-    "webpack": "^5.73.0",
-    "webpack-bundle-analyzer": "^4.4.2",
-    "webpack-cli": "^4.6.0",
-    "webpack-dev-server": "^4.7.4",
-    "webpack-merge": "^5.7.3"
   },
   "resolutions": {
-    "@storybook/react/webpack": "^5"
+    "jackspeak": "2.1.1"
   }
 }

postcss.config.js

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

public/index.html

@@ -1,15 +0,0 @@
-<!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>
-    <div id="root"></div>
-</body>
-
-</html>

src/client/actions/airdcpp.actions.tsx

@@ -33,9 +33,9 @@ interface SearchData {
   priority: PriorityEnum;
 }
 
-function sleep(ms: number): Promise<NodeJS.Timeout> {
+export const sleep = (ms: number): Promise<NodeJS.Timeout> => {
   return new Promise((resolve) => setTimeout(resolve, ms));
-}
+};
 
 export const toggleAirDCPPSocketConnectionStatus =
   (status: String, payload?: any) => async (dispatch) => {
@@ -59,83 +59,6 @@ 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/actions/comicinfo.actions.tsx

@@ -1,10 +1,6 @@
 import axios from "axios";
 import rateLimiter from "axios-rate-limit";
-import {
+import { setupCache } from "axios-cache-interceptor";
-  AxiosCacheRequestConfig,
-  createCacheAdapter,
-} from "axios-simple-cache-adapter";
-import qs from "qs";
 import {
   CV_SEARCH_SUCCESS,
   CV_API_CALL_IN_PROGRESS,
@@ -26,25 +22,21 @@ import {
   LIBRARY_SERVICE_BASE_URI,
 } from "../constants/endpoints";
 
-const axiosCacheAdapter = createCacheAdapter();
 const http = rateLimiter(axios.create(), {
   maxRequests: 1,
   perMilliseconds: 1000,
   maxRPS: 1,
 });
-
+const cachedAxios = setupCache(axios);
 export const getWeeklyPullList = (options) => async (dispatch) => {
   try {
     dispatch({
       type: CV_WEEKLY_PULLLIST_CALL_IN_PROGRESS,
     });
-
+    await cachedAxios(`${COMICVINE_SERVICE_URI}/getWeeklyPullList`, {
-    await axios(`${COMICVINE_SERVICE_URI}/getWeeklyPullList`, {
       method: "get",
       params: options,
-      axiosCacheAdapter,
+    }).then((response) => {
-      cache: 1000, // value in MS
-    } as AxiosCacheRequestConfig).then((response) => {
       dispatch({
         type: CV_WEEKLY_PULLLIST_FETCHED,
         data: response.data.result,
@@ -70,9 +62,6 @@ export const comicinfoAPICall = (options) => async (dispatch) => {
         "Content-Type": "application/json",
         "Access-Control-Allow-Origin": "*",
       },
-      paramsSerializer: (params) => {
-        return qs.stringify(params, { arrayFormat: "repeat" });
-      },
     });
 
     switch (options.callURIAction) {
@@ -137,7 +126,7 @@ export const analyzeLibrary = (issues) => async (dispatch) => {
       queryObjects,
     },
   });
-
+  
   dispatch({
     type: CV_ISSUES_MATCHES_IN_LIBRARY_FETCHED,
     matches: foo.data,

src/client/actions/fileops.actions.tsx

@@ -4,13 +4,12 @@ import {
   COMICVINE_SERVICE_URI,
   IMAGETRANSFORMATION_SERVICE_BASE_URI,
   LIBRARY_SERVICE_BASE_URI,
-  LIBRARY_SERVICE_HOST,
   SEARCH_SERVICE_BASE_URI,
+  JOB_QUEUE_SERVICE_BASE_URI,
 } from "../constants/endpoints";
 import {
   IMS_COMIC_BOOK_GROUPS_FETCHED,
   IMS_COMIC_BOOK_GROUPS_CALL_IN_PROGRESS,
-  IMS_COMIC_BOOK_GROUPS_CALL_FAILED,
   IMS_RECENT_COMICS_FETCHED,
   IMS_WANTED_COMICS_FETCHED,
   CV_API_CALL_IN_PROGRESS,
@@ -22,23 +21,38 @@ import {
   LS_IMPORT,
   IMG_ANALYSIS_CALL_IN_PROGRESS,
   IMG_ANALYSIS_DATA_FETCH_SUCCESS,
-  IMS_COMIC_BOOK_ARCHIVE_EXTRACTION_SUCCESS,
   IMS_COMIC_BOOK_ARCHIVE_EXTRACTION_CALL_IN_PROGRESS,
   SS_SEARCH_RESULTS_FETCHED,
   SS_SEARCH_IN_PROGRESS,
   FILEOPS_STATE_RESET,
   LS_IMPORT_CALL_IN_PROGRESS,
-  LS_TOGGLE_IMPORT_QUEUE,
   SS_SEARCH_FAILED,
   SS_SEARCH_RESULTS_FETCHED_SPECIAL,
   WANTED_COMICS_FETCHED,
   VOLUMES_FETCHED,
-  CV_WEEKLY_PULLLIST_FETCHED,
+  LIBRARY_SERVICE_HEALTH,
+  LS_SET_QUEUE_STATUS,
+  LS_IMPORT_JOB_STATISTICS_FETCHED,
 } from "../constants/action-types";
 import { success } from "react-notification-system-redux";
 
-import { isNil, map } from "lodash";
+import { isNil } from "lodash";
 
+export const getServiceStatus = (serviceName?: string) => async (dispatch) => {
+  axios
+    .request({
+      url: `${LIBRARY_SERVICE_BASE_URI}/getHealthInformation`,
+      method: "GET",
+      transformResponse: (r: string) => JSON.parse(r),
+    })
+    .then((response) => {
+      const { data } = response;
+      dispatch({
+        type: LIBRARY_SERVICE_HEALTH,
+        status: data,
+      });
+    });
+};
 export async function walkFolder(path: string): Promise<Array<IFolderData>> {
   return axios
     .request<Array<IFolderData>>({
@@ -74,19 +88,38 @@ export const fetchComicBookMetadata = () => async (dispatch) => {
   //     autoDismiss: 0,
   //   }),
   // );
+  const sessionId = localStorage.getItem("sessionId");
   dispatch({
     type: LS_IMPORT,
-    meta: { remote: true },
+  });
-    data: {},
+
+  await axios.request({
+    url: `${LIBRARY_SERVICE_BASE_URI}/newImport`,
+    method: "POST",
+    data: { sessionId },
   });
 };
-export const toggleImportQueueStatus = (options) => async (dispatch) => {
+
+export const getImportJobResultStatistics = () => async (dispatch) => {
+  const result = await axios.request({
+    url: `${JOB_QUEUE_SERVICE_BASE_URI}/getJobResultStatistics`,
+    method: "GET",
+  });
   dispatch({
-    type: LS_TOGGLE_IMPORT_QUEUE,
+    type: LS_IMPORT_JOB_STATISTICS_FETCHED,
-    meta: { remote: true },
+    data: result.data,
-    data: { manjhul: "jigyadam", action: options.action },
   });
 };
+
+export const setQueueControl =
+  (queueAction: string, queueStatus: string) => async (dispatch) => {
+    dispatch({
+      type: LS_SET_QUEUE_STATUS,
+      meta: { remote: true },
+      data: { queueAction, queueStatus },
+    });
+  };
+
 /**
  * Fetches comic book metadata for various types
  * @return metadata for the comic book object categories
@@ -127,49 +160,50 @@ export const getComicBooks = (options) => async (dispatch) => {
  * @returns Nothing.
  * @param payload
  */
-export const importToDB = (sourceName: string, metadata?: any) => (dispatch) => {
+export const importToDB =
-  try {
+  (sourceName: string, metadata?: any) => (dispatch) => {
-    const comicBookMetadata = {
+    try {
-      importType: "new",
+      const comicBookMetadata = {
-      payload: {
+        importType: "new",
-        rawFileDetails: {
+        payload: {
-          name: "",
+          rawFileDetails: {
-        },
+            name: "",
-        importStatus: {
-          isImported: true,
-          tagged: false,
-          matchedResult: {
-            score: "0",
           },
+          importStatus: {
+            isImported: true,
+            tagged: false,
+            matchedResult: {
+              score: "0",
+            },
+          },
+          sourcedMetadata: metadata || null,
+          acquisition: { source: { wanted: true, name: sourceName } },
         },
-        sourcedMetadata: metadata || null,
+      };
-        acquisition: { source: { wanted: true, name: sourceName } },
+      dispatch({
-      }
+        type: IMS_CV_METADATA_IMPORT_CALL_IN_PROGRESS,
-    };
-    dispatch({
-      type: IMS_CV_METADATA_IMPORT_CALL_IN_PROGRESS,
-    });
-    return axios
-      .request({
-        url: `${LIBRARY_SERVICE_BASE_URI}/rawImportToDb`,
-        method: "POST",
-        data: comicBookMetadata,
-        // transformResponse: (r: string) => JSON.parse(r),
-      })
-      .then((response) => {
-        const { data } = response;
-        dispatch({
-          type: IMS_CV_METADATA_IMPORT_SUCCESSFUL,
-          importResult: data,
-        });
       });
-  } catch (error) {
+      return axios
-    dispatch({
+        .request({
-      type: IMS_CV_METADATA_IMPORT_FAILED,
+          url: `${LIBRARY_SERVICE_BASE_URI}/rawImportToDb`,
-      importError: error,
+          method: "POST",
-    });
+          data: comicBookMetadata,
-  }
+          // transformResponse: (r: string) => JSON.parse(r),
-};
+        })
+        .then((response) => {
+          const { data } = response;
+          dispatch({
+            type: IMS_CV_METADATA_IMPORT_SUCCESSFUL,
+            importResult: data,
+          });
+        });
+    } catch (error) {
+      dispatch({
+        type: IMS_CV_METADATA_IMPORT_FAILED,
+        importError: error,
+      });
+    }
+  };
 
 export const fetchVolumeGroups = () => async (dispatch) => {
   try {
@@ -254,24 +288,23 @@ export const fetchComicVineMatches =
  * @returns {any}
  */
 export const extractComicArchive =
-
   (path: string, options: any): any =>
-    async (dispatch) => {
+  async (dispatch) => {
-      dispatch({
+    dispatch({
-        type: IMS_COMIC_BOOK_ARCHIVE_EXTRACTION_CALL_IN_PROGRESS,
+      type: IMS_COMIC_BOOK_ARCHIVE_EXTRACTION_CALL_IN_PROGRESS,
-      });
+    });
-      await axios({
+    await axios({
-        method: "POST",
+      method: "POST",
-        url: `${LIBRARY_SERVICE_BASE_URI}/uncompressFullArchive`,
+      url: `${LIBRARY_SERVICE_BASE_URI}/uncompressFullArchive`,
-        headers: {
+      headers: {
-          "Content-Type": "application/json; charset=utf-8",
+        "Content-Type": "application/json; charset=utf-8",
-        },
+      },
-        data: {
+      data: {
-          filePath: path,
+        filePath: path,
-          options,
+        options,
-        },
+      },
-      });
+    });
-    };
+  };
 
 /**
  * Description
@@ -301,26 +334,26 @@ export const searchIssue = (query, options) => async (dispatch) => {
     case "wantedComicsPage":
       dispatch({
         type: WANTED_COMICS_FETCHED,
-        data: response.data.body,
+        data: response.data.hits,
       });
       break;
     case "globalSearchBar":
       dispatch({
         type: SS_SEARCH_RESULTS_FETCHED_SPECIAL,
-        data: response.data.body,
+        data: response.data.hits,
       });
       break;
 
     case "libraryPage":
       dispatch({
         type: SS_SEARCH_RESULTS_FETCHED,
-        data: response.data.body,
+        data: response.data.hits,
       });
       break;
     case "volumesPage":
       dispatch({
         type: VOLUMES_FETCHED,
-        data: response.data.body,
+        data: response.data.hits,
       });
       break;
 
@@ -349,4 +382,4 @@ export const analyzeImage =
       type: IMG_ANALYSIS_DATA_FETCH_SUCCESS,
       result: foo.data,
     });
-  };
+  };

src/client/actions/settings.actions.tsx

@@ -3,25 +3,14 @@ import {
   SETTINGS_OBJECT_FETCHED,
   SETTINGS_CALL_IN_PROGRESS,
   SETTINGS_DB_FLUSH_SUCCESS,
-} from "../constants/action-types";
+  SETTINGS_QBITTORRENT_TORRENTS_LIST_FETCHED,
+} from "../reducers/settings.reducer";
 import {
   LIBRARY_SERVICE_BASE_URI,
   SETTINGS_SERVICE_BASE_URI,
+  QBITTORRENT_SERVICE_BASE_URI,
 } from "../constants/endpoints";
 
-export const saveSettings =
-  (settingsPayload, settingsObjectId?: string) => async (dispatch) => {
-    const result = await axios({
-      url: `${SETTINGS_SERVICE_BASE_URI}/saveSettings`,
-      method: "POST",
-      data: { settingsPayload, settingsObjectId },
-    });
-    dispatch({
-      type: SETTINGS_OBJECT_FETCHED,
-      data: result.data,
-    });
-  };
-
 export const getSettings = (settingsKey?) => async (dispatch) => {
   const result = await axios({
     url: `${SETTINGS_SERVICE_BASE_URI}/getSettings`,
@@ -67,3 +56,22 @@ export const flushDb = () => async (dispatch) => {
     });
   }
 };
+
+export const getQBitTorrentClientInfo = (hostInfo) => async (dispatch) => {
+  await axios.request({
+    url: `${QBITTORRENT_SERVICE_BASE_URI}/connect`,
+    method: "POST",
+    data: hostInfo,
+  });
+  const qBittorrentClientInfo = await axios.request({
+    url: `${QBITTORRENT_SERVICE_BASE_URI}/getClientInfo`,
+    method: "GET",
+  });
+
+  dispatch({
+    type: SETTINGS_QBITTORRENT_TORRENTS_LIST_FETCHED,
+    data: qBittorrentClientInfo.data,
+  });
+};
+
+export const getProwlarrConnectionInfo = (hostInfo) => async (dispatch) => {};

src/client/assets/scss/App.scss

@@ -1,635 +1,15 @@
-@import "../../../../node_modules/bulma/bulma.sass";
+@tailwind base;
-$fa-font-path: "~@fortawesome/fontawesome-free/webfonts";
+@tailwind components;
-@import "../../../../node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss";
+@tailwind utilities;
-@import "../../../../node_modules/@fortawesome/fontawesome-free/scss/regular.scss";
-@import "../../../../node_modules/@fortawesome/fontawesome-free/scss/solid.scss";
-$bg-color: yellow;
-$border-color: red;
 
-$volume-color: #fdecd1;
+@layer base {
-$issue-color: #f2f1f9;
+  @font-face {
-$size-8: 0.9rem;
+    font-family: "PP Object Sans Regular";
-$size-9: 0.7rem;
+    src: url("/fonts/PPObjectSans-Regular.otf") format("opentype");
-$flexSize: 4em;
+  }
-$boxSpacing: 1em;
-$colorText: #404646;
 
-.is-size-8 {
+  @font-face {
-  font-size: $size-8;
+    font-family: "Hasklig Regular";
-}
+    src: url("/fonts/Hasklig-Regular.otf") format("opentype");
-
-.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/AirDCPPSettings/AirDCPPHubsForm.tsx

@@ -1,96 +0,0 @@
-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 { 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 {
-    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));
-    }
-  };
-
-  const validate = async () => {};
-
-  const SelectAdapter = ({ input, ...rest }) => {
-    return <Select {...input} {...rest} isClearable isMulti />;
-  };
-
-  return (
-    <>
-      <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>
-            <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>
-        )}
-      />
-      <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>
-        </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>
-        ))}
-      </div>
-    </>
-  );
-};
-
-export default AirDCPPHubsForm;

src/client/components/AirDCPPSettings/AirDCPPSettingsConfirmation.tsx

@@ -1,35 +0,0 @@
-import React, { ReactElement } from "react";
-
-export const AirDCPPSettingsConfirmation = (settingsObject): ReactElement => {
-  const { settings } = settingsObject;
-  console.log(settings);
-  return (
-    <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>Active Sessions: {settings.user.active_sessions}</dt>
-              <dt>
-                Permissions:{" "}
-                <pre>
-                  {JSON.stringify(settings.user.permissions, undefined, 2)}
-                </pre>
-              </dt>
-            </dl>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default AirDCPPSettingsConfirmation;

src/client/components/AirDCPPSettings/AirDCPPSettingsForm.tsx

@@ -1,154 +0,0 @@
-import React, { ReactElement, useCallback, useContext } from "react";
-import { Form, Field } from "react-final-form";
-import { useDispatch } from "react-redux";
-import { saveSettings, deleteSettings } from "../../actions/settings.actions";
-import { AirDCPPSettingsConfirmation } from "./AirDCPPSettingsConfirmation";
-import { AirDCPPSocketContext } from "../../context/AirDCPPSocket";
-import { isUndefined, isEmpty, isNil } from "lodash";
-
-export const AirDCPPSettingsForm = (): ReactElement => {
-  const dispatch = useDispatch();
-  const airDCPPSettings = useContext(AirDCPPSocketContext);
-
-  const hostValidator = (hostname: string): string | null => {
-    const hostnameRegex = /[\W]+/gm;
-    try {
-      if (!isUndefined(hostname)) {
-        const matches = hostname.match(hostnameRegex);
-        return (isNil(matches) && matches.length !== 0) ? hostname : "Invalid hostname; it should not contain special characters";
-      }
-    }
-    catch {
-      return null;
-    }
-  }
-  
-  const onSubmit = useCallback(async (values) => {
-    try {
-      airDCPPSettings.setSettings(values);
-      dispatch(
-        saveSettings({
-          host: values,
-        }),
-      );
-    } catch (error) {
-      console.log(error);
-    }
-  }, []);
-  const removeSettings = useCallback(async () => {
-    airDCPPSettings.setSettings({});
-    dispatch(deleteSettings());
-  }, []);
-  const validate = async () => { };
-  const initFormData = !isUndefined(
-    airDCPPSettings.airDCPPState.settings.directConnect,
-  )
-    ? airDCPPSettings.airDCPPState.settings.directConnect.client.host
-    : {};
-
-  return (
-    <>
-      <Form
-        onSubmit={onSubmit}
-        validate={validate}
-        initialValues={initFormData}
-        render={({ handleSubmit }) => (
-          <form onSubmit={handleSubmit}>
-            <h2>AirDC++ Connection Information</h2>
-            <label className="label">AirDC++ 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={hostValidator}>
-                  {({ input, meta }) => (
-                    <div>
-                      <input {...input} type="text" placeholder="AirDC++ hostname" className="input" />
-                      {meta.error && meta.touched && <span className="is-size-7 has-text-danger">{meta.error}</span>}
-                    </div>
-                  )}
-                </Field>
-              </div>
-              <p className="control">
-                <Field
-                  name="port"
-                  component="input"
-                  className="input"
-                  placeholder="AirDC++ port"
-                />
-              </p>
-            </div>
-            <div className="field">
-              <div className="is-clearfix">
-                <label className="label">Credentials</label>
-              </div>
-              <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 className="field">
-                  <p className="control is-expanded has-icons-left has-icons-right">
-                    <Field
-                      name="password"
-                      component="input"
-                      type="password"
-                      className="input"
-                      placeholder="Password"
-                    />
-                    <span className="icon is-small is-left">
-                      <i className="fa-solid fa-lock"></i>
-                    </span>
-                    <span className="icon is-small is-right">
-                      <i className="fas fa-check"></i>
-                    </span>
-                  </p>
-                </div>
-              </div>
-            </div>
-            <div className="field is-grouped">
-              <p className="control">
-                <button type="submit" className="button is-primary">
-                  {!isEmpty(initFormData) ? "Update" : "Save"}
-                </button>
-              </p>
-            </div>
-          </form>
-        )}
-      />
-      {!isEmpty(airDCPPSettings.airDCPPState.socketConnectionInformation) ? (
-        <AirDCPPSettingsConfirmation
-          settings={airDCPPSettings.airDCPPState.socketConnectionInformation}
-        />
-      ) : null}
-
-      {!isEmpty(airDCPPSettings.airDCPPState.socketConnectionInformation) ? (
-        <p className="control mt-4">
-          <button className="button is-danger" onClick={removeSettings}>
-            Delete
-          </button>
-        </p>
-      ) : null}
-    </>
-  );
-};
-
-export default AirDCPPSettingsForm;

src/client/components/App.tsx

@@ -1,139 +1,21 @@
-import React, { ReactElement, useContext, useEffect } from "react";
+import React, { ReactElement, useEffect } from "react";
-import Dashboard from "./Dashboard/Dashboard";
+import { Outlet } from "react-router-dom";
-
+import { Navbar2 } from "./shared/Navbar2";
-import Import from "./Import";
+import { ToastContainer } from "react-toastify";
-import { ComicDetailContainer } from "./ComicDetail/ComicDetailContainer";
-import TabulatedContentContainer from "./Library/TabulatedContentContainer";
-import LibraryGrid from "./Library/LibraryGrid";
-import Search from "./Search";
-import Settings from "./Settings";
-import VolumeDetail from "./VolumeDetail/VolumeDetail";
-import Downloads from "./Downloads/Downloads";
-
-import { Routes, Route } from "react-router-dom";
-import Navbar from "./Navbar";
 import "../assets/scss/App.scss";
-import {
+import { useStore } from "../store";
-  AirDCPPSocketContextProvider,
-  AirDCPPSocketContext,
-} from "../context/AirDCPPSocket";
-import { isEmpty, isUndefined } from "lodash";
-import {
-  AIRDCPP_DOWNLOAD_PROGRESS_TICK,
-  LS_SINGLE_IMPORT,
-} from "../constants/action-types";
-import { useDispatch, useSelector } from "react-redux";
 
-/**
- * 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
- */
-const AirDCPPSocketComponent = (): ReactElement => {
-  const airDCPPConfiguration = useContext(AirDCPPSocketContext);
-  const dispatch = useDispatch();
-
-  useEffect(() => {
-    const initializeAirDCPPEventListeners = async () => {
-      if (
-        !isUndefined(airDCPPConfiguration.airDCPPState) &&
-        !isEmpty(airDCPPConfiguration.airDCPPState.settings) &&
-        !isEmpty(airDCPPConfiguration.airDCPPState.socket)
-      ) {
-        await airDCPPConfiguration.airDCPPState.socket.addListener(
-          "queue",
-          "queue_bundle_added",
-          async (data) => {
-            console.log("JEMEN:", data);
-          },
-        );
-        // download tick listener
-        await airDCPPConfiguration.airDCPPState.socket.addListener(
-          `queue`,
-          "queue_bundle_tick",
-          async (downloadProgressData) => {
-            dispatch({
-              type: AIRDCPP_DOWNLOAD_PROGRESS_TICK,
-              downloadProgressData,
-            });
-          },
-        );
-        // download complete listener
-        await airDCPPConfiguration.airDCPPState.socket.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.`);
-                dispatch({
-                  type: LS_SINGLE_IMPORT,
-                  meta: { remote: true },
-                  data: bundleData,
-                });
-                count += 1;
-              }
-            }
-          },
-        );
-        console.log(
-          "[AirDCPP]: Listener registered - listening to queue bundle download ticks",
-        );
-        console.log(
-          "[AirDCPP]: Listener registered - listening to queue bundle changes",
-        );
-        console.log(
-          "[AirDCPP]: Listener registered - listening to transfer completion",
-        );
-      }
-    };
-    initializeAirDCPPEventListeners();
-  }, [airDCPPConfiguration]);
-  return <></>;
-};
 export const App = (): ReactElement => {
+  useEffect(() => {
+    useStore.getState().getSocket("/"); // Connect to the base namespace
+  }, []);
+  
   return (
-    <AirDCPPSocketContextProvider>
+    <>
-      <div>
+      <Navbar2 />
-        <AirDCPPSocketComponent />
+      <Outlet />
-        <Navbar />
+      <ToastContainer stacked hideProgressBar />
-        <Routes>
+    </>
-          <Route path="/" element={<Dashboard />} />
-          <Route path="/import" element={<Import path={"./comics"} />} />
-          <Route
-            path="/library"
-            element={<TabulatedContentContainer category="library" />}
-          />
-          <Route path="/library-grid" element={<LibraryGrid />} />
-          <Route path="/downloads" element={<Downloads data={{}} />} />
-          <Route path="/search" element={<Search />} />
-          <Route
-            path={"/comic/details/:comicObjectId"}
-            element={<ComicDetailContainer />}
-          />
-          <Route
-            path={"/volume/details/:comicObjectId"}
-            element={<VolumeDetail />}
-          />
-          <Route path="/settings" element={<Settings />} />
-          <Route
-            path="/pull-list/all"
-            element={<TabulatedContentContainer category="pullList" />}
-          />
-          <Route
-            path="/wanted/all"
-            element={<TabulatedContentContainer category="wanted" />}
-          />
-          <Route
-            path="/volumes/all"
-            element={<TabulatedContentContainer category="volumes" />}
-          />
-        </Routes>
-      </div>
-    </AirDCPPSocketContextProvider>
   );
 };
 

src/client/components/Card.tsx

@@ -1,70 +0,0 @@
-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/Carda.tsx

@@ -1,92 +0,0 @@
-import React, { ReactElement } from "react";
-import PropTypes from "prop-types";
-import { isEmpty, isNil } from "lodash";
-
-interface ICardProps {
-  orientation: string;
-  imageUrl: string;
-  hasDetails: boolean;
-  title?: PropTypes.ReactElementLike | null;
-  children?: PropTypes.ReactNodeLike;
-  borderColorClass?: string;
-  backgroundColor?: string;
-  onClick?: (event: React.MouseEvent<HTMLElement>) => void;
-  cardContainerStyle?: PropTypes.object;
-  imageStyle?: PropTypes.object;
-}
-
-const renderCard = (props): ReactElement => {
-  switch (props.orientation) {
-    case "horizontal":
-      return (
-        <div className="card-container">
-          <div className="card generic-card">
-            <div className="is-horizontal">
-              <div className="card-image">
-                <img
-                  style={props.imageStyle}
-                  src={props.imageUrl}
-                  alt="Placeholder image"
-                  className="cropped-image"
-                />
-              </div>
-              {props.hasDetails && (
-                <div className="card-content">{props.children}</div>
-              )}
-            </div>
-          </div>
-        </div>
-      );
-    case "vertical":
-      return (
-        <div onClick={props.onClick}>
-          <div className="generic-card" style={props.cardContainerStyle}>
-            <div
-              className={
-                !isNil(props.borderColorClass)
-                  ? `${props.borderColorClass}`
-                  : ""
-              }
-            >
-              <div
-                className={
-                  props.hasDetails
-                    ? "partial-rounded-card-image"
-                    : "rounded-card-image"
-                }
-              >
-                <figure>
-                  <img
-                    src={props.imageUrl}
-                    style={props.imageStyle}
-                    alt="Placeholder image"
-                  />
-                </figure>
-              </div>
-              {props.hasDetails && (
-                <div
-                  className="card-content"
-                  style={{ backgroundColor: props.backgroundColor }}
-                >
-                  {!isNil(props.title) ? (
-                    <div className="card-title is-size-8 is-family-secondary">
-                      {props.title}
-                    </div>
-                  ) : null}
-                  {props.children}
-                </div>
-              )}
-            </div>
-          </div>
-        </div>
-      );
-    default:
-      return <></>;
-  }
-};
-
-export const Card = (props: ICardProps): ReactElement => {
-  return renderCard(props);
-};
-
-export default Card;

src/client/components/ComicDetail/AcquisitionPanel.tsx

@@ -1,279 +1,519 @@
 import React, {
   useCallback,
-  useContext,
   ReactElement,
   useEffect,
+  useRef,
   useState,
 } from "react";
-import {
+import { SearchQuery, PriorityEnum, SearchResponse, SearchInstance } from "threetwo-ui-typings";
-  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 { AirDCPPSocketContext } from "../../context/AirDCPPSocket";
+import { useStore } from "../../store";
+import { useShallow } from "zustand/react/shallow";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import axios from "axios";
+import { AIRDCPP_SERVICE_BASE_URI, SETTINGS_SERVICE_BASE_URI } from "../../constants/endpoints";
+import type { Socket } from "socket.io-client";
 
 interface IAcquisitionPanelProps {
   query: any;
-  comicObjectId: any;
+  comicObjectId: string;
   comicObject: any;
   settings: any;
 }
 
+interface AirDCPPConfig {
+  protocol: string;
+  hostname: string;
+  username: string;
+  password: string;
+}
+
+interface SearchResult {
+  id: string;
+  name: string;
+  type: {
+    id: string;
+    str: string;
+  };
+  size: number;
+  slots: {
+    total: number;
+    free: number;
+  };
+  users: {
+    user: {
+      nicks: string;
+      flags: string[];
+    };
+  };
+  dupe?: any;
+}
+
+interface SearchInstanceData {
+  id: number;
+  owner: string;
+  expires_in: number;
+}
+
+interface SearchInfo {
+  query: {
+    pattern: string;
+    extensions: string[];
+    file_type: string;
+  };
+}
+
+interface Hub {
+  hub_url: string;
+  identity: {
+    name: string;
+  };
+  value: string;
+}
+
+interface SearchFormValues {
+  issueName: string;
+}
+
 export const AcquisitionPanel = (
   props: IAcquisitionPanelProps,
 ): ReactElement => {
+  const socketRef = useRef<Socket>();
+  const queryClient = useQueryClient();
+  const searchTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+
+  const [dcppQuery, setDcppQuery] = useState<SearchQuery | null>(null);
+  const [airDCPPSearchResults, setAirDCPPSearchResults] = useState<SearchResult[]>([]);
+  const [airDCPPSearchStatus, setAirDCPPSearchStatus] = useState(false);
+  const [isSearching, setIsSearching] = useState(false);
+  const [airDCPPSearchInstance, setAirDCPPSearchInstance] = useState<SearchInstanceData | null>(null);
+  const [airDCPPSearchInfo, setAirDCPPSearchInfo] = useState<SearchInfo | null>(null);
+  const [searchError, setSearchError] = useState<string | null>(null);
+
+  const { comicObjectId } = props;
   const issueName = props.query.issue.name || "";
-  // const { settings } = props;
   const sanitizedIssueName = issueName.replace(/[^a-zA-Z0-9 ]/g, " ");
 
-  // Selectors for picking state
+  // Search timeout duration in milliseconds (30 seconds)
-  const airDCPPSearchResults = useSelector((state: RootState) => {
+  const SEARCH_TIMEOUT_MS = 30000;
-    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({});
 
   useEffect(() => {
-    if (!isEmpty(airDCPPConfiguration.airDCPPState.settings)) {
+    const socket = useStore.getState().getSocket("manual");
-      // AirDC++ search query
+    socketRef.current = socket;
+
+    // --- Handlers ---
+    const handleResultAdded = ({ result }: { result: SearchResult }) => {
+      setAirDCPPSearchResults((prev) =>
+        prev.some((r) => r.id === result.id) ? prev : [...prev, result],
+      );
+    };
+
+    const handleResultUpdated = ({ result }: { result: SearchResult }) => {
+      setAirDCPPSearchResults((prev) => {
+        const idx = prev.findIndex((r) => r.id === result.id);
+        if (idx === -1) return prev;
+        if (JSON.stringify(prev[idx]) === JSON.stringify(result)) return prev;
+        const next = [...prev];
+        next[idx] = result;
+        return next;
+      });
+    };
+
+    const handleSearchInitiated = (data: { instance: SearchInstanceData }) => {
+      setAirDCPPSearchInstance(data.instance);
+      setIsSearching(true);
+      setSearchError(null);
+      
+      // Clear any existing timeout
+      if (searchTimeoutRef.current) {
+        clearTimeout(searchTimeoutRef.current);
+      }
+      
+      // Set a timeout to stop searching after SEARCH_TIMEOUT_MS
+      searchTimeoutRef.current = setTimeout(() => {
+        setIsSearching(false);
+        console.log(`Search timeout reached after ${SEARCH_TIMEOUT_MS / 1000} seconds`);
+      }, SEARCH_TIMEOUT_MS);
+    };
+
+    const handleSearchesSent = (data: { searchInfo: SearchInfo }) => {
+      setAirDCPPSearchInfo(data.searchInfo);
+    };
+
+    const handleSearchError = (error: { message: string }) => {
+      setSearchError(error.message || "Search failed");
+      setIsSearching(false);
+      
+      // Clear timeout on error
+      if (searchTimeoutRef.current) {
+        clearTimeout(searchTimeoutRef.current);
+        searchTimeoutRef.current = null;
+      }
+    };
+
+    const handleSearchCompleted = () => {
+      setIsSearching(false);
+      
+      // Clear timeout when search completes
+      if (searchTimeoutRef.current) {
+        clearTimeout(searchTimeoutRef.current);
+        searchTimeoutRef.current = null;
+      }
+    };
+
+    // --- Subscribe once ---
+    socket.on("searchResultAdded", handleResultAdded);
+    socket.on("searchResultUpdated", handleResultUpdated);
+    socket.on("searchInitiated", handleSearchInitiated);
+    socket.on("searchesSent", handleSearchesSent);
+    socket.on("searchError", handleSearchError);
+    socket.on("searchCompleted", handleSearchCompleted);
+
+    return () => {
+      socket.off("searchResultAdded", handleResultAdded);
+      socket.off("searchResultUpdated", handleResultUpdated);
+      socket.off("searchInitiated", handleSearchInitiated);
+      socket.off("searchesSent", handleSearchesSent);
+      socket.off("searchError", handleSearchError);
+      socket.off("searchCompleted", handleSearchCompleted);
+      
+      // Clean up timeout on unmount
+      if (searchTimeoutRef.current) {
+        clearTimeout(searchTimeoutRef.current);
+      }
+    };
+  }, [SEARCH_TIMEOUT_MS]);
+
+  const {
+    data: settings,
+    isLoading: isLoadingSettings,
+    isError: isSettingsError,
+  } = useQuery({
+    queryKey: ["settings"],
+    queryFn: async () =>
+      await axios({
+        url: `${SETTINGS_SERVICE_BASE_URI}/getAllSettings`,
+        method: "GET",
+      }),
+  });
+
+  const { data: hubs, isLoading: isLoadingHubs } = useQuery({
+    queryKey: ["hubs", settings?.data.directConnect?.client?.host],
+    queryFn: async () =>
+      await axios({
+        url: `${AIRDCPP_SERVICE_BASE_URI}/getHubs`,
+        method: "POST",
+        data: {
+          host: settings?.data.directConnect?.client?.host,
+        },
+      }),
+    enabled: !!settings?.data?.directConnect?.client?.host,
+  });
+
+  // Get AirDC++ config from settings
+  const airDCPPConfig: AirDCPPConfig | null = settings?.data?.directConnect?.client
+    ? {
+        protocol: settings.data.directConnect.client.protocol || "ws",
+        hostname: typeof settings.data.directConnect.client.host === 'string'
+          ? settings.data.directConnect.client.host
+          : `${settings.data.directConnect.client.host?.hostname || 'localhost'}:${settings.data.directConnect.client.host?.port || '5600'}`,
+        username: settings.data.directConnect.client.username || "admin",
+        password: settings.data.directConnect.client.password || "password",
+      }
+    : null;
+
+  useEffect(() => {
+    if (hubs?.data && Array.isArray(hubs.data) && hubs.data.length > 0) {
       const dcppSearchQuery = {
         query: {
           pattern: `${sanitizedIssueName.replace(/#/g, "")}`,
           extensions: ["cbz", "cbr", "cb7"],
         },
-        hub_urls: map(
+        hub_urls: map(hubs.data, (item) => item.value),
-          airDCPPConfiguration.airDCPPState.settings.directConnect.client.hubs,
-          (item) => item.value,
-        ),
         priority: 5,
       };
-      setDcppQuery(dcppSearchQuery);
+      setDcppQuery(dcppSearchQuery as any);
     }
-  }, [airDCPPConfiguration]);
+  }, [hubs, sanitizedIssueName]);
 
-  const getDCPPSearchResults = useCallback(
+  const search = async (searchData: any) => {
-    async (searchQuery) => {
+    if (!airDCPPConfig) {
-      const manualQuery = {
+      setSearchError("AirDC++ configuration not found in settings");
-        query: {
+      return;
-          pattern: `${searchQuery.issueName}`,
+    }
-          extensions: ["cbz", "cbr", "cb7"],
+
-        },
+    if (!socketRef.current) {
-        hub_urls: map(
+      setSearchError("Socket connection not available");
-          airDCPPConfiguration.airDCPPState.settings.directConnect.client.hubs,
+      return;
-          (item) => item.value,
+    }
-        ),
+
-        priority: 5,
+    setAirDCPPSearchResults([]);
-      };
+    setIsSearching(true);
-      dispatch(
+    setSearchError(null);
-        search(manualQuery, airDCPPConfiguration.airDCPPState.socket, {
+    
-          username: `${airDCPPConfiguration.airDCPPState.settings.directConnect.client.host.username}`,
+    socketRef.current.emit("call", "socket.search", {
-          password: `${airDCPPConfiguration.airDCPPState.settings.directConnect.client.host.password}`,
+      query: searchData,
-        }),
+      namespace: "/manual",
-      );
+      config: airDCPPConfig,
-    },
+    });
-    [dispatch, airDCPPConfiguration],
+  };
-  );
+
+  const download = async (
+    searchInstanceId: number,
+    resultId: string,
+    comicObjectId: string,
+    name: string,
+    size: number,
+    type: SearchResult["type"],
+    config: AirDCPPConfig,
+  ): Promise<void> => {
+    if (!socketRef.current) {
+      console.error("Socket connection not available");
+      return;
+    }
+
+    socketRef.current.emit(
+      "call",
+      "socket.download",
+      {
+        searchInstanceId,
+        resultId,
+        comicObjectId,
+        name,
+        size,
+        type,
+        config,
+      },
+      (data: any) => console.log("Download initiated:", data),
+    );
+  };
+
+  const getDCPPSearchResults = async (searchQuery: SearchFormValues) => {
+    if (!searchQuery.issueName || searchQuery.issueName.trim() === "") {
+      setSearchError("Please enter a search term");
+      return;
+    }
+
+    if (!hubs?.data || !Array.isArray(hubs.data) || hubs.data.length === 0) {
+      setSearchError("No hubs configured");
+      return;
+    }
+
+    const manualQuery = {
+      query: {
+        pattern: `${searchQuery.issueName.trim()}`,
+        extensions: ["cbz", "cbr", "cb7"],
+      },
+      hub_urls: [hubs.data[0].hub_url],
+      priority: 5,
+    };
+
+    search(manualQuery);
+  };
 
-  // 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="comic-detail columns">
+      <div className="mt-5 mb-3">
-        {!isEmpty(airDCPPConfiguration.airDCPPState.socket) ? (
+        {isLoadingSettings || isLoadingHubs ? (
+          <div className="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400">
+            <i className="icon-[solar--refresh-bold-duotone] h-5 w-5 animate-spin" />
+            Loading configuration...
+          </div>
+        ) : !isEmpty(hubs?.data) ? (
           <Form
             onSubmit={getDCPPSearchResults}
             initialValues={{
               issueName,
             }}
             render={({ handleSubmit, form, submitting, pristine, values }) => (
-              <form
+              <form onSubmit={handleSubmit}>
-                onSubmit={handleSubmit}
+                <Field name="issueName">
-                className="column is-three-quarters"
+                  {({ input, meta }) => {
-              >
+                    return (
-                <div className="box search">
+                      <div className="max-w-fit">
-                  <div className="columns">
+                        <div className="flex flex-row bg-slate-300 dark:bg-slate-400 rounded-l-lg">
-                    <Field name="issueName">
+                          <div className="w-10 pl-2 pt-1 text-gray-400 dark:text-gray-200">
-                      {({ input, meta }) => {
+                            <i className="icon-[solar--magnifer-bold-duotone] h-7 w-7" />
-                        return (
-                          <div className="column is-two-thirds">
-                            <input
-                              {...input}
-                              className="input main-search-bar is-medium"
-                              placeholder="Type an issue/volume name"
-                            />
-                            <span className="help is-clearfix is-light is-info">
-                              Use this to perform a manual search.
-                            </span>
                           </div>
-                        );
+                          <input
-                      }}
+                            {...input}
-                    </Field>
+                            className="dark:bg-slate-400 bg-slate-300 py-2 px-2 rounded-l-md border-gray-300 h-10 min-w-full dark:text-slate-800 sm:text-md sm:leading-5 focus:outline-none focus:shadow-outline-blue focus:border-blue-300"
+                            placeholder="Type an issue/volume name"
+                            disabled={isSearching}
+                          />
 
-                    <div className="column">
+                          <button
-                      <button
+                            className="sm:mt-0 min-w-fit rounded-r-lg border border-green-400 dark:border-green-200 bg-green-200 px-3 py-1 text-gray-500 hover:bg-transparent hover:text-green-600 focus:outline-none focus:ring active:text-indigo-500 disabled:opacity-50 disabled:cursor-not-allowed"
-                        type="submit"
+                            type="submit"
-                        className={
+                            disabled={isSearching}
-                          isAirDCPPSearchInProgress
+                          >
-                            ? "button is-loading is-warning"
+                            <div className="flex flex-row items-center">
-                            : "button"
+                              {isSearching ? (
-                        }
+                                <>
-                      >
+                                  <i className="icon-[solar--refresh-bold-duotone] h-5 w-5 animate-spin mr-2" />
-                        <span className="icon is-small">
+                                  Searching...
-                          <img src="/img/airdcpp_logo.svg" />
+                                </>
-                        </span>
+                              ) : (
-                        <span className="airdcpp-text">Search on AirDC++</span>
+                                <>
-                      </button>
+                                  Search DC++
-                    </div>
+                                  <div className="h-5 w-5 ml-2">
-                  </div>
+                                    <img
-                </div>
+                                      src="/src/client/assets/img/airdcpp_logo.svg"
+                                      className="h-5 w-5"
+                                    />
+                                  </div>
+                                </>
+                              )}
+                            </div>
+                          </button>
+                        </div>
+                      </div>
+                    );
+                  }}
+                </Field>
               </form>
             )}
           />
         ) : (
-          <div className="column is-three-fifths">
+          <article
-            <article className="message is-info">
+            role="alert"
-              <div className="message-body is-size-6 is-family-secondary">
+            className="mt-4 rounded-lg text-sm max-w-screen-md border-s-4 border-yellow-500 bg-yellow-50 p-4 dark:border-s-4 dark:border-yellow-600 dark:bg-yellow-300 dark:text-slate-600"
-                AirDC++ is not configured. Please configure it in{" "}
+          >
-                <code>Settings</code>.
+            No AirDC++ hub configured. Please configure it in{" "}
-              </div>
+            <code>Settings &gt; AirDC++ &gt; Hubs</code>.
-            </article>
+          </article>
-          </div>
         )}
       </div>
 
-      {/* AirDC++ search instance details */}
+      {/* Search Error Display */}
-      {!isNil(searchInfo) && !isNil(searchInstance) && (
+      {searchError && (
-        <div className="columns">
+        <article
-          <div className="column is-one-quarter is-size-7">
+          role="alert"
-            <div className="card">
+          className="mt-4 rounded-lg text-sm max-w-screen-md border-s-4 border-red-500 bg-red-50 p-4 dark:border-s-4 dark:border-red-600 dark:bg-red-300 dark:text-slate-600"
-              <div className="card-content">
+        >
-                <dl>
+          <strong>Error:</strong> {searchError}
-                  <dt>
+        </article>
-                    <div className="tags mb-1">
+      )}
-                      {airDCPPConfiguration.airDCPPState.settings.directConnect.client.hubs.map(
+      {/* configured hub */}
-                        ({ value }) => (
+      {!isEmpty(hubs?.data) && hubs?.data[0] && (
-                          <span className="tag is-warning" key={value}>
+        <span className="inline-flex items-center bg-green-50 text-slate-800 text-xs font-medium px-2.5 py-0.5 rounded-md dark:text-slate-900 dark:bg-green-300">
-                            {value}
+          <span className="pr-1 pt-1">
-                          </span>
+            <i className="icon-[solar--server-2-bold-duotone] w-5 h-5"></i>
-                        ),
+          </span>
-                      )}
+          {hubs.data[0].hub_url}
-                    </div>
+        </span>
-                  </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++ search instance details */}
+      {airDCPPSearchInstance &&
+        airDCPPSearchInfo &&
+        hubs?.data && (
+          <div className="flex flex-row gap-3 my-5 font-hasklig">
+            <div className="block max-w-sm h-fit p-6 text-sm bg-white border border-gray-200 rounded-lg shadow dark:bg-slate-400 dark:border-gray-700">
+              <dl>
+                <dt>
+                  <div className="mb-1">
+                    {hubs.data.map((value: Hub, idx: number) => (
+                      <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>
+            </div>
+          </div>
+        )}
+
       {/* AirDC++ results */}
-      <div className="columns">
+      <div className="">
-        {!isNil(airDCPPSearchResults) && !isEmpty(airDCPPSearchResults) ? (
+        {airDCPPSearchResults.length > 0 ? (
-          <div className="column">
+          <div className="overflow-x-auto max-w-full mt-6">
-            <table className="table">
+            <table className="w-full table-auto text-sm text-gray-900 dark:text-slate-100">
               <thead>
-                <tr>
+                <tr className="border-b border-gray-300 dark:border-slate-700">
-                  <th>Name</th>
+                  <th className="whitespace-nowrap px-3 py-2 text-left text-[11px] font-semibold tracking-wide text-gray-500 dark:text-slate-400 uppercase">
-                  <th>Type</th>
+                    Name
-                  <th>Slots</th>
+                  </th>
-                  <th>Actions</th>
+                  <th className="whitespace-nowrap px-3 py-2 text-left text-[11px] font-semibold tracking-wide text-gray-500 dark:text-slate-400 uppercase">
+                    Type
+                  </th>
+                  <th className="whitespace-nowrap px-3 py-2 text-left text-[11px] font-semibold tracking-wide text-gray-500 dark:text-slate-400 uppercase">
+                    Slots
+                  </th>
+                  <th className="whitespace-nowrap px-3 py-2 text-left text-[11px] font-semibold tracking-wide text-gray-500 dark:text-slate-400 uppercase">
+                    Actions
+                  </th>
                 </tr>
               </thead>
               <tbody>
-                {map(airDCPPSearchResults, ({ result }, idx) => {
+                {map(
-                  return (
+                  airDCPPSearchResults,
+                  ({ dupe, type, name, id, slots, users, size }, idx) => (
                     <tr
                       key={idx}
                       className={
-                        !isNil(result.dupe) ? "dupe-search-result" : ""
+                        !isNil(dupe)
+                          ? "border-b border-gray-200 dark:border-slate-700 bg-gray-100 dark:bg-gray-700"
+                          : "border-b border-gray-200 dark:border-slate-700 text-sm"
                       }
                     >
-                      <td>
+                      {/* NAME */}
+                      <td className="whitespace-nowrap px-3 py-3 text-gray-700 dark:text-slate-300 max-w-xs">
                         <p className="mb-2">
-                          {result.type.id === "directory" ? (
+                          {type.id === "directory" && (
-                            <i className="fas fa-folder"></i>
+                            <i className="fas fa-folder mr-1"></i>
-                          ) : null}{" "}
+                          )}
-                          {ellipsize(result.name, 70)}
+                          {ellipsize(name, 45)}
                         </p>
-
                         <dl>
                           <dd>
-                            <div className="tags">
+                            <div className="inline-flex flex-wrap gap-1">
-                              {!isNil(result.dupe) ? (
+                              {!isNil(dupe) && (
-                                <span className="tag is-warning">Dupe</span>
+                                <span className="inline-flex items-center gap-1 bg-slate-100 text-slate-800 text-xs font-medium py-0.5 px-2 rounded dark:bg-slate-400 dark:text-slate-900">
-                              ) : null}
+                                  <i className="icon-[solar--copy-bold-duotone] w-4 h-4"></i>
-                              <span className="tag is-light is-info">
+                                  Dupe
-                                {result.users.user.nicks}
+                                </span>
+                              )}
+                              <span className="inline-flex items-center gap-1 bg-slate-100 text-slate-800 text-xs font-medium py-0.5 px-2 rounded dark:bg-slate-400 dark:text-slate-900">
+                                <i className="icon-[solar--user-rounded-bold-duotone] w-4 h-4"></i>
+                                {users.user.nicks}
                               </span>
-                              {result.users.user.flags.map((flag, idx) => (
+                              {users.user.flags.map((flag: string, flagIdx: number) => (
-                                <span className="tag is-light" key={idx}>
+                                <span
+                                  key={flagIdx}
+                                  className="inline-flex items-center gap-1 bg-slate-100 text-slate-800 text-xs font-medium py-0.5 px-2 rounded dark:bg-slate-400 dark:text-slate-900"
+                                >
+                                  <i className="icon-[solar--tag-horizontal-bold-duotone] w-4 h-4"></i>
                                   {flag}
                                 </span>
                               ))}
@@ -281,54 +521,82 @@ export const AcquisitionPanel = (
                           </dd>
                         </dl>
                       </td>
-                      <td>
+
-                        <span className="tag is-light is-info">
+                      {/* TYPE */}
-                          {result.type.id === "directory"
+                      <td className="px-2 py-3">
-                            ? "directory"
+                        <span className="inline-flex items-center gap-1 bg-slate-100 text-slate-800 text-xs font-medium py-0.5 px-2 rounded dark:bg-slate-400 dark:text-slate-900">
-                            : result.type.str}
+                          <i className="icon-[solar--zip-file-bold-duotone] w-4 h-4"></i>
+                          {type.str}
                         </span>
                       </td>
-                      <td>
+
-                        <div className="tags has-addons">
+                      {/* SLOTS */}
-                          <span className="tag is-success">
+                      <td className="px-2 py-3">
-                            {result.slots.free} free
+                        <span className="inline-flex items-center gap-1 bg-slate-100 text-slate-800 text-xs font-medium py-0.5 px-2 rounded dark:bg-slate-400 dark:text-slate-900">
-                          </span>
+                          <i className="icon-[solar--settings-minimalistic-bold-duotone] w-4 h-4"></i>
-                          <span className="tag is-light">
+                          {slots.total} slots; {slots.free} free
-                            {result.slots.total}
+                        </span>
-                          </span>
-                        </div>
                       </td>
-                      <td>
+
-                        <a
+                      {/* ACTIONS */}
-                          onClick={() =>
+                      <td className="px-2 py-3">
-                            downloadDCPPResult(
+                        <button
-                              searchInstance.id,
+                          className="inline-flex items-center gap-1 rounded border border-green-500 bg-green-500 px-2 py-1 text-xs font-medium text-white hover:bg-transparent hover:text-green-400 dark:border-green-300 dark:bg-green-300 dark:text-slate-900 dark:hover:bg-transparent disabled:opacity-50 disabled:cursor-not-allowed"
-                              result.id,
+                          onClick={() => {
-                              result.name,
+                            if (airDCPPSearchInstance && airDCPPConfig) {
-                              result.size,
+                              download(
-                              result.type,
+                                airDCPPSearchInstance.id,
-                            )
+                                id,
-                          }
+                                comicObjectId,
+                                name,
+                                size,
+                                type,
+                                airDCPPConfig,
+                              );
+                            }
+                          }}
+                          disabled={!airDCPPSearchInstance || !airDCPPConfig}
                         >
-                          <i className="fas fa-file-download"></i>
+                          Download
-                        </a>
+                          <i className="icon-[solar--download-bold-duotone] w-4 h-4"></i>
+                        </button>
                       </td>
                     </tr>
-                  );
+                  ),
-                })}
+                )}
               </tbody>
             </table>
           </div>
-        ) : (
+        ) : !isSearching ? (
-          <div className="column is-three-fifths">
+          <div className="">
-            <article className="message is-info">
+            <article
-              <div className="message-body is-size-6 is-family-secondary">
+              role="alert"
-                Searching via <strong>AirDC++</strong> is still in{" "}
+              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"
-                <strong>alpha</strong>. Some searches may take arbitrarily long,
+            >
-                or may not work at all. Searches from <code>ADCS</code> hubs are
+              <div>
-                more reliable than <code>NMDCS</code> ones.
+                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>
+                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.
+              </div>
+            </article>
+          </div>
+        ) : (
+          <div className="flex items-center justify-center gap-2 text-sm text-gray-600 dark:text-gray-400 mt-6 p-4">
+            <i className="icon-[solar--refresh-bold-duotone] h-6 w-6 animate-spin" />
+            Searching...
           </div>
         )}
       </div>
@@ -336,4 +604,4 @@ export const AcquisitionPanel = (
   );
 };
 
-export default AcquisitionPanel;
+export default AcquisitionPanel;

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

@@ -1,87 +1,26 @@
-import { filter, isEmpty, isNil, isUndefined } from "lodash";
+import React, { ReactElement } from "react";
-import React, { ReactElement, useCallback } from "react";
+import Select from "react-select";
-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 => {
+export const Menu = (props: any): ReactElement => {
-  const { data } = props;
+  const {
-  const { setSlidingPanelContentId, setVisible } = props.handlers;
+    filteredActionOptions,
-  const dispatch = useDispatch();
+    customStyles,
-  const openDrawerWithCVMatches = useCallback(() => {
+    handleActionSelection,
-    let seriesSearchQuery: IComicVineSearchQuery = {} as IComicVineSearchQuery;
+    Placeholder,
-    let issueSearchQuery: IComicVineSearchQuery = {} as IComicVineSearchQuery;
+  } = props.configuration;
-
-    if (!isUndefined(data.rawFileDetails)) {
-      issueSearchQuery = refineQuery(data.rawFileDetails.name);
-    } else if (!isEmpty(data.sourcedMetadata)) {
-      issueSearchQuery = refineQuery(data.sourcedMetadata.comicvine.name);
-    }
-    dispatch(fetchComicVineMatches(data, issueSearchQuery, seriesSearchQuery));
-    setSlidingPanelContentId("CVMatches");
-    setVisible(true);
-  }, [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>
+        <span className="inline-flex flex-row items-center gap-1.5 pt-1">
-          <i className="fa-solid fa-list"></i> Actions
+          <div className="w-4 h-4">
+            <i className="icon-[solar--cursor-bold-duotone] w-4 h-4"></i>
+          </div>
+          <div className="text-sm">Select An Action</div>
         </span>
       }
+      styles={customStyles}
       name="actions"
       isSearchable={false}
       options={filteredActionOptions}

src/client/components/ComicDetail/AirDCPPBundles.tsx

@@ -0,0 +1,62 @@
+import React from "react";
+import prettyBytes from "pretty-bytes";
+import dayjs from "dayjs";
+import ellipsize from "ellipsize";
+import { map } from "lodash";
+import { DownloadProgressTick } from "./DownloadProgressTick";
+export const AirDCPPBundles = (props) => {
+  return (
+    <div className="overflow-x-auto w-fit mt-6">
+      <table className="min-w-full text-sm text-gray-900 dark:text-slate-100">
+        <thead>
+          <tr className="border-b border-gray-300 dark:border-slate-700">
+            <th className="px-3 py-2 text-left text-[11px] font-semibold tracking-wide text-gray-500 dark:text-slate-400 uppercase">
+              Filename
+            </th>
+            <th className="px-3 py-2 text-left text-[11px] font-semibold tracking-wide text-gray-500 dark:text-slate-400 uppercase">
+              Size
+            </th>
+            <th className="px-3 py-2 text-left text-[11px] font-semibold tracking-wide text-gray-500 dark:text-slate-400 uppercase">
+              Download Status
+            </th>
+            <th className="px-3 py-2 text-left text-[11px] font-semibold tracking-wide text-gray-500 dark:text-slate-400 uppercase">
+              Bundle ID
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          {map(props.data, (bundle, index) => (
+            <tr
+              key={bundle.id}
+              className={
+                Number(index) !== props.data.length - 1
+                  ? "border-b border-gray-200 dark:border-slate-700"
+                  : ""
+              }
+            >
+              <td className="px-3 py-2 align-top">
+                <h5 className="font-medium text-gray-800 dark:text-slate-200">
+                  {ellipsize(bundle.name, 58)}
+                </h5>
+                <p className="text-xs text-gray-500 dark:text-slate-400">
+                  {ellipsize(bundle.target, 88)}
+                </p>
+              </td>
+              <td className="px-3 py-2 align-top">
+                {prettyBytes(bundle.size)}
+              </td>
+              <td className="px-3 py-2 align-top">
+                <DownloadProgressTick bundleId={bundle.id} />
+              </td>
+              <td className="px-3 py-2 align-top">
+                <span className="text-xs text-yellow-800 dark:text-yellow-300 font-medium">
+                  {bundle.id}
+                </span>
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+};

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

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

src/client/components/ComicDetail/ComicDetail.tsx

@@ -1,11 +1,10 @@
 import React, { useState, ReactElement, useCallback } from "react";
-import { useDispatch, useSelector } from "react-redux";
 import { useParams } from "react-router-dom";
-import Card from "../Carda";
+import Card from "../shared/Carda";
 import { ComicVineMatchPanel } from "./ComicVineMatchPanel";
 
 import { RawFileDetails } from "./RawFileDetails";
-import { ComicVineSearchForm } from "../ComicVineSearchForm";
+import { ComicVineSearchForm } from "./ComicVineSearchForm";
 
 import TabControls from "./TabControls";
 import { EditMetadataPanel } from "./EditMetadataPanel";
@@ -13,11 +12,12 @@ 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 } from "lodash";
+import { isEmpty, isUndefined, isNil, filter } from "lodash";
-import { RootState } from "threetwo-ui-typings";
+import { components } from "react-select";
 
 import "react-sliding-pane/dist/react-sliding-pane.css";
 import "react-loader-spinner/dist/loader/css/react-spinner-loader.css";
@@ -28,8 +28,39 @@ 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 = {};
+interface ComicDetailProps {
+  data: {
+    _id: string;
+    rawFileDetails?: any;
+    inferredMetadata?: {
+      issue?: {
+        year?: string;
+        name?: string;
+        number?: number;
+        subtitle?: string;
+      };
+    };
+    sourcedMetadata: {
+      comicvine?: any;
+      locg?: any;
+      comicInfo?: any;
+    };
+    acquisition?: {
+      directconnect?: {
+        downloads?: any[];
+      };
+      torrent?: any[];
+    };
+    createdAt: string;
+    updatedAt: string;
+  };
+  userSettings?: any;
+}
 /**
  * Component for displaying the metadata for a comic in greater detail.
  *
@@ -47,6 +78,9 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => {
       rawFileDetails,
       inferredMetadata,
       sourcedMetadata: { comicvine, locg, comicInfo },
+      acquisition,
+      createdAt,
+      updatedAt,
     },
     userSettings,
   } = data;
@@ -54,38 +88,30 @@ 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) => {
+  const openModal = useCallback((filePath: string) => {
     setIsOpen(true);
-    dispatch(
+    // dispatch(
-      extractComicArchive(filePath, {
+    //   extractComicArchive(filePath, {
-        type: "full",
+    //     type: "full",
-        purpose: "reading",
+    //     purpose: "reading",
-        imageResizeOptions: {
+    //     imageResizeOptions: {
-          baseWidth: 1024,
+    //       baseWidth: 1024,
-        },
+    //     },
-      }),
+    //   }),
-    );
+    // );
   }, []);
 
-  const afterOpenModal = useCallback((things) => {
+  // overridden <SlidingPanel> with some styles
+  const StyledSlidingPanel = styled(SlidingPane)`
+    background: #ccc;
+  `;
+  const afterOpenModal = useCallback((things: any) => {
     // references are now sync'd and can be accessed.
     // subtitle.style.color = "#f00";
     console.log("kolaveri", things);
@@ -96,61 +122,187 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => {
   }, []);
 
   // sliding panel init
-  const contentForSlidingPanel = {
+  const contentForSlidingPanel: Record<string, { content: (props?: any) => JSX.Element }> = {
     CVMatches: {
-      content: (props) => (
+      content: (props?: any) => (
         <>
-          <div className="card search-criteria-card">
+          <div>
-            <div className="card-content">
+            <ComicVineSearchForm data={rawFileDetails} />
-              <ComicVineSearchForm data={rawFileDetails} />
-            </div>
           </div>
-          <p className="is-size-5 mt-3 mb-2 ml-3">Searching for:</p>
+
-          {inferredMetadata.issue ? (
+          <div className="border-slate-500 border rounded-lg p-2 mt-3">
-            <div className="ml-3">
+            <p className="">Searching for:</p>
-              <span className="tag mr-3">{inferredMetadata.issue.name} </span>
+            {inferredMetadata?.issue ? (
-              <span className="tag"> # {inferredMetadata.issue.number} </span>
+              <>
-            </div>
+                <span className="">{inferredMetadata.issue.name} </span>
-          ) : null}
+                <span className=""> # {inferredMetadata.issue.number} </span>
-          {!comicVineAPICallProgress ? (
+              </>
-            <ComicVineMatchPanel
+            ) : null}
-              props={{
+          </div>
-                comicVineSearchQueryObject,
+          <ComicVineMatchPanel
-                comicVineAPICallProgress,
+            props={{
-                comicVineSearchResults,
+              comicVineMatches,
-                comicObjectId,
+              comicObjectId,
-              }}
+            }}
-            />
+          />
-          ) : (
-            <div className="progress-indicator-container">
-              <div className="indicator">
-                <Loader
-                  type="MutatingDots"
-                  color="#CCC"
-                  secondaryColor="#999"
-                  height={100}
-                  width={100}
-                  visible={comicVineAPICallProgress}
-                />
-              </div>
-            </div>
-          )}
         </>
       ),
     },
 
     editComicBookMetadata: {
-      content: () => <EditMetadataPanel />,
+      content: () => <EditMetadataPanel data={rawFileDetails} />,
     },
   };
 
+  // Actions
+
+  const fetchComicVineMatches = async (
+    searchPayload: any,
+    issueSearchQuery: any,
+    seriesSearchQuery: any,
+  ) => {
+    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: string) => {
+          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: any) => match);
+      }
+      const scoredMatches = matches.sort((a: any, b: any) => b.score - a.score);
+      setComicVineMatches(scoredMatches);
+    } catch (err) {
+      console.log(err);
+    }
+  };
+
+  // Action event handlers
+  const openDrawerWithCVMatches = () => {
+    let seriesSearchQuery: any = {};
+    let issueSearchQuery: any = {};
+
+    if (!isUndefined(rawFileDetails)) {
+      issueSearchQuery = refineQuery((rawFileDetails as any).name);
+    } else if (!isEmpty(comicvine)) {
+      issueSearchQuery = refineQuery((comicvine as any).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-1.5">
+      <div className="w-4 h-4">
+        <i className="icon-[solar--magic-stick-3-bold-duotone] w-4 h-4"></i>
+      </div>
+      <div className="text-sm">Match on ComicVine</div>
+    </span>
+  );
+  const editLabel = (
+    <span className="inline-flex flex-row items-center gap-1.5">
+      <div className="w-4 h-4">
+        <i className="icon-[solar--pen-2-bold-duotone] w-4 h-4"></i>
+      </div>
+      <div className="text-sm">Edit Metadata</div>
+    </span>
+  );
+  const deleteLabel = (
+    <span className="inline-flex flex-row items-center gap-1.5">
+      <div className="w-4 h-4">
+        <i className="icon-[solar--trash-bin-trash-bold-duotone] w-4 h-4"></i>
+      </div>
+      <div className="text-sm">Delete Comic</div>
+    </span>
+  );
+  const Placeholder = (props: any) => {
+    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: any) => {
+    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: any) => ({
+      ...base,
+      backgroundColor: "rgb(156, 163, 175)",
+    }),
+    placeholder: (base: any) => ({
+      ...base,
+      color: "black",
+    }),
+    option: (base: any, { data, isDisabled, isFocused, isSelected }: any) => ({
+      ...base,
+      backgroundColor: isFocused ? "gray" : "rgb(156, 163, 175)",
+    }),
+    singleValue: (base: any) => ({
+      ...base,
+      paddingTop: "0.4rem",
+    }),
+    control: (base: any) => ({
+      ...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);
+    !isUndefined(comicvine) && !isUndefined((comicvine as any)?.volumeInformation);
 
   // check for the availability of rawFileDetails
   const areRawFileDetailsAvailable =
-    !isUndefined(rawFileDetails) && !isEmpty(rawFileDetails.cover);
+    !isUndefined(rawFileDetails) && !isEmpty(rawFileDetails);
 
   const { issueName, url } = determineCoverFile({
     rawFileDetails,
@@ -170,7 +322,9 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => {
     {
       id: 1,
       name: "Volume Information",
-      icon: <i className="fa-solid fa-layer-group"></i>,
+      icon: (
+        <i className="h-5 w-5 icon-[solar--book-2-bold] text-slate-500 dark:text-slate-300"></i>
+      ),
       content: isComicBookMetadataAvailable ? (
         <VolumeInformation data={data.data} key={1} />
       ) : null,
@@ -179,33 +333,37 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => {
     {
       id: 2,
       name: "ComicInfo.xml",
-      icon: <i className="fa-solid fa-code"></i>,
+      icon: (
+        <i className="h-5 w-5 icon-[solar--code-file-bold-duotone] text-slate-500 dark:text-slate-300" />
+      ),
       content: (
-        <div className="columns" key={2}>
+        <div key={2}>
-          <div className="column is-three-quarters">
+          {!isNil(comicInfo) && <ComicInfoXML json={comicInfo} />}
-            {!isNil(comicInfo) && <ComicInfoXML json={comicInfo} />}
-          </div>
         </div>
       ),
       shouldShow: !isEmpty(comicInfo),
     },
     {
       id: 3,
-      icon: <i className="fa-regular fa-file-archive"></i>,
+      icon: (
+        <i className="h-5 w-5 icon-[solar--winrar-bold-duotone] text-slate-500 dark:text-slate-300" />
+      ),
       name: "Archive Operations",
       content: <ArchiveOperations data={data.data} key={3} />,
       shouldShow: areRawFileDetailsAvailable,
     },
     {
       id: 4,
-      icon: <i className="fa-solid fa-floppy-disk"></i>,
+      icon: (
-      name: "Acquisition",
+        <i className="h-5 w-5 icon-[solar--folder-path-connect-bold-duotone] text-slate-500 dark:text-slate-300" />
+      ),
+      name: "DC++ Search",
       content: (
         <AcquisitionPanel
           query={airDCPPQuery}
           comicObjectId={_id}
           comicObject={data.data}
-          userSettings={userSettings}
+          settings={userSettings}
           key={4}
         />
       ),
@@ -213,19 +371,37 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => {
     },
     {
       id: 5,
-      icon: null,
+      icon: (
-      name: !isEmpty(data.data) ? (
+        <span className="inline-flex flex-row">
-        <span className="download-tab-name">Downloads</span>
+          <i className="h-5 w-5 icon-[solar--magnet-bold-duotone] text-slate-500 dark:text-slate-300" />
-      ) : (
+        </span>
-        "Downloads"
       ),
-      content: !isNil(data.data) && !isEmpty(data.data) && (
+      name: "Torrent Search",
-        <DownloadsPanel
+      content: <TorrentSearchPanel comicObjectId={_id} issueName={issueName} />,
-          data={data.data.acquisition.directconnect}
+      shouldShow: true,
-          comicObjectId={comicObjectId}
+    },
-          key={5}
+    {
-        />
+      id: 6,
+      name: "Downloads",
+      icon: (
+        <>
+          {(acquisition?.directconnect?.downloads?.length || 0) +
+            (acquisition?.torrent?.length || 0)}
+        </>
       ),
+      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,
     },
   ];
@@ -237,71 +413,75 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => {
   // 2. from the CV-scraped version
 
   return (
-    <section className="container">
+    <section className="container mx-auto">
       <div className="section">
         {!isNil(data) && !isEmpty(data) && (
           <>
-            <h1 className="title">{issueName}</h1>
+            <div>
-            <div className="columns is-multiline">
+              <div className="flex flex-row mt-5">
-              <div className="column is-narrow">
                 <Card
                   imageUrl={url}
-                  orientation={"vertical"}
+                  orientation={"cover-only"}
                   hasDetails={false}
-                  cardContainerStyle={{ maxWidth: 275 }}
+                  cardContainerStyle={{ maxWidth: "290px", width: "100%" }}
                 />
-                {/* action dropdown */}
+
-                <div className="mt-4 is-size-7">
+                {/* raw file details */}
-                  <Menu
-                    data={data.data}
-                    handlers={{ setSlidingPanelContentId, setVisible }}
-                  />
-                </div>
-              </div>
-              {/* raw file details */}
-              <div className="column">
                 {!isUndefined(rawFileDetails) &&
-                  !isEmpty(rawFileDetails.cover) && (
+                  !isEmpty((rawFileDetails as any)?.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)}
                       >
-                        <i className="fa-solid fa-book-open mr-2"></i>
+                        {/* action dropdown */}
-                        Read
+                        <div className="mt-1 flex flex-row gap-2 w-full">
-                      </button>
+                          <Menu
-
+                            data={data.data}
-                      <Modal
+                            handlers={{ setSlidingPanelContentId, setVisible }}
-                        style={{ content: { marginTop: "2rem" } }}
+                            configuration={{
-                        isOpen={modalIsOpen}
+                              filteredActionOptions,
-                        onAfterOpen={afterOpenModal}
+                              customStyles,
-                        onRequestClose={closeModal}
+                              handleActionSelection,
-                        contentLabel="Example Modal"
+                              Placeholder,
-                      >
+                            }}
-                        <button onClick={closeModal}>close</button>
-                        {extractedComicBook && (
-                          <ComicViewer
-                            pages={extractedComicBook}
-                            direction="ltr"
-                            className={{closeButton: "border: 1px solid red;"}}
                           />
-                        )}
+                        </div>
-                      </Modal>
+                      </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>
                   )}
               </div>
             </div>
 
-            {<TabControls filteredTabs={filteredTabs} />}
+            <TabControls
+              filteredTabs={filteredTabs}
+              downloadCount={acquisition?.directconnect?.downloads?.length || 0}
+            />
 
-            <SlidingPane
+            <StyledSlidingPanel
               isOpen={visible}
               onRequestClose={() => setVisible(false)}
               title={"Comic Vine Search Matches"}
@@ -309,7 +489,7 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => {
             >
               {slidingPanelContentId !== "" &&
                 contentForSlidingPanel[slidingPanelContentId].content()}
-            </SlidingPane>
+            </StyledSlidingPanel>
           </>
         )}
       </div>
@@ -317,4 +497,4 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => {
   );
 };
 
-export default ComicDetail;
+export default ComicDetail;

src/client/components/ComicDetail/ComicDetailContainer.tsx

@@ -1,22 +1,35 @@
-import { isEmpty, isNil, isUndefined } from "lodash";
+import React, { ReactElement } from "react";
-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 comicBookDetailData = useSelector(
-    (state: RootState) => state.comicInfo.comicBookDetail,
-  );
-  const dispatch = useDispatch();
-
   const { comicObjectId } = useParams<{ comicObjectId: string }>();
-  useEffect(() => {
+  const {
-    dispatch(getComicBookDetailById(comicObjectId));
+    data: comicBookDetailData,
-    // dispatch(getSettings());
+    isLoading,
-  }, [dispatch]);
+    isError,
-  return !isEmpty(comicBookDetailData) ? (
+  } = useQuery({
-    <ComicDetail data={comicBookDetailData} />
+    queryKey: ["comicBookMetadata"],
-  ) : null;
+    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} />
+  );
 };

src/client/components/ComicDetail/ComicVineDetails.tsx

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

src/client/components/ComicDetail/ComicVineMatchPanel.tsx

@@ -1,23 +1,42 @@
 import React, { ReactElement } from "react";
 import { ComicVineSearchForm } from "../ComicVineSearchForm";
-import MatchResult from "../MatchResult";
+import MatchResult from "./MatchResult";
 import { isEmpty } from "lodash";
+import { useStore } from "../../store";
+import { useShallow } from "zustand/react/shallow";
 
 export const ComicVineMatchPanel = (comicVineData): ReactElement => {
-  const {
+  const { comicObjectId, comicVineMatches } = comicVineData.props;
-    comicObjectId,
+  const { comicvine } = useStore(
-    comicVineSearchQueryObject,
+    useShallow((state) => ({
-    comicVineAPICallProgress,
+      comicvine: state.comicvine,
-    comicVineSearchResults,
+    })),
-  } = comicVineData.props;
+  );
   return (
     <>
-      <div className="search-results-container">
+      <div>
-        {!isEmpty(comicVineSearchResults) && (
+        {!isEmpty(comicVineMatches) ? (
           <MatchResult
-            matchData={comicVineSearchResults}
+            matchData={comicVineMatches}
             comicObjectId={comicObjectId}
           />
+        ) : (
+          <>
+            <article
+              role="alert"
+              className="mt-4 rounded-lg max-w-screen-md border-s-4 border-yellow-500 bg-yellow-50 p-4 dark:border-s-4 dark:border-yellow-600 dark:bg-yellow-300 dark:text-slate-600 text-sm"
+            >
+              <div>
+                <p>ComicVine match results are an approximation.</p>
+                <p>
+                  Auto-matching is not available yet. If you see no results or
+                  poor quality ones, you can override the search query
+                  parameters to get better ones.
+                </p>
+              </div>
+            </article>
+            <div className="text-md my-5">{comicvine.scrapingStatus}</div>
+          </>
         )}
       </div>
     </>

src/client/components/ComicDetail/ComicVineSearchForm.tsx

@@ -0,0 +1,96 @@
+import React, { useCallback } from "react";
+import { Form, Field } from "react-final-form";
+import Collapsible from "react-collapsible";
+import { fetchComicVineMatches } from "../../actions/fileops.actions";
+
+/**
+ * Component for performing search against ComicVine
+ *
+ * @component
+ * @example
+ * return (
+ *   <ComicVineSearchForm data={rawFileDetails} />
+ * )
+ */
+export const ComicVineSearchForm = (data) => {
+  const onSubmit = useCallback((value) => {
+    const userInititatedQuery = {
+      inferredIssueDetails: {
+        name: value.issueName,
+        number: value.issueNumber,
+        subtitle: "",
+        year: value.issueYear,
+      },
+    };
+    // dispatch(fetchComicVineMatches(data, userInititatedQuery));
+  }, []);
+  const validate = () => {
+    return true;
+  };
+
+  const MyForm = () => (
+    <Form
+      onSubmit={onSubmit}
+      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>
+          <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>
+
+            <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>
+          </div>
+        </form>
+      )}
+    />
+  );
+
+  return <MyForm />;
+};
+
+export default ComicVineSearchForm;

src/client/components/ComicDetail/DownloadProgressTick.tsx

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

src/client/components/ComicDetail/DownloadsPanel.tsx

@@ -1,108 +1,154 @@
-import React, { useEffect, useContext, ReactElement } from "react";
+import React, { useEffect, ReactElement, useState, useMemo } from "react";
+import { isEmpty, isNil, isUndefined, map } from "lodash";
+import { AirDCPPBundles } from "./AirDCPPBundles";
+import { TorrentDownloads } from "./TorrentDownloads";
+import { useQuery } from "@tanstack/react-query";
+import axios from "axios";
 import {
-  getBundlesForComic,
+  LIBRARY_SERVICE_BASE_URI,
-} from "../../actions/airdcpp.actions";
+  QBITTORRENT_SERVICE_BASE_URI,
-import { useDispatch, useSelector } from "react-redux";
+  TORRENT_JOB_SERVICE_BASE_URI,
-import { RootState } from "threetwo-ui-typings";
+} from "../../constants/endpoints";
-import { isEmpty, isNil, map } from "lodash";
+import { useStore } from "../../store";
-import prettyBytes from "pretty-bytes";
+import { useShallow } from "zustand/react/shallow";
-import dayjs from "dayjs";
+import { useParams } from "react-router-dom";
-import ellipsize from "ellipsize";
-import { AirDCPPSocketContext } from "../../context/AirDCPPSocket";
 
-interface IDownloadsPanelProps {
+export interface TorrentDetails {
-  data: any;
+  infoHash: string;
-  comicObjectId: string;
+  progress: number;
+  downloadSpeed?: number;
+  uploadSpeed?: number;
 }
 
-export const DownloadsPanel = (
+/**
-  props: IDownloadsPanelProps,
+ * DownloadsPanel displays two tabs of download information for a specific comic:
-): ReactElement | null => {
+ * - DC++ (AirDCPP) bundles
-  const bundles = useSelector((state: RootState) => {
+ * - Torrent downloads
-    return state.airdcpp.bundles;
+ * It also listens for real-time torrent updates via a WebSocket.
+ *
+ * @component
+ * @returns {ReactElement | null} The rendered DownloadsPanel or null if no socket is available.
+ */
+export const DownloadsPanel = (): ReactElement | null => {
+  const { comicObjectId } = useParams<{ comicObjectId: string }>();
+  const [infoHashes, setInfoHashes] = useState<string[]>([]);
+  const [torrentDetails, setTorrentDetails] = useState<TorrentDetails[]>([]);
+  const [activeTab, setActiveTab] = useState<"directconnect" | "torrents">(
+    "directconnect",
+  );
+
+  const { socketIOInstance } = useStore(
+    useShallow((state: any) => ({ socketIOInstance: state.socketIOInstance })),
+  );
+
+  /**
+   * Registers socket listeners on mount and cleans up on unmount.
+   */
+  useEffect(() => {
+    if (!socketIOInstance) return;
+
+    /**
+     * Handler for incoming torrent data events.
+     * Merges new entries or updates existing ones by infoHash.
+     *
+     * @param {TorrentDetails} data - Payload from the socket event.
+     */
+    const handleTorrentData = (data: TorrentDetails) => {
+      setTorrentDetails((prev) => {
+        const idx = prev.findIndex((t) => t.infoHash === data.infoHash);
+        if (idx === -1) {
+          return [...prev, data];
+        }
+        const next = [...prev];
+        next[idx] = { ...next[idx], ...data };
+        return next;
+      });
+    };
+
+    socketIOInstance.on("AS_TORRENT_DATA", handleTorrentData);
+
+    return () => {
+      socketIOInstance.off("AS_TORRENT_DATA", handleTorrentData);
+    };
+  }, [socketIOInstance]);
+
+  // ————— DC++ Bundles (via REST) —————
+  const { data: bundles } = useQuery({
+    queryKey: ["bundles", comicObjectId],
+    queryFn: async () =>
+      await axios({
+        url: `${LIBRARY_SERVICE_BASE_URI}/getBundles`,
+        method: "POST",
+        data: {
+          comicObjectId,
+          config: {
+            protocol: `ws`,
+            hostname: `192.168.1.119:5600`,
+            username: `admin`,
+            password: `password`,
+          },
+        },
+      }),
   });
 
-  // AirDCPP Socket initialization
+  // ————— Torrent Jobs (via REST) —————
-  const userSettings = useSelector((state: RootState) => state.settings.data);
+  const { data: rawJobs = [] } = useQuery<any[]>({
-  const airDCPPConfiguration = useContext(AirDCPPSocketContext);
+    queryKey: ["torrents", comicObjectId],
+    queryFn: async () => {
+      const { data } = await axios.get(
+        `${TORRENT_JOB_SERVICE_BASE_URI}/getTorrentData`,
+        { params: { trigger: activeTab } },
+      );
+      return Array.isArray(data) ? data : [];
+    },
+    initialData: [],
+    enabled: activeTab === "torrents",
+  });
 
-  const {
+  // Only when rawJobs changes *and* activeTab === "torrents" should we update infoHashes:
-    airDCPPState: { socket, settings },
-  } = airDCPPConfiguration;
-
-  const dispatch = useDispatch();
-  // Fetch the downloaded files and currently-downloading file(s) from AirDC++
   useEffect(() => {
-    try {
+    if (activeTab !== "torrents") return;
-      if (!isEmpty(userSettings)) {
+    setInfoHashes(rawJobs.map((j: any) => j.infoHash));
-        dispatch(
+  }, [activeTab]);
-          getBundlesForComic(props.comicObjectId, socket, {
-            username: `${settings.directConnect.client.host.username}`,
-            password: `${settings.directConnect.client.host.password}`,
-          }),
-        );
-      }
-    } catch (error) {
-      throw new Error(error);
-    }
-  }, [dispatch, airDCPPConfiguration]);
 
-  const Bundles = (props) => {
+  return (
-    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>
-    );
-  };
-
-  return !isNil(props.data) ? (
     <>
-      <div className="columns is-multiline">
+      <div className="mt-5 mb-3">
-        {!isEmpty(socket) ? (
+        <nav className="flex space-x-2">
-          <Bundles data={bundles} />
+          <button
-        ) : (
+            onClick={() => setActiveTab("directconnect")}
-          <div className="column is-three-fifths">
+            className={`px-4 py-1 rounded-full text-sm font-medium transition-colors ${
-            <article className="message is-info">
+              activeTab === "directconnect"
-              <div className="message-body is-size-6 is-family-secondary">
+                ? "bg-green-500 text-white"
-                AirDC++ is not configured. Please configure it in{" "}
+                : "bg-gray-200 text-gray-700 hover:bg-gray-300"
-                <code>Settings</code>.
+            }`}
-              </div>
+          >
-            </article>
+            DC++
-          </div>
+          </button>
-        )}
+          <button
+            onClick={() => setActiveTab("torrents")}
+            className={`px-4 py-1 rounded-full text-sm font-medium transition-colors ${
+              activeTab === "torrents"
+                ? "bg-blue-500 text-white"
+                : "bg-gray-200 text-gray-700 hover:bg-gray-300"
+            }`}
+          >
+            Torrents
+          </button>
+        </nav>
+
+        <div className="mt-4">
+          {activeTab === "torrents" ? (
+            <TorrentDownloads data={torrentDetails} />
+          ) : !isNil(bundles?.data) && bundles.data.length > 0 ? (
+            <AirDCPPBundles data={bundles.data} />
+          ) : (
+            <p>No DC++ bundles found.</p>
+          )}
+        </div>
       </div>
     </>
-  ) : null;
+  );
 };
 
 export default DownloadsPanel;

src/client/components/ComicDetail/EditMetadataPanel.tsx

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

src/client/components/ComicDetail/MatchResult.tsx

@@ -0,0 +1,137 @@
+import React from "react";
+import { isNil, map } from "lodash";
+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;
+  comicObjectId: string;
+}
+
+const handleBrokenImage = (e) => {
+  e.target.src = "http://localhost:3050/dist/img/noimage.svg";
+};
+
+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,
+      },
+    });
+  };
+  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)) {
+          issueDescription = convert(match.description, {
+            baseElements: {
+              selectors: ["p"],
+            },
+          });
+        }
+        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">
+                <img
+                  className="rounded-md"
+                  src={match.image.thumb_url}
+                  onError={handleBrokenImage}
+                />
+              </div>
+              <div>
+                <div className="flex flex-row mb-1 justify-end">
+                  {match.name ? (
+                    <p className="text-md w-full">{match.name}</p>
+                  ) : null}
+
+                  {/* 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>
+                <span className="flex flex-row gap-2 mb-2">
+                  <span className="inline-flex items-center bg-slate-50 text-sm text-slate-800 font-medium px-2 rounded-md dark:text-slate-900 dark:bg-slate-400">
+                    <span className="pr-1 pt-1">
+                      <i className="icon-[solar--hashtag-outline] w-4 h-4"></i>
+                    </span>
+                    <span className="text-slate-900 dark:text-slate-900">
+                      {parseInt(match.issue_number, 10)}
+                    </span>
+                  </span>
+                  <span className="inline-flex items-center bg-slate-50 text-slate-800 text-sm font-medium px-2 rounded-md dark:text-slate-900 dark:bg-slate-400">
+                    <span className="pr-1 pt-1">
+                      <i className="icon-[solar--calendar-mark-bold-duotone] w-5 h-5"></i>
+                    </span>
+                    <span className="text-slate-900 dark:text-slate-900">
+                      Cover Date: {match.cover_date}
+                    </span>
+                  </span>
+                </span>
+                <div className="text-sm">
+                  {ellipsize(issueDescription, 300)}
+                </div>
+              </div>
+            </div>
+
+            <div className="flex flex-row gap-2 my-4 ml-10">
+              <div className="">
+                <img
+                  src={match.volumeInformation.results.image.icon_url}
+                  className="rounded-md w-full"
+                  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>
+              </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>
+          </div>
+        );
+      })}
+    </>
+  );
+};
+
+export default MatchResult;

src/client/components/ComicDetail/RawFileDetails.tsx

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

src/client/components/ComicDetail/TabControls.tsx

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

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

@@ -1,59 +1,164 @@
-import React, { ReactElement, useCallback, useState } from "react";
+import React, { ReactElement, useCallback, useEffect, useState } from "react";
-import { useSelector, useDispatch } from "react-redux";
+import { DnD } from "../../shared/Draggable/DnD";
-import { DnD } from "../../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 => {
+interface ArchiveOperationsProps {
+  data: any;
+}
+
+export const ArchiveOperations = (props: ArchiveOperationsProps): ReactElement => {
   const { data } = props;
-  const isComicBookExtractionInProgress = useSelector(
+
-    (state: RootState) => state.fileOps.comicBookExtractionInProgress,
+  const { getSocket } = useStore(
+    useShallow((state) => ({
+      getSocket: state.getSocket,
+    })),
   );
-  const extractedComicBookArchive = useSelector(
+  const queryClient = useQueryClient();
-    (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 [currentImage, setCurrentImage] = useState<string>("");
+  const [uncompressedArchive, setUncompressedArchive] = useState<string[]>([]);
+  const [imageAnalysisResult, setImageAnalysisResult] = useState<any>({});
+  const [shouldRefetchComicBookData, setShouldRefetchComicBookData] =
+    useState(false);
+  const constructImagePaths = (data: string[]): Array<string> => {
+    return data?.map((path: string) =>
+      escapePoundSymbol(encodeURI(`${LIBRARY_SERVICE_HOST}/${path}`)),
+    );
+  };
+
+  // Listen to the uncompression complete event and orchestrate the final payload
+  useEffect(() => {
+    const socket = getSocket("/");
+    
+    const handleUncompressionComplete = (data: any) => {
+      setUncompressedArchive(constructImagePaths(data?.uncompressedArchive));
+    };
+
+    socket.on("LS_UNCOMPRESSION_JOB_COMPLETE", handleUncompressionComplete);
+
+    // Cleanup listener on unmount
+    return () => {
+      socket.off("LS_UNCOMPRESSION_JOB_COMPLETE", handleUncompressionComplete);
+    };
+  }, [getSocket]);
+
+  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: any) => {
+                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 = {
+  const contentForSlidingPanel: Record<string, { content: () => JSX.Element }> = {
     imageAnalysis: {
       content: () => {
         return (
           <div>
-            <pre className="is-size-7">{currentImage}</pre>
+            <pre className="text-sm">{currentImage}</pre>
             {!isEmpty(imageAnalysisResult) ? (
-              <pre className="is-size-7 p-2 mt-3">
+              <pre className="p-2 mt-3">
                 <Canvas data={imageAnalysisResult} />
               </pre>
             ) : null}
-            <pre className="is-size-7 mt-3">
+            <pre className="font-hasklig mt-3 text-sm">
-              {JSON.stringify(imageAnalysisResult.analyzedData, null, 2)}
+              {JSON.stringify(imageAnalysisResult?.analyzedData, null, 2)}
             </pre>
           </div>
         );
@@ -62,56 +167,83 @@ export const ArchiveOperations = (props): ReactElement => {
   };
 
   // sliding panel handlers
-  const openImageAnalysisPanel = useCallback((imageFilePath) => {
+  const openImageAnalysisPanel = useCallback((imageFilePath: string) => {
     setSlidingPanelContentId("imageAnalysis");
-    dispatch(analyzeImage(imageFilePath));
+    analyzeImage(imageFilePath);
     setCurrentImage(imageFilePath);
     setVisible(true);
   }, []);
 
   return (
     <div key={2}>
-      <button
+      <article
-        className={
+        role="alert"
-          isComicBookExtractionInProgress
+        className="mt-4 text-md rounded-lg max-w-screen-md border-s-4 border-blue-500 bg-blue-50 p-4 dark:border-s-4 dark:border-blue-600 dark:bg-blue-300 dark:text-slate-600"
-            ? "button is-loading is-warning"
-            : "button is-warning"
-        }
-        onClick={unpackComicArchive}
       >
-        <span className="icon is-small">
+        <div>
-          <i className="fa-solid fa-box-open"></i>
+          <p>You can perform several operations on your comic book archive.</p>
-        </span>
+          <p>
-        <span>Unpack comic archive</span>
+            Uncompressing, re-organizing the individual pages, then
-      </button>
+            re-compressing to a different format, for example.
-      <div className="columns">
+          </p>
-        <div className="mt-5">
+          <p>You can also analyze color histograms of pages.</p>
-          {!isEmpty(extractedComicBookArchive) ? (
+        </div>
+      </article>
+      <div className="mt-5">
+        {data.rawFileDetails.archive?.uncompressed &&
+        !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) ? (
             <DnD
-              data={extractedComicBookArchive}
+              data={uncompressedArchive}
               onClickHandler={openImageAnalysisPanel}
             />
           ) : null}
         </div>
-        {!isEmpty(extractedComicBookArchive) ? (
-          <div className="column mt-5">
-            <Sticky enabled={true} top={70} bottomBoundary={3000}>
-              <div className="card">
-                <div className="card-content">
-                  <span className="has-text-size-4">
-                    {extractedComicBookArchive.length} pages
-                  </span>
-                  <button className="button is-small is-light is-primary is-outlined">
-                    <span className="icon is-small">
-                      <i className="fa-solid fa-compress"></i>
-                    </span>
-                    <span>Convert to CBZ</span>
-                  </button>
-                </div>
-              </div>
-            </Sticky>
-          </div>
-        ) : null}
       </div>
       <SlidingPane
         isOpen={visible}
@@ -126,4 +258,4 @@ export const ArchiveOperations = (props): ReactElement => {
   );
 };
 
-export default ArchiveOperations;
+export default ArchiveOperations;

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

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

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

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

src/client/components/ComicDetail/TorrentDownloads.tsx

@@ -0,0 +1,77 @@
+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

@@ -0,0 +1,202 @@
+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: "38c2656e8f5d4790962037b8c4416a8f",
+            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/ComicVineSearchForm.tsx

@@ -1,126 +0,0 @@
-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
- *
- * @component
- * @example
- * return (
- *   <ComicVineSearchForm data={rawFileDetails} />
- * )
- */
-export const ComicVineSearchForm = (data) => {
-  const dispatch = useDispatch();
-  const onSubmit = useCallback((value) => {
-    const userInititatedQuery = {
-      inferredIssueDetails: {
-        name: value.issueName,
-        number: value.issueNumber,
-        subtitle: "",
-        year: value.issueYear,
-      },
-    };
-    dispatch(fetchComicVineMatches(data, userInititatedQuery));
-  }, []);
-  const validate = () => {
-    return true;
-  };
-
-  const MyForm = () => (
-    <Form
-      onSubmit={onSubmit}
-      validate={validate}
-      render={({ handleSubmit }) => (
-        <form onSubmit={handleSubmit}>
-          <span className="field is-normal">
-            <label className="label mb-2 is-size-5">Search Manually</label>
-          </span>
-          <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="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>
-      )}
-    />
-  );
-
-  return <MyForm />;
-};
-
-export default ComicVineSearchForm;

src/client/components/Dashboard/Dashboard.tsx

@@ -1,97 +1,83 @@
-import React, { ReactElement, useEffect } from "react";
+import React, { ReactElement } from "react";
-import { useDispatch, useSelector } from "react-redux";
 import ZeroState from "./ZeroState";
 import { RecentlyImported } from "./RecentlyImported";
 import { WantedComicsList } from "./WantedComicsList";
 import { VolumeGroups } from "./VolumeGroups";
 import { LibraryStatistics } from "./LibraryStatistics";
 import { PullList } from "./PullList";
-import {
+import { useQuery } from "@tanstack/react-query";
-  fetchVolumeGroups,
+import axios from "axios";
-  getComicBooks,
+import { LIBRARY_SERVICE_BASE_URI } from "../../constants/endpoints";
-} from "../../actions/fileops.actions";
-import { getLibraryStatistics } from "../../actions/comicinfo.actions";
-import { isEmpty, isNil } from "lodash";
 
 export const Dashboard = (): ReactElement => {
-  const dispatch = useDispatch();
+  const { data: recentComics } = useQuery({
-  useEffect(() => {
+    queryFn: async () =>
-    dispatch(fetchVolumeGroups());
+      await axios({
-    dispatch(
+        url: `${LIBRARY_SERVICE_BASE_URI}/getComicBooks`,
-      getComicBooks({
+        method: "POST",
-        paginationOptions: {
+        data: {
-          page: 0,
+          paginationOptions: {
-          limit: 5,
+            page: 0,
-          sort: { updatedAt: "-1" },
+            limit: 5,
+            sort: { updatedAt: "-1" },
+          },
+          predicate: {
+            wanted: { $exists: false },
+          },
+          comicStatus: "recent",
         },
-        predicate: { "acquisition.source.wanted": false },
-        comicStatus: "recent",
       }),
-    );
+    queryKey: ["recentComics"],
-    dispatch(
+  });
-      getComicBooks({
+  // Wanted Comics
-        paginationOptions: {
+  const { data: wantedComics } = useQuery({
-          page: 0,
+    queryFn: async () =>
-          limit: 5,
+      await axios({
-          sort: { updatedAt: "-1" },
+        url: `${LIBRARY_SERVICE_BASE_URI}/getComicBooks`,
+        method: "POST",
+        data: {
+          paginationOptions: {
+            page: 0,
+            limit: 5,
+            sort: { updatedAt: "-1" },
+          },
+          predicate: {
+            wanted: { $exists: true, $ne: null },
+          },
         },
-        predicate: { "acquisition.source.wanted": true },
-        comicStatus: "wanted",
       }),
-    );
+    queryKey: ["wantedComics"],
-    dispatch(getLibraryStatistics());
+  });
-  }, []);
+  const { data: volumeGroups } = useQuery({
+    queryFn: async () =>
+      await axios({
+        url: `${LIBRARY_SERVICE_BASE_URI}/getComicBookGroups`,
+        method: "GET",
+      }),
+    queryKey: ["volumeGroups"],
+  });
 
-  const recentComics = useSelector(
+  const { data: statistics } = useQuery({
-    (state: RootState) => state.fileOps.recentComics
+    queryFn: async () =>
-  );
+      await axios({
-  const wantedComics = useSelector(
+        url: `${LIBRARY_SERVICE_BASE_URI}/libraryStatistics`,
-    (state: RootState) => state.fileOps.wantedComics,
+        method: "GET",
-  );
+      }),
-  const volumeGroups = useSelector(
+    queryKey: ["libraryStatistics"],
-    (state: RootState) => state.fileOps.comicVolumeGroups,
+  });
-  );
 
-  const libraryStatistics = useSelector(
-    (state: RootState) => state.comicInfo.libraryStatistics,
-  );
   return (
-    <div className="container">
+    <div className="container mx-auto max-w-full">
-      <section className="section">
+      <PullList />
-        <h1 className="title">Dashboard</h1>
+      {recentComics && <RecentlyImported comics={recentComics?.data.docs} />}
-
+      {/* Wanted comics */}
-        {!isEmpty(recentComics) ? (
+      <WantedComicsList comics={wantedComics?.data?.docs} />
-          <>
+      {/* Library Statistics */}
-            {/* Pull List */}
+      {statistics && <LibraryStatistics stats={statistics?.data} />}
-            <PullList issues={recentComics} />
+      {/* Volume groups */}
-
+      <VolumeGroups volumeGroups={volumeGroups?.data} />
-            {/* Stats */}
-            {!isEmpty(libraryStatistics) && (
-              <LibraryStatistics stats={libraryStatistics} />
-            )}
-            {/* Wanted comics */}
-            {!isEmpty(wantedComics) && (
-              <WantedComicsList comics={wantedComics} />
-            )}
-            {/* Recent imports */}
-              <RecentlyImported comicBookCovers={recentComics} />
-            
-            {/* Volumes */}
-            {!isEmpty(volumeGroups) && (
-              <VolumeGroups volumeGroups={volumeGroups} />
-            )}
-          </>
-        ) : (
-          <ZeroState
-            header={"Set the source directory"}
-            message={
-              "No comics were found! Please point ThreeTwo! to a directory..."
-            }
-          />
-        )}
-      </section>
     </div>
   );
 };
 
-export default Dashboard;
+export default Dashboard;

src/client/components/Dashboard/LibraryStatistics.tsx

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

src/client/components/Dashboard/PullList.tsx

@@ -1,164 +1,180 @@
-import { isNil, map } from "lodash";
+import React, { ReactElement, useState, useEffect } from "react";
-import React, { createRef, ReactElement, useCallback, useEffect } from "react";
+import { map } from "lodash";
-import Card from "../Carda";
+import Card from "../shared/Carda";
-import Masonry from "react-masonry-css";
+import Header from "../shared/Header";
-import { useDispatch, useSelector } from "react-redux";
-import { getWeeklyPullList } from "../../actions/comicinfo.actions";
 import { importToDB } from "../../actions/fileops.actions";
 import ellipsize from "ellipsize";
-import Slider from "react-slick";
-import "slick-carousel/slick/slick.css";
-import "slick-carousel/slick/slick-theme.css";
 import { Link } from "react-router-dom";
 
+import axios from "axios";
+import rateLimiter from "axios-rate-limit";
+import { setupCache } from "axios-cache-interceptor";
+import { useQuery } from "@tanstack/react-query";
+import "keen-slider/keen-slider.min.css";
+import { useKeenSlider } from "keen-slider/react";
+import { COMICVINE_SERVICE_URI } from "../../constants/endpoints";
+import { Field, Form } from "react-final-form";
+import DatePickerDialog from "../shared/DatePicker";
+import { format } from "date-fns";
+
 type PullListProps = {
   issues: any;
 };
 
-export const PullList = ({ issues }: PullListProps): ReactElement => {
+const http = rateLimiter(axios.create(), {
-  const dispatch = useDispatch();
+  maxRequests: 1,
-  useEffect(() => {
+  perMilliseconds: 1000,
-    dispatch(
+  maxRPS: 1,
-      getWeeklyPullList({
+});
-        startDate: "2022-12-25",
+const cachedAxios = setupCache(axios);
-        pageSize: "15",
+export const PullList = (): ReactElement => {
-        currentPage: "1",
+  // datepicker
-      }),
+  const date = new Date();
-    );
+  const [inputValue, setInputValue] = useState<string>(
-  }, []);
+    format(date, "yyyy/M/dd"),
-  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);
+  // Responsive slides per view
-  let sliderRef = createRef();
+  const [slidesPerView, setSlidesPerView] = useState(1);
-  const settings = {
+
-    dots: false,
+
-    infinite: false,
+
-    speed: 500,
+  // keen slider
-    slidesToShow: 5,
+  const [sliderRef, instanceRef] = useKeenSlider({
-    slidesToScroll: 5,
+    loop: true,
-    initialSlide: 0,
+    mode: "free-snap",
-    responsive: [
+    slides: {
-      {
+      perView: slidesPerView,
-        breakpoint: 1024,
+      spacing: 15,
-        settings: {
+    },
-          slidesToShow: 3,
+    slideChanged() {
-          slidesToScroll: 3,
+      console.log("slide changed");
-          infinite: false,
+    },
+  });
+
+  // Update slider when slidesPerView changes
+  useEffect(() => {
+    if (instanceRef.current) {
+      instanceRef.current.update({
+        slides: {
+          perView: slidesPerView,
+          spacing: 15,
         },
-      },
+      });
-      {
+    }
-        breakpoint: 600,
+  }, [slidesPerView, instanceRef]);
-        settings: {
+
-          slidesToShow: 2,
+  const {
-          slidesToScroll: 2,
+    data: pullList,
-          initialSlide: 0,
+    refetch,
-        },
+    isSuccess,
-      },
+    isLoading,
-      {
+    isError,
-        breakpoint: 480,
+  } = useQuery({
-        settings: {
+    queryFn: async (): any =>
-          slidesToShow: 1,
+      await cachedAxios(`${COMICVINE_SERVICE_URI}/getWeeklyPullList`, {
-          slidesToScroll: 1,
+        method: "get",
-        },
+        params: { startDate: inputValue, pageSize: "15", currentPage: "1" },
-      },
+      }),
-    ],
+    queryKey: ["pullList", inputValue],
-  };
+  });
+  const addToLibrary = (sourceName: string, locgMetadata) =>
+    importToDB(sourceName, { locg: locgMetadata });
 
   const next = () => {
-    sliderRef.slickNext();
+    // sliderRef.slickNext();
   };
   const previous = () => {
-    sliderRef.slickPrev();
+    // sliderRef.slickPrev();
   };
+
   return (
     <>
       <div className="content">
-        <h4 className="title is-4">
+        <div className="mx-auto">
-          <i className="fa-solid fa-splotch"></i> Discover
+          <Header
-        </h4>
+            headerContent="Discover"
-        <p className="subtitle is-7">
+            subHeaderContent={
-          Pull List aggregated for the week from League Of Comic Geeks
+              <span className="text-md">
-        </p>
+                Pull List aggregated for the week from{" "}
-        <div className="field is-grouped">
+                <span className="underline">
-          {/* select week */}
+                  <a href="https://leagueofcomicgeeks.com">
-          <div className="control">
+                    League Of Comic Geeks
-            <div className="select is-small">
+                  </a>
-              <select>
+                  <i className="icon-[solar--arrow-right-up-outline] w-4 h-4" />
-                <option>Select Week</option>
+                </span>
-                <option>With options</option>
+              </span>
-              </select>
+            }
-            </div>
+            iconClassNames="fa-solid fa-binoculars mr-2"
-          </div>
+            link="/pull-list/all/"
-          {/* See all pull list issues */}
+          />
-          <div className="control">
+          <div className="flex flex-row gap-5 mb-3">
-            <Link to={"/pull-list/all/"}>
+            {/* select week */}
-              <button className="button is-small">View all issues</button>
+            <div className="flex flex-row gap-4 my-3">
-            </Link>
+              <Form
-          </div>
+                onSubmit={() => {}}
-          <div className="field has-addons">
+                render={({ handleSubmit }) => (
-            <div className="control">
+                  <form>
-              <button className="button is-rounded is-small" onClick={previous}>
+                    <div className="flex flex-col gap-2">
-                <i className="fa-solid fa-caret-left"></i>
+                      {/* week selection for pull list */}
-              </button>
+                      <DatePickerDialog
-            </div>
+                        inputValue={inputValue}
-            <div className="control">
+                        setter={setInputValue}
-              <button className="button is-rounded is-small" onClick={next}>
+                      />
-                <i className="fa-solid fa-caret-right"></i>
+                      {inputValue && (
-              </button>
+                        <div className="text-sm">
+                          Showing pull list for{" "}
+                          <span className="inline-flex mb-2 items-center bg-slate-50 text-slate-800 text-xs font-medium px-2.5 py-1 rounded-md dark:text-slate-900 dark:bg-slate-400">
+                            {inputValue}
+                          </span>
+                        </div>
+                      )}
+                    </div>
+                  </form>
+                )}
+              />
             </div>
           </div>
         </div>
       </div>
-      <Slider {...settings} ref={(c) => (sliderRef = c)}>
+
-        {!isNil(pullList) &&
+      {isSuccess && !isLoading && (
-          pullList &&
+        <div ref={sliderRef} className="keen-slider">
-          map(pullList, ({issue}, idx) => {
+          {map(pullList?.data.result, (issue, idx) => {
-            return (
+          return (
+            <div key={idx} className="keen-slider__slide">
               <Card
-                key={idx}
+                orientation={"vertical-2"}
-                orientation={"vertical"}
+                imageUrl={issue.coverImageUrl}
-                imageUrl={issue.cover}
                 hasDetails
-                title={ellipsize(issue.name, 18)}
+                title={ellipsize(issue.issueName, 25)}
-                cardContainerStyle={{
-                  marginRight: 22,
-                  boxShadow: "-2px 4px 15px -6px rgba(0,0,0,0.57)",
-                }}
               >
-                <div className="content">
+                <div className="px-1">
-                  <div className="control">
+                  <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">
-                    <span className="tag">{issue.publisher}</span>
+                    {issue.publicationDate}
-                  </div>
+                  </span>
-                  <div className="mt-2">
+                  <div className="flex flex-row justify-end">
                     <button
-                      className="button is-small is-success is-outlined is-light"
+                      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="fa-solid fa-plus"></i> Want
+                      <i className="icon-[solar--add-square-bold-duotone] w-5 h-5 mr-2"></i>{" "}
+                      Want
                     </button>
                   </div>
                 </div>
               </Card>
-            );
+            </div>
+          );
           })}
-      </Slider>
+        </div>
+      )}
+      {isLoading ? <div>Loading...</div> : null}
+      {isError ? (
+        <div>An error occurred while retrieving the pull list.</div>
+      ) : null}
     </>
   );
 };
 
-export default PullList;
+export default PullList;

src/client/components/Dashboard/RecentlyImported.tsx

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

src/client/components/Dashboard/VolumeGroups.tsx

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

src/client/components/Dashboard/WantedComicsList.tsx

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

src/client/components/Dashboard/ZeroState.tsx

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

src/client/components/Downloads/Downloads.tsx

@@ -1,9 +1,6 @@
-import React, { ReactElement, useCallback, useContext, useEffect, useState } from "react";
+import React, { ReactElement, 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 { searchIssue } from "../../actions/fileops.actions";
 import { determineCoverFile } from "../../shared/utils/metadata.utils";
 import MetadataPanel from "../shared/MetadataPanel";
 
@@ -12,16 +9,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(
+  // const airDCPPTransfers = useSelector(
-    (state: RootState) => state.airdcpp.transfers,
+  //   (state: RootState) => state.airdcpp.transfers,
-  );
+  // );
-  const issueBundles = useSelector((state: RootState) => state.airdcpp.issue_bundles);
+  // const issueBundles = useSelector(
+  //   (state: RootState) => state.airdcpp.issue_bundles,
+  // );
   const [bundles, setBundles] = useState([]);
   // Make the call to get all transfers from AirDC++
   useEffect(() => {
@@ -38,62 +37,86 @@ export const Downloads = (props: IDownloadsProps): ReactElement => {
   useEffect(() => {
     if (!isUndefined(issueBundles)) {
       const foo = issueBundles.data.map((bundle) => {
-        const { rawFileDetails, inferredMetadata, acquisition: { directconnect: { downloads } }, sourcedMetadata: { locg, comicvine } } = bundle;
+        const {
+          rawFileDetails,
+          inferredMetadata,
+          acquisition: {
+            directconnect: { downloads },
+          },
+          sourcedMetadata: { locg, comicvine },
+        } = bundle;
         const { issueName, url } = determineCoverFile({
-          rawFileDetails, comicvine, locg,
+          rawFileDetails,
+          comicvine,
+          locg,
         });
-        return { ...bundle, issueName, url }
+        return { ...bundle, issueName, url };
-
+      });
-      })
       setBundles(foo);
     }
+  }, [issueBundles]);
 
-  }, [issueBundles])
+  return !isNil(bundles) ? (
-
-  return !isNil(bundles) ?
     <div className="container">
       <section className="section">
         <h1 className="title">Downloads</h1>
         <div className="columns">
           <div className="column is-half">
-            {bundles.map(bundle => {
+            {bundles.map((bundle, idx) => {
               console.log(bundle);
-              return <>
+              return (
-                <MetadataPanel
+                <div key={idx}>
-                  data={bundle}
+                  <MetadataPanel
-                  imageStyle={{ maxWidth: 80 }}
+                    data={bundle}
-                  titleStyle={{ fontSize: "0.8rem" }}
+                    imageStyle={{ maxWidth: 80 }}
-                  tagsStyle={{ fontSize: "0.7rem" }}
+                    titleStyle={{ fontSize: "0.8rem" }}
-                  containerStyle={{
+                    tagsStyle={{ fontSize: "0.7rem" }}
-                    maxWidth: 400,
+                    containerStyle={{
-                    padding: 0,
+                      maxWidth: 400,
-                    margin: "0 0 8px 0",
+                      padding: 0,
-                  }} />
+                      margin: "0 0 8px 0",
+                    }}
+                  />
 
                   <table className="table is-size-7">
-                    <tr>
+                    <thead>
-                      <th>Name</th>
+                      <tr>
-                      <th>Size</th>
+                        <th>Name</th>
-                      <th>Type</th>
+                        <th>Size</th>
-                      <th>Bundle ID</th>
+                        <th>Type</th>
-                    </tr>
+                        <th>Bundle ID</th>
-
+                      </tr>
-                    {bundle.acquisition.directconnect.downloads.map((bundle) => {
+                    </thead>
-                      return(<tr>
+                    <tbody>
-                        <td>{bundle.name}</td>
+                      {bundle.acquisition.directconnect.downloads.map(
-                        <td>{bundle.size}</td>
+                        (bundle, idx) => {
-                        <td>{bundle.type.str}</td>
+                          return (
-                        <td><span className="tag is-warning">{bundle.bundleId}</span></td>
+                            <tr key={idx}>
-                      </tr>)
+                              <td>{bundle.name}</td>
-                    })}
+                              <td>{bundle.size}</td>
+                              <td>{bundle.type.str}</td>
+                              <td>
+                                <span className="tag is-warning">
+                                  {bundle.bundleId}
+                                </span>
+                              </td>
+                            </tr>
+                          );
+                        },
+                      )}
+                    </tbody>
                   </table>
-                {/* <pre>{JSON.stringify(bundle.acquisition.directconnect.downloads, null, 2)}</pre> */}
+                  {/* <pre>{JSON.stringify(bundle.acquisition.directconnect.downloads, null, 2)}</pre> */}
-              </>
+                </div>
+              );
             })}
           </div>
         </div>
       </section>
-    </div> : <div>asd</div>;
+    </div>
+  ) : (
+    <div>There are no downloads.</div>
+  );
 };
 
 export default Downloads;

src/client/components/GlobalSearchBar/SearchBar.tsx

@@ -1,7 +1,7 @@
 import { debounce, isEmpty, map } from "lodash";
 import React, { ReactElement, useCallback, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
-import Card from "../Carda";
+import Card from "../shared/Carda";
 
 import { searchIssue } from "../../actions/fileops.actions";
 import MetadataPanel from "../shared/MetadataPanel";
@@ -31,7 +31,7 @@ export const SearchBar = (data: ISearchBarProps): ReactElement => {
               from: 0,
             },
             type: "volumeName",
-            trigger: "globalSearchBar"
+            trigger: "globalSearchBar",
           },
         ),
       );
@@ -51,7 +51,6 @@ export const SearchBar = (data: ISearchBarProps): ReactElement => {
           <i className="fa-solid fa-magnifying-glass"></i>
         </span>
       </div>
-
       {!isEmpty(searchResults) ? (
         <div
           className="columns box is-multiline"
@@ -62,9 +61,10 @@ export const SearchBar = (data: ISearchBarProps): ReactElement => {
             margin: "60px 0 0 350px",
           }}
         >
-          {map(searchResults, (result) => (
+          {map(searchResults, (result, idx) => (
             <MetadataPanel
               data={result}
+              key={idx}
               imageStyle={{ maxWidth: 70 }}
               titleStyle={{ fontSize: "0.8rem" }}
               tagsStyle={{ fontSize: "0.7rem" }}

src/client/components/Import.tsx

@@ -1,133 +0,0 @@
-import React, { ReactElement, useCallback, useContext, useState } from "react";
-import { useSelector, useDispatch } from "react-redux";
-import {
-  fetchComicBookMetadata,
-  toggleImportQueueStatus,
-} from "../actions/fileops.actions";
-import "react-loader-spinner/dist/loader/css/react-spinner-loader.css";
-import Loader from "react-loader-spinner";
-
-interface IProps {
-  matches?: unknown;
-  fetchComicMetadata?: any;
-  path: string;
-  covers?: any;
-}
-
-/**
- * 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
- * @returns The arithmetic mean of `x` and `y`
- *
- * @beta
- */
-
-export const Import = (props: IProps): ReactElement => {
-  const dispatch = useDispatch();
-  const libraryQueueResults = useSelector(
-    (state: RootState) => state.fileOps.librarySearchResultCount,
-  );
-  const libraryQueueImportStatus = useSelector(
-    (state: RootState) => state.fileOps.IMSCallInProgress,
-  );
-  const [isImportQueuePaused, setImportQueueStatus] = useState(false);
-  const initiateImport = useCallback(() => {
-    if (typeof props.path !== "undefined") {
-      dispatch(fetchComicBookMetadata(props.path));
-    }
-  }, [dispatch]);
-
-  const toggleImport = useCallback(() => {
-    setImportQueueStatus(!isImportQueuePaused);
-    if (isImportQueuePaused === false) {
-      dispatch(toggleImportQueueStatus({ action: "resume" }));
-    } else if (isImportQueuePaused === true) {
-      dispatch(toggleImportQueueStatus({ action: "pause" }));
-    }
-  }, [isImportQueuePaused]);
-  const pauseIconText = (
-    <>
-      <i className="fa-solid fa-pause mr-2"></i> Pause Import
-    </>
-  );
-  const playIconText = (
-    <>
-      <i className="fa-solid fa-play mr-2"></i> Resume Import
-    </>
-  );
-  return (
-    <div className="container">
-      <section className="section is-small">
-        <h1 className="title">Import</h1>
-        <article className="message is-dark">
-          <div className="message-body">
-            <p className="mb-2">
-              <span className="tag is-medium is-info is-light">
-                Import Only
-              </span>
-              will add comics identified from the mapped folder into the local
-              db.
-            </p>
-            <p>
-              <span className="tag is-medium is-info is-light">
-                Import and Tag
-              </span>
-              will scan the ComicVine, shortboxed APIs and import comics from
-              the mapped folder with the additional metadata.
-            </p>
-          </div>
-        </article>
-        <p className="buttons">
-          <button
-            className={
-              libraryQueueImportStatus
-                ? "button is-loading is-medium"
-                : "button is-medium"
-            }
-            onClick={initiateImport}
-          >
-            <span className="icon">
-              <i className="fas fa-file-import"></i>
-            </span>
-            <span>Import Only</span>
-          </button>
-
-          <button className="button is-medium">
-            <span className="icon">
-              <i className="fas fa-tag"></i>
-            </span>
-            <span>Import and Tag</span>
-          </button>
-        </p>
-        <div className="columns is-multiline">
-          <div className="column is-one-fifth">
-            <div className="box control-palette">
-              <span className="is-size-2 has-text-weight-bold">
-                {JSON.stringify(libraryQueueResults, null, 2)}
-              </span>
-            </div>
-            <div className="is-half">
-              <div className="content">
-                <div className="control">
-                  <button
-                    className="button is-warning is-light"
-                    onClick={toggleImport}
-                  >
-                    {!isImportQueuePaused ? pauseIconText : playIconText}
-                  </button>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </section>
-    </div>
-  );
-};
-
-export default Import;

src/client/components/Import/Import.tsx

@@ -0,0 +1,374 @@
+import React, { ReactElement, useCallback, useEffect, useRef } from "react";
+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;
+  fetchComicMetadata?: any;
+  path: string;
+  covers?: any;
+}
+
+/**
+ * Component to facilitate the import of comics to the ThreeTwo library
+ *
+ * @param x - The first input number
+ * @param y - The second input number
+ * @returns The arithmetic mean of `x` and `y`
+ *
+ * @beta
+ */
+
+export const Import = (props: IProps): ReactElement => {
+  const queryClient = useQueryClient();
+  const { importJobQueue, getSocket, setQueryClientRef } = useStore(
+    useShallow((state) => ({
+      importJobQueue: state.importJobQueue,
+      getSocket: state.getSocket,
+      setQueryClientRef: state.setQueryClientRef,
+    })),
+  );
+  
+  const previousResultCountRef = useRef<number>(0);
+  const pollingIntervalRef = useRef<NodeJS.Timeout | null>(null);
+
+  // Set the queryClient reference in the store so socket events can use it
+  useEffect(() => {
+    setQueryClientRef({ current: queryClient });
+  }, [queryClient, setQueryClientRef]);
+
+  const sessionId = localStorage.getItem("sessionId");
+  const { mutate: initiateImport } = useMutation({
+    mutationFn: async () =>
+      await axios.request({
+        url: `http://localhost:3000/api/library/newImport`,
+        method: "POST",
+        data: { sessionId },
+      }),
+  });
+
+  const { data, isError, isLoading, refetch } = useQuery({
+    queryKey: ["allImportJobResults"],
+    queryFn: async () => {
+      const response = await axios({
+        method: "GET",
+        url: "http://localhost:3000/api/jobqueue/getJobResultStatistics",
+        params: {
+          _t: Date.now(), // Cache buster
+        },
+        headers: {
+          'Cache-Control': 'no-cache',
+          'Pragma': 'no-cache',
+        },
+      });
+      
+      // Track the result count
+      if (response.data?.length) {
+        previousResultCountRef.current = response.data.length;
+      }
+      
+      return response;
+    },
+    refetchOnMount: true,
+    refetchOnWindowFocus: false,
+    staleTime: 0, // Always consider data stale
+    gcTime: 0, // Don't cache the data (replaces cacheTime in newer versions)
+    // Poll every 5 seconds when import is running
+    refetchInterval: importJobQueue.status === "running" || importJobQueue.status === "paused" ? 5000 : false,
+  });
+
+  // Listen for import queue drained event to refresh the table
+  useEffect(() => {
+    const socket = getSocket("/");
+    
+    const handleQueueDrained = () => {
+      const initialCount = previousResultCountRef.current;
+      let attempts = 0;
+      const maxAttempts = 20; // Poll for up to 20 seconds
+      
+      // Clear any existing polling interval
+      if (pollingIntervalRef.current) {
+        clearInterval(pollingIntervalRef.current);
+      }
+      
+      // Poll every second until we see new data or hit max attempts
+      pollingIntervalRef.current = setInterval(async () => {
+        attempts++;
+        
+        const result = await refetch();
+        const newCount = result.data?.data?.length || 0;
+        
+        if (newCount > initialCount) {
+          if (pollingIntervalRef.current) {
+            clearInterval(pollingIntervalRef.current);
+            pollingIntervalRef.current = null;
+          }
+        } else if (attempts >= maxAttempts) {
+          if (pollingIntervalRef.current) {
+            clearInterval(pollingIntervalRef.current);
+            pollingIntervalRef.current = null;
+          }
+        }
+      }, 1000);
+    };
+
+    socket.on("LS_IMPORT_QUEUE_DRAINED", handleQueueDrained);
+
+    return () => {
+      socket.off("LS_IMPORT_QUEUE_DRAINED", handleQueueDrained);
+      if (pollingIntervalRef.current) {
+        clearInterval(pollingIntervalRef.current);
+      }
+    };
+  }, [getSocket, queryClient, refetch]);
+
+  const toggleQueue = (queueAction: string, queueStatus: string) => {
+    const socket = getSocket("/");
+    socket.emit(
+      "call",
+      "socket.setQueueStatus",
+      {
+        queueAction,
+        queueStatus,
+      },
+      (data: any) => 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>
+            <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");
+              }}
+            >
+              <span className="text-md">Pause</span>
+              <span className="w-5 h-5">
+                <i className="h-5 w-5 icon-[solar--pause-bold]"></i>
+              </span>
+            </button>
+          </div>
+        );
+      case "paused":
+        return (
+          <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-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");
+              }}
+            >
+              <span className="text-md">Resume</span>
+              <span className="w-5 h-5">
+                <i className="h-5 w-5 icon-[solar--play-bold]"></i>
+              </span>
+            </button>
+          </div>
+        );
+
+      case "drained":
+        return null;
+
+      default:
+        return null;
+    }
+  };
+  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>
+              </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>
+
+                  <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>
+            </>
+          )}
+
+          {/* 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>
+
+              <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>
+
+                  <tbody className="divide-y divide-gray-200">
+                    {data?.data.map((jobResult: any, id: number) => {
+                      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>
+      </section>
+    </div>
+  );
+};
+
+export default Import;

src/client/components/Library/Library.tsx

@@ -1,12 +1,18 @@
-import React, { useMemo, ReactElement, useCallback, useEffect } from "react";
+import React, { useMemo, ReactElement, useState, useEffect } from "react";
 import PropTypes from "prop-types";
 import { useNavigate } from "react-router-dom";
 import { isEmpty, isNil, isUndefined } from "lodash";
 import MetadataPanel from "../shared/MetadataPanel";
 import T2Table from "../shared/T2Table";
-import { useDispatch, useSelector } from "react-redux";
+import SearchBar from "../Library/SearchBar";
-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.
@@ -16,33 +22,60 @@ import ellipsize from "ellipsize";
  * <Library />
  */
 export const Library = (): ReactElement => {
-  const searchResults = useSelector(
+  // Default page state
-    (state: RootState) => state.fileOps.libraryComics,
+  // offset: 0
-  );
+  const [offset, setOffset] = useState(0);
-  const searchError = useSelector((state: RootState) => {
+  const [searchQuery, setSearchQuery] = useState({
-    console.log(state);
+    query: {},
-    return state.fileOps.librarySearchError;
+    pagination: {
+      size: 25,
+      from: offset,
+    },
+    type: "all",
+    trigger: "libraryPage",
   });
-  const dispatch = useDispatch();
+  const queryClient = useQueryClient();
-  useEffect(() => {
-    dispatch(
-      searchIssue(
-        {
-          query: {},
-        },
-        {
-          pagination: {
-            size: 15,
-            from: 0,
-          },
-          type: "all",
-          trigger: "libraryPage",
-        },
-      ),
-    );
-  }, []);
 
-  // programatically navigate to comic detail
+  /**
+   * 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
   const navigate = useNavigate();
   const navigateToComicDetail = (row) => {
     navigate(`/comic/details/${row.original._id}`);
@@ -50,45 +83,42 @@ export const Library = (): ReactElement => {
 
   const ComicInfoXML = (value) => {
     return value.data ? (
-      <div className="comicvine-metadata">
+      <dl className="flex flex-col text-md p-3 ml-4 my-3 rounded-lg dark:bg-yellow-500 bg-yellow-300 w-max">
-        <dl>
+        {/* Series Name */}
-          <span className="tags has-addons is-size-7">
+        <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="tag">Series</span>
+          <span className="pr-1 pt-1">
-            <span className="tag is-warning is-light">
+            <i className="icon-[solar--bookmark-square-minimalistic-bold-duotone] w-5 h-5"></i>
-              {ellipsize(value.data.series[0], 25)}
+          </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]}
             </span>
           </span>
-        </dl>
+          {/* Issue number */}
-        <dl>
+          <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">
-          <div className="field is-grouped is-grouped-multiline">
+            <span className="pr-1 pt-1">
-            <div className="control">
+              <i className="icon-[solar--hashtag-outline] w-3.5 h-3.5"></i>
-              <span className="tags has-addons is-size-7  mt-2">
+            </span>
-                <span className="tag">Pages</span>
+            <span className="text-slate-900 dark:text-slate-900">
-                <span className="tag is-info is-light has-text-weight-bold">
+              {!isNil(value.data.number) && (
-                  {value.data.pagecount[0]}
+                <span>{parseInt(value.data.number[0], 10)}</span>
-                </span>
+              )}
-              </span>
+            </span>
-            </div>
+          </span>
-
+        </div>
-            <div className="control">
+      </dl>
-              <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(
     () => [
       {
@@ -107,14 +137,10 @@ 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>
-              ),
           },
         ],
       },
@@ -122,28 +148,43 @@ export const Library = (): ReactElement => {
         header: "Additional Metadata",
         columns: [
           {
-            header: "Publisher",
+            header: "Date of Import",
-            accessorKey: "_source.sourcedMetadata.comicvine.volumeInformation",
+            accessorKey: "_source.createdAt",
             cell: (info) => {
-              return (
+              return !isNil(info.getValue()) ? (
-                !isNil(info.getValue()) && (
+                <span className="inline-flex items-center bg-slate-300 dark:bg-slate-500 text-xs font-medium text-slate-700 dark:text-slate-200 px-3 py-1 rounded-md shadow-sm whitespace-nowrap ml-3 my-3">
-                  <h6 className="is-size-7 has-text-weight-bold">
+                  <i className="icon-[solar--file-download-bold] w-4 h-4 mr-2 opacity-70" />
-                    {info.getValue().publisher.name}
+                  {format(parseISO(info.getValue()), "dd MMM yyyy, h:mm a")}
-                  </h6>
+                </span>
-                )
+              ) : null;
-              );
             },
           },
           {
-            header: "Something",
+            header: "Downloads",
-            accessorKey: "_source.acquisition.source.wanted",
+            accessorKey: "_source.acquisition",
-            cell: (info) => {
+            cell: (info) => (
-              !isUndefined(info.getValue()) ? (
+              <div className="flex flex-col gap-2 ml-3 my-3">
-                <WantedStatus value={info.getValue().toString()} />
+                {/* DC++ Downloads */}
-              ) : (
+                {info.getValue().directconnect?.downloads?.length > 0 ? (
-                "Nothing"
+                  <span className="inline-flex items-center bg-slate-50 text-slate-800 text-xs font-medium px-2.5 py-1 rounded-md dark:text-slate-900 dark:bg-slate-400">
-              );
+                    <i className="icon-[solar--folder-path-connect-bold-duotone] w-4 h-4 mr-1 opacity-70" />
-            },
+                    <span>
+                      DC++: {info.getValue().directconnect.downloads.length}
+                    </span>
+                  </span>
+                ) : null}
+
+                {/* Torrent Downloads */}
+                {info.getValue().torrent.length > 0 ? (
+                  <span className="inline-flex items-center whitespace-nowrap bg-slate-50 text-slate-800 text-xs font-medium px-2.5 py-1 rounded-md dark:text-slate-900 dark:bg-slate-400">
+                    <i className="icon-[solar--magnet-bold-duotone] w-4 h-4 mr-1 opacity-70" />
+                    <span className="whitespace-nowrap">
+                      Torrent: {info.getValue().torrent.length}
+                    </span>
+                  </span>
+                ) : null}
+              </div>
+            ),
           },
         ],
       },
@@ -159,23 +200,21 @@ export const Library = (): ReactElement => {
    * @returns void
    *
    **/
-  const nextPage = useCallback((pageIndex: number, pageSize: number) => {
+  const nextPage = (pageIndex: number, pageSize: number) => {
-    dispatch(
+    if (!isPlaceholderData) {
-      searchIssue(
+      queryClient.invalidateQueries({ queryKey: ["comics"] });
-        {
+      setSearchQuery({
-          query: {},
+        query: {},
+        pagination: {
+          size: 15,
+          from: pageSize * pageIndex + 1,
         },
-        {
+        type: "all",
-          pagination: {
+        trigger: "libraryPage",
-            size: pageSize,
+      });
-            from: pageSize * pageIndex + 1,
+      // setOffset(pageSize * pageIndex + 1);
-          },
+    }
-          type: "all",
+  };
-          trigger: "libraryPage",
-        },
-      ),
-    );
-  }, []);
 
   /**
    * Pagination control that fetches the previous x (pageSize) items
@@ -184,77 +223,95 @@ export const Library = (): ReactElement => {
    * @param {number} pageSize
    * @returns void
    **/
-  const previousPage = useCallback((pageIndex: number, pageSize: number) => {
+  const previousPage = (pageIndex: number, pageSize: number) => {
     let from = 0;
     if (pageIndex === 2) {
-      from = (pageIndex - 1) * pageSize + 2 - 17;
+      from = (pageIndex - 1) * pageSize + 2 - (pageSize + 2);
     } else {
-      from = (pageIndex - 1) * pageSize + 2 - 16;
+      from = (pageIndex - 1) * pageSize + 2 - (pageSize + 1);
     }
-    dispatch(
+    queryClient.invalidateQueries({ queryKey: ["comics"] });
-      searchIssue(
+    setSearchQuery({
-        {
+      query: {},
-          query: {},
+      pagination: {
-        },
+        size: 15,
-        {
+        from,
-          pagination: {
+      },
-            size: pageSize,
+      type: "all",
-            from,
+      trigger: "libraryPage",
-          },
+    });
-          type: "all",
+    // setOffset(from);
-          trigger: "libraryPage",
+  };
-        },
-      ),
-    );
-  }, []);
 
   // ImportStatus.propTypes = {
   //   value: PropTypes.bool.isRequired,
   // };
   return (
-    <section className="container">
+    <div>
-      <div className="section">
+      <section>
-        <div className="header-area">
+        <header className="bg-slate-200 dark:bg-slate-500">
-          <h1 className="title">Library</h1>
+          <div className="mx-auto max-w-screen-xl px-2 py-2 sm:px-6 sm:py-8 lg:px-8 lg:py-4">
-        </div>
+            <div className="sm:flex sm:items-center sm:justify-between">
-        {!isEmpty(searchResults) ? (
+              <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) ? (
           <div>
-            <div className="library">
+            <div>
               <T2Table
                 totalPages={searchResults.hits.total.value}
                 columns={columns}
-                sourceData={searchResults?.hits?.hits}
+                sourceData={searchResults?.hits.hits}
                 rowClickHandler={navigateToComicDetail}
                 paginationHandlers={{
                   nextPage,
                   previousPage,
                 }}
-              />
+              >
+                <SearchBar searchHandler={(e) => searchIssues(e)} />
+              </T2Table>
             </div>
           </div>
         ) : (
-          <div className="columns">
+          <div className="mx-auto max-w-screen-xl mt-5">
-            <div className="column is-two-thirds">
+            <article
-              <article className="message is-link">
+              role="alert"
-                <div className="message-body">
+              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>
                   No comics were found in the library, Elasticsearch reports no
                   indices. Try importing a few comics into the library and come
                   back.
-                </div>
+                </p>
-              </article>
+              </div>
-              <pre>
+            </article>
-                {!isUndefined(searchError.data) &&
+            <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">
-                  JSON.stringify(
+              <pre className="text-sm font-hasklig text-slate-700 dark:text-slate-700">
-                    searchError.data.meta.body.error.root_cause,
+                {!isUndefined(searchResults?.data?.meta?.body) ? (
-                    null,
+                  <p>
-                    4,
+                    {JSON.stringify(
-                  )}
+                      searchResults?.data.meta.body.error.root_cause,
+                      null,
+                      4,
+                    )}
+                  </p>
+                ) : null}
               </pre>
             </div>
           </div>
         )}
-      </div>
+      </section>
-    </section>
+    </div>
   );
 };
 

src/client/components/Library/LibraryGrid.tsx

@@ -12,7 +12,7 @@ import { useDispatch, useSelector } from "react-redux";
 import { getComicBooks } from "../../actions/fileops.actions";
 import { isNil, isEmpty, isUndefined } from "lodash";
 import Masonry from "react-masonry-css";
-import Card from "../Carda";
+import Card from "../shared/Carda";
 import { detectIssueTypes } from "../../shared/utils/tradepaperback.utils";
 import { Link } from "react-router-dom";
 import { LIBRARY_SERVICE_HOST } from "../../constants/endpoints";
@@ -73,7 +73,7 @@ export const LibraryGrid = (libraryGridProps: ILibraryGridProps) => {
                 <div className="content is-flex is-flex-direction-row">
                   {!isEmpty(sourcedMetadata.comicvine) && (
                     <span className="icon cv-icon is-small">
-                      <img src="/dist/img/cvlogo.svg" />
+                      <img src="/src/client/assets/img/cvlogo.svg" />
                     </span>
                   )}
                   {isNil(rawFileDetails) && (

src/client/components/Library/SearchBar.tsx

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

src/client/components/MatchResult.tsx

@@ -1,126 +0,0 @@
-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";
-
-interface MatchResultProps {
-  matchData: any;
-  comicObjectId: string;
-}
-
-const handleBrokenImage = (e) => {
-  e.target.src = "http://localhost:3050/dist/img/noimage.svg";
-};
-
-export const MatchResult = (props: MatchResultProps) => {
-  const dispatch = useDispatch();
-  const applyCVMatch = useCallback(
-    (match, comicObjectId) => {
-      dispatch(applyComicVineMatch(match, comicObjectId));
-    },
-    [dispatch],
-  );
-  return (
-    <>
-      {map(props.matchData, (match, idx) => {
-        let issueDescription = "";
-        if (!isNil(match.description)) {
-          issueDescription = convert(match.description, {
-            baseElements: {
-              selectors: ["p"],
-            },
-          });
-        }
-        return (
-          <div className="search-result mb-4" key={idx}>
-            <div className="columns">
-              <div className="column is-one-fifth">
-                <img
-                  className="cover-image"
-                  src={match.image.thumb_url}
-                  onError={handleBrokenImage}
-                />
-              </div>
-
-              <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>
-                <div className="is-size-7">
-                  {ellipsize(issueDescription, 300)}
-                </div>
-              </div>
-            </div>
-
-            <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="cover-image"
-                  onError={handleBrokenImage}
-                />
-              </div>
-
-              <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="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>
-        );
-      })}
-    </>
-  );
-};
-
-export default MatchResult;

src/client/components/Navbar.tsx

@@ -1,261 +0,0 @@
-import React, { useContext } from "react";
-import { SearchBar } from "./GlobalSearchBar/SearchBar";
-import { DownloadProgressTick } from "./ComicDetail/DownloadProgressTick";
-import { Link } from "react-router-dom";
-import { useSelector } from "react-redux";
-import { isUndefined } from "lodash";
-import { format, fromUnixTime } from "date-fns";
-
-const Navbar: React.FunctionComponent = (props) => {
-  const downloadProgressTick = useSelector(
-    (state: RootState) => state.airdcpp.downloadProgressData,
-  );
-
-  const airDCPPSocketConnectionStatus = useSelector(
-    (state: RootState) => state.airdcpp.isAirDCPPSocketConnected,
-  );
-  const airDCPPSessionInfo = useSelector(
-    (state: RootState) => state.airdcpp.airDCPPSessionInfo,
-  );
-  const socketDisconnectionReason = useSelector(
-    (state: RootState) => state.airdcpp.socketDisconnectionReason,
-  );
-  return (
-    <nav className="navbar is-fixed-top">
-      <div className="navbar-brand">
-        <Link to="/" className="navbar-item">
-          <img
-            src="/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>
-
-          <SearchBar />
-
-          <Link to="/search" className="navbar-item">
-            Search ComicVine
-          </Link>
-        </div>
-
-        <div className="navbar-end">
-          <a className="navbar-item is-hidden-desktop-only"></a>
-
-          <div className="navbar-item has-dropdown is-hoverable">
-            <a className="navbar-link is-arrowless">
-              <i className="fa-solid fa-download"></i>
-              {downloadProgressTick && <div className="pulsating-circle"></div>}
-            </a>
-            {!isUndefined(downloadProgressTick) ? (
-              <div className="navbar-dropdown is-right">
-                <a className="navbar-item">
-                  <DownloadProgressTick data={downloadProgressTick} />
-                </a>              </div>
-            ) : null}
-          </div>
-          {/* AirDC++ socket connection status */}
-          <div className="navbar-item has-dropdown is-hoverable">
-            {airDCPPSocketConnectionStatus ? (
-              <>
-                <a className="navbar-link is-arrowless has-text-success">
-                  <i className="fa-solid fa-bolt"></i>
-                </a>
-                <div className="navbar-dropdown pt-4 pr-2 pl-2 is-right airdcpp-status">
-                  {/* AirDC++ Session Information */}
-
-                  <p>
-                    Last login was{" "}
-                    <span className="tag">
-                      {format(
-                        fromUnixTime(airDCPPSessionInfo.user.last_login),
-                        "dd MMMM, yyyy",
-                      )}
-                    </span>
-                  </p>
-                  <hr className="navbar-divider" />
-                  <p>
-                    <span className="tag has-text-success">
-                      {airDCPPSessionInfo.user.username}
-                    </span>
-                    connected to{" "}
-                    <span className="tag has-text-success">
-                      {airDCPPSessionInfo.system_info.client_version}
-                    </span>{" "}
-                    with session ID{" "}
-                    <span className="tag has-text-success">
-                      {airDCPPSessionInfo.session_id}
-                    </span>
-                  </p>
-
-                  {/* <pre>{JSON.stringify(airDCPPSessionInfo, null, 2)}</pre> */}
-                </div>
-              </>
-            ) : (
-              <>
-                <a className="navbar-link is-arrowless has-text-danger">
-                  <i className="fa-solid fa-bolt"></i>
-                </a>
-                <div className="navbar-dropdown pr-2 pl-2 is-right">
-                  <pre>
-                    {JSON.stringify(socketDisconnectionReason, null, 2)}
-                  </pre>
-                </div>
-              </>
-            )}
-          </div>
-
-          <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/PullList/PullList.tsx

@@ -1,25 +1,23 @@
 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 Card from "../Carda";
 import ellipsize from "ellipsize";
 import { isNil } from "lodash";
 
 export const PullList = (): ReactElement => {
-  const pullListComics = useSelector(
+  // const pullListComics = useSelector(
-    (state: RootState) => state.comicInfo.pullList,
+  //   (state: RootState) => state.comicInfo.pullList,
-  );
+  // );
 
-  const dispatch = useDispatch();
   useEffect(() => {
-    dispatch(
+    // dispatch(
-      getWeeklyPullList({
+    //   getWeeklyPullList({
-        startDate: "2022-11-15",
+    //     startDate: "2023-7-28",
-        pageSize: "15",
+    //     pageSize: "15",
-        currentPage: "1",
+    //     currentPage: "1",
-      }),
+    //   }),
-    );
+    // );
   }, []);
   const nextPageHandler = () => {};
   const previousPageHandler = () => {};
@@ -109,15 +107,15 @@ export const PullList = (): ReactElement => {
         {!isNil(pullListComics) && (
           <div>
             <div className="library">
-            <T2Table
+              <T2Table
-              sourceData={pullListComics}
+                sourceData={pullListComics}
-              columns={columnData}
+                columns={columnData}
-              totalPages={pullListComics.length}
+                totalPages={pullListComics.length}
-              paginationHandlers={{
+                paginationHandlers={{
-                nextPage: nextPageHandler,
+                  nextPage: nextPageHandler,
-                previousPage: previousPageHandler,
+                  previousPage: previousPageHandler,
-              }}
+                }}
-            />
+              />
             </div>
           </div>
         )}

src/client/components/Search.tsx

@@ -1,181 +0,0 @@
-import React, { useMemo, useCallback, ReactElement } from "react";
-import { isNil, isEmpty } from "lodash";
-import { IExtractedComicBookCoverFile, RootState } from "threetwo-ui-typings";
-import { importToDB } from "../actions/fileops.actions";
-import { useSelector, useDispatch } from "react-redux";
-import { comicinfoAPICall } from "../actions/comicinfo.actions";
-import { search } from "../services/api/SearchApi";
-import { Form, Field } from "react-final-form";
-import Card from "./Carda";
-import ellipsize from "ellipsize";
-import { convert } from "html-to-text";
-import dayjs from "dayjs";
-
-interface ISearchProps {}
-
-export const Search = ({}: ISearchProps): ReactElement => {
-  const formData = {
-    search: "",
-  };
-  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 = useCallback(
-    (sourceName: string, comicData) =>
-      dispatch(importToDB(sourceName, { comicvine: comicData })),
-    [],
-  );
-
-  const comicVineSearchResults = useSelector(
-    (state: RootState) => state.comicInfo.searchResults,
-  );
-  const createDescriptionMarkup = (html) => {
-    return { __html: html };
-  };
-
-  return (
-    <>
-      <section className="container">
-        <div className="section search">
-          <h1 className="title">Search</h1>
-
-          <Form
-            onSubmit={getCVSearchResults}
-            initialValues={{
-              ...formData,
-            }}
-            render={({ handleSubmit, form, submitting, pristine, values }) => (
-              <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>
-              </form>
-            )}
-          />
-          {!isNil(comicVineSearchResults.results) &&
-          !isEmpty(comicVineSearchResults.results) ? (
-            <div className="columns is-multiline">
-              {comicVineSearchResults.results.map((result) => {
-                return (
-                  <div
-                    key={result.id}
-                    className="comicvine-metadata column is-10 mb-3"
-                  >
-                    <div className="columns">
-                      <div className="column is-one-quarter">
-                        <Card
-                          key={result.id}
-                          orientation={"vertical"}
-                          imageUrl={result.image.small_url}
-                          title={result.name}
-                          hasDetails={false}
-                        ></Card>
-                      </div>
-                      <div className="column">
-                        <div className="is-size-3">
-                          {!isEmpty(result.name) ? (
-                            result.name
-                          ) : (
-                            <span className="is-size-3">No Name</span>
-                          )}
-                        </div>
-                        <div className="field is-grouped mt-1">
-                          <div className="control">
-                            <div className="tags has-addons">
-                              <span className="tag is-light">Cover date</span>
-                              <span className="tag is-info is-light">
-                                {dayjs(result.cover_date).format("MMM D, YYYY")}
-                              </span>
-                            </div>
-                          </div>
-
-                          <div className="control">
-                            <div className="tags has-addons">
-                              <span className="tag is-warning">
-                                {result.id}
-                              </span>
-                            </div>
-                          </div>
-                        </div>
-
-                        <a href={result.api_detail_url}>
-                          {result.api_detail_url}
-                        </a>
-                        <p>
-                          {ellipsize(
-                            convert(result.description, {
-                              baseElements: {
-                                selectors: ["p"],
-                              },
-                            }),
-                            320,
-                          )}
-                        </p>
-                        <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>
-          ) : (
-            <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>
-      </section>
-    </>
-  );
-};
-
-export default Search;

src/client/components/Search/Search.tsx

@@ -0,0 +1,488 @@
+import React, { ReactElement, useState } from "react";
+import { isNil, isEmpty, isUndefined } from "lodash";
+import { IExtractedComicBookCoverFile, RootState } from "threetwo-ui-typings";
+import { detectIssueTypes } from "../../shared/utils/tradepaperback.utils";
+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 {}
+
+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,
+    }) => {
+      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,
+            url: api_detail_url,
+            image,
+            coverDate: cover_date,
+            issueNumber: issue_number,
+          });
+          console.log(issues);
+          // Get volume metadata from CV
+          const response = await axios({
+            url: `${COMICVINE_SERVICE_URI}/getVolumes`,
+            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 addToLibrary = (sourceName: string, comicData) =>
+    setComicVineMetadata({ sourceName, comicData });
+
+  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>
+
+                <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}
+            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"
+                  >
+                    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 w-full sm:w-[90vw] md:w-[80vw] lg:w-[70vw] max-w-6xl px-4 py-6">
+            {comicVineSearchResults.data.results.map((result) => {
+              return result.resource_type === "issue" ? (
+                <div
+                  key={result.id}
+                  className="relative flex gap-4 py-6 px-3 border-b border-slate-200 dark:border-slate-700 hover:bg-slate-100/50 dark:hover:bg-slate-800/30 transition-colors duration-150 group"
+                >
+                  {/* IMAGE */}
+                  <div className="flex-shrink-0">
+                    <Card
+                      orientation="cover-only"
+                      imageUrl={result.image.small_url}
+                      hasDetails={false}
+                      cardContainerStyle={{ width: "120px", maxWidth: "150px" }}
+                    />
+                  </div>
+
+                  {/* RIGHT-SIDE CONTENT */}
+                  <div className="flex-1 min-w-0">
+                    {/* TITLE */}
+                    <div className="text-base font-medium text-slate-800 dark:text-white tracking-tight truncate">
+                      {result.volume?.name || <span>No Name</span>}
+                    </div>
+
+                    {/* SUBMETA */}
+                    <div className="flex flex-wrap gap-2 mt-2">
+                      {/* Cover Date Token */}
+                      {result.cover_date && (
+                        <span className="inline-flex items-center bg-slate-50 text-slate-800 text-xs font-medium px-2.5 py-0.5 rounded-md dark:text-slate-900 dark:bg-slate-400">
+                          <span className="pr-1 pt-1">
+                            <i className="icon-[solar--calendar-bold-duotone] w-4 h-4"></i>
+                          </span>
+                          <span className="text-xs text-slate-500 dark:text-slate-900">
+                            {dayjs(result.cover_date).format("MMM YYYY")}
+                          </span>
+                        </span>
+                      )}
+
+                      {/* ID Token */}
+                      <span className="inline-flex items-center bg-slate-50 text-slate-800 text-xs font-medium px-2.5 py-0.5 rounded-md dark:text-slate-900 dark:bg-slate-400">
+                        <span className="pr-1 pt-1">
+                          <i className="icon-[solar--hashtag-bold-duotone] w-4 h-4"></i>
+                        </span>
+                        <span className="text-xs text-slate-500 dark:text-slate-900">
+                          {result.id}
+                        </span>
+                      </span>
+                    </div>
+
+                    {/* LINK */}
+                    <a
+                      href={result.api_detail_url}
+                      className="text-xs text-blue-500 underline mt-1 inline-block break-all"
+                    >
+                      {result.api_detail_url}
+                    </a>
+
+                    {/* DESCRIPTION */}
+                    {result.description && (
+                      <p className="text-sm text-slate-600 dark:text-slate-200 mt-2 line-clamp-3">
+                        {ellipsize(
+                          convert(result.description ?? "", {
+                            baseElements: { selectors: ["p", "div"] },
+                          }),
+                          300,
+                        )}
+                      </p>
+                    )}
+
+                    {/* CTA BUTTON */}
+                    {result.volume.name && (
+                      <div className="absolute bottom-4 right-4">
+                        <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>
+              ) : (
+                result.resource_type === "volume" && (
+                  <div
+                    key={result.id}
+                    className="relative flex gap-4 py-6 px-3 border-b border-slate-200 dark:border-slate-700 hover:bg-slate-100/50 dark:hover:bg-slate-800/30 transition-colors duration-150 group"
+                  >
+                    {/* LEFT COLUMN: COVER */}
+                    <Card
+                      orientation="cover-only"
+                      imageUrl={result.image.small_url}
+                      hasDetails={false}
+                      cardContainerStyle={{
+                        width: "120px",
+                        maxWidth: "150px",
+                      }}
+                    />
+
+                    {/* RIGHT COLUMN */}
+                    <div className="flex-1 min-w-0">
+                      {/* TITLE */}
+                      <div className="text-lg font-bold text-gray-900 dark:text-white">
+                        {result.name || <span>No Name</span>}
+                        {result.start_year && <> ({result.start_year})</>}
+                      </div>
+
+                      {/* TOKENS */}
+                      <div className="flex flex-wrap gap-2 mt-2">
+                        {/* ISSUE COUNT */}
+                        {result.count_of_issues && (
+                          <span className="inline-flex items-center bg-slate-50 text-slate-800 text-xs font-medium px-2.5 py-0.5 rounded-md dark:text-slate-900 dark:bg-slate-400">
+                            <span className="pr-1 pt-1">
+                              <i className="icon-[solar--documents-minimalistic-bold-duotone] w-4 h-4" />
+                            </span>
+                            <span>
+                              {t("issueWithCount", {
+                                count: result.count_of_issues,
+                              })}
+                            </span>
+                          </span>
+                        )}
+
+                        {/* FORMAT DETECTED */}
+                        {result.description &&
+                          !isEmpty(detectIssueTypes(result.description)) && (
+                            <span className="inline-flex items-center bg-slate-50 text-slate-800 text-xs font-medium px-2.5 py-0.5 rounded-md dark:text-slate-900 dark:bg-slate-400">
+                              <span className="pr-1 pt-1">
+                                <i className="icon-[solar--book-2-line-duotone] w-4 h-4" />
+                              </span>
+                              <span>
+                                {
+                                  detectIssueTypes(result.description)
+                                    .displayName
+                                }
+                              </span>
+                            </span>
+                          )}
+
+                        {/* ID */}
+                        <span className="inline-flex items-center bg-slate-50 text-slate-800 text-xs font-medium px-2.5 py-0.5 rounded-md dark:text-slate-900 dark:bg-slate-400">
+                          <span className="pr-1 pt-1">
+                            <i className="icon-[solar--hashtag-bold-duotone] w-4 h-4" />
+                          </span>
+                          <span>{result.id}</span>
+                        </span>
+                      </div>
+
+                      {/* LINK */}
+                      <a
+                        href={result.api_detail_url}
+                        className="text-sm text-blue-500 underline mt-2 break-all"
+                      >
+                        {result.api_detail_url}
+                      </a>
+
+                      {/* DESCRIPTION */}
+                      {result.description && (
+                        <p className="text-sm mt-2 text-slate-700 dark:text-slate-200 break-words line-clamp-3">
+                          {ellipsize(
+                            convert(result.description, {
+                              baseElements: { selectors: ["p", "div"] },
+                            }),
+                            320,
+                          )}
+                        </p>
+                      )}
+                      {result.name ? (
+                        <div className="mt-4 justify-self-end">
+                          <PopoverButton
+                            content={`This will add ${result.count_of_issues} issues your wanted list.`}
+                            clickHandler={() =>
+                              addToWantedList({
+                                source: "comicvine",
+                                comicObject: result,
+                                markEntireVolumeWanted: false,
+                                resourceType: "issue",
+                              })
+                            }
+                          />
+                        </div>
+                      ) : null}
+                    </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>
+                  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>
+        )}
+      </section>
+    </div>
+  );
+};
+
+export default Search;

src/client/components/ServiceStatuses/ServiceStatuses.tsx

@@ -0,0 +1,25 @@
+import React, { ReactElement } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { useEffect } from "react";
+import { getServiceStatus } from "../../actions/fileops.actions";
+
+export const ServiceStatuses = (): ReactElement => {
+  const serviceStatus = useSelector(
+    (state: RootState) => state.fileOps.libraryServiceStatus,
+  );
+  const dispatch = useDispatch();
+  useEffect(() => {
+    dispatch(getServiceStatus());
+  }, []);
+  return (
+    <div className="is-clearfix">
+      <div className="mt-4">
+        <h3 className="title">Core Services</h3>
+        <h6 className="subtitle has-text-grey-light">
+          Statuses for core services
+        </h6>
+      </div>
+      <pre>{JSON.stringify(serviceStatus, null, 2)}</pre>
+    </div>
+  );
+};

src/client/components/Settings.tsx

@@ -1,103 +0,0 @@
-import React, { useState, ReactElement } from "react";
-import { AirDCPPSettingsForm } from "./AirDCPPSettings/AirDCPPSettingsForm";
-import { AirDCPPHubsForm } from "./AirDCPPSettings/AirDCPPHubsForm";
-import { SystemSettingsForm } from "./SystemSettings/SystemSettingsForm";
-import settingsObject from "../constants/settings/settingsMenu.json";
-import { isUndefined, map } from "lodash";
-
-interface ISettingsProps {}
-
-export const Settings = (props: ISettingsProps): ReactElement => {
-  const [active, setActive] = useState("gen-db");
-  const settingsContent = [
-    {
-      id: "adc-hubs",
-      content: <div key="adc-hubs">{<AirDCPPHubsForm />}</div>,
-    },
-    {
-      id: "adc-connection",
-      content: (
-        <div key="adc-connection">
-          <AirDCPPSettingsForm />
-        </div>
-      ),
-    },
-    {
-      id: "flushdb",
-      content: (
-        <div key="flushdb">
-          <SystemSettingsForm />
-        </div>
-      ),
-    },
-  ];
-  return (
-    <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>
-
-        {/* content for settings */}
-        <div className="section column is-half mt-6">
-          <div className="content">
-            {map(settingsContent, ({ id, content }) =>
-              active === id ? content : null,
-            )}
-          </div>
-        </div>
-      </div>
-    </section>
-  );
-};
-
-export default Settings;

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

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

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

@@ -0,0 +1,41 @@
+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>
+
+            <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>
+      </div>
+    </div>
+  );
+};
+
+export default AirDCPPSettingsConfirmation;

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

@@ -0,0 +1,89 @@
+import React, { useState, useEffect } from "react";
+import { AirDCPPSettingsConfirmation } from "./AirDCPPSettingsConfirmation";
+import { ConnectionForm } from "../../shared/ConnectionForm/ConnectionForm";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import axios from "axios";
+import {
+  AIRDCPP_SERVICE_BASE_URI,
+  SETTINGS_SERVICE_BASE_URI,
+} from "../../../constants/endpoints";
+
+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",
+    }),
+  );
+
+  const initFormData = settingsData?.data?.directConnect?.client?.host ?? {};
+
+  return (
+    <>
+      <ConnectionForm
+        initialData={initFormData}
+        submitHandler={mutate}
+        formHeading={"Configure AirDC++"}
+      />
+
+      {airDCPPSessionInformation && (
+        <AirDCPPSettingsConfirmation settings={airDCPPSessionInformation} />
+      )}
+
+      {settingsData?.data && (
+        <p className="control mt-4">
+          <button
+            className="button is-danger"
+            onClick={() => deleteSettingsMutation.mutate()}
+          >
+            Delete
+          </button>
+        </p>
+      )}
+    </>
+  );
+};
+
+export default AirDCPPSettingsForm;

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

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

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

@@ -0,0 +1,62 @@
+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

@@ -0,0 +1,82 @@
+import React, { ReactElement } from "react";
+import { ConnectionForm } from "../../shared/ConnectionForm/ConnectionForm";
+import { useQuery, useMutation, QueryClient } 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"],
+    queryFn: async () =>
+      await axios({
+        url: "http://localhost:3000/api/settings/getAllSettings",
+        method: "GET",
+      }),
+  });
+  const hostDetails = data?.data?.bittorrent?.client?.host;
+  // connect to qbittorrent client
+
+  // get qbittorrent client info
+  const { data: qbittorrentClientInfo } = useQuery({
+    queryKey: ["qbittorrentClientInfo"],
+    queryFn: async () =>
+      await axios({
+        url: "http://localhost:3060/api/qbittorrent/getClientInfo",
+        method: "GET",
+      }),
+  });
+  // Update action using a mutation
+  const { mutate } = useMutation({
+    mutationFn: async (values) =>
+      await axios({
+        url: `http://localhost:3000/api/settings/saveSettings`,
+        method: "POST",
+        data: { settingsPayload: values, settingsKey: "bittorrent" },
+      }),
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: ["settings", "qbittorrentClientInfo"],
+      });
+    },
+  });
+
+  if (isError)
+    return (
+      <>
+        <pre>Something went wrong connecting to qBittorrent.</pre>
+      </>
+    );
+  if (!isLoading) {
+    return (
+      <>
+        <ConnectionForm
+          initialData={hostDetails}
+          formHeading={"qBittorrent Configuration"}
+          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>
+      </>
+    );
+  }
+};
+
+export default QbittorrentConnectionForm;

src/client/components/Settings/Settings.tsx

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

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

@@ -1,15 +1,16 @@
-import React, { ReactElement, useCallback } from "react";
+import React, { ReactElement } from "react";
-import { flushDb } from "../../actions/settings.actions";
+import { useMutation } from "@tanstack/react-query";
-import { useDispatch, useSelector } from "react-redux";
+import axios from "axios";
 
 export const SystemSettingsForm = (): ReactElement => {
-  const dispatch = useDispatch();
+  const { mutate: flushDb, isLoading } = useMutation({
-  const isSettingsCallInProgress = useSelector(
+    mutationFn: async () => {
-    (state: RootState) => state.settings.inProgress,
+      await axios({
-  );
+        url: `http://localhost:3000/api/library/flushDb`,
-  const flushDatabase = useCallback(() => {
+        method: "POST",
-    dispatch(flushDb());
+      });
-  }, []);
+    },
+  });
 
   return (
     <div className="is-clearfix">
@@ -47,15 +48,11 @@ export const SystemSettingsForm = (): ReactElement => {
         </article>
 
         <button
-          className={
+          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"
-            isSettingsCallInProgress
+          onClick={() => flushDb()}
-              ? "button is-danger is-loading"
-              : "button is-danger"
-          }
-          onClick={flushDatabase}
         >
-          <span className="icon">
+          <span className="pt-1 px-1">
-            <i className="fas fa-eraser"></i>
+            <i className="icon-[solar--trash-bin-trash-bold-duotone] w-7 h-7"></i>
           </span>
           <span>Flush DB & Temporary Folders</span>
         </button>

src/client/components/VolumeDetail/PotentialLibraryMatches.tsx

@@ -2,7 +2,7 @@ import { isArray, map } from "lodash";
 import React, { useEffect, ReactElement } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { getComicBooksDetailsByIds } from "../../actions/comicinfo.actions";
-import { Card } from "../Carda";
+import { Card } from "../shared/Carda";
 import ellipsize from "ellipsize";
 import { LIBRARY_SERVICE_HOST } from "../../constants/endpoints";
 import { escapePoundSymbol } from "../../shared/utils/formatting.utils";

src/client/components/VolumeDetail/VolumeDetail.tsx

@@ -1,30 +1,25 @@
-import { isEmpty, isUndefined, map, partialRight, pick } from "lodash";
+import { isEmpty, isNil, isUndefined, map, partialRight, pick } from "lodash";
-import React, { useEffect, ReactElement, useState, useCallback } from "react";
+import React, { ReactElement, useState, useCallback } from "react";
-import { useDispatch, useSelector } from "react-redux";
 import { useParams } from "react-router";
-import {
+import { analyzeLibrary } from "../../actions/comicinfo.actions";
-  getComicBookDetailById,
+import { useQuery, useMutation, QueryClient } from "@tanstack/react-query";
-  getIssuesForSeries,
-  analyzeLibrary,
-} from "../../actions/comicinfo.actions";
 import PotentialLibraryMatches from "./PotentialLibraryMatches";
-import Masonry from "react-masonry-css";
+import { Card } from "../shared/Carda";
-import { Card } from "../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
@@ -33,7 +28,9 @@ 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} />; */
+        }
       },
     },
   };
@@ -45,68 +42,145 @@ const VolumeDetails = (props): ReactElement => {
     setVisible(true);
   }, []);
 
-  const analyzeIssues = useCallback((issues) => {
+  //   const analyzeIssues = useCallback((issues) => {
-    dispatch(analyzeLibrary(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(issuesForVolume) ? (
+      {!isUndefined(issuesForSeries) ? (
-        <div className="button" onClick={() => analyzeIssues(issuesForVolume)}>
+        <div className="button" onClick={() => analyzeIssues(issuesForSeries)}>
           Analyze Library
         </div>
       ) : null}
-      <Masonry
+      <>
-        breakpointCols={breakpointColumnsObj}
+        {isSuccess &&
-        className="issues-container"
+          issuesForSeries.data.map((issue) => {
-        columnClassName="issues-column"
+            return (
-      >
+              <>
-        {!isUndefined(issuesForVolume) && !isEmpty(issuesForVolume)
-          ? issuesForVolume.map((issue) => {
-              return (
                 <Card
                   key={issue.id}
-                  imageUrl={issue.image.thumb_url}
+                  imageUrl={issue.image.small_url}
-                  orientation={"vertical"}
+                  orientation={"cover-only"}
-                  hasDetails
+                  hasDetails={false}
-                  borderColorClass={
+                />
-                    !isEmpty(issue.matches) ? "green-border" : ""
+                <span className="tag is-warning mr-1">
-                  }
+                  {issue.issue_number}
-                  backgroundColor={!isEmpty(issue.matches) ? "beige" : ""}
+                </span>
-                  onClick={() =>
+                {!isEmpty(issue.matches) ? (
-                    openPotentialLibraryMatchesPanel(issue.matches)
+                  <>
-                  }
+                    <span className="icon has-text-success">
-                >
+                      <i className="fa-regular fa-asterisk"></i>
-                  <span className="tag is-warning mr-1">
+                    </span>
-                    {issue.issue_number}
+                  </>
-                  </span>
+                ) : null}
-                  {!isEmpty(issue.matches) ? (
+              </>
-                    <>
+            );
-                      <span className="icon has-text-success">
+          })}
-                        <i className="fa-regular fa-asterisk"></i>
+      </>
-                      </span>
+    </>
-                    </>
+  );
-                  ) : null}
+
-                </Card>
+  const Issues = () => (
-              );
+    <>
-            })
+      <article
-          : "loading"}
+        role="alert"
-      </Masonry>
+        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>
     </>
   );
 
@@ -115,20 +189,44 @@ const VolumeDetails = (props): ReactElement => {
     {
       id: 1,
       name: "Issues in Volume",
-      icon: <i className="fa-solid fa-layer-group"></i>,
+      icon: <i className="icon-[solar--documents-bold-duotone] w-6 h-6"></i>,
-      content: <IssuesInVolume key={1} />,
+      content: <Issues />,
     },
     {
       id: 2,
-      icon: <i className="fa-regular fa-mask"></i>,
+      icon: (
+        <i className="icon-[solar--users-group-rounded-bold-duotone] w-6 h-6"></i>
+      ),
       name: "Characters",
-      content: <div key={2}>asdasd</div>,
+      content: <div key={2}>Characters</div>,
     },
     {
       id: 3,
-      icon: <i className="fa-solid fa-scroll"></i>,
+      icon: (
-      name: "Arcs",
+        <i className="icon-[solar--book-bookmark-bold-duotone] w-6 h-6"></i>
-      content: <div key={3}>asdasd</div>,
+      ),
+      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>
+      ),
     },
   ];
 
@@ -136,21 +234,26 @@ const VolumeDetails = (props): ReactElement => {
   const MetadataTabGroup = () => {
     return (
       <>
-        <div className="tabs">
+        <div className="hidden sm:block mt-7 mb-3 w-fit">
-          <ul>
+          <div className="border-b border-gray-200">
-            {tabGroup.map(({ id, name, icon }) => (
+            <nav className="flex gap-4" aria-label="Tabs">
-              <li
+              {tabGroup.map(({ id, name, icon }) => (
-                key={id}
+                <a
-                className={id === active ? "is-active" : ""}
+                  key={id}
-                onClick={() => setActive(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
-                <a>
+                      ? "border-b border-cyan-50 dark:text-slate-200"
-                  <span className="icon is-small">{icon}</span>
+                      : "border-b border-transparent"
+                  }`}
+                  aria-current="page"
+                  onClick={() => setActive(id)}
+                >
+                  <span className="pt-1">{icon}</span>
                   {name}
                 </a>
-              </li>
+              ))}
-            ))}
+            </nav>
-          </ul>
+          </div>
         </div>
         {tabGroup.map(({ id, content }) => {
           return active === id ? content : null;
@@ -158,97 +261,103 @@ const VolumeDetails = (props): ReactElement => {
       </>
     );
   };
-
+  if (isComicObjectFetchedSuccessfully && !isUndefined(comicObject.data)) {
-  if (
+    const { sourcedMetadata } = comicObject.data;
-    !isUndefined(comicBookDetails.sourcedMetadata) &&
-    !isUndefined(comicBookDetails.sourcedMetadata.comicvine.volumeInformation)
-  ) {
     return (
-      <div className="container volume-details">
+      <>
-        <div className="section">
+        <header className="bg-slate-200 dark:bg-slate-500">
-          {/* Title */}
+          <div className="mx-auto max-w-screen-xl px-2 py-2 sm:px-6 sm:py-8 lg:px-8 lg:py-4">
-          <h1 className="title">
+            <div className="sm:flex sm:items-center sm:justify-between">
-            {comicBookDetails.sourcedMetadata.comicvine.volumeInformation.name}
+              <div className="text-center sm:text-left">
-          </h1>
+                <h1 className="text-2xl font-bold text-gray-900 dark:text-white sm:text-3xl">
-          <div className="columns is-multiline">
+                  Volumes
-            {/* Volume cover */}
+                </h1>
-            <div className="column is-narrow">
+
+                <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 */}
               <Card
                 imageUrl={
-                  comicBookDetails.sourcedMetadata.comicvine.volumeInformation
+                  sourcedMetadata.comicvine.volumeInformation.image.small_url
-                    .image.small_url
                 }
-                cardContainerStyle={{ maxWidth: 275 }}
+                orientation={"cover-only"}
-                orientation={"vertical"}
                 hasDetails={false}
               />
-            </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>
-                {/* 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>
-
-              {/* Deck */}
               <div>
-                {!isEmpty(
+                <div className="field is-grouped">
-                  comicBookDetails.sourcedMetadata.comicvine.volumeInformation
+                  {/* Title */}
-                    .description,
+                  <span className="text-2xl">
-                )
+                    {sourcedMetadata.comicvine.volumeInformation.name}
-                  ? ellipsize(
+                  </span>
-                      convert(
+                  {/* Comicvine Id */}
-                        comicBookDetails.sourcedMetadata.comicvine
+                  <div className="control">
-                          .volumeInformation.description,
+                    <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">
                         {
-                          baseElements: {
+                          sourcedMetadata.comicvine.volumeInformation.publisher
-                            selectors: ["p"],
+                            .name
+                        }
+                      </span>
+                    </div>
+                  </div>
+                </div>
+
+                {/* Deck */}
+                <div>
+                  {!isEmpty(
+                    sourcedMetadata.comicvine.volumeInformation.description,
+                  )
+                    ? ellipsize(
+                        convert(
+                          sourcedMetadata.comicvine.volumeInformation
+                            .description,
+                          {
+                            baseElements: {
+                              selectors: ["p"],
+                            },
                           },
-                        },
+                        ),
-                      ),
+                        300,
-                      300,
+                      )
-                    )
+                    : null}
-                  : null}
+                </div>
               </div>
+
+              {/* <pre>{JSON.stringify(issuesForVolume, undefined, 2)}</pre> */}
             </div>
-
+            <MetadataTabGroup />
-            {/* <pre>{JSON.stringify(issuesForVolume, undefined, 2)}</pre> */}
           </div>
-          <MetadataTabGroup />
-        </div>
 
-        <SlidingPane
+          <SlidingPane
-          isOpen={visible}
+            isOpen={visible}
-          onRequestClose={() => setVisible(false)}
+            onRequestClose={() => setVisible(false)}
-          title={"Potential Matches in Library"}
+            title={"Potential Matches in Library"}
-          width={"600px"}
+            width={"600px"}
-        >
+          >
-          {slidingPanelContentId !== "" &&
+            {slidingPanelContentId !== "" &&
-            contentForSlidingPanel[slidingPanelContentId].content()}
+              contentForSlidingPanel[slidingPanelContentId].content()}
-        </SlidingPane>
+          </SlidingPane>
-      </div>
+        </div>
+      </>
     );
   } else {
     return <></>;

src/client/components/Volumes/Volumes.tsx

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

src/client/components/WantedComics/WantedComics.tsx

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

src/client/components/shared/Canvas.tsx

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

src/client/components/shared/Carda.tsx

@@ -0,0 +1,190 @@
+import React, { ReactElement } from "react";
+import PropTypes from "prop-types";
+import { isEmpty, isNil } from "lodash";
+
+interface ICardProps {
+  orientation: string;
+  imageUrl?: string;
+  hasDetails?: boolean;
+  title?: PropTypes.ReactElementLike | null;
+  children?: PropTypes.ReactNodeLike;
+  borderColorClass?: string;
+  backgroundColor?: string;
+  onClick?: (event: React.MouseEvent<HTMLElement>) => void;
+  cardContainerStyle?: any;
+  imageStyle?: any;
+}
+
+const renderCard = (props: ICardProps): ReactElement => {
+  switch (props.orientation) {
+    case "horizontal":
+      return (
+        <div className="card-container">
+          <div className="card generic-card">
+            <div className="is-horizontal">
+              <div className="card-image">
+                <img
+                  style={props.imageStyle}
+                  src={props.imageUrl}
+                  alt="Placeholder image"
+                  className="cropped-image"
+                />
+              </div>
+              {props.hasDetails && (
+                <div className="card-content">{props.children}</div>
+              )}
+            </div>
+          </div>
+        </div>
+      );
+    case "vertical":
+      return (
+        <div onClick={props.onClick}>
+          <div className="generic-card" style={props.cardContainerStyle}>
+            <div
+              className={
+                !isNil(props.borderColorClass)
+                  ? `${props.borderColorClass}`
+                  : ""
+              }
+            >
+              <div
+                className={
+                  props.hasDetails
+                    ? "partial-rounded-card-image"
+                    : "rounded-card-image"
+                }
+              >
+                <figure>
+                  <img
+                    src={props.imageUrl}
+                    style={props.imageStyle}
+                    alt="Placeholder image"
+                  />
+                </figure>
+              </div>
+              {props.hasDetails && (
+                <div
+                  className="card-content"
+                  style={{ backgroundColor: props.backgroundColor }}
+                >
+                  {!isNil(props.title) ? (
+                    <div className="card-title is-size-8 is-family-secondary">
+                      {props.title}
+                    </div>
+                  ) : null}
+                  {props.children}
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+      );
+
+    case "vertical-2":
+      return (
+        <div className="block rounded-md max-w-64 h-fit shadow-md shadow-white-400 bg-gray-200 dark:bg-slate-500">
+          <img
+            alt="Home"
+            src={props.imageUrl}
+            className="rounded-t-md object-cover w-full"
+          />
+
+          {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":
+      const containerStyle = {
+        width: props.cardContainerStyle?.width || "100%",
+        height: props.cardContainerStyle?.height || "auto",
+        maxWidth: props.cardContainerStyle?.maxWidth || "none",
+        ...props.cardContainerStyle,
+      };
+
+      const imageStyle = {
+        width: "100%",
+        height: "100%",
+        objectFit: "cover",
+        ...props.imageStyle,
+      };
+
+      return (
+        <div
+          className={`rounded-2xl overflow-hidden shadow-md bg-white dark:bg-slate-800 ${
+            props.cardContainerStyle?.height ? "" : "aspect-[2/3]"
+          }`}
+          style={containerStyle}
+        >
+          <img src={props.imageUrl} alt="Comic cover" style={imageStyle} />
+        </div>
+      );
+      
+    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 <></>;
+  }
+};
+
+export const Card = React.memo(
+  (props: ICardProps): ReactElement => renderCard(props),
+);
+
+export default Card;

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

@@ -0,0 +1,158 @@
+import React, { ReactElement } from "react";
+import { Form, Field } from "react-final-form";
+import { hostNameValidator } from "../../../shared/utils/validator.utils";
+import { isEmpty } from "lodash";
+
+export const ConnectionForm = ({
+  initialData,
+  submitHandler,
+  formHeading,
+}): ReactElement => {
+  return (
+    <>
+      <Form
+        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"
+                    />
+                    <div>
+                      {meta.error && meta.touched && (
+                        <span className="text-sm text-red-400 px-2">
+                          {meta.error}
+                        </span>
+                      )}
+                    </div>
+                  </div>
+                )}
+              </Field>
+
+              {/* port */}
+              <div className="flex flex-col">
+                <label className="block px-2 py-1">Port</label>
+                <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"
+                />
+              </div>
+            </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>
+              </div>
+              <div>
+                <div>
+                  <label className="block py-1">Password</label>
+                  <div className="relative">
+                    <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"
+                      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>
+                  </div>
+                </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">
+                  {!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
+                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>
+            </div>
+          </form>
+        )}
+      />
+    </>
+  );
+};