gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-12-24 00:04:23 +01:00
Code Issues Actions 11 Packages Projects Releases Wiki Activity

chore(right_pane): experiment with resizable sections

Browse Source
This commit is contained in:
Elian Doran 2025-12-18 14:12:28 +02:00
parent fc3692333a
commit b5bfb02d96
No known key found for this signature in database
1 changed files with 18 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
apps/client/src/widgets/sidebar/RightPanelContainer.tsx
View File

@ -6,14 +6,13 @@ import { useEffect } from "preact/hooks";
import options from "../../services/options";
import { DEFAULT_GUTTER_SIZE } from "../../services/resizer";
import { useActiveNoteContext } from "../react/hooks";
import HighlightsList from "./HighlightsList";
import TableOfContents from "./TableOfContents";
const MIN_WIDTH_PERCENT = 5;
export default function RightPanelContainer() {
const { note } = useActiveNoteContext();
// Split between right pane and the content pane.
useEffect(() => {
// We are intentionally omitting useTriliumOption to avoid re-render due to size change.
const rightPaneWidth = Math.max(MIN_WIDTH_PERCENT, options.getInt("rightPaneWidth") ?? MIN_WIDTH_PERCENT);
@ -27,12 +26,25 @@ export default function RightPanelContainer() {
return () => splitInstance.destroy();
}, []);
const items = [
<TableOfContents />,
<HighlightsList />
];
// Split between items.
useEffect(() => {
const rightPaneContainer = document.getElementById("right-pane");
const elements = Array.from(rightPaneContainer?.children ?? []) as HTMLElement[];
console.log("Got ", elements);
const splitInstance = Split(elements, {
direction: "vertical"
});
return () => splitInstance.destroy();
}, [ items ]);
return (
<div id="right-pane">
{note && <>
<TableOfContents />
<HighlightsList />
</>}
{items}
</div>
);
}