Fixing navigation and visual issues (#6067)

Co-authored-by: Peer Richelsen <peeroke@gmail.com>

apps/web/pages/auth/setup/index.tsx

@@ -24,7 +24,7 @@ export default function Setup(props: inferSSRProps<typeof getServerSideProps>) {
     {
       title: t("enable_apps"),
       description: t("enable_apps_description"),
-      content: <AdminAppsList baseURL="/auth/setup" />,
+      content: <AdminAppsList baseURL="/auth/setup?step=2" />,
       isLoading: false,
     },
   ];

packages/app-store/_components/AppCategoryNavigation.tsx

@@ -11,19 +11,26 @@ const AppCategoryNavigation = ({
   children,
   containerClassname,
   className,
+  fromAdmin,
 }: {
   baseURL: string;
   children: React.ReactNode;
   containerClassname: string;
   className?: string;
+  fromAdmin?: boolean;
 }) => {
-  const appCategories = useMemo(() => getAppCategories(baseURL), [baseURL]);
   const [animationRef] = useAutoAnimate<HTMLDivElement>();
+  const appCategories = useMemo(() => getAppCategories(baseURL, fromAdmin), [baseURL, fromAdmin]);
 
   return (
     <div className={classNames("flex flex-col p-2 md:p-0 xl:flex-row", className)}>
       <div className="hidden xl:block">
-        <VerticalTabs tabs={appCategories} sticky linkProps={{ shallow: true }} />
+        <VerticalTabs
+          tabs={appCategories}
+          sticky
+          linkProps={{ shallow: true }}
+          itemClassname={classNames(fromAdmin && "w-60")}
+        />
       </div>
       <div className="mb-4 block overflow-x-scroll xl:hidden">
         <HorizontalTabs tabs={appCategories} linkProps={{ shallow: true }} />

packages/app-store/_utils/getAppCategories.ts

@@ -1,40 +1,44 @@
 import { Icon } from "@calcom/ui";
 
-const getAppCategories = (baseURL: string) => {
+function getHref(baseURL: string, category: string, useQueryParam: boolean) {
+  return useQueryParam ? `${baseURL}&category=${category}` : `${baseURL}/${category}`;
+}
+
+const getAppCategories = (baseURL: string, useQueryParam = false) => {
   return [
     {
       name: "calendar",
-      href: `${baseURL}/calendar`,
+      href: getHref(baseURL, "calendar", useQueryParam),
       icon: Icon.FiCalendar,
     },
     {
       name: "conferencing",
-      href: `${baseURL}/conferencing`,
+      href: getHref(baseURL, "conferencing", useQueryParam),
       icon: Icon.FiVideo,
     },
     {
       name: "payment",
-      href: `${baseURL}/payment`,
+      href: getHref(baseURL, "payment", useQueryParam),
       icon: Icon.FiCreditCard,
     },
     {
       name: "automation",
-      href: `${baseURL}/automation`,
+      href: getHref(baseURL, "automation", useQueryParam),
       icon: Icon.FiShare2,
     },
     {
       name: "analytics",
-      href: `${baseURL}/analytics`,
+      href: getHref(baseURL, "analytics", useQueryParam),
       icon: Icon.FiBarChart,
     },
     {
       name: "web3",
-      href: `${baseURL}/web3`,
+      href: getHref(baseURL, "web3", useQueryParam),
       icon: Icon.FiBarChart,
     },
     {
       name: "other",
-      href: `${baseURL}/other`,
+      href: getHref(baseURL, "other", useQueryParam),
       icon: Icon.FiGrid,
     },
   ];

packages/features/apps/AdminAppsList.tsx

@@ -174,14 +174,26 @@ const querySchema = z.object({
     .default(AppCategories.calendar),
 });
 
-const AdminAppsList = ({ baseURL, className }: { baseURL: string; className?: string }) => (
-  <AppCategoryNavigation
-    baseURL={baseURL}
-    containerClassname="w-full xl:mx-5 xl:w-2/3 xl:pr-5"
-    className={className}>
-    <AdminAppsListContainer />
-  </AppCategoryNavigation>
-);
+const AdminAppsList = ({ baseURL, className }: { baseURL: string; className?: string }) => {
+  const router = useRouter();
+  return (
+    <form
+      id="wizard-step-2"
+      name="wizard-step-2"
+      onSubmit={(e) => {
+        e.preventDefault();
+        router.replace("/");
+      }}>
+      <AppCategoryNavigation
+        baseURL={baseURL}
+        fromAdmin
+        containerClassname="w-full xl:ml-5 max-h-97 overflow-scroll"
+        className={className}>
+        <AdminAppsListContainer />
+      </AppCategoryNavigation>
+    </form>
+  );
+};
 
 const AdminAppsListContainer = () => {
   const { t } = useLocale();
@@ -222,7 +234,7 @@ export default AdminAppsList;
 
 const SkeletonLoader = () => {
   return (
-    <SkeletonContainer>
+    <SkeletonContainer className="w-[30rem] pr-10">
       <div className="mt-6 mb-8 space-y-6">
         <SkeletonText className="h-8 w-full" />
         <SkeletonText className="h-8 w-full" />

packages/ui/v2/core/WizardForm.tsx

@@ -42,7 +42,7 @@ function WizardForm<T extends DefaultStep>(props: {
           <p className="text-sm text-gray-500">{currentStep.description}</p>
         </div>
 
-        <div className="print:p-none px-4 py-5 sm:p-6">{currentStep.content}</div>
+        <div className="print:p-none max-w-3xl px-4 py-5 sm:p-6">{currentStep.content}</div>
         {!props.disableNavigation && (
           <>
             {currentStep.enabled !== false && (

packages/ui/v2/core/navigation/tabs/VerticalTabs.tsx

@@ -10,6 +10,7 @@ export interface NavTabProps {
   className?: string;
   sticky?: boolean;
   linkProps?: VerticalTabItemProps["linkProps"];
+  itemClassname?: string;
 }
 
 const NavTabs = function ({ tabs, className = "", sticky, linkProps, ...props }: NavTabProps) {
@@ -25,7 +26,7 @@ const NavTabs = function ({ tabs, className = "", sticky, linkProps, ...props }:
       {sticky && <div className="pt-6" />}
       {props.children}
       {tabs.map((tab, idx) => (
-        <VerticalTabItem {...tab} key={idx} linkProps={linkProps} />
+        <VerticalTabItem {...tab} key={idx} linkProps={linkProps} className={props.itemClassname} />
       ))}
     </nav>
   );