📔 Trade paperback detection 1st draft

src/client/components/AcquisitionPanel.tsx

@@ -72,7 +72,10 @@ export const AcquisitionPanel = (
             }
             onClick={() => getDCPPSearchResults(dcppQuery)}
           >
-            Search on AirDC++
+            <span className="icon is-small">
+              <img src="/dist/img/airdcpp_logo.svg" />
+            </span>
+            <span className="airdcpp-text">Search on AirDC++</span>
           </button>
         </div>
         {/* AirDC++ search instance details */}
@@ -188,8 +191,8 @@ export const AcquisitionPanel = (
               <div className="message-body is-size-6 is-family-secondary">
                 Searching via <strong>AirDC++</strong> is still in{" "}
                 <strong>alpha</strong>. Some searches may take arbitrarily long,
-                or may not work at all. Searches from <code>ADCS</code> hubs are more
-                reliable than <code>NMDCS</code> ones.
+                or may not work at all. Searches from <code>ADCS</code> hubs are
+                more reliable than <code>NMDCS</code> ones.
               </div>
             </article>
           </div>

src/client/components/ComicDetail.tsx

@@ -236,14 +236,28 @@ export const ComicDetail = ({}: ComicDetailProps): ReactElement => {
         <dd>{props.data.number}</dd>
         <dd>
           <div className="field is-grouped is-grouped-multiline">
-            <div className="control">
-              <div className="tags has-addons">
-                <span className="tag is-light">Type</span>
-                <span className="tag is-warning">
-                  {props.data.resource_type}
-                </span>
+            {!isEmpty(
+              detectTradePaperbacks(
+                comicBookDetailData.sourcedMetadata.comicvine.volumeInformation
+                  .description,
+              ),
+            ) ? (
+              <div className="control">
+                <div className="tags has-addons">
+                  <span className="tag is-light">Detected Type</span>
+                  <span className="tag is-warning">Trade Paperback</span>
+                </div>
               </div>
-            </div>
+            ) : (
+              <div className="control">
+                <div className="tags has-addons">
+                  <span className="tag is-light">Type</span>
+                  <span className="tag is-warning">
+                    {props.data.resource_type}
+                  </span>
+                </div>
+              </div>
+            )}
             <div className="control">
               <div className="tags has-addons">
                 <span className="tag is-light">ComicVine Issue ID</span>

src/client/components/RecentlyImported.tsx

@@ -6,7 +6,8 @@ import {
   removeLeadingPeriod,
   escapePoundSymbol,
 } from "../shared/utils/formatting.utils";
-import { isNil, map } from "lodash";
+import { isEmpty, isNil, map } from "lodash";
+import { detectTradePaperbacks } from "../shared/utils/tradepaperback.utils";
 
 type RecentlyImportedProps = {
   comicBookCovers: any;
@@ -51,7 +52,14 @@ export const RecentlyImported = ({
                 <i className="fas fa-adjust" />
               </span>
             )}
-            <span className="tag has-text-info">TPB</span>
+            {!isNil(sourcedMetadata.comicvine) &&
+            !isEmpty(
+              detectTradePaperbacks(
+                sourcedMetadata.comicvine.volumeInformation.description,
+              ),
+            ) ? (
+              <span className="tag is-warning">TPB</span>
+            ) : null}
           </div>
         </Card>
       );