Partial-Revert "V2/settings shell (#3987)"

This reverts commit 3a35eb413f.

packages/ui/v2/core/Shell.tsx

@@ -7,6 +7,7 @@ import { Toaster } from "react-hot-toast";
 
 import dayjs from "@calcom/dayjs";
 import { useIsEmbed } from "@calcom/embed-core/embed-iframe";
+import LicenseBanner from "@calcom/features/ee/common/components/LicenseBanner";
 import TrialBanner from "@calcom/features/ee/common/components/TrialBanner";
 import ImpersonatingBanner from "@calcom/features/ee/impersonation/components/ImpersonatingBanner";
 import HelpMenuItem from "@calcom/features/ee/support/components/HelpMenuItem";
@@ -119,7 +120,6 @@ export function ShellSubHeading(props: {
 
 const Layout = (props: LayoutProps) => {
   const pageTitle = typeof props.heading === "string" ? props.heading : props.title;
-  const router = useRouter();
 
   return (
     <>
@@ -135,8 +135,8 @@ const Layout = (props: LayoutProps) => {
         <Toaster position="bottom-right" />
       </div>
 
-      <div className={classNames("flex h-screen overflow-hidden")} data-testid="dashboard-shell">
-        {router.route.startsWith("/v2/settings/") ? <></> : <SideBarContainer />}
+      <div className="flex h-screen overflow-hidden" data-testid="dashboard-shell">
+        {props.SidebarContainer || <SideBarContainer />}
         <div className="flex w-0 flex-1 flex-col overflow-hidden">
           <UserV2OptInBanner />
           <ImpersonatingBanner />
@@ -514,9 +514,7 @@ function MobileNavigationContainer() {
 }
 
 const MobileNavigation = () => {
-  const router = useRouter();
   const isEmbed = useIsEmbed();
-  if (router.route.startsWith("/v2/settings/")) return null;
   return (
     <>
       <nav
@@ -682,13 +680,8 @@ export function ShellMain(props: LayoutProps) {
 }
 
 function MainContainer(props: LayoutProps) {
-  const router = useRouter();
   return (
-    <main
-      className={classNames(
-        "relative z-0 flex flex-1 flex-col overflow-y-auto bg-white focus:outline-none",
-        router.route.startsWith("/v2/settings/") ? "" : "py-2"
-      )}>
+    <main className="relative z-0 flex flex-1 flex-col overflow-y-auto bg-white focus:outline-none ">
       {/* show top navigation for md and smaller (tablet and phones) */}
       <TopNavContainer />
       <div className="px-4 py-2 lg:py-8 lg:px-12">
@@ -704,25 +697,18 @@ function MainContainer(props: LayoutProps) {
 }
 
 function TopNavContainer() {
-  const router = useRouter();
   const { status } = useSession();
   if (status !== "authenticated") return null;
-  if (router.route.startsWith("/v2/settings/")) return null;
-
   return <TopNav />;
 }
 
 function TopNav() {
-  const router = useRouter();
   const isEmbed = useIsEmbed();
   const { t } = useLocale();
   return (
     <nav
       style={isEmbed ? { display: "none" } : {}}
-      className={classNames(
-        "flex items-center justify-between border-b border-gray-200 bg-white p-4 md:hidden",
-        router.route.startsWith("/v2/settings/") && "hidden"
-      )}>
+      className="flex items-center justify-between border-b border-gray-200 bg-gray-50 py-1.5 px-4 sm:p-4 md:hidden">
       <Link href="/event-types">
         <a>
           <Logo />

packages/ui/v2/core/layouts/AdminLayout.tsx

@@ -9,7 +9,7 @@ export default function AdminLayout({
 }: { children: React.ReactNode } & ComponentProps<typeof Shell>) {
   return (
     <SettingsLayout {...rest}>
-      <div className="mx-auto flex max-w-4xl flex-row divide-y divide-gray-200 md:px-12">
+      <div className="mx-auto flex max-w-4xl flex-row divide-y divide-gray-200 lg:p-12">
         <div className="flex flex-1 [&>*]:flex-1">{children}</div>
       </div>
     </SettingsLayout>

packages/ui/v2/core/layouts/SettingsLayout.tsx

@@ -1,48 +1,98 @@
-import React, { ComponentProps, useState } from "react";
+import React, { ComponentProps } from "react";
 
-import { classNames } from "@calcom/lib";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 
+import { Icon } from "../../../Icon";
 import { useMeta } from "../Meta";
 import Shell from "../Shell";
-import MobileSettingsContainer from "../navigation/MobileSettingsContainer";
-import SettingsSidebarContainer from "../navigation/SettingsSidebarContainer";
+import VerticalTabs, { VerticalTabItem } from "../navigation/tabs/VerticalTabs";
+
+const tabs = [
+  {
+    name: "my_account",
+    href: "/settings/profile",
+    icon: Icon.FiUser,
+    children: [
+      { name: "profile", href: "/settings/my-account/profile" },
+      { name: "general", href: "/settings/my-account/general" },
+      { name: "calendars", href: "/settings/my-account/calendars" },
+      { name: "conferencing", href: "/settings/my-account/conferencing" },
+      { name: "appearance", href: "/settings/my-account/appearance" },
+      // TODO
+      { name: "referrals", href: "/settings/my-account/referrals" },
+    ],
+  },
+  {
+    name: "security",
+    href: "/settings/security",
+    icon: Icon.FiKey,
+    children: [
+      //
+      { name: "password", href: "/settings/security/password" },
+      { name: "2fa_auth", href: "/settings/security/two-factor-auth" },
+    ],
+  },
+  {
+    name: "billing",
+    href: "/settings/billing",
+    icon: Icon.FiCreditCard,
+    children: [
+      //
+      { name: "invoices", href: "/settings/billing" },
+    ],
+  },
+  {
+    name: "developer",
+    href: "/settings/developer",
+    icon: Icon.FiTerminal,
+    children: [
+      //
+      { name: "webhooks", href: "/settings/developer" },
+      { name: "api_keys", href: "/settings/developer" },
+      { name: "embeds", href: "/settings/developer" },
+    ],
+  },
+  {
+    name: "teams",
+    href: "/settings/teams",
+    icon: Icon.FiUsers,
+  },
+  {
+    name: "admin",
+    href: "/settings/admin",
+    icon: Icon.FiLock,
+    adminRequired: true,
+    children: [
+      //
+      { name: "impersonation", href: "/settings/admin/impersonation" },
+      { name: "apps", href: "/settings/admin/apps" },
+      { name: "users", href: "/settings/admin/users" },
+    ],
+  },
+];
 
 export default function SettingsLayout({
   children,
   ...rest
 }: { children: React.ReactNode } & ComponentProps<typeof Shell>) {
-  const [sideContainerOpen, setSideContainerOpen] = useState(false);
   return (
-    <Shell flexChildrenContainer {...rest} SidebarContainer={<SettingsSidebarContainer />}>
-      <div
-        className={classNames(
-          "absolute z-40 m-0 h-screen w-screen bg-black opacity-50",
-          sideContainerOpen ? "" : "hidden"
-        )}
-        onClick={() => {
-          setSideContainerOpen(false);
-        }}
-      />
-      <div className="relative md:flex">
-        <div className="md:hidden">
-          <MobileSettingsContainer onSideContainerOpen={() => setSideContainerOpen(!sideContainerOpen)} />
-        </div>
-
-        <div
-          className={classNames(
-            "absolute inset-y-0 z-50 m-0 h-screen w-56 transform border-gray-100 bg-gray-50 transition duration-200 ease-in-out md:relative",
-            sideContainerOpen ? "" : "-translate-x-full md:translate-x-0"
-          )}>
-          <SettingsSidebarContainer />
-        </div>
-
-        <div className="flex flex-1 [&>*]:flex-1">
-          <div className="color-black mt-8 justify-center px-4 sm:px-6 md:px-8 ">
-            <ShellHeader />
-            {children}
-          </div>
-        </div>
+    <Shell
+      flexChildrenContainer
+      {...rest}
+      SidebarContainer={
+        <VerticalTabs tabs={tabs} className="py-3 pl-3">
+          <VerticalTabItem
+            name="Settings"
+            href="/"
+            icon={Icon.FiArrowLeft}
+            textClassNames="text-md font-medium leading-none text-black"
+            className="mb-1"
+          />
+        </VerticalTabs>
+      }>
+      <div className="flex-1 [&>*]:flex-1">
+        <ShellHeader />
+        {children}
       </div>
     </Shell>
   );
@@ -54,17 +104,17 @@ function ShellHeader() {
   const { meta } = useMeta();
   const { t, isLocaleReady } = useLocale();
   return (
-    <header className="mx-auto block max-w-4xl justify-between sm:flex md:px-12 md:pt-8">
-      <div className="mb-8 w-full border-b border-gray-200 pb-8">
+    <header className="block justify-between px-4 pt-8 sm:flex sm:px-6 md:px-8">
+      <div className="mb-8 w-full">
         {meta.title && isLocaleReady ? (
-          <h1 className="font-cal mb-1 text-xl font-bold capitalize tracking-wide text-black">
+          <h1 className="font-cal mb-1 text-xl font-bold capitalize tracking-wide text-gray-900">
             {t(meta.title)}
           </h1>
         ) : (
           <div className="mb-1 h-6 w-24 animate-pulse rounded-md bg-gray-200" />
         )}
         {meta.description && isLocaleReady ? (
-          <p className="text-sm text-gray-600 ltr:mr-4 rtl:ml-4">{t(meta.description)}</p>
+          <p className="text-sm text-neutral-500 ltr:mr-4 rtl:ml-4">{t(meta.description)}</p>
         ) : (
           <div className="mb-1 h-6 w-32 animate-pulse rounded-md bg-gray-200" />
         )}

packages/ui/v2/core/navigation/MobileSettingsContainer.tsx

@@ -1,28 +0,0 @@
-import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Icon } from "@calcom/ui";
-import Button from "@calcom/ui/v2/core/Button";
-
-const MobileSettingsContainer = (props: { onSideContainerOpen: () => void }) => {
-  const { t } = useLocale();
-
-  return (
-    <>
-      <nav className="flex items-center justify-between border-b border-gray-100 bg-gray-50 p-4 lg:hidden">
-        <div className=" flex items-center space-x-3 ">
-          <Button
-            StartIcon={Icon.FiMenu}
-            color="minimalSecondary"
-            size="icon"
-            onClick={props.onSideContainerOpen}
-          />
-          <a href="/" className="flex items-center space-x-2 rounded-md px-3 py-1 hover:bg-gray-200">
-            <Icon.FiArrowLeft className="text-gray-700" />
-            <p className="font-semibold text-black">{t("settings")}</p>
-          </a>
-        </div>
-      </nav>
-    </>
-  );
-};
-
-export default MobileSettingsContainer;

packages/ui/v2/core/navigation/SettingsSidebarContainer.tsx

@@ -1,102 +0,0 @@
-import { classNames } from "@calcom/lib";
-import { WEBAPP_URL } from "@calcom/lib/constants";
-import { useLocale } from "@calcom/lib/hooks/useLocale";
-
-import { Icon } from "../../../Icon";
-
-const settingsTabs = [
-  {
-    name: "my_account",
-    href: "/settings/my-account",
-    icon: Icon.FiUser,
-    children: [
-      { name: "profile", href: "/v2/settings/my-account/profile" },
-      { name: "general", href: "/v2/settings/my-account/general" },
-      { name: "calendars", href: "/v2/settings/my-account/calendars" },
-      { name: "conferencing", href: "/v2/settings/my-account/conferencing" },
-      { name: "appearance", href: "/v2/settings/my-account/appearance" },
-      // TODO
-      // { name: "referrals", href: "/settings/my-account/referrals" },
-    ],
-  },
-  {
-    name: "security",
-    href: "/settings/security",
-    icon: Icon.FiKey,
-    children: [
-      //
-      { name: "password", href: "/v2/settings/security/password" },
-      { name: "2fa_auth", href: "/v2/settings/security/two-factor-auth" },
-    ],
-  },
-  {
-    name: "billing",
-    href: "/settings/billing",
-    icon: Icon.FiCreditCard,
-    children: [
-      //
-      { name: "invoices", href: "/v2/settings/billing" },
-    ],
-  },
-  {
-    name: "developer",
-    href: "/settings/developer",
-    icon: Icon.FiTerminal,
-    children: [
-      //
-      { name: "webhooks", href: "/v2/settings/developer/webhooks" },
-      { name: "api_keys", href: "/v2/settings/developer/api_keys" },
-      { name: "embeds", href: "/v2/settings/developer/embeds" },
-    ],
-  },
-  {
-    name: "teams",
-    href: "/settings/teams",
-    icon: Icon.FiUsers,
-    children: [],
-  },
-  {
-    name: "admin",
-    href: "/settings/admin",
-    icon: Icon.FiLock,
-    adminRequired: true,
-    children: [
-      //
-      { name: "impersonation", href: "/v2/settings/admin/impersonation" },
-      { name: "apps", href: "/v2/settings/admin/apps" },
-      { name: "users", href: "/v2/settings/admin/users" },
-    ],
-  },
-];
-
-const SettingsSidebarContainer = () => {
-  const { t } = useLocale();
-
-  return (
-    <nav className="no-scrollbar w-56 flex-col space-y-1 py-3 px-3" aria-label="Tabs">
-      <div className="mt-7 mb-6 ml-4 flex items-center space-x-3">
-        <a href={`${WEBAPP_URL}`}>
-          <Icon.FiArrowLeft />
-        </a>
-        <p className="font-semibold">{t("settings")}</p>
-      </div>
-      {settingsTabs.map((section, index) => (
-        <div key={section.name} className={classNames("ml-4", index !== 0 && "pt-3")}>
-          <div className="flex">
-            <section.icon />
-            <p className="ml-3 text-sm font-medium leading-5 text-gray-600">{t(section.name)}</p>
-          </div>
-          {section.children?.map((child) => (
-            <div key={child.name} className="ml-10 py-0.5">
-              <a className="text-sm font-medium text-gray-900" href={child.href}>
-                {t(child.name)}
-              </a>
-            </div>
-          ))}
-        </div>
-      ))}
-    </nav>
-  );
-};
-
-export default SettingsSidebarContainer;