small admin optimizations

Author: steven-tey

apps/web/app/(ee)/admin.dub.co/(dashboard)/commissions/client.tsx

@@ -171,7 +171,7 @@ export default function CommissionsPageClient() {
     <div className="mx-auto flex w-full max-w-screen-xl flex-col space-y-6 p-6">
       <SimpleDateRangePicker defaultInterval="mtd" className="w-fit" />
       <div className="flex flex-col divide-y divide-neutral-200 rounded-lg border border-neutral-200 bg-white">
-        <div className="scrollbar-hide grid w-full grid-cols-3 divide-x overflow-y-hidden">
+        <div className="scrollbar-hide grid w-full grid-cols-2 divide-x overflow-y-hidden sm:grid-cols-3">
           {tabs.map(({ id, label, colorClassName }) => {
             return (
               <button

apps/web/app/(ee)/admin.dub.co/(dashboard)/components/ban-link.tsx

@@ -48,7 +48,7 @@ const Form = () => {
         disabled={pending}
         autoComplete="off"
         className={cn(
-          "block w-full rounded-r-md border-neutral-300 text-sm text-neutral-900 placeholder-neutral-400 focus:border-neutral-500 focus:outline-none focus:ring-neutral-500",
+          "block w-full rounded-r-md border-neutral-300 text-sm text-neutral-900 placeholder-neutral-400 focus:border-neutral-500 focus:outline-none focus:ring-neutral-500 sm:text-base",
           pending && "bg-neutral-100",
         )}
         placeholder="IG47WZs"

apps/web/app/(ee)/admin.dub.co/(dashboard)/components/impersonate-user.tsx

@@ -33,7 +33,7 @@ export default function ImpersonateUser() {
       </form>
       {data && (
         <form
-          action={async (formData) => {
+          action={async () => {
             if (
               !confirm(
                 `This will ban the user ${data.email} and delete all their workspaces and links. Are you sure?`,
@@ -79,7 +79,7 @@ const Form = () => {
         disabled={pending}
         autoComplete="off"
         className={cn(
-          "block w-full rounded-md border-neutral-300 text-sm text-neutral-900 placeholder-neutral-400 focus:border-neutral-500 focus:outline-none focus:ring-neutral-500",
+          "block w-full rounded-md border-neutral-300 text-sm text-neutral-900 placeholder-neutral-400 focus:border-neutral-500 focus:outline-none focus:ring-neutral-500 sm:text-base",
           pending && "bg-neutral-100",
         )}
         placeholder="stey@vercel.com"

apps/web/app/(ee)/admin.dub.co/(dashboard)/components/impersonate-workspace.tsx

@@ -52,7 +52,7 @@ const Form = () => {
         disabled={pending}
         autoComplete="off"
         className={cn(
-          "block w-full rounded-r-md border-neutral-300 text-sm text-neutral-900 placeholder-neutral-400 focus:border-neutral-500 focus:outline-none focus:ring-neutral-500",
+          "block w-full rounded-r-md border-neutral-300 text-sm text-neutral-900 placeholder-neutral-400 focus:border-neutral-500 focus:outline-none focus:ring-neutral-500 sm:text-base",
           pending && "bg-neutral-100",
         )}
         placeholder="owd"

apps/web/app/(ee)/admin.dub.co/(dashboard)/components/refresh-domain.tsx

@@ -45,7 +45,7 @@ const Form = () => {
         disabled={pending}
         autoComplete="off"
         className={cn(
-          "block w-full rounded-md border-neutral-300 text-sm text-neutral-900 placeholder-neutral-400 focus:border-neutral-500 focus:outline-none focus:ring-neutral-500",
+          "block w-full rounded-md border-neutral-300 text-sm text-neutral-900 placeholder-neutral-400 focus:border-neutral-500 focus:outline-none focus:ring-neutral-500 sm:text-base",
           pending && "bg-neutral-100",
         )}
         placeholder="acme.com"

apps/web/app/(ee)/admin.dub.co/(dashboard)/layout-nav-client.tsx

@@ -0,0 +1,103 @@
+"use client";
+
+import {
+  ClientOnly,
+  MaxWidthWrapper,
+  NavWordmark,
+  Popover,
+  useMediaQuery,
+} from "@dub/ui";
+import Link from "next/link";
+import { useState } from "react";
+
+const tabs = [
+  {
+    href: "/links",
+    label: "Links",
+  },
+  {
+    href: "/analytics",
+    label: "Analytics",
+  },
+  {
+    href: "/commissions",
+    label: "Commissions",
+  },
+  {
+    href: "/payouts",
+    label: "Payouts",
+  },
+];
+
+export function AdminNav() {
+  const [openPopover, setOpenPopover] = useState(false);
+  const { isMobile } = useMediaQuery();
+
+  const NavContent = () => (
+    <div className="flex w-full flex-col gap-1 p-2">
+      {tabs.map((tab) => (
+        <Link
+          href={tab.href}
+          key={tab.href}
+          className="block w-full rounded-md px-4 py-2 text-left text-sm text-neutral-700 transition-colors hover:bg-neutral-100 active:bg-neutral-200"
+          onClick={() => setOpenPopover(false)}
+        >
+          {tab.label}
+        </Link>
+      ))}
+    </div>
+  );
+
+  return (
+    <div className="sticky left-0 right-0 top-0 z-20 border-b border-neutral-200 bg-white">
+      <MaxWidthWrapper>
+        <div className="flex h-16 w-full items-center justify-between sm:justify-start sm:gap-12">
+          <Link href="/">
+            <NavWordmark className="h-6" />
+          </Link>
+          <ClientOnly>
+            {isMobile ? (
+              <div className="ml-auto">
+                <Popover
+                  content={<NavContent />}
+                  openPopover={openPopover}
+                  setOpenPopover={setOpenPopover}
+                  mobileOnly
+                >
+                  <button className="text-neutral-500">
+                    <svg
+                      width="24"
+                      height="24"
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      stroke="currentColor"
+                      strokeWidth="2"
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                    >
+                      <line x1="3" y1="12" x2="21" y2="12" />
+                      <line x1="3" y1="6" x2="21" y2="6" />
+                      <line x1="3" y1="18" x2="21" y2="18" />
+                    </svg>
+                  </button>
+                </Popover>
+              </div>
+            ) : (
+              <div className="flex items-center gap-12">
+                {tabs.map((tab) => (
+                  <Link
+                    href={tab.href}
+                    key={tab.href}
+                    className="text-sm text-neutral-500"
+                  >
+                    {tab.label}
+                  </Link>
+                ))}
+              </div>
+            )}
+          </ClientOnly>
+        </div>
+      </MaxWidthWrapper>
+    </div>
+  );
+}

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

@@ -1,55 +1,14 @@
-import { MaxWidthWrapper, NavWordmark } from "@dub/ui";
 import { constructMetadata } from "@dub/utils";
-import Link from "next/link";
 import { ReactNode } from "react";
+import { AdminNav } from "./layout-nav-client";
 
 export const metadata = constructMetadata({ noIndex: true });
 
-const tabs = [
-  {
-    href: "/links",
-    label: "Links",
-  },
-  {
-    href: "/analytics",
-    label: "Analytics",
-  },
-  {
-    href: "/commissions",
-    label: "Commissions",
-  },
-  {
-    href: "/payouts",
-    label: "Payouts",
-  },
-];
-
-export default async function AdminLayout({
-  children,
-}: {
-  children: ReactNode;
-}) {
+export default function AdminLayout({ children }: { children: ReactNode }) {
   return (
     <>
       <div className="min-h-screen w-full bg-neutral-50">
-        <div className="sticky left-0 right-0 top-0 z-20 border-b border-neutral-200 bg-white">
-          <MaxWidthWrapper>
-            <div className="flex h-16 items-center gap-12">
-              <Link href="/">
-                <NavWordmark className="h-6" />
-              </Link>
-              {tabs.map((tab) => (
-                <Link
-                  href={tab.href}
-                  key={tab.href}
-                  className="text-sm text-neutral-500"
-                >
-                  {tab.label}
-                </Link>
-              ))}
-            </div>
-          </MaxWidthWrapper>
-        </div>
+        <AdminNav />
         {children}
       </div>
     </>