Merge branch 'main' into dark-mode-refactor

❌ Removing yarn.lockfile
🏗️ Fixed fonts, and comic detail page first draft
2023-12-21 16:21:34 -05:00 · 2023-12-21 16:16:31 -05:00 · 2023-12-21 15:19:28 -05:00 · 2023-12-20 00:08:16 -05:00 · 2023-12-18 23:31:43 -05:00 · 2023-12-18 18:02:15 -05:00
35 changed files with 1405 additions and 12089 deletions
--- a/index.html
+++ b/index.html
@@ -1,16 +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">
+    <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>
+  <body class="dark:bg-slate-600">
    <div id="root"></div>
    <script type="module" src="/src/client/index.tsx"></script>
  </body>
-
 </html>
--- a/package.json
+++ b/package.json
@@ -25,7 +25,7 @@
    "@tanstack/react-table": "^8.9.3",
    "@types/mime-types": "^2.1.0",
    "@types/react-router-dom": "^5.3.3",
-    "@vitejs/plugin-react": "^3.1.0",
+    "@vitejs/plugin-react": "^4.2.1",
    "airdcpp-apisocket": "^2.5.0-beta.2",
    "axios": "^1.3.4",
    "axios-cache-interceptor": "^1.0.1",
@@ -61,7 +61,6 @@
    "react-router-dom": "^6.9.0",
    "react-select": "^5.8.0",
    "react-select-async-paginate": "^0.7.2",
-    "react-slick": "^0.29.0",
    "react-sliding-pane": "^7.1.0",
    "react-stickynode": "^4.1.0",
    "react-textarea-autosize": "^8.3.4",
@@ -76,6 +75,8 @@
    "zustand": "^4.4.6"
  },
  "devDependencies": {
+    "@iconify-json/solar": "^1.1.8",
+    "@iconify/tailwind": "^0.1.4",
    "@storybook/addon-essentials": "^7.4.1",
    "@storybook/addon-interactions": "^7.4.1",
    "@storybook/addon-links": "^7.4.1",
@@ -95,8 +96,8 @@
    "@types/react": "^18.0.28",
    "@types/react-dom": "^18.0.11",
    "@types/react-redux": "^7.1.25",
+    "autoprefixer": "^10.4.16",
    "body-parser": "^1.19.0",
-    "bulma": "^0.9.4",
    "docdash": "^2.0.2",
    "eslint": "^8.49.0",
    "eslint-config-prettier": "^8.1.0",
@@ -111,11 +112,14 @@
    "install": "^0.13.0",
    "jest": "^29.6.3",
    "nodemon": "^3.0.1",
+    "postcss": "^8.4.32",
+    "postcss-import": "^15.1.0",
    "prettier": "^2.2.1",
    "react-refresh": "^0.14.0",
    "rimraf": "^4.1.3",
    "sass": "^1.69.5",
    "storybook": "^7.3.2",
+    "tailwindcss": "^3.3.5",
    "tui-jsdoc-template": "^1.2.2",
    "typescript": "^5.1.6"
  }
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -0,0 +1,7 @@
+module.exports = {
+  plugins: {
+    "postcss-import": {},
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
--- a/public/fonts/Hasklig-Regular.otf
+++ b/public/fonts/Hasklig-Regular.otf
--- a/public/fonts/PPObjectSans-Heavy.otf
+++ b/public/fonts/PPObjectSans-Heavy.otf
--- a/public/fonts/PPObjectSans-HeavySlanted.otf
+++ b/public/fonts/PPObjectSans-HeavySlanted.otf
--- a/public/fonts/PPObjectSans-Regular.otf
+++ b/public/fonts/PPObjectSans-Regular.otf
--- a/public/fonts/PPObjectSans-Slanted.otf
+++ b/public/fonts/PPObjectSans-Slanted.otf
--- a/src/client/assets/scss/App.scss
+++ b/src/client/assets/scss/App.scss
@@ -1,637 +1,15 @@
-@import "/node_modules/bulma/bulma.sass";
-$fa-font-path: "/node_modules/@fortawesome/fontawesome-free/webfonts";
-@import "/node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss";
-@import "/node_modules/@fortawesome/fontawesome-free/scss/regular.scss";
-@import "/node_modules/@fortawesome/fontawesome-free/scss/solid.scss";
-$bg-color: yellow;
-$border-color: red;
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

-$volume-color: #fdecd1;
-$issue-color: #f2f1f9;
-$size-8: 0.9rem;
-$size-9: 0.7rem;
-$flexSize: 4em;
-$boxSpacing: 1em;
-$colorText: #404646;
-body {
-  background: #fffcc;
-}
-.is-size-8 {
-  font-size: $size-8;
+@layer base {
+  @font-face {
+    font-family: "PP Object Sans Regular";
+    src: url("/fonts/PPObjectSans-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;
+  @font-face {
+    font-family: "Hasklig Regular";
+    src: url("/fonts/Hasklig-Regular.otf") format("opentype");
  }
 }
--- a/src/client/components/App.tsx
+++ b/src/client/components/App.tsx
@@ -1,12 +1,12 @@
 import React, { ReactElement } from "react";
 import { Outlet } from "react-router-dom";
-import Navbar from "./shared/Navbar";
+import { Navbar2 } from "./shared/Navbar2";
 import "../assets/scss/App.scss";

 export const App = (): ReactElement => {
  return (
    <>
-      <Navbar />
+      <Navbar2 />
      <Outlet />
    </>
  );
--- a/src/client/components/ComicDetail/AcquisitionPanel.tsx
+++ b/src/client/components/ComicDetail/AcquisitionPanel.tsx
@@ -1,9 +1,5 @@
 import React, { useCallback, ReactElement, useEffect, useState } from "react";
-import {
-  downloadAirDCPPItem,
-  getBundlesForComic,
-  sleep,
-} from "../../actions/airdcpp.actions";
+import { getBundlesForComic, sleep } from "../../actions/airdcpp.actions";
 import { SearchQuery, PriorityEnum, SearchResponse } from "threetwo-ui-typings";
 import { RootState, SearchInstance } from "threetwo-ui-typings";
 import ellipsize from "ellipsize";
@@ -13,6 +9,7 @@ import { isEmpty, isNil, map } from "lodash";
 import { useStore } from "../../store";
 import { useShallow } from "zustand/react/shallow";
 import { useQuery } from "@tanstack/react-query";
+import axios from "axios";

 interface IAcquisitionPanelProps {
  query: any;
@@ -28,14 +25,22 @@ export const AcquisitionPanel = (
    airDCPPSocketInstance,
    airDCPPClientConfiguration,
    airDCPPSessionInformation,
+    airDCPPDownloadTick,
  } = useStore(
    useShallow((state) => ({
      airDCPPSocketInstance: state.airDCPPSocketInstance,
      airDCPPClientConfiguration: state.airDCPPClientConfiguration,
      airDCPPSessionInformation: state.airDCPPSessionInformation,
+      airDCPPDownloadTick: state.airDCPPDownloadTick,
    })),
  );

+  interface SearchData {
+    query: Pick<SearchQuery, "pattern"> & Partial<Omit<SearchQuery, "pattern">>;
+    hub_urls: string[] | undefined | null;
+    priority: PriorityEnum;
+  }
+
  /**
   * Get the hubs list from an AirDCPP Socket
   */
@@ -43,34 +48,15 @@ export const AcquisitionPanel = (
    queryKey: ["hubs"],
    queryFn: async () => await airDCPPSocketInstance.get(`hubs`),
  });
-
+  const { comicObjectId } = props;
  const issueName = props.query.issue.name || "";
-  // const { settings } = props;
  const sanitizedIssueName = issueName.replace(/[^a-zA-Z0-9 ]/g, " ");

-  // Selectors for picking state
-  // const airDCPPSearchResults = useSelector((state: RootState) => {
-  //   return state.airdcpp.searchResults;
-  // });
-  // const isAirDCPPSearchInProgress = useSelector(
-  //   (state: RootState) => state.airdcpp.isAirDCPPSearchInProgress,
-  // );
-  // const searchInfo = useSelector(
-  //   (state: RootState) => state.airdcpp.searchInfo,
-  // );
-  // const searchInstance: SearchInstance = useSelector(
-  //   (state: RootState) => state.airdcpp.searchInstance,
-  // );
-
-  // const settings = useSelector((state: RootState) => state.settings.data);
-  // const airDCPPConfiguration = useContext(AirDCPPSocketContext);
-  interface SearchData {
-    query: Pick<SearchQuery, "pattern"> & Partial<Omit<SearchQuery, "pattern">>;
-    hub_urls: string[] | undefined | null;
-    priority: PriorityEnum;
-  }
  const [dcppQuery, setDcppQuery] = useState({});
  const [airDCPPSearchResults, setAirDCPPSearchResults] = useState([]);
+  const [airDCPPSearchStatus, setAirDCPPSearchStatus] = useState(false);
+  const [airDCPPSearchInstance, setAirDCPPSearchInstance] = useState({});
+  const [airDCPPSearchInfo, setAirDCPPSearchInfo] = useState({});

  // Construct a AirDC++ query based on metadata inferred, upon component mount
  // Pre-populate the search input with the search string, so that
@@ -88,15 +74,18 @@ export const AcquisitionPanel = (
    setDcppQuery(dcppSearchQuery);
  }, []);

+  /**
+   * Method to perform a search via an AirDC++ websocket
+   * @param {SearchData} data - a SearchData query
+   * @param {any} ADCPPSocket - an intialized AirDC++ socket instance
+   */
  const search = async (data: SearchData, ADCPPSocket: any) => {
    try {
      if (!ADCPPSocket.isConnected()) {
        await ADCPPSocket();
      }
      const instance: SearchInstance = await ADCPPSocket.post("search");
-      // dispatch({
-      //   type: AIRDCPP_SEARCH_IN_PROGRESS,
-      // });
+      setAirDCPPSearchStatus(true);

      // We want to get notified about every new result in order to make the user experience better
      await ADCPPSocket.addListener(
@@ -142,6 +131,9 @@ export const AcquisitionPanel = (
          const currentInstance = await ADCPPSocket.get(
            `search/${instance.id}`,
          );
+          setAirDCPPSearchInstance(currentInstance);
+          setAirDCPPSearchInfo(searchInfo);
+          console.log("Asdas", airDCPPSearchInfo);
          if (currentInstance.result_count === 0) {
            // ...nothing was received, show an informative message to the user
            console.log("No more search results.");
@@ -149,11 +141,8 @@ export const AcquisitionPanel = (

          // 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,
-          // });
+          setAirDCPPSearchInstance(instance);
+          setAirDCPPSearchStatus(false);
        },
        instance.id,
      );
@@ -164,6 +153,68 @@ export const AcquisitionPanel = (
      throw error;
    }
  };
+
+  /**
+   * Method to download a bundle associated with a search result from AirDC++
+   * @param {Number} searchInstanceId - description
+   * @param {String} resultId - description
+   * @param {String} comicObjectId - description
+   * @param {String} name - description
+   * @param {Number} size - description
+   * @param {any} type - description
+   * @param {any} ADCPPSocket - description
+   * @returns {void}  - description
+   */
+  const download = async (
+    searchInstanceId: Number,
+    resultId: String,
+    comicObjectId: String,
+    name: String,
+    size: Number,
+    type: any,
+    ADCPPSocket: any,
+  ): void => {
+    try {
+      if (!ADCPPSocket.isConnected()) {
+        await ADCPPSocket.connect();
+      }
+      let bundleDBImportResult = {};
+      const downloadResult = await ADCPPSocket.post(
+        `search/${searchInstanceId}/results/${resultId}/download`,
+      );
+
+      if (!isNil(downloadResult)) {
+        bundleDBImportResult = await axios({
+          method: "POST",
+          url: `http://localhost:3000/api/library/applyAirDCPPDownloadMetadata`,
+          headers: {
+            "Content-Type": "application/json; charset=utf-8",
+          },
+          data: {
+            bundleId: downloadResult.bundle_info.id,
+            comicObjectId,
+            name,
+            size,
+            type,
+          },
+        });
+
+        //         dispatch({
+        //           type: AIRDCPP_RESULT_DOWNLOAD_INITIATED,
+        //           downloadResult,
+        //           bundleDBImportResult,
+        //         });
+        //
+        //         dispatch({
+        //           type: IMS_COMIC_BOOK_DB_OBJECT_FETCHED,
+        //           comicBookDetail: bundleDBImportResult.data,
+        //           IMS_inProgress: false,
+        //         });
+      }
+    } catch (error) {
+      throw error;
+    }
+  };
  const getDCPPSearchResults = async (searchQuery) => {
    const manualQuery = {
      query: {
@@ -209,7 +260,6 @@ export const AcquisitionPanel = (
    },
    [],
  );
-  console.log("yaman", airDCPPSearchResults);
  return (
    <>
      <div className="comic-detail columns">
@@ -245,7 +295,7 @@ export const AcquisitionPanel = (
                      <button
                        type="submit"
                        className={
-                          false
+                          airDCPPSearchStatus
                            ? "button is-loading is-warning"
                            : "button is-success is-light"
                        }
@@ -273,6 +323,60 @@ export const AcquisitionPanel = (
        )}
      </div>

+      {/* AirDC++ search instance details */}
+      {!isNil(airDCPPSearchInstance) &&
+        !isEmpty(airDCPPSearchInfo) &&
+        !isNil(hubs) && (
+          <div className="columns">
+            <div className="column is-one-quarter is-size-7">
+              <div className="card">
+                <div className="card-content">
+                  <dl>
+                    <dt>
+                      <div className="tags mb-1">
+                        {hubs.map((value, idx) => (
+                          <span className="tag is-warning" key={idx}>
+                            {value.identity.name}
+                          </span>
+                        ))}
+                      </div>
+                    </dt>
+                    <dt>
+                      Query:
+                      <span className="has-text-weight-semibold">
+                        {airDCPPSearchInfo.query.pattern}
+                      </span>
+                    </dt>
+                    <dd>
+                      Extensions:
+                      <span className="has-text-weight-semibold">
+                        {airDCPPSearchInfo.query.extensions.join(", ")}
+                      </span>
+                    </dd>
+                    <dd>
+                      File type:
+                      <span className="has-text-weight-semibold">
+                        {airDCPPSearchInfo.query.file_type}
+                      </span>
+                    </dd>
+                  </dl>
+                </div>
+              </div>
+            </div>
+            <div className="column is-one-quarter is-size-7">
+              <div className="card">
+                <div className="card-content">
+                  <dl>
+                    <dt>Search Instance: {airDCPPSearchInstance.id}</dt>
+                    <dt>Owned by {airDCPPSearchInstance.owner}</dt>
+                    <dd>Expires in: {airDCPPSearchInstance.expires_in}</dd>
+                  </dl>
+                </div>
+              </div>
+            </div>
+          </div>
+        )}
+
      {/* AirDC++ results */}
      <div className="columns">
        {!isNil(airDCPPSearchResults) && !isEmpty(airDCPPSearchResults) ? (
@@ -342,12 +446,14 @@ export const AcquisitionPanel = (
                        <button
                          className="button is-small is-light is-success"
                          onClick={() =>
-                            downloadDCPPResult(
-                              searchInstance.id,
+                            download(
+                              airDCPPSearchInstance.id,
                              result.id,
+                              comicObjectId,
                              result.name,
                              result.size,
                              result.type,
+                              airDCPPSocketInstance,
                            )
                          }
                        >
--- a/src/client/components/ComicDetail/ActionMenu/Menu.tsx
+++ b/src/client/components/ComicDetail/ActionMenu/Menu.tsx
@@ -69,17 +69,29 @@ export const Menu = (props): ReactElement => {
        break;
    }
  };
+  const customStyles = {
+    option: (base, { data, isDisabled, isFocused, isSelected }) => {
+      return {
+        ...base,
+        backgroundColor: isFocused ? "gray" : "black",
+      };
+    },
+    control: (base) => ({
+      ...base,
+      backgroundColor: "black",
+      border: "1px solid #CCC",
+    }),
+  };

  return (
    <Select
-      className="basic-single"
-      classNamePrefix="select"
      components={{ Placeholder }}
      placeholder={
        <span>
          <i className="fa-solid fa-list"></i> Actions
        </span>
      }
+      styles={customStyles}
      name="actions"
      isSearchable={false}
      options={filteredActionOptions}
--- a/src/client/components/ComicDetail/ComicDetail.tsx
+++ b/src/client/components/ComicDetail/ComicDetail.tsx
@@ -47,6 +47,8 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => {
      inferredMetadata,
      sourcedMetadata: { comicvine, locg, comicInfo },
      acquisition,
+      createdAt,
+      updatedAt,
    },
    userSettings,
  } = data;
@@ -246,46 +248,30 @@ 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 className="columns is-multiline">
-              <div className="column is-narrow">
+            <div>
+              <div className="flex flex-row mt-5">
                <Card
                  imageUrl={url}
-                  orientation={"vertical"}
+                  orientation={"cover-only"}
                  hasDetails={false}
-                  cardContainerStyle={{ maxWidth: 275 }}
                />
-                {/* action dropdown */}
-                <div className="mt-4 is-size-7">
-                  <Menu
-                    data={data.data}
-                    handlers={{ setSlidingPanelContentId, setVisible }}
-                  />
-                </div>
-              </div>
+
                {/* raw file details */}
-              <div className="column">
                {!isUndefined(rawFileDetails) &&
                  !isEmpty(rawFileDetails.cover) && (
-                    <>
+                    <div className="grid">
                      <RawFileDetails
                        data={{
                          rawFileDetails: rawFileDetails,
                          inferredMetadata: inferredMetadata,
+                          created_at: createdAt,
+                          updated_at: updatedAt,
                        }}
                      />
-                      {/* Read comic button */}
-                      <button
-                        className="button is-success is-light"
-                        onClick={() => openModal(rawFileDetails.filePath)}
-                      >
-                        <i className="fa-solid fa-book-open mr-2"></i>
-                        Read
-                      </button>

                      {/* <Modal
                      style={{ content: { marginTop: "2rem" } }}
@@ -305,8 +291,15 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => {
                        />
                      )}
                    </Modal> */}
-                    </>
+                    </div>
                  )}
+                {/* action dropdown */}
+                {/* <div className="mt-4 is-size-7">
+                  <Menu
+                    data={data.data}
+                    handlers={{ setSlidingPanelContentId, setVisible }}
+                  />
+                </div> */}
              </div>
            </div>

--- a/src/client/components/ComicDetail/DownloadProgressTick.tsx
+++ b/src/client/components/ComicDetail/DownloadProgressTick.tsx
@@ -4,9 +4,9 @@ import React, { ReactElement } from "react";
 export const DownloadProgressTick = (props): ReactElement => {
  return (
    <div>
-      <h4 className="is-size-6">{props.data.name}</h4>
+      <h4 className="is-size-5">{props.data.name}</h4>
      <div>
-        <span className="is-size-3 has-text-weight-semibold">
+        <span className="is-size-4 has-text-weight-semibold">
          {prettyBytes(props.data.downloaded_bytes)} of{" "}
          {prettyBytes(props.data.size)}{" "}
        </span>
@@ -20,13 +20,12 @@ export const DownloadProgressTick = (props): ReactElement => {
          %
        </progress>
      </div>
-      <div className="is-size-5">
-        {prettyBytes(props.data.speed)} per second.
-      </div>
-      <div className="is-size-5">
+      <div className="is-size-6 mt-1 mb-2">
+        <p>{prettyBytes(props.data.speed)} per second.</p>
        Time left:
        {Math.round(parseInt(props.data.seconds_left) / 60)}
      </div>
+
      <div>{props.data.target}</div>
    </div>
  );
--- a/src/client/components/ComicDetail/RawFileDetails.tsx
+++ b/src/client/components/ComicDetail/RawFileDetails.tsx
@@ -2,79 +2,138 @@ import React, { ReactElement } from "react";
 import PropTypes from "prop-types";
 import prettyBytes from "pretty-bytes";
 import { isEmpty } from "lodash";
+import { format, parseISO } from "date-fns";

 export const RawFileDetails = (props): ReactElement => {
-  const { rawFileDetails, inferredMetadata } = props.data;
+  const { rawFileDetails, inferredMetadata, created_at, updated_at } =
+    props.data;
+  const PaperClipIcon = () => <></>;
  return (
    <>
-      <div className="comic-detail raw-file-details column is-three-fifths">
-        <dl>
-          <dt>Raw File Details</dt>
-          <dd className="is-size-7">
+      <div className="max-w-2xl ml-5">
+        <div className="px-4 sm:px-6">
+          <p className="text-gray-500">
+            <span className="text-xl">{rawFileDetails.name}</span>
+          </p>
+        </div>
+        <div className="px-4 py-5 sm:px-6">
+          <dl className="grid grid-cols-1 gap-x-4 gap-y-4 sm:grid-cols-2">
+            <div className="sm:col-span-1">
+              <dt className="text-sm font-medium text-gray-500">
+                Raw File Details
+              </dt>
+              <dd className="mt-1 text-sm text-gray-900">
                {rawFileDetails.containedIn +
                  "/" +
                  rawFileDetails.name +
                  rawFileDetails.extension}
              </dd>
-          <dd>
-            <div className="field is-grouped mt-2">
-              <div className="control">
-                <div className="tags has-addons">
-                  <span className="tag">Size</span>
-                  <span className="tag is-info is-light">
-                    {prettyBytes(rawFileDetails.fileSize)}
-                  </span>
-                </div>
-              </div>
-              <div className="control">
-                <div className="tags has-addons">
-                  <span className="tag">Extension</span>
-                  <span className="tag is-primary is-light">
-                    {rawFileDetails.extension}
-                  </span>
-                </div>
-              </div>
-              <div className="control">
-                <div className="tags has-addons">
-                  <span className="tag">MIME type</span>
-                  <span className="tag is-primary is-light">
-                    {rawFileDetails.mimeType}
-                  </span>
-                </div>
-              </div>
-            </div>
-          </dd>
-        </dl>
-      </div>
-
-      <div className="content comic-detail raw-file-details mt-3 column is-three-fifths">
-        <dl>
-          {/* inferred metadata */}
-          <dt>Inferred Issue Metadata</dt>
-          <dd>
-            <div className="field is-grouped mt-2">
-              <div className="control">
-                <div className="tags has-addons">
-                  <span className="tag">Name</span>
-                  <span className="tag is-info is-light">
-                    {inferredMetadata.issue.name}
-                  </span>
-                </div>
            </div>
+            <div className="sm:col-span-1">
+              <dt className="text-sm font-medium text-gray-500">
+                Inferred Issue Metadata
+              </dt>
+              <dd className="mt-1 text-sm text-gray-900">
+                Series Name: {inferredMetadata.issue.name}
                {!isEmpty(inferredMetadata.issue.number) ? (
-                <div className="control">
-                  <div className="tags has-addons">
-                    <span className="tag">Number</span>
                  <span className="tag is-primary is-light">
                    {inferredMetadata.issue.number}
                  </span>
-                  </div>
-                </div>
                ) : null}
-            </div>
              </dd>
+            </div>
+            <div className="sm:col-span-1">
+              <dt className="text-sm font-medium text-gray-500">MIMEType</dt>
+              <dd className="mt-1 text-sm text-gray-900">
+                {/* File extension */}
+                <span className="inline-flex items-center bg-slate-50 text-slate-800 text-xs font-medium px-2 rounded-md dark:text-slate-900 dark:bg-slate-400">
+                  <span className="pr-1 pt-1">
+                    <i className="icon-[solar--zip-file-bold-duotone] w-5 h-5"></i>
+                  </span>
+
+                  <span className="text-md text-slate-500 dark:text-slate-900">
+                    {rawFileDetails.mimeType}
+                  </span>
+                </span>
+              </dd>
+              <dd className="text-sm text-gray-900"></dd>
+            </div>
+            <div className="sm:col-span-1">
+              <dt className="text-sm font-medium text-gray-500">File Size</dt>
+              <dd className="mt-1 text-sm text-gray-900">
+                {/* size */}
+                <span className="inline-flex items-center bg-slate-50 text-slate-800 text-xs font-medium px-2 rounded-md dark:text-slate-900 dark:bg-slate-400">
+                  <span className="pr-1 pt-1">
+                    <i className="icon-[solar--mirror-right-bold-duotone] w-5 h-5"></i>
+                  </span>
+
+                  <span className="text-md text-slate-500 dark:text-slate-900">
+                    {prettyBytes(rawFileDetails.fileSize)}
+                  </span>
+                </span>
+              </dd>
+            </div>
+            <div className="sm:col-span-2">
+              <dt className="text-sm font-medium text-gray-500">
+                Import Details
+              </dt>
+              <dd className="mt-1 text-sm text-gray-900">
+                {format(parseISO(created_at), "dd MMMM, yyyy")},{" "}
+                {format(parseISO(created_at), "h aaaa")}
+              </dd>
+            </div>
+            <div className="sm:col-span-2">
+              <dt className="text-sm font-medium text-gray-500">Attachments</dt>
+              <dd className="mt-1 text-sm text-gray-900">
+                <ul
+                  role="list"
+                  className="divide-y divide-gray-200 rounded-md border border-gray-200"
+                >
+                  <li className="flex items-center justify-between py-3 pl-3 pr-4 text-sm">
+                    <div className="flex w-0 flex-1 items-center">
+                      <PaperClipIcon
+                        className="h-5 w-5 flex-shrink-0 text-gray-400"
+                        aria-hidden="true"
+                      />
+                      <span className="ml-2 w-0 flex-1 truncate">
+                        resume_back_end_developer.pdf
+                      </span>
+                    </div>
+                    <div className="ml-4 flex-shrink-0">
+                      <a
+                        href="#"
+                        className="font-medium text-indigo-600 hover:text-indigo-500"
+                      >
+                        Download
+                      </a>
+                    </div>
+                  </li>
+                  <li className="flex items-center justify-between py-3 pl-3 pr-4 text-sm">
+                    <div className="flex w-0 flex-1 items-center">
+                      {/* Read comic button */}
+                      <button
+                        className="button is-success is-light"
+                        onClick={() => {}}
+                      >
+                        <i className="fa-solid fa-book-open mr-2"></i>
+                        Read
+                      </button>
+                    </div>
+                    <div className="ml-4 flex-shrink-0">
+                      <a
+                        href="#"
+                        className="font-medium text-indigo-600 hover:text-indigo-500"
+                      >
+                        Download
+                      </a>
+                    </div>
+                  </li>
+                </ul>
+              </dd>
+            </div>
          </dl>
        </div>
+      </div>
    </>
  );
 };
@@ -102,5 +161,7 @@ RawFileDetails.propTypes = {
        subtitle: PropTypes.string,
      }),
    }),
+    created_at: PropTypes.string,
+    updated_at: PropTypes.string,
  }),
 };
--- a/src/client/components/ComicDetail/TabControls.tsx
+++ b/src/client/components/ComicDetail/TabControls.tsx
@@ -11,19 +11,20 @@ export const TabControls = (props): ReactElement => {
    setActive(filteredTabs[0].id);
  }, [acquisition]);

-  console.log(filteredTabs);
  return (
    <>
-      <div className="tabs">
-        <ul>
+      <div className="hidden sm:block mt-7">
+        <div className="border-b border-gray-200">
+          <nav className="-mb-px flex gap-6" aria-label="Tabs">
            {filteredTabs.map(({ id, name, icon }) => (
-            <li
+              <a
                key={id}
-              className={id === active ? "is-active" : ""}
+                className="inline-flex shrink-0 items-center gap-2 border-b-2 border-transparent px-1 pb-4 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700"
+                aria-current="page"
                onClick={() => setActive(id)}
              >
                {/* Downloads tab and count badge */}
-              <a>
+                {/* <a>
                {id === 6 && !isNil(acquisition.directconnect) ? (
                  <span className="download-icon-labels">
                    <i className="fa-solid fa-download"></i>
@@ -35,10 +36,12 @@ export const TabControls = (props): ReactElement => {
                  <span className="icon is-small">{icon}</span>
                )}
                {name}
+              </a> */}
+                {name}
              </a>
-            </li>
            ))}
-        </ul>
+          </nav>
+        </div>
      </div>
      {filteredTabs.map(({ id, content }) => {
        return active === id ? content : null;
--- a/src/client/components/Dashboard/Dashboard.tsx
+++ b/src/client/components/Dashboard/Dashboard.tsx
@@ -11,10 +11,40 @@ import {
  getComicBooks,
 } from "../../actions/fileops.actions";
 import { getLibraryStatistics } from "../../actions/comicinfo.actions";
-import { isEmpty, isNil } from "lodash";
+import { isEmpty, isNil, isUndefined } from "lodash";
 import Header from "../shared/Header";
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import axios from "axios";
+import { Card } from "../shared/Carda";
+import {
+  LIBRARY_SERVICE_BASE_URI,
+  LIBRARY_SERVICE_HOST,
+} from "../../constants/endpoints";
+import {
+  determineCoverFile,
+  determineExternalMetadata,
+} from "../../shared/utils/metadata.utils";

 export const Dashboard = (): ReactElement => {
+  const { data: recentComics } = useQuery({
+    queryFn: async () =>
+      await axios({
+        url: `${LIBRARY_SERVICE_BASE_URI}/getComicBooks`,
+        method: "POST",
+        data: {
+          paginationOptions: {
+            page: 0,
+            limit: 5,
+            sort: { updatedAt: "-1" },
+          },
+          predicate: { "acquisition.source.wanted": false },
+          comicStatus: "recent",
+        },
+      }),
+    queryKey: ["recentComics"],
+  });
+
+  console.log("hari om", recentComics);
  //   useEffect(() => {
  //     dispatch(fetchVolumeGroups());
  //     dispatch(
@@ -56,9 +86,102 @@ export const Dashboard = (): ReactElement => {
  //     (state: RootState) => state.comicInfo.libraryStatistics,
  //   );
  return (
-    <div className="container">
-      <section className="section">
-        <h1 className="title">Dashboard</h1>
+    <div className="container mx-auto max-w-full">
+      <section>
+        <h1>Dashboard</h1>
+        <div className="grid grid-cols-5 gap-6">
+          {recentComics?.data.docs.map(
+            (
+              {
+                _id,
+                rawFileDetails,
+                sourcedMetadata: { comicvine, comicInfo, locg },
+                inferredMetadata,
+                acquisition: {
+                  source: { name },
+                },
+              },
+              idx,
+            ) => {
+              const { issueName, url } = determineCoverFile({
+                rawFileDetails,
+                comicvine,
+                comicInfo,
+                locg,
+              });
+              const { issue, coverURL, icon } = determineExternalMetadata(
+                name,
+                {
+                  comicvine,
+                  comicInfo,
+                  locg,
+                },
+              );
+              const isComicVineMetadataAvailable =
+                !isUndefined(comicvine) &&
+                !isUndefined(comicvine.volumeInformation);
+
+              return (
+                <Card
+                  orientation="vertical-2"
+                  key={idx}
+                  imageUrl={`${LIBRARY_SERVICE_HOST}/${rawFileDetails.cover.filePath}`}
+                  title={inferredMetadata.issue.name}
+                  hasDetails
+                >
+                  <div>
+                    <dt className="sr-only">Address</dt>
+                    <dd className="text-sm my-1 flex flex-row gap-1">
+                      {/* Issue number */}
+                      <span className="inline-flex items-center bg-slate-50 text-slate-800 text-xs font-medium px-2.5 py-0.5 rounded-md dark:text-slate-900 dark:bg-slate-400">
+                        <span className="pr-1 pt-1">
+                          <i className="icon-[solar--hashtag-outline]"></i>
+                        </span>
+                        <span className="text-md text-slate-900">
+                          {inferredMetadata.issue.number}
+                        </span>
+                      </span>
+                      {/* File extension */}
+                      <span className="inline-flex items-center bg-slate-50 text-slate-800 text-xs font-medium px-2.5 py-0.5 rounded-md dark:text-slate-900 dark:bg-slate-400">
+                        <span className="pr-1 pt-1">
+                          <i className="icon-[solar--file-bold-duotone] w-4 h-4"></i>
+                        </span>
+
+                        <span className="text-md text-slate-500 dark:text-slate-900">
+                          {rawFileDetails.extension}
+                        </span>
+                      </span>
+                    </dd>
+                  </div>
+
+                  <div className="flex flex-row items-center gap-1 my-2">
+                    <div className="sm:inline-flex sm:shrink-0 sm:items-center sm:gap-2">
+                      {/* ComicInfo.xml presence */}
+                      {!isNil(comicInfo) && !isEmpty(comicInfo) && (
+                        <i className="h-7 w-7 icon-[solar--code-file-bold-duotone] text-slate-500 dark:text-slate-300"></i>
+                      )}
+                      {/* ComicVine metadata presence */}
+                      {isComicVineMetadataAvailable && (
+                        <span className="w-7 h-7">
+                          <img
+                            src="/src/client/assets/img/cvlogo.svg"
+                            alt={"ComicVine metadata detected."}
+                          />
+                        </span>
+                      )}
+                    </div>
+                    {/* Raw file presence  */}
+                    {isNil(rawFileDetails) && (
+                      <span className="h-6 w-5 sm:shrink-0 sm:items-center sm:gap-2">
+                        <i className="icon-[solar--file-corrupted-outline] h-5 w-5" />
+                      </span>
+                    )}
+                  </div>
+                </Card>
+              );
+            },
+          )}
+        </div>
      </section>
    </div>
  );
--- a/src/client/components/Downloads/Downloads.tsx
+++ b/src/client/components/Downloads/Downloads.tsx
@@ -1,13 +1,5 @@
-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 { determineCoverFile } from "../../shared/utils/metadata.utils";
 import MetadataPanel from "../shared/MetadataPanel";
@@ -17,18 +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(
-    (state: RootState) => state.airdcpp.transfers,
-  );
-  const issueBundles = useSelector(
-    (state: RootState) => state.airdcpp.issue_bundles,
-  );
+  // const airDCPPTransfers = useSelector(
+  //   (state: RootState) => state.airdcpp.transfers,
+  // );
+  // const issueBundles = useSelector(
+  //   (state: RootState) => state.airdcpp.issue_bundles,
+  // );
  const [bundles, setBundles] = useState([]);
  // Make the call to get all transfers from AirDC++
  useEffect(() => {
--- a/src/client/components/Import/Import.tsx
+++ b/src/client/components/Import/Import.tsx
@@ -53,25 +53,6 @@ export const Import = (props: IProps): ReactElement => {
      }),
  });

-  // 1a.  Act on each comic issue successfully imported/failed, as indicated
-  //      by the LS_COVER_EXTRACTED/LS_COVER_EXTRACTION_FAILED events
-  socketIOInstance.on("LS_COVER_EXTRACTED", (data) => {
-    const { completedJobCount, importResult } = data;
-    importJobQueue.setJobCount("successful", completedJobCount);
-    importJobQueue.setMostRecentImport(importResult.rawFileDetails.name);
-  });
-  socketIOInstance.on("LS_COVER_EXTRACTION_FAILED", (data) => {
-    const { failedJobCount } = data;
-    importJobQueue.setJobCount("failed", failedJobCount);
-  });
-
-  // 1b.  Clear the localStorage sessionId upon receiving the
-  //      LS_IMPORT_QUEUE_DRAINED event
-  socketIOInstance.on("LS_IMPORT_QUEUE_DRAINED", (data) => {
-    localStorage.removeItem("sessionId");
-    importJobQueue.setStatus("drained");
-    queryClient.invalidateQueries({ queryKey: ["allImportJobResults"] });
-  });
  const toggleQueue = (queueAction: string, queueStatus: string) => {
    socketIOInstance.emit(
      "call",
@@ -94,29 +75,35 @@ export const Import = (props: IProps): ReactElement => {
    switch (status) {
      case "running":
        return (
-          <div className="control">
+          <div>
            <button
-              className="button is-warning is-light"
+              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");
              }}
            >
-              <i className="fa-solid fa-pause mr-2"></i> Pause
+              <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 className="control">
+          <div>
            <button
-              className="button is-success is-light"
+              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");
              }}
            >
-              <i className="fa-solid fa-play mr-2"></i> Resume
+              <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>
        );
@@ -129,17 +116,33 @@ export const Import = (props: IProps): ReactElement => {
    }
  };
  return (
-    <div className="container">
-      <section className="section is-small">
-        <h1 className="title">Import Comics</h1>
-        <article className="message is-dark">
-          <div className="message-body">
-            <p className="mb-2">
-              <span className="tag is-medium is-info is-light">
-                Import Comics
-              </span>
-              will add comics identified from the mapped folder into ThreeTwo's
-              database.
+    <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.
@@ -150,115 +153,132 @@ export const Import = (props: IProps): ReactElement => {
              </p>
            </div>
          </article>
-        <p className="buttons">
+
+          <div className="my-4">
+            {importJobQueue.status === "drained" ||
+              (importJobQueue.status === undefined && (
                <button
-            className={
-              importJobQueue.status === "drained" ||
-              importJobQueue.status === undefined
-                ? "button is-medium"
-                : "button is-loading is-medium"
-            }
+                  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="icon">
-              <i className="fas fa-file-import"></i>
+                  <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>
-            <span>Start Import</span>
                </button>
-        </p>
+              ))}
+          </div>

-        {importJobQueue.status !== "drained" &&
-          !isUndefined(importJobQueue.status) && (
+          {/* Activity */}
+          {(importJobQueue.status === "running" ||
+            importJobQueue.status === "paused") && (
            <>
-              <table className="table">
-                <thead>
-                  <tr>
-                    <th>Completed Jobs</th>
-                    <th>Failed Jobs</th>
-                    <th>Queue Controls</th>
-                    <th>Queue Status</th>
-                  </tr>
-                </thead>
-
-                <tbody>
-                  <tr>
-                    <th>
-                      {importJobQueue.successfulJobCount > 0 && (
-                        <div className="box has-background-success-light has-text-centered">
-                          <span className="is-size-2 has-text-weight-bold">
+              <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}
-                          </span>
+                    </dd>
+                    <dt className="text-lg font-medium text-gray-500">
+                      imported
+                    </dt>
                  </div>
-                      )}
-                    </th>
-                    <td>
-                      {importJobQueue.failedJobCount > 0 && (
-                        <div className="box has-background-danger has-text-centered">
-                          <span className="is-size-2 has-text-weight-bold">
+                  {/* 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>
-                      )}
-                    </td>
-
-                    <td>{renderQueueControls(importJobQueue.status)}</td>
-                    <td>
-                      {importJobQueue.status !== undefined ? (
-                        <span className="tag is-warning">
-                          {importJobQueue.status}
-                        </span>
-                      ) : null}
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
-              Imported{" "}
-              <span className="has-text-weight-bold">
-                {importJobQueue.mostRecentImport}
-              </span>
            </>
          )}

          {/* Past imports */}
          {!isLoading && !isEmpty(data?.data) && (
-          <>
-            <h3 className="subtitle is-4 mt-5">Past Imports</h3>
-            <table className="table">
-              <thead>
+            <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 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>Time Started</th>
-                  <th>Session Id</th>
-                  <th>Imported</th>
-                  <th>Failed</th>
+                      <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>
+                  <tbody className="divide-y divide-gray-200">
                    {data?.data.map((jobResult, id) => {
                      return (
                        <tr key={id}>
-                      <td>
+                          <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>
+                          <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>
-                        <span className="tag is-success">
+                          <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>
-                        <span className="tag is-danger">
+                          <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>
@@ -266,8 +286,10 @@ export const Import = (props: IProps): ReactElement => {
                    })}
                  </tbody>
                </table>
-          </>
+              </div>
+            </div>
          )}
+        </div>
      </section>
    </div>
  );
--- a/src/client/components/Library/Library.tsx
+++ b/src/client/components/Library/Library.tsx
@@ -7,6 +7,7 @@ import T2Table from "../shared/T2Table";
 import ellipsize from "ellipsize";
 import { useQuery, keepPreviousData } 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.
@@ -53,45 +54,42 @@ export const Library = (): ReactElement => {

  const ComicInfoXML = (value) => {
    return value.data ? (
-      <div className="comicvine-metadata mt-3">
-        <dl>
-          <span className="tags has-addons is-size-7">
-            <span className="tag">Series</span>
-            <span className="tag is-warning is-light">
-              {ellipsize(value.data.series[0], 25)}
+      <dl className="flex flex-col text-md p-3 ml-4 my-3 rounded-lg dark:bg-yellow-500 bg-yellow-300 w-max">
+        {/* Series Name */}
+        <span className="inline-flex items-center bg-slate-50 text-slate-800 text-xs font-medium px-2 rounded-md dark:text-slate-900 dark:bg-slate-400">
+          <span className="pr-1 pt-1">
+            <i className="icon-[solar--bookmark-square-minimalistic-bold-duotone] w-5 h-5"></i>
+          </span>
+          <span className="text-md text-slate-900 dark:text-slate-900">
+            {ellipsize(value.data.series[0], 45)}
          </span>
        </span>
-        </dl>
-        <dl>
-          <div className="field is-grouped is-grouped-multiline">
-            <div className="control">
-              <span className="tags has-addons is-size-7  mt-2">
-                <span className="tag">Pages</span>
-                <span className="tag is-info is-light has-text-weight-bold">
-                  {value.data.pagecount[0]}
+        <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>
-            </div>
-
-            <div className="control">
-              <span className="tags has-addons is-size-7 mt-2">
-                <span className="tag">Issue</span>
+          {/* Issue number */}
+          <span className="inline-flex items-center bg-slate-50 text-slate-800 text-xs px-2 rounded-md dark:text-slate-900 dark:bg-slate-400">
+            <span className="pr-1 pt-1">
+              <i className="icon-[solar--hashtag-outline] w-3.5 h-3.5"></i>
+            </span>
+            <span className="text-slate-900 dark:text-slate-900">
              {!isNil(value.data.number) && (
-                  <span className="tag has-text-weight-bold is-success is-light">
-                    {parseInt(value.data.number[0], 10)}
-                  </span>
+                <span>{parseInt(value.data.number[0], 10)}</span>
              )}
            </span>
-            </div>
+          </span>
        </div>
      </dl>
-      </div>
    ) : null;
  };

-  const WantedStatus = ({ value }) => {
-    return !value ? <span className="tag is-info is-light">Wanted</span> : null;
-  };
  const columns = useMemo(
    () => [
      {
@@ -110,14 +108,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()} />
-              ) : (
-                <span className="tag mt-5">No ComicInfo.xml</span>
-              ),
+              ) : null,
          },
        ],
      },
@@ -125,28 +119,41 @@ export const Library = (): ReactElement => {
        header: "Additional Metadata",
        columns: [
          {
-            header: "Publisher",
-            accessorKey: "_source.sourcedMetadata.comicvine.volumeInformation",
+            header: "Date of Import",
+            accessorKey: "_source.createdAt",
            cell: (info) => {
-              return (
-                !isNil(info.getValue()) && (
-                  <h6 className="is-size-7 has-text-weight-bold">
-                    {info.getValue().publisher.name}
-                  </h6>
-                )
-              );
+              return !isNil(info.getValue()) ? (
+                <div className="text-xs w-max ml-3 my-3 text-slate-600">
+                  <p>{format(parseISO(info.getValue()), "dd MMMM, yyyy")} </p>
+                  {format(parseISO(info.getValue()), "h aaaa")}
+                </div>
+              ) : null;
            },
          },
          {
-            header: "Something",
-            accessorKey: "_source.acquisition.source.wanted",
-            cell: (info) => {
-              !isUndefined(info.getValue()) ? (
-                <WantedStatus value={info.getValue().toString()} />
-              ) : (
-                "Nothing"
-              );
-            },
+            header: "Downloads",
+            accessorKey: "_source.acquisition",
+            cell: (info) => (
+              <div className="flex flex-col gap-2 ml-3 my-3">
+                <span className="inline-flex items-center w-fit bg-slate-50 text-slate-800 text-xs px-2 rounded-md dark:text-slate-900 dark:bg-slate-400">
+                  <span className="pr-1 pt-1">
+                    <i className="icon-[solar--folder-path-connect-bold-duotone] w-5 h-5"></i>
+                  </span>
+                  <span className="text-md text-slate-900 dark:text-slate-900">
+                    DC++: {info.getValue().directconnect.downloads.length}
+                  </span>
+                </span>
+
+                <span className="inline-flex w-fit items-center bg-slate-50 text-slate-800 text-xs px-2 rounded-md dark:text-slate-900 dark:bg-slate-400">
+                  <span className="pr-1 pt-1">
+                    <i className="icon-[solar--magnet-bold-duotone] w-5 h-5"></i>
+                  </span>
+                  <span className="text-md text-slate-900 dark:text-slate-900">
+                    Torrent: {info.getValue().torrent.downloads.length}
+                  </span>
+                </span>
+              </div>
+            ),
          },
        ],
      },
@@ -189,11 +196,23 @@ export const Library = (): ReactElement => {
  //   value: PropTypes.bool.isRequired,
  // };
  return (
-    <section className="container">
-      <div className="section">
-        <div className="header-area">
-          <h1 className="title">Library</h1>
+    <div>
+      <section>
+        <header className="bg-slate-200 dark:bg-slate-500">
+          <div className="mx-auto max-w-screen-xl px-2 py-2 sm:px-6 sm:py-8 lg:px-8 lg:py-4">
+            <div className="sm:flex sm:items-center sm:justify-between">
+              <div className="text-center sm:text-left">
+                <h1 className="text-2xl font-bold text-gray-900 dark:text-white sm:text-3xl">
+                  Library
+                </h1>
+
+                <p className="mt-1.5 text-sm text-gray-500 dark:text-white">
+                  Browse your comic book collection.
+                </p>
              </div>
+            </div>
+          </div>
+        </header>
        {!isUndefined(searchResults?.hits) ? (
          <div>
            <div className="library">
@@ -210,29 +229,36 @@ export const Library = (): ReactElement => {
            </div>
          </div>
        ) : (
-          <div className="columns">
-            <div className="column is-two-thirds">
-              <article className="message is-link">
-                <div className="message-body">
+          <>
+            <article
+              role="alert"
+              className="rounded-lg max-w-screen-md border-s-4 border-yellow-500 bg-yellow-50 p-4 dark:border-s-4 dark:border-yellow-600 dark:bg-yellow-300 dark:text-slate-600"
+            >
+              <div>
+                <p>
                  No comics were found in the library, Elasticsearch reports no
                  indices. Try importing a few comics into the library and come
                  back.
+                </p>
              </div>
            </article>
+            <div className="block max-w-md p-6 bg-white border border-gray-200 my-3 rounded-lg shadow dark:bg-slate-400 dark:border-gray-700">
+              <pre className="text-sm font-hasklig text-slate-700 dark:text-slate-700">
                {!isUndefined(searchResults?.data?.meta?.body) ? (
-                <pre>
+                  <p>
                    {JSON.stringify(
                      searchResults.data.meta.body.error.root_cause,
                      null,
                      4,
                    )}
-                </pre>
+                  </p>
                ) : null}
+              </pre>
            </div>
-          </div>
+          </>
        )}
-      </div>
      </section>
+    </div>
  );
 };

--- a/src/client/components/Library/SearchBar.tsx
+++ b/src/client/components/Library/SearchBar.tsx
@@ -25,36 +25,42 @@ export const SearchBar = (): ReactElement => {
    // );
  }, []);
  return (
-    <div className="box">
    <Form
      onSubmit={handleSubmit}
      initialValues={{}}
      render={({ handleSubmit, form, submitting, pristine, values }) => (
        <form onSubmit={handleSubmit}>
-            <div className="field is-grouped">
-              <div className="control search is-expanded">
          <Field name="search">
            {({ input, meta }) => {
              return (
+                <div className="flex flex-row w-full">
+                  <div className="flex flex-row bg-slate-300 dark:bg-slate-500 rounded-l-lg p-2 min-w-full">
+                    <div className="w-10 text-gray-400">
+                      <i className="icon-[solar--magnifer-bold-duotone] h-7 w-7" />
+                    </div>
+
                    <input
                      {...input}
-                        className="input main-search-bar is-medium"
+                      className="bg-slate-300 dark:bg-slate-500 outline-none text-lg text-gray-700 w-full"
+                      type="text"
+                      id="search"
                      placeholder="Type an issue/volume name"
                    />
-                    );
-                  }}
-                </Field>
                  </div>
-              <div className="control">
-                <button className="button is-medium" type="submit">
+
+                  <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>
-            </div>
+              );
+            }}
+          </Field>
        </form>
      )}
    />
-    </div>
  );
 };

--- a/src/client/components/Settings/AirDCPPSettings/AirDCPPHubsForm.tsx
+++ b/src/client/components/Settings/AirDCPPSettings/AirDCPPHubsForm.tsx
@@ -35,19 +35,16 @@ export const AirDCPPHubsForm = (): ReactElement => {
   * Get the hubs list from an AirDCPP Socket
   */
  const { data: hubs } = useQuery({
-    queryKey: [],
+    queryKey: ["hubs"],
    queryFn: async () => await airDCPPSocketInstance.get(`hubs`),
-    enabled: !!settings,
  });
  let hubList = {};
-  if (!isEmpty(hubs)) {
-    console.log("hs", hubs);
+  if (!isNil(hubs)) {
    hubList = hubs.map(({ hub_url, identity }) => ({
      value: hub_url,
      label: identity.name,
    }));
  }
-  console.log(hubList);
  const { mutate } = useMutation({
    mutationFn: async (values) =>
      await axios({
--- a/src/client/components/Settings/AirDCPPSettings/AirDCPPSettingsConfirmation.tsx
+++ b/src/client/components/Settings/AirDCPPSettings/AirDCPPSettingsConfirmation.tsx
@@ -3,11 +3,21 @@ import React, { ReactElement } from "react";
 export const AirDCPPSettingsConfirmation = (settingsObject): ReactElement => {
  const { settings } = settingsObject;
  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">
+    <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>
@@ -19,13 +29,10 @@ export const AirDCPPSettingsConfirmation = (settingsObject): ReactElement => {
            <dt>Active Sessions: {settings.user.active_sessions}</dt>
            <dt>
              Permissions:{" "}
-                <pre>
              {JSON.stringify(settings.user.permissions, undefined, 2)}
-                </pre>
            </dt>
          </dl>
-          </div>
-        </div>
+        </p>
      </div>
    </div>
  );
--- a/src/client/components/Settings/AirDCPPSettings/AirDCPPSettingsForm.tsx
+++ b/src/client/components/Settings/AirDCPPSettings/AirDCPPSettingsForm.tsx
@@ -71,7 +71,6 @@ export const AirDCPPSettingsForm = (): ReactElement => {
  const initFormData = !isUndefined(airDCPPClientConfiguration)
    ? airDCPPClientConfiguration
    : {};
-  console.log(airDCPPClientConfiguration);
  return (
    <>
      <ConnectionForm
--- a/src/client/components/Settings/QbittorrentSettings/QbittorrentConnectionForm.tsx
+++ b/src/client/components/Settings/QbittorrentSettings/QbittorrentConnectionForm.tsx
@@ -1,9 +1,10 @@
 import React, { ReactElement } from "react";
 import { ConnectionForm } from "../../shared/ConnectionForm/ConnectionForm";
-import { useQuery, useMutation } from "@tanstack/react-query";
+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"],
@@ -13,7 +14,8 @@ export const QbittorrentConnectionForm = (): ReactElement => {
        method: "GET",
      }),
  });
-  const hostDetails = data?.data.bittorrent.client.host;
+  console.log(data);
+  const hostDetails = data?.data?.bittorrent?.client?.host;
  // connect to qbittorrent client
  const { data: connectionDetails } = useQuery({
    queryKey: [],
@@ -35,7 +37,6 @@ export const QbittorrentConnectionForm = (): ReactElement => {
      }),
    enabled: !!connectionDetails,
  });
-  console.log(qbittorrentClientInfo?.data);
  // Update action using a mutation
  const { mutate } = useMutation({
    mutationFn: async (values) =>
@@ -44,6 +45,11 @@ export const QbittorrentConnectionForm = (): ReactElement => {
        method: "POST",
        data: { settingsPayload: values, settingsKey: "bittorrent" },
      }),
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: ["settings", "qbittorrentClientInfo"],
+      });
+    },
  });

  if (isError)
@@ -61,9 +67,24 @@ export const QbittorrentConnectionForm = (): ReactElement => {
          submitHandler={mutate}
        />

-        <pre className="mt-5">
+        <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>
      </>
    );
  }
--- a/src/client/components/Settings/Settings.tsx
+++ b/src/client/components/Settings/Settings.tsx
@@ -50,24 +50,45 @@ export const Settings = (props: ISettingsProps): ReactElement => {
    },
  ];
  return (
-    <section className="container">
-      <div className="columns">
-        <div className="section column is-one-quarter">
-          <h1 className="title">Settings</h1>
-          <aside className="menu">
+    <div>
+      <section>
+        <header className="bg-slate-200 dark:bg-slate-500">
+          <div className="mx-auto max-w-screen-xl px-2 py-2 sm:px-6 sm:py-8 lg:px-8 lg:py-4">
+            <div className="sm:flex sm:items-center sm:justify-between">
+              <div className="text-center sm:text-left">
+                <h1 className="text-2xl font-bold text-gray-900 dark:text-white sm:text-3xl">
+                  Settings
+                </h1>
+
+                <p className="mt-1.5 text-sm text-gray-500 dark:text-white">
+                  Import comics into the ThreeTwo library.
+                </p>
+              </div>
+            </div>
+          </div>
+        </header>
+        <div className="flex flex-cols max-w-screen-xl mx-auto">
+          <aside className="px-4 py-4 sm:px-6 sm:py-8 lg:px-8">
            {map(settingsObject, (settingObject, idx) => {
              return (
-                <div key={idx}>
-                  <p className="menu-label">{settingObject.category}</p>
+                <div
+                  className="w-64 py-2 text-slate-700 dark:text-slate-400"
+                  key={idx}
+                >
+                  <h3 className="text-l pb-2">
+                    {settingObject.category.toUpperCase()}
+                  </h3>
                  {/* First level children */}
                  {!isUndefined(settingObject.children) ? (
-                    <ul className="menu-list" key={settingObject.id}>
+                    <ul key={settingObject.id}>
                      {map(settingObject.children, (item, idx) => {
                        return (
-                          <li key={idx}>
+                          <li key={idx} className="mb-2">
                            <a
                              className={
-                                item.id.toString() === active ? "is-active" : ""
+                                item.id.toString() === active
+                                  ? "is-active flex items-center"
+                                  : "flex items-center"
                              }
                              onClick={() => setActive(item.id.toString())}
                            >
@@ -75,14 +96,14 @@ export const Settings = (props: ISettingsProps): ReactElement => {
                            </a>
                            {/* Second level children */}
                            {!isUndefined(item.children) ? (
-                              <ul>
+                              <ul className="pl-4 mt-2">
                                {map(item.children, (item, idx) => (
-                                  <li key={item.id}>
+                                  <li key={item.id} className="mb-2">
                                    <a
                                      className={
                                        item.id.toString() === active
-                                          ? "is-active"
-                                          : ""
+                                          ? "is-active flex items-center"
+                                          : "flex items-center"
                                      }
                                      onClick={() =>
                                        setActive(item.id.toString())
@@ -103,10 +124,9 @@ export const Settings = (props: ISettingsProps): ReactElement => {
              );
            })}
          </aside>
-        </div>

          {/* content for settings */}
-        <div className="section column is-half mt-6">
+          <div className="max-w-screen-xl">
            <div className="content">
              {map(settingsContent, ({ id, content }) =>
                active === id ? content : null,
@@ -115,6 +135,7 @@ export const Settings = (props: ISettingsProps): ReactElement => {
          </div>
        </div>
      </section>
+    </div>
  );
 };

--- a/src/client/components/shared/Carda.tsx
+++ b/src/client/components/shared/Carda.tsx
@@ -4,8 +4,8 @@ import { isEmpty, isNil } from "lodash";

 interface ICardProps {
  orientation: string;
-  imageUrl: string;
-  hasDetails: boolean;
+  imageUrl?: string;
+  hasDetails?: boolean;
  title?: PropTypes.ReactElementLike | null;
  children?: PropTypes.ReactNodeLike;
  borderColorClass?: string;
@@ -80,6 +80,85 @@ const renderCard = (props: ICardProps): ReactElement => {
          </div>
        </div>
      );
+
+    case "vertical-2":
+      return (
+        <div className="block rounded-md w-fit h-fit shadow-md shadow-white-400 bg-gray-200 dark:bg-slate-500">
+          <img
+            alt="Home"
+            src={props.imageUrl}
+            className="rounded-t-md object-cover"
+          />
+
+          <div className="mt-2 px-2">
+            <dl>
+              <div>
+                <dd className="text-md text-slate-500 dark:text-black">
+                  {props.title}
+                </dd>
+              </div>
+            </dl>
+
+            {props.hasDetails && <>{props.children}</>}
+          </div>
+        </div>
+      );
+
+    case "horizontal-small":
+      return (
+        <>
+          <div className="flex flex-row justify-start align-top gap-3 bg-slate-200 h-fit rounded-md shadow-md shadow-white-400">
+            {/* thumbnail */}
+            <div className="rounded-md overflow-hidden">
+              <img src={props.imageUrl} className="object-cover h-20 w-20" />
+            </div>
+            {/* details */}
+            <div className="w-fit h-fit pl-1 pr-2 py-1">
+              <p className="text-sm">{props.title}</p>
+            </div>
+          </div>
+        </>
+      );
+
+    case "horizontal-medium":
+      return (
+        <>
+          <div className="flex flex-row items-center align-top gap-3 bg-slate-200 h-fit p-2 rounded-md shadow-md shadow-white-400">
+            {/* thumbnail */}
+            <div className="rounded-md overflow-hidden">
+              <img src={props.imageUrl} />
+            </div>
+            {/* details */}
+            <div className="pl-1 pr-2 py-1">
+              <p className="text-sm">{props.title}</p>
+              {props.hasDetails && <>{props.children}</>}
+            </div>
+          </div>
+        </>
+      );
+
+    case "cover-only":
+      return (
+        <>
+          {/* thumbnail */}
+          <div className="rounded-lg shadow-lg overflow-hidden w-fit h-fit">
+            <img src={props.imageUrl} />
+          </div>
+        </>
+      );
+    case "card-with-info-panel":
+      return (
+        <>
+          <div className="flex flex-row">
+            {/* thumbnail */}
+            <div className="rounded-md overflow-hidden w-fit h-fit">
+              <img src={props.imageUrl} />
+            </div>
+            {/* myata-dyata */}
+          </div>
+        </>
+      );
+
    default:
      return <></>;
  }
--- a/src/client/components/shared/ConnectionForm/ConnectionForm.tsx
+++ b/src/client/components/shared/ConnectionForm/ConnectionForm.tsx
@@ -14,91 +14,141 @@ export const ConnectionForm = ({
        onSubmit={submitHandler}
        initialValues={initialData}
        render={({ handleSubmit }) => (
-          <form onSubmit={handleSubmit}>
-            <h2>{formHeading}</h2>
-            <label className="label">Hostname</label>
-            <div className="field has-addons">
-              <p className="control">
-                <span className="select">
-                  <Field name="protocol" component="select">
+          <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>
-                </span>
-              </p>
-              <div className="control is-expanded">
+                <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>
+                  <div className="flex flex-col">
+                    <label className="block px-2 py-1">Hostname</label>
                    <input
                      {...input}
                      type="text"
-                        placeholder="hostname"
-                        className="input"
+                      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="is-size-7 has-text-danger">
+                        <span className="text-sm text-red-400 px-2">
                          {meta.error}
                        </span>
                      )}
                    </div>
+                  </div>
                )}
              </Field>
-              </div>
-              <p className="control">
+
+              {/* port */}
+              <div className="flex flex-col">
+                <label className="block px-2 py-1">Port</label>
                <Field
                  name="port"
                  component="input"
-                  className="input"
-                  placeholder="port"
+                  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"
                />
-              </p>
              </div>
-            <div className="field">
-              <label className="label">Credentials</label>
-              <div className="field-body">
-                <div className="field">
-                  <p className="control is-expanded has-icons-left">
+            </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="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="icon is-small is-left">
-                      <i className="fa-solid fa-user-ninja"></i>
+                  <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>
-                  </p>
                </div>
-                <div className="field">
-                  <p className="control is-expanded has-icons-left has-icons-right">
+              </div>
+              <div>
+                <div>
+                  <label className="block py-1">Password</label>
+                  <div className="relative">
                    <Field
                      name="password"
                      component="input"
                      type="password"
-                      className="input"
+                      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="icon is-small is-left">
-                      <i className="fa-solid fa-lock"></i>
+                    <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>
-                  </p>
                  </div>
                </div>
              </div>
-            <div className="field is-grouped">
-              <p className="control">
-                <button type="submit" className="button is-primary">
+            </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>
-              </p>

-              <p className="control">
-                <button type="submit" className="button is-danger">
+              <button
+                type="submit"
+                className="flex space-x-1 sm:mt-5 sm:flex-row sm:items-center rounded-lg border border-red-400 dark:border-red-200 bg-red-200 px-4 py-2 text-gray-500 hover:bg-transparent hover:text-red-600 focus:outline-none focus:ring active:text-indigo-500"
+              >
                {!isEmpty(initialData) && "Delete"}
              </button>
-              </p>
            </div>
          </form>
        )}
--- a/src/client/components/shared/MetadataPanel.tsx
+++ b/src/client/components/shared/MetadataPanel.tsx
@@ -31,61 +31,53 @@ export const MetadataPanel = (props: IMetadatPanelProps): ReactElement => {
    {
      name: "rawFileDetails",
      content: () => (
-        <dl>
+        <dl className="dark:bg-[#647587] bg-slate-200 p-3 rounded-lg">
          <dt>
-            <h6
-              className="name has-text-weight-medium mb-1"
-              style={props.titleStyle}
-            >
-              {issueName}
-            </h6>
+            <p className="text-lg">{issueName}</p>
          </dt>
-          <dd className="is-size-7">
-            Is a part of{" "}
-            <span className="has-text-weight-semibold">
+          <dd className="text-sm">
+            is a part of{" "}
+            <span className="underline">
              {inferredMetadata.issue.name}
+              <i className="icon-[solar--arrow-right-up-outline] w-4 h-4" />
            </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"
-                    style={props.tagsStyle}
-                  >
-                    {rawFileDetails.extension}
+          {/* Issue number */}
+          {inferredMetadata.issue.number && (
+            <dd className="my-2">
+              <span className="inline-flex items-center bg-slate-50 text-slate-800 text-xs font-medium px-2 rounded-md dark:text-slate-900 dark:bg-slate-400">
+                <span className="pr-1 pt-1">
+                  <i className="icon-[solar--hashtag-outline] w-3.5 h-3.5"></i>
                </span>
-                  <span
-                    className="tag is-success is-light has-text-weight-semibold"
-                    style={props.tagsStyle}
-                  >
+                <span className="text-md text-slate-900 dark:text-slate-900">
+                  {inferredMetadata.issue.number}
+                </span>
+              </span>
+            </dd>
+          )}
+          <dd className="flex flex-row gap-2 w-max">
+            {/* File extension */}
+            <span className="inline-flex items-center bg-slate-50 text-slate-800 text-xs font-medium px-2 rounded-md dark:text-slate-900 dark:bg-slate-400">
+              <span className="pr-1 pt-1">
+                <i className="icon-[solar--zip-file-bold-duotone] w-5 h-5"></i>
+              </span>
+
+              <span className="text-md text-slate-500 dark:text-slate-900">
                {rawFileDetails.mimeType}
              </span>
-                  <span
-                    className="tag is-success is-light"
-                    style={props.tagsStyle}
-                  >
+            </span>
+
+            {/* size */}
+            <span className="inline-flex items-center bg-slate-50 text-slate-800 text-xs font-medium px-2 rounded-md dark:text-slate-900 dark:bg-slate-400">
+              <span className="pr-1 pt-1">
+                <i className="icon-[solar--mirror-right-bold-duotone] w-5 h-5"></i>
+              </span>
+
+              <span className="text-md text-slate-500 dark:text-slate-900">
                {prettyBytes(rawFileDetails.fileSize)}
              </span>
            </span>
-              </div>
-              <div className="control">
-                {inferredMetadata.issue.number && (
-                  <div className="tags has-addons">
-                    <span className="tag is-light" style={props.tagsStyle}>
-                      Issue #
-                    </span>
-                    <span className="tag is-warning" style={props.tagsStyle}>
-                      {inferredMetadata.issue.number}
-                    </span>
-                  </div>
-                )}
-              </div>
-
-            </div>
-            
          </dd>
        </dl>
      ),
@@ -208,25 +200,14 @@ export const MetadataPanel = (props: IMetadatPanelProps): ReactElement => {
  });

  return (
-    <div className="column" style={props.containerStyle}>
-      <div className="comic-detail issue-metadata">
-        <dl>
-          <dd>
-            <div className="columns mt-2">
-              <div className="column is-3">
+    <div className="flex gap-5 my-3">
      <Card
        imageUrl={url}
-                  orientation={"vertical"}
+        orientation={"cover-only"}
        hasDetails={false}
        imageStyle={props.imageStyle}
-                // cardContainerStyle={{ maxWidth: 200 }}
      />
-              </div>
-              <div className="column">{metadataPanel.content()}</div>
-            </div>
-          </dd>
-        </dl>
-      </div>
+      <div>{metadataPanel.content()}</div>
    </div>
  );
 };
--- a/src/client/components/shared/Navbar2.tsx
+++ b/src/client/components/shared/Navbar2.tsx
@@ -0,0 +1,121 @@
+import React, { ReactElement, useState } from "react";
+import { Link } from "react-router-dom";
+import { useDarkMode } from "../../hooks/useDarkMode";
+
+export const Navbar2 = (): ReactElement => {
+  const [colorTheme, setTheme] = useDarkMode();
+  const [darkMode, setDarkMode] = useState(false);
+
+  const toggleDarkMode = (checked) => {
+    setTheme(colorTheme);
+    setDarkMode(!darkMode);
+  };
+
+  return (
+    <header className="bg-white dark:bg-gray-900 gap-8 px-5 py-5 h-18 border-b-2 border-gray-300 dark:border-slate-200">
+      {/* Logo */}
+      <div className="mx-auto flex">
+        <img src="/src/client/assets/img/threetwo.png" alt="ThreeTwo!" />
+
+        {/* Main Navigation */}
+        <div className="flex flex-1 items-center justify-end md:justify-between">
+          <nav
+            aria-label="ThreeTwo Main Navigation"
+            className="hidden md:block"
+          >
+            <ul className="flex items-center gap-6 text-md">
+              <li>
+                <Link
+                  to="/dashboard"
+                  className="text-gray-500 transition hover:text-gray-500/75 dark:text-white dark:hover:text-white/75"
+                >
+                  Dashboard
+                </Link>
+              </li>
+
+              <li>
+                <Link
+                  to="/import"
+                  className="text-gray-500 transition hover:text-gray-500/75 dark:text-white dark:hover:text-white/75"
+                >
+                  Import
+                </Link>
+              </li>
+
+              <li>
+                <Link
+                  to="/library"
+                  className="text-gray-500 transition hover:text-gray-500/75 dark:text-white dark:hover:text-white/75"
+                >
+                  Library
+                </Link>
+              </li>
+
+              <li>
+                <a
+                  className="text-gray-500 transition hover:text-gray-500/75 dark:text-white dark:hover:text-white/75"
+                  href="/"
+                >
+                  Volumes
+                </a>
+              </li>
+
+              <li>
+                <a
+                  className="text-gray-500 transition hover:text-gray-500/75 dark:text-white dark:hover:text-white/75"
+                  href="/"
+                >
+                  Downloads
+                </a>
+              </li>
+            </ul>
+          </nav>
+
+          {/* Right-most Nav */}
+          <div className="flex items-center gap-4">
+            <ul className="flex items-center gap-6 text-md">
+              {/* Settings Icon and text */}
+              <li>
+                <Link
+                  to="/settings"
+                  className="flex items-center space-x-1 text-gray-500 transition hover:text-gray-500/75 dark:text-white dark:hover:text-white/75"
+                >
+                  <span className="w-5 h-5">
+                    <i className="icon-[solar--settings-outline] h-5 w-5"></i>
+                  </span>
+                  <span>Settings</span>
+                </Link>
+              </li>
+
+              <li>
+                {/* Light/Dark Mode toggle */}
+                <div className="flex items-center space-x-2">
+                  <span className="text-gray-600 dark:text-white">Light</span>
+                  <label
+                    htmlFor="toggle"
+                    className="relative inline-flex items-center"
+                  >
+                    <input
+                      type="checkbox"
+                      id="toggle"
+                      className="sr-only"
+                      checked={darkMode}
+                      onChange={toggleDarkMode}
+                    />
+                    <span className="bg-gray-300 w-10 h-6 rounded-full"></span>
+                    <span
+                      className={`bg-white w-4 h-4 rounded-full absolute left-1 top-1 transition-transform duration-300 ease-in-out ${
+                        darkMode ? "translate-x-4" : ""
+                      }`}
+                    ></span>
+                  </label>
+                  <span className="text-gray-600 dark:text-white">Dark</span>
+                </div>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </header>
+  );
+};
--- a/src/client/components/shared/T2Table.tsx
+++ b/src/client/components/shared/T2Table.tsx
@@ -70,67 +70,46 @@ export const T2Table = (tableOptions): ReactElement => {
  });

  return (
-    <>
-      <div className="columns table-controls">
+    <div className="container max-w-fit mx-14">
+      <div>
        {/* Search bar */}
-        <div className="column is-half">
+        <div className="flex flex-row gap-2 justify-between mt-5">
          <SearchBar />
-        </div>
+
          {/* pagination controls */}
-        <nav className="pagination columns">
-          <div className="mr-4 has-text-weight-semibold has-text-left">
-            <p className="is-size-5">
+          <div>
            Page {pageIndex} of {Math.ceil(totalPages / pageSize)}
-            </p>
            <p>{totalPages} comics in all</p>
-          </div>
-          <div className="field has-addons">
-            <div className="control">
+            {/* Prev/Next buttons */}
+            <div className="inline-flex flex-row mt-4 mb-4">
              <button
-                className="button"
                onClick={() => goToPreviousPage()}
                disabled={pageIndex === 1}
+                className="dark:bg-slate-500 bg-slate-400 rounded-l border-slate-600 border-r pt-2 px-2"
              >
-                <i className="fas fa-chevron-left"></i>
+                <i className="icon-[solar--arrow-left-linear] h-6 w-6"></i>
              </button>
-            </div>
-            <div className="control">
              <button
-                className="button"
+                className="dark:bg-slate-500 bg-slate-400 rounded-r pt-2 px-2"
                onClick={() => goToNextPage()}
                disabled={pageIndex > Math.floor(totalPages / pageSize)}
              >
-                <i className="fas fa-chevron-right"></i>
+                <i className="icon-[solar--arrow-right-linear] h-6 w-6"></i>
              </button>
            </div>
-
-            <div className="field has-addons ml-5">
-              <p className="control">
-                <button className="button">
-                  <span className="icon is-small">
-                    <i className="fa-solid fa-list"></i>
-                  </span>
-                </button>
-              </p>
-              <p className="control">
-                <button className="button">
-                  <Link to="/library-grid">
-                    <span className="icon is-small">
-                      <i className="fa-solid fa-image"></i>
-                    </span>
-                  </Link>
-                </button>
-              </p>
          </div>
        </div>
-        </nav>
      </div>
-      <table className="table is-hoverable">
-        <thead>
+      <table className="table-auto overflow-auto">
+        <thead className="sticky top-0 bg-slate-200 dark:bg-slate-500">
          {table.getHeaderGroups().map((headerGroup, idx) => (
            <tr key={headerGroup.id}>
              {headerGroup.headers.map((header, idx) => (
-                <th key={header.id} colSpan={header.colSpan}>
+                <th
+                  key={header.id}
+                  colSpan={header.colSpan}
+                  className="px-3 py-3"
+                >
                  {header.isPlaceholder
                    ? null
                    : flexRender(
@@ -147,17 +126,22 @@ export const T2Table = (tableOptions): ReactElement => {
          {table.getRowModel().rows.map((row, idx) => {
            return (
              <tr key={row.id} onClick={() => rowClickHandler(row)}>
-                {row.getVisibleCells().map((cell) => (
-                  <td key={cell.id}>
-                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                {row.getVisibleCells().map((cell) => {
+                  return (
+                    <td key={cell.id} className="align-top">
+                      {flexRender(
+                        cell.column.columnDef.cell,
+                        cell.getContext(),
+                      )}
                    </td>
-                ))}
+                  );
+                })}
              </tr>
            );
          })}
        </tbody>
      </table>
-    </>
+    </div>
  );
 };

--- a/src/client/hooks/useDarkMode.tsx
+++ b/src/client/hooks/useDarkMode.tsx
@@ -0,0 +1,17 @@
+import React, { useEffect, useState } from "react";
+
+export const useDarkMode = () => {
+  const [theme, setTheme] = useState(localStorage.theme);
+  const colorTheme = theme === "dark" ? "light" : "dark";
+
+  useEffect(() => {
+    const root = window.document.documentElement;
+    root.classList.remove(colorTheme);
+    root.classList.add(theme);
+
+    // save theme to local storage
+    localStorage.setItem("theme", theme);
+  }, [theme, colorTheme]);
+
+  return [colorTheme, setTheme];
+};
--- a/src/client/store/index.ts
+++ b/src/client/store/index.ts
@@ -5,6 +5,7 @@ import { SOCKET_BASE_URI } from "../constants/endpoints";
 import { produce } from "immer";
 import AirDCPPSocket from "../services/DcppSearchService";
 import axios from "axios";
+import { QueryClient } from "@tanstack/react-query";

 /*  Broadly, this file sets up:
 *    1. The zustand-based global client state
@@ -23,6 +24,7 @@ export const useStore = create((set, get) => ({
      airDCPPSocketConnected: value,
    })),
  airDCPPDownloadTick: {},
+  airDCPPTransfers: {},
  // Socket.io state
  socketIOInstance: {},

@@ -68,6 +70,7 @@ export const useStore = create((set, get) => ({
 }));

 const { getState, setState } = useStore;
+const queryClient = new QueryClient();

 /** Socket.IO initialization **/
 // 1. Fetch sessionId from localStorage
@@ -114,6 +117,42 @@ socketIOInstance.on("RESTORE_JOB_COUNTS_AFTER_SESSION_RESTORATION", (data) => {
  }));
 });

+// 1a.  Act on each comic issue successfully imported/failed, as indicated
+//      by the LS_COVER_EXTRACTED/LS_COVER_EXTRACTION_FAILED events
+socketIOInstance.on("LS_COVER_EXTRACTED", (data) => {
+  const { completedJobCount, importResult } = data;
+  setState((state) => ({
+    importJobQueue: {
+      ...state.importJobQueue,
+      successfulJobCount: completedJobCount,
+      mostRecentImport: importResult.rawFileDetails.name,
+    },
+  }));
+});
+socketIOInstance.on("LS_COVER_EXTRACTION_FAILED", (data) => {
+  const { failedJobCount } = data;
+  setState((state) => ({
+    importJobQueue: {
+      ...state.importJobQueue,
+      failedJobCount,
+    },
+  }));
+});
+
+// 1b.  Clear the localStorage sessionId upon receiving the
+//      LS_IMPORT_QUEUE_DRAINED event
+socketIOInstance.on("LS_IMPORT_QUEUE_DRAINED", (data) => {
+  localStorage.removeItem("sessionId");
+  setState((state) => ({
+    importJobQueue: {
+      ...state.importJobQueue,
+      status: "drained",
+    },
+  }));
+  console.log("a", queryClient);
+  queryClient.invalidateQueries({ queryKey: ["allImportJobResults"] });
+});
+
 /**
 * Method to init AirDC++ Socket with supplied settings
 * @param configuration - credentials, and hostname details to init AirDC++ connection
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -0,0 +1,25 @@
+import { addDynamicIconSelectors } from "@iconify/tailwind";
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
+  darkMode: "class",
+  theme: {
+    fontFamily: {
+      sans: ["PP Object Sans Regular", "sans-serif"],
+      hasklig: ["Hasklig Regular", "monospace"],
+    },
+    container: {
+      center: true,
+      padding: {
+        DEFAULT: "1rem",
+        sm: "2rem",
+        lg: "4rem",
+        xl: "5rem",
+        "2xl": "6rem",
+      },
+    },
+  },
+
+  plugins: [addDynamicIconSelectors()],
+};
--- a/yarn.lock
+++ b/yarn.lock
Author	SHA1	Message	Date
Rishi Ghan	7739d1ced7	Merge branch 'main' into dark-mode-refactor	2023-12-21 16:21:34 -05:00
Rishi Ghan	0d438ab913	❌ Removing yarn.lockfile	2023-12-21 16:16:31 -05:00
Rishi Ghan	a7b9138f52	🏗️ Fixed fonts, and comic detail page first draft	2023-12-21 15:19:28 -05:00
Rishi Ghan	0872aa4d8a	🏗️ Cleaned the table further	2023-12-20 00:08:16 -05:00
Rishi Ghan	4d1d29a361	🏗️ Added icons and details to metadata	2023-12-18 23:31:43 -05:00
Rishi Ghan	b1d8951842	🏗️ Refactoring table for library	2023-12-18 18:02:15 -05:00
Rishi Ghan	1180a2b42c	🧹 Formatting in connection confirmation panels	2023-12-16 22:39:29 -05:00
Rishi Ghan	5ffcb0d642	🪑 Refactoring the table	2023-12-16 22:02:56 -05:00
Rishi Ghan	f293d9e3ba	🔠 Added a monospace font	2023-12-15 18:13:25 -05:00
Rishi Ghan	1f6d6ca6b6	🏗️ Form refactor	2023-12-14 22:25:48 -05:00
Rishi Ghan	a7508df0b3	🔧 Styling form inputs	2023-12-13 21:43:21 -05:00
Rishi Ghan	81b590157e	🏗️ Cleaning up forms and cards	2023-12-13 12:30:14 -05:00
Rishi Ghan	72a308801d	🏗️ Added a horizontal medium variant	2023-12-11 14:14:06 -05:00
Rishi Ghan	e1be413ff6	🏗️ Building variants for Cards	2023-12-11 10:51:47 -05:00
Rishi Ghan	435056048b	🏗️ Refactored the card grid on dashboard	2023-12-08 18:16:28 -05:00
Rishi Ghan	026d5832c5	🏗️ Refactored Import socket events	2023-12-06 21:56:58 -06:00
Rishi Ghan	a068b82db3	🏗️ Cleaned up past imports table	2023-12-06 10:58:22 -06:00
Rishi Ghan	c74c443534	🪑 Cleaning up the table styles	2023-12-05 21:40:40 -06:00
Rishi Ghan	701d216e44	🏗️ Building out the import page	2023-12-05 19:23:56 -06:00
Rishi Ghan	4034c4e2b4	🌜 Added Dark mode to the body	2023-12-05 05:24:33 -05:00
Rishi Ghan	9c4f2ae9b0	🏗️ Wiring up the dark mode toggle	2023-12-05 04:57:25 -05:00
Rishi Ghan	a07c0357f0	🔧 Added code for dark mode toggle	2023-12-04 16:41:41 -05:00
Rishi Ghan	4215470871	🔧 Added solar icons	2023-12-04 16:10:00 -05:00
Rishi Ghan	38599fbc78	🖼️ Added solar icons	2023-12-04 12:31:31 -05:00
Rishi Ghan	7f3a1caa3c	🏗️ Migrating Navbar to TailwindCSS	2023-12-04 11:12:44 -05:00
Rishi Ghan	d36138c800	Update App.scss	2023-12-03 22:46:49 -05:00
Rishi Ghan	1ed6a622d4	🌜 Trying dark mode on the react-select	2023-12-03 16:02:54 -05:00
Rishi Ghan	29e0772a10	🌜 Initial Dark Mode support	2023-12-03 15:28:05 -05:00
Rishi Ghan	57b713aca1	🏗️ Refactored the AirDC++ download panel	2023-12-02 11:38:17 -05:00
Rishi Ghan	dfd99e45b6	🔧 Implementing download method	2023-11-29 23:24:34 -05:00
Rishi Ghan	591ecb394c	🔧 Formatted the search query box	2023-11-29 23:08:00 -05:00
Rishi Ghan	145427d3fd	🏗️ Acquisition Panel refactor WIP	2023-11-29 21:22:48 -05:00