Dark mode 2 (#100)

* 🗂️ Added tab icons and styles

* 🪑 Styled download panel table

* 🪑 Cleaned up the DC++ search results table

* 🪑 Many changes to DC++ downloads table

* 🏗️ Wired up search with RQ

* 🏗️ Changes to ComicDetail section

* 🔧 Fixing table styes

* 🏗 Fixed the archive ops panel

* 🔧 Tweaked Archive ops further

* 🃏 Styling the action menu

* 🧩 CV Match panel refactor WIP

* 🏗️ Refactored the action menu

* 🤼 Cleaning up CV match panel

* 🏗️ Refactored the scored matches

* 🤼 Revamped CV match panel UX

* 🖌️ Styling tweaks to the side panel

* 🖌️ Cleaned up the form

* 🏗️ Refactored the search form

* 🤐 Added a uncompress indicator

* 🏗️ Fix for encoding # in URIs

* 🔧 Fixed # symbol handling in URLs

* 🔧 Started work on Edit Metadata panel

* 🔎 Added a check for existing uncompressed archives

* 🏗️ Settings styling tweaks

* 🏗️ Fixed invalidation of archiveOps

* 🏗️ Fixed an invalidation query on DC++ download panel

* 🏗️ Fixed CV-sourced Volume info panel

* 🏗️ Fixed volume group card stacks on Dashboard

* 🔍 Fixing CV search page

* 🏗️ Refactoring Volume groups and wanted panel

* 🏗️ Cleaning up useless files

* 🛝 Added keen-slider for pull list

* 🏗️ Abstracted heading/subheading into Header

* 🏗️ Continued refactoring of PullList, Volumes etc.

* 📆 Wired up the datepicker to LoCG pull list

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

@@ -1,94 +1,23 @@
-import { filter, isEmpty, isNil, isUndefined } from "lodash";
-import React, { ReactElement, useCallback } from "react";
-import Select, { components } from "react-select";
-import { fetchComicVineMatches } from "../../../actions/fileops.actions";
-import { refineQuery } from "filename-parser";
+import React, { ReactElement } from "react";
+import Select from "react-select";
 
 export const Menu = (props): ReactElement => {
-  const { data } = props;
-  const { setSlidingPanelContentId, setVisible } = props.handlers;
-  const openDrawerWithCVMatches = useCallback(() => {
-    let seriesSearchQuery: IComicVineSearchQuery = {} as IComicVineSearchQuery;
-    let issueSearchQuery: IComicVineSearchQuery = {} as IComicVineSearchQuery;
-
-    if (!isUndefined(data.rawFileDetails)) {
-      issueSearchQuery = refineQuery(data.rawFileDetails.name);
-    } else if (!isEmpty(data.sourcedMetadata)) {
-      issueSearchQuery = refineQuery(data.sourcedMetadata.comicvine.name);
-    }
-    // dispatch(fetchComicVineMatches(data, issueSearchQuery, seriesSearchQuery));
-    setSlidingPanelContentId("CVMatches");
-    setVisible(true);
-  }, [data]);
-
-  const openEditMetadataPanel = useCallback(() => {
-    setSlidingPanelContentId("editComicBookMetadata");
-    setVisible(true);
-  }, []);
-  //  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 filteredActionOptions = filter(actionOptions, (item) => {
-    if (isUndefined(data.rawFileDetails)) {
-      return item.value !== "match-on-comic-vine";
-    }
-    return item;
-  });
-  const handleActionSelection = (action) => {
-    switch (action.value) {
-      case "match-on-comic-vine":
-        openDrawerWithCVMatches();
-        break;
-      case "edit-metdata":
-        openEditMetadataPanel();
-        break;
-      default:
-        console.log("No valid action selected.");
-        break;
-    }
-  };
-  const customStyles = {
-    option: (base, { data, isDisabled, isFocused, isSelected }) => {
-      return {
-        ...base,
-        backgroundColor: isFocused ? "gray" : "black",
-      };
-    },
-    control: (base) => ({
-      ...base,
-      backgroundColor: "black",
-      border: "1px solid #CCC",
-    }),
-  };
+  const {
+    filteredActionOptions,
+    customStyles,
+    handleActionSelection,
+    Placeholder,
+  } = props.configuration;
 
   return (
     <Select
       components={{ Placeholder }}
       placeholder={
-        <span>
-          <i className="fa-solid fa-list"></i> Actions
+        <span className="inline-flex flex-row items-center gap-2 pt-1">
+          <div className="w-6 h-6">
+            <i className="icon-[solar--cursor-bold-duotone] w-6 h-6"></i>
+          </div>
+          <div>Select An Action</div>
         </span>
       }
       styles={customStyles}