Merge branch 'development' of https://github.com/morpheus65535/bazarr into development

29 files changed, 94 insertions, 91 deletions

diff --git a/frontend/src/components/Search.tsx b/frontend/src/components/Search.tsx
index e4124d09f..bc4a9f8d3 100644
--- a/frontend/src/components/Search.tsx
+++ b/frontend/src/components/Search.tsx
@@ -37,7 +37,7 @@ function useSearch(query: string) {
           link,
         };
       }) ?? [],
-    [data]
+    [data],
   );
 }
 
@@ -69,7 +69,7 @@ const ResultComponent = forwardRef<HTMLDivElement, ResultCompProps>(
         {value}
       </Anchor>
     );
-  }
+  },
 );
 
 const Search: FunctionComponent = () => {
diff --git a/frontend/src/components/SubtitleToolsMenu.tsx b/frontend/src/components/SubtitleToolsMenu.tsx
index ba44e94aa..50509c3c2 100644
--- a/frontend/src/components/SubtitleToolsMenu.tsx
+++ b/frontend/src/components/SubtitleToolsMenu.tsx
@@ -100,7 +100,7 @@ export function useTools() {
         modal: TranslationModal,
       },
     ],
-    []
+    [],
   );
 }
 
@@ -131,7 +131,7 @@ const SubtitleToolsMenu: FunctionComponent<Props> = ({
         task.create(s.path, name, mutateAsync, { action, form });
       });
     },
-    [mutateAsync, selections]
+    [mutateAsync, selections],
   );
 
   const tools = useTools();
diff --git a/frontend/src/components/bazarr/Language.test.tsx b/frontend/src/components/bazarr/Language.test.tsx
index 8d328753e..9e0e0fab8 100644
--- a/frontend/src/components/bazarr/Language.test.tsx
+++ b/frontend/src/components/bazarr/Language.test.tsx
@@ -53,7 +53,7 @@ describe("Language text", () => {
 
   it("should show long text with Forced", () => {
     rawRender(
-      <Language.Text value={testLanguageWithForced} long></Language.Text>
+      <Language.Text value={testLanguageWithForced} long></Language.Text>,
     );
 
     const expectedText = `${testLanguageWithHi.name} Forced`;
diff --git a/frontend/src/components/bazarr/LanguageProfile.tsx b/frontend/src/components/bazarr/LanguageProfile.tsx
index 03ca6255a..75b7b73ca 100644
--- a/frontend/src/components/bazarr/LanguageProfile.tsx
+++ b/frontend/src/components/bazarr/LanguageProfile.tsx
@@ -14,7 +14,7 @@ const LanguageProfileName: FunctionComponent<Props> = ({
 
   const name = useMemo(
     () => data?.find((v) => v.profileId === index)?.name ?? empty,
-    [data, empty, index]
+    [data, empty, index],
   );
 
   return <>{name}</>;
diff --git a/frontend/src/components/bazarr/LanguageSelector.tsx b/frontend/src/components/bazarr/LanguageSelector.tsx
index 84ce363d5..c2219ca7c 100644
--- a/frontend/src/components/bazarr/LanguageSelector.tsx
+++ b/frontend/src/components/bazarr/LanguageSelector.tsx
@@ -25,7 +25,7 @@ const LanguageSelector: FunctionComponent<LanguageSelectorProps> = ({
   const options = useSelectorOptions(
     filteredData ?? [],
     (value) => value.name,
-    (value) => value.code3
+    (value) => value.code3,
   );
 
   return <Selector {...options} searchable {...selector}></Selector>;
diff --git a/frontend/src/components/forms/ColorToolForm.tsx b/frontend/src/components/forms/ColorToolForm.tsx
index af4d2b6e5..a37819bee 100644
--- a/frontend/src/components/forms/ColorToolForm.tsx
+++ b/frontend/src/components/forms/ColorToolForm.tsx
@@ -96,7 +96,7 @@ const ColorToolForm: FunctionComponent<Props> = ({ selections, onSubmit }) => {
     validate: {
       color: FormUtils.validation(
         (value) => colorOptions.find((op) => op.value === value) !== undefined,
-        "Must select a color"
+        "Must select a color",
       ),
     },
   });
@@ -110,7 +110,7 @@ const ColorToolForm: FunctionComponent<Props> = ({ selections, onSubmit }) => {
           task.create(s.path, TaskName, mutateAsync, {
             action,
             form: s,
-          })
+          }),
         );
 
         onSubmit?.();
diff --git a/frontend/src/components/forms/FrameRateForm.tsx b/frontend/src/components/forms/FrameRateForm.tsx
index c8694ae37..7e7eca24c 100644
--- a/frontend/src/components/forms/FrameRateForm.tsx
+++ b/frontend/src/components/forms/FrameRateForm.tsx
@@ -29,11 +29,11 @@ const FrameRateForm: FunctionComponent<Props> = ({ selections, onSubmit }) => {
     validate: {
       from: FormUtils.validation(
         (value) => value > 0,
-        "The From value must be larger than 0"
+        "The From value must be larger than 0",
       ),
       to: FormUtils.validation(
         (value) => value > 0,
-        "The To value must be larger than 0"
+        "The To value must be larger than 0",
       ),
     },
   });
@@ -47,7 +47,7 @@ const FrameRateForm: FunctionComponent<Props> = ({ selections, onSubmit }) => {
           task.create(s.path, TaskName, mutateAsync, {
             action,
             form: s,
-          })
+          }),
         );
 
         onSubmit?.();
diff --git a/frontend/src/components/forms/ItemEditForm.tsx b/frontend/src/components/forms/ItemEditForm.tsx
index 31d00bfec..9f3856d54 100644
--- a/frontend/src/components/forms/ItemEditForm.tsx
+++ b/frontend/src/components/forms/ItemEditForm.tsx
@@ -27,12 +27,12 @@ const ItemEditForm: FunctionComponent<Props> = ({
   const profileOptions = useSelectorOptions(
     data ?? [],
     (v) => v.name ?? "Unknown",
-    (v) => v.profileId.toString() ?? "-1"
+    (v) => v.profileId.toString() ?? "-1",
   );
 
   const profile = useMemo(
     () => data?.find((v) => v.profileId === item?.profileId) ?? null,
-    [data, item?.profileId]
+    [data, item?.profileId],
   );
 
   const form = useForm({
@@ -44,7 +44,7 @@ const ItemEditForm: FunctionComponent<Props> = ({
   const options = useSelectorOptions(
     item?.audio_language ?? [],
     (v) => v.name,
-    (v) => v.code2
+    (v) => v.code2,
   );
 
   const isOverlayVisible = isLoading || isFetching || item === null;
@@ -77,7 +77,7 @@ const ItemEditForm: FunctionComponent<Props> = ({
           {...profileOptions}
           {...form.getInputProps("profile")}
           clearable
-          label="Languages Profiles"
+          label="Languages Profile"
         ></Selector>
         <Divider></Divider>
         <Group position="right">
diff --git a/frontend/src/components/forms/MovieUploadForm.tsx b/frontend/src/components/forms/MovieUploadForm.tsx
index 46b592081..fbcb0b04f 100644
--- a/frontend/src/components/forms/MovieUploadForm.tsx
+++ b/frontend/src/components/forms/MovieUploadForm.tsx
@@ -47,7 +47,7 @@ type SubtitleValidateResult = {
 
 const validator = (
   movie: Item.Movie,
-  file: SubtitleFile
+  file: SubtitleFile,
 ): SubtitleValidateResult => {
   if (file.language === null) {
     return {
@@ -57,7 +57,7 @@ const validator = (
   } else {
     const { subtitles } = movie;
     const existing = subtitles.find(
-      (v) => v.code2 === file.language?.code2 && isString(v.path)
+      (v) => v.code2 === file.language?.code2 && isString(v.path),
     );
     if (existing !== undefined) {
       return {
@@ -91,12 +91,12 @@ const MovieUploadForm: FunctionComponent<Props> = ({
   const languageOptions = useSelectorOptions(
     languages,
     (v) => v.name,
-    (v) => v.code2
+    (v) => v.code2,
   );
 
   const defaultLanguage = useMemo(
     () => (languages.length > 0 ? languages[0] : null),
-    [languages]
+    [languages],
   );
 
   const form = useForm({
@@ -120,7 +120,7 @@ const MovieUploadForm: FunctionComponent<Props> = ({
             (v) =>
               v.language === null ||
               v.validateResult === undefined ||
-              v.validateResult.state === "error"
+              v.validateResult.state === "error",
           ) === undefined
         );
       }, "Some files cannot be uploaded, please check"),
@@ -254,7 +254,7 @@ const MovieUploadForm: FunctionComponent<Props> = ({
         },
       },
     ],
-    [action, languageOptions]
+    [action, languageOptions],
   );
 
   const { upload } = useMovieSubtitleModification();
@@ -294,7 +294,7 @@ export const MovieUploadModal = withModal(
   {
     title: "Upload Subtitles",
     size: "xl",
-  }
+  },
 );
 
 export default MovieUploadForm;
diff --git a/frontend/src/components/forms/ProfileEditForm.tsx b/frontend/src/components/forms/ProfileEditForm.tsx
index d31a0e338..874f5b8a6 100644
--- a/frontend/src/components/forms/ProfileEditForm.tsx
+++ b/frontend/src/components/forms/ProfileEditForm.tsx
@@ -69,11 +69,11 @@ const ProfileEditForm: FunctionComponent<Props> = ({
     validate: {
       name: FormUtils.validation(
         (value) => value.length > 0,
-        "Must have a name"
+        "Must have a name",
       ),
       items: FormUtils.validation(
         (value) => value.length > 0,
-        "Must contain at lease 1 language"
+        "Must contain at lease 1 language",
       ),
     },
   });
@@ -83,7 +83,7 @@ const ProfileEditForm: FunctionComponent<Props> = ({
   const itemCutoffOptions = useSelectorOptions(
     form.values.items,
     (v) => v.language,
-    (v) => String(v.id)
+    (v) => String(v.id),
   );
 
   const cutoffOptions = useMemo(
@@ -91,24 +91,24 @@ const ProfileEditForm: FunctionComponent<Props> = ({
       ...itemCutoffOptions,
       options: [...itemCutoffOptions.options, ...defaultCutoffOptions],
     }),
-    [itemCutoffOptions]
+    [itemCutoffOptions],
   );
 
   const selectedCutoff = useMemo(
     () =>
       cutoffOptions.options.find((v) => v.value.id === form.values.cutoff)
         ?.value ?? null,
-    [cutoffOptions, form.values.cutoff]
+    [cutoffOptions, form.values.cutoff],
   );
 
   const mustContainOptions = useSelectorOptions(
     form.values.mustContain,
-    (v) => v
+    (v) => v,
   );
 
   const mustNotContainOptions = useSelectorOptions(
     form.values.mustNotContain,
-    (v) => v
+    (v) => v,
   );
 
   const action = useArrayAction<Language.ProfileItem>((fn) => {
@@ -120,7 +120,7 @@ const ProfileEditForm: FunctionComponent<Props> = ({
       1 +
       form.values.items.reduce<number>(
         (val, item) => Math.max(item.id, val),
-        0
+        0,
       );
 
     if (languages.length > 0) {
@@ -154,7 +154,7 @@ const ProfileEditForm: FunctionComponent<Props> = ({
             () =>
               languageOptions.options.find((l) => l.value.code2 === code)
                 ?.value ?? null,
-            [code]
+            [code],
           );
 
           const { classes } = useTableStyles();
@@ -238,7 +238,7 @@ const ProfileEditForm: FunctionComponent<Props> = ({
         },
       },
     ],
-    [action, languageOptions]
+    [action, languageOptions],
   );
 
   return (
@@ -332,5 +332,5 @@ export const ProfileEditModal = withModal(
   {
     title: "Edit Languages Profile",
     size: "xl",
-  }
+  },
 );
diff --git a/frontend/src/components/forms/SeriesUploadForm.tsx b/frontend/src/components/forms/SeriesUploadForm.tsx
index 3c8b036a4..784baf8a5 100644
--- a/frontend/src/components/forms/SeriesUploadForm.tsx
+++ b/frontend/src/components/forms/SeriesUploadForm.tsx
@@ -64,7 +64,7 @@ const validator = (file: SubtitleFile): SubtitleValidateResult => {
   } else {
     const { subtitles } = file.episode;
     const existing = subtitles.find(
-      (v) => v.code2 === file.language?.code2 && isString(v.path)
+      (v) => v.code2 === file.language?.code2 && isString(v.path),
     );
     if (existing !== undefined) {
       return {
@@ -95,7 +95,7 @@ const SeriesUploadForm: FunctionComponent<Props> = ({
   const episodeOptions = useSelectorOptions(
     episodes.data ?? [],
     (v) => `(${v.season}x${v.episode}) ${v.title}`,
-    (v) => v.sonarrEpisodeId.toString()
+    (v) => v.sonarrEpisodeId.toString(),
   );
 
   const profile = useLanguageProfileBy(series.profileId);
@@ -103,12 +103,12 @@ const SeriesUploadForm: FunctionComponent<Props> = ({
   const languageOptions = useSelectorOptions(
     languages,
     (v) => v.name,
-    (v) => v.code2
+    (v) => v.code2,
   );
 
   const defaultLanguage = useMemo(
     () => (languages.length > 0 ? languages[0] : null),
-    [languages]
+    [languages],
   );
 
   const form = useForm({
@@ -134,9 +134,9 @@ const SeriesUploadForm: FunctionComponent<Props> = ({
               v.language === null ||
               v.episode === null ||
               v.validateResult === undefined ||
-              v.validateResult.state === "error"
+              v.validateResult.state === "error",
           ) === undefined,
-        "Some files cannot be uploaded, please check"
+        "Some files cannot be uploaded, please check",
       ),
     },
   });
@@ -162,7 +162,7 @@ const SeriesUploadForm: FunctionComponent<Props> = ({
         if (info) {
           item.episode =
             episodes.data?.find(
-              (v) => v.season === info.season && v.episode === info.episode
+              (v) => v.season === info.season && v.episode === info.episode,
             ) ?? item.episode;
         }
         return item;
@@ -320,7 +320,7 @@ const SeriesUploadForm: FunctionComponent<Props> = ({
         },
       },
     ],
-    [action, episodeOptions, languageOptions]
+    [action, episodeOptions, languageOptions],
   );
 
   const { upload } = useEpisodeSubtitleModification();
@@ -335,7 +335,7 @@ const SeriesUploadForm: FunctionComponent<Props> = ({
 
           if (language === null || episode === null) {
             throw new Error(
-              "Invalid language or episode. This shouldn't happen, please report this bug."
+              "Invalid language or episode. This shouldn't happen, please report this bug.",
             );
           }
 
@@ -370,7 +370,7 @@ const SeriesUploadForm: FunctionComponent<Props> = ({
 export const SeriesUploadModal = withModal(
   SeriesUploadForm,
   "upload-series-subtitles",
-  { title: "Upload Subtitles", size: "xl" }
+  { title: "Upload Subtitles", size: "xl" },
 );
 
 export default SeriesUploadForm;
diff --git a/frontend/src/components/forms/SyncSubtitleForm.tsx b/frontend/src/components/forms/SyncSubtitleForm.tsx
index 349058f63..b5136fc85 100644
--- a/frontend/src/components/forms/SyncSubtitleForm.tsx
+++ b/frontend/src/components/forms/SyncSubtitleForm.tsx
@@ -21,18 +21,18 @@ const TaskName = "Syncing Subtitle";
 function useReferencedSubtitles(
   mediaType: "episode" | "movie",
   mediaId: number,
-  subtitlesPath: string
+  subtitlesPath: string,
 ) {
   // We cannot call hooks conditionally, we rely on useQuery "enabled" option to do only the required API call
   const episodeData = useRefTracksByEpisodeId(
     subtitlesPath,
     mediaId,
-    mediaType === "episode"
+    mediaType === "episode",
   );
   const movieData = useRefTracksByMovieId(
     subtitlesPath,
     mediaId,
-    mediaType === "movie"
+    mediaType === "movie",
   );
 
   const mediaData = mediaType === "episode" ? episodeData : movieData;
@@ -108,7 +108,7 @@ const SyncSubtitleForm: FunctionComponent<Props> = ({
   const subtitles: SelectorOption<string>[] = useReferencedSubtitles(
     mediaType,
     mediaId,
-    subtitlesPath
+    subtitlesPath,
   );
 
   const form = useForm<FormValues>({
diff --git a/frontend/src/components/forms/TimeOffsetForm.tsx b/frontend/src/components/forms/TimeOffsetForm.tsx
index 6d213b359..2792d64d8 100644
--- a/frontend/src/components/forms/TimeOffsetForm.tsx
+++ b/frontend/src/components/forms/TimeOffsetForm.tsx
@@ -37,7 +37,7 @@ const TimeOffsetForm: FunctionComponent<Props> = ({ selections, onSubmit }) => {
       sec: FormUtils.validation((v) => v >= 0, "Second must be larger than 0"),
       ms: FormUtils.validation(
         (v) => v >= 0,
-        "Millisecond must be larger than 0"
+        "Millisecond must be larger than 0",
       ),
     },
   });
@@ -62,7 +62,7 @@ const TimeOffsetForm: FunctionComponent<Props> = ({ selections, onSubmit }) => {
           task.create(s.path, TaskName, mutateAsync, {
             action,
             form: s,
-          })
+          }),
         );
 
         onSubmit?.();
diff --git a/frontend/src/components/forms/TranslationForm.tsx b/frontend/src/components/forms/TranslationForm.tsx
index 260d9b198..976b2f72f 100644
--- a/frontend/src/components/forms/TranslationForm.tsx
+++ b/frontend/src/components/forms/TranslationForm.tsx
@@ -146,13 +146,13 @@ const TranslationForm: FunctionComponent<Props> = ({
 
   const available = useMemo(
     () => languages.filter((v) => v.code2 in translations),
-    [languages]
+    [languages],
   );
 
   const options = useSelectorOptions(
     available,
     (v) => v.name,
-    (v) => v.code2
+    (v) => v.code2,
   );
 
   return (
@@ -166,7 +166,7 @@ const TranslationForm: FunctionComponent<Props> = ({
                 ...s,
                 language: language.code2,
               },
-            })
+            }),
           );
 
           onSubmit?.();
diff --git a/frontend/src/components/inputs/Action.test.tsx b/frontend/src/components/inputs/Action.test.tsx
index 05086e71c..189aca076 100644
--- a/frontend/src/components/inputs/Action.test.tsx
+++ b/frontend/src/components/inputs/Action.test.tsx
@@ -28,7 +28,7 @@ describe("Action button", () => {
   it("should call on-click event when clicked", async () => {
     const onClickFn = vitest.fn();
     rawRender(
-      <Action icon={testIcon} label={testLabel} onClick={onClickFn}></Action>
+      <Action icon={testIcon} label={testLabel} onClick={onClickFn}></Action>,
     );
 
     await userEvent.click(screen.getByRole("button", { name: testLabel }));
diff --git a/frontend/src/components/inputs/Action.tsx b/frontend/src/components/inputs/Action.tsx
index d85239404..236baf112 100644
--- a/frontend/src/components/inputs/Action.tsx
+++ b/frontend/src/components/inputs/Action.tsx
@@ -27,7 +27,7 @@ const Action = forwardRef<HTMLButtonElement, ActionProps>(
         </ActionIcon>
       </Tooltip>
     );
-  }
+  },
 );
 
 export default Action;
diff --git a/frontend/src/components/inputs/ChipInput.test.tsx b/frontend/src/components/inputs/ChipInput.test.tsx
index 3e30490d2..cb52ee30c 100644
--- a/frontend/src/components/inputs/ChipInput.test.tsx
+++ b/frontend/src/components/inputs/ChipInput.test.tsx
@@ -30,7 +30,7 @@ describe("ChipInput", () => {
     });
 
     rawRender(
-      <ChipInput value={existedValues} onChange={mockedFn}></ChipInput>
+      <ChipInput value={existedValues} onChange={mockedFn}></ChipInput>,
     );
 
     const element = screen.getByRole("searchbox");
diff --git a/frontend/src/components/inputs/FileBrowser.tsx b/frontend/src/components/inputs/FileBrowser.tsx
index 38c8a6776..ce57a4938 100644
--- a/frontend/src/components/inputs/FileBrowser.tsx
+++ b/frontend/src/components/inputs/FileBrowser.tsx
@@ -53,7 +53,7 @@ export const FileBrowser: FunctionComponent<FileBrowserProps> = ({
         item: v,
       })) ?? []),
     ],
-    [tree]
+    [tree],
   );
 
   const parent = useMemo(() => {
diff --git a/frontend/src/components/inputs/Selector.test.tsx b/frontend/src/components/inputs/Selector.test.tsx
index 96382c0b2..a7b6cfb85 100644
--- a/frontend/src/components/inputs/Selector.test.tsx
+++ b/frontend/src/components/inputs/Selector.test.tsx
@@ -19,7 +19,7 @@ describe("Selector", () => {
   describe("options", () => {
     it("should work with the SelectorOption", () => {
       rawRender(
-        <Selector name={selectorName} options={testOptions}></Selector>
+        <Selector name={selectorName} options={testOptions}></Selector>,
       );
 
       // TODO: selectorName
@@ -28,7 +28,7 @@ describe("Selector", () => {
 
     it("should display when clicked", async () => {
       rawRender(
-        <Selector name={selectorName} options={testOptions}></Selector>
+        <Selector name={selectorName} options={testOptions}></Selector>,
       );
 
       const element = screen.getByRole("searchbox");
@@ -49,7 +49,7 @@ describe("Selector", () => {
           name={selectorName}
           options={testOptions}
           defaultValue={option.value}
-        ></Selector>
+        ></Selector>,
       );
 
       expect(screen.getByDisplayValue(option.label)).toBeDefined();
@@ -62,7 +62,7 @@ describe("Selector", () => {
           name={selectorName}
           options={testOptions}
           value={option.value}
-        ></Selector>
+        ></Selector>,
       );
 
       expect(screen.getByDisplayValue(option.label)).toBeDefined();
@@ -80,7 +80,7 @@ describe("Selector", () => {
           name={selectorName}
           options={testOptions}
           onChange={mockedFn}
-        ></Selector>
+        ></Selector>,
       );
 
       const element = screen.getByRole("searchbox");
@@ -121,7 +121,7 @@ describe("Selector", () => {
           options={objectOptions}
           onChange={mockedFn}
           getkey={(v) => v.name}
-        ></Selector>
+        ></Selector>,
       );
 
       const element = screen.getByRole("searchbox");
@@ -142,7 +142,7 @@ describe("Selector", () => {
           name={selectorName}
           options={testOptions}
           placeholder={placeholder}
-        ></Selector>
+        ></Selector>,
       );
 
       expect(screen.getByPlaceholderText(placeholder)).toBeDefined();
diff --git a/frontend/src/components/inputs/Selector.tsx b/frontend/src/components/inputs/Selector.tsx
index 79592b758..0af276fc4 100644
--- a/frontend/src/components/inputs/Selector.tsx
+++ b/frontend/src/components/inputs/Selector.tsx
@@ -29,7 +29,7 @@ function DefaultKeyBuilder<T>(value: T) {
   } else {
     LOG("error", "Unknown value type", value);
     throw new Error(
-      `Invalid type (${typeof value}) in the SelectorOption, please provide a label builder`
+      `Invalid type (${typeof value}) in the SelectorOption, please provide a label builder`,
     );
   }
 }
@@ -64,7 +64,7 @@ export function Selector<T>({
         payload: value,
         ...option,
       })),
-    [keyRef, options]
+    [keyRef, options],
   );
 
   const wrappedValue = useMemo(() => {
@@ -88,7 +88,7 @@ export function Selector<T>({
       const payload = data.find((v) => v.value === value)?.payload ?? null;
       onChange?.(payload);
     },
-    [data, onChange]
+    [data, onChange],
   );
 
   return (
@@ -137,16 +137,16 @@ export function MultiSelector<T>({
         payload: value,
         ...option,
       })),
-    [options]
+    [options],
   );
 
   const wrappedValue = useMemo(
     () => value && value.map(labelRef.current),
-    [value]
+    [value],
   );
   const wrappedDefaultValue = useMemo(
     () => defaultValue && defaultValue.map(labelRef.current),
-    [defaultValue]
+    [defaultValue],
   );
 
   const wrappedOnChange = useCallback(
@@ -162,7 +162,7 @@ export function MultiSelector<T>({
       }
       onChange?.(payloads);
     },
-    [data, onChange]
+    [data, onChange],
   );
 
   return (
diff --git a/frontend/src/components/modals/HistoryModal.tsx b/frontend/src/components/modals/HistoryModal.tsx
index 0f39e0ee0..cc4197c44 100644
--- a/frontend/src/components/modals/HistoryModal.tsx
+++ b/frontend/src/components/modals/HistoryModal.tsx
@@ -123,7 +123,7 @@ const MovieHistoryView: FunctionComponent<MovieHistoryViewProps> = ({
         },
       },
     ],
-    []
+    [],
   );
 
   return (
@@ -263,7 +263,7 @@ const EpisodeHistoryView: FunctionComponent<EpisodeHistoryViewProps> = ({
         },
       },
     ],
-    []
+    [],
   );
 
   return (
@@ -280,5 +280,5 @@ const EpisodeHistoryView: FunctionComponent<EpisodeHistoryViewProps> = ({
 export const EpisodeHistoryModal = withModal(
   EpisodeHistoryView,
   "episode-history",
-  { size: "xl" }
+  { size: "xl" },
 );
diff --git a/frontend/src/components/modals/ManualSearchModal.tsx b/frontend/src/components/modals/ManualSearchModal.tsx
index 56fd0fb4b..24799130d 100644
--- a/frontend/src/components/modals/ManualSearchModal.tsx
+++ b/frontend/src/components/modals/ManualSearchModal.tsx
@@ -32,7 +32,7 @@ type SupportType = Item.Movie | Item.Episode;
 interface Props<T extends SupportType> {
   download: (item: T, result: SearchResultType) => Promise<void>;
   query: (
-    id?: number
+    id?: number,
   ) => UseQueryResult<SearchResultType[] | undefined, unknown>;
   item: T;
 }
@@ -64,6 +64,7 @@ function ManualSearchView<T extends SupportType>(props: Props<T>) {
         },
       },
       {
+        Header: "Language",
         accessor: "language",
         Cell: ({ row: { original }, value }) => {
           const lang: Language.Info = {
@@ -111,7 +112,7 @@ function ManualSearchView<T extends SupportType>(props: Props<T>) {
 
           const items = useMemo(
             () => value.slice(1).map((v, idx) => <Text key={idx}>{v}</Text>),
-            [value]
+            [value],
           );
 
           if (value.length === 0) {
@@ -137,7 +138,7 @@ function ManualSearchView<T extends SupportType>(props: Props<T>) {
         },
       },
       {
-        Header: "Upload",
+        Header: "Uploader",
         accessor: "uploader",
         Cell: ({ value }) => {
           const { classes } = useTableStyles();
@@ -145,6 +146,7 @@ function ManualSearchView<T extends SupportType>(props: Props<T>) {
         },
       },
       {
+        Header: "Match",
         accessor: "matches",
         Cell: (row) => {
           const { matches, dont_matches: dont } = row.row.original;
@@ -158,6 +160,7 @@ function ManualSearchView<T extends SupportType>(props: Props<T>) {
         },
       },
       {
+        Header: "Get",
         accessor: "subtitle",
         Cell: ({ row }) => {
           const result = row.original;
@@ -176,7 +179,7 @@ function ManualSearchView<T extends SupportType>(props: Props<T>) {
                   TaskGroup.DownloadSubtitle,
                   download,
                   item,
-                  result
+                  result,
                 );
               }}
             ></Action>
@@ -184,7 +187,7 @@ function ManualSearchView<T extends SupportType>(props: Props<T>) {
         },
       },
     ],
-    [download, item]
+    [download, item],
   );
 
   const bSceneNameAvailable =
@@ -228,10 +231,10 @@ function ManualSearchView<T extends SupportType>(props: Props<T>) {
 export const MovieSearchModal = withModal<Props<Item.Movie>>(
   ManualSearchView,
   "movie-manual-search",
-  { title: "Search Subtitles", size: "calc(100vw - 4rem)" }
+  { title: "Search Subtitles", size: "calc(100vw - 4rem)" },
 );
 export const EpisodeSearchModal = withModal<Props<Item.Episode>>(
   ManualSearchView,
   "episode-manual-search",
-  { title: "Search Subtitles", size: "calc(100vw - 4rem)" }
+  { title: "Search Subtitles", size: "calc(100vw - 4rem)" },
 );
diff --git a/frontend/src/components/modals/SubtitleToolsModal.tsx b/frontend/src/components/modals/SubtitleToolsModal.tsx
index d780504c3..2ba99ec73 100644
--- a/frontend/src/components/modals/SubtitleToolsModal.tsx
+++ b/frontend/src/components/modals/SubtitleToolsModal.tsx
@@ -67,7 +67,7 @@ const SubtitleToolView: FunctionComponent<SubtitleToolViewProps> = ({
         },
       },
     ],
-    []
+    [],
   );
 
   const data = useMemo<TableColumnType[]>(
@@ -91,7 +91,7 @@ const SubtitleToolView: FunctionComponent<SubtitleToolViewProps> = ({
           }
         });
       }),
-    [payload]
+    [payload],
   );
 
   const plugins = [useRowSelect, useCustomSelection];
diff --git a/frontend/src/components/tables/BaseTable.tsx b/frontend/src/components/tables/BaseTable.tsx
index b13b1629a..6ec49e61a 100644
--- a/frontend/src/components/tables/BaseTable.tsx
+++ b/frontend/src/components/tables/BaseTable.tsx
@@ -33,7 +33,7 @@ const useStyles = createStyles((theme) => {
 });
 
 function DefaultHeaderRenderer<T extends object>(
-  headers: HeaderGroup<T>[]
+  headers: HeaderGroup<T>[],
 ): JSX.Element[] {
   return headers.map((col) => (
     <th style={{ whiteSpace: "nowrap" }} {...col.getHeaderProps()}>
@@ -71,7 +71,7 @@ export default function BaseTable<T extends object>(props: BaseTableProps<T>) {
   const colCount = useMemo(() => {
     return headerGroups.reduce(
       (prev, curr) => (curr.headers.length > prev ? curr.headers.length : prev),
-      0
+      0,
     );
   }, [headerGroups]);
 
diff --git a/frontend/src/components/tables/GroupTable.tsx b/frontend/src/components/tables/GroupTable.tsx
index 3d31bfcf2..3a8be3d1b 100644
--- a/frontend/src/components/tables/GroupTable.tsx
+++ b/frontend/src/components/tables/GroupTable.tsx
@@ -60,7 +60,7 @@ function renderRow<T extends object>(row: Row<T>) {
 }
 
 function renderHeaders<T extends object>(
-  headers: HeaderGroup<T>[]
+  headers: HeaderGroup<T>[],
 ): JSX.Element[] {
   return headers
     .filter((col) => !col.isGrouped)
diff --git a/frontend/src/components/tables/PageTable.tsx b/frontend/src/components/tables/PageTable.tsx
index d84940857..4f64fe7b8 100644
--- a/frontend/src/components/tables/PageTable.tsx
+++ b/frontend/src/components/tables/PageTable.tsx
@@ -20,7 +20,7 @@ export default function PageTable<T extends object>(props: Props<T>) {
     options,
     useDefaultSettings,
     ...tablePlugins,
-    ...(plugins ?? [])
+    ...(plugins ?? []),
   );
 
   // use page size as specified in UI settings
diff --git a/frontend/src/components/tables/SimpleTable.tsx b/frontend/src/components/tables/SimpleTable.tsx
index d2beb9630..90f76c7f2 100644
--- a/frontend/src/components/tables/SimpleTable.tsx
+++ b/frontend/src/components/tables/SimpleTable.tsx
@@ -9,7 +9,7 @@ export type SimpleTableProps<T extends object> = TableOptions<T> & {
 };
 
 export default function SimpleTable<T extends object>(
-  props: SimpleTableProps<T>
+  props: SimpleTableProps<T>,
 ) {
   const { plugins, instanceRef, tableStyles, ...options } = props;
 
diff --git a/frontend/src/components/tables/plugins/useCustomSelection.tsx b/frontend/src/components/tables/plugins/useCustomSelection.tsx
index f3d357378..d6ea82de4 100644
--- a/frontend/src/components/tables/plugins/useCustomSelection.tsx
+++ b/frontend/src/components/tables/plugins/useCustomSelection.tsx
@@ -71,7 +71,7 @@ function useInstance<T extends object>(instance: TableInstance<T>) {
   useEffect(() => {
     // Performance
     let items = Object.keys(selectedRowIds).flatMap(
-      (v) => rows.find((n) => n.id === v)?.original ?? []
+      (v) => rows.find((n) => n.id === v)?.original ?? [],
     );
 
     if (canSelect) {
@@ -84,7 +84,7 @@ function useInstance<T extends object>(instance: TableInstance<T>) {
 
 function visibleColumns<T extends object>(
   columns: ColumnInstance<T>[],
-  meta: MetaBase<T>
+  meta: MetaBase<T>,
 ): Column<T>[] {
   const { instance } = meta;
   const checkbox: Column<T> = {
diff --git a/frontend/src/components/toolbox/Button.tsx b/frontend/src/components/toolbox/Button.tsx
index 95502726c..735ef3ca1 100644
--- a/frontend/src/components/toolbox/Button.tsx
+++ b/frontend/src/components/toolbox/Button.tsx
@@ -38,7 +38,7 @@ type ToolboxMutateButtonProps<R, T extends () => Promise<R>> = {
 } & Omit<ToolboxButtonProps, "onClick" | "loading">;
 
 export function ToolboxMutateButton<R, T extends () => Promise<R>>(
-  props: PropsWithChildren<ToolboxMutateButtonProps<R, T>>
+  props: PropsWithChildren<ToolboxMutateButtonProps<R, T>>,
 ): JSX.Element {
   const { promise, onSuccess, ...button } = props;