💄 Beautifying Archive ops tab

package.json

@@ -20,6 +20,7 @@
     "@bluelovers/fast-glob": "https://github.com/rishighan/fast-glob-v2-api.git",
     "@dnd-kit/core": "^4.0.0",
     "@dnd-kit/sortable": "^5.0.0",
+    "@fortawesome/fontawesome-free": "^6.0.0-beta2",
     "@types/mime-types": "^2.1.0",
     "@types/react": "^17.0.3",
     "@types/react-dom": "^17.0.2",
@@ -60,6 +61,7 @@
     "react-responsive-carousel": "^3.2.21",
     "react-select": "^4.3.1",
     "react-sliding-pane": "^7.0.0",
+    "react-stickynode": "^4.0.0",
     "react-table": "^7.7.0",
     "react-window-dynamic-list": "^2.3.5",
     "sharp": "^0.28.1",
@@ -79,7 +81,6 @@
     "@babel/preset-env": "^7.13.10",
     "@babel/preset-react": "^7.12.13",
     "@babel/preset-typescript": "^7.13.0",
-    "@fortawesome/fontawesome-free": "^5.15.3",
     "@teamsupercell/typings-for-css-modules-loader": "^2.5.1",
     "@tsconfig/node14": "^1.0.0",
     "@types/express": "^4.17.8",

src/client/assets/scss/App.scss

@@ -1,6 +1,7 @@
 @import "../../../../node_modules/bulma/bulma.sass";
 $fa-font-path: "~@fortawesome/fontawesome-free/webfonts";
 @import "../../../../node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss";
+@import "../../../../node_modules/@fortawesome/fontawesome-free/scss/regular.scss";
 @import "../../../../node_modules/@fortawesome/fontawesome-free/scss/solid.scss";
 $bg-color: yellow;
 $border-color: red;

src/client/components/ComicDetail.tsx

@@ -28,6 +28,7 @@ import {
   removeLeadingPeriod,
   escapePoundSymbol,
 } from "../shared/utils/formatting.utils";
+import Sticky from "react-stickynode";
 
 type ComicDetailProps = {};
 /**
@@ -59,7 +60,7 @@ export const ComicDetail = ({}: ComicDetailProps): ReactElement => {
   const comicBookDetailData = useSelector(
     (state: RootState) => state.comicInfo.comicBookDetail,
   );
-  const comicBookExtractionInProgress = useSelector(
+  const isComicBookExtractionInProgress = useSelector(
     (state: RootState) => state.fileOps.comicBookExtractionInProgress,
   );
   const extractedComicBookArchive = useSelector(
@@ -74,7 +75,6 @@ export const ComicDetail = ({}: ComicDetailProps): ReactElement => {
   }, [page, dispatch]);
 
   const unpackComicArchive = useCallback(() => {
-    console.log("Asdas");
     dispatch(
       extractComicArchive(
         comicBookDetailData.rawFileDetails.containedIn +
@@ -180,7 +180,7 @@ export const ComicDetail = ({}: ComicDetailProps): ReactElement => {
     {
       id: 1,
       name: "Volume Information",
-      icon: <i className="fas fa-layer-group"></i>,
+      icon: <i className="fa-regular fa-layer-group"></i>,
       content: isComicBookMetadataAvailable ? (
         <div key={1}>
           <div className="columns">
@@ -239,15 +239,25 @@ export const ComicDetail = ({}: ComicDetailProps): ReactElement => {
     },
     {
       id: 2,
-      icon: <i className="fas fa-file-archive"></i>,
+      icon: <i className="fa-regular fa-file-archive"></i>,
       name: "Archive Operations",
       content: (
         <div key={2}>
-          <button className="button is-warning" onClick={unpackComicArchive}>
+          <button
-            Unpack comic archive
+            className={
+              isComicBookExtractionInProgress
+                ? "button is-loading is-warning"
+                : "button is-warning"
+            }
+            onClick={unpackComicArchive}
+          >
+            <span className="icon is-small">
+              <i className="fa-regular fa-box-open"></i>
+            </span>
+            <span>Unpack comic archive</span>
           </button>
           <div className="columns">
-            <div className="mt-4">
+            <div className="mt-5">
               {!isEmpty(extractedComicBookArchive) ? (
                 <DnD data={extractedComicBookArchive} />
               ) : (
@@ -255,12 +265,20 @@ export const ComicDetail = ({}: ComicDetailProps): ReactElement => {
               )}
             </div>
             {!isEmpty(extractedComicBookArchive) ? (
-              <div className="column">
+              <div className="column mt-5">
-                <div className="card">
+                <Sticky enabled={true} top={70} bottomBoundary={3000}>
-                  <div className="card-content">
+                  <div className="card">
-                    {extractedComicBookArchive.length} pages
+                    <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-regular fa-compress"></i>
+                        </span>
+                        <span>Convert to CBZ</span>
+                      </button>
+                    </div>
                   </div>
-                </div>
+                </Sticky>
               </div>
             ) : null}
           </div>
@@ -269,7 +287,7 @@ export const ComicDetail = ({}: ComicDetailProps): ReactElement => {
     },
     {
       id: 3,
-      icon: <i className="fas fa-download"></i>,
+      icon: <i className="fa-regular fa-download"></i>,
       name: "Acquisition",
       content: (
         <AcquisitionPanel comicBookMetadata={comicBookDetailData} key={3} />
@@ -311,7 +329,7 @@ export const ComicDetail = ({}: ComicDetailProps): ReactElement => {
                   !isNil(comicBookDetailData) &&
                   !isEmpty(comicBookDetailData) ? (
                     <span className="download-icon-labels">
-                      <i className="fas fa-cloud-download-alt"></i>
+                      <i className="fa-regular fa-cloud-arrow-down"></i>
                       <span className="tag downloads-count">
                         {comicBookDetailData.acquisition.directconnect.length}
                       </span>
@@ -460,24 +478,18 @@ export const ComicDetail = ({}: ComicDetailProps): ReactElement => {
   //  Actions menu options and handler
   const CVMatchLabel = (
     <span>
-      <i className="fas fa-magic"></i> Match on ComicVine
+      <i className="fa-regular fa-magic"></i> Match on ComicVine
-    </span>
-  );
-
-  const editArchive = (
-    <span>
-      <i className="fas fa-file-archive"></i> Edit Comic Archive
     </span>
   );
 
   const editLabel = (
     <span>
-      <i className="fas fa-pencil-alt"></i> Edit Metadata
+      <i className="fa-regular fa-pen-to-square"></i> Edit Metadata
     </span>
   );
   const deleteLabel = (
     <span>
-      <i className="fas fa-trash-alt"></i> Delete Comic
+      <i className="fa-regular fa-trash-alt"></i> Delete Comic
     </span>
   );
   const Placeholder = (props) => {
@@ -485,7 +497,6 @@ export const ComicDetail = ({}: ComicDetailProps): ReactElement => {
   };
   const actionOptions = [
     { value: "match-on-comic-vine", label: CVMatchLabel },
-    { value: "edit-comic-archive", label: editArchive },
     { value: "edit-metdata", label: editLabel },
     { value: "delete-comic", label: deleteLabel },
   ];
@@ -538,7 +549,7 @@ export const ComicDetail = ({}: ComicDetailProps): ReactElement => {
                   components={{ Placeholder }}
                   placeholder={
                     <span>
-                      <i className="fas fa-list"></i> Actions
+                      <i className="fa-solid fa-list"></i> Actions
                     </span>
                   }
                   name="actions"

src/client/components/VolumeGroups.tsx

@@ -35,7 +35,7 @@ export const VolumeGroups = (): ReactElement => {
                 <div className="stack" key={group.results.id}>
                   <img src={group.results.image.small_url} />
                   <div className="content">
-                    <div className="stack-title">
+                    <div className="stack-title is-size-8">
                       {ellipsize(group.results.name, 18)}
                     </div>
                     <div className="control">

src/client/components/photos.json

@@ -1,11 +0,0 @@
-[
-    "https://source.unsplash.com/WLUHO9A_xik/900x900",
-    "https://source.unsplash.com/R4K8S77qtwI/900x900",
-    "https://source.unsplash.com/jJGc21mEh8Q/900x900",
-    "https://source.unsplash.com/omNxg6JP6Fo/900x900",
-    "https://source.unsplash.com/-M1gkucIqkQ/900x900",
-    "https://source.unsplash.com/czOuPVsfHDw/900x900",
-    "https://source.unsplash.com/-vr0gMUM6Fk/900x900",
-    "https://source.unsplash.com/TsMuMM_qVec/900x900"
-  ]
-  

yarn.lock

@@ -1146,10 +1146,10 @@
     minimatch "^3.0.4"
     strip-json-comments "^3.1.1"
 
-"@fortawesome/fontawesome-free@^5.15.3":
+"@fortawesome/fontawesome-free@^6.0.0-beta2":
-  version "5.15.4"
+  version "6.0.0-beta2"
-  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-free/-/fontawesome-free-5.15.4.tgz#ecda5712b61ac852c760d8b3c79c96adca5554e5"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-free/-/fontawesome-free-6.0.0-beta2.tgz#d66c6e9aad085d003f2cf88244f6adce16e07f78"
-  integrity sha512-eYm8vijH/hpzr/6/1CJ/V/Eb1xQFW2nnUKArb3z+yUWv7HTwj6M7SP957oMjfZjAHU6qpoNc2wQvIxBLWYa/Jg==
+  integrity sha512-od2COSiBZ70dB5YgZuZEJ3Jy3RHFUhKKjN4dBxNVtmC8DYlyuI4q9wUSzmpLWXQVnRTADRoOLywA9E6SRaS6YQ==
 
 "@gar/promisify@^1.0.1":
   version "1.1.2"
@@ -3669,7 +3669,7 @@ class-utils@^0.3.5:
     isobject "^3.0.0"
     static-extend "^0.1.1"
 
-classnames@^2.2.5:
+classnames@^2.0.0, classnames@^2.2.5:
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.3.1.tgz#dfcfa3891e306ec1dad105d0e88f4417b8535e8e"
   integrity sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA==
@@ -4136,6 +4136,11 @@ core-js@^2.4.0, core-js@^2.5.0, core-js@^2.5.3, core-js@^2.6.5:
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.6.12.tgz#d9333dfa7b065e347cc5682219d6f690859cc2ec"
   integrity sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==
 
+core-js@^3.6.5:
+  version "3.18.2"
+  resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.18.2.tgz#63a551e8a29f305cd4123754846e65896619ba5b"
+  integrity sha512-zNhPOUoSgoizoSQFdX1MeZO16ORRb9FFQLts8gSYbZU5FcgXhp24iMWMxnOQo5uIaIG7/6FA/IqJPwev1o9ZXQ==
+
 core-util-is@1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7"
@@ -5352,6 +5357,11 @@ etag@~1.8.1:
   resolved "https://registry.yarnpkg.com/etag/-/etag-1.8.1.tgz#41ae2eeb65efa62268aebfea83ac7d79299b0887"
   integrity sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc=
 
+eventemitter3@^3.0.0:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-3.1.2.tgz#2d3d48f9c346698fce83a85d7d664e98535df6e7"
+  integrity sha512-tvtQIeLVHjDkJYnzf2dgVMxfuSGJeM/7UCG17TT4EumTfNtF+0nebF/4zWOIkCreAbtNqhGEboB6BWrwqNaw4Q==
+
 eventemitter3@^4.0.0:
   version "4.0.7"
   resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-4.0.7.tgz#2de9b68f6528d5644ef5c59526a1b4a07306169f"
@@ -5898,6 +5908,11 @@ follow-redirects@^1.0.0, follow-redirects@^1.14.0:
   resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.14.4.tgz#838fdf48a8bbdd79e52ee51fb1c94e3ed98b9379"
   integrity sha512-zwGkiSXC1MUJG/qmeIFH2HBJx9u0V46QGUe3YR1fXG8bXQxq7fLj0RjLZQ5nubr9qNJUZrH+xUcwXEoXNpfS+g==
 
+fontawesome-free@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/fontawesome-free/-/fontawesome-free-1.0.1.tgz#16b704143258a355b63978d38a83d3bbcf9fcd35"
+  integrity sha512-pmjY7xTuHSx4FRSHb9KuKEdJKdpCiGiXFykNPkYdPh5bVHIsQc1d7+YeAl9abIG95SSz2JTq+6+lyhojeEEr1A==
+
 for-in@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/for-in/-/for-in-1.0.2.tgz#81068d295a8142ec0ac726c6e2200c30fb6d5e80"
@@ -10745,6 +10760,13 @@ r2-utils-js@^1.0.26:
     yauzl "^2.10.0"
     yazl "^2.5.1"
 
+raf@^3.0.0:
+  version "3.4.1"
+  resolved "https://registry.yarnpkg.com/raf/-/raf-3.4.1.tgz#0742e99a4a6552f445d73e3ee0328af0ff1ede39"
+  integrity sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA==
+  dependencies:
+    performance-now "^2.1.0"
+
 randombytes@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/randombytes/-/randombytes-2.1.0.tgz#df6f84372f0270dc65cdf6291349ab7a473d4f2a"
@@ -11012,6 +11034,17 @@ react-sliding-pane@^7.0.0:
     prop-types "^15.7.2"
     react-modal "^3.12.1"
 
+react-stickynode@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/react-stickynode/-/react-stickynode-4.0.0.tgz#ca1deeda866aeace3d522d01eb868f286cdb49d1"
+  integrity sha512-H6Ae6l8soAc188eFAmE4CGJz3oidQa88jNO/fnJWjpFw4DwGRS6boL9gHNE4DCvbMPgek1AAP85pUPIEKUMgtw==
+  dependencies:
+    classnames "^2.0.0"
+    core-js "^3.6.5"
+    prop-types "^15.6.0"
+    shallowequal "^1.0.0"
+    subscribe-ui-event "^2.0.6"
+
 react-string-replace@^0.4.1:
   version "0.4.4"
   resolved "https://registry.yarnpkg.com/react-string-replace/-/react-string-replace-0.4.4.tgz#24006fbe0db573d5be583133df38b1a735cb4225"
@@ -11875,7 +11908,7 @@ shallow-clone@^3.0.0:
   dependencies:
     kind-of "^6.0.2"
 
-shallowequal@^1.1.0:
+shallowequal@^1.0.0, shallowequal@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/shallowequal/-/shallowequal-1.1.0.tgz#188d521de95b9087404fd4dcb68b13df0ae4e7f8"
   integrity sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==
@@ -12585,6 +12618,15 @@ subjects-utils@0.0.2:
   dependencies:
     capitalize "0.5.0"
 
+subscribe-ui-event@^2.0.6:
+  version "2.0.7"
+  resolved "https://registry.yarnpkg.com/subscribe-ui-event/-/subscribe-ui-event-2.0.7.tgz#8d18b6339c35b25246a5335775573f0e5dc461f8"
+  integrity sha512-Acrtf9XXl6lpyHAWYeRD1xTPUQHDERfL4GHeNuYAtZMc4Z8Us2iDBP0Fn3xiRvkQ1FO+hx+qRLmPEwiZxp7FDQ==
+  dependencies:
+    eventemitter3 "^3.0.0"
+    lodash "^4.17.15"
+    raf "^3.0.0"
+
 supports-color@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7"