From 54c0fe4a16b235631442d0bfc954a29106283f80 Mon Sep 17 00:00:00 2001
From: Artem Bulgakov <ArtemSBulgakov@ya.ru>
Date: Tue, 19 Nov 2024 05:31:49 +0300
Subject: [PATCH] chore(room-booking): add button to show booking on timeline

---
 src/components/room-booking/list/BookingsListPage.tsx | 11 +++++++++++
 .../room-booking/timeline/RoomBookingPage.tsx         |  4 ++--
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/src/components/room-booking/list/BookingsListPage.tsx b/src/components/room-booking/list/BookingsListPage.tsx
index 915d319..491a41a 100644
--- a/src/components/room-booking/list/BookingsListPage.tsx
+++ b/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"
diff --git a/src/components/room-booking/timeline/RoomBookingPage.tsx b/src/components/room-booking/timeline/RoomBookingPage.tsx
index 2927127..d44a37b 100644
--- a/src/components/room-booking/timeline/RoomBookingPage.tsx
+++ b/src/components/room-booking/timeline/RoomBookingPage.tsx
@@ -3,9 +3,9 @@ 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 { getRouteApi } from "@tanstack/react-router";
 import { lazy, Suspense, useEffect, useRef, useState } from "react";
 import type { Booking, ScrollToOptions, Slot } from "./BookingTimeline.vue";
-import { getRouteApi } from "@tanstack/react-router";
 
 const BookingTimeline = lazy(
   () => import("@/components/room-booking/timeline/BookingTimeline.tsx"),
@@ -37,7 +37,7 @@ export function RoomBookingPage() {
       timelineRef.current?.__veauryVueRef__.scrollTo({
         to: new Date(search.d),
         behavior: "smooth",
-        offsetMs: T.Min * 20,
+        offsetMs: -T.Min * 20,
         position: "left",
       });
     }