🏗️ Cleaning up useless files

.gitignore

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

package.json

@@ -1,7 +1,7 @@
 {
   "name": "threetwo",
-  "version": "0.0.2",
-  "description": "ThreeTwo! A comic book curator.",
+  "version": "0.1.0",
+  "description": "ThreeTwo! A good comic book curator.",
   "main": "server/index.js",
   "typings": "server/index.js",
   "scripts": {
@@ -19,7 +19,6 @@
     "@dnd-kit/sortable": "^7.0.2",
     "@dnd-kit/utilities": "^3.2.1",
     "@fortawesome/fontawesome-free": "^6.3.0",
-    "@redux-devtools/extension": "^3.2.5",
     "@rollup/plugin-node-resolve": "^15.0.1",
     "@tanstack/react-query": "^5.0.5",
     "@tanstack/react-table": "^8.9.3",
@@ -31,6 +30,7 @@
     "axios-cache-interceptor": "^1.0.1",
     "axios-rate-limit": "^1.3.0",
     "babel-plugin-styled-components": "^2.1.4",
+    "blaze-slider": "^1.9.3",
     "date-fns": "^2.28.0",
     "dayjs": "^1.10.6",
     "ellipsize": "^0.5.1",
@@ -64,7 +64,6 @@
     "react-sliding-pane": "^7.1.0",
     "react-textarea-autosize": "^8.3.4",
     "reapop": "^4.2.1",
-    "slick-carousel": "^1.8.1",
     "socket.io-client": "^4.3.2",
     "styled-components": "^6.1.0",
     "threetwo-ui-typings": "^1.0.14",
@@ -118,8 +117,11 @@
     "rimraf": "^4.1.3",
     "sass": "^1.69.5",
     "storybook": "^7.3.2",
-    "tailwindcss": "^3.3.5",
+    "tailwindcss": "^3.4.1",
     "tui-jsdoc-template": "^1.2.2",
     "typescript": "^5.1.6"
+  },
+  "resolutions": {
+    "jackspeak": "2.1.1"
   }
 }

src/client/components/ComicDetail/ComicVineDetails.tsx

@@ -21,7 +21,7 @@ export const ComicVineDetails = (props): ReactElement => {
                 // cardContainerStyle={{ maxWidth: 200 }}
               />
             </div>
-            <div className="flex flex-col">
+            <div className="flex flex-col gap-5">
               <div className="flex flex-row">
                 <div>
                   {/* Title */}
@@ -50,7 +50,7 @@ export const ComicVineDetails = (props): ReactElement => {
                 </div>
 
                 {/* Publisher details */}
-                <div className="">
+                <div className="ml-8">
                   Published by{" "}
                   <span>{data.volumeInformation.publisher.name}</span>
                   <div>

src/client/components/Dashboard/PullList.tsx

@@ -2,7 +2,6 @@ import { isNil, map } from "lodash";
 import React, { createRef, ReactElement, useCallback, useEffect } from "react";
 import Card from "../shared/Carda";
 import Header from "../shared/Header";
-import Masonry from "react-masonry-css";
 import { useDispatch, useSelector } from "react-redux";
 import { getWeeklyPullList } from "../../actions/comicinfo.actions";
 import { importToDB } from "../../actions/fileops.actions";
@@ -89,9 +88,11 @@ export const PullList = ({ issues }: PullListProps): ReactElement => {
   return (
     <>
       <div className="content">
-        <Header headerContent="Discover"
-                subHeaderContent="Pull List aggregated for the week from League Of Comic Geeks"
-                iconClassNames="fa-solid fa-binoculars mr-2"/>
+        <Header
+          headerContent="Discover"
+          subHeaderContent="Pull List aggregated for the week from League Of Comic Geeks"
+          iconClassNames="fa-solid fa-binoculars mr-2"
+        />
         <div className="field is-grouped">
           {/* select week */}
           <div className="control">

src/client/components/Dashboard/WantedComicsList.tsx

@@ -13,7 +13,6 @@ type WantedComicsListProps = {
 export const WantedComicsList = ({
   comics,
 }: WantedComicsListProps): ReactElement => {
-  console.log("yolo", comics);
   const navigate = useNavigate();
   const navigateToWantedComics = (row) => {
     navigate(`/wanted/all`);
@@ -66,6 +65,28 @@ export const WantedComicsList = ({
                 title={issueName ? titleElement : <span>No Name</span>}
               >
                 <div className="pb-1">
+                  {/* Issue type */}
+                  {isComicBookMetadataAvailable &&
+                  !isNil(
+                    detectIssueTypes(comicvine.volumeInformation.description),
+                  ) ? (
+                    <div className="my-2">
+                      <span className="inline-flex items-center bg-slate-50 text-slate-800 text-xs font-medium px-2.5 py-0.5 rounded-md dark:text-slate-900 dark:bg-slate-400">
+                        <span className="pr-1 pt-1">
+                          <i className="icon-[solar--book-2-line-duotone] w-5 h-5"></i>
+                        </span>
+
+                        <span className="text-md text-slate-500 dark:text-slate-900">
+                          {
+                            detectIssueTypes(
+                              comicvine.volumeInformation.description,
+                            ).displayName
+                          }
+                        </span>
+                      </span>
+                    </div>
+                  ) : null}
+
                   {/* comicVine metadata presence */}
                   {isComicBookMetadataAvailable && (
                     <img
@@ -80,19 +101,6 @@ export const WantedComicsList = ({
                       className="w-7 h-7"
                     />
                   )}
-                  {/* Issue type */}
-                  {isComicBookMetadataAvailable &&
-                  !isNil(
-                    detectIssueTypes(comicvine.volumeInformation.description),
-                  ) ? (
-                    <span className="">
-                      {
-                        detectIssueTypes(
-                          comicvine.volumeInformation.description,
-                        ).displayName
-                      }
-                    </span>
-                  ) : null}
                 </div>
               </Card>
             );

src/client/components/Dashboard/ZeroState.tsx

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

src/client/components/Settings/Settings.tsx

@@ -69,7 +69,7 @@ export const Settings = (props: ISettingsProps): ReactElement => {
           </div>
         </header>
         <div className="flex flex-row">
-          <div className="inset-y-0 w-80 bg-gray-800 text-white h-full overflow-y-auto">
+          <div className="inset-y-0 w-80 dark:bg-gray-800 bg-slate-300 text-white overflow-y-auto">
             <aside className="px-4 py-4 sm:px-6 sm:py-8 lg:px-8">
               {map(settingsObject, (settingObject, idx) => {
                 return (

src/client/constants/comic.model.js

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

src/client/constants/importer.config.ts

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