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

chore(right_pane): make right pane collapsible

Browse Source
This commit is contained in:
Elian Doran 2025-12-19 21:11:46 +02:00
parent 9acef4d502
commit 3d9efb23ec
No known key found for this signature in database
2 changed files with 21 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
apps/client/src/widgets/sidebar/RightPanelContainer.css
View File

@ -1,5 +1,4 @@
body.experimental-feature-new-layout #right-pane {
width: 300px;
display: flex;
flex-direction: column;

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

@ -16,37 +16,41 @@ import TableOfContents from "./TableOfContents";
const MIN_WIDTH_PERCENT = 5;
export default function RightPanelContainer() {
useSplit();
const [ rightPaneVisible, setRightPaneVisible ] = useTriliumOptionBool("rightPaneVisible");
useSplit(rightPaneVisible);
const { note } = useActiveNoteContext();
const noteType = useNoteProperty(note, "type");
const items = [
const items = (rightPaneVisible ? [
(noteType === "text" || noteType === "doc") && <TableOfContents />,
noteType === "text" && <HighlightsList />
].filter(Boolean);
] : []).filter(Boolean);
return (
<div id="right-pane">
{items.length > 0 ? (
items
) : (
<div className="no-items">
<Icon icon="bx bx-sidebar" />
{t("right_pane.empty_message")}
<Button
text={t("right_pane.empty_button")}
onClick={() => setRightPaneVisible(!rightPaneVisible)}
/>
</div>
{rightPaneVisible && (
items.length > 0 ? (
items
) : (
<div className="no-items">
<Icon icon="bx bx-sidebar" />
{t("right_pane.empty_message")}
<Button
text={t("right_pane.empty_button")}
onClick={() => setRightPaneVisible(!rightPaneVisible)}
/>
</div>
)
)}
</div>
);
}
function useSplit() {
function useSplit(visible: boolean) {
// Split between right pane and the content pane.
useEffect(() => {
if (!visible) return;
// 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);
const splitInstance = Split(["#center-pane", "#right-pane"], {
@ -57,5 +61,5 @@ function useSplit() {
onDragEnd: (sizes) => options.save("rightPaneWidth", Math.round(sizes[1]))
});
return () => splitInstance.destroy();
}, []);
}, [ visible ]);
}