From 9dd97a0c1fc0c247b7e4215c2e7f4b939964e326 Mon Sep 17 00:00:00 2001
From: sean-brydon <sean@cal.com>
Date: Tue, 1 Oct 2024 10:40:26 +0100
Subject: [PATCH 01/17] banners

---
 packages/features/shell/Shell.tsx             | 186 +-----------------
 .../features/shell/banners/LayoutBanner.tsx   |  69 +++++++
 packages/features/shell/banners/useBanners.ts |  45 +++++
 3 files changed, 119 insertions(+), 181 deletions(-)
 create mode 100644 packages/features/shell/banners/LayoutBanner.tsx
 create mode 100644 packages/features/shell/banners/useBanners.ts

diff --git a/packages/features/shell/Shell.tsx b/packages/features/shell/Shell.tsx
index 247f443f9805e2..1650a298b10ff0 100644
--- a/packages/features/shell/Shell.tsx
+++ b/packages/features/shell/Shell.tsx
@@ -7,36 +7,14 @@ import type { Dispatch, ReactElement, ReactNode, SetStateAction } from "react";
 import React, { cloneElement, Fragment, useEffect, useMemo, useState } from "react";
 import { Toaster } from "react-hot-toast";
 
-import dayjs from "@calcom/dayjs";
 import { useIsEmbed } from "@calcom/embed-core/embed-iframe";
 import UnconfirmedBookingBadge from "@calcom/features/bookings/UnconfirmedBookingBadge";
-import ImpersonatingBanner, {
-  type ImpersonatingBannerProps,
-} from "@calcom/features/ee/impersonation/components/ImpersonatingBanner";
-import {
-  OrgUpgradeBanner,
-  type OrgUpgradeBannerProps,
-} from "@calcom/features/ee/organizations/components/OrgUpgradeBanner";
 import { getOrgFullOrigin } from "@calcom/features/ee/organizations/lib/orgDomains";
 import HelpMenuItem from "@calcom/features/ee/support/components/HelpMenuItem";
 import useIntercom, { isInterComEnabled } from "@calcom/features/ee/support/lib/intercom/useIntercom";
-import { TeamsUpgradeBanner, type TeamsUpgradeBannerProps } from "@calcom/features/ee/teams/components";
 import { useFlagMap } from "@calcom/features/flags/context/provider";
 import { KBarContent, KBarRoot, KBarTrigger } from "@calcom/features/kbar/Kbar";
 import TimezoneChangeDialog from "@calcom/features/settings/TimezoneChangeDialog";
-import AdminPasswordBanner, {
-  type AdminPasswordBannerProps,
-} from "@calcom/features/users/components/AdminPasswordBanner";
-import CalendarCredentialBanner, {
-  type CalendarCredentialBannerProps,
-} from "@calcom/features/users/components/CalendarCredentialBanner";
-import {
-  InvalidAppCredentialBanners,
-  type InvalidAppCredentialBannersProps,
-} from "@calcom/features/users/components/InvalidAppCredentialsBanner";
-import VerifyEmailBanner, {
-  type VerifyEmailBannerProps,
-} from "@calcom/features/users/components/VerifyEmailBanner";
 import classNames from "@calcom/lib/classNames";
 import {
   APP_NAME,
@@ -46,8 +24,6 @@ import {
   IS_VISUAL_REGRESSION_TESTING,
   JOIN_COMMUNITY,
   ROADMAP,
-  TOP_BANNER_HEIGHT,
-  WEBAPP_URL,
 } from "@calcom/lib/constants";
 import { getPlaceholderAvatar } from "@calcom/lib/defaultAvatarImage";
 import { useFormbricks } from "@calcom/lib/formbricks-client";
@@ -60,9 +36,7 @@ import { useRefreshData } from "@calcom/lib/hooks/useRefreshData";
 import useTheme from "@calcom/lib/hooks/useTheme";
 import { isKeyInObject } from "@calcom/lib/isKeyInObject";
 import { localStorage } from "@calcom/lib/webstorage";
-import type { User } from "@calcom/prisma/client";
 import { trpc } from "@calcom/trpc/react";
-import useEmailVerifyCheck from "@calcom/trpc/react/hooks/useEmailVerifyCheck";
 import useMeQuery from "@calcom/trpc/react/hooks/useMeQuery";
 import {
   Avatar,
@@ -91,133 +65,17 @@ import { useGetUserAttributes } from "@calcom/web/components/settings/platform/h
 import { useOrgBranding } from "../ee/organizations/context/provider";
 import FreshChatProvider from "../ee/support/lib/freshchat/FreshChatProvider";
 import { TeamInviteBadge } from "./TeamInviteBadge";
+import { BannerContainer } from "./banners/LayoutBanner";
+import { useBanners } from "./banners/useBanners";
 
 // need to import without ssr to prevent hydration errors
 const Tips = dynamic(() => import("@calcom/features/tips").then((mod) => mod.Tips), {
   ssr: false,
 });
 
-/* TODO: Migate this */
-
-export const ONBOARDING_INTRODUCED_AT = dayjs("September 1 2021").toISOString();
-
-export const ONBOARDING_NEXT_REDIRECT = {
-  redirect: {
-    permanent: false,
-    destination: "/getting-started",
-  },
-} as const;
-
-export const shouldShowOnboarding = (
-  user: Pick<User, "createdDate" | "completedOnboarding"> & {
-    organizationId: number | null;
-  }
-) => {
-  return (
-    !user.completedOnboarding &&
-    !user.organizationId &&
-    dayjs(user.createdDate).isAfter(ONBOARDING_INTRODUCED_AT)
-  );
-};
-
-function useRedirectToLoginIfUnauthenticated(isPublic = false) {
-  const { data: session, status } = useSession();
-  const loading = status === "loading";
-  const router = useRouter();
-  useEffect(() => {
-    if (isPublic) {
-      return;
-    }
-
-    if (!loading && !session) {
-      const urlSearchParams = new URLSearchParams();
-      urlSearchParams.set("callbackUrl", `${WEBAPP_URL}${location.pathname}${location.search}`);
-      router.replace(`/auth/login?${urlSearchParams.toString()}`);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [loading, session, isPublic]);
-
-  return {
-    loading: loading && !session,
-    session,
-  };
-}
-
-type BannerTypeProps = {
-  teamUpgradeBanner: TeamsUpgradeBannerProps;
-  orgUpgradeBanner: OrgUpgradeBannerProps;
-  verifyEmailBanner: VerifyEmailBannerProps;
-  adminPasswordBanner: AdminPasswordBannerProps;
-  impersonationBanner: ImpersonatingBannerProps;
-  calendarCredentialBanner: CalendarCredentialBannerProps;
-  invalidAppCredentialBanners: InvalidAppCredentialBannersProps;
-};
-
-type BannerType = keyof BannerTypeProps;
-
-type BannerComponent = {
-  [Key in BannerType]: (props: BannerTypeProps[Key]) => JSX.Element;
-};
-
-const BannerComponent: BannerComponent = {
-  teamUpgradeBanner: (props: TeamsUpgradeBannerProps) => <TeamsUpgradeBanner {...props} />,
-  orgUpgradeBanner: (props: OrgUpgradeBannerProps) => <OrgUpgradeBanner {...props} />,
-  verifyEmailBanner: (props: VerifyEmailBannerProps) => <VerifyEmailBanner {...props} />,
-  adminPasswordBanner: (props: AdminPasswordBannerProps) => <AdminPasswordBanner {...props} />,
-  impersonationBanner: (props: ImpersonatingBannerProps) => <ImpersonatingBanner {...props} />,
-  calendarCredentialBanner: (props: CalendarCredentialBannerProps) => <CalendarCredentialBanner {...props} />,
-  invalidAppCredentialBanners: (props: InvalidAppCredentialBannersProps) => (
-    <InvalidAppCredentialBanners {...props} />
-  ),
-};
-
-function useRedirectToOnboardingIfNeeded() {
-  const router = useRouter();
-  const query = useMeQuery();
-  const user = query.data;
-  const flags = useFlagMap();
-
-  const { data: email } = useEmailVerifyCheck();
-
-  const needsEmailVerification = !email?.isVerified && flags["email-verification"];
-
-  const isRedirectingToOnboarding = user && shouldShowOnboarding(user);
-
-  useEffect(() => {
-    if (isRedirectingToOnboarding && !needsEmailVerification) {
-      router.replace("/getting-started");
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isRedirectingToOnboarding, needsEmailVerification]);
-
-  return {
-    isRedirectingToOnboarding,
-  };
-}
-
-type allBannerProps = { [Key in BannerType]: BannerTypeProps[Key]["data"] };
-
-const useBanners = () => {
-  const { data: getUserTopBanners, isPending } = trpc.viewer.getUserTopBanners.useQuery();
-  const { data: userSession } = useSession();
-
-  if (isPending || !userSession) return null;
-
-  const isUserInactiveAdmin = userSession?.user.role === "INACTIVE_ADMIN";
-  const userImpersonatedByUID = userSession?.user.impersonatedBy?.id;
-
-  const userSessionBanners = {
-    adminPasswordBanner: isUserInactiveAdmin ? userSession : null,
-    impersonationBanner: userImpersonatedByUID ? userSession : null,
-  };
-
-  const allBanners: allBannerProps = Object.assign({}, getUserTopBanners, userSessionBanners);
-
-  return allBanners;
-};
-
 const Layout = (props: LayoutProps) => {
-  const banners = useBanners();
+  const { banners, bannersHeight } = useBanners();
+
   const pathname = usePathname();
   const isFullPageWithoutSidebar = pathname?.startsWith("/apps/routing-forms/reporting/");
   const { data: user } = trpc.viewer.me.useQuery();
@@ -232,15 +90,6 @@ const Layout = (props: LayoutProps) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [user]);
 
-  const bannersHeight = useMemo(() => {
-    const activeBanners =
-      banners &&
-      Object.entries(banners).filter(([_, value]) => {
-        return value && (!Array.isArray(value) || value.length > 0);
-      });
-    return (activeBanners?.length ?? 0) * TOP_BANNER_HEIGHT;
-  }, [banners]);
-
   useFormbricks();
 
   return (
@@ -259,32 +108,7 @@ const Layout = (props: LayoutProps) => {
 
       <div className="flex min-h-screen flex-col">
         {banners && !props.isPlatformUser && !isFullPageWithoutSidebar && (
-          <div className="sticky top-0 z-10 w-full divide-y divide-black">
-            {Object.keys(banners).map((key) => {
-              if (key === "teamUpgradeBanner") {
-                const Banner = BannerComponent[key];
-                return <Banner data={banners[key]} key={key} />;
-              } else if (key === "orgUpgradeBanner") {
-                const Banner = BannerComponent[key];
-                return <Banner data={banners[key]} key={key} />;
-              } else if (key === "verifyEmailBanner") {
-                const Banner = BannerComponent[key];
-                return <Banner data={banners[key]} key={key} />;
-              } else if (key === "adminPasswordBanner") {
-                const Banner = BannerComponent[key];
-                return <Banner data={banners[key]} key={key} />;
-              } else if (key === "impersonationBanner") {
-                const Banner = BannerComponent[key];
-                return <Banner data={banners[key]} key={key} />;
-              } else if (key === "calendarCredentialBanner") {
-                const Banner = BannerComponent[key];
-                return <Banner data={banners[key]} key={key} />;
-              } else if (key === "invalidAppCredentialBanners") {
-                const Banner = BannerComponent[key];
-                return <Banner data={banners[key]} key={key} />;
-              }
-            })}
-          </div>
+          <BannerContainer banners={banners} />
         )}
 
         <div className="flex flex-1" data-testid="dashboard-shell">
diff --git a/packages/features/shell/banners/LayoutBanner.tsx b/packages/features/shell/banners/LayoutBanner.tsx
new file mode 100644
index 00000000000000..5a894f427a07ec
--- /dev/null
+++ b/packages/features/shell/banners/LayoutBanner.tsx
@@ -0,0 +1,69 @@
+import ImpersonatingBanner, {
+  type ImpersonatingBannerProps,
+} from "@calcom/features/ee/impersonation/components/ImpersonatingBanner";
+import {
+  OrgUpgradeBanner,
+  type OrgUpgradeBannerProps,
+} from "@calcom/features/ee/organizations/components/OrgUpgradeBanner";
+import { TeamsUpgradeBanner, type TeamsUpgradeBannerProps } from "@calcom/features/ee/teams/components";
+import AdminPasswordBanner, {
+  type AdminPasswordBannerProps,
+} from "@calcom/features/users/components/AdminPasswordBanner";
+import CalendarCredentialBanner, {
+  type CalendarCredentialBannerProps,
+} from "@calcom/features/users/components/CalendarCredentialBanner";
+import {
+  InvalidAppCredentialBanners,
+  type InvalidAppCredentialBannersProps,
+} from "@calcom/features/users/components/InvalidAppCredentialsBanner";
+import VerifyEmailBanner, {
+  type VerifyEmailBannerProps,
+} from "@calcom/features/users/components/VerifyEmailBanner";
+
+type BannerTypeProps = {
+  teamUpgradeBanner: TeamsUpgradeBannerProps;
+  orgUpgradeBanner: OrgUpgradeBannerProps;
+  verifyEmailBanner: VerifyEmailBannerProps;
+  adminPasswordBanner: AdminPasswordBannerProps;
+  impersonationBanner: ImpersonatingBannerProps;
+  calendarCredentialBanner: CalendarCredentialBannerProps;
+  invalidAppCredentialBanners: InvalidAppCredentialBannersProps;
+};
+
+type BannerType = keyof BannerTypeProps;
+
+type BannerComponent = {
+  [Key in BannerType]: (props: BannerTypeProps[Key]) => JSX.Element;
+};
+
+export type AllBannerProps = { [Key in BannerType]: BannerTypeProps[Key]["data"] };
+
+export const BannerComponent: BannerComponent = {
+  teamUpgradeBanner: (props: TeamsUpgradeBannerProps) => <TeamsUpgradeBanner {...props} />,
+  orgUpgradeBanner: (props: OrgUpgradeBannerProps) => <OrgUpgradeBanner {...props} />,
+  verifyEmailBanner: (props: VerifyEmailBannerProps) => <VerifyEmailBanner {...props} />,
+  adminPasswordBanner: (props: AdminPasswordBannerProps) => <AdminPasswordBanner {...props} />,
+  impersonationBanner: (props: ImpersonatingBannerProps) => <ImpersonatingBanner {...props} />,
+  calendarCredentialBanner: (props: CalendarCredentialBannerProps) => <CalendarCredentialBanner {...props} />,
+  invalidAppCredentialBanners: (props: InvalidAppCredentialBannersProps) => (
+    <InvalidAppCredentialBanners {...props} />
+  ),
+};
+
+interface BannerContainerProps {
+  banners: AllBannerProps;
+}
+
+export const BannerContainer: React.FC<BannerContainerProps> = ({ banners }) => {
+  return (
+    <div className="sticky top-0 z-10 w-full divide-y divide-black">
+      {Object.entries(banners).map(([key, data]) => {
+        const BannerComponentToRender = BannerComponent[key as BannerType];
+        if (BannerComponentToRender) {
+          return <BannerComponentToRender key={key} data={data} />;
+        }
+        return null;
+      })}
+    </div>
+  );
+};
diff --git a/packages/features/shell/banners/useBanners.ts b/packages/features/shell/banners/useBanners.ts
new file mode 100644
index 00000000000000..a1511b547a614b
--- /dev/null
+++ b/packages/features/shell/banners/useBanners.ts
@@ -0,0 +1,45 @@
+import { useSession } from "next-auth/react";
+
+import { trpc } from "@calcom/trpc/react";
+
+import { type AllBannerProps } from "./LayoutBanner";
+
+const _useBanners = () => {
+  const { data: getUserTopBanners, isPending } = trpc.viewer.getUserTopBanners.useQuery();
+  const { data: userSession } = useSession();
+
+  if (isPending || !userSession) return null;
+
+  const isUserInactiveAdmin = userSession?.user.role === "INACTIVE_ADMIN";
+  const userImpersonatedByUID = userSession?.user.impersonatedBy?.id;
+
+  const userSessionBanners = {
+    adminPasswordBanner: isUserInactiveAdmin ? userSession : null,
+    impersonationBanner: userImpersonatedByUID ? userSession : null,
+  };
+
+  const allBanners: AllBannerProps = Object.assign({}, getUserTopBanners, userSessionBanners);
+
+  return allBanners;
+};
+
+const useBannersHeight = (banners: AllBannerProps) => {
+  const bannersHeight = useMemo(() => {
+    const activeBanners =
+      banners &&
+      Object.entries(banners).filter(([_, value]) => {
+        return value && (!Array.isArray(value) || value.length > 0);
+      });
+    return (activeBanners?.length ?? 0) * TOP_BANNER_HEIGHT;
+  }, [banners]);
+
+  return bannersHeight;
+};
+
+const useBanners = () => {
+  const banners = _useBanners();
+  const bannersHeight = useBannersHeight(banners);
+  return { banners, bannersHeight };
+};
+
+export { useBanners, useBannersHeight };

From bf1174a09f5ea212c4b7c190bcfd8b9f500df4c9 Mon Sep 17 00:00:00 2001
From: sean-brydon <sean@cal.com>
Date: Tue, 1 Oct 2024 10:40:40 +0100
Subject: [PATCH 02/17] useAuthHooks

---
 .../useRedirectToLoginIfUnauthenticated.tsx   | 26 ++++++++++
 .../hooks/useRedirectToOnboardingIfNeeded.tsx | 50 +++++++++++++++++++
 2 files changed, 76 insertions(+)
 create mode 100644 packages/features/auth/lib/hooks/useRedirectToLoginIfUnauthenticated.tsx
 create mode 100644 packages/features/auth/lib/hooks/useRedirectToOnboardingIfNeeded.tsx

diff --git a/packages/features/auth/lib/hooks/useRedirectToLoginIfUnauthenticated.tsx b/packages/features/auth/lib/hooks/useRedirectToLoginIfUnauthenticated.tsx
new file mode 100644
index 00000000000000..cba5f53438c73b
--- /dev/null
+++ b/packages/features/auth/lib/hooks/useRedirectToLoginIfUnauthenticated.tsx
@@ -0,0 +1,26 @@
+import { useSession } from "next-auth/react";
+import { useRouter } from "next/navigation";
+import { useEffect } from "react";
+
+export function useRedirectToLoginIfUnauthenticated(isPublic = false) {
+  const { data: session, status } = useSession();
+  const loading = status === "loading";
+  const router = useRouter();
+  useEffect(() => {
+    if (isPublic) {
+      return;
+    }
+
+    if (!loading && !session) {
+      const urlSearchParams = new URLSearchParams();
+      urlSearchParams.set("callbackUrl", `${WEBAPP_URL}${location.pathname}${location.search}`);
+      router.replace(`/auth/login?${urlSearchParams.toString()}`);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [loading, session, isPublic]);
+
+  return {
+    loading: loading && !session,
+    session,
+  };
+}
diff --git a/packages/features/auth/lib/hooks/useRedirectToOnboardingIfNeeded.tsx b/packages/features/auth/lib/hooks/useRedirectToOnboardingIfNeeded.tsx
new file mode 100644
index 00000000000000..efaa5a4b5a270b
--- /dev/null
+++ b/packages/features/auth/lib/hooks/useRedirectToOnboardingIfNeeded.tsx
@@ -0,0 +1,50 @@
+import { useRouter } from "next/navigation";
+
+import { useEmailVerifyCheck } from "@calcom/features/auth/lib/hooks/useEmailVerifyCheck";
+import { useFlagMap } from "@calcom/features/ee/flags/useFlags";
+import { useMeQuery } from "@calcom/trpc/react";
+
+const shouldShowOnboarding = (
+  user: Pick<User, "createdDate" | "completedOnboarding"> & {
+    organizationId: number | null;
+  }
+) => {
+  return (
+    !user.completedOnboarding &&
+    !user.organizationId &&
+    dayjs(user.createdDate).isAfter(ONBOARDING_INTRODUCED_AT)
+  );
+};
+
+export const ONBOARDING_INTRODUCED_AT = dayjs("September 1 2021").toISOString();
+
+export const ONBOARDING_NEXT_REDIRECT = {
+  redirect: {
+    permanent: false,
+    destination: "/getting-started",
+  },
+} as const;
+
+export function useRedirectToOnboardingIfNeeded() {
+  const router = useRouter();
+  const query = useMeQuery();
+  const user = query.data;
+  const flags = useFlagMap();
+
+  const { data: email } = useEmailVerifyCheck();
+
+  const needsEmailVerification = !email?.isVerified && flags["email-verification"];
+
+  const isRedirectingToOnboarding = user && shouldShowOnboarding(user);
+
+  useEffect(() => {
+    if (isRedirectingToOnboarding && !needsEmailVerification) {
+      router.replace("/getting-started");
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isRedirectingToOnboarding, needsEmailVerification]);
+
+  return {
+    isRedirectingToOnboarding,
+  };
+}

From 3b7cf1753318cca8fd4f27b8f7cafc5ea568e484 Mon Sep 17 00:00:00 2001
From: sean-brydon <sean@cal.com>
Date: Tue, 1 Oct 2024 10:55:09 +0100
Subject: [PATCH 03/17] fixes to redirect and banner

---
 .../lib/hooks/useRedirectToLoginIfUnauthenticated.tsx     | 2 ++
 .../auth/lib/hooks/useRedirectToOnboardingIfNeeded.tsx    | 8 +++++---
 packages/features/shell/banners/useBanners.ts             | 2 ++
 3 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/packages/features/auth/lib/hooks/useRedirectToLoginIfUnauthenticated.tsx b/packages/features/auth/lib/hooks/useRedirectToLoginIfUnauthenticated.tsx
index cba5f53438c73b..84cb2afdd9b68c 100644
--- a/packages/features/auth/lib/hooks/useRedirectToLoginIfUnauthenticated.tsx
+++ b/packages/features/auth/lib/hooks/useRedirectToLoginIfUnauthenticated.tsx
@@ -2,6 +2,8 @@ import { useSession } from "next-auth/react";
 import { useRouter } from "next/navigation";
 import { useEffect } from "react";
 
+import { WEBAPP_URL } from "@calcom/lib/constants";
+
 export function useRedirectToLoginIfUnauthenticated(isPublic = false) {
   const { data: session, status } = useSession();
   const loading = status === "loading";
diff --git a/packages/features/auth/lib/hooks/useRedirectToOnboardingIfNeeded.tsx b/packages/features/auth/lib/hooks/useRedirectToOnboardingIfNeeded.tsx
index efaa5a4b5a270b..41daddf8117343 100644
--- a/packages/features/auth/lib/hooks/useRedirectToOnboardingIfNeeded.tsx
+++ b/packages/features/auth/lib/hooks/useRedirectToOnboardingIfNeeded.tsx
@@ -1,8 +1,10 @@
 import { useRouter } from "next/navigation";
+import { useEffect } from "react";
 
-import { useEmailVerifyCheck } from "@calcom/features/auth/lib/hooks/useEmailVerifyCheck";
-import { useFlagMap } from "@calcom/features/ee/flags/useFlags";
-import { useMeQuery } from "@calcom/trpc/react";
+import dayjs from "@calcom/dayjs";
+import { useFlagMap } from "@calcom/features/flags/context/provider";
+import { useEmailVerifyCheck } from "@calcom/trpc/react/hooks/useEmailVerifyCheck";
+import useMeQuery from "@calcom/trpc/react/hooks/useMeQuery";
 
 const shouldShowOnboarding = (
   user: Pick<User, "createdDate" | "completedOnboarding"> & {
diff --git a/packages/features/shell/banners/useBanners.ts b/packages/features/shell/banners/useBanners.ts
index a1511b547a614b..0aab3d66672072 100644
--- a/packages/features/shell/banners/useBanners.ts
+++ b/packages/features/shell/banners/useBanners.ts
@@ -1,5 +1,7 @@
 import { useSession } from "next-auth/react";
+import { useMemo } from "react";
 
+import { TOP_BANNER_HEIGHT } from "@calcom/lib/constants";
 import { trpc } from "@calcom/trpc/react";
 
 import { type AllBannerProps } from "./LayoutBanner";

From d76be7b868e2058df0cf56d7a8650967a95f6a4f Mon Sep 17 00:00:00 2001
From: sean-brydon <sean@cal.com>
Date: Tue, 1 Oct 2024 10:55:55 +0100
Subject: [PATCH 04/17] extract useIntercom to custom hook

---
 .../ee/support/lib/intercom/useIntercom.ts       | 13 +++++++++++++
 packages/features/shell/Shell.tsx                | 16 ++++------------
 2 files changed, 17 insertions(+), 12 deletions(-)

diff --git a/packages/features/ee/support/lib/intercom/useIntercom.ts b/packages/features/ee/support/lib/intercom/useIntercom.ts
index b87367836f7c1b..a24d68c0ad47b5 100644
--- a/packages/features/ee/support/lib/intercom/useIntercom.ts
+++ b/packages/features/ee/support/lib/intercom/useIntercom.ts
@@ -1,5 +1,6 @@
 // eslint-disable-next-line no-restricted-imports
 import { noop } from "lodash";
+import { useEffect } from "react";
 import { useIntercom as useIntercomLib } from "react-use-intercom";
 import { z } from "zod";
 
@@ -117,4 +118,16 @@ export const useIntercom = () => {
   return { ...hookData, open, boot };
 };
 
+export const useBootIntercom = () => {
+  const { boot } = useIntercom();
+  const { data: user } = trpc.viewer.me.useQuery();
+  useEffect(() => {
+    // not using useMediaQuery as it toggles between true and false
+    const showIntercom = localStorage.getItem("showIntercom");
+    if (!isInterComEnabled || showIntercom === "false" || window.innerWidth <= 768 || !user) return;
+    boot();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [user]);
+};
+
 export default useIntercom;
diff --git a/packages/features/shell/Shell.tsx b/packages/features/shell/Shell.tsx
index 1650a298b10ff0..b0c43dcd984331 100644
--- a/packages/features/shell/Shell.tsx
+++ b/packages/features/shell/Shell.tsx
@@ -8,10 +8,12 @@ import React, { cloneElement, Fragment, useEffect, useMemo, useState } from "rea
 import { Toaster } from "react-hot-toast";
 
 import { useIsEmbed } from "@calcom/embed-core/embed-iframe";
+import { useRedirectToLoginIfUnauthenticated } from "@calcom/features/auth/lib/hooks/useRedirectToLoginIfUnauthenticated";
+import { useRedirectToOnboardingIfNeeded } from "@calcom/features/auth/lib/hooks/useRedirectToOnboardingIfNeeded";
 import UnconfirmedBookingBadge from "@calcom/features/bookings/UnconfirmedBookingBadge";
 import { getOrgFullOrigin } from "@calcom/features/ee/organizations/lib/orgDomains";
 import HelpMenuItem from "@calcom/features/ee/support/components/HelpMenuItem";
-import useIntercom, { isInterComEnabled } from "@calcom/features/ee/support/lib/intercom/useIntercom";
+import { useBootIntercom } from "@calcom/features/ee/support/lib/intercom/useIntercom";
 import { useFlagMap } from "@calcom/features/flags/context/provider";
 import { KBarContent, KBarRoot, KBarTrigger } from "@calcom/features/kbar/Kbar";
 import TimezoneChangeDialog from "@calcom/features/settings/TimezoneChangeDialog";
@@ -35,7 +37,6 @@ import { ButtonState, useNotifications } from "@calcom/lib/hooks/useNotification
 import { useRefreshData } from "@calcom/lib/hooks/useRefreshData";
 import useTheme from "@calcom/lib/hooks/useTheme";
 import { isKeyInObject } from "@calcom/lib/isKeyInObject";
-import { localStorage } from "@calcom/lib/webstorage";
 import { trpc } from "@calcom/trpc/react";
 import useMeQuery from "@calcom/trpc/react/hooks/useMeQuery";
 import {
@@ -78,18 +79,9 @@ const Layout = (props: LayoutProps) => {
 
   const pathname = usePathname();
   const isFullPageWithoutSidebar = pathname?.startsWith("/apps/routing-forms/reporting/");
-  const { data: user } = trpc.viewer.me.useQuery();
-  const { boot } = useIntercom();
   const pageTitle = typeof props.heading === "string" && !props.title ? props.heading : props.title;
 
-  useEffect(() => {
-    // not using useMediaQuery as it toggles between true and false
-    const showIntercom = localStorage.getItem("showIntercom");
-    if (!isInterComEnabled || showIntercom === "false" || window.innerWidth <= 768 || !user) return;
-    boot();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [user]);
-
+  useBootIntercom();
   useFormbricks();
 
   return (

From 71dd810a49fe9a62a8c47028f8c5533db3d9ac79 Mon Sep 17 00:00:00 2001
From: sean-brydon <sean@cal.com>
Date: Tue, 1 Oct 2024 10:59:16 +0100
Subject: [PATCH 05/17] use app theme

---
 .../ee/support/lib/intercom/useIntercom.ts         |  1 +
 packages/features/shell/Shell.tsx                  | 14 +-------------
 packages/features/shell/useAppTheme.ts             | 14 ++++++++++++++
 3 files changed, 16 insertions(+), 13 deletions(-)
 create mode 100644 packages/features/shell/useAppTheme.ts

diff --git a/packages/features/ee/support/lib/intercom/useIntercom.ts b/packages/features/ee/support/lib/intercom/useIntercom.ts
index a24d68c0ad47b5..d639137feb644a 100644
--- a/packages/features/ee/support/lib/intercom/useIntercom.ts
+++ b/packages/features/ee/support/lib/intercom/useIntercom.ts
@@ -7,6 +7,7 @@ import { z } from "zod";
 import dayjs from "@calcom/dayjs";
 import { WEBAPP_URL, WEBSITE_URL } from "@calcom/lib/constants";
 import { useHasTeamPlan, useHasPaidPlan } from "@calcom/lib/hooks/useHasPaidPlan";
+import { localStorage } from "@calcom/lib/webstorage";
 import { trpc } from "@calcom/trpc/react";
 
 // eslint-disable-next-line turbo/no-undeclared-env-vars
diff --git a/packages/features/shell/Shell.tsx b/packages/features/shell/Shell.tsx
index b0c43dcd984331..011e6406c0f54d 100644
--- a/packages/features/shell/Shell.tsx
+++ b/packages/features/shell/Shell.tsx
@@ -29,13 +29,11 @@ import {
 } from "@calcom/lib/constants";
 import { getPlaceholderAvatar } from "@calcom/lib/defaultAvatarImage";
 import { useFormbricks } from "@calcom/lib/formbricks-client";
-import getBrandColours from "@calcom/lib/getBrandColours";
 import { useBookerUrl } from "@calcom/lib/hooks/useBookerUrl";
 import { useCopy } from "@calcom/lib/hooks/useCopy";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { ButtonState, useNotifications } from "@calcom/lib/hooks/useNotifications";
 import { useRefreshData } from "@calcom/lib/hooks/useRefreshData";
-import useTheme from "@calcom/lib/hooks/useTheme";
 import { isKeyInObject } from "@calcom/lib/isKeyInObject";
 import { trpc } from "@calcom/trpc/react";
 import useMeQuery from "@calcom/trpc/react/hooks/useMeQuery";
@@ -58,7 +56,6 @@ import {
   showToast,
   SkeletonText,
   Tooltip,
-  useCalcomTheme,
   type IconName,
 } from "@calcom/ui";
 import { useGetUserAttributes } from "@calcom/web/components/settings/platform/hooks/useGetUserAttributes";
@@ -68,6 +65,7 @@ import FreshChatProvider from "../ee/support/lib/freshchat/FreshChatProvider";
 import { TeamInviteBadge } from "./TeamInviteBadge";
 import { BannerContainer } from "./banners/LayoutBanner";
 import { useBanners } from "./banners/useBanners";
+import { useAppTheme } from "./useAppTheme";
 
 // need to import without ssr to prevent hydration errors
 const Tips = dynamic(() => import("@calcom/features/tips").then((mod) => mod.Tips), {
@@ -151,16 +149,6 @@ export type LayoutProps = {
   isPlatformUser?: boolean;
 };
 
-const useAppTheme = () => {
-  const { data: user } = useMeQuery();
-  const brandTheme = getBrandColours({
-    lightVal: user?.brandColor,
-    darkVal: user?.darkBrandColor,
-  });
-  useCalcomTheme(brandTheme);
-  useTheme(user?.appTheme);
-};
-
 const KBarWrapper = ({ children, withKBar = false }: { withKBar: boolean; children: React.ReactNode }) =>
   withKBar ? (
     <KBarRoot>
diff --git a/packages/features/shell/useAppTheme.ts b/packages/features/shell/useAppTheme.ts
new file mode 100644
index 00000000000000..c608ab8858e37e
--- /dev/null
+++ b/packages/features/shell/useAppTheme.ts
@@ -0,0 +1,14 @@
+import getBrandColours from "@calcom/lib/getBrandColours";
+import useTheme from "@calcom/lib/hooks/useTheme";
+import useMeQuery from "@calcom/trpc/react/hooks/useMeQuery";
+import { useCalcomTheme } from "@calcom/ui";
+
+export const useAppTheme = () => {
+  const { data: user } = useMeQuery();
+  const brandTheme = getBrandColours({
+    lightVal: user?.brandColor,
+    darkVal: user?.darkBrandColor,
+  });
+  useCalcomTheme(brandTheme);
+  useTheme(user?.appTheme);
+};

From de537c3b52f8911ed6a6245d81b3a8c14ad012c3 Mon Sep 17 00:00:00 2001
From: sean-brydon <sean@cal.com>
Date: Tue, 1 Oct 2024 11:05:51 +0100
Subject: [PATCH 06/17] extract user-dropdown to new component

---
 packages/features/shell/Shell.tsx             | 212 +----------------
 .../shell/user-dropdown/UserDropdown.tsx      | 217 ++++++++++++++++++
 2 files changed, 220 insertions(+), 209 deletions(-)
 create mode 100644 packages/features/shell/user-dropdown/UserDropdown.tsx

diff --git a/packages/features/shell/Shell.tsx b/packages/features/shell/Shell.tsx
index 011e6406c0f54d..0f1ae24d718d9f 100644
--- a/packages/features/shell/Shell.tsx
+++ b/packages/features/shell/Shell.tsx
@@ -1,10 +1,10 @@
 import type { User as UserAuth } from "next-auth";
-import { signOut, useSession } from "next-auth/react";
+import { useSession } from "next-auth/react";
 import dynamic from "next/dynamic";
 import Link from "next/link";
 import { usePathname, useRouter } from "next/navigation";
 import type { Dispatch, ReactElement, ReactNode, SetStateAction } from "react";
-import React, { cloneElement, Fragment, useEffect, useMemo, useState } from "react";
+import React, { cloneElement, Fragment, useMemo, useState } from "react";
 import { Toaster } from "react-hot-toast";
 
 import { useIsEmbed } from "@calcom/embed-core/embed-iframe";
@@ -12,7 +12,6 @@ import { useRedirectToLoginIfUnauthenticated } from "@calcom/features/auth/lib/h
 import { useRedirectToOnboardingIfNeeded } from "@calcom/features/auth/lib/hooks/useRedirectToOnboardingIfNeeded";
 import UnconfirmedBookingBadge from "@calcom/features/bookings/UnconfirmedBookingBadge";
 import { getOrgFullOrigin } from "@calcom/features/ee/organizations/lib/orgDomains";
-import HelpMenuItem from "@calcom/features/ee/support/components/HelpMenuItem";
 import { useBootIntercom } from "@calcom/features/ee/support/lib/intercom/useIntercom";
 import { useFlagMap } from "@calcom/features/flags/context/provider";
 import { KBarContent, KBarRoot, KBarTrigger } from "@calcom/features/kbar/Kbar";
@@ -20,23 +19,18 @@ import TimezoneChangeDialog from "@calcom/features/settings/TimezoneChangeDialog
 import classNames from "@calcom/lib/classNames";
 import {
   APP_NAME,
-  DESKTOP_APP_LINK,
   ENABLE_PROFILE_SWITCHER,
   IS_CALCOM,
   IS_VISUAL_REGRESSION_TESTING,
-  JOIN_COMMUNITY,
-  ROADMAP,
 } from "@calcom/lib/constants";
 import { getPlaceholderAvatar } from "@calcom/lib/defaultAvatarImage";
 import { useFormbricks } from "@calcom/lib/formbricks-client";
-import { useBookerUrl } from "@calcom/lib/hooks/useBookerUrl";
 import { useCopy } from "@calcom/lib/hooks/useCopy";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { ButtonState, useNotifications } from "@calcom/lib/hooks/useNotifications";
 import { useRefreshData } from "@calcom/lib/hooks/useRefreshData";
 import { isKeyInObject } from "@calcom/lib/isKeyInObject";
 import { trpc } from "@calcom/trpc/react";
-import useMeQuery from "@calcom/trpc/react/hooks/useMeQuery";
 import {
   Avatar,
   Button,
@@ -47,7 +41,6 @@ import {
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuPortal,
-  DropdownMenuSeparator,
   DropdownMenuTrigger,
   ErrorBoundary,
   HeadSeo,
@@ -58,14 +51,13 @@ import {
   Tooltip,
   type IconName,
 } from "@calcom/ui";
-import { useGetUserAttributes } from "@calcom/web/components/settings/platform/hooks/useGetUserAttributes";
 
 import { useOrgBranding } from "../ee/organizations/context/provider";
-import FreshChatProvider from "../ee/support/lib/freshchat/FreshChatProvider";
 import { TeamInviteBadge } from "./TeamInviteBadge";
 import { BannerContainer } from "./banners/LayoutBanner";
 import { useBanners } from "./banners/useBanners";
 import { useAppTheme } from "./useAppTheme";
+import { UserDropdown } from "./user-dropdown/UserDropdown";
 
 // need to import without ssr to prevent hydration errors
 const Tips = dynamic(() => import("@calcom/features/tips").then((mod) => mod.Tips), {
@@ -74,7 +66,6 @@ const Tips = dynamic(() => import("@calcom/features/tips").then((mod) => mod.Tip
 
 const Layout = (props: LayoutProps) => {
   const { banners, bannersHeight } = useBanners();
-
   const pathname = usePathname();
   const isFullPageWithoutSidebar = pathname?.startsWith("/apps/routing-forms/reporting/");
   const pageTitle = typeof props.heading === "string" && !props.title ? props.heading : props.title;
@@ -183,203 +174,6 @@ export default function Shell(props: LayoutProps) {
   );
 }
 
-interface UserDropdownProps {
-  small?: boolean;
-}
-
-function UserDropdown({ small }: UserDropdownProps) {
-  const { isPlatformUser } = useGetUserAttributes();
-  const { t } = useLocale();
-  const { data: user } = useMeQuery();
-  const utils = trpc.useUtils();
-  const bookerUrl = useBookerUrl();
-  const pathname = usePathname();
-  const isPlatformPages = pathname?.startsWith("/settings/platform");
-  useEffect(() => {
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    //@ts-ignore
-    const Beacon = window.Beacon;
-    // window.Beacon is defined when user actually opens up HelpScout and username is available here. On every re-render update session info, so that it is always latest.
-    Beacon &&
-      Beacon("session-data", {
-        username: user?.username || "Unknown",
-        screenResolution: `${screen.width}x${screen.height}`,
-      });
-  });
-
-  const [helpOpen, setHelpOpen] = useState(false);
-  const [menuOpen, setMenuOpen] = useState(false);
-
-  const onHelpItemSelect = () => {
-    setHelpOpen(false);
-    setMenuOpen(false);
-  };
-
-  // Prevent rendering dropdown if user isn't available.
-  // We don't want to show nameless user.
-  if (!user) {
-    return null;
-  }
-
-  return (
-    <Dropdown open={menuOpen}>
-      <DropdownMenuTrigger asChild onClick={() => setMenuOpen((menuOpen) => !menuOpen)}>
-        <button
-          data-testid="user-dropdown-trigger-button"
-          className={classNames(
-            "hover:bg-emphasis todesktop:!bg-transparent group mx-0 flex w-full cursor-pointer appearance-none items-center rounded-full text-left outline-none transition focus:outline-none focus:ring-0 md:rounded-none lg:rounded",
-            small ? "p-2" : "px-2 py-1.5"
-          )}>
-          <span
-            className={classNames(
-              small ? "h-4 w-4" : "h-5 w-5 ltr:mr-2 rtl:ml-2",
-              "relative flex-shrink-0 rounded-full "
-            )}>
-            <Avatar
-              size={small ? "xs" : "xsm"}
-              imageSrc={`${user.avatarUrl || user.avatar}`}
-              alt={user.username || "Nameless User"}
-              className="overflow-hidden"
-            />
-            <span
-              className={classNames(
-                "border-muted absolute -bottom-1 -right-1 rounded-full border bg-green-500",
-                small ? "-bottom-0.5 -right-0.5 h-2.5 w-2.5" : "-bottom-0.5 -right-0 h-2 w-2"
-              )}
-            />
-          </span>
-          {!small && (
-            <span className="flex flex-grow items-center gap-2">
-              <span className="w-24 flex-shrink-0 text-sm leading-none">
-                <span className="text-emphasis block truncate font-medium">
-                  {user.name || "Nameless User"}
-                </span>
-              </span>
-              <Icon
-                name="chevron-down"
-                className="group-hover:text-subtle text-muted h-4 w-4 flex-shrink-0 transition rtl:mr-4"
-                aria-hidden="true"
-              />
-            </span>
-          )}
-        </button>
-      </DropdownMenuTrigger>
-
-      <DropdownMenuPortal>
-        <FreshChatProvider>
-          <DropdownMenuContent
-            align="start"
-            onInteractOutside={() => {
-              setMenuOpen(false);
-              setHelpOpen(false);
-            }}
-            className="group overflow-hidden rounded-md">
-            {helpOpen ? (
-              <HelpMenuItem onHelpItemSelect={() => onHelpItemSelect()} />
-            ) : (
-              <>
-                {!isPlatformPages && (
-                  <>
-                    <DropdownMenuItem>
-                      <DropdownItem
-                        type="button"
-                        CustomStartIcon={
-                          <Icon name="user" className="text-default h-4 w-4" aria-hidden="true" />
-                        }
-                        href="/settings/my-account/profile">
-                        {t("my_profile")}
-                      </DropdownItem>
-                    </DropdownMenuItem>
-                    <DropdownMenuItem>
-                      <DropdownItem
-                        type="button"
-                        CustomStartIcon={
-                          <Icon name="settings" className="text-default h-4 w-4" aria-hidden="true" />
-                        }
-                        href="/settings/my-account/general">
-                        {t("my_settings")}
-                      </DropdownItem>
-                    </DropdownMenuItem>
-                    <DropdownMenuItem>
-                      <DropdownItem
-                        type="button"
-                        CustomStartIcon={
-                          <Icon name="moon" className="text-default h-4 w-4" aria-hidden="true" />
-                        }
-                        href="/settings/my-account/out-of-office">
-                        {t("out_of_office")}
-                      </DropdownItem>
-                    </DropdownMenuItem>
-                    <DropdownMenuSeparator />
-                  </>
-                )}
-
-                <DropdownMenuItem>
-                  <DropdownItem
-                    StartIcon="messages-square"
-                    target="_blank"
-                    rel="noreferrer"
-                    href={JOIN_COMMUNITY}>
-                    {t("join_our_community")}
-                  </DropdownItem>
-                </DropdownMenuItem>
-                <DropdownMenuItem>
-                  <DropdownItem StartIcon="map" target="_blank" href={ROADMAP}>
-                    {t("visit_roadmap")}
-                  </DropdownItem>
-                </DropdownMenuItem>
-                <DropdownMenuItem>
-                  <DropdownItem
-                    type="button"
-                    StartIcon="circle-help"
-                    aria-hidden="true"
-                    onClick={() => setHelpOpen(true)}>
-                    {t("help")}
-                  </DropdownItem>
-                </DropdownMenuItem>
-                {!isPlatformPages && (
-                  <DropdownMenuItem className="todesktop:hidden hidden lg:flex">
-                    <DropdownItem
-                      StartIcon="download"
-                      target="_blank"
-                      rel="noreferrer"
-                      href={DESKTOP_APP_LINK}>
-                      {t("download_desktop_app")}
-                    </DropdownItem>
-                  </DropdownMenuItem>
-                )}
-
-                {!isPlatformPages && isPlatformUser && (
-                  <DropdownMenuItem className="todesktop:hidden hidden lg:flex">
-                    <DropdownItem
-                      StartIcon="blocks"
-                      target="_blank"
-                      rel="noreferrer"
-                      href="/settings/platform">
-                      Platform
-                    </DropdownItem>
-                  </DropdownMenuItem>
-                )}
-                <DropdownMenuSeparator />
-
-                <DropdownMenuItem>
-                  <DropdownItem
-                    type="button"
-                    StartIcon="log-out"
-                    aria-hidden="true"
-                    onClick={() => signOut({ callbackUrl: "/auth/logout" })}>
-                    {t("sign_out")}
-                  </DropdownItem>
-                </DropdownMenuItem>
-              </>
-            )}
-          </DropdownMenuContent>
-        </FreshChatProvider>
-      </DropdownMenuPortal>
-    </Dropdown>
-  );
-}
-
 export type NavigationItemType = {
   name: string;
   href: string;
diff --git a/packages/features/shell/user-dropdown/UserDropdown.tsx b/packages/features/shell/user-dropdown/UserDropdown.tsx
new file mode 100644
index 00000000000000..696766dee4013f
--- /dev/null
+++ b/packages/features/shell/user-dropdown/UserDropdown.tsx
@@ -0,0 +1,217 @@
+import { usePathname } from "next/navigation";
+import { useEffect, useState } from "react";
+
+import HelpMenuItem from "@calcom/features/ee/support/components/HelpMenuItem";
+import { classNames } from "@calcom/lib";
+import { JOIN_COMMUNITY, ROADMAP, DESKTOP_APP_LINK } from "@calcom/lib/constants";
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import useMeQuery from "@calcom/trpc/react/hooks/useMeQuery";
+import {
+  Avatar,
+  Dropdown,
+  DropdownItem,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuPortal,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+  Icon,
+} from "@calcom/ui";
+// TODO (Platform): we shouldnt be importing from web here
+import { useGetUserAttributes } from "@calcom/web/components/settings/platform/hooks/useGetUserAttributes";
+
+import FreshChatProvider from "../../ee/support/lib/freshchat/FreshChatProvider";
+
+interface UserDropdownProps {
+  small?: boolean;
+}
+export function UserDropdown({ small }: UserDropdownProps) {
+  const { isPlatformUser } = useGetUserAttributes();
+  const { t } = useLocale();
+  const { data: user } = useMeQuery();
+  const pathname = usePathname();
+  const isPlatformPages = pathname?.startsWith("/settings/platform");
+  useEffect(() => {
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    //@ts-ignore
+    const Beacon = window.Beacon;
+    // window.Beacon is defined when user actually opens up HelpScout and username is available here. On every re-render update session info, so that it is always latest.
+    Beacon &&
+      Beacon("session-data", {
+        username: user?.username || "Unknown",
+        screenResolution: `${screen.width}x${screen.height}`,
+      });
+  });
+
+  const [helpOpen, setHelpOpen] = useState(false);
+  const [menuOpen, setMenuOpen] = useState(false);
+
+  const onHelpItemSelect = () => {
+    setHelpOpen(false);
+    setMenuOpen(false);
+  };
+
+  // Prevent rendering dropdown if user isn't available.
+  // We don't want to show nameless user.
+  if (!user) {
+    return null;
+  }
+
+  return (
+    <Dropdown open={menuOpen}>
+      <DropdownMenuTrigger asChild onClick={() => setMenuOpen((menuOpen) => !menuOpen)}>
+        <button
+          data-testid="user-dropdown-trigger-button"
+          className={classNames(
+            "hover:bg-emphasis todesktop:!bg-transparent group mx-0 flex w-full cursor-pointer appearance-none items-center rounded-full text-left outline-none transition focus:outline-none focus:ring-0 md:rounded-none lg:rounded",
+            small ? "p-2" : "px-2 py-1.5"
+          )}>
+          <span
+            className={classNames(
+              small ? "h-4 w-4" : "h-5 w-5 ltr:mr-2 rtl:ml-2",
+              "relative flex-shrink-0 rounded-full "
+            )}>
+            <Avatar
+              size={small ? "xs" : "xsm"}
+              imageSrc={`${user.avatarUrl || user.avatar}`}
+              alt={user.username || "Nameless User"}
+              className="overflow-hidden"
+            />
+            <span
+              className={classNames(
+                "border-muted absolute -bottom-1 -right-1 rounded-full border bg-green-500",
+                small ? "-bottom-0.5 -right-0.5 h-2.5 w-2.5" : "-bottom-0.5 -right-0 h-2 w-2"
+              )}
+            />
+          </span>
+          {!small && (
+            <span className="flex flex-grow items-center gap-2">
+              <span className="w-24 flex-shrink-0 text-sm leading-none">
+                <span className="text-emphasis block truncate font-medium">
+                  {user.name || "Nameless User"}
+                </span>
+              </span>
+              <Icon
+                name="chevron-down"
+                className="group-hover:text-subtle text-muted h-4 w-4 flex-shrink-0 transition rtl:mr-4"
+                aria-hidden="true"
+              />
+            </span>
+          )}
+        </button>
+      </DropdownMenuTrigger>
+
+      <DropdownMenuPortal>
+        <FreshChatProvider>
+          <DropdownMenuContent
+            align="start"
+            onInteractOutside={() => {
+              setMenuOpen(false);
+              setHelpOpen(false);
+            }}
+            className="group overflow-hidden rounded-md">
+            {helpOpen ? (
+              <HelpMenuItem onHelpItemSelect={() => onHelpItemSelect()} />
+            ) : (
+              <>
+                {!isPlatformPages && (
+                  <>
+                    <DropdownMenuItem>
+                      <DropdownItem
+                        type="button"
+                        CustomStartIcon={
+                          <Icon name="user" className="text-default h-4 w-4" aria-hidden="true" />
+                        }
+                        href="/settings/my-account/profile">
+                        {t("my_profile")}
+                      </DropdownItem>
+                    </DropdownMenuItem>
+                    <DropdownMenuItem>
+                      <DropdownItem
+                        type="button"
+                        CustomStartIcon={
+                          <Icon name="settings" className="text-default h-4 w-4" aria-hidden="true" />
+                        }
+                        href="/settings/my-account/general">
+                        {t("my_settings")}
+                      </DropdownItem>
+                    </DropdownMenuItem>
+                    <DropdownMenuItem>
+                      <DropdownItem
+                        type="button"
+                        CustomStartIcon={
+                          <Icon name="moon" className="text-default h-4 w-4" aria-hidden="true" />
+                        }
+                        href="/settings/my-account/out-of-office">
+                        {t("out_of_office")}
+                      </DropdownItem>
+                    </DropdownMenuItem>
+                    <DropdownMenuSeparator />
+                  </>
+                )}
+
+                <DropdownMenuItem>
+                  <DropdownItem
+                    StartIcon="messages-square"
+                    target="_blank"
+                    rel="noreferrer"
+                    href={JOIN_COMMUNITY}>
+                    {t("join_our_community")}
+                  </DropdownItem>
+                </DropdownMenuItem>
+                <DropdownMenuItem>
+                  <DropdownItem StartIcon="map" target="_blank" href={ROADMAP}>
+                    {t("visit_roadmap")}
+                  </DropdownItem>
+                </DropdownMenuItem>
+                <DropdownMenuItem>
+                  <DropdownItem
+                    type="button"
+                    StartIcon="circle-help"
+                    aria-hidden="true"
+                    onClick={() => setHelpOpen(true)}>
+                    {t("help")}
+                  </DropdownItem>
+                </DropdownMenuItem>
+                {!isPlatformPages && (
+                  <DropdownMenuItem className="todesktop:hidden hidden lg:flex">
+                    <DropdownItem
+                      StartIcon="download"
+                      target="_blank"
+                      rel="noreferrer"
+                      href={DESKTOP_APP_LINK}>
+                      {t("download_desktop_app")}
+                    </DropdownItem>
+                  </DropdownMenuItem>
+                )}
+
+                {!isPlatformPages && isPlatformUser && (
+                  <DropdownMenuItem className="todesktop:hidden hidden lg:flex">
+                    <DropdownItem
+                      StartIcon="blocks"
+                      target="_blank"
+                      rel="noreferrer"
+                      href="/settings/platform">
+                      Platform
+                    </DropdownItem>
+                  </DropdownMenuItem>
+                )}
+                <DropdownMenuSeparator />
+
+                <DropdownMenuItem>
+                  <DropdownItem
+                    type="button"
+                    StartIcon="log-out"
+                    aria-hidden="true"
+                    onClick={() => signOut({ callbackUrl: "/auth/logout" })}>
+                    {t("sign_out")}
+                  </DropdownItem>
+                </DropdownMenuItem>
+              </>
+            )}
+          </DropdownMenuContent>
+        </FreshChatProvider>
+      </DropdownMenuPortal>
+    </Dropdown>
+  );
+}

From f13c3f4f5feb1f2794d0cd899579e3b5d3d67825 Mon Sep 17 00:00:00 2001
From: sean-brydon <sean@cal.com>
Date: Tue, 1 Oct 2024 11:14:56 +0100
Subject: [PATCH 07/17] Navigation Item

---
 packages/features/shell/Shell.tsx             | 136 +--------------
 .../shell/navigation/NavigationItem.tsx       | 160 ++++++++++++++++++
 .../useShouldDisplayNavigationItem.ts         |  10 ++
 3 files changed, 171 insertions(+), 135 deletions(-)
 create mode 100644 packages/features/shell/navigation/NavigationItem.tsx
 create mode 100644 packages/features/shell/navigation/useShouldDisplayNavigationItem.ts

diff --git a/packages/features/shell/Shell.tsx b/packages/features/shell/Shell.tsx
index 0f1ae24d718d9f..02dd9efb15f279 100644
--- a/packages/features/shell/Shell.tsx
+++ b/packages/features/shell/Shell.tsx
@@ -13,7 +13,6 @@ import { useRedirectToOnboardingIfNeeded } from "@calcom/features/auth/lib/hooks
 import UnconfirmedBookingBadge from "@calcom/features/bookings/UnconfirmedBookingBadge";
 import { getOrgFullOrigin } from "@calcom/features/ee/organizations/lib/orgDomains";
 import { useBootIntercom } from "@calcom/features/ee/support/lib/intercom/useIntercom";
-import { useFlagMap } from "@calcom/features/flags/context/provider";
 import { KBarContent, KBarRoot, KBarTrigger } from "@calcom/features/kbar/Kbar";
 import TimezoneChangeDialog from "@calcom/features/settings/TimezoneChangeDialog";
 import classNames from "@calcom/lib/classNames";
@@ -29,7 +28,6 @@ import { useCopy } from "@calcom/lib/hooks/useCopy";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { ButtonState, useNotifications } from "@calcom/lib/hooks/useNotifications";
 import { useRefreshData } from "@calcom/lib/hooks/useRefreshData";
-import { isKeyInObject } from "@calcom/lib/isKeyInObject";
 import { trpc } from "@calcom/trpc/react";
 import {
   Avatar,
@@ -56,6 +54,7 @@ import { useOrgBranding } from "../ee/organizations/context/provider";
 import { TeamInviteBadge } from "./TeamInviteBadge";
 import { BannerContainer } from "./banners/LayoutBanner";
 import { useBanners } from "./banners/useBanners";
+import { NavigationItem, MobileNavigationItem, MobileNavigationMoreItem } from "./navigation/NavigationItem";
 import { useAppTheme } from "./useAppTheme";
 import { UserDropdown } from "./user-dropdown/UserDropdown";
 
@@ -350,81 +349,6 @@ const Navigation = ({ isPlatformNavigation = false }: { isPlatformNavigation?: b
   );
 };
 
-function useShouldDisplayNavigationItem(item: NavigationItemType) {
-  const flags = useFlagMap();
-  if (isKeyInObject(item.name, flags)) return flags[item.name];
-  return true;
-}
-
-const defaultIsCurrent: NavigationItemType["isCurrent"] = ({ isChild, item, pathname }) => {
-  return isChild ? item.href === pathname : item.href ? pathname?.startsWith(item.href) ?? false : false;
-};
-
-const NavigationItem: React.FC<{
-  index?: number;
-  item: NavigationItemType;
-  isChild?: boolean;
-}> = (props) => {
-  const { item, isChild } = props;
-  const { t, isLocaleReady } = useLocale();
-  const pathname = usePathname();
-  const isCurrent: NavigationItemType["isCurrent"] = item.isCurrent || defaultIsCurrent;
-  const current = isCurrent({ isChild: !!isChild, item, pathname });
-  const shouldDisplayNavigationItem = useShouldDisplayNavigationItem(props.item);
-
-  if (!shouldDisplayNavigationItem) return null;
-
-  return (
-    <Fragment>
-      <Tooltip side="right" content={t(item.name)} className="lg:hidden">
-        <Link
-          data-test-id={item.name}
-          href={item.href}
-          aria-label={t(item.name)}
-          target={item.target}
-          className={classNames(
-            "todesktop:py-[7px] text-default group flex items-center rounded-md px-2 py-1.5 text-sm font-medium transition",
-            item.child ? `[&[aria-current='page']]:!bg-transparent` : `[&[aria-current='page']]:bg-emphasis`,
-            isChild
-              ? `[&[aria-current='page']]:text-emphasis [&[aria-current='page']]:bg-emphasis hidden h-8 pl-16 lg:flex lg:pl-11 ${
-                  props.index === 0 ? "mt-0" : "mt-px"
-                }`
-              : "[&[aria-current='page']]:text-emphasis mt-0.5 text-sm",
-            isLocaleReady
-              ? "hover:bg-subtle todesktop:[&[aria-current='page']]:bg-emphasis todesktop:hover:bg-transparent hover:text-emphasis"
-              : ""
-          )}
-          aria-current={current ? "page" : undefined}>
-          {item.icon && (
-            <Icon
-              name={item.isLoading ? "rotate-cw" : item.icon}
-              className={classNames(
-                "todesktop:!text-blue-500 mr-2 h-4 w-4 flex-shrink-0 rtl:ml-2 md:ltr:mx-auto lg:ltr:mr-2 [&[aria-current='page']]:text-inherit",
-                item.isLoading && "animate-spin"
-              )}
-              aria-hidden="true"
-              aria-current={current ? "page" : undefined}
-            />
-          )}
-          {isLocaleReady ? (
-            <span
-              className="hidden w-full justify-between truncate text-ellipsis lg:flex"
-              data-testid={`${item.name}-test`}>
-              {t(item.name)}
-              {item.badge && item.badge}
-            </span>
-          ) : (
-            <SkeletonText className="h-[20px] w-full" />
-          )}
-        </Link>
-      </Tooltip>
-      {item.child &&
-        isCurrent({ pathname, isChild, item }) &&
-        item.child.map((item, index) => <NavigationItem index={index} key={item.name} item={item} isChild />)}
-    </Fragment>
-  );
-};
-
 function MobileNavigationContainer({ isPlatformNavigation = false }: { isPlatformNavigation?: boolean }) {
   const { status } = useSession();
   if (status !== "authenticated") return null;
@@ -452,64 +376,6 @@ const MobileNavigation = ({ isPlatformNavigation = false }: { isPlatformNavigati
   );
 };
 
-const MobileNavigationItem: React.FC<{
-  item: NavigationItemType;
-  isChild?: boolean;
-}> = (props) => {
-  const { item, isChild } = props;
-  const pathname = usePathname();
-  const { t, isLocaleReady } = useLocale();
-  const isCurrent: NavigationItemType["isCurrent"] = item.isCurrent || defaultIsCurrent;
-  const current = isCurrent({ isChild: !!isChild, item, pathname });
-  const shouldDisplayNavigationItem = useShouldDisplayNavigationItem(props.item);
-
-  if (!shouldDisplayNavigationItem) return null;
-  return (
-    <Link
-      key={item.name}
-      href={item.href}
-      target={item.target}
-      className="[&[aria-current='page']]:text-emphasis hover:text-default text-muted relative my-2 min-w-0 flex-1 overflow-hidden rounded-md !bg-transparent p-1 text-center text-xs font-medium focus:z-10 sm:text-sm"
-      aria-current={current ? "page" : undefined}>
-      {item.badge && <div className="absolute right-1 top-1">{item.badge}</div>}
-      {item.icon && (
-        <Icon
-          name={item.icon}
-          className="[&[aria-current='page']]:text-emphasis  mx-auto mb-1 block h-5 w-5 flex-shrink-0 text-center text-inherit"
-          aria-hidden="true"
-          aria-current={current ? "page" : undefined}
-        />
-      )}
-      {isLocaleReady ? <span className="block truncate">{t(item.name)}</span> : <SkeletonText />}
-    </Link>
-  );
-};
-
-const MobileNavigationMoreItem: React.FC<{
-  item: NavigationItemType;
-  isChild?: boolean;
-}> = (props) => {
-  const { item } = props;
-  const { t, isLocaleReady } = useLocale();
-  const shouldDisplayNavigationItem = useShouldDisplayNavigationItem(props.item);
-
-  if (!shouldDisplayNavigationItem) return null;
-
-  return (
-    <li className="border-subtle border-b last:border-b-0" key={item.name}>
-      <Link href={item.href} className="hover:bg-subtle flex items-center justify-between p-5 transition">
-        <span className="text-default flex items-center font-semibold ">
-          {item.icon && (
-            <Icon name={item.icon} className="h-5 w-5 flex-shrink-0 ltr:mr-3 rtl:ml-3" aria-hidden="true" />
-          )}
-          {isLocaleReady ? t(item.name) : <SkeletonText />}
-        </span>
-        <Icon name="arrow-right" className="text-subtle h-5 w-5" />
-      </Link>
-    </li>
-  );
-};
-
 type SideBarContainerProps = {
   bannersHeight: number;
   isPlatformUser?: boolean;
diff --git a/packages/features/shell/navigation/NavigationItem.tsx b/packages/features/shell/navigation/NavigationItem.tsx
new file mode 100644
index 00000000000000..ee11d77951d558
--- /dev/null
+++ b/packages/features/shell/navigation/NavigationItem.tsx
@@ -0,0 +1,160 @@
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import React, { Fragment } from "react";
+
+import { classNames } from "@calcom/lib";
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { Tooltip, Icon, SkeletonText } from "@calcom/ui";
+import type { IconName } from "@calcom/ui/icon";
+
+import { useShouldDisplayNavigationItem } from "./useShouldDisplayNavigationItem";
+
+export type NavigationItemType = {
+  name: string;
+  href: string;
+  isLoading?: boolean;
+  onClick?: React.MouseEventHandler<HTMLAnchorElement | HTMLButtonElement>;
+  target?: HTMLAnchorElement["target"];
+  badge?: React.ReactNode;
+  icon?: IconName;
+  child?: NavigationItemType[];
+  pro?: true;
+  onlyMobile?: boolean;
+  onlyDesktop?: boolean;
+  isCurrent?: ({
+    item,
+    isChild,
+    pathname,
+  }: {
+    item: Pick<NavigationItemType, "href">;
+    isChild?: boolean;
+    pathname: string | null;
+  }) => boolean;
+};
+
+const defaultIsCurrent: NavigationItemType["isCurrent"] = ({ isChild, item, pathname }) => {
+  return isChild ? item.href === pathname : item.href ? pathname?.startsWith(item.href) ?? false : false;
+};
+
+export const NavigationItem: React.FC<{
+  index?: number;
+  item: NavigationItemType;
+  isChild?: boolean;
+}> = (props) => {
+  const { item, isChild } = props;
+  const { t, isLocaleReady } = useLocale();
+  const pathname = usePathname();
+  const isCurrent: NavigationItemType["isCurrent"] = item.isCurrent || defaultIsCurrent;
+  const current = isCurrent({ isChild: !!isChild, item, pathname });
+  const shouldDisplayNavigationItem = useShouldDisplayNavigationItem(props.item);
+
+  if (!shouldDisplayNavigationItem) return null;
+
+  return (
+    <Fragment>
+      <Tooltip side="right" content={t(item.name)} className="lg:hidden">
+        <Link
+          data-test-id={item.name}
+          href={item.href}
+          aria-label={t(item.name)}
+          target={item.target}
+          className={classNames(
+            "todesktop:py-[7px] text-default group flex items-center rounded-md px-2 py-1.5 text-sm font-medium transition",
+            item.child ? `[&[aria-current='page']]:!bg-transparent` : `[&[aria-current='page']]:bg-emphasis`,
+            isChild
+              ? `[&[aria-current='page']]:text-emphasis [&[aria-current='page']]:bg-emphasis hidden h-8 pl-16 lg:flex lg:pl-11 ${
+                  props.index === 0 ? "mt-0" : "mt-px"
+                }`
+              : "[&[aria-current='page']]:text-emphasis mt-0.5 text-sm",
+            isLocaleReady
+              ? "hover:bg-subtle todesktop:[&[aria-current='page']]:bg-emphasis todesktop:hover:bg-transparent hover:text-emphasis"
+              : ""
+          )}
+          aria-current={current ? "page" : undefined}>
+          {item.icon && (
+            <Icon
+              name={item.isLoading ? "rotate-cw" : item.icon}
+              className={classNames(
+                "todesktop:!text-blue-500 mr-2 h-4 w-4 flex-shrink-0 rtl:ml-2 md:ltr:mx-auto lg:ltr:mr-2 [&[aria-current='page']]:text-inherit",
+                item.isLoading && "animate-spin"
+              )}
+              aria-hidden="true"
+              aria-current={current ? "page" : undefined}
+            />
+          )}
+          {isLocaleReady ? (
+            <span
+              className="hidden w-full justify-between truncate text-ellipsis lg:flex"
+              data-testid={`${item.name}-test`}>
+              {t(item.name)}
+              {item.badge && item.badge}
+            </span>
+          ) : (
+            <SkeletonText className="h-[20px] w-full" />
+          )}
+        </Link>
+      </Tooltip>
+      {item.child &&
+        isCurrent({ pathname, isChild, item }) &&
+        item.child.map((item, index) => <NavigationItem index={index} key={item.name} item={item} isChild />)}
+    </Fragment>
+  );
+};
+
+export const MobileNavigationItem: React.FC<{
+  item: NavigationItemType;
+  isChild?: boolean;
+}> = (props) => {
+  const { item, isChild } = props;
+  const pathname = usePathname();
+  const { t, isLocaleReady } = useLocale();
+  const isCurrent: NavigationItemType["isCurrent"] = item.isCurrent || defaultIsCurrent;
+  const current = isCurrent({ isChild: !!isChild, item, pathname });
+  const shouldDisplayNavigationItem = useShouldDisplayNavigationItem(props.item);
+
+  if (!shouldDisplayNavigationItem) return null;
+  return (
+    <Link
+      key={item.name}
+      href={item.href}
+      target={item.target}
+      className="[&[aria-current='page']]:text-emphasis hover:text-default text-muted relative my-2 min-w-0 flex-1 overflow-hidden rounded-md !bg-transparent p-1 text-center text-xs font-medium focus:z-10 sm:text-sm"
+      aria-current={current ? "page" : undefined}>
+      {item.badge && <div className="absolute right-1 top-1">{item.badge}</div>}
+      {item.icon && (
+        <Icon
+          name={item.icon}
+          className="[&[aria-current='page']]:text-emphasis  mx-auto mb-1 block h-5 w-5 flex-shrink-0 text-center text-inherit"
+          aria-hidden="true"
+          aria-current={current ? "page" : undefined}
+        />
+      )}
+      {isLocaleReady ? <span className="block truncate">{t(item.name)}</span> : <SkeletonText />}
+    </Link>
+  );
+};
+
+export const MobileNavigationMoreItem: React.FC<{
+  item: NavigationItemType;
+  isChild?: boolean;
+}> = (props) => {
+  const { item } = props;
+  const { t, isLocaleReady } = useLocale();
+  const shouldDisplayNavigationItem = useShouldDisplayNavigationItem(props.item);
+
+  if (!shouldDisplayNavigationItem) return null;
+
+  return (
+    <li className="border-subtle border-b last:border-b-0" key={item.name}>
+      <Link href={item.href} className="hover:bg-subtle flex items-center justify-between p-5 transition">
+        <span className="text-default flex items-center font-semibold ">
+          {item.icon && (
+            <Icon name={item.icon} className="h-5 w-5 flex-shrink-0 ltr:mr-3 rtl:ml-3" aria-hidden="true" />
+          )}
+          {isLocaleReady ? t(item.name) : <SkeletonText />}
+        </span>
+        <Icon name="arrow-right" className="text-subtle h-5 w-5" />
+      </Link>
+    </li>
+  );
+};
diff --git a/packages/features/shell/navigation/useShouldDisplayNavigationItem.ts b/packages/features/shell/navigation/useShouldDisplayNavigationItem.ts
new file mode 100644
index 00000000000000..ffba4b37c8688c
--- /dev/null
+++ b/packages/features/shell/navigation/useShouldDisplayNavigationItem.ts
@@ -0,0 +1,10 @@
+import { useFlagMap } from "@calcom/features/flags/context/provider";
+import { isKeyInObject } from "@calcom/lib/isKeyInObject";
+
+import type { NavigationItemType } from "./NavigationItem";
+
+export function useShouldDisplayNavigationItem(item: NavigationItemType) {
+  const flags = useFlagMap();
+  if (isKeyInObject(item.name, flags)) return flags[item.name];
+  return true;
+}

From 902777a878e7c5d8df2204a7637080398aff5404 Mon Sep 17 00:00:00 2001
From: sean-brydon <sean@cal.com>
Date: Tue, 1 Oct 2024 11:30:42 +0100
Subject: [PATCH 08/17] navigation and profile dropdown

---
 packages/features/shell/Shell.tsx             | 310 +-----------------
 .../features/shell/navigation/Navigation.tsx  | 189 +++++++++++
 .../shell/user-dropdown/ProfileDropdown.tsx   | 109 ++++++
 3 files changed, 301 insertions(+), 307 deletions(-)
 create mode 100644 packages/features/shell/navigation/Navigation.tsx
 create mode 100644 packages/features/shell/user-dropdown/ProfileDropdown.tsx

diff --git a/packages/features/shell/Shell.tsx b/packages/features/shell/Shell.tsx
index 02dd9efb15f279..308a691d08d7c1 100644
--- a/packages/features/shell/Shell.tsx
+++ b/packages/features/shell/Shell.tsx
@@ -10,7 +10,6 @@ import { Toaster } from "react-hot-toast";
 import { useIsEmbed } from "@calcom/embed-core/embed-iframe";
 import { useRedirectToLoginIfUnauthenticated } from "@calcom/features/auth/lib/hooks/useRedirectToLoginIfUnauthenticated";
 import { useRedirectToOnboardingIfNeeded } from "@calcom/features/auth/lib/hooks/useRedirectToOnboardingIfNeeded";
-import UnconfirmedBookingBadge from "@calcom/features/bookings/UnconfirmedBookingBadge";
 import { getOrgFullOrigin } from "@calcom/features/ee/organizations/lib/orgDomains";
 import { useBootIntercom } from "@calcom/features/ee/support/lib/intercom/useIntercom";
 import { KBarContent, KBarRoot, KBarTrigger } from "@calcom/features/kbar/Kbar";
@@ -27,19 +26,11 @@ import { useFormbricks } from "@calcom/lib/formbricks-client";
 import { useCopy } from "@calcom/lib/hooks/useCopy";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { ButtonState, useNotifications } from "@calcom/lib/hooks/useNotifications";
-import { useRefreshData } from "@calcom/lib/hooks/useRefreshData";
-import { trpc } from "@calcom/trpc/react";
 import {
   Avatar,
   Button,
   ButtonOrLink,
   Credits,
-  Dropdown,
-  DropdownItem,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuPortal,
-  DropdownMenuTrigger,
   ErrorBoundary,
   HeadSeo,
   Icon,
@@ -47,15 +38,15 @@ import {
   showToast,
   SkeletonText,
   Tooltip,
-  type IconName,
 } from "@calcom/ui";
 
 import { useOrgBranding } from "../ee/organizations/context/provider";
-import { TeamInviteBadge } from "./TeamInviteBadge";
+import { Navigation, MobileNavigationContainer } from "./Navigation";
 import { BannerContainer } from "./banners/LayoutBanner";
 import { useBanners } from "./banners/useBanners";
-import { NavigationItem, MobileNavigationItem, MobileNavigationMoreItem } from "./navigation/NavigationItem";
+import { MobileNavigationMoreItem } from "./navigation/NavigationItem";
 import { useAppTheme } from "./useAppTheme";
+import { ProfileDropdown } from "./user-dropdown/ProfileDropdown";
 import { UserDropdown } from "./user-dropdown/UserDropdown";
 
 // need to import without ssr to prevent hydration errors
@@ -173,208 +164,7 @@ export default function Shell(props: LayoutProps) {
   );
 }
 
-export type NavigationItemType = {
-  name: string;
-  href: string;
-  isLoading?: boolean;
-  onClick?: React.MouseEventHandler<HTMLAnchorElement | HTMLButtonElement>;
-  target?: HTMLAnchorElement["target"];
-  badge?: React.ReactNode;
-  icon?: IconName;
-  child?: NavigationItemType[];
-  pro?: true;
-  onlyMobile?: boolean;
-  onlyDesktop?: boolean;
-  isCurrent?: ({
-    item,
-    isChild,
-    pathname,
-  }: {
-    item: Pick<NavigationItemType, "href">;
-    isChild?: boolean;
-    pathname: string | null;
-  }) => boolean;
-};
-
 const requiredCredentialNavigationItems = ["Routing Forms"];
-const MORE_SEPARATOR_NAME = "more";
-
-const navigation: NavigationItemType[] = [
-  {
-    name: "event_types_page_title",
-    href: "/event-types",
-    icon: "link",
-  },
-  {
-    name: "bookings",
-    href: "/bookings/upcoming",
-    icon: "calendar",
-    badge: <UnconfirmedBookingBadge />,
-    isCurrent: ({ pathname }) => pathname?.startsWith("/bookings") ?? false,
-  },
-  {
-    name: "availability",
-    href: "/availability",
-    icon: "clock",
-  },
-  {
-    name: "teams",
-    href: "/teams",
-    icon: "users",
-    onlyDesktop: true,
-    badge: <TeamInviteBadge />,
-  },
-  {
-    name: "apps",
-    href: "/apps",
-    icon: "grid-3x3",
-    isCurrent: ({ pathname: path, item }) => {
-      // During Server rendering path is /v2/apps but on client it becomes /apps(weird..)
-      return (path?.startsWith(item.href) ?? false) && !(path?.includes("routing-forms/") ?? false);
-    },
-    child: [
-      {
-        name: "app_store",
-        href: "/apps",
-        isCurrent: ({ pathname: path, item }) => {
-          // During Server rendering path is /v2/apps but on client it becomes /apps(weird..)
-          return (
-            (path?.startsWith(item.href) ?? false) &&
-            !(path?.includes("routing-forms/") ?? false) &&
-            !(path?.includes("/installed") ?? false)
-          );
-        },
-      },
-      {
-        name: "installed_apps",
-        href: "/apps/installed/calendar",
-        isCurrent: ({ pathname: path }) =>
-          (path?.startsWith("/apps/installed/") ?? false) ||
-          (path?.startsWith("/v2/apps/installed/") ?? false),
-      },
-    ],
-  },
-  {
-    name: MORE_SEPARATOR_NAME,
-    href: "/more",
-    icon: "ellipsis",
-  },
-  {
-    name: "Routing Forms",
-    href: "/apps/routing-forms/forms",
-    icon: "file-text",
-    isCurrent: ({ pathname }) => pathname?.startsWith("/apps/routing-forms/") ?? false,
-  },
-  {
-    name: "workflows",
-    href: "/workflows",
-    icon: "zap",
-  },
-  {
-    name: "insights",
-    href: "/insights",
-    icon: "chart-bar",
-  },
-];
-
-const platformNavigation: NavigationItemType[] = [
-  {
-    name: "Dashboard",
-    href: "/settings/platform/",
-    icon: "layout-dashboard",
-  },
-  {
-    name: "Documentation",
-    href: "https://docs.cal.com/docs/platform",
-    icon: "chart-bar",
-    target: "_blank",
-  },
-  {
-    name: "API reference",
-    href: "https://api.cal.com/v2/docs#/",
-    icon: "terminal",
-    target: "_blank",
-  },
-  {
-    name: "Atoms",
-    href: "https://docs.cal.com/docs/platform#atoms",
-    icon: "atom",
-    target: "_blank",
-  },
-  {
-    name: MORE_SEPARATOR_NAME,
-    href: "https://docs.cal.com/docs/platform/faq",
-    icon: "ellipsis",
-    target: "_blank",
-  },
-];
-
-const getDesktopNavigationItems = (isPlatformNavigation = false) => {
-  const navigationType = !isPlatformNavigation ? navigation : platformNavigation;
-  const moreSeparatorIndex = navigationType.findIndex((item) => item.name === MORE_SEPARATOR_NAME);
-
-  const { desktopNavigationItems, mobileNavigationBottomItems, mobileNavigationMoreItems } = (
-    !isPlatformNavigation ? navigation : platformNavigation
-  ).reduce<Record<string, NavigationItemType[]>>(
-    (items, item, index) => {
-      // We filter out the "more" separator in` desktop navigation
-      if (item.name !== MORE_SEPARATOR_NAME) items.desktopNavigationItems.push(item);
-      // Items for mobile bottom navigation
-      if (index < moreSeparatorIndex + 1 && !item.onlyDesktop) {
-        items.mobileNavigationBottomItems.push(item);
-      } // Items for the "more" menu in mobile navigation
-      else {
-        items.mobileNavigationMoreItems.push(item);
-      }
-      return items;
-    },
-    { desktopNavigationItems: [], mobileNavigationBottomItems: [], mobileNavigationMoreItems: [] }
-  );
-
-  return { desktopNavigationItems, mobileNavigationBottomItems, mobileNavigationMoreItems };
-};
-
-const Navigation = ({ isPlatformNavigation = false }: { isPlatformNavigation?: boolean }) => {
-  const { desktopNavigationItems } = getDesktopNavigationItems(isPlatformNavigation);
-
-  return (
-    <nav className="mt-2 flex-1 md:px-2 lg:mt-4 lg:px-0">
-      {desktopNavigationItems.map((item) => (
-        <NavigationItem key={item.name} item={item} />
-      ))}
-      <div className="text-subtle mt-0.5 lg:hidden">
-        <KBarTrigger />
-      </div>
-    </nav>
-  );
-};
-
-function MobileNavigationContainer({ isPlatformNavigation = false }: { isPlatformNavigation?: boolean }) {
-  const { status } = useSession();
-  if (status !== "authenticated") return null;
-  return <MobileNavigation isPlatformNavigation={isPlatformNavigation} />;
-}
-
-const MobileNavigation = ({ isPlatformNavigation = false }: { isPlatformNavigation?: boolean }) => {
-  const isEmbed = useIsEmbed();
-  const { mobileNavigationBottomItems } = getDesktopNavigationItems(isPlatformNavigation);
-
-  return (
-    <>
-      <nav
-        className={classNames(
-          "pwa:pb-[max(0.625rem,env(safe-area-inset-bottom))] pwa:-mx-2 bg-muted border-subtle fixed bottom-0 left-0 z-30 flex w-full border-t bg-opacity-40 px-1 shadow backdrop-blur-md md:hidden",
-          isEmbed && "hidden"
-        )}>
-        {mobileNavigationBottomItems.map((item) => (
-          <MobileNavigationItem key={item.name} item={item} />
-        ))}
-      </nav>
-      {/* add padding to content for mobile navigation*/}
-      <div className="block pt-12 md:hidden" />
-    </>
-  );
-};
 
 type SideBarContainerProps = {
   bannersHeight: number;
@@ -746,97 +536,3 @@ export const MobileNavigationMoreItems = () => {
     </ul>
   );
 };
-
-function ProfileDropdown() {
-  const { update, data: sessionData } = useSession();
-  const { data } = trpc.viewer.me.useQuery();
-  const [menuOpen, setMenuOpen] = useState(false);
-  const refreshData = useRefreshData();
-
-  if (!data || !ENABLE_PROFILE_SWITCHER || !sessionData) {
-    return null;
-  }
-  const options = data.profiles.map((profile) => {
-    let label;
-    if (profile.organization) {
-      label = profile.organization.name;
-    } else {
-      label = sessionData.user.name;
-    }
-
-    return {
-      label,
-      value: profile.upId,
-    };
-  });
-
-  const currentOption = options.find((option) => option.value === sessionData.upId) || options[0];
-
-  return (
-    <Dropdown open={menuOpen}>
-      <DropdownMenuTrigger asChild onClick={() => setMenuOpen((menuOpen) => !menuOpen)}>
-        <button
-          data-testid="user-dropdown-trigger-button"
-          className={classNames(
-            "hover:bg-emphasis todesktop:!bg-transparent group mx-0 flex w-full cursor-pointer appearance-none items-center rounded-full px-2 py-1.5 text-left outline-none transition focus:outline-none focus:ring-0 md:rounded-none lg:rounded"
-          )}>
-          <span className="flex w-full flex-grow items-center justify-around gap-2 text-sm font-medium leading-none">
-            <Avatar alt={currentOption.label || ""} size="xsm" />
-            <span className="block w-20 overflow-hidden overflow-ellipsis whitespace-nowrap">
-              {currentOption.label}
-            </span>
-            <Icon
-              name="chevron-down"
-              className="group-hover:text-subtle text-muted h-4 w-4 flex-shrink-0 transition rtl:mr-4"
-              aria-hidden="true"
-            />
-          </span>
-        </button>
-      </DropdownMenuTrigger>
-
-      <DropdownMenuPortal>
-        <DropdownMenuContent
-          align="start"
-          onInteractOutside={() => {
-            setMenuOpen(false);
-          }}
-          className="min-w-56 hariom group overflow-hidden rounded-md">
-          <DropdownMenuItem className="p-3 uppercase">
-            <span>Switch to</span>
-          </DropdownMenuItem>
-          {options.map((option) => {
-            const isSelected = currentOption.value === option.value;
-            return (
-              <DropdownMenuItem
-                key={option.value}
-                onClick={() => {
-                  setMenuOpen(false);
-                  if (isSelected) return;
-                  update({
-                    upId: option.value,
-                  }).then(() => {
-                    refreshData();
-                  });
-                }}
-                className={classNames("flex w-full", isSelected ? "bg-subtle text-emphasis" : "")}>
-                <DropdownItem
-                  type="button"
-                  childrenClassName={classNames("flex w-full justify-between items-center")}>
-                  <span>
-                    <Avatar alt={option.label || ""} size="xsm" />
-                    <span className="ml-2">{option.label}</span>
-                  </span>
-                  {isSelected ? (
-                    <Icon name="check" className="ml-2 inline h-4 w-4" aria-hidden="true" />
-                  ) : null}
-                </DropdownItem>
-              </DropdownMenuItem>
-            );
-          })}
-
-          {/* <DropdownMenuSeparator /> */}
-        </DropdownMenuContent>
-      </DropdownMenuPortal>
-    </Dropdown>
-  );
-}
diff --git a/packages/features/shell/navigation/Navigation.tsx b/packages/features/shell/navigation/Navigation.tsx
new file mode 100644
index 00000000000000..3db4c6ae9b6863
--- /dev/null
+++ b/packages/features/shell/navigation/Navigation.tsx
@@ -0,0 +1,189 @@
+import UnconfirmedBookingBadge from "@calcom/features/bookings/UnconfirmedBookingBadge";
+import { KBarTrigger } from "@calcom/features/kbar/Kbar";
+
+import { TeamInviteBadge } from "../TeamInviteBadge";
+import type { NavigationItemType } from "./NavigationItem";
+import { NavigationItem, MobileNavigationItem } from "./NavigationItem";
+
+export const MORE_SEPARATOR_NAME = "more";
+
+const navigation: NavigationItemType[] = [
+  {
+    name: "event_types_page_title",
+    href: "/event-types",
+    icon: "link",
+  },
+  {
+    name: "bookings",
+    href: "/bookings/upcoming",
+    icon: "calendar",
+    badge: <UnconfirmedBookingBadge />,
+    isCurrent: ({ pathname }) => pathname?.startsWith("/bookings") ?? false,
+  },
+  {
+    name: "availability",
+    href: "/availability",
+    icon: "clock",
+  },
+  {
+    name: "teams",
+    href: "/teams",
+    icon: "users",
+    onlyDesktop: true,
+    badge: <TeamInviteBadge />,
+  },
+  {
+    name: "apps",
+    href: "/apps",
+    icon: "grid-3x3",
+    isCurrent: ({ pathname: path, item }) => {
+      // During Server rendering path is /v2/apps but on client it becomes /apps(weird..)
+      return (path?.startsWith(item.href) ?? false) && !(path?.includes("routing-forms/") ?? false);
+    },
+    child: [
+      {
+        name: "app_store",
+        href: "/apps",
+        isCurrent: ({ pathname: path, item }) => {
+          // During Server rendering path is /v2/apps but on client it becomes /apps(weird..)
+          return (
+            (path?.startsWith(item.href) ?? false) &&
+            !(path?.includes("routing-forms/") ?? false) &&
+            !(path?.includes("/installed") ?? false)
+          );
+        },
+      },
+      {
+        name: "installed_apps",
+        href: "/apps/installed/calendar",
+        isCurrent: ({ pathname: path }) =>
+          (path?.startsWith("/apps/installed/") ?? false) ||
+          (path?.startsWith("/v2/apps/installed/") ?? false),
+      },
+    ],
+  },
+  {
+    name: MORE_SEPARATOR_NAME,
+    href: "/more",
+    icon: "ellipsis",
+  },
+  {
+    name: "Routing Forms",
+    href: "/apps/routing-forms/forms",
+    icon: "file-text",
+    isCurrent: ({ pathname }) => pathname?.startsWith("/apps/routing-forms/") ?? false,
+  },
+  {
+    name: "workflows",
+    href: "/workflows",
+    icon: "zap",
+  },
+  {
+    name: "insights",
+    href: "/insights",
+    icon: "chart-bar",
+  },
+];
+
+const platformNavigation: NavigationItemType[] = [
+  {
+    name: "Dashboard",
+    href: "/settings/platform/",
+    icon: "layout-dashboard",
+  },
+  {
+    name: "Documentation",
+    href: "https://docs.cal.com/docs/platform",
+    icon: "chart-bar",
+    target: "_blank",
+  },
+  {
+    name: "API reference",
+    href: "https://api.cal.com/v2/docs#/",
+    icon: "terminal",
+    target: "_blank",
+  },
+  {
+    name: "Atoms",
+    href: "https://docs.cal.com/docs/platform#atoms",
+    icon: "atom",
+    target: "_blank",
+  },
+  {
+    name: MORE_SEPARATOR_NAME,
+    href: "https://docs.cal.com/docs/platform/faq",
+    icon: "ellipsis",
+    target: "_blank",
+  },
+];
+
+const getDesktopNavigationItems = (isPlatformNavigation = false) => {
+  const navigationType = !isPlatformNavigation ? navigation : platformNavigation;
+  const moreSeparatorIndex = navigationType.findIndex((item) => item.name === MORE_SEPARATOR_NAME);
+
+  const { desktopNavigationItems, mobileNavigationBottomItems, mobileNavigationMoreItems } = (
+    !isPlatformNavigation ? navigation : platformNavigation
+  ).reduce<Record<string, NavigationItemType[]>>(
+    (items, item, index) => {
+      // We filter out the "more" separator in` desktop navigation
+      if (item.name !== MORE_SEPARATOR_NAME) items.desktopNavigationItems.push(item);
+      // Items for mobile bottom navigation
+      if (index < moreSeparatorIndex + 1 && !item.onlyDesktop) {
+        items.mobileNavigationBottomItems.push(item);
+      } // Items for the "more" menu in mobile navigation
+      else {
+        items.mobileNavigationMoreItems.push(item);
+      }
+      return items;
+    },
+    { desktopNavigationItems: [], mobileNavigationBottomItems: [], mobileNavigationMoreItems: [] }
+  );
+
+  return { desktopNavigationItems, mobileNavigationBottomItems, mobileNavigationMoreItems };
+};
+
+export const Navigation = ({ isPlatformNavigation = false }: { isPlatformNavigation?: boolean }) => {
+  const { desktopNavigationItems } = getDesktopNavigationItems(isPlatformNavigation);
+
+  return (
+    <nav className="mt-2 flex-1 md:px-2 lg:mt-4 lg:px-0">
+      {desktopNavigationItems.map((item) => (
+        <NavigationItem key={item.name} item={item} />
+      ))}
+      <div className="text-subtle mt-0.5 lg:hidden">
+        <KBarTrigger />
+      </div>
+    </nav>
+  );
+};
+
+export function MobileNavigationContainer({
+  isPlatformNavigation = false,
+}: {
+  isPlatformNavigation?: boolean;
+}) {
+  const { status } = useSession();
+  if (status !== "authenticated") return null;
+  return <MobileNavigation isPlatformNavigation={isPlatformNavigation} />;
+}
+
+const MobileNavigation = ({ isPlatformNavigation = false }: { isPlatformNavigation?: boolean }) => {
+  const isEmbed = useIsEmbed();
+  const { mobileNavigationBottomItems } = getDesktopNavigationItems(isPlatformNavigation);
+
+  return (
+    <>
+      <nav
+        className={classNames(
+          "pwa:pb-[max(0.625rem,env(safe-area-inset-bottom))] pwa:-mx-2 bg-muted border-subtle fixed bottom-0 left-0 z-30 flex w-full border-t bg-opacity-40 px-1 shadow backdrop-blur-md md:hidden",
+          isEmbed && "hidden"
+        )}>
+        {mobileNavigationBottomItems.map((item) => (
+          <MobileNavigationItem key={item.name} item={item} />
+        ))}
+      </nav>
+      {/* add padding to content for mobile navigation*/}
+      <div className="block pt-12 md:hidden" />
+    </>
+  );
+};
diff --git a/packages/features/shell/user-dropdown/ProfileDropdown.tsx b/packages/features/shell/user-dropdown/ProfileDropdown.tsx
new file mode 100644
index 00000000000000..4a21edb60a226b
--- /dev/null
+++ b/packages/features/shell/user-dropdown/ProfileDropdown.tsx
@@ -0,0 +1,109 @@
+import { useSession } from "next-auth/react";
+import { useState } from "react";
+
+import { useRefreshData } from "@calcom/lib/hooks/useRefreshData";
+import { trpc } from "@calcom/trpc";
+import {
+  Avatar,
+  Dropdown,
+  DropdownItem,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuPortal,
+  DropdownMenuTrigger,
+  Icon,
+} from "@calcom/ui";
+
+export function ProfileDropdown() {
+  const { update, data: sessionData } = useSession();
+  const { data } = trpc.viewer.me.useQuery();
+  const [menuOpen, setMenuOpen] = useState(false);
+  const refreshData = useRefreshData();
+
+  if (!data || !ENABLE_PROFILE_SWITCHER || !sessionData) {
+    return null;
+  }
+  const options = data.profiles.map((profile) => {
+    let label;
+    if (profile.organization) {
+      label = profile.organization.name;
+    } else {
+      label = sessionData.user.name;
+    }
+
+    return {
+      label,
+      value: profile.upId,
+    };
+  });
+
+  const currentOption = options.find((option) => option.value === sessionData.upId) || options[0];
+
+  return (
+    <Dropdown open={menuOpen}>
+      <DropdownMenuTrigger asChild onClick={() => setMenuOpen((menuOpen) => !menuOpen)}>
+        <button
+          data-testid="user-dropdown-trigger-button"
+          className={classNames(
+            "hover:bg-emphasis todesktop:!bg-transparent group mx-0 flex w-full cursor-pointer appearance-none items-center rounded-full px-2 py-1.5 text-left outline-none transition focus:outline-none focus:ring-0 md:rounded-none lg:rounded"
+          )}>
+          <span className="flex w-full flex-grow items-center justify-around gap-2 text-sm font-medium leading-none">
+            <Avatar alt={currentOption.label || ""} size="xsm" />
+            <span className="block w-20 overflow-hidden overflow-ellipsis whitespace-nowrap">
+              {currentOption.label}
+            </span>
+            <Icon
+              name="chevron-down"
+              className="group-hover:text-subtle text-muted h-4 w-4 flex-shrink-0 transition rtl:mr-4"
+              aria-hidden="true"
+            />
+          </span>
+        </button>
+      </DropdownMenuTrigger>
+
+      <DropdownMenuPortal>
+        <DropdownMenuContent
+          align="start"
+          onInteractOutside={() => {
+            setMenuOpen(false);
+          }}
+          className="min-w-56 hariom group overflow-hidden rounded-md">
+          <DropdownMenuItem className="p-3 uppercase">
+            <span>Switch to</span>
+          </DropdownMenuItem>
+          {options.map((option) => {
+            const isSelected = currentOption.value === option.value;
+            return (
+              <DropdownMenuItem
+                key={option.value}
+                onClick={() => {
+                  setMenuOpen(false);
+                  if (isSelected) return;
+                  update({
+                    upId: option.value,
+                  }).then(() => {
+                    refreshData();
+                  });
+                }}
+                className={classNames("flex w-full", isSelected ? "bg-subtle text-emphasis" : "")}>
+                <DropdownItem
+                  type="button"
+                  childrenClassName={classNames("flex w-full justify-between items-center")}>
+                  <span>
+                    <Avatar alt={option.label || ""} size="xsm" />
+                    <span className="ml-2">{option.label}</span>
+                  </span>
+                  {isSelected ? (
+                    <Icon name="check" className="ml-2 inline h-4 w-4" aria-hidden="true" />
+                  ) : null}
+                </DropdownItem>
+              </DropdownMenuItem>
+            );
+          })}
+
+          {/* <DropdownMenuSeparator /> */}
+        </DropdownMenuContent>
+      </DropdownMenuPortal>
+    </Dropdown>
+  );
+}

From 09076abc768aa99bba05038efe19c8e2a0bc07f1 Mon Sep 17 00:00:00 2001
From: sean-brydon <sean@cal.com>
Date: Tue, 1 Oct 2024 11:34:42 +0100
Subject: [PATCH 09/17] Fix import

---
 packages/features/shell/Shell.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/features/shell/Shell.tsx b/packages/features/shell/Shell.tsx
index 308a691d08d7c1..06c2d9d39cb52f 100644
--- a/packages/features/shell/Shell.tsx
+++ b/packages/features/shell/Shell.tsx
@@ -41,9 +41,9 @@ import {
 } from "@calcom/ui";
 
 import { useOrgBranding } from "../ee/organizations/context/provider";
-import { Navigation, MobileNavigationContainer } from "./Navigation";
 import { BannerContainer } from "./banners/LayoutBanner";
 import { useBanners } from "./banners/useBanners";
+import { Navigation, MobileNavigationContainer } from "./navigation/Navigation";
 import { MobileNavigationMoreItem } from "./navigation/NavigationItem";
 import { useAppTheme } from "./useAppTheme";
 import { ProfileDropdown } from "./user-dropdown/ProfileDropdown";

From 66d0249b2ab4054ba834e4bd6f822c87400f9868 Mon Sep 17 00:00:00 2001
From: sean-brydon <sean@cal.com>
Date: Tue, 1 Oct 2024 13:13:20 +0100
Subject: [PATCH 10/17] navigation and sidebar

---
 packages/features/shell/Shell.tsx             | 290 +--------------
 packages/features/shell/SideBar.tsx           | 329 ++++++++++++++++++
 packages/features/shell/TopNav.tsx            |  43 +++
 .../features/shell/navigation/Navigation.tsx  |   4 +
 4 files changed, 384 insertions(+), 282 deletions(-)
 create mode 100644 packages/features/shell/SideBar.tsx
 create mode 100644 packages/features/shell/TopNav.tsx

diff --git a/packages/features/shell/Shell.tsx b/packages/features/shell/Shell.tsx
index 06c2d9d39cb52f..deea207ba5e739 100644
--- a/packages/features/shell/Shell.tsx
+++ b/packages/features/shell/Shell.tsx
@@ -1,62 +1,33 @@
-import type { User as UserAuth } from "next-auth";
 import { useSession } from "next-auth/react";
-import dynamic from "next/dynamic";
-import Link from "next/link";
 import { usePathname, useRouter } from "next/navigation";
 import type { Dispatch, ReactElement, ReactNode, SetStateAction } from "react";
-import React, { cloneElement, Fragment, useMemo, useState } from "react";
+import React, { cloneElement, Fragment } from "react";
 import { Toaster } from "react-hot-toast";
 
-import { useIsEmbed } from "@calcom/embed-core/embed-iframe";
 import { useRedirectToLoginIfUnauthenticated } from "@calcom/features/auth/lib/hooks/useRedirectToLoginIfUnauthenticated";
 import { useRedirectToOnboardingIfNeeded } from "@calcom/features/auth/lib/hooks/useRedirectToOnboardingIfNeeded";
-import { getOrgFullOrigin } from "@calcom/features/ee/organizations/lib/orgDomains";
 import { useBootIntercom } from "@calcom/features/ee/support/lib/intercom/useIntercom";
-import { KBarContent, KBarRoot, KBarTrigger } from "@calcom/features/kbar/Kbar";
+import { KBarContent, KBarRoot } from "@calcom/features/kbar/Kbar";
 import TimezoneChangeDialog from "@calcom/features/settings/TimezoneChangeDialog";
 import classNames from "@calcom/lib/classNames";
-import {
-  APP_NAME,
-  ENABLE_PROFILE_SWITCHER,
-  IS_CALCOM,
-  IS_VISUAL_REGRESSION_TESTING,
-} from "@calcom/lib/constants";
-import { getPlaceholderAvatar } from "@calcom/lib/defaultAvatarImage";
+import { APP_NAME } from "@calcom/lib/constants";
 import { useFormbricks } from "@calcom/lib/formbricks-client";
-import { useCopy } from "@calcom/lib/hooks/useCopy";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { ButtonState, useNotifications } from "@calcom/lib/hooks/useNotifications";
-import {
-  Avatar,
-  Button,
-  ButtonOrLink,
-  Credits,
-  ErrorBoundary,
-  HeadSeo,
-  Icon,
-  Logo,
-  showToast,
-  SkeletonText,
-  Tooltip,
-} from "@calcom/ui";
+import { Button, ErrorBoundary, HeadSeo, SkeletonText } from "@calcom/ui";
 
-import { useOrgBranding } from "../ee/organizations/context/provider";
+import { SideBarContainer } from "./SideBar";
+import { TopNavContainer } from "./TopNav";
 import { BannerContainer } from "./banners/LayoutBanner";
 import { useBanners } from "./banners/useBanners";
-import { Navigation, MobileNavigationContainer } from "./navigation/Navigation";
+import { MobileNavigationContainer } from "./navigation/Navigation";
 import { MobileNavigationMoreItem } from "./navigation/NavigationItem";
 import { useAppTheme } from "./useAppTheme";
-import { ProfileDropdown } from "./user-dropdown/ProfileDropdown";
-import { UserDropdown } from "./user-dropdown/UserDropdown";
-
-// need to import without ssr to prevent hydration errors
-const Tips = dynamic(() => import("@calcom/features/tips").then((mod) => mod.Tips), {
-  ssr: false,
-});
 
 const Layout = (props: LayoutProps) => {
   const { banners, bannersHeight } = useBanners();
   const pathname = usePathname();
+
   const isFullPageWithoutSidebar = pathname?.startsWith("/apps/routing-forms/reporting/");
   const pageTitle = typeof props.heading === "string" && !props.title ? props.heading : props.title;
 
@@ -164,217 +135,6 @@ export default function Shell(props: LayoutProps) {
   );
 }
 
-const requiredCredentialNavigationItems = ["Routing Forms"];
-
-type SideBarContainerProps = {
-  bannersHeight: number;
-  isPlatformUser?: boolean;
-};
-
-type SideBarProps = {
-  bannersHeight: number;
-  user?: UserAuth | null;
-  isPlatformUser?: boolean;
-};
-
-function SideBarContainer({ bannersHeight, isPlatformUser = false }: SideBarContainerProps) {
-  const { status, data } = useSession();
-
-  // Make sure that Sidebar is rendered optimistically so that a refresh of pages when logged in have SideBar from the beginning.
-  // This improves the experience of refresh on app store pages(when logged in) which are SSG.
-  // Though when logged out, app store pages would temporarily show SideBar until session status is confirmed.
-  if (status !== "loading" && status !== "authenticated") return null;
-  return <SideBar isPlatformUser={isPlatformUser} bannersHeight={bannersHeight} user={data?.user} />;
-}
-
-function SideBar({ bannersHeight, user }: SideBarProps) {
-  const { fetchAndCopyToClipboard } = useCopy();
-  const { t, isLocaleReady } = useLocale();
-  const orgBranding = useOrgBranding();
-  const pathname = usePathname();
-  const isPlatformPages = pathname?.startsWith("/settings/platform");
-  const [isReferalLoading, setIsReferalLoading] = useState(false);
-
-  const publicPageUrl = useMemo(() => {
-    if (!user?.org?.id) return `${process.env.NEXT_PUBLIC_WEBSITE_URL}/${user?.username}`;
-    const publicPageUrl = orgBranding?.slug ? getOrgFullOrigin(orgBranding.slug) : "";
-    return publicPageUrl;
-  }, [orgBranding?.slug, user?.username, user?.org?.id]);
-
-  const sidebarStylingAttributes = {
-    maxHeight: `calc(100vh - ${bannersHeight}px)`,
-    top: `${bannersHeight}px`,
-  };
-
-  const bottomNavItems: NavigationItemType[] = [
-    {
-      name: "view_public_page",
-      href: publicPageUrl,
-      icon: "external-link",
-      target: "__blank",
-    },
-    {
-      name: "copy_public_page_link",
-      href: "",
-      onClick: (e: { preventDefault: () => void }) => {
-        e.preventDefault();
-        navigator.clipboard.writeText(publicPageUrl);
-        showToast(t("link_copied"), "success");
-      },
-      icon: "copy",
-    },
-    IS_CALCOM
-      ? {
-          name: "copy_referral_link",
-          href: "",
-          onClick: (e: { preventDefault: () => void }) => {
-            e.preventDefault();
-            setIsReferalLoading(true);
-            // Create an artificial delay to show the loading state so it doesnt flicker if this request is fast
-            setTimeout(() => {
-              fetchAndCopyToClipboard(
-                fetch("/api/generate-referral-link", {
-                  method: "POST",
-                })
-                  .then((res) => res.json())
-                  .then((res) => res.shortLink),
-                {
-                  onSuccess: () => showToast(t("link_copied"), "success"),
-                  onFailure: () => showToast("Copy to clipboard failed", "error"),
-                }
-              );
-              setIsReferalLoading(false);
-            }, 1000);
-          },
-          icon: "gift",
-          isLoading: isReferalLoading,
-        }
-      : null,
-    {
-      name: "settings",
-      href: user?.org ? `/settings/organizations/profile` : "/settings/my-account/profile",
-      icon: "settings",
-    },
-  ].filter(Boolean) as NavigationItemType[];
-
-  return (
-    <div className="relative">
-      <aside
-        style={!isPlatformPages ? sidebarStylingAttributes : {}}
-        className={classNames(
-          "bg-muted border-muted fixed left-0 hidden h-full w-14 flex-col overflow-y-auto overflow-x-hidden border-r md:sticky md:flex lg:w-56 lg:px-3",
-          !isPlatformPages && "max-h-screen"
-        )}>
-        <div className="flex h-full flex-col justify-between py-3 lg:pt-4">
-          <header className="todesktop:-mt-3 todesktop:flex-col-reverse todesktop:[-webkit-app-region:drag] items-center justify-between md:hidden lg:flex">
-            {orgBranding ? (
-              !ENABLE_PROFILE_SWITCHER ? (
-                <Link href="/settings/organizations/profile" className="w-full px-1.5">
-                  <div className="flex items-center gap-2 font-medium">
-                    <Avatar
-                      alt={`${orgBranding.name} logo`}
-                      imageSrc={getPlaceholderAvatar(orgBranding.logoUrl, orgBranding.name)}
-                      size="xsm"
-                    />
-                    <p className="text line-clamp-1 text-sm">
-                      <span>{orgBranding.name}</span>
-                    </p>
-                  </div>
-                </Link>
-              ) : (
-                <ProfileDropdown />
-              )
-            ) : (
-              <div data-testid="user-dropdown-trigger" className="todesktop:mt-4 w-full">
-                <span className="hidden lg:inline">
-                  <UserDropdown />
-                </span>
-                <span className="hidden md:inline lg:hidden">
-                  <UserDropdown small />
-                </span>
-              </div>
-            )}
-            <div className="flex w-full justify-end rtl:space-x-reverse">
-              <button
-                color="minimal"
-                onClick={() => window.history.back()}
-                className="todesktop:block hover:text-emphasis text-subtle group hidden text-sm font-medium">
-                <Icon
-                  name="arrow-left"
-                  className="group-hover:text-emphasis text-subtle h-4 w-4 flex-shrink-0"
-                />
-              </button>
-              <button
-                color="minimal"
-                onClick={() => window.history.forward()}
-                className="todesktop:block hover:text-emphasis text-subtle group hidden text-sm font-medium">
-                <Icon
-                  name="arrow-right"
-                  className="group-hover:text-emphasis text-subtle h-4 w-4 flex-shrink-0"
-                />
-              </button>
-              {!!orgBranding && (
-                <div data-testid="user-dropdown-trigger" className="flex items-center">
-                  <UserDropdown small />
-                </div>
-              )}
-              <KBarTrigger />
-            </div>
-          </header>
-          {/* logo icon for tablet */}
-          <Link href="/event-types" className="text-center md:inline lg:hidden">
-            <Logo small icon />
-          </Link>
-          <Navigation isPlatformNavigation={isPlatformPages} />
-        </div>
-
-        {!isPlatformPages && (
-          <div>
-            <Tips />
-            {bottomNavItems.map((item, index) => (
-              <Tooltip side="right" content={t(item.name)} className="lg:hidden" key={item.name}>
-                <ButtonOrLink
-                  id={item.name}
-                  href={item.href || undefined}
-                  aria-label={t(item.name)}
-                  target={item.target}
-                  className={classNames(
-                    "text-left",
-                    "[&[aria-current='page']]:bg-emphasis text-default justify-right group flex items-center rounded-md px-2 py-1.5 text-sm font-medium transition",
-                    "[&[aria-current='page']]:text-emphasis mt-0.5 w-full text-sm",
-                    isLocaleReady ? "hover:bg-emphasis hover:text-emphasis" : "",
-                    index === 0 && "mt-3"
-                  )}
-                  onClick={item.onClick}>
-                  {!!item.icon && (
-                    <Icon
-                      name={item.isLoading ? "rotate-cw" : item.icon}
-                      className={classNames(
-                        "h-4 w-4 flex-shrink-0 [&[aria-current='page']]:text-inherit",
-                        "me-3 md:mx-auto lg:ltr:mr-2 lg:rtl:ml-2",
-                        item.isLoading && "animate-spin"
-                      )}
-                      aria-hidden="true"
-                    />
-                  )}
-                  {isLocaleReady ? (
-                    <span className="hidden w-full justify-between lg:flex">
-                      <div className="flex">{t(item.name)}</div>
-                    </span>
-                  ) : (
-                    <SkeletonText className="h-[20px] w-full" />
-                  )}
-                </ButtonOrLink>
-              </Tooltip>
-            ))}
-            {!IS_VISUAL_REGRESSION_TESTING && <Credits />}
-          </div>
-        )}
-      </aside>
-    </div>
-  );
-}
-
 export function ShellMain(props: LayoutProps) {
   const router = useRouter();
   const { isLocaleReady, t } = useLocale();
@@ -491,40 +251,6 @@ function MainContainer({
   );
 }
 
-function TopNavContainer() {
-  const { status } = useSession();
-  if (status !== "authenticated") return null;
-  return <TopNav />;
-}
-
-function TopNav() {
-  const isEmbed = useIsEmbed();
-  const { t } = useLocale();
-  return (
-    <>
-      <nav
-        style={isEmbed ? { display: "none" } : {}}
-        className="bg-muted border-subtle sticky top-0 z-40 flex w-full items-center justify-between border-b bg-opacity-50 px-4 py-1.5 backdrop-blur-lg sm:p-4 md:hidden">
-        <Link href="/event-types">
-          <Logo />
-        </Link>
-        <div className="flex items-center gap-2 self-center">
-          <span className="hover:bg-muted hover:text-emphasis text-default group flex items-center rounded-full text-sm font-medium transition lg:hidden">
-            <KBarTrigger />
-          </span>
-          <button className="hover:bg-muted hover:text-subtle text-muted rounded-full p-1 transition focus:outline-none focus:ring-2 focus:ring-black focus:ring-offset-2">
-            <span className="sr-only">{t("settings")}</span>
-            <Link href="/settings/my-account/profile">
-              <Icon name="settings" className="text-default h-4 w-4" aria-hidden="true" />
-            </Link>
-          </button>
-          <UserDropdown small />
-        </div>
-      </nav>
-    </>
-  );
-}
-
 export const MobileNavigationMoreItems = () => {
   const { mobileNavigationMoreItems } = getDesktopNavigationItems();
 
diff --git a/packages/features/shell/SideBar.tsx b/packages/features/shell/SideBar.tsx
new file mode 100644
index 00000000000000..f43fa22d94b0ea
--- /dev/null
+++ b/packages/features/shell/SideBar.tsx
@@ -0,0 +1,329 @@
+import type { User as UserAuth } from "next-auth";
+import { useSession } from "next-auth/react";
+import dynamic from "next/dynamic";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { useState, useMemo } from "react";
+import { type NavigationItemType } from "shell/navigation/NavigationItem";
+
+import { useOrgBranding } from "@calcom/features/ee/organizations/context/provider";
+import { getOrgFullOrigin } from "@calcom/features/ee/organizations/lib/orgDomains";
+import { classNames } from "@calcom/lib";
+import { IS_CALCOM, IS_VISUAL_REGRESSION_TESTING, ENABLE_PROFILE_SWITCHER } from "@calcom/lib/constants";
+import { getPlaceholderAvatar } from "@calcom/lib/defaultAvatarImage";
+import { useCopy } from "@calcom/lib/hooks/useCopy";
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { Avatar, Button, ButtonOrLink, Credits, Icon, SkeletonText, Tooltip, Logo } from "@calcom/ui";
+
+import { KBarTrigger } from "../kbar/kbar";
+import { Navigation } from "./navigation/Navigation";
+import { ProfileDropdown } from "./user-dropdown/ProfileDropdown";
+import { UserDropdown } from "./user-dropdown/UserDropdown";
+
+// need to import without ssr to prevent hydration errors
+const Tips = dynamic(() => import("@calcom/features/tips").then((mod) => mod.Tips), {
+  ssr: false,
+});
+
+export type SideBarContainerProps = {
+  bannersHeight: number;
+  isPlatformUser?: boolean;
+};
+
+export type SideBarProps = {
+  bannersHeight: number;
+  user?: UserAuth | null;
+  isPlatformUser?: boolean;
+};
+
+export function SideBarContainer({ bannersHeight, isPlatformUser = false }: SideBarContainerProps) {
+  const { status, data } = useSession();
+
+  // Make sure that Sidebar is rendered optimistically so that a refresh of pages when logged in have SideBar from the beginning.
+  // This improves the experience of refresh on app store pages(when logged in) which are SSG.
+  // Though when logged out, app store pages would temporarily show SideBar until session status is confirmed.
+  if (status !== "loading" && status !== "authenticated") return null;
+  return <SideBar isPlatformUser={isPlatformUser} bannersHeight={bannersHeight} user={data?.user} />;
+}
+
+export function SideBar({ bannersHeight, user }: SideBarProps) {
+  const { fetchAndCopyToClipboard } = useCopy();
+  const { t, isLocaleReady } = useLocale();
+  const orgBranding = useOrgBranding();
+  const pathname = usePathname();
+  const isPlatformPages = pathname?.startsWith("/settings/platform");
+  const [isReferalLoading, setIsReferalLoading] = useState(false);
+
+  const publicPageUrl = useMemo(() => {
+    if (!user?.org?.id) return `${process.env.NEXT_PUBLIC_WEBSITE_URL}/${user?.username}`;
+    const publicPageUrl = orgBranding?.slug ? getOrgFullOrigin(orgBranding.slug) : "";
+    return publicPageUrl;
+  }, [orgBranding?.slug, user?.username, user?.org?.id]);
+
+  const sidebarStylingAttributes = {
+    maxHeight: `calc(100vh - ${bannersHeight}px)`,
+    top: `${bannersHeight}px`,
+  };
+
+  // Todo: extract this to a hook
+  const bottomNavItems: NavigationItemType[] = [
+    {
+      name: "view_public_page",
+      href: publicPageUrl,
+      icon: "external-link",
+      target: "__blank",
+    },
+    {
+      name: "copy_public_page_link",
+      href: "",
+      onClick: (e: { preventDefault: () => void }) => {
+        e.preventDefault();
+        navigator.clipboard.writeText(publicPageUrl);
+        showToast(t("link_copied"), "success");
+      },
+      icon: "copy",
+    },
+    IS_CALCOM
+      ? {
+          name: "copy_referral_link",
+          href: "",
+          onClick: (e: { preventDefault: () => void }) => {
+            e.preventDefault();
+            setIsReferalLoading(true);
+            // Create an artificial delay to show the loading state so it doesnt flicker if this request is fast
+            setTimeout(() => {
+              fetchAndCopyToClipboard(
+                fetch("/api/generate-referral-link", {
+                  method: "POST",
+                })
+                  .then((res) => res.json())
+                  .then((res) => res.shortLink),
+                {
+                  onSuccess: () => showToast(t("link_copied"), "success"),
+                  onFailure: () => showToast("Copy to clipboard failed", "error"),
+                }
+              );
+              setIsReferalLoading(false);
+            }, 1000);
+          },
+          icon: "gift",
+          isLoading: isReferalLoading,
+        }
+      : null,
+    {
+      name: "settings",
+      href: user?.org ? `/settings/organizations/profile` : "/settings/my-account/profile",
+      icon: "settings",
+    },
+  ].filter(Boolean) as NavigationItemType[];
+
+  return (
+    <div className="relative">
+      <aside
+        style={!isPlatformPages ? sidebarStylingAttributes : {}}
+        className={classNames(
+          "bg-muted border-muted fixed left-0 hidden h-full w-14 flex-col overflow-y-auto overflow-x-hidden border-r md:sticky md:flex lg:w-56 lg:px-3",
+          !isPlatformPages && "max-h-screen"
+        )}>
+        <div className="flex h-full flex-col justify-between py-3 lg:pt-4">
+          <header className="todesktop:-mt-3 todesktop:flex-col-reverse todesktop:[-webkit-app-region:drag] items-center justify-between md:hidden lg:flex">
+            {orgBranding ? (
+              !ENABLE_PROFILE_SWITCHER ? (
+                <Link href="/settings/organizations/profile" className="w-full px-1.5">
+                  <div className="flex items-center gap-2 font-medium">
+                    <Avatar
+                      alt={`${orgBranding.name} logo`}
+                      imageSrc={getPlaceholderAvatar(orgBranding.logoUrl, orgBranding.name)}
+                      size="xsm"
+                    />
+                    <p className="text line-clamp-1 text-sm">
+                      <span>{orgBranding.name}</span>
+                    </p>
+                  </div>
+                </Link>
+              ) : (
+                <ProfileDropdown />
+              )
+            ) : (
+              <div data-testid="user-dropdown-trigger" className="todesktop:mt-4 w-full">
+                <span className="hidden lg:inline">
+                  <UserDropdown />
+                </span>
+                <span className="hidden md:inline lg:hidden">
+                  <UserDropdown small />
+                </span>
+              </div>
+            )}
+            <div className="flex w-full justify-end rtl:space-x-reverse">
+              <button
+                color="minimal"
+                onClick={() => window.history.back()}
+                className="todesktop:block hover:text-emphasis text-subtle group hidden text-sm font-medium">
+                <Icon
+                  name="arrow-left"
+                  className="group-hover:text-emphasis text-subtle h-4 w-4 flex-shrink-0"
+                />
+              </button>
+              <button
+                color="minimal"
+                onClick={() => window.history.forward()}
+                className="todesktop:block hover:text-emphasis text-subtle group hidden text-sm font-medium">
+                <Icon
+                  name="arrow-right"
+                  className="group-hover:text-emphasis text-subtle h-4 w-4 flex-shrink-0"
+                />
+              </button>
+              {!!orgBranding && (
+                <div data-testid="user-dropdown-trigger" className="flex items-center">
+                  <UserDropdown small />
+                </div>
+              )}
+              <KBarTrigger />
+            </div>
+          </header>
+          {/* logo icon for tablet */}
+          <Link href="/event-types" className="text-center md:inline lg:hidden">
+            <Logo small icon />
+          </Link>
+          <Navigation isPlatformNavigation={isPlatformPages} />
+        </div>
+
+        {!isPlatformPages && (
+          <div>
+            <Tips />
+            {bottomNavItems.map((item, index) => (
+              <Tooltip side="right" content={t(item.name)} className="lg:hidden" key={item.name}>
+                <ButtonOrLink
+                  id={item.name}
+                  href={item.href || undefined}
+                  aria-label={t(item.name)}
+                  target={item.target}
+                  className={classNames(
+                    "text-left",
+                    "[&[aria-current='page']]:bg-emphasis text-default justify-right group flex items-center rounded-md px-2 py-1.5 text-sm font-medium transition",
+                    "[&[aria-current='page']]:text-emphasis mt-0.5 w-full text-sm",
+                    isLocaleReady ? "hover:bg-emphasis hover:text-emphasis" : "",
+                    index === 0 && "mt-3"
+                  )}
+                  onClick={item.onClick}>
+                  {!!item.icon && (
+                    <Icon
+                      name={item.isLoading ? "rotate-cw" : item.icon}
+                      className={classNames(
+                        "h-4 w-4 flex-shrink-0 [&[aria-current='page']]:text-inherit",
+                        "me-3 md:mx-auto lg:ltr:mr-2 lg:rtl:ml-2",
+                        item.isLoading && "animate-spin"
+                      )}
+                      aria-hidden="true"
+                    />
+                  )}
+                  {isLocaleReady ? (
+                    <span className="hidden w-full justify-between lg:flex">
+                      <div className="flex">{t(item.name)}</div>
+                    </span>
+                  ) : (
+                    <SkeletonText className="h-[20px] w-full" />
+                  )}
+                </ButtonOrLink>
+              </Tooltip>
+            ))}
+            {!IS_VISUAL_REGRESSION_TESTING && <Credits />}
+          </div>
+        )}
+      </aside>
+    </div>
+  );
+}
+
+export function ShellMain(props: LayoutProps) {
+  const router = useRouter();
+  const { isLocaleReady, t } = useLocale();
+
+  const { buttonToShow, isLoading, enableNotifications, disableNotifications } = useNotifications();
+
+  return (
+    <>
+      {(props.heading || !!props.backPath) && (
+        <div
+          className={classNames(
+            "flex items-center md:mb-6 md:mt-0",
+            props.smallHeading ? "lg:mb-7" : "lg:mb-8",
+            props.hideHeadingOnMobile ? "mb-0" : "mb-6"
+          )}>
+          {!!props.backPath && (
+            <Button
+              variant="icon"
+              size="sm"
+              color="minimal"
+              onClick={() =>
+                typeof props.backPath === "string" ? router.push(props.backPath as string) : router.back()
+              }
+              StartIcon="arrow-left"
+              aria-label="Go Back"
+              className="rounded-md ltr:mr-2 rtl:ml-2"
+              data-testid="go-back-button"
+            />
+          )}
+          {props.heading && (
+            <header
+              className={classNames(props.large && "py-8", "flex w-full max-w-full items-center truncate")}>
+              {props.HeadingLeftIcon && <div className="ltr:mr-4">{props.HeadingLeftIcon}</div>}
+              <div
+                className={classNames("w-full truncate ltr:mr-4 rtl:ml-4 md:block", props.headerClassName)}>
+                {props.heading && (
+                  <h3
+                    className={classNames(
+                      "font-cal max-w-28 sm:max-w-72 md:max-w-80 text-emphasis inline truncate text-lg font-semibold tracking-wide sm:text-xl md:block xl:max-w-full",
+                      props.smallHeading ? "text-base" : "text-xl",
+                      props.hideHeadingOnMobile && "hidden"
+                    )}>
+                    {!isLocaleReady ? <SkeletonText invisible /> : props.heading}
+                  </h3>
+                )}
+                {props.subtitle && (
+                  <p className="text-default hidden text-sm md:block" data-testid="subtitle">
+                    {!isLocaleReady ? <SkeletonText invisible /> : props.subtitle}
+                  </p>
+                )}
+              </div>
+              {props.beforeCTAactions}
+              {props.CTA && (
+                <div
+                  className={classNames(
+                    props.backPath
+                      ? "relative"
+                      : "pwa:bottom-[max(7rem,_calc(5rem_+_env(safe-area-inset-bottom)))] fixed bottom-20 z-40 ltr:right-4 rtl:left-4 md:z-auto md:ltr:right-0 md:rtl:left-0",
+                    "flex-shrink-0 [-webkit-app-region:no-drag] md:relative md:bottom-auto md:right-auto"
+                  )}>
+                  {isLocaleReady && props.CTA}
+                </div>
+              )}
+              {props.actions && props.actions}
+              {props.heading === "Bookings" && buttonToShow && (
+                <Button
+                  color="primary"
+                  onClick={buttonToShow === ButtonState.ALLOW ? enableNotifications : disableNotifications}
+                  loading={isLoading}
+                  disabled={buttonToShow === ButtonState.DENIED}
+                  tooltipSide="bottom"
+                  tooltip={
+                    buttonToShow === ButtonState.DENIED ? t("you_have_denied_notifications") : undefined
+                  }>
+                  {t(
+                    buttonToShow === ButtonState.DISABLE
+                      ? "disable_browser_notifications"
+                      : "allow_browser_notifications"
+                  )}
+                </Button>
+              )}
+            </header>
+          )}
+        </div>
+      )}
+      {props.afterHeading && <>{props.afterHeading}</>}
+      <div className={classNames(props.flexChildrenContainer && "flex flex-1 flex-col")}>
+        {props.children}
+      </div>
+    </>
+  );
+}
diff --git a/packages/features/shell/TopNav.tsx b/packages/features/shell/TopNav.tsx
new file mode 100644
index 00000000000000..3cb5756871f2a7
--- /dev/null
+++ b/packages/features/shell/TopNav.tsx
@@ -0,0 +1,43 @@
+import { useSession } from "next-auth/react";
+import Link from "next/link";
+
+import { useIsEmbed } from "@calcom/embed-core/embed-iframe";
+import { KBarTrigger } from "@calcom/features/kbar/Kbar";
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { Icon, Logo } from "@calcom/ui";
+
+import { UserDropdown } from "./user-dropdown/UserDropdown";
+
+export function TopNavContainer() {
+  const { status } = useSession();
+  if (status !== "authenticated") return null;
+  return <TopNav />;
+}
+
+function TopNav() {
+  const isEmbed = useIsEmbed();
+  const { t } = useLocale();
+  return (
+    <>
+      <nav
+        style={isEmbed ? { display: "none" } : {}}
+        className="bg-muted border-subtle sticky top-0 z-40 flex w-full items-center justify-between border-b bg-opacity-50 px-4 py-1.5 backdrop-blur-lg sm:p-4 md:hidden">
+        <Link href="/event-types">
+          <Logo />
+        </Link>
+        <div className="flex items-center gap-2 self-center">
+          <span className="hover:bg-muted hover:text-emphasis text-default group flex items-center rounded-full text-sm font-medium transition lg:hidden">
+            <KBarTrigger />
+          </span>
+          <button className="hover:bg-muted hover:text-subtle text-muted rounded-full p-1 transition focus:outline-none focus:ring-2 focus:ring-black focus:ring-offset-2">
+            <span className="sr-only">{t("settings")}</span>
+            <Link href="/settings/my-account/profile">
+              <Icon name="settings" className="text-default h-4 w-4" aria-hidden="true" />
+            </Link>
+          </button>
+          <UserDropdown small />
+        </div>
+      </nav>
+    </>
+  );
+}
diff --git a/packages/features/shell/navigation/Navigation.tsx b/packages/features/shell/navigation/Navigation.tsx
index 3db4c6ae9b6863..62eb71be3d1df1 100644
--- a/packages/features/shell/navigation/Navigation.tsx
+++ b/packages/features/shell/navigation/Navigation.tsx
@@ -1,5 +1,9 @@
+import { useSession } from "next-auth/react";
+
+import { useIsEmbed } from "@calcom/embed-core/embed-iframe";
 import UnconfirmedBookingBadge from "@calcom/features/bookings/UnconfirmedBookingBadge";
 import { KBarTrigger } from "@calcom/features/kbar/Kbar";
+import { classNames } from "@calcom/lib";
 
 import { TeamInviteBadge } from "../TeamInviteBadge";
 import type { NavigationItemType } from "./NavigationItem";

From 963be7ba5725bc9b48f5e4abf4a5a4931ad57e87 Mon Sep 17 00:00:00 2001
From: sean-brydon <sean@cal.com>
Date: Tue, 1 Oct 2024 13:37:42 +0100
Subject: [PATCH 11/17] fix type errors

---
 .../hooks/useRedirectToOnboardingIfNeeded.tsx |  1 +
 packages/features/shell/Shell.tsx             | 13 -------------
 packages/features/shell/SideBar.tsx           | 19 ++++++++++++++++---
 .../features/shell/navigation/Navigation.tsx  | 16 ++++++++++++++--
 .../shell/user-dropdown/ProfileDropdown.tsx   |  2 ++
 .../shell/user-dropdown/UserDropdown.tsx      |  1 +
 6 files changed, 34 insertions(+), 18 deletions(-)

diff --git a/packages/features/auth/lib/hooks/useRedirectToOnboardingIfNeeded.tsx b/packages/features/auth/lib/hooks/useRedirectToOnboardingIfNeeded.tsx
index 41daddf8117343..51355e5be9781e 100644
--- a/packages/features/auth/lib/hooks/useRedirectToOnboardingIfNeeded.tsx
+++ b/packages/features/auth/lib/hooks/useRedirectToOnboardingIfNeeded.tsx
@@ -1,3 +1,4 @@
+import type { User } from "@prisma/client";
 import { useRouter } from "next/navigation";
 import { useEffect } from "react";
 
diff --git a/packages/features/shell/Shell.tsx b/packages/features/shell/Shell.tsx
index deea207ba5e739..932c7860c9586f 100644
--- a/packages/features/shell/Shell.tsx
+++ b/packages/features/shell/Shell.tsx
@@ -21,7 +21,6 @@ import { TopNavContainer } from "./TopNav";
 import { BannerContainer } from "./banners/LayoutBanner";
 import { useBanners } from "./banners/useBanners";
 import { MobileNavigationContainer } from "./navigation/Navigation";
-import { MobileNavigationMoreItem } from "./navigation/NavigationItem";
 import { useAppTheme } from "./useAppTheme";
 
 const Layout = (props: LayoutProps) => {
@@ -250,15 +249,3 @@ function MainContainer({
     </main>
   );
 }
-
-export const MobileNavigationMoreItems = () => {
-  const { mobileNavigationMoreItems } = getDesktopNavigationItems();
-
-  return (
-    <ul className="border-subtle mt-2 rounded-md border">
-      {mobileNavigationMoreItems.map((item) => (
-        <MobileNavigationMoreItem key={item.name} item={item} />
-      ))}
-    </ul>
-  );
-};
diff --git a/packages/features/shell/SideBar.tsx b/packages/features/shell/SideBar.tsx
index f43fa22d94b0ea..961b0bbff7e627 100644
--- a/packages/features/shell/SideBar.tsx
+++ b/packages/features/shell/SideBar.tsx
@@ -3,8 +3,8 @@ import { useSession } from "next-auth/react";
 import dynamic from "next/dynamic";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
+import { useRouter } from "next/navigation";
 import { useState, useMemo } from "react";
-import { type NavigationItemType } from "shell/navigation/NavigationItem";
 
 import { useOrgBranding } from "@calcom/features/ee/organizations/context/provider";
 import { getOrgFullOrigin } from "@calcom/features/ee/organizations/lib/orgDomains";
@@ -13,10 +13,23 @@ import { IS_CALCOM, IS_VISUAL_REGRESSION_TESTING, ENABLE_PROFILE_SWITCHER } from
 import { getPlaceholderAvatar } from "@calcom/lib/defaultAvatarImage";
 import { useCopy } from "@calcom/lib/hooks/useCopy";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Avatar, Button, ButtonOrLink, Credits, Icon, SkeletonText, Tooltip, Logo } from "@calcom/ui";
+import { useNotifications, ButtonState } from "@calcom/lib/hooks/useNotifications";
+import {
+  Avatar,
+  Button,
+  ButtonOrLink,
+  Credits,
+  Icon,
+  SkeletonText,
+  Tooltip,
+  Logo,
+  showToast,
+} from "@calcom/ui";
 
-import { KBarTrigger } from "../kbar/kbar";
+import { KBarTrigger } from "../kbar/Kbar";
+import type { LayoutProps } from "./Shell";
 import { Navigation } from "./navigation/Navigation";
+import { type NavigationItemType } from "./navigation/NavigationItem";
 import { ProfileDropdown } from "./user-dropdown/ProfileDropdown";
 import { UserDropdown } from "./user-dropdown/UserDropdown";
 
diff --git a/packages/features/shell/navigation/Navigation.tsx b/packages/features/shell/navigation/Navigation.tsx
index 62eb71be3d1df1..4e5b45bb99489d 100644
--- a/packages/features/shell/navigation/Navigation.tsx
+++ b/packages/features/shell/navigation/Navigation.tsx
@@ -7,7 +7,7 @@ import { classNames } from "@calcom/lib";
 
 import { TeamInviteBadge } from "../TeamInviteBadge";
 import type { NavigationItemType } from "./NavigationItem";
-import { NavigationItem, MobileNavigationItem } from "./NavigationItem";
+import { NavigationItem, MobileNavigationItem, MobileNavigationMoreItem } from "./NavigationItem";
 
 export const MORE_SEPARATOR_NAME = "more";
 
@@ -121,7 +121,7 @@ const platformNavigation: NavigationItemType[] = [
   },
 ];
 
-const getDesktopNavigationItems = (isPlatformNavigation = false) => {
+export const getDesktopNavigationItems = (isPlatformNavigation = false) => {
   const navigationType = !isPlatformNavigation ? navigation : platformNavigation;
   const moreSeparatorIndex = navigationType.findIndex((item) => item.name === MORE_SEPARATOR_NAME);
 
@@ -191,3 +191,15 @@ const MobileNavigation = ({ isPlatformNavigation = false }: { isPlatformNavigati
     </>
   );
 };
+
+export const MobileNavigationMoreItems = () => {
+  const { mobileNavigationMoreItems } = getDesktopNavigationItems();
+
+  return (
+    <ul className="border-subtle mt-2 rounded-md border">
+      {mobileNavigationMoreItems.map((item) => (
+        <MobileNavigationMoreItem key={item.name} item={item} />
+      ))}
+    </ul>
+  );
+};
diff --git a/packages/features/shell/user-dropdown/ProfileDropdown.tsx b/packages/features/shell/user-dropdown/ProfileDropdown.tsx
index 4a21edb60a226b..f2798dfb0cd1d7 100644
--- a/packages/features/shell/user-dropdown/ProfileDropdown.tsx
+++ b/packages/features/shell/user-dropdown/ProfileDropdown.tsx
@@ -1,6 +1,8 @@
 import { useSession } from "next-auth/react";
 import { useState } from "react";
 
+import { classNames } from "@calcom/lib";
+import { ENABLE_PROFILE_SWITCHER } from "@calcom/lib/constants";
 import { useRefreshData } from "@calcom/lib/hooks/useRefreshData";
 import { trpc } from "@calcom/trpc";
 import {
diff --git a/packages/features/shell/user-dropdown/UserDropdown.tsx b/packages/features/shell/user-dropdown/UserDropdown.tsx
index 696766dee4013f..85394977282db9 100644
--- a/packages/features/shell/user-dropdown/UserDropdown.tsx
+++ b/packages/features/shell/user-dropdown/UserDropdown.tsx
@@ -1,3 +1,4 @@
+import { signOut } from "next-auth/react";
 import { usePathname } from "next/navigation";
 import { useEffect, useState } from "react";
 

From a89a753d475232fdb8a0e6afbeba6a2a4862dbe2 Mon Sep 17 00:00:00 2001
From: sean-brydon <sean@cal.com>
Date: Tue, 1 Oct 2024 13:44:28 +0100
Subject: [PATCH 12/17] fix banners being an async call

---
 packages/features/shell/banners/useBanners.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/features/shell/banners/useBanners.ts b/packages/features/shell/banners/useBanners.ts
index 0aab3d66672072..3dd1f5b61d90c0 100644
--- a/packages/features/shell/banners/useBanners.ts
+++ b/packages/features/shell/banners/useBanners.ts
@@ -25,7 +25,7 @@ const _useBanners = () => {
   return allBanners;
 };
 
-const useBannersHeight = (banners: AllBannerProps) => {
+const useBannersHeight = (banners?: AllBannerProps) => {
   const bannersHeight = useMemo(() => {
     const activeBanners =
       banners &&

From 9e9f98151601a00dc3c8804410f3277ec85a0a07 Mon Sep 17 00:00:00 2001
From: sean-brydon <sean@cal.com>
Date: Tue, 1 Oct 2024 13:55:54 +0100
Subject: [PATCH 13/17] fix types

---
 packages/features/shell/banners/LayoutBanner.tsx      | 8 ++++----
 packages/features/shell/banners/useBanners.ts         | 2 +-
 packages/features/shell/navigation/NavigationItem.tsx | 2 +-
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/features/shell/banners/LayoutBanner.tsx b/packages/features/shell/banners/LayoutBanner.tsx
index 5a894f427a07ec..7fdd2f309f04d7 100644
--- a/packages/features/shell/banners/LayoutBanner.tsx
+++ b/packages/features/shell/banners/LayoutBanner.tsx
@@ -57,10 +57,10 @@ interface BannerContainerProps {
 export const BannerContainer: React.FC<BannerContainerProps> = ({ banners }) => {
   return (
     <div className="sticky top-0 z-10 w-full divide-y divide-black">
-      {Object.entries(banners).map(([key, data]) => {
-        const BannerComponentToRender = BannerComponent[key as BannerType];
-        if (BannerComponentToRender) {
-          return <BannerComponentToRender key={key} data={data} />;
+      {Object.keys(banners).map((key) => {
+        const Banner = BannerComponent[key as keyof typeof BannerComponent];
+        if (Banner && banners[key as keyof AllBannerProps]) {
+          return <Banner data={banners[key as keyof AllBannerProps]} key={key} />;
         }
         return null;
       })}
diff --git a/packages/features/shell/banners/useBanners.ts b/packages/features/shell/banners/useBanners.ts
index 3dd1f5b61d90c0..413e025e2ec8bf 100644
--- a/packages/features/shell/banners/useBanners.ts
+++ b/packages/features/shell/banners/useBanners.ts
@@ -25,7 +25,7 @@ const _useBanners = () => {
   return allBanners;
 };
 
-const useBannersHeight = (banners?: AllBannerProps) => {
+const useBannersHeight = (banners: AllBannerProps | undefined) => {
   const bannersHeight = useMemo(() => {
     const activeBanners =
       banners &&
diff --git a/packages/features/shell/navigation/NavigationItem.tsx b/packages/features/shell/navigation/NavigationItem.tsx
index ee11d77951d558..2dcd5f4c92588a 100644
--- a/packages/features/shell/navigation/NavigationItem.tsx
+++ b/packages/features/shell/navigation/NavigationItem.tsx
@@ -5,7 +5,7 @@ import React, { Fragment } from "react";
 import { classNames } from "@calcom/lib";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Tooltip, Icon, SkeletonText } from "@calcom/ui";
-import type { IconName } from "@calcom/ui/icon";
+import type { IconName } from "@calcom/ui";
 
 import { useShouldDisplayNavigationItem } from "./useShouldDisplayNavigationItem";
 

From 8c38597003ca92deb1e65ae737ea874cb81cc0e2 Mon Sep 17 00:00:00 2001
From: sean-brydon <sean@cal.com>
Date: Tue, 1 Oct 2024 14:08:08 +0100
Subject: [PATCH 14/17] fix banner prop type

---
 packages/features/shell/banners/useBanners.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/features/shell/banners/useBanners.ts b/packages/features/shell/banners/useBanners.ts
index 413e025e2ec8bf..7b8d60b8f4533d 100644
--- a/packages/features/shell/banners/useBanners.ts
+++ b/packages/features/shell/banners/useBanners.ts
@@ -25,7 +25,7 @@ const _useBanners = () => {
   return allBanners;
 };
 
-const useBannersHeight = (banners: AllBannerProps | undefined) => {
+const useBannersHeight = (banners: AllBannerProps | null) => {
   const bannersHeight = useMemo(() => {
     const activeBanners =
       banners &&

From b9b2eb231f4871c901428dc6c3c2f036d0bb52ec Mon Sep 17 00:00:00 2001
From: sean-brydon <sean@cal.com>
Date: Wed, 2 Oct 2024 09:53:38 +0100
Subject: [PATCH 15/17] fix mobile nav item import

---
 apps/web/modules/more/more-page-view.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/apps/web/modules/more/more-page-view.tsx b/apps/web/modules/more/more-page-view.tsx
index ae5ff2c01d0104..185ec080f9d45e 100644
--- a/apps/web/modules/more/more-page-view.tsx
+++ b/apps/web/modules/more/more-page-view.tsx
@@ -1,6 +1,7 @@
 "use client";
 
-import Shell, { MobileNavigationMoreItems } from "@calcom/features/shell/Shell";
+import Shell from "@calcom/features/shell/Shell";
+import { MobileNavigationMoreItems } from "@calcom/features/shell/navigation/Navigation";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 
 export default function MorePage() {

From 38c050c9fefa716967700a98fca16ef76157f763 Mon Sep 17 00:00:00 2001
From: sean-brydon <sean@cal.com>
Date: Wed, 2 Oct 2024 10:00:30 +0100
Subject: [PATCH 16/17] fix banner types

---
 packages/features/shell/banners/LayoutBanner.tsx | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/packages/features/shell/banners/LayoutBanner.tsx b/packages/features/shell/banners/LayoutBanner.tsx
index 7fdd2f309f04d7..7f550e75fecfed 100644
--- a/packages/features/shell/banners/LayoutBanner.tsx
+++ b/packages/features/shell/banners/LayoutBanner.tsx
@@ -57,10 +57,11 @@ interface BannerContainerProps {
 export const BannerContainer: React.FC<BannerContainerProps> = ({ banners }) => {
   return (
     <div className="sticky top-0 z-10 w-full divide-y divide-black">
-      {Object.keys(banners).map((key) => {
-        const Banner = BannerComponent[key as keyof typeof BannerComponent];
-        if (Banner && banners[key as keyof AllBannerProps]) {
-          return <Banner data={banners[key as keyof AllBannerProps]} key={key} />;
+      {(Object.keys(banners) as Array<keyof BannerTypeProps>).map((key) => {
+        const Banner = BannerComponent[key];
+        const bannerData = banners[key];
+        if (Banner && bannerData) {
+          return <Banner data={bannerData} key={key} />;
         }
         return null;
       })}

From a7ebefff85e8ce0dfb7337fcf7a20cca97b81478 Mon Sep 17 00:00:00 2001
From: sean-brydon <sean@cal.com>
Date: Wed, 2 Oct 2024 10:32:33 +0100
Subject: [PATCH 17/17] (revert) layout banner render method to fix type error

---
 .../features/shell/banners/LayoutBanner.tsx   | 28 +++++++++++++++----
 1 file changed, 22 insertions(+), 6 deletions(-)

diff --git a/packages/features/shell/banners/LayoutBanner.tsx b/packages/features/shell/banners/LayoutBanner.tsx
index 7f550e75fecfed..6c9539a228f73b 100644
--- a/packages/features/shell/banners/LayoutBanner.tsx
+++ b/packages/features/shell/banners/LayoutBanner.tsx
@@ -57,13 +57,29 @@ interface BannerContainerProps {
 export const BannerContainer: React.FC<BannerContainerProps> = ({ banners }) => {
   return (
     <div className="sticky top-0 z-10 w-full divide-y divide-black">
-      {(Object.keys(banners) as Array<keyof BannerTypeProps>).map((key) => {
-        const Banner = BannerComponent[key];
-        const bannerData = banners[key];
-        if (Banner && bannerData) {
-          return <Banner data={bannerData} key={key} />;
+      {Object.keys(banners).map((key) => {
+        if (key === "teamUpgradeBanner") {
+          const Banner = BannerComponent[key];
+          return <Banner data={banners[key]} key={key} />;
+        } else if (key === "orgUpgradeBanner") {
+          const Banner = BannerComponent[key];
+          return <Banner data={banners[key]} key={key} />;
+        } else if (key === "verifyEmailBanner") {
+          const Banner = BannerComponent[key];
+          return <Banner data={banners[key]} key={key} />;
+        } else if (key === "adminPasswordBanner") {
+          const Banner = BannerComponent[key];
+          return <Banner data={banners[key]} key={key} />;
+        } else if (key === "impersonationBanner") {
+          const Banner = BannerComponent[key];
+          return <Banner data={banners[key]} key={key} />;
+        } else if (key === "calendarCredentialBanner") {
+          const Banner = BannerComponent[key];
+          return <Banner data={banners[key]} key={key} />;
+        } else if (key === "invalidAppCredentialBanners") {
+          const Banner = BannerComponent[key];
+          return <Banner data={banners[key]} key={key} />;
         }
-        return null;
       })}
     </div>
   );