🏗️ Changes to ComicDetail section

src/client/components/ComicDetail/ComicDetail.tsx

@@ -185,10 +185,8 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => {
         <i className="h-5 w-5 icon-[solar--code-file-bold-duotone] text-slate-500 dark:text-slate-300" />
       ),
       content: (
-        <div className="columns" key={2}>
-          <div className="column is-three-quarters">
-            {!isNil(comicInfo) && <ComicInfoXML json={comicInfo} />}
-          </div>
+        <div key={2}>
+          {!isNil(comicInfo) && <ComicInfoXML json={comicInfo} />}
         </div>
       ),
       shouldShow: !isEmpty(comicInfo),
@@ -199,9 +197,7 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => {
         <i className="h-5 w-5 icon-[solar--winrar-bold-duotone] text-slate-500 dark:text-slate-300" />
       ),
       name: "Archive Operations",
-      content: <></>,
-      /*
-      <ArchiveOperations data={data.data} key={3} /> */
+      content: <ArchiveOperations data={data.data} key={3} />,
       shouldShow: areRawFileDetailsAvailable,
     },
     {

src/client/components/ComicDetail/ComicDetailContainer.tsx

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

src/client/components/ComicDetail/DownloadsPanel.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useContext, ReactElement, useState } from "react";
 import { RootState } from "threetwo-ui-typings";
-import { isArray, isEmpty, isNil, isUndefined, map } from "lodash";
+import { isEmpty, map } from "lodash";
 import prettyBytes from "pretty-bytes";
 import dayjs from "dayjs";
 import ellipsize from "ellipsize";

src/client/components/ComicDetail/TabControls.tsx

@@ -1,5 +1,5 @@
 import React, { ReactElement, useEffect, useState } from "react";
-import { isEmpty, isNil } from "lodash";
+import { isNil } from "lodash";
 
 export const TabControls = (props): ReactElement => {
   // const comicBookDetailData = useSelector(

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

@@ -6,6 +6,9 @@ import SlidingPane from "react-sliding-pane";
 import { extractComicArchive } from "../../../actions/fileops.actions";
 import { analyzeImage } from "../../../actions/fileops.actions";
 import { Canvas } from "../../shared/Canvas";
+import { useQuery } from "@tanstack/react-query";
+import axios from "axios";
+import { LIBRARY_SERVICE_BASE_URI } from "../../../constants/endpoints";
 
 export const ArchiveOperations = (props): ReactElement => {
   const { data } = props;
@@ -20,7 +23,28 @@ export const ArchiveOperations = (props): ReactElement => {
   //     return state.fileOps.imageAnalysisResults;
   //   });
 
-  const unpackComicArchive = useCallback(() => {
+  const unpackComicArchive = () => {
+    const { data } = useQuery({
+      queryFn: async () =>
+        await axios({
+          method: "POST",
+          url: `${LIBRARY_SERVICE_BASE_URI}/uncompressFullArchive`,
+          headers: {
+            "Content-Type": "application/json; charset=utf-8",
+          },
+          data: {
+            filePath: data.rawFileDetails.filePath,
+            options: {
+              type: "full",
+              purpose: "analysis",
+              imageResizeOptions: {
+                baseWidth: 275,
+              },
+            },
+          },
+        }),
+      queryKey: [""],
+    });
     // dispatch(
     //   extractComicArchive(data.rawFileDetails.filePath, {
     //     type: "full",
@@ -30,7 +54,7 @@ export const ArchiveOperations = (props): ReactElement => {
     //     },
     //   }),
     // );
-  }, []);
+  };
 
   // sliding panel config
   const [visible, setVisible] = useState(false);
@@ -92,22 +116,16 @@ export const ArchiveOperations = (props): ReactElement => {
           ) : null}
         </div>
         {!isEmpty(extractedComicBookArchive) ? (
-          <div className="column mt-5">
-            <Sticky enabled={true} top={70} bottomBoundary={3000}>
-              <div className="card">
-                <div className="card-content">
-                  <span className="has-text-size-4">
-                    {extractedComicBookArchive.length} pages
-                  </span>
-                  <button className="button is-small is-light is-primary is-outlined">
-                    <span className="icon is-small">
-                      <i className="fa-solid fa-compress"></i>
-                    </span>
-                    <span>Convert to CBZ</span>
-                  </button>
-                </div>
-              </div>
-            </Sticky>
+          <div>
+            <span className="has-text-size-4">
+              {extractedComicBookArchive.length} pages
+            </span>
+            <button className="button is-small is-light is-primary is-outlined">
+              <span className="icon is-small">
+                <i className="fa-solid fa-compress"></i>
+              </span>
+              <span>Convert to CBZ</span>
+            </button>
           </div>
         ) : null}
       </div>

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

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