e0a28af46e
* feat(bookings): conditionally show heading/subtitle based on view - Add heading and subtitle props back to ShellMainAppDir in page.tsx - Use headerClassName marker to identify the heading element - Add useLayoutEffect in BookingCalendarContainer to hide heading when calendar view is mounted - Restore heading visibility when switching back to list view Co-Authored-By: eunjae@cal.com <hey@eunjae.dev> * refactor(bookings): extract shell heading visibility into reusable hook - Create useBookingsShellHeadingVisibility hook with explicit visible parameter - Move visibility logic from BookingCalendarContainer to BookingsContent - Use data attribute to track if we hid the header (idempotent/Strict-Mode-safe) - Explicit show/hide based on view state instead of relying on unmount Co-Authored-By: eunjae@cal.com <hey@eunjae.dev> * refactor(bookings): simplify shell heading visibility hook Remove HIDDEN_DATA_ATTR tracking since the header wrapper won't have a hidden class from any other source Co-Authored-By: eunjae@cal.com <hey@eunjae.dev> --------- Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
26 lines
632 B
TypeScript
26 lines
632 B
TypeScript
"use client";
|
|
|
|
import { useLayoutEffect } from "react";
|
|
|
|
const MARKER_CLASS = "bookings-shell-heading";
|
|
|
|
export function useBookingsShellHeadingVisibility({ visible }: { visible: boolean }) {
|
|
useLayoutEffect(() => {
|
|
const marker = document.querySelector(`.${MARKER_CLASS}`);
|
|
if (!marker) return;
|
|
|
|
const headerWrapper = marker.closest("header")?.parentElement;
|
|
if (!headerWrapper) return;
|
|
|
|
if (visible) {
|
|
headerWrapper.classList.remove("hidden");
|
|
} else {
|
|
headerWrapper.classList.add("hidden");
|
|
}
|
|
|
|
return () => {
|
|
headerWrapper.classList.remove("hidden");
|
|
};
|
|
}, [visible]);
|
|
}
|