🏗️ 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 key={2}>
-          <div className="column is-three-quarters">
+          {!isNil(comicInfo) && <ComicInfoXML json={comicInfo} />}
-            {!isNil(comicInfo) && <ComicInfoXML json={comicInfo} />}
-          </div>
         </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: <></>,
+      content: <ArchiveOperations data={data.data} key={3} />,
-      /*
-      <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">
+          <div>
-            <Sticky enabled={true} top={70} bottomBoundary={3000}>
+            <span className="has-text-size-4">
-              <div className="card">
+              {extractedComicBookArchive.length} pages
-                <div className="card-content">
+            </span>
-                  <span className="has-text-size-4">
+            <button className="button is-small is-light is-primary is-outlined">
-                    {extractedComicBookArchive.length} pages
+              <span className="icon is-small">
-                  </span>
+                <i className="fa-solid fa-compress"></i>
-                  <button className="button is-small is-light is-primary is-outlined">
+              </span>
-                    <span className="icon is-small">
+              <span>Convert to CBZ</span>
-                      <i className="fa-solid fa-compress"></i>
+            </button>
-                    </span>
-                    <span>Convert to CBZ</span>
-                  </button>
-                </div>
-              </div>
-            </Sticky>
           </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">
+    <div className="flex">
-      <dl className="has-text-size-7">
+      <dl className="dark:bg-yellow-600 bg-yellow-200 p-3 rounded-lg">
-        <dd className="has-text-weight-medium">{json.series[0]}</dd>
+        <dt>
-        <dd className="mt-2 mb-2">
+          <p className="text-lg">{json.series[0]}</p>
-          <div className="field is-grouped is-grouped-multiline">
+        </dt>
-            <div className="control">
+        <dd className="text-sm">
-              <span className="tags has-addons">
+          published by{" "}
-                <span className="tag">Pages</span>
+          <span className="underline">
-                <span className="tag is-warning is-light">
+            {json.publisher[0]}
-                  {json.publisher[0]}
+            <i className="icon-[solar--arrow-right-up-outline] w-4 h-4" />
+          </span>
+        </dd>
+        <span className="inline-flex flex-row gap-2">
+          {/* Issue number */}
+          {!isUndefined(json.number) && (
+            <dd className="my-2">
+              <span className="inline-flex items-center bg-slate-50 text-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>
+            </dd>
-            <div className="control">
+          )}
-              <span className="tags has-addons">
+          <dd className="my-2">
-                <span className="tag">Issue #</span>
+            {/* Genre */}
-                <span className="tag is-warning is-light">
+            <span className="inline-flex items-center bg-slate-50 text-slate-800 text-xs font-medium px-2 rounded-md dark:text-slate-900 dark:bg-slate-400">
-                  {!isUndefined(json.number) && parseInt(json.number[0], 10)}
+              <span className="pr-1 pt-1">
-                </span>
+                <i className="icon-[solar--sticker-smile-circle-bold-duotone] w-5 h-5"></i>
               </span>
-            </div>
+
-            <div className="control">
+              <span className="text-md text-slate-500 dark:text-slate-900">
-              <span className="tags has-addons">
+                {json.genre[0]}
-                <span className="tag">Pages</span>
-                <span className="tag is-warning is-light">
-                  {json.pagecount[0]}
-                </span>
               </span>
-            </div>
+            </span>
-            {!isUndefined(json.genre) && (
+          </dd>
-              <div className="control">
+        </span>
-                <span className="tags has-addons">
+
-                  <span className="tag">Genre</span>
+        <dd className="my-1">
-                  <span className="tag is-success is-light">
+          {/* Summary */}
-                    {json.genre[0]}
+          {!isUndefined(json.summary) && (
-                  </span>
+            <span className="text-md text-slate-500 dark:text-slate-900">
-                </span>
+              {json.summary[0]}
-              </div>
+            </span>
-            )}
+          )}
-          </div>
         </dd>
         <dd>
-          <span className="is-size-7">{json.notes[0]}</span>
+          {/* Notes */}
-        </dd>
+          <span className="text-sm text-slate-500 dark:text-slate-900">
-        <dd className="mt-1 mb-1">
+            {json.notes[0]}
-          {!isUndefined(json.summary) && json.summary[0]}
+          </span>
         </dd>
       </dl>
     </div>

src/client/components/Library/Library.tsx

@@ -27,7 +27,6 @@ export const Library = (): ReactElement => {
   const [offset, setOffset] = useState(0);
   const [searchQuery, setSearchQuery] = useState({
     query: {},
-
     pagination: {
       size: 25,
       from: offset,
@@ -37,7 +36,10 @@ export const Library = (): ReactElement => {
   });
   const queryClient = useQueryClient();
 
-  // Method to fetch paginated issues
+  /**
+   * Method that queries the Elasticsearch index "comics" for issues specified by the query
+   * @param searchQuery - A searchQuery object that contains the search term, type, and pagination params.
+   */
   const fetchIssues = async (searchQuery) => {
     const { pagination, query, type } = searchQuery;
     return await axios({
@@ -50,6 +52,7 @@ export const Library = (): ReactElement => {
       },
     });
   };
+
   const searchIssues = (e) => {
     queryClient.invalidateQueries({ queryKey: ["comics"] });
     setSearchQuery({
@@ -242,7 +245,7 @@ export const Library = (): ReactElement => {
         {!isUndefined(searchResults?.hits) ? (
           <div>
             <div>
-              <div className="grid grid-cols-2">
+              <div className="my-5 flex self-start ml-32 w-fit">
                 <SearchBar searchHandler={(e) => searchIssues(e)} />
               </div>
               <T2Table

src/client/components/Library/SearchBar.tsx

@@ -1,28 +1,10 @@
-import React, { ReactElement, useCallback } from "react";
+import React, { ReactElement } from "react";
 import PropTypes from "prop-types";
 import { Form, Field } from "react-final-form";
 import { Link } from "react-router-dom";
-import { searchIssue } from "../../actions/fileops.actions";
 
 export const SearchBar = (props): ReactElement => {
   const { searchHandler } = props;
-  const handleSubmit = useCallback((e) => {
-    //   searchIssue(
-    //     {
-    //       query: {
-    //         volumeName: e.search,
-    //       },
-    //     },
-    //     {
-    //       pagination: {
-    //         size: 25,
-    //         from: 0,
-    //       },
-    //       type: "volumeName",
-    //       trigger: "libraryPage",
-    //     },
-    //   ),
-  }, []);
   return (
     <Form
       onSubmit={searchHandler}

src/client/components/shared/T2Table.tsx

@@ -1,6 +1,5 @@
 import React, { ReactElement, useMemo, useState } from "react";
 import PropTypes from "prop-types";
-import { Link } from "react-router-dom";
 import {
   ColumnDef,
   flexRender,