feat(layout/inline-title): collapse title for text notes

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

@@ -1,9 +1,39 @@
 import "./InlineTitle.css";
 
+import { useEffect, useState } from "preact/hooks";
+
+import FNote from "../../entities/fnote";
+import { useNoteContext } from "../react/hooks";
+
 export default function InlineTitle() {
+    const { note, parentComponent } = useNoteContext();
+    const [ shown, setShown ] = useState(shouldShow(note));
+
+    useEffect(() => {
+        setShown(shouldShow(note));
+    }, [ note ]);
+
+    useEffect(() => {
+        if (!shown) return;
+
+        const titleRow = parentComponent.$widget[0]
+            .closest(".note-split")
+            ?.querySelector("&> .title-row");
+        if (!titleRow) return;
+
+        titleRow.classList.add("collapse");
+
+        return () => titleRow.classList.remove("collapse");
+    }, [ shown, parentComponent ]);
+
     return (
         <div className="inline-title-row">
             Title goes here.
         </div>
     );
 }
+
+function shouldShow(note: FNote | null | undefined) {
+    if (!note) return false;
+    return note.type === "text";
+}

apps/client/src/widgets/note_title.css

@@ -51,6 +51,10 @@ body.experimental-feature-new-layout {
                 display: none;
             }
         }
+
+        &.collapse {
+            display: none !important;
+        }
     }
 
     .title-details {