feat(layout): make edited notes collapsible

apps/client/src/widgets/layout/InlineTitle.css

@@ -92,17 +92,20 @@ body.prefers-centered-content .inline-title {
 
 .edited-notes {
     padding-top: 1em;
-    display: flex;
-    flex-wrap: wrap;
-    gap: 0.3em;
 
-    .badge {
+    .collapsible-inner-body {
-        margin: 0;
+        display: flex;
-        a.tn-link {
+        flex-wrap: wrap;
-            color: inherit;
+        gap: 0.3em;
-            text-transform: none;
+
-            text-decoration: none;
+        .badge {
-            display: inline-block;
+            margin: 0;
+            a.tn-link {
+                color: inherit;
+                text-transform: none;
+                text-decoration: none;
+                display: inline-block;
+            }
         }
     }
 

apps/client/src/widgets/layout/InlineTitle.tsx

@@ -17,6 +17,7 @@ import { formatDateTime } from "../../utils/formatters";
 import NoteIcon from "../note_icon";
 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 NoteLink from "../react/NoteLink";
@@ -312,9 +313,9 @@ function EditedNotes() {
 
 
     return (note && dateNote &&
-        <div className="edited-notes">
+        <Collapsible className="edited-notes" title={t("note_title.edited_notes")}>
             <EditedNotesContent note={note} />
-        </div>
+        </Collapsible>
     );
 }
 
@@ -323,7 +324,6 @@ function EditedNotesContent({ note }: { note: FNote }) {
 
     return (
         <>
-            <strong>{t("note_title.edited_notes")}</strong><br />
             {editedNotes?.map(editedNote => (
                 <SimpleBadge
                     key={editedNote.noteId}

apps/client/src/widgets/react/Collapsible.css

@@ -0,0 +1,28 @@
+.collapsible {
+    .collapsible-title {
+        line-height: 1em;
+        display: flex;
+        align-items: center;
+
+        .arrow {
+            font-size: 1.3em;
+            transition: transform 250ms ease-in;
+        }
+    }
+
+    .collapsible-body {
+        height: 0;
+        overflow: hidden;
+        transition: height 250ms ease-in;
+    }
+
+    .collapsible-inner-body {
+        padding-top: 0.5em;
+    }
+
+    &.expanded {
+        .collapsible-title .arrow {
+            transform: rotate(90deg);
+        }
+    }
+}

apps/client/src/widgets/react/Collapsible.tsx

@@ -0,0 +1,42 @@
+import "./Collapsible.css";
+
+import clsx from "clsx";
+import { ComponentChildren, HTMLAttributes } from "preact";
+import { useRef, useState } from "preact/hooks";
+
+import Icon from "./Icon";
+
+interface CollapsibleProps extends Pick<HTMLAttributes<HTMLDivElement>, "className"> {
+    title: string;
+    children: ComponentChildren;
+}
+
+export default function Collapsible({ title, children, className }: CollapsibleProps) {
+    const bodyRef = useRef<HTMLDivElement>(null);
+    const [ expanded, setExpanded ] = useState(false);
+
+    return (
+        <div className={clsx("collapsible", className, expanded && "expanded")}>
+            <div
+                className="collapsible-title"
+                onClick={() => setExpanded(!expanded)}
+            >
+                <Icon className="arrow" icon="bx bx-chevron-right" />&nbsp;
+                {title}
+            </div>
+
+            <div
+                ref={bodyRef}
+                className="collapsible-body"
+                style={{
+                    height: expanded ? bodyRef.current?.scrollHeight : "0",
+                }}
+            >
+                <div className="collapsible-inner-body">
+                    {children}
+                </div>
+            </div>
+        </div>
+    );
+
+}