From 5fc10fe0414738dfce22b9f3ab3cb18f740c1c48 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Sat, 22 Nov 2025 10:51:48 +0200
Subject: [PATCH] chore(react/sidebar): basic right panel widget implementation

---
 apps/client/src/layouts/desktop_layout.tsx    |  1 +
 .../src/widgets/sidebar/RightPanelWidget.tsx  | 33 +++++++++++++++++++
 2 files changed, 34 insertions(+)
 create mode 100644 apps/client/src/widgets/sidebar/RightPanelWidget.tsx

diff --git a/apps/client/src/layouts/desktop_layout.tsx b/apps/client/src/layouts/desktop_layout.tsx
index 17c77f8d8..cbce8fb18 100644
--- a/apps/client/src/layouts/desktop_layout.tsx
+++ b/apps/client/src/layouts/desktop_layout.tsx
@@ -44,6 +44,7 @@ import UploadAttachmentsDialog from "../widgets/dialogs/upload_attachments.js";
 import utils from "../services/utils.js";
 import WatchedFileUpdateStatusWidget from "../widgets/watched_file_update_status.js";
 import NoteDetail from "../widgets/NoteDetail.jsx";
+import RightPanelWidget from "../widgets/sidebar/RightPanelWidget.jsx";
 
 export default class DesktopLayout {
 
diff --git a/apps/client/src/widgets/sidebar/RightPanelWidget.tsx b/apps/client/src/widgets/sidebar/RightPanelWidget.tsx
new file mode 100644
index 000000000..94a5cf04c
--- /dev/null
+++ b/apps/client/src/widgets/sidebar/RightPanelWidget.tsx
@@ -0,0 +1,33 @@
+import { useContext, useRef } from "preact/hooks";
+import { ParentComponent } from "../react/react_utils";
+import { ComponentChildren } from "preact";
+
+interface RightPanelWidgetProps {
+    title: string;
+    children: ComponentChildren;
+    buttons?: ComponentChildren;
+}
+
+export default function RightPanelWidget({ title, buttons, children }: RightPanelWidgetProps) {
+    const containerRef = useRef<HTMLDivElement>(null);
+    const parentComponent = useContext(ParentComponent);
+
+    if (parentComponent) {
+        parentComponent.initialized = Promise.resolve();
+    }
+
+    return (
+        <div ref={containerRef} class="card widget" style={{contain: "none"}}>
+            <div class="card-header">
+                <div class="card-header-title">{title}</div>
+                <div class="card-header-buttons">{buttons}</div>
+            </div>
+
+            <div id={parentComponent?.componentId} class="body-wrapper">
+                <div class="card-body">
+                    {children}
+                </div>
+            </div>
+        </div>
+    );
+}