feat(layout/edited_notes): respect choice to auto-open

This commit is contained in:
Elian Doran
2025-12-14 20:21:30 +02:00
parent f7b911dc0b
commit 859087b850
2 changed files with 18 additions and 9 deletions

View File

@@ -19,7 +19,7 @@ import NoteTitleWidget from "../note_title";
import SimpleBadge, { Badge, BadgeWithDropdown } from "../react/Badge";
import Collapsible from "../react/Collapsible";
import { FormDropdownDivider, FormListItem } from "../react/FormList";
import { useNoteBlob, useNoteContext, useNoteLabel, useNoteProperty, useStaticTooltip, useTriliumEvent } from "../react/hooks";
import { useNoteBlob, useNoteContext, useNoteLabel, useNoteProperty, useStaticTooltip, useTriliumEvent, useTriliumOptionBool } from "../react/hooks";
import NoteLink from "../react/NoteLink";
import { joinElements } from "../react/react_utils";
import { useEditedNotes } from "../ribbon/EditedNotesTab";
@@ -310,10 +310,14 @@ function useBuiltinTemplates() {
function EditedNotes() {
const { note } = useNoteContext();
const [ dateNote ] = useNoteLabel(note, "dateNote");
const [ editedNotesOpenInRibbon ] = useTriliumOptionBool("editedNotesOpenInRibbon");
return (note && dateNote &&
<Collapsible className="edited-notes" title={t("note_title.edited_notes")}>
<Collapsible
className="edited-notes"
title={t("note_title.edited_notes")}
initiallyExpanded={editedNotesOpenInRibbon}
>
<EditedNotesContent note={note} />
</Collapsible>
);

View File

@@ -4,16 +4,20 @@ import clsx from "clsx";
import { ComponentChildren, HTMLAttributes } from "preact";
import { useRef, useState } from "preact/hooks";
import { useElementSize } from "./hooks";
import Icon from "./Icon";
interface CollapsibleProps extends Pick<HTMLAttributes<HTMLDivElement>, "className"> {
title: string;
children: ComponentChildren;
initiallyExpanded?: boolean;
}
export default function Collapsible({ title, children, className }: CollapsibleProps) {
export default function Collapsible({ title, children, className, initiallyExpanded }: CollapsibleProps) {
const bodyRef = useRef<HTMLDivElement>(null);
const [ expanded, setExpanded ] = useState(false);
const innerRef = useRef<HTMLDivElement>(null);
const [ expanded, setExpanded ] = useState(initiallyExpanded);
const { height } = useElementSize(innerRef) ?? {};
return (
<div className={clsx("collapsible", className, expanded && "expanded")}>
@@ -28,11 +32,12 @@ export default function Collapsible({ title, children, className }: CollapsibleP
<div
ref={bodyRef}
className="collapsible-body"
style={{
height: expanded ? bodyRef.current?.scrollHeight : "0",
}}
style={{ height: expanded ? height : "0" }}
>
<div className="collapsible-inner-body">
<div
ref={innerRef}
className="collapsible-inner-body"
>
{children}
</div>
</div>