feat(layout): make edited notes collapsible

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>
+    );
+
+}