Modify Metadata Linking Header / AvDump Series Select QoL / Group Pag…

…e Edit Button (#1136) * Modify Metadata Linking Header Format * Split Date and Approximate Title * Move Date & Approx. Title Higher in the List * Condense Match Types Into Four Categories / Add Tooltips to Individual Ratings - this way more matching types can easily be added to any of the match type categories * AvDump Series Select QoL - make the far right icon on each row of the "Add Series to AniDB" page a link to the series page (instead of the mass add page) - this is for cases where the user wants to check which series is the correct one when titles are similar - added tooltips to clarify where the links go - remove reference to button colour due to theme support * Add Edit Group Button to Group Page Header * Tooltip & Hover Tweaks
ShokoAnime · Nov 9, 2024 · 09015f8 · 09015f8
1 parent b01e9e8
commit 09015f8
Show file tree

Hide file tree

Showing 9 changed files with 72 additions and 44 deletions.
diff --git a/src/components/Collection/SeriesMetadata.tsx b/src/components/Collection/SeriesMetadata.tsx
@@ -90,19 +90,19 @@ const MetadataLink = ({ id, seriesId, site, type }: Props) => {
               ? (
                 <>
                   {canEditLink && (
-                    <Button onClick={editLink} tooltip="Edit link">
+                    <Button onClick={editLink} tooltip="Edit Link">
                       <Icon className="text-panel-icon-action" path={mdiPencilCircleOutline} size={1} />
                     </Button>
                   )}
                   {canRemoveLink && (
-                    <Button onClick={removeLink} tooltip="Remove link">
+                    <Button onClick={removeLink} tooltip="Remove Link">
                       <Icon className="text-panel-icon-danger" path={mdiCloseCircleOutline} size={1} />
                     </Button>
                   )}
                 </>
               )
               : canAddLink && (
-                <Button onClick={addLink} tooltip="Add link">
+                <Button onClick={addLink} tooltip="Add Link">
                   <Icon className="text-panel-icon-action" path={mdiPlusCircleOutline} size={1} />
                 </Button>
               )}

diff --git a/src/components/Collection/TitleOptions.tsx b/src/components/Collection/TitleOptions.tsx
@@ -6,6 +6,7 @@ import {
   mdiFilterOutline,
   mdiFormatListText,
   mdiMagnify,
+  mdiPencil,
   mdiViewGridOutline,
 } from '@mdi/js';
 import { useToggle } from 'usehooks-ts';
@@ -14,10 +15,15 @@ import DisplaySettingsModal from '@/components/Collection/DisplaySettingsModal';
 import FilterPresetsModal from '@/components/Dialogs/FilterPresetsModal';
 import IconButton from '@/components/Input/IconButton';
 import Input from '@/components/Input/Input';
+import useEditGroupCallback from '@/hooks/collection/useEditGroupCallback';
+
+import type { CollectionGroupType } from '@/core/types/api/collection';
+import type { SeriesType } from '@/core/types/api/series';
 
 type Props = {
-  isSeries: boolean;
   groupSearch: string;
+  isSeries: boolean;
+  item: CollectionGroupType | SeriesType;
   mode: string;
   seriesSearch: string;
   setSearch: Dispatch<SetStateAction<string>>;
@@ -47,6 +53,7 @@ const TitleOptions = (props: Props) => {
   const {
     groupSearch,
     isSeries,
+    item,
     mode,
     seriesSearch,
     setSearch,
@@ -56,6 +63,7 @@ const TitleOptions = (props: Props) => {
 
   const [showFilterModal, toggleFilterModal] = useToggle(false);
   const [showDisplaySettingsModal, toggleDisplaySettingsModal] = useToggle(false);
+  const editGroupModalCallback = useEditGroupCallback(item);
 
   return (
     <>
@@ -69,6 +77,7 @@ const TitleOptions = (props: Props) => {
           onChange={event => setSearch(event.target.value)}
         />
         {!isSeries && <OptionButton onClick={toggleFilterModal} icon={mdiFilterMenuOutline} tooltip="Filter Presets" />}
+        {isSeries && <OptionButton onClick={editGroupModalCallback} icon={mdiPencil} tooltip="Edit Group" />}
         <OptionButton onClick={toggleFilterSidebar} icon={mdiFilterOutline} tooltip="Filter" />
         <OptionButton
           onClick={toggleMode}

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/MovieRow.tsx b/src/components/Collection/Tmdb/MovieRow.tsx
@@ -122,6 +122,7 @@ const MovieRow = React.memo((props: Props) => {
               && (
                 <Button
                   onClick={handleOverrideLink}
+                  tooltip={tmdbMovie ? 'Remove Link' : 'Add Link'}
                 >
                   <Icon
                     path={tmdbMovie ? mdiLinkOff : mdiLinkPlus}

diff --git a/src/components/Collection/Tmdb/TmdbLinkSelectPanel.tsx b/src/components/Collection/Tmdb/TmdbLinkSelectPanel.tsx
@@ -119,15 +119,21 @@ const TmdbLinkSelectPanel = React.memo(({ seriesType }: { seriesType?: SeriesTyp
         </div>
         <div className="flex gap-x-2">
           <Button
-            className={cx('flex gap-x-2 item', linkType === 'Show' && 'text-panel-text-primary')}
+            className={cx(
+              'flex gap-x-2 item hover:text-panel-text-primary transition-colors',
+              linkType === 'Show' && 'text-panel-text-primary',
+            )}
             onClick={() => setLinkType('Show')}
           >
             <Icon path={mdiTelevision} size={1} />
             Series
           </Button>
           |
           <Button
-            className={cx('flex gap-x-2', linkType === 'Movie' && 'text-panel-text-primary')}
+            className={cx(
+              'flex gap-x-2 hover:text-panel-text-primary transition-colors',
+              linkType === 'Movie' && 'text-panel-text-primary',
+            )}
             onClick={() => setLinkType('Movie')}
           >
             <Icon path={mdiFilmstrip} size={1} />

diff --git a/src/components/Collection/Tmdb/TopPanel.tsx b/src/components/Collection/Tmdb/TopPanel.tsx
@@ -54,36 +54,32 @@ const TopPanel = (props: Props) => {
             !flatXrefs && 'opacity-50 pointer-events-none',
           )}
         >
+          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>
-            Dates and Title Match (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 Match (T)
+            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.DateAndTitleKindaMatches ?? 0) + (matchRatingCounts.DateMatches ?? 0)
                 + (matchRatingCounts.TitleKindaMatches ?? 0)}
             </div>
-            Dates and/or Title Kinda Match (~DT/D/~T)
+            Approximate
           </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 className="rounded-md bg-panel-text-danger px-2 text-button-primary-text">
+              {matchRatingCounts.FirstAvailable ?? 0}
             </div>
-            User Overridden (UO)
+            Fallback
           </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 className="rounded-md bg-panel-text-primary px-2 text-button-primary-text">
+              {matchRatingCounts.UserVerified ?? 0}
             </div>
-            Best Guess (BG)
+            Override
           </div>
         </div>
         <Button

diff --git a/src/components/Utilities/Unrecognized/AvDumpSeriesSelectModal.tsx b/src/components/Utilities/Unrecognized/AvDumpSeriesSelectModal.tsx
@@ -143,7 +143,7 @@ function AvDumpSeriesSelectModal({ getLinks, onClose, show }: Props) {
                   'Manually copy the ED2K hashes from the box below, then proceed to the next step.'
                 )
                 : (
-                  'Click the blue button below to copy the ED2K hashes for use in the next step.'
+                  'Click the rightmost button below to copy the ED2K hashes for use in the next step.'
                 )}
             </StepDescription>
             <div className="flex grow rounded-lg border border-panel-border bg-panel-input p-4">
@@ -207,19 +207,30 @@ function AvDumpSeriesSelectModal({ getLinks, onClose, show }: Props) {
                       </div>
                     )
                     : (searchQuery.data ?? []).map(result => (
-                      <a
-                        href={`https://anidb.net/anime/${result.ID}/release/add`}
-                        key={result.ID}
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        className="flex items-center justify-between"
-                        onClick={() => setClickedLink(true)}
-                      >
-                        <div className="line-clamp-1">{result.Title}</div>
-                        <div className="text-panel-text-primary">
+                      <div key={result.ID} className="flex justify-between">
+                        <a
+                          href={`https://anidb.net/anime/${result.ID}/release/add`}
+                          target="_blank"
+                          rel="noopener noreferrer"
+                          onClick={() => setClickedLink(true)}
+                          data-tooltip-id="tooltip"
+                          className="transition-colors hover:text-panel-text-primary"
+                          data-tooltip-content="Mass Add"
+                        >
+                          <div className="line-clamp-1">{result.Title}</div>
+                        </a>
+                        <a
+                          href={`https://anidb.net/anime/${result.ID}`}
+                          aria-label="Check Series"
+                          target="_blank"
+                          rel="noopener noreferrer"
+                          className="items-center text-panel-text-primary"
+                          data-tooltip-id="tooltip"
+                          data-tooltip-content="Check Series"
+                        >
                           <Icon path={mdiOpenInNew} size={0.833} />
-                        </div>
-                      </a>
+                        </a>
+                      </div>
                     ))}
                 </div>
               </div>

diff --git a/src/pages/collection/Collection.tsx b/src/pages/collection/Collection.tsx
@@ -186,6 +186,7 @@ function Collection() {
     },
     [groups, groupsTotal, isSeries, seriesQuery.data],
   );
+  const item = items[0];
 
   useEffect(() => {
     if (!isSeries || debouncedSeriesSearch || !seriesQuery.isSuccess) return;
@@ -229,8 +230,9 @@ function Collection() {
           searchQuery={isSeries ? seriesSearch : groupSearch}
         />
         <TitleOptions
-          isSeries={isSeries}
           groupSearch={groupSearch}
+          isSeries={isSeries}
+          item={item}
           mode={mode}
           seriesSearch={seriesSearch}
           setSearch={setSearch}

diff --git a/src/pages/collection/series/TmdbLinking.tsx b/src/pages/collection/series/TmdbLinking.tsx
@@ -391,6 +391,7 @@ const TmdbLinking = () => {
                         <Button
                           className="text-panel-text-primary"
                           onClick={handleNewLinkEdit}
+                          tooltip="Edit Link"
                         >
                           <Icon path={mdiPencilCircleOutline} size={1} />
                         </Button>
-Original file line number
+Diff line change
@@ Expand Up / @@ -122,6 +122,7 @@ const MovieRow = React.memo((props: Props) => { @@
                   && (
                     <Button
                       onClick={handleOverrideLink}
+                      tooltip={tmdbMovie ? 'Remove Link' : 'Add Link'}
                     >
                       <Icon
                         path={tmdbMovie ? mdiLinkOff : mdiLinkPlus}
@@ Expand Down @@