1 files changed, 92 insertions, 83 deletions

diff --git a/frontend/src/components/forms/ProfileEditForm.tsx b/frontend/src/components/forms/ProfileEditForm.tsx
index 874f5b8a6..75e2f9df7 100644
--- a/frontend/src/components/forms/ProfileEditForm.tsx
+++ b/frontend/src/components/forms/ProfileEditForm.tsx
@@ -1,10 +1,4 @@
-import { Action, Selector, SelectorOption, SimpleTable } from "@/components";
-import { useModals, withModal } from "@/modules/modals";
-import { useTableStyles } from "@/styles";
-import { useArrayAction, useSelectorOptions } from "@/utilities";
-import { LOG } from "@/utilities/console";
-import FormUtils from "@/utilities/form";
-import { faTrash } from "@fortawesome/free-solid-svg-icons";
+import React, { FunctionComponent, useCallback, useMemo } from "react";
 import {
   Accordion,
   Button,
@@ -16,9 +10,16 @@ import {
   TextInput,
 } from "@mantine/core";
 import { useForm } from "@mantine/form";
-import { FunctionComponent, useCallback, useMemo } from "react";
-import { Column } from "react-table";
-import ChipInput from "../inputs/ChipInput";
+import { faTrash } from "@fortawesome/free-solid-svg-icons";
+import { ColumnDef } from "@tanstack/react-table";
+import { Action, Selector, SelectorOption } from "@/components";
+import ChipInput from "@/components/inputs/ChipInput";
+import SimpleTable from "@/components/tables/SimpleTable";
+import { useModals, withModal } from "@/modules/modals";
+import { useArrayAction, useSelectorOptions } from "@/utilities";
+import { LOG } from "@/utilities/console";
+import FormUtils from "@/utilities/form";
+import styles from "./ProfileEditForm.module.scss";
 
 export const anyCutoff = 65535;
 
@@ -82,7 +83,12 @@ const ProfileEditForm: FunctionComponent<Props> = ({
 
   const itemCutoffOptions = useSelectorOptions(
     form.values.items,
-    (v) => v.language,
+    (v) => {
+      const suffix =
+        v.hi === "True" ? ":hi" : v.forced === "True" ? ":forced" : "";
+
+      return v.language + suffix;
+    },
     (v) => String(v.id),
   );
 
@@ -140,78 +146,88 @@ const ProfileEditForm: FunctionComponent<Props> = ({
     }
   }, [form, languages]);
 
-  const columns = useMemo<Column<Language.ProfileItem>[]>(
+  const LanguageCell = React.memo(
+    ({ item, index }: { item: Language.ProfileItem; index: number }) => {
+      const code = useMemo(
+        () =>
+          languageOptions.options.find((l) => l.value.code2 === item.language)
+            ?.value ?? null,
+        [item.language],
+      );
+
+      return (
+        <Selector
+          {...languageOptions}
+          className="table-select"
+          value={code}
+          onChange={(value) => {
+            if (value) {
+              item.language = value.code2;
+              action.mutate(index, { ...item, language: value.code2 });
+            }
+          }}
+        ></Selector>
+      );
+    },
+  );
+
+  const SubtitleTypeCell = React.memo(
+    ({ item, index }: { item: Language.ProfileItem; index: number }) => {
+      const selectValue = useMemo(() => {
+        if (item.forced === "True") {
+          return "forced";
+        } else if (item.hi === "True") {
+          return "hi";
+        } else {
+          return "normal";
+        }
+      }, [item.forced, item.hi]);
+
+      return (
+        <Select
+          value={selectValue}
+          data={subtitlesTypeOptions}
+          onChange={(value) => {
+            if (value) {
+              action.mutate(index, {
+                ...item,
+                hi: value === "hi" ? "True" : "False",
+                forced: value === "forced" ? "True" : "False",
+              });
+            }
+          }}
+        ></Select>
+      );
+    },
+  );
+
+  const columns = useMemo<ColumnDef<Language.ProfileItem>[]>(
     () => [
       {
-        Header: "ID",
-        accessor: "id",
+        header: "ID",
+        accessorKey: "id",
       },
       {
-        Header: "Language",
-        accessor: "language",
-        Cell: ({ value: code, row: { original: item, index } }) => {
-          const language = useMemo(
-            () =>
-              languageOptions.options.find((l) => l.value.code2 === code)
-                ?.value ?? null,
-            [code],
-          );
-
-          const { classes } = useTableStyles();
-
-          return (
-            <Selector
-              {...languageOptions}
-              className={classes.select}
-              value={language}
-              onChange={(value) => {
-                if (value) {
-                  item.language = value.code2;
-                  action.mutate(index, { ...item, language: value.code2 });
-                }
-              }}
-            ></Selector>
-          );
+        header: "Language",
+        accessorKey: "language",
+        cell: ({ row: { original: item, index } }) => {
+          return <LanguageCell item={item} index={index} />;
         },
       },
       {
-        Header: "Subtitles Type",
-        accessor: "forced",
-        Cell: ({ row: { original: item, index }, value }) => {
-          const selectValue = useMemo(() => {
-            if (item.forced === "True") {
-              return "forced";
-            } else if (item.hi === "True") {
-              return "hi";
-            } else {
-              return "normal";
-            }
-          }, [item.forced, item.hi]);
-
-          return (
-            <Select
-              value={selectValue}
-              data={subtitlesTypeOptions}
-              onChange={(value) => {
-                if (value) {
-                  action.mutate(index, {
-                    ...item,
-                    hi: value === "hi" ? "True" : "False",
-                    forced: value === "forced" ? "True" : "False",
-                  });
-                }
-              }}
-            ></Select>
-          );
+        header: "Subtitles Type",
+        accessorKey: "forced",
+        cell: ({ row: { original: item, index } }) => {
+          return <SubtitleTypeCell item={item} index={index} />;
         },
       },
       {
-        Header: "Exclude If Matching Audio",
-        accessor: "audio_exclude",
-        Cell: ({ row: { original: item, index }, value }) => {
+        header: "Exclude If Matching Audio",
+        accessorKey: "audio_exclude",
+        cell: ({ row: { original: item, index } }) => {
           return (
             <Checkbox
-              checked={value === "True"}
+              checked={item.audio_exclude === "True"}
               onChange={({ currentTarget: { checked } }) => {
                 action.mutate(index, {
                   ...item,
@@ -225,20 +241,19 @@ const ProfileEditForm: FunctionComponent<Props> = ({
       },
       {
         id: "action",
-        accessor: "id",
-        Cell: ({ row }) => {
+        cell: ({ row }) => {
           return (
             <Action
               label="Remove"
               icon={faTrash}
-              color="red"
+              c="red"
               onClick={() => action.remove(row.index)}
             ></Action>
           );
         },
       },
     ],
-    [action, languageOptions],
+    [action, LanguageCell, SubtitleTypeCell],
   );
 
   return (
@@ -255,13 +270,7 @@ const ProfileEditForm: FunctionComponent<Props> = ({
           multiple
           chevronPosition="right"
           defaultValue={["Languages"]}
-          styles={(theme) => ({
-            content: {
-              [theme.fn.smallerThan("md")]: {
-                padding: 0,
-              },
-            },
-          })}
+          className={styles.content}
         >
           <Accordion.Item value="Languages">
             <Stack>
@@ -270,7 +279,7 @@ const ProfileEditForm: FunctionComponent<Props> = ({
                 columns={columns}
                 data={form.values.items}
               ></SimpleTable>
-              <Button fullWidth color="light" onClick={addItem}>
+              <Button fullWidth onClick={addItem}>
                 Add Language
               </Button>
               <Selector