perf: layout persistence and reduced bundle size (calcom#18889)

hbjORbj · PeerRich · web-flow · commit ee31633e2b03 · 2025-01-27T11:08:47.000Z
* create /(main-nav)/layout.tsx file that uses Shell

* Add ShellMainAppDir that clones ShellMain but with client/server separation

* event-types, availability, bookings

* update pagesAndRewritePaths logic

* fix

---------

Co-authored-by: Peer Richelsen &lt;peeroke@gmail.com&gt;
diff --git a/apps/web/app/(use-page-wrapper)/(main-nav)/ShellMainAppDir.tsx b/apps/web/app/(use-page-wrapper)/(main-nav)/ShellMainAppDir.tsx
@@ -0,0 +1,65 @@
+import { ShellMainAppDirBackButton } from "app/(use-page-wrapper)/(main-nav)/ShellMainAppDirBackButton";
+import classNames from "classnames";
+
+import type { LayoutProps } from "@calcom/features/shell/Shell";
+
+// Copied from `ShellMain` but with a different `ShellMainAppDirBackButton` import
+// for client/server component separation
+export function ShellMainAppDir(props: LayoutProps) {
+  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 && <ShellMainAppDirBackButton backPath={props.backPath} />}
+          {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 text-emphasis max-w-28 sm:max-w-72 md:max-w-80 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"
+                    )}>
+                    {props.heading}
+                  </h3>
+                )}
+                {props.subtitle && (
+                  <p className="text-default hidden text-sm md:block" data-testid="subtitle">
+                    {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"
+                  )}>
+                  {props.CTA}
+                </div>
+              )}
+              {props.actions && props.actions}
+            </header>
+          )}
+        </div>
+      )}
+      {props.afterHeading && <>{props.afterHeading}</>}
+
+      <div className={classNames(props.flexChildrenContainer && "flex flex-1 flex-col")}>
+        {props.children}
+      </div>
+    </>
+  );
+}
diff --git a/apps/web/app/(use-page-wrapper)/(main-nav)/ShellMainAppDirBackButton.tsx b/apps/web/app/(use-page-wrapper)/(main-nav)/ShellMainAppDirBackButton.tsx
@@ -0,0 +1,22 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+
+import type { LayoutProps } from "@calcom/features/shell/Shell";
+import { Button } from "@calcom/ui";
+
+export const ShellMainAppDirBackButton = ({ backPath }: { backPath: LayoutProps["backPath"] }) => {
+  const router = useRouter();
+  return (
+    <Button
+      variant="icon"
+      size="sm"
+      color="minimal"
+      onClick={() => (typeof backPath === "string" ? router.push(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"
+    />
+  );
+};
diff --git a/apps/web/app/(use-page-wrapper)/(main-nav)/availability/page.tsx b/apps/web/app/(use-page-wrapper)/(main-nav)/availability/page.tsx
@@ -1,11 +1,13 @@
-import { _generateMetadata } from "app/_utils";
+import { _generateMetadata, getTranslate } from "app/_utils";
 // import { cookies, headers } from "next/headers";
 import { notFound } from "next/navigation";
 
 // import { getServerSession } from "@calcom/features/auth/lib/getServerSession";
 // import { buildLegacyRequest } from "@lib/buildLegacyCtx";
 // import { OrganizationRepository } from "@calcom/lib/server/repository/organization";
-import AvailabilityPage from "~/availability/availability-view";
+import AvailabilityPage, { AvailabilityCTA } from "~/availability/availability-view";
+
+import { ShellMainAppDir } from "../ShellMainAppDir";
 
 export const generateMetadata = async () => {
   return await _generateMetadata(
@@ -27,10 +29,14 @@ const Page = async () => {
     //   orgId,
     //   userId,
     // });
+    const t = await getTranslate();
     return (
-      <AvailabilityPage
-      //  currentOrg={currentOrg}
-      />
+      <ShellMainAppDir
+        heading={t("availability")}
+        subtitle={t("configure_availability")}
+        CTA={<AvailabilityCTA />}>
+        <AvailabilityPage />
+      </ShellMainAppDir>
     );
   } catch {
     notFound();
diff --git a/apps/web/app/(use-page-wrapper)/(main-nav)/bookings/[status]/page.tsx b/apps/web/app/(use-page-wrapper)/(main-nav)/bookings/[status]/page.tsx
@@ -1,5 +1,6 @@
+import { ShellMainAppDir } from "app/(use-page-wrapper)/(main-nav)/ShellMainAppDir";
 import type { PageProps } from "app/_types";
-import { _generateMetadata } from "app/_utils";
+import { _generateMetadata, getTranslate } from "app/_utils";
 import { redirect } from "next/navigation";
 import { z } from "zod";
 
@@ -16,13 +17,18 @@ export const generateMetadata = async () =>
     (t) => t("bookings_description")
   );
 
-const Page = ({ params }: PageProps) => {
+const Page = async ({ params }: PageProps) => {
   const parsed = querySchema.safeParse(params);
   if (!parsed.success) {
     redirect("/bookings/upcoming");
   }
+  const t = await getTranslate();
 
-  return <BookingsList status={parsed.data.status} />;
+  return (
+    <ShellMainAppDir heading={t("bookings")} subtitle={t("bookings_description")}>
+      <BookingsList status={parsed.data.status} />
+    </ShellMainAppDir>
+  );
 };
 
 export default Page;
diff --git a/apps/web/app/(use-page-wrapper)/(main-nav)/event-types/page.tsx b/apps/web/app/(use-page-wrapper)/(main-nav)/event-types/page.tsx
@@ -1,5 +1,6 @@
+import { ShellMainAppDir } from "app/(use-page-wrapper)/(main-nav)/ShellMainAppDir";
 import type { PageProps } from "app/_types";
-import { _generateMetadata } from "app/_utils";
+import { _generateMetadata, getTranslate } from "app/_utils";
 import { cookies, headers } from "next/headers";
 import { redirect } from "next/navigation";
 
@@ -9,7 +10,7 @@ import { buildLegacyCtx } from "@lib/buildLegacyCtx";
 
 import { ssrInit } from "@server/lib/ssr";
 
-import EventTypes from "~/event-types/views/event-types-listing-view";
+import EventTypes, { EventTypesCTA } from "~/event-types/views/event-types-listing-view";
 
 export const generateMetadata = async () =>
   await _generateMetadata(
@@ -20,13 +21,22 @@ export const generateMetadata = async () =>
 const Page = async ({ params, searchParams }: PageProps) => {
   const context = buildLegacyCtx(headers(), cookies(), params, searchParams);
   const session = await getServerSession({ req: context.req });
+
   if (!session?.user?.id) {
     redirect("/auth/login");
   }
 
   await ssrInit(context);
-
-  return <EventTypes />;
+  const t = await getTranslate();
+
+  return (
+    <ShellMainAppDir
+      heading={t("event_types_page_title")}
+      subtitle={t("event_types_page_subtitle")}
+      CTA={<EventTypesCTA />}>
+      <EventTypes />
+    </ShellMainAppDir>
+  );
 };
 
 export default Page;
diff --git a/apps/web/app/(use-page-wrapper)/(main-nav)/layout.tsx b/apps/web/app/(use-page-wrapper)/(main-nav)/layout.tsx
@@ -0,0 +1,11 @@
+import Shell from "@calcom/features/shell/Shell";
+
+const Layout = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <Shell hideHeadingOnMobile withoutSeo={true} withoutMain={true}>
+      {children}
+    </Shell>
+  );
+};
+
+export default Layout;
diff --git a/apps/web/app/(use-page-wrapper)/bookings/layout.tsx b/apps/web/app/(use-page-wrapper)/bookings/layout.tsx
diff --git a/apps/web/modules/availability/availability-view.tsx b/apps/web/modules/availability/availability-view.tsx
@@ -9,7 +9,6 @@ import SkeletonLoader from "@calcom/features/availability/components/SkeletonLoa
 import { BulkEditDefaultForEventsModal } from "@calcom/features/eventtypes/components/BulkEditDefaultForEventsModal";
 import type { BulkUpdatParams } from "@calcom/features/eventtypes/components/BulkEditDefaultForEventsModal";
 import { NewScheduleButton, ScheduleListItem } from "@calcom/features/schedules";
-import Shell from "@calcom/features/shell/Shell";
 import { AvailabilitySliderTable } from "@calcom/features/timezone-buddy/components/AvailabilitySliderTable";
 import { useCompatSearchParams } from "@calcom/lib/hooks/useCompatSearchParams";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
@@ -195,14 +194,11 @@ type PageProps = {
   currentOrg?: Awaited<ReturnType<typeof OrganizationRepository.findCurrentOrg>> | null;
 };
 
-export default function AvailabilityPage({ currentOrg }: PageProps) {
+export const AvailabilityCTA = () => {
   const { t } = useLocale();
   const searchParams = useCompatSearchParams();
   const router = useRouter();
   const pathname = usePathname();
-  const me = useMeQuery();
-  const { data: _data } = trpc.viewer.organizations.listCurrent.useQuery(undefined, { enabled: !currentOrg });
-  const data = currentOrg ?? _data;
 
   // Get a new searchParams string by merging the current
   // searchParams with a provided key/value pair
@@ -216,7 +212,7 @@ export default function AvailabilityPage({ currentOrg }: PageProps) {
     [searchParams]
   );
 
-  const isOrg = Boolean(data);
+  const { data } = trpc.viewer.organizations.listCurrent.useQuery();
   const isOrgAdminOrOwner =
     (data && (data.user.role === MembershipRole.OWNER || data.user.role === MembershipRole.ADMIN)) ?? false;
   const isOrgAndPrivate = data?.isOrganization && data.isPrivate;
@@ -230,35 +226,44 @@ export default function AvailabilityPage({ currentOrg }: PageProps) {
   }
 
   return (
-    <div>
-      <Shell
-        heading={t("availability")}
-        subtitle={t("configure_availability")}
-        title={t("availability")}
-        description={t("configure_availability")}
-        hideHeadingOnMobile
-        withoutSeo={true}
-        withoutMain={false}
-        CTA={
-          <div className="flex gap-2">
-            <ToggleGroup
-              className="hidden md:block"
-              defaultValue={searchParams?.get("type") ?? "mine"}
-              onValueChange={(value) => {
-                if (!value) return;
-                router.push(`${pathname}?${createQueryString("type", value)}`);
-              }}
-              options={toggleGroupOptions}
-            />
-            <NewScheduleButton />
-          </div>
-        }>
-        {searchParams?.get("type") === "team" && canViewTeamAvailability ? (
-          <AvailabilitySliderTable userTimeFormat={me?.data?.timeFormat ?? null} isOrg={isOrg} />
-        ) : (
-          <AvailabilityListWithQuery />
-        )}
-      </Shell>
+    <div className="flex gap-2">
+      <ToggleGroup
+        className="hidden md:block"
+        defaultValue={searchParams?.get("type") ?? "mine"}
+        onValueChange={(value) => {
+          if (!value) return;
+          router.push(`${pathname}?${createQueryString("type", value)}`);
+        }}
+        options={toggleGroupOptions}
+      />
+      <NewScheduleButton />
     </div>
   );
+};
+
+export default function AvailabilityPage({ currentOrg }: PageProps) {
+  const { t } = useLocale();
+  const searchParams = useCompatSearchParams();
+  const me = useMeQuery();
+  const { data: _data } = trpc.viewer.organizations.listCurrent.useQuery(undefined, { enabled: !currentOrg });
+  const data = currentOrg ?? _data;
+
+  const isOrg = Boolean(data);
+  const isOrgAdminOrOwner =
+    (data && (data.user.role === MembershipRole.OWNER || data.user.role === MembershipRole.ADMIN)) ?? false;
+  const isOrgAndPrivate = data?.isOrganization && data.isPrivate;
+
+  const canViewTeamAvailability = isOrgAdminOrOwner || !isOrgAndPrivate;
+
+  const toggleGroupOptions = [{ value: "mine", label: t("my_availability") }];
+
+  if (canViewTeamAvailability) {
+    toggleGroupOptions.push({ value: "team", label: t("team_availability") });
+  }
+
+  return searchParams?.get("type") === "team" && canViewTeamAvailability ? (
+    <AvailabilitySliderTable userTimeFormat={me?.data?.timeFormat ?? null} isOrg={isOrg} />
+  ) : (
+    <AvailabilityListWithQuery />
+  );
 }
diff --git a/apps/web/modules/event-types/views/event-types-listing-view.tsx b/apps/web/modules/event-types/views/event-types-listing-view.tsx
diff --git a/apps/web/pagesAndRewritePaths.js b/apps/web/pagesAndRewritePaths.js
