Update booking filters design (#6543)

* Update booking filters

* Add filter on YOUR bookings

* Fix pending members showing up in list

apps/web/public/static/locales/en/common.json

@@ -1465,6 +1465,7 @@
   "individual":"Individual",
   "all_bookings_filter_label":"All Bookings",
   "all_users_filter_label":"All Users",
+  "your_bookings_filter_label":"Your Bookings",
   "meeting_url_variable": "Meeting url",
   "meeting_url_info": "The event meeting conference url",
   "date_overrides": "Date overrides",

packages/features/bookings/components/PeopleFilter.tsx

@@ -17,9 +17,9 @@ export const PeopleFilter = () => {
   return (
     <AnimatedPopover
       text={userNames && userNames.length > 0 ? `${userNames.join(", ")}` : t("all_users_filter_label")}>
-      <div className="item-center flex px-4 py-[6px] focus-within:bg-gray-100">
+      <div className="item-center flex px-4 py-[6px] focus-within:bg-gray-100 hover:cursor-pointer hover:bg-gray-50">
         <div className="flex h-6 w-6 items-center justify-center ltr:mr-2 rtl:ml-2">
-          <Icon.FiUser className="h-full w-full" />
+          <Icon.FiUser className="h-5 w-5" />
         </div>
         <label htmlFor="allUsers" className="mr-auto self-center truncate text-sm font-medium text-gray-700">
           {t("all_users_filter_label")}
@@ -38,7 +38,9 @@ export const PeopleFilter = () => {
       </div>
       {data &&
         data.map((user) => (
-          <div className="item-center flex px-4 py-[6px] focus-within:bg-gray-100" key={`${user.id}`}>
+          <div
+            className="item-center flex px-4 py-[6px] focus-within:bg-gray-100 focus-within:bg-gray-100 hover:cursor-pointer hover:bg-gray-50"
+            key={`${user.id}`}>
             <Avatar
               imageSrc={user.avatar}
               size="sm"
@@ -49,7 +51,7 @@ export const PeopleFilter = () => {
             />
             <label
               htmlFor={user.name ?? "NamelessUser"}
-              className="ml-2 mr-auto self-center truncate text-sm font-medium text-gray-700">
+              className="ml-2 mr-auto self-center truncate text-sm font-medium text-gray-700 hover:cursor-pointer">
               {user.name}
             </label>
 

packages/features/bookings/components/TeamFilter.tsx

@@ -1,3 +1,5 @@
+import { useSession } from "next-auth/react";
+
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
 import { AnimatedPopover, Avatar, Icon } from "@calcom/ui";
@@ -6,6 +8,7 @@ import { useFilterQuery } from "../lib/useFilterQuery";
 
 export const TeamsMemberFilter = () => {
   const { t } = useLocale();
+  const session = useSession();
   const { data: query, pushItemToKey, removeItemByKeyAndValue, removeByKey } = useFilterQuery();
   const { data } = trpc.viewer.teams.list.useQuery();
 
@@ -17,9 +20,9 @@ export const TeamsMemberFilter = () => {
   return (
     <AnimatedPopover
       text={teamNames && teamNames.length > 0 ? `${teamNames.join(", ")}` : t("all_bookings_filter_label")}>
-      <div className="item-center flex px-4 py-[6px] focus-within:bg-gray-100">
+      <div className="item-center flex px-4 py-[6px] focus-within:bg-gray-100 hover:cursor-pointer hover:bg-gray-50">
         <div className="flex h-6 w-6 items-center justify-center ltr:mr-2 rtl:ml-2">
-          <Icon.FiLayers className="h-full w-full" />
+          <Icon.FiLayers className="h-5 w-5" />
         </div>
         <label
           htmlFor="allBookings"
@@ -30,16 +33,43 @@ export const TeamsMemberFilter = () => {
         <input
           id="allBookings"
           type="checkbox"
-          checked={!query.teamIds}
+          checked={!query.teamIds && !query.userIds?.includes(session.data?.user.id || 0)}
           onChange={() => {
             removeByKey("teamIds"); // Always clear on toggle  or not toggle (seems weird but when you know the behviour it works well )
           }}
           className="text-primary-600 focus:ring-primary-500 inline-flex h-4 w-4 place-self-center justify-self-end rounded border-gray-300 "
         />
       </div>
+      <div className="item-center flex px-4 py-[6px] focus-within:bg-gray-100 hover:cursor-pointer hover:bg-gray-50">
+        <div className="flex h-6 w-6 items-center justify-center ltr:mr-2 rtl:ml-2">
+          <Icon.FiUser className="h-5 w-5" />
+        </div>
+        <label
+          htmlFor="yourBookings"
+          className="mr-auto self-center truncate text-sm font-medium text-gray-700">
+          {t("your_bookings_filter_label")}
+        </label>
+
+        <input
+          id="yourBookings"
+          type="checkbox"
+          disabled={session.status === "loading"}
+          checked={query.userIds?.includes(session.data?.user.id || 0)}
+          onChange={(e) => {
+            if (e.target.checked) {
+              pushItemToKey("userIds", session.data?.user.id || 0);
+            } else if (!e.target.checked) {
+              removeItemByKeyAndValue("userIds", session.data?.user.id || 0);
+            }
+          }}
+          className="text-primary-600 focus:ring-primary-500 inline-flex h-4 w-4 place-self-center justify-self-end rounded border-gray-300 "
+        />
+      </div>
       {data &&
         data.map((team) => (
-          <div className="item-center flex px-4 py-[6px] focus-within:bg-gray-100" key={`${team.id}`}>
+          <div
+            className="item-center flex px-4 py-[6px] focus-within:bg-gray-100 hover:cursor-pointer hover:bg-gray-50"
+            key={`${team.id}`}>
             <Avatar
               imageSrc={team.logo}
               size="sm"
@@ -50,7 +80,7 @@ export const TeamsMemberFilter = () => {
             />
             <label
               htmlFor={team.name}
-              className="ml-2 mr-auto self-center truncate text-sm font-medium text-gray-700">
+              className="ml-2 mr-auto select-none self-center truncate text-sm font-medium text-gray-700 hover:cursor-pointer">
               {team.name}
             </label>
 

packages/trpc/server/routers/viewer/teams.tsx

@@ -661,6 +661,7 @@ export const viewerTeamsRouter = router({
               user: {
                 id: ctx.user.id,
               },
+              accepted: true,
             },
           },
         },

packages/ui/components/popover/AnimatedPopover.tsx

@@ -42,9 +42,9 @@ export const AnimatedPopover = ({
       <Popover.Trigger asChild>
         <div
           ref={ref}
-          className="item-center  mb-2 flex h-9 justify-between whitespace-nowrap rounded-md border border-gray-300 py-2 px-3
-          text-sm placeholder:text-gray-400 hover:cursor-pointer hover:border-gray-400
-          focus:border-neutral-300 focus:outline-none focus:ring-2 focus:ring-neutral-800 focus:ring-offset-1">
+          className="item-center  mb-2 flex h-9 max-h-72 justify-between overflow-y-scroll whitespace-nowrap rounded-md border border-gray-300
+          py-2 px-3 text-sm placeholder:text-gray-400
+          hover:cursor-pointer hover:border-gray-400 focus:border-neutral-300 focus:outline-none focus:ring-2 focus:ring-neutral-800 focus:ring-offset-1">
           <div className="max-w-36 flex items-center">
             <div className="truncate">
               {text}
@@ -61,7 +61,7 @@ export const AnimatedPopover = ({
       <Popover.Content side="bottom" align={align} asChild>
         <div
           className={classNames(
-            "absolute z-50 mt-2 w-56  rounded-md bg-white  shadow-sm ring-1 ring-black ring-opacity-5 focus-within:outline-none",
+            "absolute z-50 mt-2 w-56  rounded-md bg-white  py-[2px] shadow-sm ring-1 ring-black ring-opacity-5 focus-within:outline-none",
             align === "end" && "-translate-x-[228px]"
           )}>
           {children}