fix: revert bookings redesign (#25172)

* Revert "refactor: extract logic as bookingDetailsSheetStore (#25129)"

This reverts commit 7a0b8a9.

* Revert "feat: bookings page redesign v3 with calendar view (#24664)"

This reverts commit 8923047.

Author: eunjae-lee

apps/web/app/(use-page-wrapper)/(main-nav)/bookings/[status]/ViewToggleButton.tsx

@@ -6,16 +6,16 @@ import { redirect } from "next/navigation";
 import { z } from "zod";
 
 import { getServerSession } from "@calcom/features/auth/lib/getServerSession";
+import { FeaturesRepository } from "@calcom/features/flags/features.repository";
 import { PermissionCheckService } from "@calcom/features/pbac/services/permission-check.service";
+import { prisma } from "@calcom/prisma";
 import { MembershipRole } from "@calcom/prisma/enums";
 
 import { buildLegacyRequest } from "@lib/buildLegacyCtx";
 
 import { validStatuses } from "~/bookings/lib/validStatuses";
 import BookingsList from "~/bookings/views/bookings-view";
 
-import { ViewToggleButton } from "./ViewToggleButton";
-
 const querySchema = z.object({
   status: z.enum(validStatuses),
 });
@@ -54,12 +54,18 @@ const Page = async ({ params }: PageProps) => {
     canReadOthersBookings = teamIdsWithPermission.length > 0;
   }
 
+  const featuresRepository = new FeaturesRepository(prisma);
+  const isCalendarViewEnabled = await featuresRepository.checkIfFeatureIsEnabledGlobally(
+    "booking-calendar-view"
+  );
+
   return (
-    <ShellMainAppDir heading={t("bookings")} CTA={<ViewToggleButton />}>
+    <ShellMainAppDir heading={t("bookings")} subtitle={t("bookings_description")}>
       <BookingsList
         status={parsed.data.status}
         userId={session?.user?.id}
         permissions={{ canReadOthersBookings }}
+        isCalendarViewEnabled={isCalendarViewEnabled}
       />
     </ShellMainAppDir>
   );

apps/web/app/(use-page-wrapper)/(main-nav)/bookings/[status]/page.tsx

@@ -499,7 +499,7 @@ function BookingListItem(booking: BookingItemProps) {
           </div>
           <div className="flex w-full flex-col flex-wrap items-end justify-end space-x-2 space-y-2 py-4 pl-4 text-right text-sm font-medium ltr:pr-4 rtl:pl-4 sm:flex-row sm:flex-nowrap sm:items-start sm:space-y-0 sm:pl-0">
             {shouldShowPendingActions(actionContext) && <TableActions actions={pendingActions} />}
-            <BookingActionsDropdown booking={booking} />
+            <BookingActionsDropdown booking={booking} context="booking-list-item" />
             {shouldShowRecurringCancelAction(actionContext) && <TableActions actions={[cancelEventAction]} />}
             {shouldShowIndividualReportButton(actionContext) && (
               <div className="flex items-center space-x-2">

…/components/booking/_BookingListItem.tsx …b/components/booking/BookingListItem.tsxapps/web/components/booking/_BookingListItem.tsx renamed to apps/web/components/booking/BookingListItem.tsx apps/web/components/booking/_BookingListItem.tsx renamed to apps/web/components/booking/BookingListItem.tsx

@@ -1,83 +1,36 @@
 import React from "react";
 
-import classNames from "@calcom/ui/classNames";
-import { SkeletonAvatar, SkeletonText } from "@calcom/ui/components/skeleton";
+import { SkeletonText } from "@calcom/ui/components/skeleton";
 
 function SkeletonLoader() {
   return (
-    <div className="animate-pulse">
-      {/* Table rows with separator at the beginning */}
-      <div className="divide-subtle divide-y">
-        {/* Month separator skeleton */}
-        <div className="bg-muted rounded-t py-2">
-          <SkeletonItem isHeader={true} />
-        </div>
-        <div className="bg-muted">
-          <SkeletonText className="ml-2 mt-3 h-4 w-28 rounded" />
-        </div>
-
-        <SkeletonItem />
-        <SkeletonItem />
-        <SkeletonItem />
-        <SkeletonItem />
-        <SkeletonItem />
-      </div>
-    </div>
+    <ul className="divide-subtle border-subtle bg-default animate-pulse divide-y rounded-md border sm:overflow-hidden">
+      <SkeletonItem />
+      <SkeletonItem />
+      <SkeletonItem />
+    </ul>
   );
 }
 
 export default SkeletonLoader;
 
-function SkeletonItem({ isHeader = false }: { isHeader?: boolean }) {
+function SkeletonItem() {
   return (
-    <div
-      className={classNames(
-        "grid grid-cols-[132px_130px_185px_150px_140px_280px] gap-6 px-2",
-        isHeader ? "py-2" : "py-2.5"
-      )}>
-      {/* Date column - 140px */}
-      <div className="flex items-center">
-        <SkeletonText className={classNames("h-4 rounded", isHeader ? "w-12" : "w-20")} />
-      </div>
-
-      {/* Time column - 140px */}
-      <div className="flex items-center">
-        <SkeletonText className={classNames("h-4 rounded", isHeader ? "w-12" : "w-28")} />
-      </div>
-
-      {/* Event column - 200px */}
-      <div className="flex items-center">
-        <SkeletonText className={classNames("h-4 rounded", isHeader ? "w-16" : "w-full")} />
-      </div>
-
-      {/* Who column - 160px, Avatar group */}
-      <div className="flex items-center -space-x-1">
-        {isHeader && <SkeletonText className="h-4 w-20 rounded" />}
-        {!isHeader && (
-          <>
-            <SkeletonAvatar className="h-6 w-6 rounded-full" />
-            <SkeletonAvatar className="h-6 w-6 rounded-full" />
-            <SkeletonAvatar className="h-6 w-6 rounded-full" />
-          </>
-        )}
-      </div>
-
-      {/* Team column - 140px */}
-      <div className="flex items-center">
-        <SkeletonText className="h-4 w-20 rounded-md" />
+    <li className="group flex w-full items-center justify-between px-4 py-4 sm:px-6">
+      <div className="flex-grow truncate text-sm">
+        <div className="flex">
+          <div className="flex flex-col space-y-2">
+            <SkeletonText className="h-5 w-16" />
+            <SkeletonText className="h-4 w-32" />
+          </div>
+        </div>
       </div>
-
-      {/* Actions column - 280px */}
-      <div className="mr-2 flex items-center justify-end gap-2">
-        {isHeader && <SkeletonText className="h-4 w-16 rounded-md" />}
-        {!isHeader && (
-          <>
-            <SkeletonText className="h-4 w-16 rounded-md" />
-            <SkeletonText className="h-4 w-20 rounded-md" />
-            <SkeletonText className="h-4 w-8 rounded-md" />
-          </>
-        )}
+      <div className="mt-4 hidden flex-shrink-0 sm:ml-5 sm:mt-0 lg:flex">
+        <div className="flex justify-between space-x-2 rtl:space-x-reverse">
+          <SkeletonText className="h-6 w-16" />
+          <SkeletonText className="h-6 w-32" />
+        </div>
       </div>
-    </div>
+    </li>
   );
 }