From 8f1614f603d7b09dce5ce637242f9036e44eebcf Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Sat, 20 Dec 2025 00:01:21 +0200
Subject: [PATCH] chore(right_pane_widget): basic support for custom widgets

---
 apps/client/src/layouts/desktop_layout.tsx          |  2 +-
 .../src/widgets/sidebar/RightPanelContainer.tsx     | 13 ++++++++++---
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/apps/client/src/layouts/desktop_layout.tsx b/apps/client/src/layouts/desktop_layout.tsx
index 3191f5030..30b62a3b1 100644
--- a/apps/client/src/layouts/desktop_layout.tsx
+++ b/apps/client/src/layouts/desktop_layout.tsx
@@ -184,7 +184,7 @@ export default class DesktopLayout {
                                             .child(new HighlightsListWidget())
                                             .child(...this.customWidgets.get("right-pane"))
                                     )
-                                    .optChild(isNewLayout, <RightPanelContainer />)
+                                    .optChild(isNewLayout, <RightPanelContainer customWidgets={this.customWidgets.get("right-pane")} />)
                             )
                             .optChild(!launcherPaneIsHorizontal && isNewLayout, <StatusBar />)
                     )
diff --git a/apps/client/src/widgets/sidebar/RightPanelContainer.tsx b/apps/client/src/widgets/sidebar/RightPanelContainer.tsx
index 3422ebf36..85010e850 100644
--- a/apps/client/src/widgets/sidebar/RightPanelContainer.tsx
+++ b/apps/client/src/widgets/sidebar/RightPanelContainer.tsx
@@ -7,15 +7,16 @@ import { useEffect } from "preact/hooks";
 import { t } from "../../services/i18n";
 import options from "../../services/options";
 import { DEFAULT_GUTTER_SIZE } from "../../services/resizer";
+import BasicWidget from "../basic_widget";
 import Button from "../react/Button";
-import { useActiveNoteContext, useNoteProperty, useTriliumOptionBool, useTriliumOptionJson } from "../react/hooks";
+import { useActiveNoteContext, useLegacyWidget, useNoteProperty, useTriliumOptionBool, useTriliumOptionJson } from "../react/hooks";
 import Icon from "../react/Icon";
 import HighlightsList from "./HighlightsList";
 import TableOfContents from "./TableOfContents";
 
 const MIN_WIDTH_PERCENT = 5;
 
-export default function RightPanelContainer() {
+export default function RightPanelContainer({ customWidgets }: { customWidgets: BasicWidget[] }) {
     const [ rightPaneVisible, setRightPaneVisible ] = useTriliumOptionBool("rightPaneVisible");
     const [ highlightsList ] = useTriliumOptionJson<string[]>("highlightsList");
     useSplit(rightPaneVisible);
@@ -24,7 +25,8 @@ export default function RightPanelContainer() {
     const noteType = useNoteProperty(note, "type");
     const items = (rightPaneVisible ? [
         (noteType === "text" || noteType === "doc") && <TableOfContents />,
-        noteType === "text" && highlightsList.length > 0 && <HighlightsList />
+        noteType === "text" && highlightsList.length > 0 && <HighlightsList />,
+        ...customWidgets.map((w) => <CustomWidget originalWidget={w} />)
     ] : []).filter(Boolean);
 
     return (
@@ -64,3 +66,8 @@ function useSplit(visible: boolean) {
         return () => splitInstance.destroy();
     }, [ visible ]);
 }
+
+function CustomWidget({ originalWidget }: { originalWidget: BasicWidget }) {
+    const [ el ] = useLegacyWidget(() => originalWidget);
+    return <>{el}</>;
+}