feat(right_pane): respect position

This commit is contained in:
Elian Doran 2025-12-20 12:17:14 +02:00
parent 2b827991ef
commit 35afd60d00
No known key found for this signature in database

View File

@ -2,6 +2,7 @@
import "./RightPanelContainer.css";
import Split from "@triliumnext/split.js";
import { VNode } from "preact";
import { useEffect, useRef } from "preact/hooks";
import appContext from "../../components/app_context";
@ -19,19 +20,17 @@ import TableOfContents from "./TableOfContents";
const MIN_WIDTH_PERCENT = 5;
interface RightPanelWidgetDefinition {
el: VNode;
enabled: boolean;
position: number;
}
export default function RightPanelContainer({ customWidgets }: { customWidgets: BasicWidget[] }) {
const [ rightPaneVisible, setRightPaneVisible ] = useTriliumOptionBool("rightPaneVisible");
const [ highlightsList ] = useTriliumOptionJson<string[]>("highlightsList");
const items = useItems(rightPaneVisible, customWidgets);
useSplit(rightPaneVisible);
const { note } = useActiveNoteContext();
const noteType = useNoteProperty(note, "type");
const items = (rightPaneVisible ? [
(noteType === "text" || noteType === "doc") && <TableOfContents />,
noteType === "text" && highlightsList.length > 0 && <HighlightsList />,
...customWidgets.map((w) => <CustomWidget key={w._noteId} originalWidget={w as LegacyRightPanelWidget} />)
] : []).filter(Boolean);
return (
<div id="right-pane">
{rightPaneVisible && (
@ -52,6 +51,36 @@ export default function RightPanelContainer({ customWidgets }: { customWidgets:
);
}
function useItems(rightPaneVisible: boolean, customWidgets: BasicWidget[]) {
const { note } = useActiveNoteContext();
const noteType = useNoteProperty(note, "type");
const [ highlightsList ] = useTriliumOptionJson<string[]>("highlightsList");
if (!rightPaneVisible) return [];
const definitions: RightPanelWidgetDefinition[] = [
{
el: <TableOfContents />,
enabled: (noteType === "text" || noteType === "doc"),
position: 10,
},
{
el: <HighlightsList />,
enabled: noteType === "text" && highlightsList.length > 0,
position: 20,
},
...customWidgets.map((w, i) => ({
el: <CustomWidget key={w._noteId} originalWidget={w as LegacyRightPanelWidget} />,
enabled: true,
position: w.position ?? 30 + i * 10
}))
];
return definitions
.filter(e => e.enabled)
.toSorted((a, b) => a.position - b.position)
.map(e => e.el);
}
function useSplit(visible: boolean) {
// Split between right pane and the content pane.
useEffect(() => {