feat(right_pane): only grow table of contents & highlights

This commit is contained in:
Elian Doran 2025-12-20 11:52:40 +02:00
parent bc8c852a4d
commit 2b827991ef
No known key found for this signature in database
4 changed files with 9 additions and 4 deletions

View File

@ -39,6 +39,7 @@ export default function HighlightsList() {
handler: () => setShown(true)
}
]}
grow
>
{noteType === "text" && isReadOnly && <ReadOnlyTextHighlightsList />}
{noteType === "text" && !isReadOnly && <EditableTextHighlightsList />}

View File

@ -33,7 +33,7 @@ body.experimental-feature-new-layout #right-pane {
}
}
.card:not(.collapsed) {
.card.grow:not(.collapsed) {
flex-grow: 1;
}

View File

@ -15,9 +15,10 @@ interface RightPanelWidgetProps {
buttons?: ComponentChildren;
containerRef?: RefObject<HTMLDivElement>;
contextMenuItems?: MenuItem<unknown>[];
grow?: boolean;
}
export default function RightPanelWidget({ id, title, buttons, children, containerRef: externalContainerRef, contextMenuItems }: RightPanelWidgetProps) {
export default function RightPanelWidget({ id, title, buttons, children, containerRef: externalContainerRef, contextMenuItems, grow }: RightPanelWidgetProps) {
const [ rightPaneCollapsedItems, setRightPaneCollapsedItems ] = useTriliumOptionJson<string[]>("rightPaneCollapsedItems");
const [ expanded, setExpanded ] = useState(!rightPaneCollapsedItems.includes(id));
const containerRef = useSyncedRef<HTMLDivElement>(externalContainerRef, null);
@ -30,7 +31,10 @@ export default function RightPanelWidget({ id, title, buttons, children, contain
return (
<div
ref={containerRef}
class={clsx("card widget", !expanded && "collapsed")}
class={clsx("card widget", {
collapsed: !expanded,
grow
})}
>
<div
class="card-header"

View File

@ -26,7 +26,7 @@ export default function TableOfContents() {
const { isReadOnly } = useIsNoteReadOnly(note, noteContext);
return (
<RightPanelWidget id="toc" title={t("toc.table_of_contents")}>
<RightPanelWidget id="toc" title={t("toc.table_of_contents")} grow>
{((noteType === "text" && isReadOnly) || (noteType === "doc")) && <ReadOnlyTextTableOfContents />}
{noteType === "text" && !isReadOnly && <EditableTextTableOfContents />}
</RightPanelWidget>