From 181e5e41b8b32c7e51459e1246c7e1365dedea4d Mon Sep 17 00:00:00 2001
From: Harshith Mohan <gharshitmohan@ymail.com>
Date: Wed, 22 May 2024 16:02:06 +0530
Subject: [PATCH 01/28] Refactor `SelectEpisodeList` to remove deprecations
 (#910)

---
 src/components/Input/SelectEpisodeList.tsx    | 238 +++++++-----------
 .../UnrecognizedUtilityTabs/LinkFilesTab.tsx  |   3 +-
 2 files changed, 86 insertions(+), 155 deletions(-)

diff --git a/src/components/Input/SelectEpisodeList.tsx b/src/components/Input/SelectEpisodeList.tsx
index ada90a3f1..1378ba8b2 100644
--- a/src/components/Input/SelectEpisodeList.tsx
+++ b/src/components/Input/SelectEpisodeList.tsx
@@ -1,6 +1,5 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react';
-import ReactDOM from 'react-dom';
-import { Listbox } from '@headlessui/react';
+import React, { useEffect, useState } from 'react';
+import { Listbox, ListboxButton, ListboxOption, ListboxOptions, Transition } from '@headlessui/react';
 import { mdiChevronDown, mdiChevronUp, mdiMagnify } from '@mdi/js';
 import { Icon } from '@mdi/react';
 import cx from 'classnames';
@@ -8,37 +7,10 @@ import { find, toInteger } from 'lodash';
 
 import { EpisodeTypeEnum } from '@/core/types/api/episode';
 import getEpisodePrefix from '@/core/utilities/getEpisodePrefix';
+import useEventCallback from '@/hooks/useEventCallback';
 
 import Input from './Input';
 
-function getOffsetTop(rect: DOMRect, vertical: string | number) {
-  let offset = 0;
-
-  if (typeof vertical === 'number') {
-    offset = vertical;
-  } else if (vertical === 'center') {
-    offset = rect.height / 2;
-  } else if (vertical === 'bottom') {
-    offset = rect.height;
-  }
-
-  return offset;
-}
-
-function getOffsetLeft(rect: DOMRect, horizontal: string | number) {
-  let offset = 0;
-
-  if (typeof horizontal === 'number') {
-    offset = horizontal;
-  } else if (horizontal === 'center') {
-    offset = rect.width / 2;
-  } else if (horizontal === 'right') {
-    offset = rect.width;
-  }
-
-  return offset;
-}
-
 type Option = {
   label: string;
   value: number;
@@ -50,159 +22,119 @@ type Option = {
 type Props = {
   options: Option[];
   value: number;
-  onChange: (optionValue: number, label: string) => void;
-  className?: string;
-  emptyValue?: string;
+  onChange: (optionValue: number) => void;
   disabled?: boolean;
   rowIdx: number;
 };
 
-const SelectOption = (option: Option & { divider: boolean }) => (
-  <Listbox.Option
+const SelectOption = ({ option }: { option: Option }) => (
+  <ListboxOption
     value={option}
-    key={`listbox-item-${option.value}`}
-    className="group relative cursor-pointer select-none px-2 py-0.5 text-panel-text"
+    className="group relative cursor-pointer select-none px-2 py-0.5 text-panel-text transition-colors data-[focus]:text-panel-text-primary"
   >
     <div className="flex items-center justify-between">
-      <span className="flex grow truncate font-normal">
+      <div className="flex grow truncate">
         <div className="w-10 shrink-0 text-panel-text-important">
           {getEpisodePrefix(option.type) + option.number}
         </div>
         |
         <div className="ml-2">{option.label}</div>
-      </span>
-      <span>{option.AirDate}</span>
+      </div>
+      <div>{option.AirDate}</div>
     </div>
-  </Listbox.Option>
+  </ListboxOption>
+);
+
+const SelectButton = ({ open, rowIdx, selected }: { open: boolean, rowIdx: number, selected: Option }) => (
+  <ListboxButton
+    className={cx(
+      'relative w-full h-full border border-panel-border rounded-lg px-4 py-2 text-left focus:outline-none focus:border-panel-text-primary transition-colors',
+      rowIdx % 2 === 0 ? 'bg-panel-background' : 'bg-panel-background-alt',
+    )}
+  >
+    <div className="flex items-center truncate">
+      {!selected?.label ? 'Select episode' : (
+        <>
+          <span className="font-semibold text-panel-text-important">{selected.number}</span>
+          &nbsp;-&nbsp;
+          {selected.label}
+          {selected?.type !== EpisodeTypeEnum.Normal && (
+            <span className="mx-2 rounded-lg border border-panel-border bg-panel-background px-1 py-0.5 text-sm text-panel-text">
+              {selected.type}
+            </span>
+          )}
+        </>
+      )}
+    </div>
+    <div className="absolute inset-y-0 right-0 ml-3 flex items-center pr-2">
+      <Icon path={open ? mdiChevronUp : mdiChevronDown} size={1} />
+    </div>
+  </ListboxButton>
 );
 
 const SelectEpisodeList = React.memo((
-  { className, disabled = false, emptyValue = '', onChange, options, rowIdx, value }: Props,
+  { disabled = false, onChange, options, rowIdx, value }: Props,
 ) => {
   const [epFilter, setEpFilter] = useState(0);
   const [selected, setSelected] = useState<Option>(options[0]);
-  const [portalEl, setPortalEl] = useState<HTMLDivElement | null>(null);
-  const [displayNode, setDisplayNode] = React.useState<HTMLDivElement | null>(null);
-  const displayRef = useRef<HTMLDivElement | null>(null);
-  const buttonRef = useRef<HTMLButtonElement | null>(null);
-
-  useEffect(() => {
-    const modalRoot = document.getElementById('modal-root');
-    if (modalRoot === null) return undefined;
-    const el = document.createElement('div');
-    modalRoot.appendChild(el);
-    setPortalEl(el);
-    return () => {
-      modalRoot.removeChild(el);
-    };
-  }, []);
-
-  // Not entirely sure if should be change to useEventCallback as it's not an event handler, so leaving it.
-  const handleDisplayRef = useCallback((node: HTMLDivElement | null) => {
-    displayRef.current = node;
-
-    if (node) {
-      setDisplayNode(node);
-    }
-  }, []);
 
   useEffect(() => {
     setSelected(find(options, ['value', value]) ?? {} as Option);
   }, [value, options]);
 
-  const handleEpFilter: React.ChangeEventHandler<HTMLInputElement> = (event) => {
-    setEpFilter(toInteger(event.target.value));
-  };
+  const handleEpFilter = useEventCallback(
+    (event: React.ChangeEvent<HTMLInputElement>) => setEpFilter(toInteger(event.target.value)),
+  );
 
   const selectOption = (selectedOption: Option) => {
     setSelected(selectedOption);
-    onChange(selectedOption?.value ?? 0, selectedOption?.label ?? emptyValue);
-  };
-
-  const renderSelected = () => {
-    if (!selected?.label) return emptyValue;
-    return (
-      <>
-        <span className="font-semibold text-panel-text-important">{selected.number}</span>
-        &nbsp;-&nbsp;
-        {selected.label}
-        {selected.type && selected.type !== EpisodeTypeEnum.Normal && (
-          <span className="mx-2 rounded-lg border border-panel-border bg-panel-background px-1 py-0.5 text-sm text-panel-text">
-            {selected.type}
-          </span>
-        )}
-      </>
-    );
-  };
-
-  const renderPortal = (open) => {
-    if (displayNode === null || portalEl === null || open !== true) return null;
-    const rect = displayNode.getBoundingClientRect();
-    const top = rect.top + getOffsetTop(rect, 'bottom') + window.scrollY;
-    const left = rect.left + getOffsetLeft(rect, 0);
-    portalEl.style.top = `${top}px`;
-    portalEl.style.left = `${left}px`;
-    portalEl.style.position = 'absolute';
-    portalEl.style.width = `${displayNode.offsetWidth}px`;
-
-    return ReactDOM.createPortal(
-      <Listbox.Options static className="absolute z-10 mt-1 w-full bg-panel-background">
-        <div className="flex gap-x-2">
-          <Input
-            className="grow"
-            id="epFilter"
-            type="text"
-            value={epFilter === 0 ? '' : epFilter}
-            onChange={handleEpFilter}
-            inputClassName="py-4 px-3"
-            startIcon={mdiMagnify}
-            placeholder="Input Episode Number..."
-          />
-        </div>
-        <div className="mt-1 max-h-96 overflow-y-auto rounded-lg border border-panel-border bg-panel-input p-4">
-          {options.map((item, idx) => (
-            <React.Fragment key={`listbox-item-${item.value}`}>
-              {idx !== 0 && item.type !== options[idx - 1].type && (
-                <div className="my-3 h-0.5 border border-panel-border bg-panel-background-alt" />
-              )}
-              {((epFilter > 0 && item.number === epFilter) || epFilter === 0) && (
-                <SelectOption
-                  {...item}
-                  divider={idx > 0 && item.type !== options[idx - 1].type}
-                />
-              )}
-            </React.Fragment>
-          ))}
-        </div>
-      </Listbox.Options>,
-      portalEl,
-    );
+    onChange(selectedOption?.value ?? 0);
   };
 
   return (
-    <div className={cx(className, 'h-full')} ref={handleDisplayRef}>
-      <Listbox disabled={disabled} value={selected} onChange={selectOption}>
-        {({ open }) => (
-          <div className="relative h-full">
-            <Listbox.Button
-              ref={buttonRef}
-              className={cx(
-                'relative w-full h-full border border-panel-border rounded-lg pl-2 pr-10 py-2 text-left cursor-default focus:outline-none focus:border-panel-text-primary',
-                rowIdx % 2 === 0 ? 'bg-panel-background' : 'bg-panel-background-alt',
-              )}
+    <Listbox disabled={disabled} value={selected} onChange={selectOption}>
+      {({ open }) => (
+        <>
+          <SelectButton open={open} rowIdx={rowIdx} selected={selected} />
+
+          <Transition
+            enter="transition-opacity"
+            enterFrom="opacity-0"
+            enterTo="opacity-100"
+            leave="transition-opacity"
+            leaveFrom="opacity-100"
+            leaveTo="opacity-0"
+          >
+            <ListboxOptions
+              anchor="bottom"
+              className="mt-1 w-[var(--button-width)] origin-top bg-panel-background transition"
             >
-              <span className="flex items-center">
-                <span className="ml-3 block h-7 truncate">{renderSelected()}</span>
-              </span>
-              <span className="pointer-events-none absolute inset-y-0 right-0 ml-3 flex items-center pr-2">
-                <Icon className="cursor-pointer" path={open ? mdiChevronUp : mdiChevronDown} size={1} />
-              </span>
-            </Listbox.Button>
-            {renderPortal(open)}
-          </div>
-        )}
-      </Listbox>
-    </div>
+              <Input
+                className="grow"
+                id="epFilter"
+                type="text"
+                value={epFilter === 0 ? '' : epFilter}
+                onChange={handleEpFilter}
+                inputClassName="py-4 px-3"
+                startIcon={mdiMagnify}
+                placeholder="Input Episode Number..."
+              />
+
+              <div className="mt-1 max-h-96 overflow-y-auto rounded-lg border border-panel-border bg-panel-input p-4">
+                {options.map((item, idx) => (
+                  <React.Fragment key={`listbox-item-${item.value}`}>
+                    {idx !== 0 && item.type !== options[idx - 1].type && (
+                      <div className="my-3 h-0.5 border border-panel-border bg-panel-background-alt" />
+                    )}
+                    {((epFilter > 0 && item.number === epFilter) || epFilter === 0) && <SelectOption option={item} />}
+                  </React.Fragment>
+                ))}
+              </div>
+            </ListboxOptions>
+          </Transition>
+        </>
+      )}
+    </Listbox>
   );
 });
 
diff --git a/src/pages/utilities/UnrecognizedUtilityTabs/LinkFilesTab.tsx b/src/pages/utilities/UnrecognizedUtilityTabs/LinkFilesTab.tsx
index cfc568896..1558ae69a 100644
--- a/src/pages/utilities/UnrecognizedUtilityTabs/LinkFilesTab.tsx
+++ b/src/pages/utilities/UnrecognizedUtilityTabs/LinkFilesTab.tsx
@@ -588,7 +588,6 @@ function LinkFilesTab() {
             <SelectEpisodeList
               rowIdx={idx}
               options={episodeOptions}
-              emptyValue="Select episode"
               value={link.EpisodeID}
               disabled={isLinking}
               onChange={value => addLink(link.FileID, value, link.LinkID)}
@@ -597,7 +596,7 @@ function LinkFilesTab() {
         );
       } else if (idx === 0) {
         result.push(
-          <div className="flex items-center justify-center">
+          <div className="flex items-center justify-center" key="no-episodes">
             No episodes exist!
           </div>,
         );

From 1d6fed0dccae363aadd06db03ee88d6f1b470f72 Mon Sep 17 00:00:00 2001
From: Jordan Fearnley <fearnlj01@gmail.com>
Date: Thu, 23 May 2024 12:47:52 +0100
Subject: [PATCH 02/28] Feat: Add filter based series with tag lookup

---
 .../Collection/Tags/TagDetailsModal.tsx       | 59 ++++++++++++++-----
 src/core/react-query/filter/queries.ts        | 34 ++++++++++-
 src/core/react-query/filter/types.ts          |  4 ++
 src/core/types/api/filter.ts                  |  4 +-
 4 files changed, 81 insertions(+), 20 deletions(-)

diff --git a/src/components/Collection/Tags/TagDetailsModal.tsx b/src/components/Collection/Tags/TagDetailsModal.tsx
index ca5a23e0f..96c1fc927 100644
--- a/src/components/Collection/Tags/TagDetailsModal.tsx
+++ b/src/components/Collection/Tags/TagDetailsModal.tsx
@@ -4,10 +4,35 @@ import Icon from '@mdi/react';
 
 import AnidbDescription from '@/components/Collection/AnidbDescription';
 import ModalPanel from '@/components/Panels/ModalPanel';
+import { useFilteredSeriesInfiniteQuery } from '@/core/react-query/filter/queries';
+import useFlattenListResult from '@/hooks/useFlattenListResult';
 
 import type { TagType } from '@/core/types/api/tags';
 
 const TagDetailsModal = React.memo(({ onClose, show, tag }: { show: boolean, tag?: TagType, onClose: () => void }) => {
+  const { data: seriesDataList, fetchNextPage, isFetchingNextPage, isSuccess } = useFilteredSeriesInfiniteQuery(
+    {
+      pageSize: 50,
+      filterCriteria: {
+        ApplyAtSeriesLevel: true,
+        Expression: {
+          Parameter: tag?.Name ?? '',
+          Type: tag?.Source === 'User' ? 'HasCustomTag' : 'HasTag',
+        },
+        Sorting: {
+          IsInverted: false,
+          Type: 'Name',
+        },
+      },
+    },
+    show,
+  );
+  const [seriesData, seriesCount] = useFlattenListResult(seriesDataList);
+
+  if (!isFetchingNextPage && seriesData.length !== seriesCount) {
+    fetchNextPage().catch(() => {});
+  }
+
   const header = (
     <div className="flex w-full justify-between capitalize">
       <div>
@@ -37,24 +62,26 @@ const TagDetailsModal = React.memo(({ onClose, show, tag }: { show: boolean, tag
         text={tag?.Description ?? ''}
         className="shoko-scrollbar max-h-62.5 overflow-y-auto pr-4 opacity-65"
       />
-      {/* TODO: Implement the list of series for the tag when the serer supports this with a new endpoint */}
-      {
-        /* <div className="flex flex-col gap-2">
-        <div className="text-base font-bold">
-          Series With Tag |&nbsp;
-          <span className="text-panel-text-important">
-            ?
-          </span>
-          &nbsp;Series
-        </div>
-        <div className="w-full rounded-lg bg-panel-input p-6">
-          <div className="shoko-scrollbar flex max-h-[12.5rem] flex-col gap-y-2 overflow-y-auto">
-            <div>Not yet implemented!</div>
-            <div>Not yet implemented!</div>
+      {isSuccess && seriesCount > 0 && (
+        <div className="flex flex-col gap-2">
+          <div className="text-base font-bold">
+            Series With Tag |&nbsp;
+            <span className="text-panel-text-important">
+              {seriesCount}
+            </span>
+            &nbsp;Series
+          </div>
+          <div className="w-full rounded-lg bg-panel-input p-6">
+            <div className="shoko-scrollbar flex max-h-[12.5rem] flex-col gap-y-2 overflow-y-auto">
+              {seriesData?.map(series => (
+                <div key={series.IDs.ID}>
+                  {series.Name}
+                </div>
+              ))}
+            </div>
           </div>
         </div>
-      </div> */
-      }
+      )}
     </ModalPanel>
   );
 });
diff --git a/src/core/react-query/filter/queries.ts b/src/core/react-query/filter/queries.ts
index faf0d5fa2..167027e01 100644
--- a/src/core/react-query/filter/queries.ts
+++ b/src/core/react-query/filter/queries.ts
@@ -3,7 +3,11 @@ import { useInfiniteQuery, useQuery } from '@tanstack/react-query';
 import { axios } from '@/core/axios';
 import { transformFilterExpressions } from '@/core/react-query/filter/helpers';
 
-import type { FilteredGroupSeriesRequestType, FilteredGroupsRequestType } from '@/core/react-query/filter/types';
+import type {
+  FilteredGroupSeriesRequestType,
+  FilteredGroupsRequestType,
+  FilteredSeriesRequestType,
+} from '@/core/react-query/filter/types';
 import type { ListResultType } from '@/core/types/api';
 import type { CollectionFilterType, CollectionGroupType } from '@/core/types/api/collection';
 import type { FilterExpression, FilterType } from '@/core/types/api/filter';
@@ -38,6 +42,31 @@ export const useFilterExpressionsQuery = (enabled = true) =>
     enabled,
   });
 
+export const useFilteredSeriesInfiniteQuery = (
+  { filterCriteria, ...params }: FilteredSeriesRequestType,
+  enabled = true,
+) =>
+  useInfiniteQuery<ListResultType<SeriesType>>({
+    queryKey: ['filter', 'preview', 'series', filterCriteria, params],
+    queryFn: ({ pageParam }) =>
+      axios.post(
+        'Filter/Preview/Series',
+        filterCriteria,
+        {
+          params: {
+            ...params,
+            page: pageParam,
+          },
+        },
+      ),
+    initialPageParam: 1,
+    getNextPageParam: (lastPage, _, lastPageParam: number) => {
+      if (!params.pageSize || lastPage.Total / params.pageSize <= lastPageParam) return undefined;
+      return lastPageParam + 1;
+    },
+    enabled,
+  });
+
 export const useFilteredGroupsInfiniteQuery = (
   { filterCriteria, ...params }: FilteredGroupsRequestType,
   enabled = true,
@@ -51,8 +80,7 @@ export const useFilteredGroupsInfiniteQuery = (
         {
           params: {
             ...params,
-            // It is supposed to infer the type from the initialPageParam property but it doesn't work
-            page: pageParam as number,
+            page: pageParam,
           },
         },
       ),
diff --git a/src/core/react-query/filter/types.ts b/src/core/react-query/filter/types.ts
index 22c0b06ca..6a0576607 100644
--- a/src/core/react-query/filter/types.ts
+++ b/src/core/react-query/filter/types.ts
@@ -12,3 +12,7 @@ export type FilteredGroupSeriesRequestType = {
   filterCriteria: FilterType;
   includeDataFrom?: DataSourceType[];
 };
+
+export type FilteredSeriesRequestType = FilteredGroupsRequestType & {
+  includeMissing?: boolean;
+};
diff --git a/src/core/types/api/filter.ts b/src/core/types/api/filter.ts
index 59b53e4ab..abba070ef 100644
--- a/src/core/types/api/filter.ts
+++ b/src/core/types/api/filter.ts
@@ -11,7 +11,9 @@ type ExpressionType =
   | 'StringFuzzyMatches'
   | 'StringNotEquals'
   | 'StringRegexMatches'
-  | 'StringStartsWith';
+  | 'StringStartsWith'
+  | 'HasTag'
+  | 'HasCustomTag';
 
 type SortingType =
   | 'AddedDate'

From a0ac104518b0cce2508ee4e65bb152b3c30cd730 Mon Sep 17 00:00:00 2001
From: Jordan Fearnley <fearnlj01@gmail.com>
Date: Thu, 23 May 2024 12:50:06 +0100
Subject: [PATCH 03/28] Fix: Swap tooltip display logic for hidden episodes

---
 src/components/Collection/Episode/EpisodeSummary.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Collection/Episode/EpisodeSummary.tsx b/src/components/Collection/Episode/EpisodeSummary.tsx
index dcac24228..cd5707fd6 100644
--- a/src/components/Collection/Episode/EpisodeSummary.tsx
+++ b/src/components/Collection/Episode/EpisodeSummary.tsx
@@ -139,7 +139,7 @@ const EpisodeSummary = React.memo(
                     icon={mdiEyeOffOutline}
                     active={episode.IsHidden}
                     onClick={handleMarkHidden}
-                    tooltip={`${episode.IsHidden ? 'Hide' : 'Unhide'} Episode`}
+                    tooltip={`${episode.IsHidden ? 'Unhide' : 'Hide'} Episode`}
                   />
                 </div>
               </div>

From a864033a2b5ad10116ae2e2cbd79c99554771ced Mon Sep 17 00:00:00 2001
From: Jordan Fearnley <fearnlj01@gmail.com>
Date: Thu, 23 May 2024 12:52:17 +0100
Subject: [PATCH 04/28] Chore: Amend type for consistency

---
 src/core/react-query/filter/types.ts | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/core/react-query/filter/types.ts b/src/core/react-query/filter/types.ts
index 6a0576607..9abacff4b 100644
--- a/src/core/react-query/filter/types.ts
+++ b/src/core/react-query/filter/types.ts
@@ -13,6 +13,8 @@ export type FilteredGroupSeriesRequestType = {
   includeDataFrom?: DataSourceType[];
 };
 
-export type FilteredSeriesRequestType = FilteredGroupsRequestType & {
+export type FilteredSeriesRequestType = {
+  randomImages?: boolean;
+  filterCriteria: FilterType;
   includeMissing?: boolean;
-};
+} & PaginationType;

From 31b7ae2f6699c72615ae06a17dac44390d022116 Mon Sep 17 00:00:00 2001
From: Jordan Fearnley <fearnlj01@gmail.com>
Date: Thu, 23 May 2024 13:06:15 +0100
Subject: [PATCH 05/28] Feat: Add link (to new tab) for series listed in the
 tag modal

---
 .../Collection/Tags/TagDetailsModal.tsx       | 20 ++++++++++++++++---
 1 file changed, 17 insertions(+), 3 deletions(-)

diff --git a/src/components/Collection/Tags/TagDetailsModal.tsx b/src/components/Collection/Tags/TagDetailsModal.tsx
index 96c1fc927..1f1493b2e 100644
--- a/src/components/Collection/Tags/TagDetailsModal.tsx
+++ b/src/components/Collection/Tags/TagDetailsModal.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { Link } from 'react-router-dom';
 import { mdiOpenInNew } from '@mdi/js';
 import Icon from '@mdi/react';
 
@@ -74,9 +75,22 @@ const TagDetailsModal = React.memo(({ onClose, show, tag }: { show: boolean, tag
           <div className="w-full rounded-lg bg-panel-input p-6">
             <div className="shoko-scrollbar flex max-h-[12.5rem] flex-col gap-y-2 overflow-y-auto">
               {seriesData?.map(series => (
-                <div key={series.IDs.ID}>
-                  {series.Name}
-                </div>
+                <Link
+                  to={`/webui/collection/series/${series.IDs.ID}/overview`}
+                  target="_blank"
+                  key={series.IDs.ID}
+                  className="flex justify-between pr-3 align-middle"
+                >
+                  <span
+                    className="line-clamp-1"
+                    data-tooltip-id="tooltip"
+                    data-tooltip-content={series.Name}
+                    data-tooltip-delay-show={500}
+                  >
+                    {series.Name}
+                  </span>
+                  <Icon path={mdiOpenInNew} size={1} className="shrink-0" />
+                </Link>
               ))}
             </div>
           </div>

From 9259b07c0aca43a8349653611cc550685a1c70cd Mon Sep 17 00:00:00 2001
From: Jordan Fearnley <fearnlj01@gmail.com>
Date: Thu, 23 May 2024 13:29:21 +0100
Subject: [PATCH 06/28] Misc: No need to apply sorting, keeping it simple and
 removing

---
 src/components/Collection/Tags/TagDetailsModal.tsx | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/components/Collection/Tags/TagDetailsModal.tsx b/src/components/Collection/Tags/TagDetailsModal.tsx
index 1f1493b2e..460019acc 100644
--- a/src/components/Collection/Tags/TagDetailsModal.tsx
+++ b/src/components/Collection/Tags/TagDetailsModal.tsx
@@ -20,10 +20,6 @@ const TagDetailsModal = React.memo(({ onClose, show, tag }: { show: boolean, tag
           Parameter: tag?.Name ?? '',
           Type: tag?.Source === 'User' ? 'HasCustomTag' : 'HasTag',
         },
-        Sorting: {
-          IsInverted: false,
-          Type: 'Name',
-        },
       },
     },
     show,

From 3d77a89810e693f9074032a4b368b5d0d6ecfbbd Mon Sep 17 00:00:00 2001
From: Harshith Mohan <gharshitmohan@ymail.com>
Date: Thu, 23 May 2024 19:28:43 +0530
Subject: [PATCH 07/28] Add z-index to `SelectEpisodeList` component (#911)

---
 src/components/Input/SelectEpisodeList.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Input/SelectEpisodeList.tsx b/src/components/Input/SelectEpisodeList.tsx
index 1378ba8b2..6bc603186 100644
--- a/src/components/Input/SelectEpisodeList.tsx
+++ b/src/components/Input/SelectEpisodeList.tsx
@@ -107,7 +107,7 @@ const SelectEpisodeList = React.memo((
           >
             <ListboxOptions
               anchor="bottom"
-              className="mt-1 w-[var(--button-width)] origin-top bg-panel-background transition"
+              className="z-[110] mt-1 w-[var(--button-width)] origin-top bg-panel-background transition"
             >
               <Input
                 className="grow"

From fcbb330e77a6c0eb861d2b2cd628cc0800287650 Mon Sep 17 00:00:00 2001
From: Harshith Mohan <gharshitmohan@ymail.com>
Date: Thu, 23 May 2024 21:31:14 +0530
Subject: [PATCH 08/28] Try to improve `SelectEpisodeList` (#912)

---
 src/components/Input/SelectEpisodeList.tsx | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/components/Input/SelectEpisodeList.tsx b/src/components/Input/SelectEpisodeList.tsx
index 6bc603186..97f2219ef 100644
--- a/src/components/Input/SelectEpisodeList.tsx
+++ b/src/components/Input/SelectEpisodeList.tsx
@@ -48,7 +48,7 @@ const SelectOption = ({ option }: { option: Option }) => (
 const SelectButton = ({ open, rowIdx, selected }: { open: boolean, rowIdx: number, selected: Option }) => (
   <ListboxButton
     className={cx(
-      'relative w-full h-full border border-panel-border rounded-lg px-4 py-2 text-left focus:outline-none focus:border-panel-text-primary transition-colors',
+      'relative w-full h-full border border-panel-border rounded-lg px-4 py-2 text-left focus:outline-none focus:border-panel-text-primary data-[open]:border-panel-text-primary transition-colors',
       rowIdx % 2 === 0 ? 'bg-panel-background' : 'bg-panel-background-alt',
     )}
   >
@@ -106,8 +106,12 @@ const SelectEpisodeList = React.memo((
             leaveTo="opacity-0"
           >
             <ListboxOptions
-              anchor="bottom"
-              className="z-[110] mt-1 w-[var(--button-width)] origin-top bg-panel-background transition"
+              anchor={{
+                to: 'bottom',
+                padding: '1rem',
+                gap: '0.25rem',
+              }}
+              className="z-[110] w-[--button-width] origin-top rounded-lg bg-panel-background transition [--anchor-max-height:24rem] focus:outline-none"
             >
               <Input
                 className="grow"
@@ -120,7 +124,8 @@ const SelectEpisodeList = React.memo((
                 placeholder="Input Episode Number..."
               />
 
-              <div className="mt-1 max-h-96 overflow-y-auto rounded-lg border border-panel-border bg-panel-input p-4">
+              {/* 4rem below is to account for height of the input component */}
+              <div className="mt-1 h-[calc(var(--anchor-max-height)-4rem)] overflow-y-auto rounded-lg border border-panel-border bg-panel-input p-4">
                 {options.map((item, idx) => (
                   <React.Fragment key={`listbox-item-${item.value}`}>
                     {idx !== 0 && item.type !== options[idx - 1].type && (

From b249070108abf88ee25d29e4961680c339b66e1b Mon Sep 17 00:00:00 2001
From: Harshith Mohan <gharshitmohan@ymail.com>
Date: Thu, 23 May 2024 23:42:04 +0530
Subject: [PATCH 09/28] Force fetch data when adding empty series (#913)

---
 src/components/Utilities/SeriesWithoutFiles/AddSeriesModal.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Utilities/SeriesWithoutFiles/AddSeriesModal.tsx b/src/components/Utilities/SeriesWithoutFiles/AddSeriesModal.tsx
index 684dbbd67..65253e8f4 100644
--- a/src/components/Utilities/SeriesWithoutFiles/AddSeriesModal.tsx
+++ b/src/components/Utilities/SeriesWithoutFiles/AddSeriesModal.tsx
@@ -31,7 +31,7 @@ const AddSeriesModal = ({ onClose, show }: Props) => {
   } = useRefreshAniDBSeriesMutation();
 
   const createSeries = (anidbId: number) => {
-    refreshSeries({ anidbID: anidbId, immediate: true, createSeriesEntry: true }, {
+    refreshSeries({ anidbID: anidbId, immediate: true, createSeriesEntry: true, force: true }, {
       onSuccess: () => {
         toast.success('Series added successfully!');
         invalidateQueries(['series', 'without-files']);

From 8d01ca6615dce0d5bba0089cdc6efad44c831fd5 Mon Sep 17 00:00:00 2001
From: Harshith Mohan <gharshitmohan@ymail.com>
Date: Fri, 24 May 2024 19:44:12 +0530
Subject: [PATCH 10/28] Debounce queue invalidation (#914)

---
 src/core/signalr/eventHandlers.ts | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/core/signalr/eventHandlers.ts b/src/core/signalr/eventHandlers.ts
index ad5445e30..f133123d1 100644
--- a/src/core/signalr/eventHandlers.ts
+++ b/src/core/signalr/eventHandlers.ts
@@ -19,8 +19,10 @@ const invalidateImportFolders = debounce(
   1000,
 );
 
-// Should we add a debounce here? It seems to work fine without it
-const invalidateQueueItems = () => invalidateQueries(['queue', 'items']);
+const invalidateQueueItems = debounce(
+  () => invalidateQueries(['queue', 'items']),
+  500,
+);
 
 const invalidateReleaseManagement = debounce(
   () => invalidateQueries(['release-management']),

From 001974cd79e48879339d2536465d0010542dd2bf Mon Sep 17 00:00:00 2001
From: Harshith Mohan <gharshitmohan@ymail.com>
Date: Fri, 24 May 2024 23:03:53 +0530
Subject: [PATCH 11/28] Collection search: allow searching by series title and
 anidb id (#915)

---
 src/core/types/api/filter.ts        |  8 ++++++++
 src/pages/collection/Collection.tsx | 20 +++++++++++++++++---
 2 files changed, 25 insertions(+), 3 deletions(-)

diff --git a/src/core/types/api/filter.ts b/src/core/types/api/filter.ts
index 59b53e4ab..ec29edfc8 100644
--- a/src/core/types/api/filter.ts
+++ b/src/core/types/api/filter.ts
@@ -2,9 +2,17 @@ type ExpressionType =
   | 'And'
   | 'Not'
   | 'Or'
+  | 'AniDBIDsSelector'
+  | 'AllContains'
+  | 'AllRegexMatches'
+  | 'AnyContains'
+  | 'AnyEquals'
+  | 'AnyFuzzyMatches'
+  | 'AnyRegexMatches'
   | 'HasUnwatchedEpisodes'
   | 'HasWatchedEpisodes'
   | 'NameSelector'
+  | 'NamesSelector'
   | 'StringContains'
   | 'StringEndsWith'
   | 'StringEquals'
diff --git a/src/pages/collection/Collection.tsx b/src/pages/collection/Collection.tsx
index ed7b06df8..f89876b35 100644
--- a/src/pages/collection/Collection.tsx
+++ b/src/pages/collection/Collection.tsx
@@ -36,14 +36,28 @@ const getFilter = (
 ): FilterType => {
   let finalCondition: FilterCondition | undefined;
   if (query) {
-    const searchCondition: FilterCondition = {
-      Type: 'StringFuzzyMatches',
+    let searchCondition: FilterCondition = {
+      Type: 'AnyContains',
       Left: {
-        Type: 'NameSelector',
+        Type: 'NamesSelector',
       },
       Parameter: query,
     };
 
+    if (Number.isFinite(toNumber(query))) {
+      searchCondition = {
+        Type: 'Or',
+        Left: searchCondition,
+        Right: {
+          Type: 'AnyEquals',
+          Left: {
+            Type: 'AniDBIDsSelector',
+          },
+          Parameter: query,
+        },
+      };
+    }
+
     if (filterCondition) {
       finalCondition = buildFilter([searchCondition, filterCondition]);
     } else {

From 85777e483805ade3805bebe893aca1a8ee781df6 Mon Sep 17 00:00:00 2001
From: Jordan Fearnley <fearnlj01@gmail.com>
Date: Sat, 25 May 2024 11:24:19 +0100
Subject: [PATCH 12/28] Misc: Edit series (Name) - Scrollable container now use
 shoko-scrollbar

---
 src/components/Collection/Series/EditSeriesTabs/NameTab.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Collection/Series/EditSeriesTabs/NameTab.tsx b/src/components/Collection/Series/EditSeriesTabs/NameTab.tsx
index 60da9a2df..7a4c51040 100644
--- a/src/components/Collection/Series/EditSeriesTabs/NameTab.tsx
+++ b/src/components/Collection/Series/EditSeriesTabs/NameTab.tsx
@@ -80,7 +80,7 @@ const NameTab = ({ seriesId }: Props) => {
       />
       {nameEditable && (
         <div className="flex cursor-pointer overflow-y-auto rounded-lg border border-panel-border bg-panel-input p-6">
-          <div className="flex grow flex-col gap-y-2 overflow-y-auto bg-panel-input pr-4">
+          <div className="shoko-scrollbar flex grow flex-col gap-y-2 overflow-y-auto bg-panel-input pr-4">
             {map(series.AniDB?.Titles, title => (
               <div
                 className="flex justify-between last:border-none hover:text-panel-text-primary"

From 96046743263e73d329333ccc345c59a3f1501dcd Mon Sep 17 00:00:00 2001
From: Jordan Fearnley <fearnlj01@gmail.com>
Date: Sat, 25 May 2024 15:39:34 +0100
Subject: [PATCH 13/28] Feat: Provisional implementation of group management on
 series

---
 .../Collection/Series/EditSeriesModal.tsx     |  13 +-
 .../Series/EditSeriesTabs/GroupTab.tsx        | 243 +++++++++++++-----
 src/components/Input/Input.tsx                |  45 +++-
 src/core/react-query/group/mutations.ts       |  47 ++++
 src/core/react-query/group/types.ts           |  16 ++
 5 files changed, 287 insertions(+), 77 deletions(-)
 create mode 100644 src/core/react-query/group/mutations.ts

diff --git a/src/components/Collection/Series/EditSeriesModal.tsx b/src/components/Collection/Series/EditSeriesModal.tsx
index de3b250fe..2d16c6cfe 100644
--- a/src/components/Collection/Series/EditSeriesModal.tsx
+++ b/src/components/Collection/Series/EditSeriesModal.tsx
@@ -4,12 +4,13 @@ import { map } from 'lodash';
 
 import DeleteActionsTab from '@/components/Collection/Series/EditSeriesTabs/DeleteActionsTab';
 import FileActionsTab from '@/components/Collection/Series/EditSeriesTabs/FileActionsTab';
+import GroupTab from '@/components/Collection/Series/EditSeriesTabs/GroupTab';
 import NameTab from '@/components/Collection/Series/EditSeriesTabs/NameTab';
 import UpdateActionsTab from '@/components/Collection/Series/EditSeriesTabs/UpdateActionsTab';
 import ModalPanel from '@/components/Panels/ModalPanel';
-// TODO: Add tabs after implementing back-end endpoint for GroupTab and PersonalStats
-// import GroupTab from './EditSeriesTabs/GroupTab';
-// import PersonalStats from './EditSeriesTabs/PersonalStats';
+
+// TODO: Add tabs after implementing back-end endpoint for PersonalStats
+// import PersonalStats from '@/components/Collection/Series/EditSeriesTabs/PersonalStats';
 
 type Props = {
   show: boolean;
@@ -22,7 +23,7 @@ const tabs = {
   update_actions: 'Update Actions',
   file_actions: 'File Actions',
   delete_actions: 'Delete Actions',
-  // group: 'Group',
+  group: 'Group',
   // stats: 'Personal Stats',
 };
 
@@ -34,8 +35,8 @@ const renderTab = (activeTab: string, seriesId: number) => {
       return <FileActionsTab seriesId={seriesId} />;
     case 'delete_actions':
       return <DeleteActionsTab seriesId={seriesId} />;
-    // case 'group':
-    //   return <GroupTab seriesId={seriesId} />;
+    case 'group':
+      return <GroupTab seriesId={seriesId} />;
     // case 'stats':
     //   return <PersonalStats />;
     case 'update_actions':
diff --git a/src/components/Collection/Series/EditSeriesTabs/GroupTab.tsx b/src/components/Collection/Series/EditSeriesTabs/GroupTab.tsx
index 13548ce4a..ac10a36c2 100644
--- a/src/components/Collection/Series/EditSeriesTabs/GroupTab.tsx
+++ b/src/components/Collection/Series/EditSeriesTabs/GroupTab.tsx
@@ -1,11 +1,24 @@
-import React, { useEffect, useState } from 'react';
-import { mdiCheckUnderlineCircleOutline, mdiCloseCircleOutline, mdiMagnify, mdiPencilCircleOutline } from '@mdi/js';
-import cx from 'classnames';
+import React, { useEffect, useMemo, useState } from 'react';
+import {
+  mdiCheckUnderlineCircleOutline,
+  mdiCloseCircleOutline,
+  mdiFolderMoveOutline,
+  mdiFolderPlusOutline,
+  mdiMagnify,
+  mdiPencilCircleOutline,
+} from '@mdi/js';
+import Icon from '@mdi/react';
 import { useDebounceValue } from 'usehooks-ts';
 
 import Input from '@/components/Input/Input';
+import {
+  useCreateGroupMutation,
+  useMoveGroupMutation,
+  usePatchGroupMutation,
+} from '@/core/react-query/group/mutations';
 import { useGroupsInfiniteQuery } from '@/core/react-query/group/queries';
 import { useSeriesGroupQuery } from '@/core/react-query/series/queries';
+import useEventCallback from '@/hooks/useEventCallback';
 import useFlattenListResult from '@/hooks/useFlattenListResult';
 
 import type { CollectionGroupType } from '@/core/types/api/collection';
@@ -14,82 +27,190 @@ type Props = {
   seriesId: number;
 };
 
-const Title = ({ group }: { group: CollectionGroupType }) => (
-  <div
-    className="flex cursor-pointer justify-between"
-    key={group.IDs.MainSeries}
-    onClick={() => {}}
-  >
-    <div>{group.Name}</div>
-    {group.IDs.MainSeries}
-  </div>
+type EndIcon = {
+  icon: string;
+  className?: string;
+  onClick?: React.MouseEventHandler<HTMLDivElement>;
+  tooltip?: string;
+};
+
+type EditableNameComponentProps = {
+  name: string;
+  groupId: number;
+  moveToNewGroup: () => void;
+  renameGroup: ({ groupId, newName }: { groupId: number, newName: string }) => void;
+};
+const EditableNameComponent = React.memo(
+  ({ groupId, moveToNewGroup, name, renameGroup }: EditableNameComponentProps) => {
+    const [editingName, setEditingName] = useState(false);
+    const [modifiableName, setModifiableName] = useState(name);
+
+    useEffect(() => {
+      setModifiableName(name);
+    }, [name]);
+
+    const cancelEditing = useEventCallback(() => {
+      setModifiableName(() => {
+        setEditingName(false);
+        return name;
+      });
+    });
+
+    const saveName = useEventCallback(() => {
+      if (modifiableName !== name) {
+        renameGroup({ groupId, newName: modifiableName });
+      }
+      setEditingName(false);
+    });
+
+    const endIcons: EndIcon[] = (!editingName)
+      ? [
+        {
+          icon: mdiFolderPlusOutline,
+          className: 'text-panel-text-primary',
+          onClick: moveToNewGroup,
+          tooltip: 'Move to new group',
+        },
+        {
+          icon: mdiPencilCircleOutline,
+          className: 'text-panel-text-primary',
+          onClick: () => setEditingName(true),
+          tooltip: 'Edit group',
+        },
+      ]
+      : [
+        {
+          icon: mdiCloseCircleOutline,
+          className: 'text-red-500',
+          onClick: cancelEditing,
+          tooltip: 'Cancel',
+        },
+        {
+          icon: mdiCheckUnderlineCircleOutline,
+          className: 'text-panel-text-primary',
+          onClick: saveName,
+          tooltip: 'Rename group',
+        },
+      ];
+
+    const updateInput = useEventCallback((event: React.ChangeEvent<HTMLInputElement>) => {
+      setModifiableName(event.target.value);
+    });
+
+    return (
+      <Input
+        id="group-name"
+        type="text"
+        value={modifiableName}
+        onChange={updateInput}
+        label="Name"
+        className="mb-4"
+        endIcons={endIcons}
+        disabled={!editingName}
+      />
+    );
+  },
 );
 
+const ExistingGroup = React.memo((
+  { group, moveToGroup }: { group: CollectionGroupType, moveToGroup: ({ groupId }: { groupId: number }) => void },
+) => (
+  <div className="flex w-full justify-between">
+    <div
+      className="line-clamp-1"
+      data-tooltip-id="tooltip"
+      data-tooltip-content={group.Name}
+      data-tooltip-delay-show={500}
+    >
+      {group.Name}
+    </div>
+    <div
+      className="cursor-pointer text-panel-icon-action"
+      onClick={() => moveToGroup({ groupId: group.IDs.ParentGroup ?? group.IDs.TopLevelGroup })}
+      data-tooltip-id="tooltip"
+      data-tooltip-content="Move to group"
+      data-tooltip-place="top"
+    >
+      <Icon path={mdiFolderMoveOutline} size={1} />
+    </div>
+  </div>
+));
+
 function GroupTab({ seriesId }: Props) {
-  const [name, setName] = useState('');
-  const [nameEditable, setNameEditable] = useState(false);
   const [search, setSearch] = useState('');
   const [debouncedSearch] = useDebounceValue(search, 200);
 
-  const groupQuery = useSeriesGroupQuery(seriesId, false);
+  const updateSearch = useEventCallback((e: React.ChangeEvent<HTMLInputElement>) => setSearch(e.target.value));
+
+  const { data: seriesGroup, isSuccess: isSeriesGroupSuccess } = useSeriesGroupQuery(seriesId, false);
   const groupsQuery = useGroupsInfiniteQuery({ startsWith: debouncedSearch, pageSize: 10 });
   const [groups] = useFlattenListResult(groupsQuery.data);
 
-  useEffect(() => {
-    if (groupQuery.isSuccess) setName(groupQuery.data.Name);
-  }, [groupQuery.isSuccess, groupQuery.data?.Name]);
-
-  const getNameInputIcons = () => {
-    if (!nameEditable) {
-      return [{
-        icon: mdiPencilCircleOutline,
-        className: 'text-panel-text-primary',
-        onClick: () => setNameEditable(_ => true),
-      }];
-    }
+  const { mutate: moveToNewGroupMutation } = useCreateGroupMutation();
+  const { mutate: moveToExistingGroupMutation } = useMoveGroupMutation();
+  const { mutate: renameGroupMutation } = usePatchGroupMutation();
 
-    return [{
-      icon: mdiCloseCircleOutline,
-      className: 'text-red-500',
-      onClick: () => setName(_ => ''),
-    }, {
-      icon: mdiCheckUnderlineCircleOutline,
-      className: 'text-panel-text-primary',
-      onClick: () => {}, // TODO: Need endpoint to update series
-    }];
-  };
+  const moveToNewGroup = useEventCallback(() => moveToNewGroupMutation({ seriesId }));
+  const moveToExistingGroup = useEventCallback(({ groupId }: { groupId: number }) => {
+    moveToExistingGroupMutation({ seriesId, groupId });
+  });
+  const renameGroup = useEventCallback(({ groupId, newName }: { groupId: number, newName: string }) => {
+    renameGroupMutation(
+      {
+        seriesId,
+        groupId,
+        operations: [
+          { op: 'replace', path: 'Name', value: newName },
+          { op: 'replace', path: 'HasCustomName', value: 'true' },
+        ],
+      },
+    );
+  });
 
-  return (
-    <div className="flex flex-col">
-      <Input
-        id="name"
-        type="text"
-        onChange={e => setName(e.target.value)}
-        value={name}
-        label="Name"
-        className="mb-4"
-        endIcons={getNameInputIcons()}
-        disabled={!nameEditable}
-      />
+  const QueryStatusElement = useMemo(() => {
+    if (groupsQuery.isLoading) {
+      return <span className="self-center">Loading...</span>;
+    }
+    if (groupsQuery.isError) {
+      return <span className="self-center">Error, please refresh!</span>;
+    }
+    return <span className="self-center">No Results!</span>;
+  }, [groupsQuery.isError, groupsQuery.isLoading]);
+
+  const GroupSearchComponent = useMemo(() => (
+    <>
       <Input
         id="search"
         type="text"
         value={search}
-        onChange={e => setSearch(e.target.value)}
+        onChange={updateSearch}
         startIcon={mdiMagnify}
-        placeholder="Name Search..."
-        disabled={!nameEditable}
-        className={cx(!nameEditable && 'invisible')}
+        placeholder="Group Search..."
+        label="Move Series to Group"
       />
-      <div
-        className={cx(
-          'mt-1 flex flex-col gap-y-2.5 rounded-lg border border-panel-border bg-panel-background-alt p-4',
-          !nameEditable && 'invisible',
-        )}
-      >
-        {!debouncedSearch && groupQuery.isSuccess && <Title group={groupQuery.data} />}
-        {debouncedSearch && groupsQuery.isSuccess && groups.map(group => <Title key={group.IDs.ID} group={group} />)}
+      <div className="mt-2 flex select-none overflow-y-auto rounded-lg border border-panel-border bg-panel-input p-6">
+        <div className="shoko-scrollbar flex grow flex-col gap-y-2 overflow-y-auto bg-panel-input pr-3">
+          {groups.length === 0
+            ? QueryStatusElement
+            : groups.map(group => (
+              <ExistingGroup key={group.IDs.TopLevelGroup} group={group} moveToGroup={moveToExistingGroup} />
+            ))}
+        </div>
       </div>
+    </>
+  ), [QueryStatusElement, groups, moveToExistingGroup, search, updateSearch]);
+
+  return (
+    <div className="flex h-full flex-col">
+      {isSeriesGroupSuccess && (
+        <EditableNameComponent
+          groupId={seriesGroup.IDs.ParentGroup ?? seriesGroup.IDs.TopLevelGroup}
+          name={seriesGroup.Name}
+          moveToNewGroup={moveToNewGroup}
+          renameGroup={renameGroup}
+        />
+      )}
+      {GroupSearchComponent}
     </div>
   );
 }
diff --git a/src/components/Input/Input.tsx b/src/components/Input/Input.tsx
index e34762d9b..cad3d874e 100644
--- a/src/components/Input/Input.tsx
+++ b/src/components/Input/Input.tsx
@@ -1,9 +1,17 @@
 import React, { useContext, useEffect, useMemo, useRef } from 'react';
+import type { PlacesType } from 'react-tooltip';
 import { Icon } from '@mdi/react';
 import cx from 'classnames';
 
 import { BodyVisibleContext } from '@/core/router';
 
+type EndIcon = {
+  icon: string;
+  className?: string;
+  onClick?: React.MouseEventHandler<HTMLDivElement>;
+  tooltip?: string;
+};
+
 type Props = {
   id: string;
   label?: string;
@@ -17,7 +25,7 @@ type Props = {
   autoFocus?: boolean;
   disabled?: boolean;
   center?: boolean;
-  endIcons?: { icon: string, className?: string, onClick?: React.MouseEventHandler<HTMLDivElement> }[];
+  endIcons?: EndIcon[];
   startIcon?: string;
   inline?: boolean;
   isOverlay?: boolean;
@@ -25,6 +33,12 @@ type Props = {
   onToggleOverlay?: (show: boolean) => void;
 };
 
+type TooltipAttributes = {
+  'data-tooltip-id': string;
+  'data-tooltip-content': string;
+  'data-tooltip-place': PlacesType;
+};
+
 function Input(props: Props) {
   const {
     autoFocus,
@@ -125,15 +139,26 @@ function Input(props: Props) {
           />
           {endIcons?.length && (
             <div className="absolute right-3 top-1/2 flex -translate-y-1/2 flex-row gap-x-2">
-              {endIcons?.map(icon => (
-                <div
-                  key={`input-${icon.icon}`}
-                  onClick={icon.onClick}
-                  className={cx('cursor-pointer text-panel-text', icon.className)}
-                >
-                  <Icon path={icon.icon} size={1} />
-                </div>
-              ), [] as React.ReactNode[]) ?? []}
+              {endIcons.map((icon) => {
+                let tooltipAttributes: TooltipAttributes | null = null;
+                if (icon.tooltip) {
+                  tooltipAttributes = {
+                    'data-tooltip-id': 'tooltip',
+                    'data-tooltip-content': icon.tooltip,
+                    'data-tooltip-place': 'top',
+                  };
+                }
+                return (
+                  <div
+                    key={`input-${icon.icon}`}
+                    onClick={icon.onClick}
+                    className={cx('cursor-pointer text-panel-text', icon.className)}
+                    {...tooltipAttributes}
+                  >
+                    <Icon path={icon.icon} size={1} />
+                  </div>
+                );
+              })}
             </div>
           )}
         </div>
diff --git a/src/core/react-query/group/mutations.ts b/src/core/react-query/group/mutations.ts
new file mode 100644
index 000000000..23edc93b7
--- /dev/null
+++ b/src/core/react-query/group/mutations.ts
@@ -0,0 +1,47 @@
+import { useMutation } from '@tanstack/react-query';
+
+import { axios } from '@/core/axios';
+import { invalidateQueries } from '@/core/react-query/queryClient';
+
+import type {
+  CreateGroupRequestType,
+  MoveSeriesGroupRequestType,
+  PatchGroupRequestType,
+} from '@/core/react-query/group/types';
+
+/**
+ * This all needs much more work on query invalidation.
+ * Currently, it's naïve and only invalidates the current series query.
+ * It should probably invalidate the cache for the before/after state of any series belonging to impacted groups.
+ */
+
+export const usePatchGroupMutation = () =>
+  useMutation({
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars -- seriesId is used later for query invalidation
+    mutationFn: ({ groupId, operations, seriesId }: PatchGroupRequestType) =>
+      axios.patch(
+        `Group/${groupId}`,
+        operations,
+      ),
+    onSuccess: (_, { seriesId }) => invalidateQueries(['series', seriesId]),
+  });
+
+export const useCreateGroupMutation = () =>
+  useMutation({
+    mutationFn: ({ seriesId }: CreateGroupRequestType) =>
+      axios.post(
+        'Group',
+        {
+          PreferredSeriesID: seriesId,
+          SeriesIDs: [seriesId],
+        },
+      ),
+    onSuccess: (_, { seriesId }) => invalidateQueries(['series', seriesId]),
+  });
+
+export const useMoveGroupMutation = () =>
+  useMutation({
+    mutationFn: ({ groupId, seriesId }: MoveSeriesGroupRequestType) =>
+      axios.patch(`Series/${seriesId}/Move/${groupId}`),
+    onSuccess: (_, { seriesId }) => invalidateQueries(['series', seriesId]),
+  });
diff --git a/src/core/react-query/group/types.ts b/src/core/react-query/group/types.ts
index 051fb4ff6..4cfe43b65 100644
--- a/src/core/react-query/group/types.ts
+++ b/src/core/react-query/group/types.ts
@@ -1,4 +1,5 @@
 import type { PaginationType } from '@/core/types/api';
+import type { Operation } from 'fast-json-patch';
 
 export type GroupsInfiniteRequestType = {
   randomImages?: boolean;
@@ -6,3 +7,18 @@ export type GroupsInfiniteRequestType = {
   topLevelOnly?: boolean;
   includeEmpty?: boolean;
 } & PaginationType;
+
+export type CreateGroupRequestType = {
+  seriesId: number;
+};
+
+export type PatchGroupRequestType = {
+  groupId: number;
+  seriesId: number;
+  operations: Operation[];
+};
+
+export type MoveSeriesGroupRequestType = {
+  seriesId: number;
+  groupId: number;
+};

From 3c7164d67c5c92797db8111dc8e0b81004cdec5a Mon Sep 17 00:00:00 2001
From: Jordan Fearnley <fearnlj01@gmail.com>
Date: Sat, 25 May 2024 16:18:12 +0100
Subject: [PATCH 14/28] Refactor: Use filter query to list groups

---
 .../Series/EditSeriesTabs/GroupTab.tsx         | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

diff --git a/src/components/Collection/Series/EditSeriesTabs/GroupTab.tsx b/src/components/Collection/Series/EditSeriesTabs/GroupTab.tsx
index ac10a36c2..4969d0567 100644
--- a/src/components/Collection/Series/EditSeriesTabs/GroupTab.tsx
+++ b/src/components/Collection/Series/EditSeriesTabs/GroupTab.tsx
@@ -11,17 +11,18 @@ import Icon from '@mdi/react';
 import { useDebounceValue } from 'usehooks-ts';
 
 import Input from '@/components/Input/Input';
+import { useFilteredGroupsInfiniteQuery } from '@/core/react-query/filter/queries';
 import {
   useCreateGroupMutation,
   useMoveGroupMutation,
   usePatchGroupMutation,
 } from '@/core/react-query/group/mutations';
-import { useGroupsInfiniteQuery } from '@/core/react-query/group/queries';
 import { useSeriesGroupQuery } from '@/core/react-query/series/queries';
 import useEventCallback from '@/hooks/useEventCallback';
 import useFlattenListResult from '@/hooks/useFlattenListResult';
 
 import type { CollectionGroupType } from '@/core/types/api/collection';
+import type { FilterType } from '@/core/types/api/filter';
 
 type Props = {
   seriesId: number;
@@ -136,6 +137,16 @@ const ExistingGroup = React.memo((
   </div>
 ));
 
+const getFilter = (query: string): FilterType => ((query === '') ? {} : {
+  ApplyAtSeriesLevel: true,
+  Expression: {
+    Type: 'AnyContains',
+    Left: { Type: 'NamesSelector' },
+    Parameter: query,
+  },
+  Sorting: { Type: 'Name', IsInverted: false },
+});
+
 function GroupTab({ seriesId }: Props) {
   const [search, setSearch] = useState('');
   const [debouncedSearch] = useDebounceValue(search, 200);
@@ -143,7 +154,10 @@ function GroupTab({ seriesId }: Props) {
   const updateSearch = useEventCallback((e: React.ChangeEvent<HTMLInputElement>) => setSearch(e.target.value));
 
   const { data: seriesGroup, isSuccess: isSeriesGroupSuccess } = useSeriesGroupQuery(seriesId, false);
-  const groupsQuery = useGroupsInfiniteQuery({ startsWith: debouncedSearch, pageSize: 10 });
+  const groupsQuery = useFilteredGroupsInfiniteQuery({
+    filterCriteria: getFilter(debouncedSearch),
+    pageSize: 10,
+  });
   const [groups] = useFlattenListResult(groupsQuery.data);
 
   const { mutate: moveToNewGroupMutation } = useCreateGroupMutation();

From 5cba2e5e7f7bf6f8519350b513bee5bc839cab26 Mon Sep 17 00:00:00 2001
From: Jordan Fearnley <fearnlj01@gmail.com>
Date: Sat, 25 May 2024 16:32:32 +0100
Subject: [PATCH 15/28] Misc: Only actually move group if moving series to a
 new group

---
 src/components/Collection/Series/EditSeriesTabs/GroupTab.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/components/Collection/Series/EditSeriesTabs/GroupTab.tsx b/src/components/Collection/Series/EditSeriesTabs/GroupTab.tsx
index 4969d0567..00efa1604 100644
--- a/src/components/Collection/Series/EditSeriesTabs/GroupTab.tsx
+++ b/src/components/Collection/Series/EditSeriesTabs/GroupTab.tsx
@@ -166,7 +166,10 @@ function GroupTab({ seriesId }: Props) {
 
   const moveToNewGroup = useEventCallback(() => moveToNewGroupMutation({ seriesId }));
   const moveToExistingGroup = useEventCallback(({ groupId }: { groupId: number }) => {
-    moveToExistingGroupMutation({ seriesId, groupId });
+    const currentGroupId = seriesGroup?.IDs?.ParentGroup ?? seriesGroup?.IDs.TopLevelGroup;
+    if (currentGroupId && currentGroupId !== groupId) {
+      moveToExistingGroupMutation({ seriesId, groupId });
+    }
   });
   const renameGroup = useEventCallback(({ groupId, newName }: { groupId: number, newName: string }) => {
     renameGroupMutation(

From 83fc38dfcdbf1897ab8a0bc83d2cbd1d753b7642 Mon Sep 17 00:00:00 2001
From: Jordan Fearnley <fearnlj01@gmail.com>
Date: Sat, 25 May 2024 17:51:17 +0100
Subject: [PATCH 16/28] Misc: Better invalidations on group mutations

---
 src/core/react-query/group/mutations.ts | 27 +++++++++++++++----------
 1 file changed, 16 insertions(+), 11 deletions(-)

diff --git a/src/core/react-query/group/mutations.ts b/src/core/react-query/group/mutations.ts
index 23edc93b7..339429819 100644
--- a/src/core/react-query/group/mutations.ts
+++ b/src/core/react-query/group/mutations.ts
@@ -10,20 +10,19 @@ import type {
 } from '@/core/react-query/group/types';
 
 /**
- * This all needs much more work on query invalidation.
+ * This file probably needs more work on query invalidation.
  * Currently, it's naïve and only invalidates the current series query.
- * It should probably invalidate the cache for the before/after state of any series belonging to impacted groups.
+ * It should probably also invalidate the cache for:
+ *  * Any series belonging to the "original" groups of a series.
  */
 
 export const usePatchGroupMutation = () =>
   useMutation({
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars -- seriesId is used later for query invalidation
-    mutationFn: ({ groupId, operations, seriesId }: PatchGroupRequestType) =>
-      axios.patch(
-        `Group/${groupId}`,
-        operations,
-      ),
-    onSuccess: (_, { seriesId }) => invalidateQueries(['series', seriesId]),
+    mutationFn: ({ groupId, operations }: PatchGroupRequestType) => axios.patch(`Group/${groupId}`, operations),
+    onSuccess: (_, { seriesId }) => {
+      invalidateQueries(['series', seriesId, 'data']);
+      invalidateQueries(['series', seriesId, 'group']);
+    },
   });
 
 export const useCreateGroupMutation = () =>
@@ -36,12 +35,18 @@ export const useCreateGroupMutation = () =>
           SeriesIDs: [seriesId],
         },
       ),
-    onSuccess: (_, { seriesId }) => invalidateQueries(['series', seriesId]),
+    onSuccess: (_, { seriesId }) => {
+      invalidateQueries(['series', seriesId, 'data']);
+      invalidateQueries(['series', seriesId, 'group']);
+    },
   });
 
 export const useMoveGroupMutation = () =>
   useMutation({
     mutationFn: ({ groupId, seriesId }: MoveSeriesGroupRequestType) =>
       axios.patch(`Series/${seriesId}/Move/${groupId}`),
-    onSuccess: (_, { seriesId }) => invalidateQueries(['series', seriesId]),
+    onSuccess: (_, { seriesId }) => {
+      invalidateQueries(['series', seriesId, 'data']);
+      invalidateQueries(['series', seriesId, 'group']);
+    },
   });

From 67229e041233a8fff692eba8a3adb7ed77516f30 Mon Sep 17 00:00:00 2001
From: Jordan Fearnley <fearnlj01@gmail.com>
Date: Sat, 25 May 2024 17:58:28 +0100
Subject: [PATCH 17/28] Edit Series | Group layout tweaks

---
 .../Collection/Series/EditSeriesTabs/GroupTab.tsx | 15 +++++++--------
 1 file changed, 7 insertions(+), 8 deletions(-)

diff --git a/src/components/Collection/Series/EditSeriesTabs/GroupTab.tsx b/src/components/Collection/Series/EditSeriesTabs/GroupTab.tsx
index 00efa1604..d0b3ad6c5 100644
--- a/src/components/Collection/Series/EditSeriesTabs/GroupTab.tsx
+++ b/src/components/Collection/Series/EditSeriesTabs/GroupTab.tsx
@@ -76,7 +76,7 @@ const EditableNameComponent = React.memo(
           icon: mdiPencilCircleOutline,
           className: 'text-panel-text-primary',
           onClick: () => setEditingName(true),
-          tooltip: 'Edit group',
+          tooltip: 'Edit group name',
         },
       ]
       : [
@@ -104,10 +104,10 @@ const EditableNameComponent = React.memo(
         type="text"
         value={modifiableName}
         onChange={updateInput}
-        label="Name"
-        className="mb-4"
         endIcons={endIcons}
         disabled={!editingName}
+        inputClassName="pr-[4.5rem] truncate"
+        className="mb-6"
       />
     );
   },
@@ -186,12 +186,12 @@ function GroupTab({ seriesId }: Props) {
 
   const QueryStatusElement = useMemo(() => {
     if (groupsQuery.isLoading) {
-      return <span className="self-center">Loading...</span>;
+      return <span className="my-auto self-center">Loading...</span>;
     }
     if (groupsQuery.isError) {
-      return <span className="self-center">Error, please refresh!</span>;
+      return <span className="my-auto self-center">Error, please refresh!</span>;
     }
-    return <span className="self-center">No Results!</span>;
+    return <span className="my-auto self-center">No Results!</span>;
   }, [groupsQuery.isError, groupsQuery.isLoading]);
 
   const GroupSearchComponent = useMemo(() => (
@@ -203,9 +203,8 @@ function GroupTab({ seriesId }: Props) {
         onChange={updateSearch}
         startIcon={mdiMagnify}
         placeholder="Group Search..."
-        label="Move Series to Group"
       />
-      <div className="mt-2 flex select-none overflow-y-auto rounded-lg border border-panel-border bg-panel-input p-6">
+      <div className="mt-2 flex grow select-none overflow-y-auto rounded-lg border border-panel-border bg-panel-input p-6">
         <div className="shoko-scrollbar flex grow flex-col gap-y-2 overflow-y-auto bg-panel-input pr-3">
           {groups.length === 0
             ? QueryStatusElement

From 92576fee1b2a9fa89eb4826f173236ddc7854787 Mon Sep 17 00:00:00 2001
From: Jordan Fearnley <fearnlj01@gmail.com>
Date: Sat, 25 May 2024 18:09:00 +0100
Subject: [PATCH 18/28] Edit Series | Misc: Prevent underflow with long names
 into endIcons in name tab

---
 src/components/Collection/Series/EditSeriesTabs/NameTab.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/components/Collection/Series/EditSeriesTabs/NameTab.tsx b/src/components/Collection/Series/EditSeriesTabs/NameTab.tsx
index 7a4c51040..de3a71cef 100644
--- a/src/components/Collection/Series/EditSeriesTabs/NameTab.tsx
+++ b/src/components/Collection/Series/EditSeriesTabs/NameTab.tsx
@@ -1,5 +1,6 @@
 import React, { useEffect, useMemo, useState } from 'react';
 import { mdiCheckUnderlineCircleOutline, mdiCloseCircleOutline, mdiPencilCircleOutline } from '@mdi/js';
+import cx from 'classnames';
 import { map } from 'lodash';
 import { useToggle } from 'usehooks-ts';
 
@@ -75,6 +76,7 @@ const NameTab = ({ seriesId }: Props) => {
         value={name}
         label="Name"
         className="mb-4"
+        inputClassName={cx(nameInputIcons.length > 1 ? 'pr-[4.5rem]' : 'pr-10', 'truncate')}
         endIcons={nameInputIcons}
         disabled={!nameEditable}
       />

From a6fdcfb982ad6889ffc97b595902fe03501876ed Mon Sep 17 00:00:00 2001
From: Jordan Fearnley <fearnlj01@gmail.com>
Date: Sat, 25 May 2024 18:13:20 +0100
Subject: [PATCH 19/28] Added *provisional* toasts for group mutations

---
 src/core/react-query/group/mutations.ts | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/core/react-query/group/mutations.ts b/src/core/react-query/group/mutations.ts
index 339429819..58b8ae30f 100644
--- a/src/core/react-query/group/mutations.ts
+++ b/src/core/react-query/group/mutations.ts
@@ -1,5 +1,6 @@
 import { useMutation } from '@tanstack/react-query';
 
+import toast from '@/components/Toast';
 import { axios } from '@/core/axios';
 import { invalidateQueries } from '@/core/react-query/queryClient';
 
@@ -22,6 +23,7 @@ export const usePatchGroupMutation = () =>
     onSuccess: (_, { seriesId }) => {
       invalidateQueries(['series', seriesId, 'data']);
       invalidateQueries(['series', seriesId, 'group']);
+      toast.success('Group updated!');
     },
   });
 
@@ -38,6 +40,7 @@ export const useCreateGroupMutation = () =>
     onSuccess: (_, { seriesId }) => {
       invalidateQueries(['series', seriesId, 'data']);
       invalidateQueries(['series', seriesId, 'group']);
+      toast.success('Created new group!');
     },
   });
 
@@ -48,5 +51,6 @@ export const useMoveGroupMutation = () =>
     onSuccess: (_, { seriesId }) => {
       invalidateQueries(['series', seriesId, 'data']);
       invalidateQueries(['series', seriesId, 'group']);
+      toast.success('Moved series into new group!');
     },
   });

From 64ec836d03b70e79ec3176ab6df489703237273e Mon Sep 17 00:00:00 2001
From: Jordan Fearnley <fearnlj01@gmail.com>
Date: Sat, 25 May 2024 18:18:28 +0100
Subject: [PATCH 20/28] Edit Series | Group tab - increase the amount of
 requested groups with the filter search

---
 src/components/Collection/Series/EditSeriesTabs/GroupTab.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Collection/Series/EditSeriesTabs/GroupTab.tsx b/src/components/Collection/Series/EditSeriesTabs/GroupTab.tsx
index d0b3ad6c5..3e18bf810 100644
--- a/src/components/Collection/Series/EditSeriesTabs/GroupTab.tsx
+++ b/src/components/Collection/Series/EditSeriesTabs/GroupTab.tsx
@@ -156,7 +156,7 @@ function GroupTab({ seriesId }: Props) {
   const { data: seriesGroup, isSuccess: isSeriesGroupSuccess } = useSeriesGroupQuery(seriesId, false);
   const groupsQuery = useFilteredGroupsInfiniteQuery({
     filterCriteria: getFilter(debouncedSearch),
-    pageSize: 10,
+    pageSize: 50,
   });
   const [groups] = useFlattenListResult(groupsQuery.data);
 

From d7c824f1ca04dce38f1093f9e0730f96f37c7b57 Mon Sep 17 00:00:00 2001
From: Jordan Fearnley <fearnlj01@gmail.com>
Date: Sat, 25 May 2024 19:02:26 +0100
Subject: [PATCH 21/28] Series Overview | Misc: Filter to seiyuus then pick 20,
 rather than the inverse

---
 .../collection/series/SeriesOverview.tsx      | 44 +++++++++----------
 1 file changed, 21 insertions(+), 23 deletions(-)

diff --git a/src/pages/collection/series/SeriesOverview.tsx b/src/pages/collection/series/SeriesOverview.tsx
index 8cfbddea7..a9743c5b2 100644
--- a/src/pages/collection/series/SeriesOverview.tsx
+++ b/src/pages/collection/series/SeriesOverview.tsx
@@ -229,30 +229,28 @@ const SeriesOverview = () => {
       )}
       <ShokoPanel title="Top 20 Seiyuu" className="w-full" transparent>
         <div className="z-10 flex w-full gap-x-6">
-          {cast?.slice(0, 20).map(seiyuu => (
-            seiyuu.RoleName === 'Seiyuu' && (
-              <div
-                key={`${seiyuu.Character.Name}-${Math.random() * (cast.length + seiyuu.Character.Name.length)}`}
-                className="flex flex-col items-center gap-y-3 pb-3"
-              >
-                <div className="flex gap-x-4">
-                  <CharacterImage
-                    imageSrc={getThumbnailUrl(seiyuu, 'Character')}
-                    className="relative h-48 w-36 rounded-lg"
-                  />
-                  <CharacterImage
-                    imageSrc={getThumbnailUrl(seiyuu, 'Staff')}
-                    className="relative h-48 w-36 rounded-lg"
-                  />
-                </div>
-                <div className="flex flex-col items-center">
-                  <span className="line-clamp-1 text-ellipsis text-xl font-semibold">{seiyuu.Character.Name}</span>
-                  <span className="line-clamp-1 text-ellipsis text-sm font-semibold opacity-65">
-                    {seiyuu.Staff.Name}
-                  </span>
-                </div>
+          {cast?.filter(credit => credit.RoleName === 'Seiyuu').slice(0, 20).map(seiyuu => (
+            <div
+              key={`${seiyuu.Character.Name}-${Math.random() * (cast.length + seiyuu.Character.Name.length)}`}
+              className="flex flex-col items-center gap-y-3 pb-3"
+            >
+              <div className="flex gap-x-4">
+                <CharacterImage
+                  imageSrc={getThumbnailUrl(seiyuu, 'Character')}
+                  className="relative h-48 w-36 rounded-lg"
+                />
+                <CharacterImage
+                  imageSrc={getThumbnailUrl(seiyuu, 'Staff')}
+                  className="relative h-48 w-36 rounded-lg"
+                />
+              </div>
+              <div className="flex flex-col items-center">
+                <span className="line-clamp-1 text-ellipsis text-xl font-semibold">{seiyuu.Character.Name}</span>
+                <span className="line-clamp-1 text-ellipsis text-sm font-semibold opacity-65">
+                  {seiyuu.Staff.Name}
+                </span>
               </div>
-            )
+            </div>
           ))}
         </div>
       </ShokoPanel>

From d421d6baae7c18fe3428ff4ff1327be779b5aee5 Mon Sep 17 00:00:00 2001
From: Jordan Fearnley <fearnlj01@gmail.com>
Date: Sat, 25 May 2024 20:08:45 +0100
Subject: [PATCH 22/28] Misc: move disable-line comment

---
 src/pages/collection/Series.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/pages/collection/Series.tsx b/src/pages/collection/Series.tsx
index ab5ff02df..e515cb230 100644
--- a/src/pages/collection/Series.tsx
+++ b/src/pages/collection/Series.tsx
@@ -73,8 +73,8 @@ const Series = () => {
     }
 
     setFanartUri(getImagePath(allFanarts.find(fanart => fanart.Preferred) ?? allFanarts[0]));
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [imagesQuery.data, imagesQuery.isSuccess, series]); // showRandomFanart is explicitly excluded to avoid toggles causing immediate refreshes
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- showRandomFanart is explicitly excluded to avoid toggles causing immediate refreshes
+  }, [imagesQuery.data, imagesQuery.isSuccess, series]);
 
   if (seriesQuery.isError) {
     navigate('../');

From 6424e0f9ca5757564940910fa4e62c61c6b324db Mon Sep 17 00:00:00 2001
From: Jordan Fearnley <fearnlj01@gmail.com>
Date: Sat, 25 May 2024 22:22:39 +0100
Subject: [PATCH 23/28] Feat: Add the EditSeriesModal to the collection view

---
 src/components/Collection/CollectionView.tsx  | 10 +++-
 src/components/Collection/ListViewItem.tsx    | 29 +++++++---
 src/components/Collection/PosterViewItem.tsx  | 32 +++++++----
 .../Collection/Series/EditSeriesModal.tsx     | 54 ++++++++++---------
 .../Series/EditSeriesTabs/NameTab.tsx         | 34 +++++++-----
 src/pages/collection/Collection.tsx           | 16 ++++++
 6 files changed, 117 insertions(+), 58 deletions(-)

diff --git a/src/components/Collection/CollectionView.tsx b/src/components/Collection/CollectionView.tsx
index f56126d77..ed3be2bd0 100644
--- a/src/components/Collection/CollectionView.tsx
+++ b/src/components/Collection/CollectionView.tsx
@@ -25,6 +25,7 @@ type Props = {
   items: CollectionGroupType[] | SeriesType[];
   mode: string;
   total: number;
+  setEditSeriesModalId: (seriesId: number) => void;
 };
 
 const CollectionView = (props: Props) => {
@@ -37,6 +38,7 @@ const CollectionView = (props: Props) => {
     isSidebarOpen,
     items,
     mode,
+    setEditSeriesModalId,
     total,
   } = props;
 
@@ -146,7 +148,12 @@ const CollectionView = (props: Props) => {
               );
             } else if (mode === 'poster') {
               children.push(
-                <PosterViewItem item={item} key={`group-${item.IDs.ID}`} isSeries={isSeries} />,
+                <PosterViewItem
+                  key={`group-${item.IDs.ID}`}
+                  item={item}
+                  isSeries={isSeries}
+                  setEditSeriesModalId={setEditSeriesModalId}
+                />,
               );
             } else {
               children.push(
@@ -158,6 +165,7 @@ const CollectionView = (props: Props) => {
                   key={`group-${item.IDs.ID}`}
                   isSeries={isSeries}
                   isSidebarOpen={isSidebarOpen}
+                  setEditSeriesModalId={setEditSeriesModalId}
                 />,
               );
             }
diff --git a/src/components/Collection/ListViewItem.tsx b/src/components/Collection/ListViewItem.tsx
index 55dc2b25b..6c0db7c32 100644
--- a/src/components/Collection/ListViewItem.tsx
+++ b/src/components/Collection/ListViewItem.tsx
@@ -19,6 +19,7 @@ import { listItemSize } from '@/components/Collection/constants';
 import { useSeriesTagsQuery } from '@/core/react-query/series/queries';
 import { useSettingsQuery } from '@/core/react-query/settings/queries';
 import { dayjs, formatThousand } from '@/core/util';
+import useEventCallback from '@/hooks/useEventCallback';
 import useMainPoster from '@/hooks/useMainPoster';
 
 import AnidbDescription from './AnidbDescription';
@@ -58,9 +59,10 @@ type Props = {
   isSeries?: boolean;
   groupExtras?: WebuiGroupExtra;
   isSidebarOpen: boolean;
+  setEditSeriesModalId: (seriesId: number) => void;
 };
 
-const ListViewItem = ({ groupExtras, isSeries, isSidebarOpen, item }: Props) => {
+const ListViewItem = ({ groupExtras, isSeries, isSidebarOpen, item, setEditSeriesModalId }: Props) => {
   const settings = useSettingsQuery().data;
   const { showCustomTags, showGroupIndicator, showItemType, showTopTags } = settings.WebUI_Settings.collection.list;
 
@@ -120,6 +122,12 @@ const ListViewItem = ({ groupExtras, isSeries, isSidebarOpen, item }: Props) =>
     [isSeries, groupExtras?.Tags, tagsQuery.data, showCustomTags, showTopTags],
   );
 
+  const editSeriesModalCallback = useEventCallback((event: React.MouseEvent) => {
+    event.stopPropagation();
+    event.preventDefault();
+    setEditSeriesModalId(('MainSeries' in item.IDs) ? item.IDs.MainSeries : item.IDs.ID);
+  });
+
   return (
     <div
       className="flex h-full shrink-0 grow flex-col content-center gap-y-3 rounded-lg border border-panel-border bg-panel-background p-6"
@@ -136,13 +144,18 @@ const ListViewItem = ({ groupExtras, isSeries, isSidebarOpen, item }: Props) =>
             zoomOnHover
           >
             <div className="pointer-events-none z-10 flex h-full bg-panel-background-poster-overlay p-3 opacity-0 transition-opacity group-hover:pointer-events-auto group-hover:opacity-100">
-              <Link to="#" className="h-fit">
-                <Icon
-                  path={mdiPencilCircleOutline}
-                  size="2rem"
-                  className="text-panel-icon"
-                />
-              </Link>
+              {(isSeries || item.Size === 1) && (
+                <div
+                  className="pointer-events-auto h-fit"
+                  onClick={editSeriesModalCallback}
+                >
+                  <Icon
+                    path={mdiPencilCircleOutline}
+                    size="2rem"
+                    className="text-panel-icon"
+                  />
+                </div>
+              )}
             </div>
             {showGroupIndicator && groupCount > 1 && (
               <div className="absolute bottom-0 left-0 flex w-full justify-center rounded-bl-md bg-panel-background-overlay py-1.5 text-sm font-semibold opacity-100 transition-opacity group-hover:opacity-0">
diff --git a/src/components/Collection/PosterViewItem.tsx b/src/components/Collection/PosterViewItem.tsx
index c2db73d24..9487fcd12 100644
--- a/src/components/Collection/PosterViewItem.tsx
+++ b/src/components/Collection/PosterViewItem.tsx
@@ -6,6 +6,7 @@ import { reduce } from 'lodash';
 
 import BackgroundImagePlaceholderDiv from '@/components/BackgroundImagePlaceholderDiv';
 import { useSettingsQuery } from '@/core/react-query/settings/queries';
+import useEventCallback from '@/hooks/useEventCallback';
 import useMainPoster from '@/hooks/useMainPoster';
 
 import type { CollectionGroupType } from '@/core/types/api/collection';
@@ -14,9 +15,10 @@ import type { SeriesType } from '@/core/types/api/series';
 type Props = {
   item: CollectionGroupType | SeriesType;
   isSeries?: boolean;
+  setEditSeriesModalId: (seriesId: number) => void;
 };
 
-const PosterViewItem = ({ isSeries = false, item }: Props) => {
+const PosterViewItem = ({ isSeries = false, item, setEditSeriesModalId }: Props) => {
   const settings = useSettingsQuery().data;
   const { showEpisodeCount, showGroupIndicator, showUnwatchedCount } = settings.WebUI_Settings.collection.poster;
 
@@ -43,6 +45,12 @@ const PosterViewItem = ({ isSeries = false, item }: Props) => {
     return link;
   };
 
+  const editSeriesModalCallback = useEventCallback((event: React.MouseEvent) => {
+    event.stopPropagation();
+    event.preventDefault();
+    setEditSeriesModalId(('MainSeries' in item.IDs) ? item.IDs.MainSeries : item.IDs.ID);
+  });
+
   return (
     <Link to={viewRouteLink()}>
       <div
@@ -62,15 +70,19 @@ const PosterViewItem = ({ isSeries = false, item }: Props) => {
               )}
             </div>
           )}
-          <div className="pointer-events-none z-50 flex h-full bg-panel-background-poster-overlay p-3 opacity-0 transition-opacity group-hover:pointer-events-auto group-hover:opacity-100">
-            {/* FIXME: This can't be a <Link> otherwise Warning: validateDOMNesting(...): <a> cannot appear as a descendant of <a> happens, BackgroundImagePlaceholderDiv wraps everything in a <Link> internally */}
-            <span className="h-fit">
-              <Icon
-                path={mdiPencilCircleOutline}
-                size="2rem"
-                className="text-panel-icon"
-              />
-            </span>
+          <div className="pointer-events-none z-10 flex h-full bg-panel-background-poster-overlay p-3 opacity-0 transition-opacity group-hover:pointer-events-auto group-hover:opacity-100">
+            {(isSeries || item.Size === 1) && (
+              <div
+                className="pointer-events-auto h-fit"
+                onClick={editSeriesModalCallback}
+              >
+                <Icon
+                  path={mdiPencilCircleOutline}
+                  size="2rem"
+                  className="text-panel-icon"
+                />
+              </div>
+            )}
           </div>
           {showGroupIndicator && !isSeries && groupCount > 1 && (
             <div className="absolute bottom-4 left-3 flex w-[90%] justify-center rounded-lg bg-panel-background-overlay py-2 text-sm font-semibold text-panel-text opacity-100 transition-opacity group-hover:opacity-0">
diff --git a/src/components/Collection/Series/EditSeriesModal.tsx b/src/components/Collection/Series/EditSeriesModal.tsx
index 2d16c6cfe..199f67257 100644
--- a/src/components/Collection/Series/EditSeriesModal.tsx
+++ b/src/components/Collection/Series/EditSeriesModal.tsx
@@ -15,7 +15,7 @@ import ModalPanel from '@/components/Panels/ModalPanel';
 type Props = {
   show: boolean;
   onClose: () => void;
-  seriesId: number;
+  seriesId?: number;
 };
 
 const tabs = {
@@ -50,33 +50,35 @@ const EditSeriesModal = (props: Props) => {
 
   const [activeTab, setActiveTab] = useState('update_actions');
 
-  return (
-    <ModalPanel show={show} onRequestClose={onClose} header="Edit Series" size="md" noPadding noGap>
-      <div className="flex h-[22rem] flex-row gap-x-6 p-6">
-        <div className="flex shrink-0 gap-y-6 font-semibold">
-          <div className="flex flex-col gap-y-1">
-            {map(tabs, (value, key) => (
-              <div
-                className={cx(
-                  activeTab === key
-                    ? 'w-[12rem] text-center bg-panel-menu-item-background p-3 rounded-lg text-panel-menu-item-text cursor-pointer'
-                    : 'w-[12rem] text-center p-3 rounded-lg hover:bg-panel-menu-item-background-hover cursor-pointer',
-                )}
-                key={key}
-                onClick={() => setActiveTab(key)}
-              >
-                {value}
-              </div>
-            ))}
+  return (!seriesId)
+    ? null
+    : (
+      <ModalPanel show={show} onRequestClose={onClose} header="Edit Series" size="md" noPadding noGap>
+        <div className="flex h-[22rem] flex-row gap-x-6 p-6">
+          <div className="flex shrink-0 gap-y-6 font-semibold">
+            <div className="flex flex-col gap-y-1">
+              {map(tabs, (value, key) => (
+                <div
+                  className={cx(
+                    activeTab === key
+                      ? 'w-[12rem] text-center bg-panel-menu-item-background p-3 rounded-lg text-panel-menu-item-text cursor-pointer'
+                      : 'w-[12rem] text-center p-3 rounded-lg hover:bg-panel-menu-item-background-hover cursor-pointer',
+                  )}
+                  key={key}
+                  onClick={() => setActiveTab(key)}
+                >
+                  {value}
+                </div>
+              ))}
+            </div>
+          </div>
+          <div className="border-r border-panel-border" />
+          <div className="grow">
+            {renderTab(activeTab, seriesId)}
           </div>
         </div>
-        <div className="border-r border-panel-border" />
-        <div className="grow">
-          {renderTab(activeTab, seriesId)}
-        </div>
-      </div>
-    </ModalPanel>
-  );
+      </ModalPanel>
+    );
 };
 
 export default EditSeriesModal;
diff --git a/src/components/Collection/Series/EditSeriesTabs/NameTab.tsx b/src/components/Collection/Series/EditSeriesTabs/NameTab.tsx
index de3a71cef..36c02558b 100644
--- a/src/components/Collection/Series/EditSeriesTabs/NameTab.tsx
+++ b/src/components/Collection/Series/EditSeriesTabs/NameTab.tsx
@@ -1,7 +1,6 @@
 import React, { useEffect, useMemo, useState } from 'react';
 import { mdiCheckUnderlineCircleOutline, mdiCloseCircleOutline, mdiPencilCircleOutline } from '@mdi/js';
 import cx from 'classnames';
-import { map } from 'lodash';
 import { useToggle } from 'usehooks-ts';
 
 import Input from '@/components/Input/Input';
@@ -9,8 +8,6 @@ import toast from '@/components/Toast';
 import { useOverrideSeriesTitleMutation } from '@/core/react-query/series/mutations';
 import { useSeriesQuery } from '@/core/react-query/series/queries';
 
-import type { SeriesType } from '@/core/types/api/series';
-
 type Props = {
   seriesId: number;
 };
@@ -19,17 +16,16 @@ const NameTab = ({ seriesId }: Props) => {
   const [name, setName] = useState('');
   const [nameEditable, toggleNameEditable] = useToggle(false);
 
-  const seriesQuery = useSeriesQuery(seriesId, { includeDataFrom: ['AniDB'] });
-  const series = useMemo(() => seriesQuery?.data ?? {} as SeriesType, [seriesQuery.data]);
+  const { data: seriesData, isError, isFetching, isSuccess } = useSeriesQuery(seriesId, { includeDataFrom: ['AniDB'] });
 
   const { mutate: overrideTitle } = useOverrideSeriesTitleMutation();
 
   useEffect(() => {
-    setName(series.Name ?? '');
-  }, [series.Name]);
+    setName(seriesData?.Name ?? '');
+  }, [seriesData?.Name]);
 
   const nameInputIcons = useMemo(() => {
-    if (!nameEditable || seriesQuery.isFetching) {
+    if (!nameEditable || isFetching) {
       return [{
         icon: mdiPencilCircleOutline,
         className: 'text-panel-text-primary',
@@ -37,12 +33,14 @@ const NameTab = ({ seriesId }: Props) => {
       }];
     }
 
+    if (!isSuccess) return [];
+
     return [
       {
         icon: mdiCloseCircleOutline,
         className: 'text-panel-text-danger',
         onClick: () => {
-          setName(series.Name);
+          setName(seriesData.Name ?? '');
           toggleNameEditable();
         },
       },
@@ -50,7 +48,7 @@ const NameTab = ({ seriesId }: Props) => {
         icon: mdiCheckUnderlineCircleOutline,
         className: 'text-panel-text-primary',
         onClick: () =>
-          overrideTitle({ seriesId: series.IDs.ID, Title: name }, {
+          overrideTitle({ seriesId: seriesData.IDs.ID, Title: name }, {
             onSuccess: () => {
               toast.success('Name updated successfully!');
               toggleNameEditable();
@@ -59,11 +57,20 @@ const NameTab = ({ seriesId }: Props) => {
           }),
       },
     ];
-  }, [name, nameEditable, overrideTitle, series.IDs.ID, series.Name, seriesQuery.isFetching, toggleNameEditable]);
+  }, [
+    isFetching,
+    isSuccess,
+    name,
+    nameEditable,
+    overrideTitle,
+    seriesData?.IDs.ID,
+    seriesData?.Name,
+    toggleNameEditable,
+  ]);
 
   return (
     <div className="flex h-full flex-col">
-      {seriesQuery.isError && (
+      {isError && (
         <div className="m-auto text-lg font-semibold text-panel-text-danger">
           Series data could not be loaded!
         </div>
@@ -74,6 +81,7 @@ const NameTab = ({ seriesId }: Props) => {
         type="text"
         onChange={e => setName(e.target.value)}
         value={name}
+        placeholder="Loading..."
         label="Name"
         className="mb-4"
         inputClassName={cx(nameInputIcons.length > 1 ? 'pr-[4.5rem]' : 'pr-10', 'truncate')}
@@ -83,7 +91,7 @@ const NameTab = ({ seriesId }: Props) => {
       {nameEditable && (
         <div className="flex cursor-pointer overflow-y-auto rounded-lg border border-panel-border bg-panel-input p-6">
           <div className="shoko-scrollbar flex grow flex-col gap-y-2 overflow-y-auto bg-panel-input pr-4">
-            {map(series.AniDB?.Titles, title => (
+            {seriesData?.AniDB?.Titles.map(title => (
               <div
                 className="flex justify-between last:border-none hover:text-panel-text-primary"
                 key={title.Name + title.Language}
diff --git a/src/pages/collection/Collection.tsx b/src/pages/collection/Collection.tsx
index 950892516..55e0c0ac7 100644
--- a/src/pages/collection/Collection.tsx
+++ b/src/pages/collection/Collection.tsx
@@ -8,6 +8,7 @@ import { useDebounceValue, useToggle } from 'usehooks-ts';
 import CollectionTitle from '@/components/Collection/CollectionTitle';
 import CollectionView from '@/components/Collection/CollectionView';
 import FilterSidebar from '@/components/Collection/Filter/FilterSidebar';
+import EditSeriesModal from '@/components/Collection/Series/EditSeriesModal';
 import TimelineSidebar from '@/components/Collection/TimelineSidebar';
 import TitleOptions from '@/components/Collection/TitleOptions';
 import buildFilter from '@/core/buildFilter';
@@ -101,6 +102,15 @@ function Collection() {
   const [seriesSearch, setSeriesSearch] = useState('');
   const [debouncedSeriesSearch] = useDebounceValue(seriesSearch, 200);
 
+  const [showEditSeriesModal, toggleEditSeriesModal] = useToggle(false);
+  const [editSeriesModalId, setEditSeriesModalId] = useState<number>();
+  const openEditModalWithSeriesId = useEventCallback((seriesId: number) => {
+    setEditSeriesModalId(() => {
+      toggleEditSeriesModal();
+      return seriesId;
+    });
+  });
+
   const { mutate: patchSettings } = usePatchSettingsMutation();
 
   useEffect(() => {
@@ -230,6 +240,7 @@ function Collection() {
           items={items}
           mode={mode}
           total={total}
+          setEditSeriesModalId={openEditModalWithSeriesId}
         />
         <div
           className={cx(
@@ -243,6 +254,11 @@ function Collection() {
         </div>
         {isSeries && <TimelineSidebar series={timelineSeries} isFetching={seriesQuery.isPending} />}
       </div>
+      <EditSeriesModal
+        show={showEditSeriesModal}
+        onClose={toggleEditSeriesModal}
+        seriesId={editSeriesModalId}
+      />
     </div>
   );
 }

From 78cd4cfd394ebb50de5002f48ed23478e2ac5023 Mon Sep 17 00:00:00 2001
From: Jordan Fearnley <fearnlj01@gmail.com>
Date: Sun, 26 May 2024 01:53:58 +0100
Subject: [PATCH 24/28] Edit Series | Misc: Spacing, Icon & Layout changes

---
 .../Collection/Series/EditSeriesModal.tsx     |  6 +--
 .../Series/EditSeriesTabs/GroupTab.tsx        | 41 ++++++++++---------
 .../Series/EditSeriesTabs/NameTab.tsx         |  7 +++-
 3 files changed, 30 insertions(+), 24 deletions(-)

diff --git a/src/components/Collection/Series/EditSeriesModal.tsx b/src/components/Collection/Series/EditSeriesModal.tsx
index 199f67257..014e65367 100644
--- a/src/components/Collection/Series/EditSeriesModal.tsx
+++ b/src/components/Collection/Series/EditSeriesModal.tsx
@@ -20,10 +20,10 @@ type Props = {
 
 const tabs = {
   name: 'Name',
+  group: 'Group',
   update_actions: 'Update Actions',
   file_actions: 'File Actions',
   delete_actions: 'Delete Actions',
-  group: 'Group',
   // stats: 'Personal Stats',
 };
 
@@ -48,13 +48,13 @@ const renderTab = (activeTab: string, seriesId: number) => {
 const EditSeriesModal = (props: Props) => {
   const { onClose, seriesId, show } = props;
 
-  const [activeTab, setActiveTab] = useState('update_actions');
+  const [activeTab, setActiveTab] = useState('name');
 
   return (!seriesId)
     ? null
     : (
       <ModalPanel show={show} onRequestClose={onClose} header="Edit Series" size="md" noPadding noGap>
-        <div className="flex h-[22rem] flex-row gap-x-6 p-6">
+        <div className="flex h-[26rem] flex-row gap-x-6 p-6">
           <div className="flex shrink-0 gap-y-6 font-semibold">
             <div className="flex flex-col gap-y-1">
               {map(tabs, (value, key) => (
diff --git a/src/components/Collection/Series/EditSeriesTabs/GroupTab.tsx b/src/components/Collection/Series/EditSeriesTabs/GroupTab.tsx
index 3e18bf810..b8ba2b0ce 100644
--- a/src/components/Collection/Series/EditSeriesTabs/GroupTab.tsx
+++ b/src/components/Collection/Series/EditSeriesTabs/GroupTab.tsx
@@ -1,11 +1,11 @@
 import React, { useEffect, useMemo, useState } from 'react';
 import {
+  mdiArrowRightThinCircleOutline,
   mdiCheckUnderlineCircleOutline,
   mdiCloseCircleOutline,
-  mdiFolderMoveOutline,
-  mdiFolderPlusOutline,
   mdiMagnify,
   mdiPencilCircleOutline,
+  mdiPlusCircleOutline,
 } from '@mdi/js';
 import Icon from '@mdi/react';
 import { useDebounceValue } from 'usehooks-ts';
@@ -38,11 +38,12 @@ type EndIcon = {
 type EditableNameComponentProps = {
   name: string;
   groupId: number;
+  loading: boolean;
   moveToNewGroup: () => void;
   renameGroup: ({ groupId, newName }: { groupId: number, newName: string }) => void;
 };
 const EditableNameComponent = React.memo(
-  ({ groupId, moveToNewGroup, name, renameGroup }: EditableNameComponentProps) => {
+  ({ groupId, loading, moveToNewGroup, name, renameGroup }: EditableNameComponentProps) => {
     const [editingName, setEditingName] = useState(false);
     const [modifiableName, setModifiableName] = useState(name);
 
@@ -67,10 +68,10 @@ const EditableNameComponent = React.memo(
     const endIcons: EndIcon[] = (!editingName)
       ? [
         {
-          icon: mdiFolderPlusOutline,
+          icon: mdiPlusCircleOutline,
           className: 'text-panel-text-primary',
           onClick: moveToNewGroup,
-          tooltip: 'Move to new group',
+          tooltip: 'Create and move to new group',
         },
         {
           icon: mdiPencilCircleOutline,
@@ -106,8 +107,10 @@ const EditableNameComponent = React.memo(
         onChange={updateInput}
         endIcons={endIcons}
         disabled={!editingName}
-        inputClassName="pr-[4.5rem] truncate"
-        className="mb-6"
+        placeholder={loading ? 'Loading...' : undefined}
+        label="Name"
+        inputClassName="pr-28 truncate"
+        className="mb-4"
       />
     );
   },
@@ -126,13 +129,13 @@ const ExistingGroup = React.memo((
       {group.Name}
     </div>
     <div
-      className="cursor-pointer text-panel-icon-action"
+      className="cursor-pointer pl-8 text-panel-icon-action"
       onClick={() => moveToGroup({ groupId: group.IDs.ParentGroup ?? group.IDs.TopLevelGroup })}
       data-tooltip-id="tooltip"
-      data-tooltip-content="Move to group"
+      data-tooltip-content="Move to existing group"
       data-tooltip-place="top"
     >
-      <Icon path={mdiFolderMoveOutline} size={1} />
+      <Icon path={mdiArrowRightThinCircleOutline} size={1} />
     </div>
   </div>
 ));
@@ -153,7 +156,7 @@ function GroupTab({ seriesId }: Props) {
 
   const updateSearch = useEventCallback((e: React.ChangeEvent<HTMLInputElement>) => setSearch(e.target.value));
 
-  const { data: seriesGroup, isSuccess: isSeriesGroupSuccess } = useSeriesGroupQuery(seriesId, false);
+  const { data: seriesGroup, isFetching } = useSeriesGroupQuery(seriesId, false);
   const groupsQuery = useFilteredGroupsInfiniteQuery({
     filterCriteria: getFilter(debouncedSearch),
     pageSize: 50,
@@ -203,6 +206,7 @@ function GroupTab({ seriesId }: Props) {
         onChange={updateSearch}
         startIcon={mdiMagnify}
         placeholder="Group Search..."
+        label="Move to group"
       />
       <div className="mt-2 flex grow select-none overflow-y-auto rounded-lg border border-panel-border bg-panel-input p-6">
         <div className="shoko-scrollbar flex grow flex-col gap-y-2 overflow-y-auto bg-panel-input pr-3">
@@ -218,14 +222,13 @@ function GroupTab({ seriesId }: Props) {
 
   return (
     <div className="flex h-full flex-col">
-      {isSeriesGroupSuccess && (
-        <EditableNameComponent
-          groupId={seriesGroup.IDs.ParentGroup ?? seriesGroup.IDs.TopLevelGroup}
-          name={seriesGroup.Name}
-          moveToNewGroup={moveToNewGroup}
-          renameGroup={renameGroup}
-        />
-      )}
+      <EditableNameComponent
+        groupId={seriesGroup?.IDs.ParentGroup ?? seriesGroup?.IDs.TopLevelGroup ?? 0}
+        loading={isFetching}
+        name={seriesGroup?.Name ?? ''}
+        moveToNewGroup={moveToNewGroup}
+        renameGroup={renameGroup}
+      />
       {GroupSearchComponent}
     </div>
   );
diff --git a/src/components/Collection/Series/EditSeriesTabs/NameTab.tsx b/src/components/Collection/Series/EditSeriesTabs/NameTab.tsx
index 36c02558b..93273b581 100644
--- a/src/components/Collection/Series/EditSeriesTabs/NameTab.tsx
+++ b/src/components/Collection/Series/EditSeriesTabs/NameTab.tsx
@@ -30,6 +30,7 @@ const NameTab = ({ seriesId }: Props) => {
         icon: mdiPencilCircleOutline,
         className: 'text-panel-text-primary',
         onClick: toggleNameEditable,
+        tooltip: 'Edit name',
       }];
     }
 
@@ -43,6 +44,7 @@ const NameTab = ({ seriesId }: Props) => {
           setName(seriesData.Name ?? '');
           toggleNameEditable();
         },
+        tooltip: 'Cancel',
       },
       {
         icon: mdiCheckUnderlineCircleOutline,
@@ -55,6 +57,7 @@ const NameTab = ({ seriesId }: Props) => {
             },
             onError: () => toast.error('Name could not be updated!'),
           }),
+        tooltip: 'Save name',
       },
     ];
   }, [
@@ -81,10 +84,10 @@ const NameTab = ({ seriesId }: Props) => {
         type="text"
         onChange={e => setName(e.target.value)}
         value={name}
-        placeholder="Loading..."
+        placeholder={isFetching ? 'Loading...' : undefined}
         label="Name"
         className="mb-4"
-        inputClassName={cx(nameInputIcons.length > 1 ? 'pr-[4.5rem]' : 'pr-10', 'truncate')}
+        inputClassName={cx(nameInputIcons.length > 1 ? 'pr-[5rem]' : 'pr-12', 'truncate')}
         endIcons={nameInputIcons}
         disabled={!nameEditable}
       />

From 52a19f46145020a5eb6f9195370040e5b67a03e3 Mon Sep 17 00:00:00 2001
From: Jordan Fearnley <fearnlj01@gmail.com>
Date: Sun, 26 May 2024 10:39:40 +0100
Subject: [PATCH 25/28] further styling changes

---
 .../Series/EditSeriesTabs/GroupTab.tsx         | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

diff --git a/src/components/Collection/Series/EditSeriesTabs/GroupTab.tsx b/src/components/Collection/Series/EditSeriesTabs/GroupTab.tsx
index b8ba2b0ce..c7845c67b 100644
--- a/src/components/Collection/Series/EditSeriesTabs/GroupTab.tsx
+++ b/src/components/Collection/Series/EditSeriesTabs/GroupTab.tsx
@@ -8,6 +8,7 @@ import {
   mdiPlusCircleOutline,
 } from '@mdi/js';
 import Icon from '@mdi/react';
+import cx from 'classnames';
 import { useDebounceValue } from 'usehooks-ts';
 
 import Input from '@/components/Input/Input';
@@ -109,7 +110,7 @@ const EditableNameComponent = React.memo(
         disabled={!editingName}
         placeholder={loading ? 'Loading...' : undefined}
         label="Name"
-        inputClassName="pr-28 truncate"
+        inputClassName="pr-[4.5rem] truncate"
         className="mb-4"
       />
     );
@@ -129,7 +130,7 @@ const ExistingGroup = React.memo((
       {group.Name}
     </div>
     <div
-      className="cursor-pointer pl-8 text-panel-icon-action"
+      className="cursor-pointer text-panel-icon-action"
       onClick={() => moveToGroup({ groupId: group.IDs.ParentGroup ?? group.IDs.TopLevelGroup })}
       data-tooltip-id="tooltip"
       data-tooltip-content="Move to existing group"
@@ -161,7 +162,7 @@ function GroupTab({ seriesId }: Props) {
     filterCriteria: getFilter(debouncedSearch),
     pageSize: 50,
   });
-  const [groups] = useFlattenListResult(groupsQuery.data);
+  const [groups, groupsResultSize] = useFlattenListResult(groupsQuery.data);
 
   const { mutate: moveToNewGroupMutation } = useCreateGroupMutation();
   const { mutate: moveToExistingGroupMutation } = useMoveGroupMutation();
@@ -208,8 +209,13 @@ function GroupTab({ seriesId }: Props) {
         placeholder="Group Search..."
         label="Move to group"
       />
-      <div className="mt-2 flex grow select-none overflow-y-auto rounded-lg border border-panel-border bg-panel-input p-6">
-        <div className="shoko-scrollbar flex grow flex-col gap-y-2 overflow-y-auto bg-panel-input pr-3">
+      <div className="mt-2 flex grow select-none overflow-y-auto rounded-lg border border-panel-border bg-panel-input p-6 pr-3">
+        <div
+          className={cx(
+            'shoko-scrollbar flex grow flex-col gap-y-2 overflow-y-auto bg-panel-input',
+            groupsResultSize > 4 && 'pr-3',
+          )}
+        >
           {groups.length === 0
             ? QueryStatusElement
             : groups.map(group => (
@@ -218,7 +224,7 @@ function GroupTab({ seriesId }: Props) {
         </div>
       </div>
     </>
-  ), [QueryStatusElement, groups, moveToExistingGroup, search, updateSearch]);
+  ), [QueryStatusElement, groups, groupsResultSize, moveToExistingGroup, search, updateSearch]);
 
   return (
     <div className="flex h-full flex-col">

From 1a77cb28e6bbea61f07a70f271b200334e329fba Mon Sep 17 00:00:00 2001
From: Jordan Fearnley <fearnlj01@gmail.com>
Date: Sun, 26 May 2024 13:53:58 +0100
Subject: [PATCH 26/28] Refactor: Split Credits page into components

---
 .../Collection/Credits/CreditsStaffPanel.tsx  |  38 +++++
 .../Credits/CreditsStaffVirtualizer.tsx       |  43 +++++
 src/pages/collection/series/SeriesCredits.tsx | 151 +++++-------------
 3 files changed, 120 insertions(+), 112 deletions(-)
 create mode 100644 src/components/Collection/Credits/CreditsStaffPanel.tsx
 create mode 100644 src/components/Collection/Credits/CreditsStaffVirtualizer.tsx

diff --git a/src/components/Collection/Credits/CreditsStaffPanel.tsx b/src/components/Collection/Credits/CreditsStaffPanel.tsx
new file mode 100644
index 000000000..15a61a3bc
--- /dev/null
+++ b/src/components/Collection/Credits/CreditsStaffPanel.tsx
@@ -0,0 +1,38 @@
+import React from 'react';
+
+import CharacterImage from '@/components/CharacterImage';
+
+import type { SeriesCast } from '@/core/types/api/series';
+import type { CreditsModeType } from '@/pages/collection/series/SeriesCredits';
+
+const getThumbnailUrl = (item: SeriesCast, mode: CreditsModeType) => {
+  const thumbnail = item[mode].Image ?? null;
+  if (thumbnail === null) return null;
+  return `/api/v3/Image/${thumbnail.Source}/${thumbnail.Type}/${thumbnail.ID}`;
+};
+
+const CreditsStaffPanel = React.memo(({ cast, mode }: { cast: SeriesCast, mode: CreditsModeType }) => (
+  <div className="flex w-full flex-row items-center gap-6 rounded-lg border border-panel-border bg-panel-background-transparent p-6 font-semibold">
+    <div className="z-10 flex gap-x-2">
+      {mode === 'Character' && (
+        <CharacterImage
+          imageSrc={getThumbnailUrl(cast, 'Character')}
+          className="relative h-[7.75rem] w-[6.063rem] rounded-lg"
+        />
+      )}
+      <CharacterImage
+        imageSrc={getThumbnailUrl(cast, 'Staff')}
+        className="relative h-[7.75rem] w-[6.063rem] rounded-lg"
+      />
+    </div>
+    <div className="grow text-center">
+      <div className="line-clamp-2 text-base leading-8 xl:text-xl" title={cast[mode]?.Name}>
+        {cast[mode]?.Name}
+      </div>
+      {mode === 'Character' && <div className="opacity-65">{cast.Staff?.Name}</div>}
+      <div className="mt-2 text-sm">{cast.RoleDetails}</div>
+    </div>
+  </div>
+));
+
+export default CreditsStaffPanel;
diff --git a/src/components/Collection/Credits/CreditsStaffVirtualizer.tsx b/src/components/Collection/Credits/CreditsStaffVirtualizer.tsx
new file mode 100644
index 000000000..26c104c33
--- /dev/null
+++ b/src/components/Collection/Credits/CreditsStaffVirtualizer.tsx
@@ -0,0 +1,43 @@
+import React from 'react';
+import { useOutletContext } from 'react-router';
+import { useVirtualizer } from '@tanstack/react-virtual';
+
+import CreditsStaffPanel from '@/components/Collection/Credits/CreditsStaffPanel';
+
+import type { SeriesCast } from '@/core/types/api/series';
+import type { CreditsModeType } from '@/pages/collection/series/SeriesCredits';
+
+const StaffPanelVirtualizer = ({ castArray, mode }: { castArray: SeriesCast[], mode: CreditsModeType }) => {
+  const { scrollRef } = useOutletContext<{ scrollRef: React.RefObject<HTMLDivElement> }>();
+  const cardSize = { x: 466.5, y: 174, gap: 24 };
+
+  const rowVirtualizer = useVirtualizer({
+    count: castArray.length,
+    getScrollElement: () => scrollRef.current,
+    estimateSize: () => cardSize.y,
+    overscan: 30, // Greater than the norm as lanes aren't taken into account
+    lanes: 3,
+    gap: cardSize.gap,
+  });
+
+  return (
+    <div className="relative w-full" style={{ height: rowVirtualizer.getTotalSize() }}>
+      {rowVirtualizer.getVirtualItems().map(virtualRow => (
+        <div
+          key={virtualRow.key}
+          className="absolute top-0"
+          style={{
+            left: virtualRow.lane * (cardSize.x + cardSize.gap),
+            width: cardSize.x,
+            height: cardSize.y,
+            transform: `translateY(${virtualRow.start}px)`,
+          }}
+        >
+          <CreditsStaffPanel cast={castArray[virtualRow.index]} mode={mode} />
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default StaffPanelVirtualizer;
diff --git a/src/pages/collection/series/SeriesCredits.tsx b/src/pages/collection/series/SeriesCredits.tsx
index 200430b29..0e3a4f298 100644
--- a/src/pages/collection/series/SeriesCredits.tsx
+++ b/src/pages/collection/series/SeriesCredits.tsx
@@ -1,12 +1,11 @@
-import React, { useEffect, useMemo, useState } from 'react';
-import { useOutletContext, useParams } from 'react-router';
+import React, { useMemo, useState } from 'react';
+import { useParams } from 'react-router';
 import { mdiInformationOutline, mdiMagnify, mdiPlayCircleOutline } from '@mdi/js';
 import Icon from '@mdi/react';
-import { useVirtualizer } from '@tanstack/react-virtual';
 import { map, toNumber } from 'lodash';
 import { useDebounceValue } from 'usehooks-ts';
 
-import CharacterImage from '@/components/CharacterImage';
+import StaffPanelVirtualizer from '@/components/Collection/Credits/CreditsStaffVirtualizer';
 import Checkbox from '@/components/Input/Checkbox';
 import Input from '@/components/Input/Input';
 import MultiStateButton from '@/components/Input/MultiStateButton';
@@ -21,83 +20,13 @@ import useEventCallback from '@/hooks/useEventCallback';
 
 import type { SeriesCast } from '@/core/types/api/series';
 
-type ModeType = 'Character' | 'Staff';
-
-const getThumbnailUrl = (item: SeriesCast, mode: ModeType) => {
-  const thumbnail = item[mode].Image ?? null;
-  if (thumbnail === null) return null;
-  return `/api/v3/Image/${thumbnail.Source}/${thumbnail.Type}/${thumbnail.ID}`;
-};
-
-const creditTypeVariations = {
-  Character: 'Characters',
-  Staff: 'Staff',
-};
-
-const CreditsStaffPanel = React.memo(({ cast, mode }: { cast: SeriesCast, mode: ModeType }) => (
-  <div className="flex w-full flex-row items-center gap-6 rounded-lg border border-panel-border bg-panel-background-transparent p-6 font-semibold">
-    <div className="z-10 flex gap-x-2">
-      {mode === 'Character' && (
-        <CharacterImage
-          imageSrc={getThumbnailUrl(cast, 'Character')}
-          className="relative h-[7.75rem] w-[6.063rem] rounded-lg"
-        />
-      )}
-      <CharacterImage
-        imageSrc={getThumbnailUrl(cast, 'Staff')}
-        className="relative h-[7.75rem] w-[6.063rem] rounded-lg"
-      />
-    </div>
-    <div className="grow text-center">
-      <div className="line-clamp-2 text-base leading-8 xl:text-xl" title={cast[mode]?.Name}>
-        {cast[mode]?.Name}
-      </div>
-      {mode === 'Character' && <div className="opacity-65">{cast.Staff?.Name}</div>}
-      <div className="mt-2 text-sm">{cast.RoleDetails}</div>
-    </div>
-  </div>
-));
-
-const isCharacter = (item: SeriesCast) => item.RoleName === 'Seiyuu';
+export type CreditsModeType = 'Character' | 'Staff';
 
 const cleanString = (input = '') => input.replaceAll(' ', '').toLowerCase();
 
-const getUniqueDescriptions = (castList: SeriesCast[]) => [...new Set(castList.map(c => c.RoleDetails))];
-
-const StaffPanelVirtualizer = ({ castArray, mode }: { castArray: SeriesCast[], mode: ModeType }) => {
-  const { scrollRef } = useOutletContext<{ scrollRef: React.RefObject<HTMLDivElement> }>();
-  const cardSize = { x: 466.5, y: 174, gap: 24 };
-
-  const rowVirtualizer = useVirtualizer({
-    count: castArray.length,
-    getScrollElement: () => scrollRef.current,
-    estimateSize: () => cardSize.y,
-    overscan: 30, // Greater than the norm as lanes aren't taken into account
-    lanes: 3,
-    gap: cardSize.gap,
-  });
+const getUniqueRoles = (castList: SeriesCast[]) => [...new Set(castList.map(c => c.RoleDetails))];
 
-  return (
-    <div className="relative w-full" style={{ height: rowVirtualizer.getTotalSize() }}>
-      {rowVirtualizer.getVirtualItems().map(virtualRow => (
-        <div
-          key={virtualRow.key}
-          className="absolute top-0"
-          style={{
-            left: virtualRow.lane * (cardSize.x + cardSize.gap),
-            width: cardSize.x,
-            height: cardSize.y,
-            transform: `translateY(${virtualRow.start}px)`,
-          }}
-        >
-          <CreditsStaffPanel cast={castArray[virtualRow.index]} mode={mode} />
-        </div>
-      ))}
-    </div>
-  );
-};
-
-const states: { label?: string, value: ModeType }[] = [
+const modeStates: { label?: string, value: CreditsModeType }[] = [
   { label: 'Characters', value: 'Character' },
   { value: 'Staff' },
 ];
@@ -108,52 +37,50 @@ const SeriesCredits = () => {
   const { isPending: pendingRefreshAniDb, mutate: refreshAniDb } = useRefreshSeriesAniDBInfoMutation();
   const { isPending: pendingRefreshTvDb, mutate: refreshTvDb } = useRefreshSeriesTvdbInfoMutatation();
 
-  const [mode, setMode] = useState<ModeType>(states[0].value);
-  const handleModeChange = useEventCallback((newMode: ModeType) => {
-    setMode(newMode);
-  });
+  const [mode, setMode] = useState<CreditsModeType>(modeStates[0].value);
 
   const [search, setSearch] = useState('');
-
   const [debouncedSearch] = useDebounceValue(() => cleanString(search), 200);
 
+  const [roleFilter, setRoleFilter] = useState<Set<string>>(new Set());
+
+  const handleModeChange = useEventCallback((newMode: CreditsModeType) => {
+    setMode(() => {
+      setSearch('');
+      setRoleFilter(new Set());
+      return newMode;
+    });
+  });
+
+  const handleFilterChange = useEventCallback((event: React.ChangeEvent<HTMLInputElement>) => {
+    const { id: description } = event.target;
+    setRoleFilter((prevState) => {
+      const newState = new Set(prevState);
+      if (!newState.delete(description)) newState.add(description);
+      return newState;
+    });
+  });
+
   const cast = useSeriesCastQuery(toNumber(seriesId!), !!seriesId).data;
   const castByType = useMemo(() => ({
-    Character: cast?.filter(credit => isCharacter(credit)) ?? [],
-    Staff: cast?.filter(credit => !isCharacter(credit)) ?? [],
+    Character: cast?.filter(credit => credit.RoleName === 'Seiyuu') ?? [],
+    Staff: cast?.filter(credit => credit.RoleName !== 'Seiyuu') ?? [],
   }), [cast]);
 
-  const uniqueDescriptions = useMemo(() => ({
-    Character: getUniqueDescriptions(castByType.Character),
-    Staff: getUniqueDescriptions(castByType.Staff),
+  const uniqueRoles = useMemo(() => ({
+    Character: getUniqueRoles(castByType.Character),
+    Staff: getUniqueRoles(castByType.Staff),
   }), [castByType]);
 
-  const [descriptionFilter, setDescriptionFilter] = useState<Set<string>>(new Set());
-
   const filteredCast = useMemo(() => (castByType[mode].filter(p => (
     (debouncedSearch === ''
-      || !!(cleanString(p?.Character?.Name).match(debouncedSearch))
-      || !!(cleanString(p?.Staff?.Name).match(debouncedSearch)))
-    && !descriptionFilter.has(p?.RoleDetails)
+      || !!([p?.Character?.Name, p?.Staff?.Name].some(name => cleanString(name).match(debouncedSearch))))
+    && !roleFilter.has(p?.RoleDetails)
   )).sort((a, b) => {
     if (a[mode].Name > b[mode].Name) return 1;
     if (a[mode].Name < b[mode].Name) return -1;
     return 0;
-  })), [castByType, mode, debouncedSearch, descriptionFilter]);
-
-  useEffect(() => {
-    setSearch('');
-    setDescriptionFilter(new Set());
-  }, [mode]);
-
-  const handleFilterChange = useEventCallback((event: React.ChangeEvent<HTMLInputElement>) => {
-    const { id: description } = event.target;
-    setDescriptionFilter((prevState) => {
-      const newState = new Set(prevState);
-      if (!newState.delete(description)) newState.add(description);
-      return newState;
-    });
-  });
+  })), [castByType, mode, debouncedSearch, roleFilter]);
 
   if (!seriesId) return null;
 
@@ -185,13 +112,13 @@ const SeriesCredits = () => {
           <div className="flex flex-col gap-y-2">
             <div className="text-base font-semibold">Roles</div>
             <div className="flex flex-col gap-y-2 rounded-lg bg-panel-input p-6">
-              {map(uniqueDescriptions[mode], desc => (
+              {map(uniqueRoles[mode], desc => (
                 <Checkbox
                   justify
                   label={desc}
                   key={desc}
                   id={desc}
-                  isChecked={!descriptionFilter.has(desc)}
+                  isChecked={!roleFilter.has(desc)}
                   onChange={handleFilterChange}
                 />
               ))}
@@ -246,7 +173,7 @@ const SeriesCredits = () => {
         <div className="flex h-[6.125rem] items-center justify-between rounded-lg border border-panel-border bg-panel-background-transparent px-6 py-4">
           <div className="text-xl font-semibold">
             Credits |&nbsp;
-            {(debouncedSearch !== '' || descriptionFilter.size > 0) && (
+            {(debouncedSearch !== '' || roleFilter.size > 0) && (
               <>
                 <span className="text-panel-text-important">
                   {filteredCast.length}
@@ -258,10 +185,10 @@ const SeriesCredits = () => {
               {castByType[mode].length ?? 0}
             </span>
             &nbsp;
-            {creditTypeVariations[mode]}
+            {mode === 'Character' ? 'Characters' : mode}
             &nbsp;Listed
           </div>
-          <MultiStateButton activeState={mode} states={states} onStateChange={handleModeChange} />
+          <MultiStateButton activeState={mode} states={modeStates} onStateChange={handleModeChange} />
         </div>
         <StaffPanelVirtualizer castArray={filteredCast} mode={mode} />
       </div>

From ea1ead2c123d861c5c8c620c81e1bf31e7ac12ab Mon Sep 17 00:00:00 2001
From: Jordan Fearnley <fearnlj01@gmail.com>
Date: Sun, 26 May 2024 14:53:41 +0100
Subject: [PATCH 27/28] Refactor: Credits page | split search and filter panel
 into it's own component

---
 .../Credits/CreditsSearchAndFilterPanel.tsx   | 113 ++++++++++++++++
 src/pages/collection/series/SeriesCredits.tsx | 123 +++++-------------
 2 files changed, 147 insertions(+), 89 deletions(-)
 create mode 100644 src/components/Collection/Credits/CreditsSearchAndFilterPanel.tsx

diff --git a/src/components/Collection/Credits/CreditsSearchAndFilterPanel.tsx b/src/components/Collection/Credits/CreditsSearchAndFilterPanel.tsx
new file mode 100644
index 000000000..5d1e73e15
--- /dev/null
+++ b/src/components/Collection/Credits/CreditsSearchAndFilterPanel.tsx
@@ -0,0 +1,113 @@
+import React, {} from 'react';
+import { mdiInformationOutline, mdiMagnify, mdiPlayCircleOutline } from '@mdi/js';
+import Icon from '@mdi/react';
+
+import Checkbox from '@/components/Input/Checkbox';
+import Input from '@/components/Input/Input';
+import ShokoPanel from '@/components/Panels/ShokoPanel';
+
+type Props = {
+  inputPlaceholder: string;
+  search: string;
+  handleSearchChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  roleFilter: Set<string>;
+  handleFilterChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  uniqueRoles: string[];
+  refreshAniDbAction: () => void;
+  aniDbRefreshing: boolean;
+  refreshTvDbAction: () => void;
+  tvDbRefreshing: boolean;
+};
+const CreditsSearchAndFilterPanel = React.memo(
+  (
+    {
+      aniDbRefreshing,
+      handleFilterChange,
+      handleSearchChange,
+      inputPlaceholder,
+      refreshAniDbAction,
+      refreshTvDbAction,
+      roleFilter,
+      search,
+      tvDbRefreshing,
+      uniqueRoles,
+    }: Props,
+  ) => (
+    <ShokoPanel
+      title="Search & Filter"
+      className="w-400"
+      contentClassName="gap-y-6"
+      sticky
+      transparent
+      fullHeight={false}
+    >
+      <div className="flex flex-col gap-y-2">
+        <span className="flex w-full text-base font-semibold">
+          Name
+        </span>
+        <Input
+          id="search"
+          startIcon={mdiMagnify}
+          type="text"
+          placeholder={inputPlaceholder}
+          value={search}
+          inputClassName="px-4 py-3"
+          onChange={handleSearchChange}
+        />
+      </div>
+      <div className="flex flex-col gap-y-2">
+        <div className="text-base font-semibold">Roles</div>
+        <div className="flex flex-col gap-y-2 rounded-lg bg-panel-input p-6">
+          {uniqueRoles.map(desc => (
+            <Checkbox
+              justify
+              label={desc}
+              key={desc}
+              id={desc}
+              isChecked={!roleFilter.has(desc)}
+              onChange={handleFilterChange}
+            />
+          ))}
+        </div>
+      </div>
+      <div className="flex flex-col gap-y-2">
+        <div className="text-base font-semibold">Quick Actions</div>
+        <button
+          type="button"
+          className="flex w-full flex-row justify-between disabled:cursor-not-allowed disabled:opacity-65"
+          onClick={refreshAniDbAction}
+          disabled={aniDbRefreshing}
+        >
+          Force refresh: AniDB
+          <Icon
+            path={mdiPlayCircleOutline}
+            className="pointer-events-auto text-panel-icon-action group-disabled:cursor-not-allowed"
+            size={1}
+          />
+        </button>
+        <button
+          type="button"
+          className="flex w-full flex-row justify-between disabled:cursor-not-allowed disabled:opacity-65"
+          onClick={refreshTvDbAction}
+          disabled={tvDbRefreshing}
+        >
+          Force refresh: TVDB
+          <Icon
+            path={mdiPlayCircleOutline}
+            className="pointer-events-auto text-panel-icon-action group-disabled:cursor-not-allowed"
+            size={1}
+          />
+        </button>
+      </div>
+      <hr className="border border-panel-border" />
+      <div className="flex flex-row gap-x-3">
+        <Icon path={mdiInformationOutline} className="text-panel-icon-warning" size={1} />
+        <div className="grow text-base font-semibold">
+          Warning! Possible Spoilers
+        </div>
+      </div>
+    </ShokoPanel>
+  ),
+);
+
+export default CreditsSearchAndFilterPanel;
diff --git a/src/pages/collection/series/SeriesCredits.tsx b/src/pages/collection/series/SeriesCredits.tsx
index 0e3a4f298..769af18bb 100644
--- a/src/pages/collection/series/SeriesCredits.tsx
+++ b/src/pages/collection/series/SeriesCredits.tsx
@@ -1,15 +1,11 @@
 import React, { useMemo, useState } from 'react';
 import { useParams } from 'react-router';
-import { mdiInformationOutline, mdiMagnify, mdiPlayCircleOutline } from '@mdi/js';
-import Icon from '@mdi/react';
-import { map, toNumber } from 'lodash';
+import { toNumber } from 'lodash';
 import { useDebounceValue } from 'usehooks-ts';
 
+import CreditsSearchAndFilterPanel from '@/components/Collection/Credits/CreditsSearchAndFilterPanel';
 import StaffPanelVirtualizer from '@/components/Collection/Credits/CreditsStaffVirtualizer';
-import Checkbox from '@/components/Input/Checkbox';
-import Input from '@/components/Input/Input';
 import MultiStateButton from '@/components/Input/MultiStateButton';
-import ShokoPanel from '@/components/Panels/ShokoPanel';
 import toast from '@/components/Toast';
 import {
   useRefreshSeriesAniDBInfoMutation,
@@ -34,18 +30,31 @@ const modeStates: { label?: string, value: CreditsModeType }[] = [
 const SeriesCredits = () => {
   const { seriesId } = useParams();
 
-  const { isPending: pendingRefreshAniDb, mutate: refreshAniDb } = useRefreshSeriesAniDBInfoMutation();
-  const { isPending: pendingRefreshTvDb, mutate: refreshTvDb } = useRefreshSeriesTvdbInfoMutatation();
+  const { isPending: pendingRefreshAniDb, mutate: refreshAniDbMutation } = useRefreshSeriesAniDBInfoMutation();
+  const { isPending: pendingRefreshTvDb, mutate: refreshTvDbMutation } = useRefreshSeriesTvdbInfoMutatation();
+
+  const refreshAniDb = useEventCallback(() => {
+    refreshAniDbMutation({ seriesId: toNumber(seriesId), force: true }, {
+      onSuccess: () => toast.success('AniDB refresh queued!'),
+    });
+  });
+
+  const refreshTvDb = useEventCallback(() => {
+    refreshTvDbMutation({ seriesId: toNumber(seriesId), force: true }, {
+      onSuccess: () => toast.success('TvDB refresh queued!'),
+    });
+  });
 
   const [mode, setMode] = useState<CreditsModeType>(modeStates[0].value);
 
   const [search, setSearch] = useState('');
-  const [debouncedSearch] = useDebounceValue(() => cleanString(search), 200);
+  const [debouncedSearch, setDebouncedSearch] = useDebounceValue(() => cleanString(search), 10);
 
   const [roleFilter, setRoleFilter] = useState<Set<string>>(new Set());
 
   const handleModeChange = useEventCallback((newMode: CreditsModeType) => {
     setMode(() => {
+      setDebouncedSearch('');
       setSearch('');
       setRoleFilter(new Set());
       return newMode;
@@ -61,6 +70,10 @@ const SeriesCredits = () => {
     });
   });
 
+  const handleSearchChange = useEventCallback((event: React.ChangeEvent<HTMLInputElement>) => {
+    setSearch(event.target.value);
+  });
+
   const cast = useSeriesCastQuery(toNumber(seriesId!), !!seriesId).data;
   const castByType = useMemo(() => ({
     Character: cast?.filter(credit => credit.RoleName === 'Seiyuu') ?? [],
@@ -87,86 +100,18 @@ const SeriesCredits = () => {
   return (
     <div className="flex w-full gap-x-6">
       <div className="flex flex-col gap-y-6">
-        <ShokoPanel
-          title="Search & Filter"
-          className="w-400"
-          contentClassName="gap-y-6"
-          sticky
-          transparent
-          fullHeight={false}
-        >
-          <div className="flex flex-col gap-y-2">
-            <span className="flex w-full text-base font-semibold">
-              Name
-            </span>
-            <Input
-              id="search"
-              startIcon={mdiMagnify}
-              type="text"
-              placeholder={mode === 'Character' ? 'Character or Seiyuu\'s Name...' : 'Staff Name...'}
-              value={search}
-              inputClassName="px-4 py-3"
-              onChange={event => setSearch(event.target.value)}
-            />
-          </div>
-          <div className="flex flex-col gap-y-2">
-            <div className="text-base font-semibold">Roles</div>
-            <div className="flex flex-col gap-y-2 rounded-lg bg-panel-input p-6">
-              {map(uniqueRoles[mode], desc => (
-                <Checkbox
-                  justify
-                  label={desc}
-                  key={desc}
-                  id={desc}
-                  isChecked={!roleFilter.has(desc)}
-                  onChange={handleFilterChange}
-                />
-              ))}
-            </div>
-          </div>
-          <div className="flex flex-col gap-y-2">
-            <div className="text-base font-semibold">Quick Actions</div>
-            <button
-              type="button"
-              className="flex w-full flex-row justify-between disabled:cursor-not-allowed disabled:opacity-65"
-              onClick={() =>
-                refreshAniDb({ seriesId: toNumber(seriesId), force: true }, {
-                  onSuccess: () => toast.success('AniDB refresh queued!'),
-                })}
-              disabled={pendingRefreshAniDb}
-            >
-              Force refresh: AniDB
-              <Icon
-                path={mdiPlayCircleOutline}
-                className="pointer-events-auto text-panel-icon-action group-disabled:cursor-not-allowed"
-                size={1}
-              />
-            </button>
-            <button
-              type="button"
-              className="flex w-full flex-row justify-between disabled:cursor-not-allowed disabled:opacity-65"
-              onClick={() =>
-                refreshTvDb({ seriesId: toNumber(seriesId), force: true }, {
-                  onSuccess: () => toast.success('TvDB refresh queued!'),
-                })}
-              disabled={pendingRefreshTvDb}
-            >
-              Force refresh: TVDB
-              <Icon
-                path={mdiPlayCircleOutline}
-                className="pointer-events-auto text-panel-icon-action group-disabled:cursor-not-allowed"
-                size={1}
-              />
-            </button>
-          </div>
-          <hr className="border border-panel-border" />
-          <div className="flex flex-row gap-x-3">
-            <Icon path={mdiInformationOutline} className="text-panel-icon-warning" size={1} />
-            <div className="grow text-base font-semibold">
-              Warning! Possible Spoilers
-            </div>
-          </div>
-        </ShokoPanel>
+        <CreditsSearchAndFilterPanel
+          inputPlaceholder={mode === 'Character' ? 'Character or Seiyuu\'s Name...' : 'Staff Name...'}
+          search={search}
+          roleFilter={roleFilter}
+          uniqueRoles={uniqueRoles[mode]}
+          handleSearchChange={handleSearchChange}
+          handleFilterChange={handleFilterChange}
+          refreshAniDbAction={refreshAniDb}
+          refreshTvDbAction={refreshTvDb}
+          aniDbRefreshing={pendingRefreshAniDb}
+          tvDbRefreshing={pendingRefreshTvDb}
+        />
       </div>
 
       <div className="flex w-full grow flex-col gap-x-6 gap-y-4">

From 221013c9244a5ad611198dda22019072450662a2 Mon Sep 17 00:00:00 2001
From: Jordan Fearnley <fearnlj01@gmail.com>
Date: Sun, 26 May 2024 15:15:03 +0100
Subject: [PATCH 28/28] Credits | Misc: Remove debounced value for search

---
 src/pages/collection/series/SeriesCredits.tsx | 11 ++++-------
 1 file changed, 4 insertions(+), 7 deletions(-)

diff --git a/src/pages/collection/series/SeriesCredits.tsx b/src/pages/collection/series/SeriesCredits.tsx
index 769af18bb..c1daff4fa 100644
--- a/src/pages/collection/series/SeriesCredits.tsx
+++ b/src/pages/collection/series/SeriesCredits.tsx
@@ -1,7 +1,6 @@
 import React, { useMemo, useState } from 'react';
 import { useParams } from 'react-router';
 import { toNumber } from 'lodash';
-import { useDebounceValue } from 'usehooks-ts';
 
 import CreditsSearchAndFilterPanel from '@/components/Collection/Credits/CreditsSearchAndFilterPanel';
 import StaffPanelVirtualizer from '@/components/Collection/Credits/CreditsStaffVirtualizer';
@@ -48,13 +47,11 @@ const SeriesCredits = () => {
   const [mode, setMode] = useState<CreditsModeType>(modeStates[0].value);
 
   const [search, setSearch] = useState('');
-  const [debouncedSearch, setDebouncedSearch] = useDebounceValue(() => cleanString(search), 10);
 
   const [roleFilter, setRoleFilter] = useState<Set<string>>(new Set());
 
   const handleModeChange = useEventCallback((newMode: CreditsModeType) => {
     setMode(() => {
-      setDebouncedSearch('');
       setSearch('');
       setRoleFilter(new Set());
       return newMode;
@@ -86,14 +83,14 @@ const SeriesCredits = () => {
   }), [castByType]);
 
   const filteredCast = useMemo(() => (castByType[mode].filter(p => (
-    (debouncedSearch === ''
-      || !!([p?.Character?.Name, p?.Staff?.Name].some(name => cleanString(name).match(debouncedSearch))))
+    (search === ''
+      || !!([p?.Character?.Name, p?.Staff?.Name].some(name => cleanString(name).match(cleanString(search)))))
     && !roleFilter.has(p?.RoleDetails)
   )).sort((a, b) => {
     if (a[mode].Name > b[mode].Name) return 1;
     if (a[mode].Name < b[mode].Name) return -1;
     return 0;
-  })), [castByType, mode, debouncedSearch, roleFilter]);
+  })), [castByType, mode, search, roleFilter]);
 
   if (!seriesId) return null;
 
@@ -118,7 +115,7 @@ const SeriesCredits = () => {
         <div className="flex h-[6.125rem] items-center justify-between rounded-lg border border-panel-border bg-panel-background-transparent px-6 py-4">
           <div className="text-xl font-semibold">
             Credits |&nbsp;
-            {(debouncedSearch !== '' || roleFilter.size > 0) && (
+            {(search !== '' || roleFilter.size > 0) && (
               <>
                 <span className="text-panel-text-important">
                   {filteredCast.length}