feat(room-booking): scroll to a date from search param

src/app/routes/_with_menu/room-booking.index.tsx

@@ -4,6 +4,10 @@ import { RoomBookingPage } from "@/components/room-booking/timeline/RoomBookingP
 import { createFileRoute } from "@tanstack/react-router";
 import { Helmet } from "react-helmet-async";
 
+type RoomBookingSearch = {
+  d?: number;
+};
+
 export const Route = createFileRoute("/_with_menu/room-booking/")({
   component: () => (
     <>
@@ -20,4 +24,16 @@ export const Route = createFileRoute("/_with_menu/room-booking/")({
       <RoomBookingPage />
     </>
   ),
+  validateSearch: (search): RoomBookingSearch => {
+    const unix =
+      typeof search.d === "number"
+        ? search.d
+        : typeof search.d === "string"
+          ? Number.parseInt(search.d)
+          : NaN;
+    if (!Number.isNaN(unix) && unix > Date.UTC(0)) {
+      return { d: unix };
+    }
+    return {};
+  },
 });

src/components/room-booking/list/BookingsListPage.tsx

@@ -5,6 +5,7 @@ import Tooltip from "@/components/common/Tooltip.tsx";
 import { DeleteBookingModal } from "@/components/room-booking/list/DeleteBookingModal.tsx";
 import { clockTime, durationFormatted, msBetween } from "@/lib/utils/dates.ts";
 import { useQueryClient } from "@tanstack/react-query";
+import { Link } from "@tanstack/react-router";
 import clsx from "clsx";
 import React, { useMemo, useState } from "react";
 
@@ -106,6 +107,16 @@ export function BookingCard({
             isPending ? "visible" : "invisible",
           )}
         >
+          <Tooltip content="Show on timeline">
+            <Link
+              to="/room-booking"
+              search={{ d: new Date(booking.start).getTime() }}
+              className="flex h-8 w-8 items-center justify-center rounded-md text-icon-main/50 hover:bg-secondary-hover"
+            >
+              <span className="icon-[tabler--list-search] text-2xl" />
+            </Link>
+          </Tooltip>
+
           <Tooltip content="Delete booking">
             <button
               className="flex h-8 w-8 items-center justify-center rounded-md border-[1px] border-red-400 bg-red-200 text-red-600 hover:bg-red-300 dark:border-red-600 dark:bg-red-800 dark:text-red-400 dark:hover:bg-red-700"

src/components/room-booking/timeline/BookingTimeline.vue

@@ -8,14 +8,7 @@ import {
 } from "@/lib/utils/dates.ts";
 import { useMediaQuery, useNow } from "@vueuse/core";
 import type { MaybeRef } from "vue";
-import {
-  computed,
-  onMounted,
-  ref,
-  shallowRef,
-  unref,
-  watch,
-} from "vue"; /* ========================================================================== */
+import { computed, onMounted, ref, shallowRef, unref, watch } from "vue";
 
 /* ========================================================================== */
 /* ================================ Options ================================= */
@@ -40,6 +33,8 @@ const emit = defineEmits<{
   bookingClick: [booking: Booking];
 }>();
 
+defineExpose({ scrollTo });
+
 /* ========================================================================== */
 /* =============================== Constants ================================ */
 /* ========================================================================== */
@@ -959,7 +954,7 @@ function handleBookingClick(event: MouseEvent) {
 /* =============================== Scrolling ================================ */
 /* ========================================================================== */
 
-type ScrollToOptions = {
+export type ScrollToOptions = {
   /** Date to scroll to. */
   to: Date;
   /** Behavior of scroll. */

src/components/room-booking/timeline/RoomBookingPage.tsx

@@ -3,17 +3,45 @@ import { $roomBooking } from "@/api/room-booking";
 import { AuthWall } from "@/components/common/AuthWall.tsx";
 import { BookingModal } from "@/components/room-booking/timeline/BookingModal.tsx";
 import { T } from "@/lib/utils/dates.ts";
-import { lazy, Suspense, useState } from "react";
-import type { Booking, Slot } from "./BookingTimeline.vue";
+import { getRouteApi } from "@tanstack/react-router";
+import { lazy, Suspense, useEffect, useRef, useState } from "react";
+import type { Booking, ScrollToOptions, Slot } from "./BookingTimeline.vue";
 
 const BookingTimeline = lazy(
   () => import("@/components/room-booking/timeline/BookingTimeline.tsx"),
 );
 
+type TimelineRef = {
+  __veauryVueRef__: {
+    scrollTo: (options: ScrollToOptions) => void;
+  };
+};
+
+const routeApi = getRouteApi("/_with_menu/room-booking/");
+
 export function RoomBookingPage() {
+  const search = routeApi.useSearch();
   const [modalOpen, setModalOpen] = useState(false);
   const [newBookingSlot, setNewBookingSlot] = useState<Slot>();
   const [bookingDetails, setBookingDetails] = useState<Booking>();
+  const timelineRef = useRef<TimelineRef | null>(null);
+  const [timelineLoaded, setTimelineLoaded] = useState(false);
+
+  const setTimelineRef = (x: TimelineRef) => {
+    timelineRef.current = x;
+    setTimelineLoaded(true);
+  };
+
+  useEffect(() => {
+    if (timelineLoaded && search.d) {
+      timelineRef.current?.__veauryVueRef__.scrollTo({
+        to: new Date(search.d),
+        behavior: "smooth",
+        offsetMs: -T.Min * 20,
+        position: "left",
+      });
+    }
+  }, [timelineLoaded, search.d]);
 
   const { me } = useMe();
 
@@ -68,6 +96,7 @@ export function RoomBookingPage() {
               setNewBookingSlot(undefined);
               setModalOpen(true);
             }}
+            ref={setTimelineRef}
           />
         </Suspense>
       </div>