🧱 Broke out more components out of ComicDetail page

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

@@ -0,0 +1,70 @@
+import React, { ReactElement, useCallback } from "react";
+import { useSelector, useDispatch } from "react-redux";
+import Select, { components } from "react-select";
+import { fetchComicVineMatches } from "../../../actions/fileops.actions";
+
+export const Menu = (props): ReactElement => {
+  const { data } = props;
+  const { setSlidingPanelContentId, setVisible } = props.handlers;
+  const dispatch = useDispatch();
+  const openDrawerWithCVMatches = useCallback(() => {
+    dispatch(fetchComicVineMatches(data));
+    setSlidingPanelContentId("CVMatches");
+    setVisible(true);
+  }, [dispatch, data]);
+  //  Actions menu options and handler
+  const CVMatchLabel = (
+    <span>
+      <i className="fa-solid fa-wand-magic"></i> Match on ComicVine
+    </span>
+  );
+
+  const editLabel = (
+    <span>
+      <i className="fa-regular fa-pen-to-square"></i> Edit Metadata
+    </span>
+  );
+  const deleteLabel = (
+    <span>
+      <i className="fa-regular fa-trash-alt"></i> Delete Comic
+    </span>
+  );
+  const Placeholder = (props) => {
+    return <components.Placeholder {...props} />;
+  };
+  const actionOptions = [
+    { value: "match-on-comic-vine", label: CVMatchLabel },
+    { value: "edit-metdata", label: editLabel },
+    { value: "delete-comic", label: deleteLabel },
+  ];
+
+  const handleActionSelection = (action) => {
+    switch (action.value) {
+      case "match-on-comic-vine":
+        openDrawerWithCVMatches();
+        break;
+      default:
+        console.log("No valid action selected.");
+        break;
+    }
+  };
+
+  return (
+    <Select
+      className="basic-single"
+      classNamePrefix="select"
+      components={{ Placeholder }}
+      placeholder={
+        <span>
+          <i className="fa-solid fa-list"></i> Actions
+        </span>
+      }
+      name="actions"
+      isSearchable={false}
+      options={actionOptions}
+      onChange={handleActionSelection}
+    />
+  );
+};
+
+export default Menu;

src/client/components/ComicDetail/RawFileDetails.tsx

@@ -12,7 +12,7 @@ export const RawFileDetails = (props): ReactElement => {
           {data.containedIn + "/" + data.name + data.extension}
         </dd>
         <dd>
-          <div className="field is-grouped">
+          <div className="field is-grouped mt-2">
             <div className="control">
               <div className="tags has-addons">
                 <span className="tag">Size</span>

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

@@ -0,0 +1,77 @@
+import React, { ReactElement, useCallback } from "react";
+import { useSelector, useDispatch } from "react-redux";
+import { DnD } from "../../DnD";
+import { isEmpty } from "lodash";
+import Sticky from "react-stickynode";
+import { extractComicArchive } from "../../../actions/comicinfo.actions";
+
+export const ArchiveOperations = (props): ReactElement => {
+  const { data } = props;
+  const isComicBookExtractionInProgress = useSelector(
+    (state: RootState) => state.fileOps.comicBookExtractionInProgress,
+  );
+  const extractedComicBookArchive = useSelector(
+    (state: RootState) => state.fileOps.extractedComicBookArchive,
+  );
+
+  const dispatch = useDispatch();
+  const unpackComicArchive = useCallback(() => {
+    dispatch(
+      extractComicArchive(
+        data.rawFileDetails.containedIn +
+          "/" +
+          data.rawFileDetails.name +
+          data.rawFileDetails.extension,
+        {
+          extractTarget: "book",
+          targetExtractionFolder:
+            "./userdata/expanded/" + data.rawFileDetails.name,
+          extractionMode: "all",
+        },
+      ),
+    );
+  }, [dispatch, data]);
+  return (
+    <div key={2}>
+      <button
+        className={
+          isComicBookExtractionInProgress
+            ? "button is-loading is-warning"
+            : "button is-warning"
+        }
+        onClick={unpackComicArchive}
+      >
+        <span className="icon is-small">
+          <i className="fa-solid fa-box-open"></i>
+        </span>
+        <span>Unpack comic archive</span>
+      </button>
+      <div className="columns">
+        <div className="mt-5">
+          {!isEmpty(extractedComicBookArchive) ? (
+            <DnD data={extractedComicBookArchive} />
+          ) : null}
+        </div>
+        {!isEmpty(extractedComicBookArchive) ? (
+          <div className="column mt-5">
+            <Sticky enabled={true} top={70} bottomBoundary={3000}>
+              <div className="card">
+                <div className="card-content">
+                  {extractedComicBookArchive.length} pages
+                  <button className="button is-small is-light is-primary is-outlined">
+                    <span className="icon is-small">
+                      <i className="fa-solid fa-compress"></i>
+                    </span>
+                    <span>Convert to CBZ</span>
+                  </button>
+                </div>
+              </div>
+            </Sticky>
+          </div>
+        ) : null}
+      </div>
+    </div>
+  );
+};
+
+export default ArchiveOperations;