feat(react/ribbon): allow editing code types directly

apps/client/src/translations/en/translation.json

@@ -732,7 +732,8 @@
     "note_type": "Note type",
     "editable": "Editable",
     "basic_properties": "Basic Properties",
-    "language": "Language"
+    "language": "Language",
+    "configure_code_notes": "Configure code notes..."
   },
   "book_properties": {
     "view_type": "View type",

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

@@ -18,6 +18,8 @@ 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";
 
 export default function BasicPropertiesTab({ note }: TabContext) {
     return (
@@ -41,6 +43,7 @@ function NoteTypeWidget({ note }: { note?: FNote | null }) {
     
     const currentNoteType = useNoteProperty(note, "type") ?? undefined;
     const currentNoteMime = useNoteProperty(note, "mime");
+    const [ modalShown, setModalShown ] = useState(false);
 
     const changeNoteType = useCallback(async (type: NoteType, mime?: string) => {
         if (!note || (type === currentNoteType && mime === currentNoteMime)) {
@@ -111,7 +114,19 @@ function NoteTypeWidget({ note }: { note?: FNote | null }) {
                         {title}
                     </FormListItem>
                 ))}
+
+                <FormDropdownDivider />
+                <FormListItem icon="bx bx-cog" onClick={() => setModalShown(true)}>{t("basic_properties.configure_code_notes")}</FormListItem>
             </Dropdown>
+
+            <Modal
+                className="code-mime-types-modal"
+                title={t("code_mime_types.title")}
+                show={modalShown} onHidden={() => setModalShown(false)}
+                size="xl" scrollable
+            >
+                <CodeMimeTypesList />
+            </Modal>
         </div>
     )   
 }

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

@@ -123,6 +123,14 @@ function CodeNotePreview({ themeName, wordWrapping }: { themeName: string, wordW
 }
 
 function CodeMimeTypes() {
+    return (
+        <OptionsSection title={t("code_mime_types.title")}>
+            <CodeMimeTypesList />
+        </OptionsSection>
+    )
+}
+
+export function CodeMimeTypesList() {
     const [ codeNotesMimeTypes, setCodeNotesMimeTypes ] = useTriliumOptionJson<string[]>("codeNotesMimeTypes");
     const sectionStyle = useMemo(() => ({ marginBottom: "1em", breakInside: "avoid-column" }), []);
     const groupedMimeTypes: Record<string, MimeType[]> = useMemo(() => {
@@ -148,7 +156,6 @@ function CodeMimeTypes() {
     }, [ codeNotesMimeTypes ]);  
 
     return (
-        <OptionsSection title={t("code_mime_types.title")}>
         <ul class="options-mime-types" style={{ listStyleType: "none", columnWidth: "250px" }}>
             {Object.entries(groupedMimeTypes).map(([ initial, mimeTypes ]) => (
                 <section style={sectionStyle}>
@@ -162,6 +169,5 @@ function CodeMimeTypes() {
                 </section>
             ))}
         </ul>
-        </OptionsSection>
-    )
+    );
 }

apps/client/src/widgets/type_widgets/options/components/OptionsSection.tsx

@@ -11,7 +11,7 @@ interface OptionsSectionProps {
 
 export default function OptionsSection({ title, children, noCard, className, ...rest }: OptionsSectionProps) {
     return (
-        <div className={`options-section ${noCard && "tn-no-card"} ${className ?? ""}`} {...rest}>
+        <div className={`options-section ${noCard ? "tn-no-card" : ""} ${className ?? ""}`} {...rest}>
             {title && <h4>{title}</h4>}
             {children}
         </div>