📚 Added volume card stacks to the dashboard

src/client/components/RecentlyImported.tsx

@@ -16,53 +16,56 @@ type RecentlyImportedProps = {
 export const RecentlyImported = ({
   comicBookCovers,
 }: RecentlyImportedProps): ReactElement => (
-  <section className="card-container">
-    {map(comicBookCovers.docs, ({ _id, rawFileDetails, sourcedMetadata }) => {
-      let imagePath = "";
-      let comicName = "";
-      if (!isNil(rawFileDetails)) {
-        const encodedFilePath = encodeURI(
-          "http://localhost:3000" + removeLeadingPeriod(rawFileDetails.path),
+  <>
+    <h2 className="subtitle">Recently Imported</h2>
+    <section className="card-container">
+      {map(comicBookCovers.docs, ({ _id, rawFileDetails, sourcedMetadata }) => {
+        let imagePath = "";
+        let comicName = "";
+        if (!isNil(rawFileDetails)) {
+          const encodedFilePath = encodeURI(
+            "http://localhost:3000" + removeLeadingPeriod(rawFileDetails.path),
+          );
+          imagePath = escapePoundSymbol(encodedFilePath);
+          comicName = rawFileDetails.name;
+        } else if (!isNil(sourcedMetadata)) {
+          imagePath = sourcedMetadata.comicvine.image.small_url;
+          comicName = sourcedMetadata.comicvine.name;
+        }
+        const titleElement = (
+          <Link to={"/comic/details/" + _id}>{ellipsize(comicName, 18)}</Link>
         );
-        imagePath = escapePoundSymbol(encodedFilePath);
-        comicName = rawFileDetails.name;
-      } else if (!isNil(sourcedMetadata)) {
-        imagePath = sourcedMetadata.comicvine.image.small_url;
-        comicName = sourcedMetadata.comicvine.name;
-      }
-      const titleElement = (
-        <Link to={"/comic/details/" + _id}>{ellipsize(comicName, 18)}</Link>
-      );
-      return (
-        <Card
-          key={_id}
-          orientation={"vertical"}
-          imageUrl={imagePath}
-          hasDetails
-          title={comicName ? titleElement : null}
-        >
-          <div className="content is-flex is-flex-direction-row">
-            {!isNil(sourcedMetadata.comicvine) && (
-              <span className="icon cv-icon is-small">
-                <img src="/dist/img/cvlogo.svg" />
-              </span>
-            )}
-            {isNil(rawFileDetails) && (
-              <span className="icon has-text-info">
-                <i className="fas fa-adjust" />
-              </span>
-            )}
-            {!isNil(sourcedMetadata.comicvine) &&
-            !isEmpty(
-              detectTradePaperbacks(
-                sourcedMetadata.comicvine.volumeInformation.description,
-              ),
-            ) ? (
-              <span className="tag is-warning">TPB</span>
-            ) : null}
-          </div>
-        </Card>
-      );
-    })}
-  </section>
+        return (
+          <Card
+            key={_id}
+            orientation={"vertical"}
+            imageUrl={imagePath}
+            hasDetails
+            title={comicName ? titleElement : null}
+          >
+            <div className="content is-flex is-flex-direction-row">
+              {!isNil(sourcedMetadata.comicvine) && (
+                <span className="icon cv-icon is-small">
+                  <img src="/dist/img/cvlogo.svg" />
+                </span>
+              )}
+              {isNil(rawFileDetails) && (
+                <span className="icon has-text-info">
+                  <i className="fas fa-adjust" />
+                </span>
+              )}
+              {!isNil(sourcedMetadata.comicvine) &&
+              !isEmpty(
+                detectTradePaperbacks(
+                  sourcedMetadata.comicvine.volumeInformation.description,
+                ),
+              ) ? (
+                <span className="tag is-warning">TPB</span>
+              ) : null}
+            </div>
+          </Card>
+        );
+      })}
+    </section>
+  </>
 );