From 8ff108db9e82b9db3f2887c6da972d1737287360 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Thu, 14 Aug 2025 17:19:38 +0300
Subject: [PATCH] feat(react/settings): basic rendering of React content
 widgets

---
 .../widgets/type_widgets/content_widget.ts    | 33 ++++++++++---------
 .../type_widgets/options/appearance.tsx       |  3 ++
 2 files changed, 21 insertions(+), 15 deletions(-)
 create mode 100644 apps/client/src/widgets/type_widgets/options/appearance.tsx

diff --git a/apps/client/src/widgets/type_widgets/content_widget.ts b/apps/client/src/widgets/type_widgets/content_widget.ts
index beb9de272..7f1b675bf 100644
--- a/apps/client/src/widgets/type_widgets/content_widget.ts
+++ b/apps/client/src/widgets/type_widgets/content_widget.ts
@@ -47,6 +47,9 @@ import type BasicWidget from "../basic_widget.js";
 import CodeTheme from "./options/code_notes/code_theme.js";
 import RelatedSettings from "./options/appearance/related_settings.js";
 import EditorFeaturesOptions from "./options/text_notes/features.js";
+import type { JSX } from "preact/jsx-runtime";
+import AppearanceSettings from "./options/appearance.jsx";
+import { renderReactWidget } from "../react/ReactBasicWidget.jsx";
 
 const TPL = /*html*/`<div class="note-detail-content-widget note-detail-printable">
     <style>
@@ -73,14 +76,8 @@ const TPL = /*html*/`<div class="note-detail-content-widget note-detail-printabl
 
 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,
-        ElectronIntegrationOptions,
-        MaxContentWidthOptions,
-        RibbonOptions
-    ],
+const CONTENT_WIDGETS: Record<OptionPages | "_backendLog", ((typeof NoteContextAwareWidget)[] | (() => JSX.Element))> = {
+    _optionsAppearance: AppearanceSettings,
     _optionsShortcuts: [
         KeyboardShortcutsOptions
     ],
@@ -172,13 +169,17 @@ export default class ContentWidgetTypeWidget extends TypeWidget {
         this.$content.empty();
         this.children = [];
 
-        const contentWidgets = [
-            ...((CONTENT_WIDGETS as Record<string, typeof NoteContextAwareWidget[]>)[note.noteId]),
-            RelatedSettings
-        ];
+        const contentWidgets = (CONTENT_WIDGETS as Record<string, (typeof NoteContextAwareWidget[] | (() => JSX.Element))>)[note.noteId];
         this.$content.toggleClass("options", note.noteId.startsWith("_options"));
 
-        if (contentWidgets) {
+        // Unknown widget.
+        if (!contentWidgets) {
+            this.$content.append(t("content_widget.unknown_widget", { id: note.noteId }));
+            return;
+        }
+
+        // Legacy widget.
+        if (Array.isArray(contentWidgets)) {
             for (const clazz of contentWidgets) {
                 const widget = new clazz();
 
@@ -191,9 +192,11 @@ export default class ContentWidgetTypeWidget extends TypeWidget {
                 this.widget = widget;
                 await widget.refresh();
             }
-        } else {
-            this.$content.append(t("content_widget.unknown_widget", { id: note.noteId }));
+            return;
         }
+
+        // React widget.
+        this.$content.append(renderReactWidget(this, contentWidgets()));
     }
 
 }
diff --git a/apps/client/src/widgets/type_widgets/options/appearance.tsx b/apps/client/src/widgets/type_widgets/options/appearance.tsx
new file mode 100644
index 000000000..f69af5512
--- /dev/null
+++ b/apps/client/src/widgets/type_widgets/options/appearance.tsx
@@ -0,0 +1,3 @@
+export default function AppearanceSettings() {
+    return <p>Hi</p>
+}
\ No newline at end of file