Minor(?) fixes (#1039)

* Fix undefined error in TmdbLinking

* Fix variable name

* Move version check to ErrorBoundary

* Add autofocus to tmdb link search

* Fix undefined error in TmdbLinking but better

* Fix bugs in tmdb linking.. maybe

* Fix more tmdb bugs.. yay

* Truncate names in linking page, add tooltips

src/components/Collection/Tmdb/AniDBEpisode.tsx

@@ -27,7 +27,15 @@ const AniDBEpisode = React.memo(({ episode, extra, isOdd, onIconClick }: Props)
       {getEpisodePrefixAlt(episode.AniDB?.Type)}
     </div>
     <div className={cx('w-8', extra && 'opacity-65')}>{padNumber(episode.AniDB?.EpisodeNumber ?? 0)}</div>
-    <div className={cx('line-clamp-1 grow text-left', extra && 'opacity-65')}>{episode.Name}</div>
+
+    <div
+      className={cx('line-clamp-1 grow text-left', extra && 'opacity-65')}
+      data-tooltip-id="tooltip"
+      data-tooltip-content={episode.Name}
+    >
+      {episode.Name}
+    </div>
+
     {onIconClick && (
       <Button onClick={onIconClick} tooltip={extra ? 'Remove link' : 'Add link'}>
         <Icon path={extra ? mdiMinus : mdiPlus} size={1} className="text-panel-icon-action" />

src/components/Collection/Tmdb/EpisodeRow.tsx

@@ -20,12 +20,14 @@ type Props = {
   offset: number;
   setLinkOverrides: Updater<Record<number, number[]>>;
   tmdbEpisodesPending: boolean;
+  existingXrefs?: number[];
   xrefs?: Record<string, TmdbEpisodeXrefType[]>;
 };
 
 const EpisodeRow = React.memo((props: Props) => {
   const {
     episode,
+    existingXrefs,
     isOdd,
     offset,
     setLinkOverrides,
@@ -66,11 +68,28 @@ const EpisodeRow = React.memo((props: Props) => {
     setLinkOverrides((draftState) => {
       if (!draftState[episodeId]) {
         draftState[episodeId] = map(xrefs?.[episodeId], item => item.TmdbEpisodeID);
+        if (draftState[episodeId].length === 0) draftState[episodeId].push(-1);
       }
 
-      // If index is 0, we are removing a link
-      if (offset === 0) draftState[episodeId].push(0);
-      else draftState[episodeId].splice(offset, 1);
+      // If offset is 0, we are adding a link
+      if (offset === 0) {
+        draftState[episodeId].push(0);
+        return;
+      }
+
+      draftState[episodeId].splice(offset, 1);
+
+      // When existing xrefs are present and are more than 1,
+      // we need to keep the first link to "overwrite" others
+      if (existingXrefs && existingXrefs.length > 1) {
+        return;
+      }
+
+      // When only one is preset, we can remove the override
+      // if existingXref was present or if it was the "first" empty link
+      if (draftState[episodeId].length === 1 && (existingXrefs ?? draftState[episodeId][0] === -1)) {
+        delete draftState[episodeId];
+      }
     });
   });
 
@@ -83,9 +102,15 @@ const EpisodeRow = React.memo((props: Props) => {
 
       if (newTmdbId === undefined) {
         delete draftState[episodeId][offset];
-      } else {
-        draftState[episodeId][offset] = newTmdbId;
+        return;
+      }
+
+      if (newTmdbId === 0 && !existingXrefs && offset === 0) {
+        delete draftState[episodeId];
+        return;
       }
+
+      draftState[episodeId][offset] = newTmdbId;
     });
   });
 

src/components/Collection/Tmdb/EpisodeSelect.tsx

@@ -93,7 +93,12 @@ const EpisodeSelect = React.memo((props: Props) => {
             <div className="w-8 shrink-0">
               {tmdbEpisode?.EpisodeNumber ? padNumber(tmdbEpisode.EpisodeNumber) : 'XX'}
             </div>
-            <div className="line-clamp-1 grow text-left">
+
+            <div
+              className="line-clamp-1 grow text-left"
+              data-tooltip-id="tooltip"
+              data-tooltip-content={tmdbEpisode?.Title ?? ''}
+            >
               {tmdbEpisode?.Title ?? 'Entry Not Linked'}
             </div>
 
@@ -189,9 +194,15 @@ const EpisodeSelect = React.memo((props: Props) => {
                             : `S${padNumber(episode.SeasonNumber)}E${padNumber(episode.EpisodeNumber)}`)}
                         </div>
                         |
-                        <div className="ml-4 line-clamp-1 grow basis-0">
+
+                        <div
+                          className="ml-4 line-clamp-1 grow basis-0"
+                          data-tooltip-id="tooltip"
+                          data-tooltip-content={episode?.Title ?? ''}
+                        >
                           {episode?.Title ?? 'Do Not Link Entry'}
                         </div>
+
                         <div className="pr-4">
                           {episode?.AiredAt ?? ''}
                         </div>

src/components/Collection/Tmdb/MatchRating.tsx

@@ -29,8 +29,8 @@ const MatchRating = React.memo(({ isOdd, rating }: { isOdd: boolean, rating?: Ma
         'bg-panel-text-warning': rating === MatchRatingType.DateMatches || rating === MatchRatingType.TitleMatches,
         'bg-panel-text-primary': rating === MatchRatingType.UserVerified,
         'bg-panel-text-danger': rating === MatchRatingType.FirstAvailable,
-        'bg-panel-background': !rating && !isOdd,
-        'bg-panel-background-alt': !rating && isOdd,
+        'bg-panel-background': (!rating ?? rating === MatchRatingType.None) && !isOdd,
+        'bg-panel-background-alt': (!rating ?? rating === MatchRatingType.None) && isOdd,
       },
     )}
   >

src/components/Collection/Tmdb/TmdbLinkSelectPanel.tsx

@@ -143,6 +143,7 @@ const TmdbLinkSelectPanel = () => {
         placeholder="Enter Title or TMDB ID..."
         inputClassName="!p-4"
         startIcon={mdiMagnify}
+        autoFocus
       />
 
       <div className="relative h-96 rounded-lg border border-panel-border bg-panel-input p-4">

src/components/Collection/Tmdb/TopPanel.tsx

@@ -3,13 +3,13 @@ import { useNavigate } from 'react-router-dom';
 import { mdiLinkPlus } from '@mdi/js';
 import { Icon } from '@mdi/react';
 import cx from 'classnames';
-import { countBy, flatMap } from 'lodash';
+import { countBy, filter, flatMap } from 'lodash';
 
 import Button from '@/components/Input/Button';
 import ShokoPanel from '@/components/Panels/ShokoPanel';
 import ItemCount from '@/components/Utilities/ItemCount';
+import { MatchRatingType } from '@/core/types/api/episode';
 
-import type { MatchRatingType } from '@/core/types/api/episode';
 import type { TmdbEpisodeXrefType } from '@/core/types/api/tmdb';
 
 type Props = {
@@ -26,7 +26,13 @@ const TopPanel = (props: Props) => {
   const navigate = useNavigate();
 
   const flatXrefs = useMemo(
-    () => (xrefs ? flatMap(xrefs, xref => xref) : undefined),
+    () => {
+      if (!xrefs) return undefined;
+      return filter(
+        flatMap(xrefs, xref => xref),
+        xref => xref.Rating !== MatchRatingType.None,
+      );
+    },
     [xrefs],
   );
 

src/pages/SentryErrorBoundaryWrapper.tsx

@@ -1,17 +1,37 @@
 import React, { useEffect } from 'react';
 import { Outlet } from 'react-router';
+import { useNavigate } from 'react-router-dom';
 import * as Sentry from '@sentry/react';
+import semver from 'semver';
 
 import ErrorBoundary from '@/components/ErrorBoundary';
 import { useVersionQuery } from '@/core/react-query/init/queries';
+import { getParsedSupportedServerVersion, parseServerVersion } from '@/core/util';
 
 const SentryErrorBoundaryWrapper = () => {
+  const navigate = useNavigate();
   const versionQuery = useVersionQuery();
 
   useEffect(() => {
     Sentry.setTag('server_release', versionQuery.data?.Server?.Version ?? 'Unknown');
   }, [versionQuery.data]);
 
+  useEffect(() => {
+    if (!versionQuery.data || versionQuery.data.Server.ReleaseChannel === 'Debug') return;
+
+    const serverData = versionQuery.data?.Server;
+
+    let isServerSupported = true;
+
+    const semverVersion = parseServerVersion(serverData.Version);
+    const minimumVersion = getParsedSupportedServerVersion();
+    if (semverVersion && semver.lt(semverVersion, minimumVersion)) isServerSupported = false;
+
+    if (!isServerSupported) {
+      navigate('/webui/unsupported');
+    }
+  }, [navigate, versionQuery.data]);
+
   return (
     <Sentry.ErrorBoundary
       // eslint-disable-next-line @typescript-eslint/unbound-method -- Not our code, so we cannot fix it

src/pages/collection/series/TmdbLinking.tsx

@@ -5,7 +5,7 @@ import { mdiLoading, mdiOpenInNew, mdiPencilCircleOutline } from '@mdi/js';
 import { Icon } from '@mdi/react';
 import { useVirtualizer } from '@tanstack/react-virtual';
 import cx from 'classnames';
-import { debounce, filter, forEach, groupBy, isEqual, map, reduce, some, toNumber } from 'lodash';
+import { debounce, every, filter, forEach, get, groupBy, isEqual, map, reduce, some, toNumber } from 'lodash';
 import { useImmer } from 'use-immer';
 
 import AniDBEpisode from '@/components/Collection/Tmdb/AniDBEpisode';
@@ -116,7 +116,7 @@ const TmdbLinking = () => {
   const [
     linkOverrides,
     setLinkOverrides,
-  ] = useImmer({} as Record<number, number[]>);
+  ] = useImmer<Record<number, number[]>>({});
 
   const estimateSize = useEventCallback((index: number) => {
     const episode = episodes[index];
@@ -173,14 +173,13 @@ const TmdbLinking = () => {
       const episodeId = toNumber(anidbEpisodeId);
       tempXrefs[episodeId] = [];
       forEach(overrideIds, (overrideId, index) => {
-        if (overrideId === 0) return;
         tempXrefs[episodeId].push({
           AnidbAnimeID: seriesQuery.data.IDs.AniDB,
           AnidbEpisodeID: episodeId,
           TmdbShowID: tmdbId,
           TmdbEpisodeID: overrideId,
           Index: index,
-          Rating: MatchRatingType.UserVerified,
+          Rating: (overrideId <= 0 ? MatchRatingType.None : MatchRatingType.UserVerified),
         });
       });
     });
@@ -281,7 +280,16 @@ const TmdbLinking = () => {
     if (type === 'Movie') {
       return Object.keys(linkOverrides).length === 0;
     }
-    return Object.keys(linkOverrides).length === 0 && !isNewLink;
+
+    const allEmptyLinks = every(
+      linkOverrides,
+      (overrides) => {
+        if (overrides[0] !== -1) return false;
+        return !some(overrides.slice(1), override => override !== 0);
+      },
+    );
+
+    return allEmptyLinks || (Object.keys(linkOverrides).length === 0 && !isNewLink);
   }, [isNewLink, linkOverrides, type]);
 
   const handleNewLinkEdit = useEventCallback(() => {
@@ -314,17 +322,29 @@ const TmdbLinking = () => {
             )}
           >
             <div className="flex items-center rounded-lg border border-panel-border bg-panel-background-alt p-4 font-semibold">
-              AniDB |&nbsp;
+              <div className="shrink-0">
+                AniDB |&nbsp;
+              </div>
               <a
                 className="flex cursor-pointer font-semibold text-panel-text-primary"
                 href={`https://anidb.net/anime/${seriesQuery.data.IDs.AniDB}`}
                 target="_blank"
                 rel="noopener noreferrer"
+                data-tooltip-id="tooltip"
+                data-tooltip-content={seriesQuery.data.Name}
               >
-                {seriesQuery.data.IDs.AniDB}
-                &nbsp;-&nbsp;
-                {seriesQuery.data.Name}
-                <Icon path={mdiOpenInNew} size={1} className="ml-2" />
+                <div className="shrink-0">
+                  {seriesQuery.data.IDs.AniDB}
+                  &nbsp;-&nbsp;
+                </div>
+
+                <div className="line-clamp-1">
+                  {seriesQuery.data.Name}
+                </div>
+
+                <div className="ml-2 shrink-0">
+                  <Icon path={mdiOpenInNew} size={1} />
+                </div>
               </a>
             </div>
 
@@ -336,17 +356,29 @@ const TmdbLinking = () => {
                   {tmdbShowOrMovieQuery.data && (
                     <>
                       <div className="flex items-center">
-                        TMDB |&nbsp;
+                        <div className="shrink-0">
+                          TMDB |&nbsp;
+                        </div>
                         <a
                           className="flex cursor-pointer font-semibold text-panel-text-primary"
                           href={`https://www.themoviedb.org/${type === 'Show' ? 'tv' : 'movie'}/${tmdbId}`}
                           target="_blank"
                           rel="noopener noreferrer"
+                          data-tooltip-id="tooltip"
+                          data-tooltip-content={tmdbShowOrMovieQuery.data.Title}
                         >
-                          {tmdbId}
-                          &nbsp;-&nbsp;
-                          {tmdbShowOrMovieQuery.data.Title}
-                          <Icon path={mdiOpenInNew} size={1} className="ml-2" />
+                          <div className="shrink-0">
+                            {tmdbId}
+                            &nbsp;-&nbsp;
+                          </div>
+
+                          <div className="line-clamp-1">
+                            {tmdbShowOrMovieQuery.data.Title}
+                          </div>
+
+                          <div className="ml-2 shrink-0">
+                            <Icon path={mdiOpenInNew} size={1} />
+                          </div>
                         </a>
                       </div>
                       {isNewLink && (
@@ -376,12 +408,18 @@ const TmdbLinking = () => {
               style={{ height: rowVirtualizer.getTotalSize() }}
             >
               {virtualItems.map((virtualItem) => {
-                const episode = episodes[virtualItem.index];
+                const episode = get(episodes, virtualItem.index, undefined);
                 const isOdd = virtualItem.index % 2 === 1;
 
                 if (!episode && !episodesQuery.isFetchingNextPage) fetchNextPageDebounced();
 
-                const overrides = linkOverrides[episode.IDs.AniDB] ?? finalEpisodeXrefs?.[episode.IDs.AniDB] ?? [0];
+                const overrides = episode
+                  ? (linkOverrides[episode.IDs.AniDB] ?? finalEpisodeXrefs?.[episode.IDs.AniDB] ?? [0])
+                  : [0];
+
+                const existingXrefs = episode
+                  ? episodeXrefs?.[episode.IDs.AniDB]?.map(xref => xref.TmdbEpisodeID)
+                  : undefined;
 
                 return (
                   <div
@@ -410,6 +448,7 @@ const TmdbLinking = () => {
                               isOdd={isOdd}
                               setLinkOverrides={setLinkOverrides}
                               tmdbEpisodesPending={tmdbEpisodesQuery.isPending}
+                              existingXrefs={existingXrefs}
                               xrefs={finalEpisodeXrefs}
                             />
                           </div>

src/pages/login/LoginPage.tsx

@@ -13,7 +13,6 @@ import {
 import { Icon } from '@mdi/react';
 import cx from 'classnames';
 import 'react-toastify/dist/ReactToastify.min.css';
-import semver from 'semver';
 import { siDiscord } from 'simple-icons';
 
 import Button from '@/components/Input/Button';
@@ -24,7 +23,6 @@ import { useLoginMutation } from '@/core/react-query/auth/mutations';
 import { useRandomImageMetadataQuery } from '@/core/react-query/image/queries';
 import { useServerStatusQuery, useVersionQuery } from '@/core/react-query/init/queries';
 import { ImageTypeEnum } from '@/core/types/api/common';
-import { getParsedSupportedServerVersion, parseServerVersion } from '@/core/util';
 
 import type { RootState } from '@/core/store';
 
@@ -113,24 +111,6 @@ function LoginPage() {
     return versionQuery.data.Server.Version;
   }, [versionQuery.data, versionQuery.isFetching]);
 
-  useEffect(() => {
-    if (!versionQuery.data || versionQuery.data.Server.ReleaseChannel === 'Debug') return;
-
-    const serverData = versionQuery.data.Server;
-
-    let isServerSupported = true;
-
-    if (!serverData.ReleaseDate && serverData.ReleaseChannel === 'Stable') isServerSupported = false;
-
-    const semverVersion = parseServerVersion(serverData.Version);
-    const mininumVersion = getParsedSupportedServerVersion();
-    if (semverVersion && semver.lt(semverVersion, mininumVersion)) isServerSupported = false;
-
-    if (!isServerSupported) {
-      navigate('/webui/unsupported');
-    }
-  }, [navigate, versionQuery.data]);
-
   return (
     <>
       <ToastContainer