update app sidebar nav

steven-tey · steven-tey · commit aef3f74babe1 · 2025-05-22T22:25:18.000-07:00
diff --git a/apps/web/app/api/links/crawl/bitly/[domain]/[key]/route.ts b/apps/web/app/api/links/crawl/bitly/[domain]/[key]/route.ts
@@ -1,19 +1,9 @@
-import { createId } from "@/lib/api/create-id";
-import { encodeKeyIfCaseSensitive } from "@/lib/api/links/case-sensitivity";
-import { conn } from "@/lib/planetscale";
 import { redis } from "@/lib/upstash";
 import z from "@/lib/zod";
-import {
-  DUB_HEADERS,
-  getUrlFromStringIfValid,
-  linkConstructorSimple,
-} from "@dub/utils";
-import { waitUntil } from "@vercel/functions";
+import { DUB_HEADERS, getUrlFromStringIfValid } from "@dub/utils";
 import { NextRequest, NextResponse } from "next/server";
 
 const workspaceId = "cm05wnnpo000711ztj05wwdbu";
-const userId = "cm05wnd49000411ztg2xbup0i";
-const folderId = "fold_1JNQBVZV8P0NA0YGB11W2HHSQ";
 
 // GET /api/links/crawl/bitly – crawl a bitly link and redirect to the destination if exists
 export const GET = async (_req: NextRequest, { params }) => {
@@ -34,55 +24,6 @@ export const GET = async (_req: NextRequest, { params }) => {
       const sanitizedUrl = getUrlFromStringIfValid(link.long_url);
 
       if (sanitizedUrl) {
-        const processedKey = encodeKeyIfCaseSensitive({
-          domain,
-          key,
-        });
-
-        const newLink = {
-          id: createId({ prefix: "link_" }),
-          projectId: workspaceId,
-          userId,
-          domain,
-          key: processedKey,
-          url: sanitizedUrl,
-          shortLink: linkConstructorSimple({
-            domain,
-            key: processedKey,
-          }),
-          archived: false,
-          folderId,
-          createdAt: new Date(link.created_at),
-          updatedAt: new Date(link.created_at),
-        };
-
-        console.log(
-          `[Bitly] Creating link ${newLink.shortLink} -> ${newLink.url}`,
-        );
-
-        waitUntil(
-          (async () => {
-            try {
-              await conn.execute(
-                "INSERT INTO Link (id, projectId, userId, domain, `key`, url, shortLink, archived, folderId, createdAt, updatedAt) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)",
-                [
-                  newLink.id,
-                  newLink.projectId,
-                  newLink.userId,
-                  newLink.domain,
-                  newLink.key,
-                  newLink.url,
-                  newLink.shortLink,
-                  newLink.archived,
-                  newLink.folderId,
-                  newLink.createdAt,
-                  newLink.updatedAt,
-                ],
-              );
-            } catch (_e) {}
-          })(),
-        );
-
         return NextResponse.redirect(sanitizedUrl, {
           headers: DUB_HEADERS,
           status: 302,
diff --git a/apps/web/lib/middleware/partners.ts b/apps/web/lib/middleware/partners.ts
@@ -43,7 +43,9 @@ export default async function PartnersMiddleware(req: NextRequest) {
       return NextResponse.redirect(new URL("/onboarding", req.url));
     }
 
-    if (searchParamsObj.next) {
+    // special case for handling ?next= query param
+    // only redirect if next is a valid relative path (not an absolute URL)
+    if (searchParamsObj.next && searchParamsObj.next.startsWith("/")) {
       return NextResponse.redirect(new URL(searchParamsObj.next, req.url));
     }
 
diff --git a/apps/web/lib/swr/use-partner-profile.ts b/apps/web/lib/swr/use-partner-profile.ts
@@ -1,26 +1,19 @@
 import { CONNECT_SUPPORTED_COUNTRIES, fetcher } from "@dub/utils";
 import { useSession } from "next-auth/react";
-import { useEffect, useState } from "react";
 import useSWR from "swr";
 import { PartnerProps } from "../types";
 
 export default function usePartnerProfile() {
   const { data: session, status } = useSession();
-  const partnerId = session?.user?.["defaultPartnerId"];
-
-  const [isPartnerPage, setIsPartnerPage] = useState(false);
-
-  useEffect(() => {
-    setIsPartnerPage(window.location.hostname.startsWith("partners"));
-  }, []);
+  const defaultPartnerId = session?.user?.["defaultPartnerId"];
 
   const {
     data: partner,
     error,
     isLoading,
     mutate,
   } = useSWR<PartnerProps>(
-    isPartnerPage && partnerId && "/api/partner-profile",
+    defaultPartnerId && "/api/partner-profile",
     fetcher,
     {
       dedupingInterval: 60000,
diff --git a/apps/web/ui/layout/sidebar/app-sidebar-nav.tsx b/apps/web/ui/layout/sidebar/app-sidebar-nav.tsx
@@ -23,7 +23,6 @@ import { ReactNode, useMemo } from "react";
 import UserSurveyButton from "../user-survey";
 import { ConnectedDots4 } from "./icons/connected-dots4";
 import { CursorRays } from "./icons/cursor-rays";
-import { Gear } from "./icons/gear";
 import { Hyperlink } from "./icons/hyperlink";
 import { LinesY } from "./icons/lines-y";
 import { User } from "./icons/user";
@@ -67,20 +66,10 @@ const NAV_AREAS: SidebarNavAreas<{
             icon: User,
             href: `/${slug}/customers`,
           },
-          {
-            name: "Settings",
-            icon: Gear,
-            href: `/${slug}/settings`,
-          },
-        ],
-      },
-      ...(defaultProgramId
-        ? [
-            {
-              name: "Programs",
-              items: [
+          ...(defaultProgramId
+            ? [
                 {
-                  name: "Affiliate",
+                  name: "Program",
                   icon: ConnectedDots4,
                   href: `/${slug}/programs/${defaultProgramId}`,
                   items: [
@@ -111,10 +100,10 @@ const NAV_AREAS: SidebarNavAreas<{
                     },
                   ],
                 },
-              ],
-            },
-          ]
-        : []),
+              ]
+            : []),
+        ],
+      },
     ],
   }),
 
diff --git a/apps/web/ui/layout/sidebar/user-dropdown.tsx b/apps/web/ui/layout/sidebar/user-dropdown.tsx
@@ -1,6 +1,14 @@
 "use client";
 
-import { Avatar, Gift, Icon, Popover, User } from "@dub/ui";
+import usePartnerProfile from "@/lib/swr/use-partner-profile";
+import {
+  ArrowsOppositeDirectionX,
+  Avatar,
+  Gift,
+  Icon,
+  Popover,
+  User,
+} from "@dub/ui";
 import { cn } from "@dub/utils";
 import { LogOut } from "lucide-react";
 import { signOut, useSession } from "next-auth/react";
@@ -9,12 +17,13 @@ import { ComponentPropsWithoutRef, ElementType, useState } from "react";
 
 export default function UserDropdown() {
   const { data: session } = useSession();
+  const { partner } = usePartnerProfile();
   const [openPopover, setOpenPopover] = useState(false);
 
   return (
     <Popover
       content={
-        <div className="flex w-full flex-col space-y-px rounded-md bg-white p-2 sm:w-56">
+        <div className="flex w-full flex-col space-y-px rounded-md bg-white p-2">
           {session?.user ? (
             <div className="p-2">
               <p className="truncate text-sm font-medium text-neutral-900">
@@ -44,6 +53,14 @@ export default function UserDropdown() {
             href="/account/settings/referrals"
             onClick={() => setOpenPopover(false)}
           />
+          {partner && (
+            <UserOption
+              as={Link}
+              label="Switch to partner account"
+              icon={ArrowsOppositeDirectionX}
+              href="https://partners.dub.co"
+            />
+          )}
           <UserOption
             as="button"
             type="button"
@@ -99,7 +116,7 @@ function UserOption<T extends ElementType = "button">({
 
   return (
     <Component
-      className="flex items-center gap-x-4 rounded-md px-2.5 py-2 text-sm transition-all duration-75 hover:bg-neutral-200/50 active:bg-neutral-200/80"
+      className="flex items-center gap-x-4 rounded-md px-2.5 py-1.5 text-sm transition-all duration-75 hover:bg-neutral-200/50 active:bg-neutral-200/80"
       {...rest}
     >
       <Icon className="size-4 text-neutral-500" />
diff --git a/apps/web/ui/layout/sidebar/workspace-dropdown.tsx b/apps/web/ui/layout/sidebar/workspace-dropdown.tsx
@@ -9,9 +9,9 @@ import {
   Popover,
   useScrollProgress,
 } from "@dub/ui";
-import { Book2, Check2, Plus } from "@dub/ui/icons";
+import { Check2, Gear, Plus, UserPlus } from "@dub/ui/icons";
 import { cn, OG_AVATAR_URL } from "@dub/utils";
-import { ChevronsUpDown, HelpCircle } from "lucide-react";
+import { ChevronsUpDown } from "lucide-react";
 import { useSession } from "next-auth/react";
 import Link from "next/link";
 import { useParams, usePathname } from "next/navigation";
@@ -139,21 +139,6 @@ function WorkspaceDropdownPlaceholder() {
   );
 }
 
-const LINKS = [
-  {
-    name: "Help Center",
-    icon: HelpCircle,
-    href: "https://dub.co/help",
-    target: "_blank",
-  },
-  {
-    name: "Documentation",
-    icon: Book2,
-    href: "https://dub.co/docs",
-    target: "_blank",
-  },
-];
-
 function WorkspaceList({
   selected,
   workspaces,
@@ -180,9 +165,9 @@ function WorkspaceList({
 
   const href = useCallback(
     (slug: string) => {
-      if (link || selected.slug === "/") {
+      if (link) {
         // if we're on a link page, navigate back to the workspace root
-        return `/${slug}`;
+        return `/${slug}/links`;
       } else if (programId) {
         // if we're on a program page, navigate to the program page
         return `/${slug}/programs`;
@@ -201,31 +186,59 @@ function WorkspaceList({
         onScroll={updateScrollProgress}
         className="relative max-h-80 w-full space-y-0.5 overflow-auto rounded-lg bg-white text-base sm:w-64 sm:text-sm"
       >
-        <div className="flex flex-col gap-0.5 border-b border-neutral-200 p-2">
-          {LINKS.map(({ name, icon: Icon, href, target }) => (
-            <Link
-              key={name}
-              href={href}
-              target={target}
-              className={cn(
-                "flex items-center gap-x-4 rounded-md px-2.5 py-2 transition-all duration-75 hover:bg-neutral-200/50 active:bg-neutral-200/80",
-                "outline-none focus-visible:ring-2 focus-visible:ring-black/50",
+        {/* Current workspace section */}
+        <div className="border-b border-neutral-200 p-2">
+          <div className="flex items-center gap-x-2.5 rounded-md p-2">
+            <BlurImage
+              src={selected.image || `${OG_AVATAR_URL}${selected.name}`}
+              width={28}
+              height={28}
+              alt={selected.name}
+              className="size-8 shrink-0 overflow-hidden rounded-full"
+            />
+            <div className="min-w-0">
+              <div className="truncate text-sm font-medium leading-5 text-neutral-900">
+                {selected.name}
+              </div>
+              {selected.slug !== "/" && (
+                <div
+                  className={cn(
+                    "truncate text-xs capitalize leading-tight",
+                    getPlanColor(selected.plan),
+                  )}
+                >
+                  {selected.plan}
+                </div>
               )}
+            </div>
+          </div>
+
+          {/* Settings and Invite members options */}
+          <div className="mt-2 flex flex-col gap-0.5">
+            <Link
+              href={`/${selected.slug}/settings`}
+              className="flex w-full items-center gap-x-2 rounded-md px-2 py-1.5 text-neutral-700 outline-none transition-all duration-75 hover:bg-neutral-200/50 focus-visible:ring-2 focus-visible:ring-black/50 active:bg-neutral-200/80"
               onClick={() => setOpenPopover(false)}
             >
-              <Icon className="size-4 text-neutral-500" />
-              <span className="block truncate text-neutral-600">{name}</span>
+              <Gear className="size-4 text-neutral-500" />
+              <span className="block truncate text-sm">Settings</span>
             </Link>
-          ))}
+            <Link
+              href={`/${selected.slug}/settings/people`}
+              className="flex w-full items-center gap-x-2 rounded-md px-2 py-1.5 text-neutral-700 outline-none transition-all duration-75 hover:bg-neutral-200/50 focus-visible:ring-2 focus-visible:ring-black/50 active:bg-neutral-200/80"
+              onClick={() => setOpenPopover(false)}
+            >
+              <UserPlus className="size-4 text-neutral-500" />
+              <span className="block truncate text-sm">Invite members</span>
+            </Link>
+          </div>
         </div>
+
+        {/* Workspaces section */}
         <div className="p-2">
-          <div className="flex items-center justify-between pb-1">
-            <p className="px-1 text-xs font-medium text-neutral-500">
-              Workspaces
-            </p>
-          </div>
+          <p className="p-1 text-xs font-medium text-neutral-500">Workspaces</p>
           <div className="flex flex-col gap-0.5">
-            {workspaces.map(({ id, name, slug, logo, plan }) => {
+            {workspaces.map(({ id, name, slug, logo }) => {
               const isActive = selected.slug === slug;
               return (
                 <Link
@@ -245,23 +258,11 @@ function WorkspaceList({
                     width={28}
                     height={28}
                     alt={id}
-                    className="size-7 shrink-0 overflow-hidden rounded-full"
+                    className="size-6 shrink-0 overflow-hidden rounded-full"
                   />
-                  <div>
-                    <span className="block truncate text-sm leading-5 text-neutral-900 sm:max-w-[140px]">
-                      {name}
-                    </span>
-                    {slug !== "/" && (
-                      <div
-                        className={cn(
-                          "truncate text-xs capitalize leading-tight",
-                          getPlanColor(plan),
-                        )}
-                      >
-                        {plan}
-                      </div>
-                    )}
-                  </div>
+                  <span className="block truncate text-sm leading-5 text-neutral-900 sm:max-w-[140px]">
+                    {name}
+                  </span>
                   {selected.slug === slug ? (
                     <span className="absolute inset-y-0 right-0 flex items-center pr-3 text-black">
                       <Check2 className="size-4" aria-hidden="true" />
@@ -278,7 +279,7 @@ function WorkspaceList({
               }}
               className="group flex w-full cursor-pointer items-center gap-x-2 rounded-md p-2 text-neutral-700 transition-all duration-75 hover:bg-neutral-200/50 active:bg-neutral-200/80"
             >
-              <Plus className="mx-1.5 size-4 text-neutral-500" />
+              <Plus className="ml-1.5 size-4 text-neutral-500" />
               <span className="block truncate">Create new workspace</span>
             </button>
           </div>
diff --git a/packages/ui/src/icons/nucleo/arrows-opposite-direction-x.tsx b/packages/ui/src/icons/nucleo/arrows-opposite-direction-x.tsx
diff --git a/packages/ui/src/icons/nucleo/index.ts b/packages/ui/src/icons/nucleo/index.ts

Original file line number	Diff line number	Diff line change
`@@ -43,7 +43,9 @@ export default async function PartnersMiddleware(req: NextRequest) {`
`43`	`43`	`return NextResponse.redirect(new URL("/onboarding", req.url));`
`44`	`44`	`}`
`45`	`45`
`46`		`- if (searchParamsObj.next) {`
	`46`	`+ // special case for handling ?next= query param`
	`47`	`+ // only redirect if next is a valid relative path (not an absolute URL)`
	`48`	`+ if (searchParamsObj.next && searchParamsObj.next.startsWith("/")) {`
`47`	`49`	`return NextResponse.redirect(new URL(searchParamsObj.next, req.url));`
`48`	`50`	`}`
`49`	`51`