feat(layout/inline-title): add transition

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

@@ -20,6 +20,29 @@
     }
 }
 
+.note-split > .title-row .note-icon-widget,
+.note-split > .title-row .note-title-widget,
+.inline-title > .inline-title-row {
+    transition: opacity 200ms ease-in;
+}
+
+.note-split {
+    &.inline-title-visible {
+        &> .title-row {
+            .note-icon-widget,
+            .note-title-widget {
+                opacity: 0;
+            }
+        }
+    }
+
+    &:not(.inline-title-visible) {
+        .inline-title .inline-title-row {
+            opacity: 0;
+        }
+    }
+}
+
 .note-split.type-code:not(.mime-text-x-sqlite) .inline-title {
     background-color: var(--main-background-color);
 }

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

@@ -40,20 +40,21 @@ export default function InlineTitle() {
     useEffect(() => {
         if (!shown) return;
 
-        const titleRow = parentComponent.$widget[0]
-            .closest(".note-split")
-            ?.querySelector("&> .title-row");
-        if (!titleRow) return;
+        const noteSplit = parentComponent.$widget[0].closest(".note-split");
+        const titleRow = noteSplit?.querySelector("&> .title-row");
+        if (!noteSplit || !titleRow) return;
 
         const observer = new IntersectionObserver((entries) => {
-            titleRow.classList.toggle("collapse", entries[0].isIntersecting);
+            noteSplit.classList.toggle("inline-title-visible", entries[0].isIntersecting);
+        }, {
+            threshold: 0.85
         });
         if (containerRef.current) {
             observer.observe(containerRef.current);
         }
 
         return () => {
-            titleRow.classList.remove("collapse");
+            noteSplit.classList.remove("inline-title-visible");
             observer.disconnect();
         };
     }, [ shown, parentComponent ]);

apps/client/src/widgets/note_title.css

@@ -51,12 +51,5 @@ body.experimental-feature-new-layout {
                 display: none;
             }
         }
-
-        &.collapse {
-            .note-icon-widget,
-            .note-title-widget {
-                visibility: hidden;
-            }
-        }
     }
 }