From 6c4ac347db9be75d730fbabbc309c430289a853c Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Sat, 6 Sep 2025 13:09:24 +0300
Subject: [PATCH] chore(collections/calendar): experiment with avoiding
 floating buttons

---
 .../src/widgets/collections/calendar/index.tsx |  5 +++--
 apps/client/src/widgets/react/hooks.tsx        | 18 ++++++++++++++++++
 2 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/apps/client/src/widgets/collections/calendar/index.tsx b/apps/client/src/widgets/collections/calendar/index.tsx
index 208bf17c6..be09d9439 100644
--- a/apps/client/src/widgets/collections/calendar/index.tsx
+++ b/apps/client/src/widgets/collections/calendar/index.tsx
@@ -3,7 +3,7 @@ import { ViewModeProps } from "../interface";
 import Calendar from "./calendar";
 import { useCallback, useEffect, useMemo, useRef, useState } from "preact/hooks";
 import "./index.css";
-import { useNoteLabel, useNoteLabelBoolean, useResizeObserver, useSpacedUpdate, useTriliumEvent, useTriliumOption, useTriliumOptionInt } from "../../react/hooks";
+import { useFloatingButtonsWidth, useNoteLabel, useNoteLabelBoolean, useResizeObserver, useSpacedUpdate, useTriliumEvent, useTriliumOption, useTriliumOptionInt } from "../../react/hooks";
 import { LOCALE_IDS } from "@triliumnext/commons";
 import { Calendar as FullCalendar } from "@fullcalendar/core";
 import { parseStartEndDateFromEvent, parseStartEndTimeFromEvent } from "./utils";
@@ -146,13 +146,14 @@ export default function CalendarView({ note, noteIds }: ViewModeProps<CalendarVi
 function CalendarHeader({ calendarRef }: { calendarRef: RefObject<FullCalendar> }) {
     const currentViewType = calendarRef.current?.view?.type;
     const currentViewData = CALENDAR_VIEWS.find(v => calendarRef.current && v.type === currentViewType);
+    const floatingButtonsWidth = useFloatingButtonsWidth();
 
     // Wait for the calendar ref to become available.
     const [ ready, setReady ] = useState(false);
     useEffect(() => setReady(true), []);
 
     return (ready &&
-        <div className="calendar-header">
+        <div className="calendar-header" style={{ marginRight: floatingButtonsWidth }}>
             <span className="title">{calendarRef.current?.view.title}</span>
             <ButtonGroup>
                 {CALENDAR_VIEWS.map(viewData => (
diff --git a/apps/client/src/widgets/react/hooks.tsx b/apps/client/src/widgets/react/hooks.tsx
index c86fa544d..328e83cbc 100644
--- a/apps/client/src/widgets/react/hooks.tsx
+++ b/apps/client/src/widgets/react/hooks.tsx
@@ -642,3 +642,21 @@ export function useResizeObserver(ref: RefObject<HTMLElement>, callback: () => v
         return () => observer.disconnect();
     }, [ callback, ref ]);
 }
+
+export function useFloatingButtonsWidth() {
+    const [ width, setWidth ] = useState(0);
+    const parentComponent = useContext(ParentComponent);
+    const containerRef = useRef<HTMLElement>(null);
+    useEffect(() => {
+        const containerEl = parentComponent?.$widget
+            .closest(".note-split")
+            .find(".floating-buttons-children")[0];
+        containerRef.current = (containerEl as HTMLElement | undefined) ?? null;
+    });
+    useResizeObserver(containerRef, () => {
+        console.log("Got width ", containerRef.current?.getBoundingClientRect().width);
+        setWidth(containerRef.current?.getBoundingClientRect().width ?? 0);
+    });
+
+    return width;
+}