Merge pull request dubinc#2419 from dubinc/domains-tabs

Domains tabs

Author: steven-tey

…ug]/settings/domains/default-domains.tsx …settings/domains/default/page-client.tsxapps/web/app/app.dub.co/(dashboard)/[slug]/settings/domains/default-domains.tsx renamed to apps/web/app/app.dub.co/(dashboard)/[slug]/settings/domains/default/page-client.tsx apps/web/app/app.dub.co/(dashboard)/[slug]/settings/domains/default-domains.tsx renamed to apps/web/app/app.dub.co/(dashboard)/[slug]/settings/domains/default/page-client.tsx

@@ -43,28 +43,26 @@ function DubDomainsIcon(domain: string) {
 
 export function DefaultDomains() {
   const { id, plan, role, flags } = useWorkspace();
+  const [submitting, setSubmitting] = useState(false);
+  const [defaultDomains, setDefaultDomains] = useState<string[]>([]);
+  const { defaultDomains: initialDefaultDomains, mutate } = useDefaultDomains();
+
   const permissionsError = clientAccessCheck({
     action: "domains.write",
     role,
     customPermissionDescription: "manage default domains",
   }).error;
 
-  const { defaultDomains: initialDefaultDomains, mutate } = useDefaultDomains();
-  const [defaultDomains, setDefaultDomains] = useState<string[]>([]);
   useEffect(() => {
     if (initialDefaultDomains) {
       setDefaultDomains(initialDefaultDomains);
     }
   }, [initialDefaultDomains]);
-  const [submitting, setSubmitting] = useState(false);
 
   return (
-    <div className="my-10 grid gap-5 border-t border-neutral-200 py-10">
-      <div>
-        <h2 className="text-xl font-semibold tracking-tight text-black">
-          Default Domains
-        </h2>
-        <p className="mt-3 text-sm text-neutral-500">
+    <div className="grid gap-5">
+      <div className="rounded-lg bg-neutral-100 p-4">
+        <p className="text-sm text-neutral-500">
           Leverage default branded domains from Dub for specific links.{" "}
           <Link
             href="https://dub.co/help/article/default-dub-domains"
@@ -75,6 +73,7 @@ export function DefaultDomains() {
           </Link>
         </p>
       </div>
+
       <div className="mt-2 grid grid-cols-1 gap-3">
         {DUB_DOMAINS.filter((domain) => {
           if (domain.slug === "dub.link") {
@@ -135,7 +134,7 @@ export function DefaultDomains() {
                         if (error.message.includes("Upgrade to Pro")) {
                           toast.custom(() => (
                             <UpgradeRequiredToast
-                              planToUpgradeTo="Pro"
+                              title="You've discovered a Pro feature!"
                               message={error.message}
                             />
                           ));

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

@@ -0,0 +1,5 @@
+import { DefaultDomains } from "./page-client";
+
+export default function DefaultDomainsPage() {
+  return <DefaultDomains />;
+}

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

@@ -0,0 +1,30 @@
+"use client";
+
+import { AnimatedEmptyState } from "@/ui/shared/animated-empty-state";
+import { ArrowTurnRight2 } from "@dub/ui";
+import { Mail } from "lucide-react";
+
+export function EmailDomains() {
+  return (
+    <>
+      <div className="grid gap-5">
+        <div className="animate-fade-in">
+          <AnimatedEmptyState
+            title="No email domains found"
+            description="Add email domains for branded partner communications"
+            cardContent={
+              <>
+                <Mail className="size-4 text-neutral-700" />
+                <div className="h-2.5 w-24 min-w-0 rounded-sm bg-neutral-200" />
+                <div className="xs:flex hidden grow items-center justify-end gap-1.5 text-neutral-500">
+                  <ArrowTurnRight2 className="size-3.5" />
+                </div>
+              </>
+            }
+            pillContent="Coming soon"
+          />
+        </div>
+      </div>
+    </>
+  );
+}

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

@@ -0,0 +1,5 @@
+import { EmailDomains } from "./page-client";
+
+export default function EmailDomainsPage() {
+  return <EmailDomains />;
+}

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

@@ -0,0 +1,47 @@
+"use client";
+
+import useWorkspace from "@/lib/swr/use-workspace";
+import { InfoTooltip, TabSelect, TooltipContent } from "@dub/ui";
+import { useSelectedLayoutSegment } from "next/navigation";
+
+export function DomainsHeader() {
+  const { slug } = useWorkspace();
+  const selectedLayoutSegment = useSelectedLayoutSegment();
+  const page = selectedLayoutSegment === null ? "" : selectedLayoutSegment;
+
+  return (
+    <div className="border-b border-neutral-200">
+      <div className="flex items-center gap-x-2">
+        <h1 className="text-2xl font-semibold tracking-tight text-black">
+          Domains
+        </h1>
+        <InfoTooltip
+          content={
+            <TooltipContent
+              title="Learn more about how to add, configure, and verify custom domains on Dub."
+              href="https://dub.co/help/article/how-to-add-custom-domain"
+              target="_blank"
+              cta="Learn more"
+            />
+          }
+        />
+      </div>
+      <TabSelect
+        variant="accent"
+        options={[
+          {
+            id: "",
+            label: "Custom domains",
+            href: `/${slug}/settings/domains`,
+          },
+          {
+            id: "default",
+            label: "Default domains",
+            href: `/${slug}/settings/domains/default`,
+          },
+        ]}
+        selected={page}
+      />
+    </div>
+  );
+}

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

@@ -0,0 +1,11 @@
+import { ReactNode } from "react";
+import { DomainsHeader } from "./header";
+
+export default function LibraryLayout({ children }: { children: ReactNode }) {
+  return (
+    <div className="grid gap-4">
+      <DomainsHeader />
+      {children}
+    </div>
+  );
+}

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

@@ -19,7 +19,6 @@ import {
   Button,
   CursorRays,
   Globe,
-  InfoTooltip,
   LinkBroken,
   PaginationControls,
   Popover,
@@ -31,9 +30,8 @@ import {
 import { capitalize, pluralize } from "@dub/utils";
 import { ChevronDown, Crown } from "lucide-react";
 import { useEffect, useState } from "react";
-import { DefaultDomains } from "./default-domains";
 
-export default function WorkspaceDomainsClient() {
+export function CustomDomains() {
   const {
     id: workspaceId,
     plan,
@@ -103,34 +101,19 @@ export default function WorkspaceDomainsClient() {
       <RegisterDomainSuccessModal />
       <div className="grid gap-5">
         <div className="flex flex-wrap justify-between gap-6">
-          <div className="flex items-center gap-x-2">
-            <h1 className="text-2xl font-semibold tracking-tight text-black">
-              Domains
-            </h1>
-            <InfoTooltip
-              content={
-                <TooltipContent
-                  title="Learn more about how to add, configure, and verify custom domains on Dub."
-                  href="https://dub.co/help/article/how-to-add-custom-domain"
-                  target="_blank"
-                  cta="Learn more"
-                />
-              }
+          <div className="w-full sm:w-auto">
+            <SearchBoxPersisted
+              loading={loading}
+              onChangeDebounced={(t) => {
+                if (t) {
+                  queryParams({ set: { search: t }, del: "page" });
+                } else {
+                  queryParams({ del: "search" });
+                }
+              }}
             />
           </div>
           <div className="flex w-full flex-wrap items-center gap-3 sm:w-auto">
-            <div className="w-full sm:w-auto">
-              <SearchBoxPersisted
-                loading={loading}
-                onChangeDebounced={(t) => {
-                  if (t) {
-                    queryParams({ set: { search: t }, del: "page" });
-                  } else {
-                    queryParams({ del: "search" });
-                  }
-                }}
-              />
-            </div>
             <ToggleGroup
               options={[
                 { value: "active", label: "Active" },
@@ -190,7 +173,7 @@ export default function WorkspaceDomainsClient() {
                 className="h-9 w-fit rounded-lg"
                 text={
                   <div className="flex items-center gap-2">
-                    Add domain{" "}
+                    Add custom domain{" "}
                     <ChevronDown className="size-4 transition-transform duration-75 group-data-[state=open]:rotate-180" />
                   </div>
                 }
@@ -234,7 +217,7 @@ export default function WorkspaceDomainsClient() {
               </div>
             ) : (
               <AnimatedEmptyState
-                title="No domains found"
+                title="No custom domains found"
                 description="Use custom domains for better brand recognition and click-through rates"
                 cardContent={
                   <>
@@ -268,8 +251,6 @@ export default function WorkspaceDomainsClient() {
           />
         </div>
       </div>
-
-      <DefaultDomains />
     </>
   );
 }

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

@@ -1,10 +1,5 @@
-import { Suspense } from "react";
-import WorkspaceDomainsClient from "./page-client";
+import { CustomDomains } from "./page-client";
 
-export default function WorkspaceDomains() {
-  return (
-    <Suspense>
-      <WorkspaceDomainsClient />
-    </Suspense>
-  );
+export default function CustomDomainsPage() {
+  return <CustomDomains />;
 }

apps/web/ui/layout/sidebar/app-sidebar-nav.tsx

@@ -145,7 +145,7 @@ const NAV_AREAS: SidebarNavAreas<{
           {
             name: "Library",
             icon: Books2,
-            href: `/${slug}/settings/library`,
+            href: `/${slug}/settings/library/folders`,
           },
           {
             name: "People",