From f3f491d1410577a0fe32cb81d9750b1ad7d9577b Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Sun, 21 Dec 2025 10:02:13 +0200
Subject: [PATCH] feat(client/bundle): respect position for TSX widgets

---
 apps/client/src/services/bundle.ts            |  4 +++-
 .../services/frontend_script_api_preact.ts    |  3 ++-
 .../widgets/sidebar/RightPanelContainer.tsx   | 20 +++++++++++++------
 3 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/apps/client/src/services/bundle.ts b/apps/client/src/services/bundle.ts
index 410545790..ebad10f9f 100644
--- a/apps/client/src/services/bundle.ts
+++ b/apps/client/src/services/bundle.ts
@@ -108,7 +108,9 @@ export class WidgetsByParent {
             const el = h(preactWidget.render, {});
             const widget = new ReactWrappedWidget(el);
             widget.contentSized();
-            // TODO: set position here.
+            if (preactWidget.position) {
+                widget.position = preactWidget.position;
+            }
             widgets.push(widget);
         }
 
diff --git a/apps/client/src/services/frontend_script_api_preact.ts b/apps/client/src/services/frontend_script_api_preact.ts
index 4086fc88c..61f62159e 100644
--- a/apps/client/src/services/frontend_script_api_preact.ts
+++ b/apps/client/src/services/frontend_script_api_preact.ts
@@ -6,7 +6,8 @@ import RightPanelWidget from "../widgets/sidebar/RightPanelWidget";
 
 export interface WidgetDefinition {
     parent: "right-pane",
-    render: () => VNode
+    render: () => VNode,
+    position?: number,
 }
 
 export interface WidgetDefinitionWithType extends WidgetDefinition {
diff --git a/apps/client/src/widgets/sidebar/RightPanelContainer.tsx b/apps/client/src/widgets/sidebar/RightPanelContainer.tsx
index ade0c2b7d..a79280645 100644
--- a/apps/client/src/widgets/sidebar/RightPanelContainer.tsx
+++ b/apps/client/src/widgets/sidebar/RightPanelContainer.tsx
@@ -24,7 +24,7 @@ const MIN_WIDTH_PERCENT = 5;
 interface RightPanelWidgetDefinition {
     el: VNode;
     enabled: boolean;
-    position: number;
+    position?: number;
 }
 
 export default function RightPanelContainer({ widgetsByParent }: { widgetsByParent: WidgetsByParent }) {
@@ -62,30 +62,38 @@ function useItems(rightPaneVisible: boolean, widgetsByParent: WidgetsByParent) {
         {
             el: <TableOfContents />,
             enabled: (noteType === "text" || noteType === "doc"),
-            position: 10,
         },
         {
             el: <HighlightsList />,
             enabled: noteType === "text" && highlightsList.length > 0,
-            position: 20,
         },
         ...widgetsByParent.getLegacyWidgets("right-pane").map((widget, i) => ({
             el: <CustomLegacyWidget key={widget._noteId} originalWidget={widget as LegacyRightPanelWidget} />,
             enabled: true,
-            position: widget.position ?? 30 + i * 10
+            position: widget.position
         })),
         ...widgetsByParent.getPreactWidgets("right-pane").map((widget) => {
             const El = widget.render;
             return {
                 el: <El />,
-                enabled: true
+                enabled: true,
+                position: widget.position
             };
         })
     ];
 
+    // Assign a position to items that don't have one yet.
+    let pos = 10;
+    for (const definition of definitions) {
+        if (!definition.position) {
+            definition.position = pos;
+            pos += 10;
+        }
+    }
+
     return definitions
         .filter(e => e.enabled)
-        .toSorted((a, b) => a.position - b.position)
+        .toSorted((a, b) => (a.position ?? 10) - (b.position ?? 10))
         .map(e => e.el);
 }