src/client/components/ComicDetail/AcquisitionPanel.tsx

@@ -199,8 +199,8 @@ export const AcquisitionPanel = (
             type,
           },
         });
-
-        queryClient.invalidateQueries({ queryKey: ["comicBookMetadata"] });
+        console.log(bundleDBImportResult?.data);
+        // queryClient.invalidateQueries({ queryKey: ["bundles"] });
 
         //         dispatch({
         //           type: AIRDCPP_RESULT_DOWNLOAD_INITIATED,

src/client/components/ComicDetail/ComicDetail.tsx

@@ -231,6 +231,7 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => {
     {
       id: 6,
       name: "Downloads",
+      icon: <>{acquisition?.directconnect?.downloads?.length}</>,
       content:
         !isNil(data.data) && !isEmpty(data.data) ? (
           <DownloadsPanel key={5} />
@@ -313,7 +314,7 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => {
 
             <TabControls
               filteredTabs={filteredTabs}
-              acquisition={acquisition}
+              downloadCount={acquisition?.directconnect?.downloads?.length}
             />
 
             <SlidingPane

src/client/components/ComicDetail/TabControls.tsx

@@ -5,11 +5,11 @@ export const TabControls = (props): ReactElement => {
   // const comicBookDetailData = useSelector(
   //   (state: RootState) => state.comicInfo.comicBookDetail,
   // );
-  const { filteredTabs, acquisition } = props;
+  const { filteredTabs, downloadCount } = props;
   const [active, setActive] = useState(filteredTabs[0].id);
   useEffect(() => {
     setActive(filteredTabs[0].id);
-  }, [acquisition]);
+  }, []);
 
   return (
     <>
@@ -25,12 +25,12 @@ export const TabControls = (props): ReactElement => {
               >
                 {/* Downloads tab and count badge */}
                 <>
-                  {id === 6 && !isNil(acquisition.directconnect) ? (
+                  {id === 6 && !isNil(downloadCount) ? (
                     <span className="inline-flex flex-row">
                       {/* download count */}
                       <span className="inline-flex mx-2 items-center bg-slate-200 text-slate-800 text-xs font-medium px-2 rounded-md dark:text-slate-900 dark:bg-slate-400">
                         <span className="text-md text-slate-500 dark:text-slate-900">
-                          {acquisition.directconnect.downloads.length}
+                          {icon}
                         </span>
                       </span>
                       <i className="h-5 w-5 icon-[solar--download-bold-duotone] text-slate-500 dark:text-slate-300" />

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

@@ -90,17 +90,31 @@ export const ArchiveOperations = (props): ReactElement => {
 
   return (
     <div key={2}>
-      <button
-        className={
-          isLoading ? "button is-loading is-warning" : "button is-warning"
-        }
-        onClick={() => refetch()}
+      <article
+        role="alert"
+        className="mt-4 text-md rounded-lg max-w-screen-md border-s-4 border-blue-500 bg-blue-50 p-4 dark:border-s-4 dark:border-blue-600 dark:bg-blue-300 dark:text-slate-600"
       >
-        <span className="icon is-small">
-          <i className="fa-solid fa-box-open"></i>
-        </span>
-        <span>Unpack comic archive</span>
-      </button>
+        <div>
+          <p>You can perform several operations on your comic book archive.</p>
+          <p>
+            Uncompressing, re-organizing the individual pages, then
+            re-compressing to a different format, for example.
+          </p>
+          <p>You can also analyze color histograms of pages.</p>
+        </div>
+      </article>
+      <div className="mt-5">
+        <button
+          className="flex space-x-1 sm:mt-0 sm:flex-row sm:items-center rounded-lg border border-green-400 dark:border-green-200 bg-green-200 px-3 py-2 text-gray-500 hover:bg-transparent hover:text-green-600 focus:outline-none focus:ring active:text-indigo-500"
+          onClick={() => refetch()}
+        >
+          <span className="text-md">Unpack Comic Archive</span>
+          <span className="w-6 h-6">
+            <i className="h-6 w-6 icon-[solar--box-bold-duotone]"></i>
+          </span>
+        </button>
+      </div>
+
       <div className="columns">
         <div className="mt-5">
           {!isEmpty(uncompressedArchive) ? (