feat(options): add a related settings option for Appearance

apps/client/src/widgets/type_widgets/content_widget.ts

@@ -44,6 +44,7 @@ import { t } from "i18next";
 import LanguageOptions from "./options/i18n/language.js";
 import type BasicWidget from "../basic_widget.js";
 import CodeTheme from "./options/code_notes/code_theme.js";
+import RelatedSettings from "./options/related_settings.js";
 
 const TPL = /*html*/`<div class="note-detail-content-widget note-detail-printable">
     <style>
@@ -68,7 +69,9 @@ const TPL = /*html*/`<div class="note-detail-content-widget note-detail-printabl
     <div class="note-detail-content-widget-content"></div>
 </div>`;
 
-const CONTENT_WIDGETS: Record<string, (typeof NoteContextAwareWidget)[]> = {
+export type OptionPages = "_optionsAppearance" | "_optionsShortcuts" | "_optionsTextNotes" | "_optionsCodeNotes" | "_optionsImages" | "_optionsSpellcheck" | "_optionsPassword" | "_optionsMFA" | "_optionsEtapi" | "_optionsBackup" | "_optionsSync" | "_optionsAi" | "_optionsOther" | "_optionsLocalization" | "_optionsAdvanced";
+
+const CONTENT_WIDGETS: Record<OptionPages | "_backendLog", (typeof NoteContextAwareWidget)[]> = {
     _optionsAppearance: [
         ThemeOptions,
         FontsOptions,
@@ -165,7 +168,10 @@ export default class ContentWidgetTypeWidget extends TypeWidget {
         this.$content.empty();
         this.children = [];
 
-        const contentWidgets = CONTENT_WIDGETS[note.noteId];
+        const contentWidgets = [
+            ...((CONTENT_WIDGETS as Record<string, typeof NoteContextAwareWidget[]>)[note.noteId]),
+            RelatedSettings
+        ];
         this.$content.toggleClass("options", note.noteId.startsWith("_options"));
 
         if (contentWidgets) {

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

@@ -43,7 +43,8 @@ const TPL = /*html*/`
             </label>
         </div>
     </div>
-</div>`;
+</div>
+`;
 
 interface Theme {
     val: string;

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

@@ -0,0 +1,76 @@
+import type FNote from "../../../entities/fnote";
+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">
+        <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);
+    }
+
+    async refreshWithNote(note: FNote | null | undefined) {
+        console.log("Got note ", note);
+    }
+
+}

docs/Release Notes/Release Notes/v0.94.0.md

@@ -34,6 +34,7 @@
     *   Added the GDScript (Godot) language.
     *   Added the Nix language (and also in code blocks for text notes).
 *   Mermaid diagrams: basic syntax highlight (not all diagram types are supported) and code folding.
+*   Slight organization in Appearance settings: code block themes are now in "Text Notes", added a "Related settings" section in Appearance.
 
 ## 📖 Documentation