Improved languages profile edit modal to clarify subtitles types.

frontend/src/components/forms/ProfileEditForm.tsx

@@ -9,6 +9,7 @@ import {
   Accordion,
   Button,
   Checkbox,
+  Select,
   Stack,
   Switch,
   Text,
@@ -34,6 +35,21 @@ const defaultCutoffOptions: SelectorOption<Language.ProfileItem>[] = [
   },
 ];
 
+const subtitlesTypeOptions: SelectorOption<string>[] = [
+  {
+    label: "Normal or hearing-impaired",
+    value: "normal",
+  },
+  {
+    label: "Hearing-impaired required",
+    value: "hi",
+  },
+  {
+    label: "Forced (foreign part only)",
+    value: "forced",
+  },
+];
+
 interface Props {
   onComplete?: (profile: Language.Profile) => void;
   languages: readonly Language.Info[];
@@ -157,43 +173,38 @@ const ProfileEditForm: FunctionComponent<Props> = ({
         },
       },
       {
-        Header: "Forced",
+        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 (
-            <Checkbox
+            <Select
-              checked={value === "True"}
+              value={selectValue}
-              onChange={({ currentTarget: { checked } }) => {
+              data={subtitlesTypeOptions}
-                action.mutate(index, {
+              onChange={(value) => {
-                  ...item,
+                if (value) {
-                  forced: checked ? "True" : "False",
+                  action.mutate(index, {
-                  hi: checked ? "False" : item.hi,
+                    ...item,
-                });
+                    hi: value === "hi" ? "True" : "False",
-              }}
+                    forced: value === "forced" ? "True" : "False",
-            ></Checkbox>
+                  });
-          );
+                }
-        },
-      },
-      {
-        Header: "HI",
-        accessor: "hi",
-        Cell: ({ row: { original: item, index }, value }) => {
-          return (
-            <Checkbox
-              checked={value === "True"}
-              onChange={({ currentTarget: { checked } }) => {
-                action.mutate(index, {
-                  ...item,
-                  hi: checked ? "True" : "False",
-                  forced: checked ? "False" : item.forced,
-                });
               }}
-            ></Checkbox>
+            ></Select>
           );
         },
       },
       {
-        Header: "Exclude Audio",
+        Header: "Exclude If Matching Audio",
         accessor: "audio_exclude",
         Cell: ({ row: { original: item, index }, value }) => {
           return (
@@ -317,8 +328,6 @@ export const ProfileEditModal = withModal(
   "languages-profile-editor",
   {
     title: "Edit Languages Profile",
-    size: "lg",
+    size: "xl",
   }
 );
-
-export default ProfileEditForm;