feat(react/ribbon): edit content languages in modal

apps/client/src/widgets/ribbon/BasicPropertiesTab.tsx

@@ -15,11 +15,11 @@ import FormDropdownList from "../react/FormDropdownList";
 import toast from "../../services/toast";
 import branches from "../../services/branches";
 import sync from "../../services/sync";
-import appContext from "../../components/app_context";
 import HelpButton from "../react/HelpButton";
 import { TabContext } from "./ribbon-interface";
 import Modal from "../react/Modal";
 import { CodeMimeTypesList } from "../type_widgets/options/code_notes";
+import { ContentLanguagesList } from "../type_widgets/options/i18n";
 
 export default function BasicPropertiesTab({ note }: TabContext) {
     return (
@@ -292,6 +292,7 @@ function NoteLanguageSwitch({ note }: { note?: FNote | null }) {
     };
 
     const [ currentNoteLanguage, setCurrentNoteLanguage ] = useNoteLabel(note, "language");
+    const [ modalShown, setModalShown ] = useState(false);
 
     const locales = useMemo(() => {
         const enabledLanguages = JSON.parse(languages ?? "[]") as string[];
@@ -348,14 +349,20 @@ function NoteLanguageSwitch({ note }: { note?: FNote | null }) {
                 })}
 
                 <FormListItem
-                    onClick={(e) => {
+                    onClick={() => setModalShown(true)}
-                        e.stopPropagation();
-                        appContext.tabManager.openContextWithNote("_optionsLocalization", { activate: true });
-                    }}
                 >{t("note_language.configure-languages")}</FormListItem>           
             </Dropdown>
 
             <HelpButton helpPage="B0lcI9xz1r8K" style={{ marginLeft: "4px" }} />
+
+            <Modal
+                className="content-languages-modal"
+                title={t("content_language.title")}
+                show={modalShown} onHidden={() => setModalShown(false)}
+                size="lg" scrollable
+            >
+                <ContentLanguagesList />
+            </Modal>
         </div>
     )
 }

apps/client/src/widgets/type_widgets/options/i18n.tsx

@@ -118,18 +118,25 @@ function DateSettings() {
 }
 
 function ContentLanguages() {
-    const locales = useMemo(() => getAvailableLocales(), []);
-    const [ languages, setLanguages ] = useTriliumOptionJson<string[]>("languages");
-
     return (
         <OptionsSection title={t("content_language.title")}>
             <FormText>{t("content_language.description")}</FormText>
 
-            <CheckboxList
+            <ContentLanguagesList />
-                values={locales}
-                keyProperty="id" titleProperty="name"
-                currentValue={languages} onChange={setLanguages}
-            />
         </OptionsSection>
     );
+}
+
+export function ContentLanguagesList() {
+    const locales = useMemo(() => getAvailableLocales(), []);
+    const [ languages, setLanguages ] = useTriliumOptionJson<string[]>("languages");
+
+    return (
+        <CheckboxList
+            values={locales}
+            keyProperty="id" titleProperty="name"
+            currentValue={languages} onChange={setLanguages}
+            columnWidth="300px"
+        />
+    );
 }