🖌 Beautification, added a description to CV-scraped results

src/client/assets/scss/App.scss

@@ -371,7 +371,7 @@ $size-8: 0.9rem;
       left: 1.5rem;
       border: 2px dotted #CCC;
       width:20px;
-      min-height:25px;
+      min-height:35px;
       
     border-color: transparent transparent #F3A22D #F3A22D;
       border-bottom-left-radius: 10px;

src/client/components/MatchResult.tsx

@@ -1,7 +1,9 @@
 import React, { useCallback } from "react";
 import { useDispatch, useSelector } from "react-redux";
-import { map } from "lodash";
+import { isNil, map } from "lodash";
 import { applyComicVineMatch } from "../actions/comicinfo.actions";
+import { convert } from "html-to-text";
+import ellipsize from "ellipsize";
 
 interface MatchResultProps {
   matchData: any;
@@ -24,6 +26,14 @@ export const MatchResult = (props: MatchResultProps) => {
   return (
     <>
       {map(props.matchData, (match, idx) => {
+        let issueDescription = "";
+        if (!isNil(match.description)) {
+          issueDescription = convert(match.description, {
+            baseElements: {
+              selectors: ["p"],
+            },
+          });
+        }
         return (
           <div className="search-result mb-4">
             <div className="columns">
@@ -55,7 +65,7 @@ export const MatchResult = (props: MatchResultProps) => {
                   </div>
                 </div>
                 <div className="is-size-7">
-                  {match.deck}
+                  {ellipsize(issueDescription, 300)}
                 </div>
               </div>
             </div>
@@ -93,11 +103,10 @@ export const MatchResult = (props: MatchResultProps) => {
                   </div>
                 </div>
               </div>
-              
             </div>
             <div className="columns">
               <div className="column">
-            <button
+                <button
                   className="button is-normal is-outlined is-primary is-light is-pulled-right"
                   onClick={() => applyCVMatch(match, props.comicObjectId)}
                 >
@@ -106,7 +115,7 @@ export const MatchResult = (props: MatchResultProps) => {
                   </span>
                   <span>Apply Match</span>
                 </button>
-                </div>
+              </div>
             </div>
           </div>
         );

src/client/components/RecentlyImported.tsx

@@ -76,11 +76,11 @@ export const RecentlyImported = ({
                   )}
                   {/* Issue type */}
                   {!isUndefined(sourcedMetadata.comicvine) &&
-                    !isNil(
-                      detectIssueTypes(
-                        sourcedMetadata.comicvine.volumeInformation.description,
-                      ),
-                    ) ? (
+                  !isNil(
+                    detectIssueTypes(
+                      sourcedMetadata.comicvine.volumeInformation.description,
+                    ),
+                  ) ? (
                     <span className="tag is-warning">
                       {
                         detectIssueTypes(

src/client/shared/utils/filenameparser.utils.ts

@@ -201,7 +201,7 @@ export const refineQuery = (inputString: string) => {
   return {
     searchParams: {
       searchTerms: {
-        name: queryObj.comicbook_identifier_tokens.inputString,
+        name: queryObj.comicbook_identifier_tokens.inputString.trim(),
         number: queryObj.comicbook_identifier_tokens.parsedIssueNumber,
         year: queryObj.years?.toString(),
         subtitle: queryObj.comicbook_identifier_tokens.subtitle,