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: ,
enabled: (noteType === "text" || noteType === "doc"),
- position: 10,
},
{
el: ,
enabled: noteType === "text" && highlightsList.length > 0,
- position: 20,
},
...widgetsByParent.getLegacyWidgets("right-pane").map((widget, i) => ({
el: ,
enabled: true,
- position: widget.position ?? 30 + i * 10
+ position: widget.position
})),
...widgetsByParent.getPreactWidgets("right-pane").map((widget) => {
const El = widget.render;
return {
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);
}