fix: add missing title (#13307)

* add missing title

* add

* update

* update

* update

* fix lint

* Update AppsLayout.tsx

* update

* Update bookings-listing-view.tsx

* update

---------

Co-authored-by: Udit Takkar <53316345+Udit-takkar@users.noreply.github.com>
Co-authored-by: Keith Williams <keithwillcode@gmail.com>

apps/web/app/future/bookings/[status]/page.tsx

@@ -3,7 +3,6 @@ import { _generateMetadata } from "app/_utils";
 import { WithLayout } from "app/layoutHOC";
 import type { InferGetStaticPropsType } from "next";
 
-import { getLayout } from "@calcom/features/MainLayoutAppDir";
 import { APP_NAME } from "@calcom/lib/constants";
 
 import { validStatuses } from "~/bookings/lib/validStatuses";
@@ -23,6 +22,6 @@ export const generateStaticParams = async () => {
   return validStatuses.map((status) => ({ status }));
 };
 
-export default WithLayout({ getLayout, getData, Page })<"P">;
+export default WithLayout({ getLayout: null, getData, Page })<"P">;
 
 export const dynamic = "force-static";

apps/web/app/future/event-types/page.tsx

@@ -1,8 +1,6 @@
 import { _generateMetadata } from "app/_utils";
 import { WithLayout } from "app/layoutHOC";
 
-import { getLayout } from "@calcom/features/MainLayoutAppDir";
-
 import EventTypes from "~/event-types/views/event-types-listing-view";
 
 export const generateMetadata = async () =>
@@ -11,4 +9,4 @@ export const generateMetadata = async () =>
     (t) => t("event_types_page_subtitle")
   );
 
-export default WithLayout({ getLayout, Page: EventTypes })<"P">;
+export default WithLayout({ getLayout: null, Page: EventTypes })<"P">;

apps/web/app/future/insights/page.tsx

@@ -3,8 +3,6 @@ import { withAppDirSsr } from "app/WithAppDirSsr";
 import { _generateMetadata } from "app/_utils";
 import { WithLayout } from "app/layoutHOC";
 
-import { getLayout } from "@calcom/features/MainLayoutAppDir";
-
 import { getServerSideProps } from "@lib/insights/getServerSideProps";
 import { type inferSSRProps } from "@lib/types/inferSSRProps";
 
@@ -16,4 +14,4 @@ export const generateMetadata = async () =>
 
 const getData = withAppDirSsr<inferSSRProps<typeof getServerSideProps>>(getServerSideProps);
 
-export default WithLayout({ getLayout, getData, Page: LegacyPage });
+export default WithLayout({ getLayout: null, getData, Page: LegacyPage });

apps/web/app/future/teams/page.tsx

@@ -3,8 +3,6 @@ import { withAppDirSsr } from "app/WithAppDirSsr";
 import { _generateMetadata } from "app/_utils";
 import { WithLayout } from "app/layoutHOC";
 
-import { getLayout } from "@calcom/features/MainLayoutAppDir";
-
 import { getServerSideProps } from "@lib/teams/getServerSideProps";
 
 export const generateMetadata = async () =>
@@ -13,4 +11,4 @@ export const generateMetadata = async () =>
     (t) => t("create_manage_teams_collaborative")
   );
 
-export default WithLayout({ getData: withAppDirSsr(getServerSideProps), getLayout, Page })<"P">;
+export default WithLayout({ getData: withAppDirSsr(getServerSideProps), getLayout: null, Page })<"P">;

apps/web/app/future/workflows/page.tsx

@@ -1,7 +1,6 @@
 import { _generateMetadata } from "app/_utils";
 import { WithLayout } from "app/layoutHOC";
 
-import { getLayout } from "@calcom/features/MainLayoutAppDir";
 import LegacyPage from "@calcom/features/ee/workflows/pages/index";
 
 export const generateMetadata = async () =>
@@ -10,4 +9,4 @@ export const generateMetadata = async () =>
     (t) => t("workflows_to_automate_notifications")
   );
 
-export default WithLayout({ getLayout, Page: LegacyPage })<"P">;
+export default WithLayout({ getLayout: null, Page: LegacyPage })<"P">;

apps/web/components/apps/layouts/InstalledAppsLayout.tsx

@@ -9,7 +9,11 @@ export default function InstalledAppsLayout({
   ...rest
 }: { children: React.ReactNode } & ComponentProps<typeof Shell>) {
   return (
-    <Shell {...rest} hideHeadingOnMobile>
+    <Shell
+      {...rest}
+      title="Installed Apps"
+      description="Manage your installed apps or change settings"
+      hideHeadingOnMobile>
       <AppCategoryNavigation baseURL="/apps/installed" containerClassname="min-w-0 w-full">
         {children}
       </AppCategoryNavigation>

apps/web/modules/bookings/views/bookings-listing-view.tsx

@@ -10,7 +10,7 @@ import { FilterToggle } from "@calcom/features/bookings/components/FilterToggle"
 import { FiltersContainer } from "@calcom/features/bookings/components/FiltersContainer";
 import type { filterQuerySchema } from "@calcom/features/bookings/lib/useFilterQuery";
 import { useFilterQuery } from "@calcom/features/bookings/lib/useFilterQuery";
-import { ShellMain } from "@calcom/features/shell/Shell";
+import Shell from "@calcom/features/shell/Shell";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { useParamsWithFallback } from "@calcom/lib/hooks/useParamsWithFallback";
 import type { RouterOutputs } from "@calcom/trpc/react";
@@ -147,7 +147,13 @@ export default function Bookings() {
   const [animationParentRef] = useAutoAnimate<HTMLDivElement>();
 
   return (
-    <ShellMain hideHeadingOnMobile heading={t("bookings")} subtitle={t("bookings_description")}>
+    <Shell
+      withoutMain={false}
+      hideHeadingOnMobile
+      heading={t("bookings")}
+      subtitle={t("bookings_description")}
+      title="Bookings"
+      description="Create events to share for people to book on your calendar.">
       <div className="flex flex-col">
         <div className="flex flex-row flex-wrap justify-between">
           <HorizontalTabs tabs={tabs} />
@@ -247,6 +253,6 @@ export default function Bookings() {
           </div>
         </main>
       </div>
-    </ShellMain>
+    </Shell>
   );
 }

apps/web/modules/event-types/views/event-types-listing-view.tsx

@@ -16,7 +16,7 @@ import CreateEventTypeDialog from "@calcom/features/eventtypes/components/Create
 import { DuplicateDialog } from "@calcom/features/eventtypes/components/DuplicateDialog";
 import { TeamsFilter } from "@calcom/features/filters/components/TeamsFilter";
 import { getTeamsFiltersFromQuery } from "@calcom/features/filters/lib/getTeamsFiltersFromQuery";
-import { ShellMain } from "@calcom/features/shell/Shell";
+import Shell from "@calcom/features/shell/Shell";
 import { APP_NAME, WEBAPP_URL } from "@calcom/lib/constants";
 import { CAL_URL } from "@calcom/lib/constants";
 import { useCompatSearchParams } from "@calcom/lib/hooks/useCompatSearchParams";
@@ -948,7 +948,10 @@ const EventTypesPage: React.FC & {
   }, [orgBranding, user]);
 
   return (
-    <ShellMain
+    <Shell
+      withoutMain={false}
+      title="Event Types"
+      description="Create events to share for people to book on your calendar."
       withoutSeo
       heading={t("event_types_page_title")}
       hideHeadingOnMobile
@@ -960,7 +963,7 @@ const EventTypesPage: React.FC & {
         description="Create events to share for people to book on your calendar."
       />
       <Main data={data} status={status} errorMessage={error?.message} filters={filters} />
-    </ShellMain>
+    </Shell>
   );
 };
 

apps/web/pages/apps/categories/[category].tsx

@@ -26,6 +26,8 @@ export default function Apps({ apps }: PageProps) {
       <Shell
         isPublic
         backPath="/apps"
+        title="Apps Store"
+        description="Connecting people, technology and the workplace."
         smallHeading
         heading={
           <>

apps/web/pages/apps/categories/index.tsx

@@ -16,7 +16,12 @@ export default function Apps({ categories }: Omit<inferSSRProps<typeof getServer
   const { t, isLocaleReady } = useLocale();
 
   return (
-    <Shell isPublic large hideHeadingOnMobile>
+    <Shell
+      isPublic
+      large
+      hideHeadingOnMobile
+      title="Apps Store"
+      description="Connecting people, technology and the workplace.">
       <div className="text-md flex items-center gap-1 px-4 pb-3 pt-3 font-normal md:px-8 lg:px-0 lg:pt-0">
         <Link
           href="/apps"

apps/web/pages/apps/index.tsx

@@ -3,7 +3,7 @@
 import type { ChangeEventHandler } from "react";
 import { useState } from "react";
 
-import { getLayout } from "@calcom/features/MainLayout";
+import Shell from "@calcom/features/shell/Shell";
 import { classNames } from "@calcom/lib";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import type { inferSSRProps } from "@calcom/types/inferSSRProps";
@@ -103,4 +103,14 @@ export default function Apps({
 export { getServerSideProps };
 
 Apps.PageWrapper = PageWrapper;
-Apps.getLayout = getLayout;
+Apps.getLayout = (page: React.ReactElement) => {
+  return (
+    <Shell
+      title="Apps Store"
+      description="Create forms to direct attendees to the correct destinations."
+      withoutMain={true}
+      hideHeadingOnMobile>
+      {page}
+    </Shell>
+  );
+};

apps/web/pages/availability/index.tsx

@@ -3,9 +3,8 @@ import Link from "next/link";
 import { useRouter, usePathname } from "next/navigation";
 import { useCallback } from "react";
 
-import { getLayout } from "@calcom/features/MainLayout";
 import { NewScheduleButton, ScheduleListItem } from "@calcom/features/schedules";
-import { ShellMain } from "@calcom/features/shell/Shell";
+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";
@@ -167,9 +166,12 @@ export default function AvailabilityPage() {
   );
   return (
     <div>
-      <ShellMain
+      <Shell
         heading={t("availability")}
+        title="Availability"
+        description="Configure times when you are available for bookings."
         hideHeadingOnMobile
+        withoutMain={false}
         subtitle={t("configure_availability")}
         CTA={
           <div className="flex gap-2">
@@ -189,11 +191,9 @@ export default function AvailabilityPage() {
           </div>
         }>
         {searchParams?.get("type") === "team" ? <AvailabilitySliderTable /> : <AvailabilityListWithQuery />}
-      </ShellMain>
+      </Shell>
     </div>
   );
 }
 
-AvailabilityPage.getLayout = getLayout;
-
 AvailabilityPage.PageWrapper = PageWrapper;

apps/web/pages/bookings/[status].tsx

@@ -1,7 +1,5 @@
 import type { GetStaticPaths } from "next";
 
-import { getLayout } from "@calcom/features/MainLayout";
-
 import PageWrapper from "@components/PageWrapper";
 
 import { validStatuses } from "~/bookings/lib/validStatuses";
@@ -12,11 +10,9 @@ export { getStaticProps } from "~/bookings/views/bookings-listing-view.getStatic
 const BookingsListingPage = new Proxy<{
   (): JSX.Element;
   PageWrapper?: typeof PageWrapper;
-  getLayout?: typeof getLayout;
 }>(BookingsListingView, {});
 
 BookingsListingPage.PageWrapper = PageWrapper;
-BookingsListingPage.getLayout = getLayout;
 
 export const getStaticPaths: GetStaticPaths = () => {
   return {

apps/web/pages/event-types/index.tsx

@@ -1,12 +1,9 @@
-import { getLayout } from "@calcom/features/MainLayout";
-
 import PageWrapper from "@components/PageWrapper";
 
 import EventTypesPage from "~/event-types/views/event-types-listing-view";
 
 export { getServerSideProps } from "@lib/event-types/getServerSideProps";
 
-EventTypesPage.getLayout = getLayout;
 EventTypesPage.PageWrapper = PageWrapper;
 
 export default EventTypesPage;

apps/web/pages/insights/index.tsx

@@ -1,6 +1,5 @@
 "use client";
 
-import { getLayout } from "@calcom/features/MainLayout";
 import {
   AverageEventDurationChart,
   BookingKPICards,
@@ -11,7 +10,7 @@ import {
 } from "@calcom/features/insights/components";
 import { FiltersProvider } from "@calcom/features/insights/context/FiltersProvider";
 import { Filters } from "@calcom/features/insights/filters";
-import { ShellMain } from "@calcom/features/shell/Shell";
+import Shell from "@calcom/features/shell/Shell";
 import { UpgradeTip } from "@calcom/features/tips";
 import { WEBAPP_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
@@ -47,7 +46,12 @@ export default function InsightsPage() {
 
   return (
     <div>
-      <ShellMain heading="Insights" subtitle={t("insights_subtitle")}>
+      <Shell
+        withoutMain={false}
+        heading="Insights"
+        subtitle={t("insights_subtitle")}
+        title="Insights"
+        description="View booking insights across your events.">
         <UpgradeTip
           plan="team"
           title={t("make_informed_decisions")}
@@ -99,12 +103,11 @@ export default function InsightsPage() {
             </FiltersProvider>
           )}
         </UpgradeTip>
-      </ShellMain>
+      </Shell>
     </div>
   );
 }
 
 InsightsPage.PageWrapper = PageWrapper;
-InsightsPage.getLayout = getLayout;
 
 export { getServerSideProps };

apps/web/pages/settings/my-account/out-of-office/index.tsx

@@ -4,8 +4,7 @@ import { Controller, useForm, useFormState } from "react-hook-form";
 
 import dayjs from "@calcom/dayjs";
 import SectionBottomActions from "@calcom/features/settings/SectionBottomActions";
-import { getLayout } from "@calcom/features/settings/layouts/SettingsLayout";
-import { ShellMain } from "@calcom/features/shell/Shell";
+import Shell from "@calcom/features/shell/Shell";
 import { useHasTeamPlan } from "@calcom/lib/hooks/useHasPaidPlan";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
@@ -245,15 +244,14 @@ const OutOfOfficePage = () => {
   return (
     <>
       <Meta title={t("out_of_office")} description={t("out_of_office_description")} borderInShellHeader />
-      <ShellMain>
+      <Shell withoutMain={false} withoutSeo>
         <OutOfOfficeSection />
         <OutOfOfficeEntriesList />
-      </ShellMain>
+      </Shell>
     </>
   );
 };
 
-OutOfOfficePage.getLayout = getLayout;
 OutOfOfficePage.PageWrapper = PageWrapper;
 
 export default OutOfOfficePage;

apps/web/pages/teams/index.tsx

@@ -1,8 +1,7 @@
 "use client";
 
-import { getLayout } from "@calcom/features/MainLayout";
 import { TeamsListing } from "@calcom/features/ee/teams/components";
-import { ShellMain } from "@calcom/features/shell/Shell";
+import Shell from "@calcom/features/shell/Shell";
 import { WEBAPP_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
@@ -18,8 +17,11 @@ function Teams() {
   const [user] = trpc.viewer.me.useSuspenseQuery();
 
   return (
-    <ShellMain
+    <Shell
+      withoutMain={false}
       heading={t("teams")}
+      title="Teams"
+      description="Create and manage teams to use collaborative features."
       hideHeadingOnMobile
       subtitle={t("create_manage_teams_collaborative")}
       CTA={
@@ -35,11 +37,10 @@ function Teams() {
         )
       }>
       <TeamsListing />
-    </ShellMain>
+    </Shell>
   );
 }
 
 Teams.requiresLicense = false;
 Teams.PageWrapper = PageWrapper;
-Teams.getLayout = getLayout;
 export default Teams;

packages/app-store/routing-forms/pages/forms/[...appPages].tsx

@@ -363,7 +363,11 @@ export default function RoutingForms({
 
 RoutingForms.getLayout = (page: React.ReactElement) => {
   return (
-    <Shell withoutMain={true} hideHeadingOnMobile>
+    <Shell
+      title="Routing Forms"
+      description="Create forms to direct attendees to the correct destinations."
+      withoutMain={true}
+      hideHeadingOnMobile>
       {page}
     </Shell>
   );

packages/features/ee/workflows/pages/index.tsx

@@ -5,8 +5,7 @@ import { useRouter } from "next/navigation";
 import type { Dispatch, SetStateAction } from "react";
 import { useState } from "react";
 
-import { getLayout } from "@calcom/features/MainLayout";
-import { ShellMain } from "@calcom/features/shell/Shell";
+import Shell from "@calcom/features/shell/Shell";
 import { classNames } from "@calcom/lib";
 import { WEBAPP_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
@@ -52,10 +51,12 @@ function WorkflowsPage() {
   });
 
   return (
-    <ShellMain
+    <Shell
+      withoutMain={false}
       heading={t("workflows")}
-      title={t("workflows")}
       subtitle={t("workflows_to_automate_notifications")}
+      title="Workflows"
+      description="Create workflows to automate notifications and reminders."
       hideHeadingOnMobile
       CTA={
         session.data?.hasValidLicense ? (
@@ -95,7 +96,7 @@ function WorkflowsPage() {
           </FilterResults>
         </>
       </LicenseRequired>
-    </ShellMain>
+    </Shell>
   );
 }
 
@@ -222,6 +223,4 @@ const Filter = (props: {
   );
 };
 
-WorkflowsPage.getLayout = getLayout;
-
 export default WorkflowsPage;

packages/features/shell/Shell.tsx

@@ -245,7 +245,7 @@ const Layout = (props: LayoutProps) => {
       {!props.withoutSeo && (
         <HeadSeo
           title={pageTitle ?? APP_NAME}
-          description={props.subtitle ? props.subtitle?.toString() : ""}
+          description={props.description ?? props.subtitle?.toString() ?? ""}
         />
       )}
       <div>
@@ -302,6 +302,7 @@ type DrawerState = [isOpen: boolean, setDrawerOpen: Dispatch<SetStateAction<bool
 type LayoutProps = {
   centered?: boolean;
   title?: string;
+  description?: string;
   heading?: ReactNode;
   subtitle?: ReactNode;
   headerClassName?: string;