dubinc · steven-tey · Oct 7, 2025 · Oct 7, 2025 · Oct 7, 2025 · Oct 7, 2025
diff --git a/apps/web/app/api/folders/[folderId]/route.ts b/apps/web/app/api/folders/[folderId]/route.ts
@@ -42,7 +42,7 @@ export const PATCH = withWorkspace(
   async ({ req, params, workspace, session }) => {
     const { folderId } = params;
 
-    const { name, accessLevel } = updateFolderSchema.parse(
+    const { name, description, accessLevel } = updateFolderSchema.parse(
       await parseRequestBody(req),
     );
 
@@ -76,6 +76,7 @@ export const PATCH = withWorkspace(
         },
         data: {
           name,
+          description,
           accessLevel,
         },
       });

diff --git a/apps/web/app/api/folders/route.ts b/apps/web/app/api/folders/route.ts
@@ -48,7 +48,7 @@ export const GET = withWorkspace(
 // POST /api/folders - create a folder for a workspace
 export const POST = withWorkspace(
   async ({ req, workspace, headers, session }) => {
-    const { name, accessLevel } = createFolderSchema.parse(
+    const { name, description, accessLevel } = createFolderSchema.parse(
       await parseRequestBody(req),
     );
 
@@ -87,6 +87,7 @@ export const POST = withWorkspace(
               id: createId({ prefix: "fold_" }),
               projectId: workspace.id,
               name,
+              description,
               accessLevel,
               users: {
                 create: {

diff --git a/apps/web/app/app.dub.co/(dashboard)/[slug]/links/folders/page-client.tsx b/apps/web/app/app.dub.co/(dashboard)/[slug]/links/folders/page-client.tsx
@@ -23,8 +23,11 @@ export const FoldersPageClient = () => {
   const searchParams = useSearchParams();
   const { queryParams } = useRouterStuff();
 
-  const { folders, loading, isValidating } = useFolders({
+  const { folders, isValidating } = useFolders({
     includeParams: ["search", "page"],
+    options: {
+      keepPreviousData: true,
+    },
   });
 
   const { data: foldersCount } = useFoldersCount({
@@ -55,7 +58,7 @@ export const FoldersPageClient = () => {
         </div>
 
         <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
-          {loading ? (
+          {!folders ? (
             Array.from({ length: 6 }).map((_, idx) => (
               <FolderCardPlaceholder key={idx} />
             ))

diff --git a/apps/web/app/app.dub.co/(dashboard)/[slug]/links/page-client.tsx b/apps/web/app/app.dub.co/(dashboard)/[slug]/links/page-client.tsx
@@ -9,7 +9,13 @@ import { useIsMegaFolder } from "@/lib/swr/use-is-mega-folder";
 import useLinks from "@/lib/swr/use-links";
 import useWorkspace from "@/lib/swr/use-workspace";
 import { useWorkspaceStore } from "@/lib/swr/use-workspace-store";
+import { FolderDropdown } from "@/ui/folders/folder-dropdown";
+import {
+  FolderInfoPanel,
+  FolderInfoPanelControls,
+} from "@/ui/folders/folder-info-panel";
 import { RequestFolderEditAccessButton } from "@/ui/folders/request-edit-button";
+import { PageContentWithSidePanel } from "@/ui/layout/page-content/page-content-with-side-panel";
 import { PageWidthWrapper } from "@/ui/layout/page-width-wrapper";
 import LinkDisplay from "@/ui/links/link-display";
 import LinksContainer from "@/ui/links/links-container";
@@ -38,6 +44,7 @@ import { ReactNode, useEffect, useState } from "react";
 
 export default function WorkspaceLinksClient() {
   const { data: session } = useSession();
+  const { folderId } = useCurrentFolderId();
 
   useEffect(() => {
     if (session?.user) {
@@ -49,9 +56,27 @@ export default function WorkspaceLinksClient() {
   }, [session?.user]);
 
   return (
-    <LinksDisplayProvider>
-      <WorkspaceLinks />
-    </LinksDisplayProvider>
+    <PageContentWithSidePanel
+      title={
+        <div className="-ml-2">
+          <FolderDropdown hideFolderIcon={true} />
+        </div>
+      }
+      controls={<WorkspaceLinksPageControls />}
+      sidePanel={
+        folderId
+          ? {
+              title: "Folder",
+              content: <FolderInfoPanel />,
+              controls: <FolderInfoPanelControls />,
+            }
+          : undefined
+      }
+    >
+      <LinksDisplayProvider>
+        <WorkspaceLinks />
+      </LinksDisplayProvider>
+    </PageContentWithSidePanel>
   );
 }
 
@@ -62,7 +87,7 @@ export function WorkspaceLinksPageControls() {
     <>
       <LinkBuilder />
       <div className="hidden sm:block">
-        <CreateLinkButton />
+        <CreateLinkButton className="h-9" />
       </div>
     </>
   );

diff --git a/apps/web/app/app.dub.co/(dashboard)/[slug]/links/page.tsx b/apps/web/app/app.dub.co/(dashboard)/[slug]/links/page.tsx
@@ -1,20 +1,5 @@
-import { FolderDropdown } from "@/ui/folders/folder-dropdown";
-import { PageContent } from "@/ui/layout/page-content";
-import WorkspaceLinksClient, {
-  WorkspaceLinksPageControls,
-} from "./page-client";
+import WorkspaceLinksClient from "./page-client";
 
 export default function WorkspaceLinks() {
-  return (
-    <PageContent
-      title={
-        <div className="-ml-2">
-          <FolderDropdown hideFolderIcon={true} />
-        </div>
-      }
-      controls={<WorkspaceLinksPageControls />}
-    >
-      <WorkspaceLinksClient />
-    </PageContent>
-  );
+  return <WorkspaceLinksClient />;
 }
diff --git a/apps/web/lib/folder/constants.ts b/apps/web/lib/folder/constants.ts
@@ -44,5 +44,6 @@ export const FOLDER_USER_ROLE_TO_PERMISSIONS: Record<
 export const unsortedLinks: FolderSummary = {
   id: "unsorted",
   name: "Links",
+  description: "Unsorted links",
   accessLevel: "write",
 };
diff --git a/apps/web/lib/folder/get-folder-or-throw.ts b/apps/web/lib/folder/get-folder-or-throw.ts
@@ -17,6 +17,7 @@ export const getFolderOrThrow = async ({
     select: {
       id: true,
       name: true,
+      description: true,
       type: true,
       accessLevel: true,
       createdAt: true,
@@ -48,6 +49,7 @@ export const getFolderOrThrow = async ({
   return {
     id: folder.id,
     name: folder.name,
+    description: folder.description,
     type: folder.type,
     accessLevel: folder.accessLevel,
     createdAt: folder.createdAt,

diff --git a/apps/web/lib/folder/get-folders.ts b/apps/web/lib/folder/get-folders.ts
@@ -53,6 +53,7 @@ export const getFolders = async ({
     select: {
       id: true,
       name: true,
+      description: true,
       type: true,
       accessLevel: true,
       createdAt: true,

diff --git a/apps/web/lib/swr/use-folder-users.ts b/apps/web/lib/swr/use-folder-users.ts
@@ -0,0 +1,45 @@
+import { FolderUser } from "@/lib/types";
+import { fetcher } from "@dub/utils";
+import useSWR, { SWRConfiguration } from "swr";
+import { getPlanCapabilities } from "../plan-capabilities";
+import useWorkspace from "./use-workspace";
+
+export function useFolderUsers(
+  {
+    folderId,
+    enabled = true,
+  }: {
+    folderId?: string | null;
+    enabled?: boolean;
+  },
+  swrOpts?: SWRConfiguration,
+) {
+  const { id: workspaceId, plan } = useWorkspace();
+  const { canManageFolderPermissions } = getPlanCapabilities(plan);
+
+  const {
+    data: users,
+    isValidating,
+    isLoading,
+  } = useSWR<FolderUser[]>(
+    enabled &&
+      workspaceId &&
+      canManageFolderPermissions &&
+      folderId &&
+      folderId !== "unsorted"
+      ? `/api/folders/${folderId}/users?workspaceId=${workspaceId}`
+      : undefined,
+    fetcher,
+    {
+      revalidateOnFocus: false,
+      keepPreviousData: true,
+      ...swrOpts,
+    },
+  );
+
+  return {
+    users,
+    isValidating,
+    isLoading,
+  };
+}
diff --git a/apps/web/lib/types.ts b/apps/web/lib/types.ts
@@ -536,7 +536,10 @@ export type FolderWithPermissions = {
   permissions: FolderPermission[];
 };
 
-export type FolderSummary = Pick<Folder, "id" | "name" | "accessLevel">;
+export type FolderSummary = Pick<
+  Folder,
+  "id" | "name" | "description" | "accessLevel"
+>;
 
 export type RewardProps = z.infer<typeof RewardSchema>;
 

diff --git a/apps/web/lib/zod/schemas/folders.ts b/apps/web/lib/zod/schemas/folders.ts
@@ -25,14 +25,22 @@ export const folderUserRoleSchema = z
 export const FolderSchema = z.object({
   id: z.string().describe("The unique ID of the folder."),
   name: z.string().describe("The name of the folder."),
+  description: z.string().nullable().describe("The description of the folder."),
   type: z.enum(Object.keys(FolderType) as [FolderType, ...FolderType[]]),
   accessLevel: workspaceFolderAccess,
   createdAt: z.date().describe("The date the folder was created."),
   updatedAt: z.date().describe("The date the folder was updated."),
 });
 
+export const FOLDER_MAX_DESCRIPTION_LENGTH = 500;
+
 export const createFolderSchema = z.object({
   name: z.string().describe("The name of the folder.").max(190),
+  description: z
+    .string()
+    .max(FOLDER_MAX_DESCRIPTION_LENGTH)
+    .nullish()
+    .describe("The description of the folder."),
   accessLevel: workspaceFolderAccess,
 });
 

diff --git a/apps/web/tests/folders/index.test.ts b/apps/web/tests/folders/index.test.ts
@@ -9,6 +9,7 @@ type FolderRecord = z.infer<typeof FolderSchema>;
 const expectedFolder = {
   id: expect.any(String),
   type: "default",
+  description: null,
   createdAt: expect.any(String),
   updatedAt: expect.any(String),
 };

diff --git a/apps/web/ui/folders/add-folder-form.tsx b/apps/web/ui/folders/add-folder-form.tsx
@@ -2,6 +2,7 @@ import { FOLDER_WORKSPACE_ACCESS } from "@/lib/folder/constants";
 import { getPlanCapabilities } from "@/lib/plan-capabilities";
 import useWorkspace from "@/lib/swr/use-workspace";
 import { FolderAccessLevel, FolderSummary } from "@/lib/types";
+import { FOLDER_MAX_DESCRIPTION_LENGTH } from "@/lib/zod/schemas/folders";
 import {
   BlurImage,
   Button,
@@ -26,6 +27,7 @@ export const AddFolderForm = ({ onSuccess, onCancel }: AddFolderFormProps) => {
   const { isMobile } = useMediaQuery();
   const [isCreating, setIsCreating] = useState(false);
   const [name, setName] = useState<string | undefined>(undefined);
+  const [description, setDescription] = useState<string | undefined>(undefined);
   const [accessLevel, setAccessLevel] = useState<FolderAccessLevel>("write");
 
   // Create new folder
@@ -37,6 +39,7 @@ export const AddFolderForm = ({ onSuccess, onCancel }: AddFolderFormProps) => {
       method: "POST",
       body: JSON.stringify({
         name,
+        description,
         ...(accessLevel && { accessLevel }),
       }),
     });
@@ -97,32 +100,56 @@ export const AddFolderForm = ({ onSuccess, onCancel }: AddFolderFormProps) => {
           <div className="flex flex-col gap-y-6 px-4 text-left sm:px-6">
             {step === 1 ? (
               <div className="mt-6">
-                <label className="text-sm font-normal text-neutral-500">
-                  Name
+                <label>
+                  <span className="text-content-emphasis block text-sm font-medium">
+                    Name
+                  </span>
+                  <div className="mt-2 flex rounded-md">
+                    <input
+                      type="text"
+                      required
+                      autoComplete="off"
+                      className="block w-full rounded-md border-neutral-300 text-neutral-900 placeholder-neutral-400 focus:border-neutral-500 focus:outline-none focus:ring-neutral-500 sm:text-sm"
+                      aria-invalid="true"
+                      placeholder="Acme Links"
+                      autoFocus={!isMobile}
+                      value={name}
+                      onChange={(e) => setName(e.target.value)}
+                      onKeyDown={(e) => {
+                        if (e.key === "Enter") {
+                          e.preventDefault();
+                          setStep(2);
+                        }
+                      }}
+                    />
+                  </div>
                 </label>
-                <div className="mt-2 flex rounded-md">
-                  <input
-                    type="text"
-                    required
-                    autoComplete="off"
-                    className="block w-full rounded-md border-neutral-300 text-neutral-900 placeholder-neutral-400 focus:border-neutral-500 focus:outline-none focus:ring-neutral-500 sm:text-sm"
-                    aria-invalid="true"
-                    placeholder="Acme Links"
-                    autoFocus={!isMobile}
-                    value={name}
-                    onChange={(e) => setName(e.target.value)}
+
+                <label className="mt-6 block">
+                  <span className="text-content-emphasis block text-sm font-medium">
+                    Description{" "}
+                    <span className="text-content-subtle">(optional)</span>
+                  </span>
+                  <textarea
+                    className="mt-2 block w-full rounded-md border-neutral-300 text-neutral-900 placeholder-neutral-400 focus:border-neutral-500 focus:outline-none focus:ring-neutral-500 sm:text-sm"
+                    value={description}
+                    maxLength={FOLDER_MAX_DESCRIPTION_LENGTH}
+                    onChange={(e) => setDescription(e.target.value)}
                     onKeyDown={(e) => {
-                      if (e.key === "Enter") {
+                      if (e.key === "Enter" && (e.ctrlKey || e.metaKey)) {
                         e.preventDefault();
                         setStep(2);
                       }
                     }}
                   />
-                </div>
+                  <span className="text-content-subtle text-xs tabular-nums">
+                    {description?.length || 0}/{FOLDER_MAX_DESCRIPTION_LENGTH}
+                  </span>
+                </label>
               </div>
             ) : (
               <div className="mt-6">
-                <label className="text-sm font-normal text-neutral-500">
+                <label className="text-content-emphasis text-sm font-medium">
                   Workspace access
                 </label>
                 <div className="mt-2 flex h-10 items-center justify-between rounded-md border border-neutral-300 bg-white">