feat(calcom): add settings page prototypes & refactor titles to AppHeader layout

apps/examples/calcom/app/(dashboard)/booking/past/booking-actions.tsx

@@ -36,7 +36,7 @@ export function BookingActions() {
           render={
             <TooltipTrigger
               render={
-                <Button aria-label="Pptions" size="icon" variant="outline">
+                <Button aria-label="Options" size="icon" variant="outline">
                   <EllipsisIcon />
                 </Button>
               }

apps/examples/calcom/app/(dashboard)/booking/past/bookings-list.tsx

@@ -43,8 +43,8 @@ import {
   ListItemContent,
   ListItemDescription,
   ListItemHeader,
+  ListItemSpanningTrigger,
   ListItemTitle,
-  ListItemTitleLink,
 } from "@/components/list-item";
 import { useLoadingState } from "@/hooks/use-loading-state";
 import {
@@ -115,9 +115,9 @@ export function BookingsList() {
                         <ListItemTitle
                           className={cn(isCancelled && "line-through")}
                         >
-                          <ListItemTitleLink href="#">
+                          <ListItemSpanningTrigger render={<Link href="#" />}>
                             {booking.title}
-                          </ListItemTitleLink>
+                          </ListItemSpanningTrigger>
                         </ListItemTitle>
                         <ListItemDescription>
                           {participants}

apps/examples/calcom/app/(dashboard)/event-types/add-event-type-dialog.tsx

@@ -40,15 +40,15 @@ export function AddEventTypeDialog({
       <DialogTrigger render={<Button className={className} />}>
         {children}
       </DialogTrigger>
-      <DialogPopup className="sm:max-w-xl">
+      <DialogPopup className="max-w-xl">
         <Form className="contents">
           <DialogHeader>
             <DialogTitle>Add a new event type</DialogTitle>
             <DialogDescription>
               Set up event types to offer different types of meetings.
             </DialogDescription>
           </DialogHeader>
-          <DialogPanel className="grid gap-5">
+          <DialogPanel className="grid gap-6">
             <Field>
               <FieldLabel>Title</FieldLabel>
               <Input defaultValue="Quick Chat" type="text" />

apps/examples/calcom/app/(dashboard)/event-types/event-types-list.tsx

@@ -20,6 +20,7 @@ import {
   ShuffleIcon,
   UsersIcon,
 } from "lucide-react";
+import Link from "next/link";
 import { useRef, useState } from "react";
 import {
   ListItem,
@@ -28,8 +29,8 @@ import {
   ListItemDescription,
   ListItemDragHandle,
   ListItemHeader,
+  ListItemSpanningTrigger,
   ListItemTitle,
-  ListItemTitleLink,
   SortableListItem,
   sortableListClasses,
 } from "@/components/list-item";
@@ -143,9 +144,9 @@ function EventTypeItemContent({
         <ListItemHeader>
           <div className="flex items-center gap-2">
             <ListItemTitle>
-              <ListItemTitleLink href={eventPath}>
+              <ListItemSpanningTrigger render={<Link href={eventPath} />}>
                 {eventType.title}
-              </ListItemTitleLink>
+              </ListItemSpanningTrigger>
             </ListItemTitle>
             <span className="text-muted-foreground text-xs max-sm:hidden">
               {eventPath}