chore(layout): revert work on floating panel

apps/client/src/components/app_context.ts

@@ -498,6 +498,10 @@ type EventMappings = {
         noteIds: string[];
     };
     refreshData: { ntxId: string | null | undefined };
+    contentSafeMarginChanged: {
+        top: number;
+        noteContext: NoteContext;
+    }
 };
 
 export type EventListener<T extends EventNames> = {

apps/client/src/layouts/desktop_layout.tsx

@@ -138,21 +138,21 @@ export default class DesktopLayout {
                                                                 .child(<ClosePaneButton />)
                                                                 .child(<CreatePaneButton />)
                                                         )
+                                                        .child(new FlexContainer("row")
+                                                            .class("title-row")
+                                                            .child(<NoteIconWidget />)
+                                                            .child(<NoteTitleWidget />)
+                                                        )
+                                                        .child(<Ribbon />)
                                                         .child(new WatchedFileUpdateStatusWidget())
                                                         .child(<FloatingButtons items={DESKTOP_FLOATING_BUTTONS} />)
                                                         .child(
                                                             new ScrollingContainer()
                                                                 .filling()
                                                                 .child(new ContentHeader()
-                                                                    .child(new FlexContainer("row")
-                                                                        .class("title-row")
-                                                                        .child(<NoteIconWidget />)
-                                                                        .child(<NoteTitleWidget />)
-                                                                    )
                                                                     .child(<ReadOnlyNoteInfoBar />)
                                                                     .child(<SharedInfo />)
                                                                 )
-                                                                .child(<Ribbon />)
                                                                 .child(<PromotedAttributes />)
                                                                 .child(<SqlTableSchemas />)
                                                                 .child(<NoteDetail />)

apps/client/src/stylesheets/theme-next/ribbon.css

@@ -178,15 +178,3 @@ ul.editability-dropdown li.dropdown-item > div {
 .note-info-widget {
     container: info-section / inline-size;
 }
-
-/*
- * Styling as a floating toolbar
- */
-.ribbon-container {
-    position: sticky;
-    top: 0;
-    left: 0;
-    right: 0;
-    background: var(--main-background-color);
-    z-index: 997;
-}

apps/client/src/widgets/FloatingButtons.css

@@ -6,12 +6,11 @@
 .floating-buttons-children,
 .show-floating-buttons {
     position: absolute;
-    top: calc(var(--floating-buttons-vert-offset, 14px) + var(--ribbon-height, 0px) + var(--content-header-height, 0px));
+    top: var(--floating-buttons-vert-offset, 14px);
     inset-inline-end: var(--floating-buttons-horiz-offset, 10px);
     display: flex;
     flex-direction: row;
     z-index: 100;
-    transition: top 0.3s ease;
 }
 
 .note-split.rtl .floating-buttons-children,

apps/client/src/widgets/FloatingButtons.tsx

@@ -48,6 +48,12 @@ export default function FloatingButtons({ items }: FloatingButtonsProps) {
     const [ visible, setVisible ] = useState(true);
     useEffect(() => setVisible(true), [ note ]);
 
+    useTriliumEvent("contentSafeMarginChanged", (e) => {
+        if (e.noteContext === noteContext) {
+            setTop(e.top);
+        }
+    });
+
     return (
         <div className="floating-buttons no-print" style={{top}}>
             <div className={`floating-buttons-children ${!visible ? "temporarily-hidden" : ""}`}>

apps/client/src/widgets/containers/content_header.css

@@ -1,15 +1 @@
-.content-header-widget {
+/** Intentionally left empty for now **/
-    position: relative;
-    z-index: 998;
-    background-color: var(--main-background-color);
-}
-
-.note-split.bgfx .content-header-widget {
-    background-color: transparent;
-}
-
-.content-header-widget.floating {
-    position: sticky;
-    top: 0;
-    background-color: var(--main-background-color, #fff) !important;
-}

apps/client/src/widgets/containers/content_header.ts

@@ -2,7 +2,6 @@ import { EventData } from "../../components/app_context";
 import BasicWidget from "../basic_widget";
 import Container from "./container";
 import NoteContext from "../../components/note_context";
-import "./content_header.css";
 
 export default class ContentHeader extends Container<BasicWidget> {
     
@@ -12,9 +11,6 @@ export default class ContentHeader extends Container<BasicWidget> {
     resizeObserver: ResizeObserver;
     currentHeight: number = 0;
     currentSafeMargin: number = NaN;
-    previousScrollTop: number = 0;
-    isFloating: boolean = false;
-    scrollThreshold: number = 10; // pixels before triggering float
 
     constructor() {
         super();
@@ -39,44 +35,19 @@ export default class ContentHeader extends Container<BasicWidget> {
         this.thisElement = this.$widget.get(0)!;
 
         this.resizeObserver.observe(this.thisElement);
-        this.parentElement.addEventListener("scroll", this.updateScrollState.bind(this), { passive: true });
+        this.parentElement.addEventListener("scroll", this.updateSafeMargin.bind(this));
-    }
-
-    updateScrollState() {
-        const currentScrollTop = this.parentElement!.scrollTop;
-        const isScrollingUp = currentScrollTop < this.previousScrollTop;
-        const hasDropdownOpen = this.thisElement!.querySelector(".dropdown-menu.show") !== null;
-        const hasMovedEnough = Math.abs(currentScrollTop - this.previousScrollTop) > this.scrollThreshold;
-
-        if (hasDropdownOpen) {
-            this.setFloating(true);
-        } else if (currentScrollTop === 0) {
-            this.setFloating(false);
-        } else if (hasMovedEnough) {
-            this.setFloating(isScrollingUp);
-        }
-        this.previousScrollTop = currentScrollTop;
-        this.updateSafeMargin();
-    }
-
-    setFloating(shouldFloat: boolean) {
-        if (shouldFloat !== this.isFloating) {
-            this.isFloating = shouldFloat;
-
-            if (shouldFloat) {
-                this.$widget.addClass("floating");
-            } else {
-                this.$widget.removeClass("floating");
-            }
-        }
     }
 
     updateSafeMargin() {
-        const parentEl = this.parentElement?.closest<HTMLDivElement>(".note-split");
+        const newSafeMargin = Math.max(this.currentHeight - this.parentElement!.scrollTop, 0);
-        if (this.isFloating || this.parentElement!.scrollTop === 0) {
+
-            parentEl!.style.setProperty("--content-header-height", `${this.currentHeight}px`);
+        if (newSafeMargin !== this.currentSafeMargin) {
-        } else {
+            this.currentSafeMargin = newSafeMargin;
-            parentEl!.style.removeProperty("--content-header-height");
+
+            this.triggerEvent("contentSafeMarginChanged", {
+                top: newSafeMargin,
+                noteContext: this.noteContext!
+            });
         }
     }
 

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

@@ -17,6 +17,7 @@
 .info-bar-subtle {
     color: var(--muted-text-color);
     background: var(--main-background-color);
+    border-bottom: 1px solid var(--main-border-color);
     margin-block: 0;
     padding-inline: 22px;
 }