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 { body.experimental-feature-new-layout #right-pane {
width: 300px;
display: flex; display: flex;
flex-direction: column; 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; const MIN_WIDTH_PERCENT = 5;
export default function RightPanelContainer() { export default function RightPanelContainer() {
useSplit();
const [ rightPaneVisible, setRightPaneVisible ] = useTriliumOptionBool("rightPaneVisible"); const [ rightPaneVisible, setRightPaneVisible ] = useTriliumOptionBool("rightPaneVisible");
useSplit(rightPaneVisible);
const { note } = useActiveNoteContext(); const { note } = useActiveNoteContext();
const noteType = useNoteProperty(note, "type"); const noteType = useNoteProperty(note, "type");
const items = [ const items = (rightPaneVisible ? [
(noteType === "text" || noteType === "doc") && <TableOfContents />, (noteType === "text" || noteType === "doc") && <TableOfContents />,
noteType === "text" && <HighlightsList /> noteType === "text" && <HighlightsList />
].filter(Boolean); ] : []).filter(Boolean);
return ( return (
<div id="right-pane"> <div id="right-pane">
{items.length > 0 ? ( {rightPaneVisible && (
items items.length > 0 ? (
) : ( items
<div className="no-items"> ) : (
<Icon icon="bx bx-sidebar" /> <div className="no-items">
{t("right_pane.empty_message")} <Icon icon="bx bx-sidebar" />
<Button {t("right_pane.empty_message")}
text={t("right_pane.empty_button")} <Button
onClick={() => setRightPaneVisible(!rightPaneVisible)} text={t("right_pane.empty_button")}
/> onClick={() => setRightPaneVisible(!rightPaneVisible)}
</div> />
</div>
)
)} )}
</div> </div>
); );
} }
function useSplit() { function useSplit(visible: boolean) {
// Split between right pane and the content pane. // Split between right pane and the content pane.
useEffect(() => { useEffect(() => {
if (!visible) return;
// We are intentionally omitting useTriliumOption to avoid re-render due to size change. // 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 rightPaneWidth = Math.max(MIN_WIDTH_PERCENT, options.getInt("rightPaneWidth") ?? MIN_WIDTH_PERCENT);
const splitInstance = Split(["#center-pane", "#right-pane"], { const splitInstance = Split(["#center-pane", "#right-pane"], {
@ -57,5 +61,5 @@ function useSplit() {
onDragEnd: (sizes) => options.save("rightPaneWidth", Math.round(sizes[1])) onDragEnd: (sizes) => options.save("rightPaneWidth", Math.round(sizes[1]))
}); });
return () => splitInstance.destroy(); return () => splitInstance.destroy();
}, []); }, [ visible ]);
} }