Condense Match Types Into Four Categories / Add Tooltips to Individua…

…l Ratings - this way more matching types can easily be added to any of the match type categories
ShokoAnime · Nov 6, 2024 · 091bc00 · 091bc00
1 parent f4bd68c
commit 091bc00
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 36 deletions.
diff --git a/src/components/Collection/Tmdb/MatchRating.tsx b/src/components/Collection/Tmdb/MatchRating.tsx
@@ -6,21 +6,21 @@ import { MatchRatingType } from '@/core/types/api/episode';
 const getAbbreviation = (rating?: MatchRatingType) => {
   switch (rating) {
     case MatchRatingType.DateAndTitleMatches:
-      return 'DT';
+      return ['DT', 'Date & Title'];
     case MatchRatingType.DateAndTitleKindaMatches:
-      return '~DT';
+      return ['~DT', 'Date & Approx. Title'];
     case MatchRatingType.DateMatches:
-      return 'D';
+      return ['D', 'Date'];
     case MatchRatingType.TitleMatches:
-      return 'T';
+      return ['T', 'Title'];
     case MatchRatingType.TitleKindaMatches:
-      return '~T';
+      return ['~T', 'Approx. Title'];
     case MatchRatingType.UserVerified:
-      return 'UO';
+      return ['UO', 'User Override'];
     case MatchRatingType.FirstAvailable:
-      return 'BG';
+      return ['BG', 'Best Guess'];
     default:
-      return '';
+      return ['', ''];
   }
 };
 
@@ -46,8 +46,10 @@ const MatchRating = React.memo(({ isDisabled, isOdd, rating }: Props) => (
         'opacity-65': isDisabled,
       },
     )}
+    data-tooltip-id="tooltip"
+    data-tooltip-content={getAbbreviation(rating)[1]}
   >
-    {getAbbreviation(rating)}
+    {getAbbreviation(rating)[0]}
   </div>
 ));
 

diff --git a/src/components/Collection/Tmdb/TopPanel.tsx b/src/components/Collection/Tmdb/TopPanel.tsx
@@ -54,49 +54,32 @@ const TopPanel = (props: Props) => {
             !flatXrefs && 'opacity-50 pointer-events-none',
           )}
         >
-          Match Types
+          Match Type
           <span>|</span>
           <div className="flex items-center gap-x-2">
             <div className="rounded-md bg-panel-text-important px-2 text-button-primary-text">
-              {matchRatingCounts.DateAndTitleMatches ?? 0}
+              {(matchRatingCounts.DateAndTitleMatches ?? 0) + (matchRatingCounts.TitleMatches ?? 0)}
             </div>
-            Date & Title (DT)
-          </div>
-          <div className="flex items-center gap-x-2">
-            <div className="rounded-md bg-panel-text-important px-2 text-button-primary-text">
-              {matchRatingCounts.TitleMatches ?? 0}
-            </div>
-            Title (T)
-          </div>
-          <div className="flex items-center gap-x-2">
-            <div className="rounded-md bg-panel-text-warning px-2 text-button-primary-text">
-              {matchRatingCounts.DateAndTitleKindaMatches ?? 0}
-            </div>
-            Date & Approx. Title (~DT)
+            Perfect
           </div>
           <div className="flex items-center gap-x-2">
             <div className="rounded-md bg-panel-text-warning px-2 text-button-primary-text">
-              {matchRatingCounts.DateMatches ?? 0}
+              {(matchRatingCounts.DateAndTitleKindaMatches ?? 0) + (matchRatingCounts.DateMatches ?? 0)
+                + (matchRatingCounts.TitleKindaMatches ?? 0)}
             </div>
-            Date (D)
+            Approximate
           </div>
           <div className="flex items-center gap-x-2">
-            <div className="rounded-md bg-panel-text-warning px-2 text-button-primary-text">
-              {matchRatingCounts.TitleKindaMatches ?? 0}
+            <div className="rounded-md bg-panel-text-danger px-2 text-button-primary-text">
+              {matchRatingCounts.FirstAvailable ?? 0}
             </div>
-            Approx. Title (~T)
+            Fallback
           </div>
           <div className="flex items-center gap-x-2">
             <div className="rounded-md bg-panel-text-primary px-2 text-button-primary-text">
               {matchRatingCounts.UserVerified ?? 0}
             </div>
-            User Override (UO)
-          </div>
-          <div className="flex items-center gap-x-2">
-            <div className="rounded-md bg-panel-text-danger px-2 text-button-primary-text">
-              {matchRatingCounts.FirstAvailable ?? 0}
-            </div>
-            Best Guess (BG)
+            Override
           </div>
         </div>
         <Button