ENG-597: Sidebar layout

apps/web/app/app.dub.co/(dashboard)/[slug]/analytics/page.tsx

@@ -1,14 +1,17 @@
 import Analytics from "@/ui/analytics";
 import LayoutLoader from "@/ui/layout/layout-loader";
+import { PageContent } from "@/ui/layout/page-content";
 import { Suspense } from "react";
 import AnalyticsClient from "./client";
 
 export default function WorkspaceAnalytics() {
   return (
     <Suspense fallback={<LayoutLoader />}>
-      <AnalyticsClient>
-        <Analytics />
-      </AnalyticsClient>
+      <PageContent title="Analytics">
+        <AnalyticsClient>
+          <Analytics />
+        </AnalyticsClient>
+      </PageContent>
     </Suspense>
   );
 }

apps/web/app/app.dub.co/(dashboard)/[slug]/events/page.tsx

@@ -1,17 +1,20 @@
 import Events from "@/ui/analytics/events";
 import { EventsProvider } from "@/ui/analytics/events/events-provider";
 import LayoutLoader from "@/ui/layout/layout-loader";
+import { PageContent } from "@/ui/layout/page-content";
 import { Suspense } from "react";
 import AnalyticsClient from "../analytics/client";
 
 export default function WorkspaceAnalyticsEvents() {
   return (
     <Suspense fallback={<LayoutLoader />}>
-      <AnalyticsClient>
-        <EventsProvider>
-          <Events />
-        </EventsProvider>
-      </AnalyticsClient>
+      <PageContent title="Events">
+        <AnalyticsClient>
+          <EventsProvider>
+            <Events />
+          </EventsProvider>
+        </AnalyticsClient>
+      </PageContent>
     </Suspense>
   );
 }

apps/web/app/app.dub.co/(dashboard)/[slug]/page-client.tsx

@@ -69,18 +69,12 @@ function WorkspaceLinks() {
     <>
       <LinkBuilder />
       <AddEditTagModal />
-      <div className="mt-10 flex w-full items-center pt-3">
+      <div className="flex w-full items-center pt-3">
         <MaxWidthWrapper className="flex flex-col gap-y-3">
-          <div className="flex flex-wrap items-center justify-between gap-2 md:flex-nowrap">
-            <h1 className="order-1 text-2xl font-semibold tracking-tight text-black">
-              Links
-            </h1>
-            <div className="order-4 flex w-full grow flex-wrap justify-end gap-2 md:order-2 md:w-auto">
-              <div className="w-full md:w-56 lg:w-64">
-                <SearchBoxPersisted
-                  loading={isValidating}
-                  inputClassName="h-10"
-                />
+          <div className="flex flex-wrap items-center justify-between gap-2 lg:flex-nowrap">
+            <div className="flex w-full grow gap-2 md:w-auto">
+              <div className="grow basis-0 md:grow-0">
+                <LinkDisplay />
               </div>
               <div className="grow basis-0 md:grow-0">
                 <Filter.Select
@@ -135,11 +129,14 @@ function WorkspaceLinks() {
                   }}
                 />
               </div>
-              <div className="grow basis-0 md:grow-0">
-                <LinkDisplay />
-              </div>
             </div>
-            <div className="order-3 flex gap-x-2">
+            <div className="flex gap-x-2 max-md:w-full">
+              <div className="w-full md:w-56 lg:w-64">
+                <SearchBoxPersisted
+                  loading={isValidating}
+                  inputClassName="h-10"
+                />
+              </div>
               <div className="grow-0">
                 <CreateLinkButton />
               </div>

apps/web/app/app.dub.co/(dashboard)/[slug]/page.tsx

@@ -1,5 +1,10 @@
+import { PageContent } from "@/ui/layout/page-content";
 import WorkspaceLinksClient from "./page-client";
 
 export default function WorkspaceLinks() {
-  return <WorkspaceLinksClient />;
+  return (
+    <PageContent title="Links">
+      <WorkspaceLinksClient />
+    </PageContent>
+  );
 }

apps/web/app/app.dub.co/(dashboard)/[slug]/settings/integrations/page.tsx

@@ -42,7 +42,7 @@ const Integrations = async () => {
   });
 
   return (
-    <div className="grid gap-3 sm:grid-cols-2">
+    <div className="grid gap-3 sm:grid-cols-2 xl:grid-cols-3">
       {integrations.map((integration) => (
         <IntegrationCard
           key={integration.id}

apps/web/app/app.dub.co/(dashboard)/[slug]/settings/layout.tsx

@@ -1,12 +1,10 @@
 import { ReactNode } from "react";
-import WorkspaceSettingsLayoutClient from "./layout-client";
+import SettingsLayout from "../../../../../ui/layout/settings-layout";
 
 export default function WorkspaceSettingsLayout({
   children,
 }: {
   children: ReactNode;
 }) {
-  return (
-    <WorkspaceSettingsLayoutClient>{children}</WorkspaceSettingsLayoutClient>
-  );
+  return <SettingsLayout>{children}</SettingsLayout>;
 }

apps/web/app/app.dub.co/(dashboard)/account/settings/layout.tsx

@@ -1,38 +1,10 @@
 import SettingsLayout from "@/ui/layout/settings-layout";
-import { Gear2, Key, ShieldCheck } from "@dub/ui";
 import { ReactNode } from "react";
 
 export default function PersonalSettingsLayout({
   children,
 }: {
   children: ReactNode;
 }) {
-  const tabs = [
-    {
-      group: "",
-      tabs: [
-        {
-          name: "General",
-          icon: Gear2,
-          segment: null,
-        },
-        {
-          name: "Security",
-          icon: ShieldCheck,
-          segment: "security",
-        },
-        {
-          name: "API Keys",
-          icon: Key,
-          segment: "tokens",
-        },
-      ],
-    },
-  ];
-
-  return (
-    <SettingsLayout tabs={tabs} tabContainerClassName="top-[105px]">
-      {children}
-    </SettingsLayout>
-  );
+  return <SettingsLayout>{children}</SettingsLayout>;
 }

apps/web/app/app.dub.co/(dashboard)/layout.tsx

@@ -1,32 +1,23 @@
 import { MainNav } from "@/ui/layout/main-nav";
-import NavTabs from "@/ui/layout/nav-tabs";
+import { HelpButtonRSC } from "@/ui/layout/sidebar/help-button-rsc";
 import Toolbar from "@/ui/layout/toolbar/toolbar";
 import UserSurveyPopup from "@/ui/layout/user-survey";
-import { MaxWidthWrapper } from "@dub/ui";
 import { constructMetadata } from "@dub/utils";
-import { ReactNode, Suspense } from "react";
+import { ReactNode } from "react";
 import Providers from "../../providers";
 
 export const dynamic = "force-static";
 export const metadata = constructMetadata();
 
-export default function Layout({ children }: { children: ReactNode }) {
+export default async function Layout({ children }: { children: ReactNode }) {
   return (
     <Providers>
-      <div className="min-h-screen w-full bg-gray-50/80">
-        <div className="sticky -top-16 z-20 border-b border-gray-200 bg-white">
-          <MaxWidthWrapper>
-            <MainNav />
-            <Suspense fallback={<div className="h-12 w-full" />}>
-              <NavTabs />
-            </Suspense>
-          </MaxWidthWrapper>
-        </div>
-        {children}
+      <div className="min-h-screen w-full bg-white">
+        <MainNav toolContent={<HelpButtonRSC />}>{children}</MainNav>
       </div>
       <UserSurveyPopup />
       {/* <ChangelogPopup /> */}
-      <Toolbar />
+      <Toolbar show={["onboarding"]} />
     </Providers>
   );
 }