From 859087b8509432461e04044f03c8a9e5cebf17a4 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Sun, 14 Dec 2025 20:21:30 +0200
Subject: [PATCH] feat(layout/edited_notes): respect choice to auto-open

---
 apps/client/src/widgets/layout/InlineTitle.tsx | 10 +++++++---
 apps/client/src/widgets/react/Collapsible.tsx  | 17 +++++++++++------
 2 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/apps/client/src/widgets/layout/InlineTitle.tsx b/apps/client/src/widgets/layout/InlineTitle.tsx
index 00894db79..cdcb04442 100644
--- a/apps/client/src/widgets/layout/InlineTitle.tsx
+++ b/apps/client/src/widgets/layout/InlineTitle.tsx
@@ -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>
     );
diff --git a/apps/client/src/widgets/react/Collapsible.tsx b/apps/client/src/widgets/react/Collapsible.tsx
index e4daa0ae6..a50531a45 100644
--- a/apps/client/src/widgets/react/Collapsible.tsx
+++ b/apps/client/src/widgets/react/Collapsible.tsx
@@ -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>