feat(react/settings): port related settings

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

@@ -2000,5 +2000,12 @@
     "background_effects_title": "Background effects are now stable",
     "background_effects_message": "On Windows devices, background effects are now fully stable. The background effects adds a touch of color to the user interface by blurring the background behind it. This technique is also used in other applications such as Windows Explorer.",
     "background_effects_button": "Enable background effects"
+  },
+  "settings": {
+    "related_settings": "Related settings"
+  },
+  "settings_appearance": {
+    "related_code_blocks": "Color scheme for code blocks in text notes",
+    "related_code_notes": "Color scheme for code notes"
   }
 }

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

@@ -13,6 +13,7 @@ import { FontFamily, OptionNames } from "@triliumnext/commons";
 import FormTextBox, { FormTextBoxWithUnit } from "../../react/FormTextBox";
 import FormText from "../../react/FormText";
 import Button from "../../react/Button";
+import RelatedSettings from "./components/RelatedSettings";
 
 const MIN_CONTENT_WIDTH = 640;
 
@@ -88,6 +89,16 @@ export default function AppearanceSettings() {
             {overrideThemeFonts === "true" && <Fonts />}
             {isElectron() && <ElectronIntegration /> }
             <MaxContentWidth />
+            <RelatedSettings items={[
+                {
+                    title: t("settings_appearance.related_code_blocks"),
+                    targetPage: "_optionsTextNotes"
+                },
+                {
+                    title: t("settings_appearance.related_code_notes"),
+                    targetPage: "_optionsCodeNotes"
+                }
+            ]} />
         </div>
     )
 }

apps/client/src/widgets/type_widgets/options/appearance/related_settings.ts

@@ -1,71 +0,0 @@
-import type { OptionPages } from "../../content_widget";
-import OptionsWidget from "../options_widget";
-
-const TPL = `\
-<div class="options-section">
-    <h4>Related settings</h4>
-
-    <nav class="related-settings use-tn-links">
-        <li>Color scheme for code blocks in text notes</li>
-        <li>Color scheme for code notes</li>
-    </nav>
-
-    <style>
-        .related-settings {
-            padding: 0;
-            margin: 0;
-            list-style-type: none;
-        }
-    </style>
-</div>
-`;
-
-interface RelatedSettingsConfig {
-    items: {
-        title: string;
-        targetPage: OptionPages;
-    }[];
-}
-
-const RELATED_SETTINGS: Record<string, RelatedSettingsConfig> = {
-    "_optionsAppearance": {
-        items: [
-            {
-                title: "Color scheme for code blocks in text notes",
-                targetPage: "_optionsTextNotes"
-            },
-            {
-                title: "Color scheme for code notes",
-                targetPage: "_optionsCodeNotes"
-            }
-        ]
-    }
-};
-
-export default class RelatedSettings extends OptionsWidget {
-
-    doRender() {
-        this.$widget = $(TPL);
-
-        const config = this.noteId && RELATED_SETTINGS[this.noteId];
-        if (!config) {
-            return;
-        }
-
-        const $relatedSettings = this.$widget.find(".related-settings");
-        $relatedSettings.empty();
-        for (const item of config.items) {
-            const $item = $("<li>");
-            const $link = $("<a>").text(item.title);
-
-            $item.append($link);
-            $link.attr("href", `#root/_hidden/_options/${item.targetPage}`);
-            $relatedSettings.append($item);
-        }
-    }
-
-    isEnabled() {
-        return (!!this.noteId && this.noteId in RELATED_SETTINGS);
-    }
-
-}

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

@@ -0,0 +1,24 @@
+import OptionsSection from "./OptionsSection";
+import type { OptionPages } from "../../content_widget";
+import { t } from "../../../../services/i18n";
+
+interface RelatedSettingsProps {
+    items: {
+        title: string;
+        targetPage: OptionPages;
+    }[];
+}
+
+export default function RelatedSettings({ items }: RelatedSettingsProps) {
+    return (
+        <OptionsSection title={t("settings.related_settings")}>
+            <nav className="use-tn-links" style={{ padding: 0, margin: 0, listStyleType: "none" }}>
+                {items.map(item => (
+                    <li>
+                        <a href={`#root/_hidden/_options/${item.targetPage}`}>{item.title}</a>
+                    </li>
+                ))}
+            </nav>
+        </OptionsSection>
+    );
+}