Add Shoko Series Links and Icons to Manually Linked and Release Management Pages / Add Rescan File Button to Dashboard Unrecognized Panel

src/components/Collection/Series/EditSeriesTabs/NameTab.tsx

@@ -13,7 +13,7 @@ type Props = {
 
 const NameTab = ({ seriesId }: Props) => {
   const [name, setName] = useState('');
-  const [nameEditable, toggleNameEditable] = useToggle(false);
+  const [nameEditable, toggleNameEditable] = useToggle(true);
 
   const { data: seriesData, isError, isFetching, isSuccess } = useSeriesQuery(seriesId, { includeDataFrom: ['AniDB'] });
 

src/components/Utilities/ReleaseManagement/SeriesList.tsx

@@ -1,8 +1,10 @@
 import React, { useEffect, useMemo, useState } from 'react';
+import { Link } from 'react-router';
 import { mdiLoading, mdiOpenInNew } from '@mdi/js';
 import { Icon } from '@mdi/react';
 import { forEach } from 'lodash';
 
+import ShokoIcon from '@/components/ShokoIcon';
 import UtilitiesTable from '@/components/Utilities/UtilitiesTable';
 import {
   useReleaseManagementSeries,
@@ -21,16 +23,11 @@ import type { ReleaseManagementSeriesType } from '@/core/types/api/series';
 const seriesColumns: UtilityHeaderType<ReleaseManagementSeriesType>[] = [
   {
     id: 'series',
-    name: 'Series (AniDB ID)',
+    name: 'Series',
     className: 'grow basis-0 overflow-hidden',
     item: series => (
       <div className="flex items-center gap-x-1" data-tooltip-id="tooltip" data-tooltip-content={series.Name}>
         <span className="line-clamp-1">{series.Name}</span>
-        <div>
-          (
-          <span className="text-panel-text-primary">{series.IDs.AniDB}</span>
-          )
-        </div>
         <a
           href={`https://anidb.net/anime/${series.IDs.AniDB}`}
           target="_blank"
@@ -40,8 +37,20 @@ const seriesColumns: UtilityHeaderType<ReleaseManagementSeriesType>[] = [
           onClick={event =>
             event.stopPropagation()}
         >
-          <Icon path={mdiOpenInNew} size={1} />
+          <div className="flex items-center gap-x-2 font-semibold text-panel-text-primary">
+            <div className="metadata-link-icon AniDB" />
+            {series.IDs.AniDB}
+            <Icon className="text-panel-icon-action" path={mdiOpenInNew} size={1} />
+          </div>
         </a>
+        <span>|</span>
+        <Link to={`/webui/collection/series/${series.IDs.ID}`}>
+          <div className="flex items-center gap-x-2 font-semibold text-panel-text-primary">
+            <ShokoIcon className="size-6" />
+            {series.IDs.ID}
+            <Icon className="text-panel-icon-action" path={mdiOpenInNew} size={1} />
+          </div>
+        </Link>
       </div>
     ),
   },
@@ -77,11 +86,6 @@ const episodeNameColumn: UtilityHeaderType<EpisodeType> = {
         &nbsp;-&nbsp;
         {episode.Name}
       </span>
-      <div>
-        (
-        <span className="text-panel-text-primary">{episode.IDs.AniDB}</span>
-        )
-      </div>
       <a
         href={`https://anidb.net/episode/${episode.IDs.AniDB}`}
         target="_blank"
@@ -90,7 +94,11 @@ const episodeNameColumn: UtilityHeaderType<EpisodeType> = {
         aria-label="Open AniDB episode page"
         onClick={event => event.stopPropagation()}
       >
-        <Icon path={mdiOpenInNew} size={1} />
+        <div className="flex items-center gap-x-2 font-semibold text-panel-text-primary">
+          <div className="metadata-link-icon AniDB" />
+          {episode.IDs.AniDB}
+          <Icon className="text-panel-icon-action" path={mdiOpenInNew} size={1} />
+        </div>
       </a>
     </div>
   ),

src/pages/dashboard/panels/UnrecognizedFiles.tsx

@@ -1,8 +1,13 @@
 import React, { useMemo } from 'react';
 import { useSelector } from 'react-redux';
+import { mdiDatabaseSearchOutline } from '@mdi/js';
+import Icon from '@mdi/react';
 
+import Button from '@/components/Input/Button';
 import ShokoPanel from '@/components/Panels/ShokoPanel';
+import toast from '@/components/Toast';
 import AVDumpFileIcon from '@/components/Utilities/Unrecognized/AvDumpFileIcon';
+import { useRescanFileMutation } from '@/core/react-query/file/mutations';
 import { useFilesInfiniteQuery } from '@/core/react-query/file/queries';
 import { FileSortCriteriaEnum, type FileType } from '@/core/types/api/file';
 import { dayjs } from '@/core/util';
@@ -12,6 +17,13 @@ import type { RootState } from '@/core/store';
 const FileItem = ({ file }: { file: FileType }) => {
   const createdTime = dayjs(file.Created);
   const fileName = file.Locations[0]?.RelativePath.split(/[/\\]/g).pop() ?? '<missing file path>';
+  const { mutate: rescanFile } = useRescanFileMutation();
+  const handleRescan = (id: number) =>
+    rescanFile(id, {
+      onSuccess: () => toast.success('Rescanning file!'),
+      onError: error => toast.error(`Rescan failed for file! ${error.message}`),
+    });
+
   return (
     <div
       key={file.ID}
@@ -31,6 +43,16 @@ const FileItem = ({ file }: { file: FileType }) => {
           {fileName}
         </span>
       </div>
+      <Button onClick={() => handleRescan(file.ID)} tooltip="Rescan File">
+        <Icon
+          className="text-panel-icon-action"
+          path={mdiDatabaseSearchOutline}
+          size={1}
+          horizontal
+          vertical
+          rotate={180}
+        />
+      </Button>
       <AVDumpFileIcon truck file={file} />
     </div>
   );

src/pages/utilities/UnrecognizedUtilityTabs/ManuallyLinkedTab.tsx

@@ -1,4 +1,5 @@
 import React, { useEffect, useMemo, useState } from 'react';
+import { Link } from 'react-router';
 import {
   mdiCloseCircleOutline,
   mdiDatabaseSearchOutline,
@@ -15,6 +16,7 @@ import { useDebounceValue } from 'usehooks-ts';
 import Button from '@/components/Input/Button';
 import Input from '@/components/Input/Input';
 import ShokoPanel from '@/components/Panels/ShokoPanel';
+import ShokoIcon from '@/components/ShokoIcon';
 import toast from '@/components/Toast';
 import TransitionDiv from '@/components/TransitionDiv';
 import ItemCount from '@/components/Utilities/ItemCount';
@@ -41,16 +43,11 @@ import type { Updater } from 'use-immer';
 const seriesColumns: UtilityHeaderType<SeriesType>[] = [
   {
     id: 'series',
-    name: 'Series (AniDB ID)',
+    name: 'Series',
     className: 'grow basis-0 overflow-hidden',
     item: series => (
       <div className="flex items-center gap-x-1" data-tooltip-id="tooltip" data-tooltip-content={series.Name}>
         <span className="line-clamp-1">{series.Name}</span>
-        <div>
-          (
-          <span className="text-panel-text-primary">{series.IDs.AniDB}</span>
-          )
-        </div>
         <a
           href={`https://anidb.net/anime/${series.IDs.AniDB}`}
           target="_blank"
@@ -60,8 +57,20 @@ const seriesColumns: UtilityHeaderType<SeriesType>[] = [
           onClick={event =>
             event.stopPropagation()}
         >
-          <Icon path={mdiOpenInNew} size={1} />
+          <div className="flex items-center gap-x-2 font-semibold text-panel-text-primary">
+            <div className="metadata-link-icon AniDB" />
+            {series.IDs.AniDB}
+            <Icon className="text-panel-icon-action" path={mdiOpenInNew} size={1} />
+          </div>
         </a>
+        <span>|</span>
+        <Link to={`/webui/collection/series/${series.IDs.ID}`}>
+          <div className="flex items-center gap-x-2 font-semibold text-panel-text-primary">
+            <ShokoIcon className="size-6" />
+            {series.IDs.ID}
+            <Icon className="text-panel-icon-action" path={mdiOpenInNew} size={1} />
+          </div>
+        </Link>
       </div>
     ),
   },
@@ -93,11 +102,6 @@ const episodeColumns: UtilityHeaderType<EpisodeType>[] = [
           &nbsp;-&nbsp;
           {episode.Name}
         </span>
-        <div>
-          (
-          <span className="text-panel-text-primary">{episode.IDs.AniDB}</span>
-          )
-        </div>
         <a
           href={`https://anidb.net/episode/${episode.IDs.AniDB}`}
           target="_blank"
@@ -106,7 +110,11 @@ const episodeColumns: UtilityHeaderType<EpisodeType>[] = [
           aria-label="Open AniDB episode page"
           onClick={event => event.stopPropagation()}
         >
-          <Icon path={mdiOpenInNew} size={1} />
+          <div className="flex items-center gap-x-2 font-semibold text-panel-text-primary">
+            <div className="metadata-link-icon AniDB" />
+            {episode.IDs.AniDB}
+            <Icon className="text-panel-icon-action" path={mdiOpenInNew} size={1} />
+          </div>
         </a>
       </div>
     ),