{step === 1 ? (

- - Name + + + Name + +

+ setName(e.target.value)} + onKeyDown={(e) => { + if (e.key === "Enter") { + e.preventDefault(); + setStep(2); + } + }} + /> +

- + + Description + +

setName(e.target.value)}
+                    value={description}
+                    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?.toString().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">
diff --git a/apps/web/ui/folders/folder-actions.tsx b/apps/web/ui/folders/folder-actions.tsx
index c2e00a29f37..8d78bfd67cf 100644
--- a/apps/web/ui/folders/folder-actions.tsx
+++ b/apps/web/ui/folders/folder-actions.tsx
@@ -5,11 +5,11 @@ import {
   Button,
   CircleCheck,
   Copy,
+  LinesY,
   PenWriting,
   Popover,
   useCopyToClipboard,
   useKeyboardShortcut,
-  Users,
 } from "@dub/ui";
 import { cn } from "@dub/utils";
 import { Bookmark } from "lucide-react";
@@ -20,16 +20,18 @@ import { toast } from "sonner";
 import { useDeleteFolderModal } from "../modals/delete-folder-modal";
 import { useRenameFolderModal } from "../modals/rename-folder-modal";
 import { useDefaultFolderModal } from "../modals/set-default-folder-modal";
-import { Chart, Delete, ThreeDots } from "../shared/icons";
+import { Delete, ThreeDots } from "../shared/icons";
 import { useFolderPermissionsPanel } from "./folder-permissions-panel";
 import { isDefaultFolder } from "./utils";
 
 export const FolderActions = ({
   folder,
   onDelete,
+  className,
 }: {
   folder: FolderSummary;
   onDelete?: () => void;
+  className?: string;
 }) => {
   const router = useRouter();
   const [openPopover, setOpenPopover] = useState(false);
@@ -117,114 +119,89 @@ export const FolderActions = ({
       {folderPermissionsPanel}
       <Popover
         content={
-          <div className="grid w-full divide-y divide-neutral-200 sm:w-52">
-            <div className="grid gap-px p-2">
-              <Link
-                href={`/${workspaceSlug}/analytics${
-                  folder.id === "unsorted" ? "" : `?folderId=${folder.id}`
-                }`}
-              >
-                <Button
-                  text="Analytics"
-                  variant="outline"
-                  onClick={() => {
-                    setOpenPopover(false);
-                  }}
-                  icon={<Chart className="h-4 w-4" />}
-                  shortcut="A"
-                  className="h-9 px-2 font-medium"
-                />
-              </Link>
+          <div className="grid w-full gap-px p-2 sm:w-52">
+            {!unsortedLinks && (
+              <Button
+                text="Edit"
+                variant="outline"
+                onClick={() => {
+                  setOpenPopover(false);
+                  setShowFolderPermissionsPanel(true);
+                }}
+                icon={<PenWriting className="h-4 w-4" />}
+                shortcut="M"
+                className="h-9 px-2 font-medium"
+              />
+            )}
+            <Link
+              href={`/${workspaceSlug}/analytics${
+                folder.id === "unsorted" ? "" : `?folderId=${folder.id}`
+              }`}
+            >
+              <Button
+                text="Analytics"
+                variant="outline"
+                onClick={() => {
+                  setOpenPopover(false);
+                }}
+                icon={<LinesY className="h-4 w-4" />}
+                shortcut="A"
+                className="h-9 px-2 font-medium"
+              />
+            </Link>
 
-              {!unsortedLinks && (
-                <Button
-                  text="Members"
-                  variant="outline"
-                  onClick={() => {
-                    setOpenPopover(false);
-                    setShowFolderPermissionsPanel(true);
-                  }}
-                  icon={<Users className="h-4 w-4" />}
-                  shortcut="M"
-                  className="h-9 px-2 font-medium"
-                />
-              )}
-            </div>
+            {!unsortedLinks && (
+              <Button
+                text="Copy Folder ID"
+                variant="outline"
+                onClick={() => copyFolderId()}
+                icon={
+                  copiedFolderId ? (
+                    <CircleCheck className="h-4 w-4" />
+                  ) : (
+                    <Copy className="h-4 w-4" />
+                  )
+                }
+                shortcut="I"
+                className="h-9 px-2 font-medium"
+              />
+            )}
 
-            <div className="grid gap-px p-2">
-              {!unsortedLinks && (
-                <Button
-                  text="Copy Folder ID"
-                  variant="outline"
-                  onClick={() => copyFolderId()}
-                  icon={
-                    copiedFolderId ? (
-                      <CircleCheck className="h-4 w-4" />
-                    ) : (
-                      <Copy className="h-4 w-4" />
-                    )
-                  }
-                  shortcut="I"
-                  className="h-9 px-2 font-medium"
-                />
-              )}
+            <Button
+              text="Set as Default"
+              variant="outline"
+              onClick={() => {
+                setOpenPopover(false);
+                setShowDefaultFolderModal(true);
+              }}
+              icon={<Bookmark className="h-4 w-4" />}
+              shortcut="D"
+              className="h-9 px-2 font-medium"
+              disabled={isDefault}
+              disabledTooltip={
+                isDefault ? "This is your default folder." : undefined
+              }
+            />
 
+            {!unsortedLinks && (
               <Button
-                text="Set as Default"
-                variant="outline"
+                text="Delete"
+                variant="danger-outline"
                 onClick={() => {
                   setOpenPopover(false);
-                  setShowDefaultFolderModal(true);
+                  setShowDeleteFolderModal(true);
                 }}
-                icon={<Bookmark className="h-4 w-4" />}
-                shortcut="D"
+                icon={<Delete className="h-4 w-4" />}
+                shortcut="X"
                 className="h-9 px-2 font-medium"
-                disabled={isDefault}
+                disabled={!canUpdateFolder}
                 disabledTooltip={
-                  isDefault ? "This is your default folder." : undefined
+                  !canUpdateFolder
+                    ? "Only folder owners can delete a folder."
+                    : undefined
                 }
               />
-
-              {!unsortedLinks && (
-                <>
-                  <Button
-                    text="Rename"
-                    variant="outline"
-                    onClick={() => {
-                      setOpenPopover(false);
-                      setShowRenameFolderModal(true);
-                    }}
-                    icon={<PenWriting className="h-4 w-4" />}
-                    shortcut="R"
-                    className="h-9 px-2 font-medium"
-                    disabled={!canUpdateFolder}
-                    disabledTooltip={
-                      !canUpdateFolder
-                        ? "Only folder owners can rename a folder."
-                        : undefined
-                    }
-                  />
-
-                  <Button
-                    text="Delete"
-                    variant="danger-outline"
-                    onClick={() => {
-                      setOpenPopover(false);
-                      setShowDeleteFolderModal(true);
-                    }}
-                    icon={<Delete className="h-4 w-4" />}
-                    shortcut="X"
-                    className="h-9 px-2 font-medium"
-                    disabled={!canUpdateFolder}
-                    disabledTooltip={
-                      !canUpdateFolder
-                        ? "Only folder owners can delete a folder."
-                        : undefined
-                    }
-                  />
-                </>
-              )}
-            </div>
+            )}
           </div>
         }
         align="start"
@@ -236,6 +213,7 @@ export const FolderActions = ({
           className={cn(
             "h-8 flex-1 bg-transparent px-1 outline-none transition-all duration-200",
             "border-transparent data-[state=open]:border-neutral-500 sm:group-hover/card:data-[state=closed]:border-neutral-200",
+            className,
           )}
           onClick={() => setOpenPopover(true)}
           icon={<ThreeDots className="size-4 shrink-0 text-neutral-500" />}
diff --git a/apps/web/ui/folders/folder-info-panel.tsx b/apps/web/ui/folders/folder-info-panel.tsx
new file mode 100644
index 00000000000..8a7ea005784
--- /dev/null
+++ b/apps/web/ui/folders/folder-info-panel.tsx
@@ -0,0 +1,144 @@
+import { FOLDER_WORKSPACE_ACCESS } from "@/lib/folder/constants";
+import useCurrentFolderId from "@/lib/swr/use-current-folder-id";
+import useFolder from "@/lib/swr/use-folder";
+import { useFolderUsers } from "@/lib/swr/use-folder-users";
+import useWorkspace from "@/lib/swr/use-workspace";
+import { FolderUser } from "@/lib/types";
+import { Avatar, BlurImage, LoadingSpinner, Tooltip } from "@dub/ui";
+import { PropsWithChildren } from "react";
+import { FolderActions } from "./folder-actions";
+
+export function FolderInfoPanel() {
+  const {
+    id: workspaceId,
+    logo: workspaceLogo,
+    name: workspaceName,
+  } = useWorkspace();
+  const { folderId } = useCurrentFolderId();
+  const { folder } = useFolder({ folderId });
+
+  const { users, isLoading: isLoadingUsers } = useFolderUsers({
+    folderId: folderId,
+    enabled: !!folder,
+  });
+
+  if (!folder)
+    return (
+      <div className="flex size-full items-center justify-center">
+        <LoadingSpinner />
+      </div>
+    );
+
+  const owners = users?.filter((u) => u.role === "owner");
+  const editors = users?.filter((u) => u.role === "editor");
+  const viewers = users?.filter((u) => u.role === "viewer");
+
+  return (
+    <div className="flex flex-col gap-6">
+      {folder.description && (
+        <div className="flex flex-col gap-2">
+          <SectionHeader>Description</SectionHeader>
+          <p className="text-content-subtle text-sm">{folder.description}</p>
+        </div>
+      )}
+
+      <div className="flex flex-col gap-2">
+        <SectionHeader>Workspace</SectionHeader>
+        <div className="flex items-center gap-3">
+          <BlurImage
+            src={workspaceLogo || `https://avatar.vercel.sh/${workspaceId}`}
+            referrerPolicy="no-referrer"
+            width={36}
+            height={36}
+            alt={`${workspaceName} logo`}
+            className="size-9 shrink-0 overflow-hidden rounded-full"
+            draggable={false}
+          />
+          <div>
+            <span className="text-content-emphasis min-w-0 truncate text-sm font-semibold">
+              {workspaceName}
+            </span>
+            <div className="text-content-default bg-bg-emphasis w-fit rounded-md px-1 text-xs font-semibold">
+              {folder.accessLevel
+                ? FOLDER_WORKSPACE_ACCESS[folder.accessLevel]
+                : "No access"}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div className="flex flex-col gap-2">
+        <SectionHeader>Owner</SectionHeader>
+        <div className="flex flex-wrap items-center gap-3">
+          <UserList users={owners} />
+        </div>
+      </div>
+
+      {Boolean(isLoadingUsers || editors?.length) && (
+        <div className="flex flex-col gap-2">
+          <SectionHeader>Editor</SectionHeader>
+          <div className="flex flex-wrap items-center gap-3">
+            <UserList users={editors} />
+          </div>
+        </div>
+      )}
+
+      {Boolean(isLoadingUsers || viewers?.length) && (
+        <div className="flex flex-col gap-2">
+          <SectionHeader>Viewer</SectionHeader>
+          <div className="flex flex-wrap items-center gap-3">
+            <UserList users={viewers} />
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+const SectionHeader = ({ children }: PropsWithChildren) => (
+  <h3 className="text-content-default text-sm font-semibold">{children}</h3>
+);
+
+const UserList = ({ users }: { users?: FolderUser[] }) => (
+  <div className="flex flex-wrap items-center gap-3">
+    {users
+      ? users.map((user) => (
+          <Tooltip
+            key={user.id}
+            content={
+              <div className="w-full p-3">
+                <Avatar user={user} className="size-8" />
+                <div className="mt-2 flex items-center gap-1.5">
+                  <p className="text-sm font-semibold text-neutral-700">
+                    {user?.name || user?.email || "Anonymous User"}
+                  </p>
+                </div>
+                <div className="flex flex-col gap-1 text-xs text-neutral-500">
+                  {user?.name && user.email && <p>{user.email}</p>}
+                </div>
+              </div>
+            }
+            delayDuration={150}
+          >
+            <div>
+              <Avatar user={user} className="size-9 border-none" />
+            </div>
+          </Tooltip>
+        ))
+      : [...Array(3)].map((_, index) => (
+          <div
+            key={index}
+            className="size-9 shrink-0 animate-pulse overflow-hidden rounded-full bg-neutral-200"
+          />
+        ))}
+  </div>
+);
+
+export function FolderInfoPanelControls() {
+  const { folderId } = useCurrentFolderId();
+  const { folder } = useFolder({ folderId });
+
+  if (!folder) return null;
+
+  return <FolderActions folder={folder} className="border-subtle border" />;
+}
diff --git a/apps/web/ui/folders/folder-permissions-panel.tsx b/apps/web/ui/folders/folder-permissions-panel.tsx
index 7b51f166a0e..0da41c968b4 100644
--- a/apps/web/ui/folders/folder-permissions-panel.tsx
+++ b/apps/web/ui/folders/folder-permissions-panel.tsx
@@ -9,17 +9,18 @@ import {
   useCheckFolderPermission,
   useFolderPermissions,
 } from "@/lib/swr/use-folder-permissions";
+import { useFolderUsers } from "@/lib/swr/use-folder-users";
 import useWorkspace from "@/lib/swr/use-workspace";
 import { Folder, FolderUser } from "@/lib/types";
 import { FolderUserRole } from "@dub/prisma/client";
 import { Avatar, BlurImage, Button, Tooltip, TooltipContent } from "@dub/ui";
 import { Globe, UserCheck } from "@dub/ui/icons";
-import { cn, fetcher, nFormatter, OG_AVATAR_URL, pluralize } from "@dub/utils";
+import { cn, nFormatter, OG_AVATAR_URL, pluralize } from "@dub/utils";
 import { useSession } from "next-auth/react";
 import { useAction } from "next-safe-action/hooks";
 import { useState } from "react";
 import { toast } from "sonner";
-import useSWR, { mutate } from "swr";
+import { mutate } from "swr";
 import { Drawer } from "vaul";
 import { AnimatedEmptyState } from "../shared/animated-empty-state";
 import { X } from "../shared/icons";
@@ -56,19 +57,11 @@ const FolderPermissionsPanel = ({
   const { canManageFolderPermissions } = getPlanCapabilities(plan);
 
   const {
-    data: users,
+    users,
     isLoading: isUsersLoading,
     isValidating: isUsersValidating,
-  } = useSWR<FolderUser[]>(
-    showPanel && canManageFolderPermissions
-      ? `/api/folders/${folder.id}/users?workspaceId=${workspaceId}`
-      : undefined,
-    fetcher,
-    {
-      revalidateOnFocus: false,
-      keepPreviousData: true,
-    },
-  );
+  } = useFolderUsers({ folderId: folder.id, enabled: showPanel });
+
   const { folderLinkCount } = useFolderLinkCount({ folderId: folder.id });
 
   const updateWorkspaceAccessLevel = async (accessLevel: string) => {
diff --git a/apps/web/ui/layout/page-content/index.tsx b/apps/web/ui/layout/page-content/index.tsx
index 884d0a23693..06e57ae5bfd 100644
--- a/apps/web/ui/layout/page-content/index.tsx
+++ b/apps/web/ui/layout/page-content/index.tsx
@@ -1,49 +1,23 @@
-import { InfoTooltip, SimpleTooltipContent } from "@dub/ui";
 import { cn } from "@dub/utils";
-import { ChevronLeft } from "lucide-react";
-import Link from "next/link";
-import { PropsWithChildren, ReactNode } from "react";
-import { PageWidthWrapper } from "../page-width-wrapper";
-import { NavButton } from "./nav-button";
+import { PropsWithChildren } from "react";
+import {
+  PageContentHeader,
+  PageContentHeaderProps,
+} from "./page-content-header";
 
 export * from "./page-content-old";
 
 export function PageContent({
-  title,
-  titleInfo,
-  titleBackHref,
-  controls,
-  headerContent,
   className,
   contentWrapperClassName,
   children,
-}: PropsWithChildren<{
-  title?: ReactNode;
-  titleInfo?: ReactNode | { title: string; href?: string };
-  titleBackHref?: string;
-  controls?: ReactNode;
-  headerContent?: ReactNode;
-  className?: string;
-  contentWrapperClassName?: string;
-}>) {
-  // Generate titleInfo from object if provided
-  const finalTitleInfo =
-    titleInfo && typeof titleInfo === "object" && "title" in titleInfo ? (
-      <InfoTooltip
-        content={
-          <SimpleTooltipContent
-            title={titleInfo.title}
-            href={titleInfo.href}
-            cta="Learn more"
-          />
-        }
-      />
-    ) : (
-      titleInfo
-    );
-
-  const hasHeaderContent = !!(title || controls || headerContent);
-
+  ...headerProps
+}: PropsWithChildren<
+  {
+    className?: string;
+    contentWrapperClassName?: string;
+  } & PageContentHeaderProps
+>) {
   return (
     <div
       className={cn(
@@ -51,42 +25,7 @@ export function PageContent({
         className,
       )}
     >
-      <div
-        className={cn("border-border-subtle", hasHeaderContent && "border-b")}
-      >
-        <PageWidthWrapper>
-          <div
-            className={cn(
-              "flex h-12 items-center justify-between gap-4",
-              hasHeaderContent ? "sm:h-16" : "sm:h-0",
-            )}
-          >
-            <div className="flex min-w-0 items-center gap-4">
-              <NavButton />
-              {title && (
-                <div className="flex min-w-0 items-center gap-2">
-                  {titleBackHref && (
-                    <Link
-                      href={titleBackHref}
-                      className="rounded-lg p-1.5 text-neutral-500 transition-colors hover:bg-neutral-100 hover:text-neutral-900"
-                    >
-                      <ChevronLeft className="size-5" />
-                    </Link>
-                  )}
-                  <h1 className="text-content-emphasis min-w-0 text-lg font-semibold leading-7">
-                    {title}
-                  </h1>
-                  {finalTitleInfo}
-                </div>
-              )}
-            </div>
-            {controls && (
-              <div className="flex items-center gap-2">{controls}</div>
-            )}
-          </div>
-          {headerContent && <div className="pb-3 pt-1">{headerContent}</div>}
-        </PageWidthWrapper>
-      </div>
+      <PageContentHeader {...headerProps} />
       <div
         className={cn(
           "rounded-t-[inherit] bg-white pt-3 lg:pt-6",
diff --git a/apps/web/ui/layout/page-content/page-content-header.tsx b/apps/web/ui/layout/page-content/page-content-header.tsx
new file mode 100644
index 00000000000..97b7996822f
--- /dev/null
+++ b/apps/web/ui/layout/page-content/page-content-header.tsx
@@ -0,0 +1,78 @@
+import { InfoTooltip, SimpleTooltipContent } from "@dub/ui";
+import { cn } from "@dub/utils";
+import { ChevronLeft } from "lucide-react";
+import Link from "next/link";
+import { ReactNode } from "react";
+import { PageWidthWrapper } from "../page-width-wrapper";
+import { NavButton } from "./nav-button";
+
+export type PageContentHeaderProps = {
+  title?: ReactNode;
+  titleInfo?: ReactNode | { title: string; href?: string };
+  titleBackHref?: string;
+  controls?: ReactNode;
+  headerContent?: ReactNode;
+};
+
+export function PageContentHeader({
+  title,
+  titleInfo,
+  titleBackHref,
+  controls,
+  headerContent,
+}: PageContentHeaderProps) {
+  // Generate titleInfo from object if provided
+  const finalTitleInfo =
+    titleInfo && typeof titleInfo === "object" && "title" in titleInfo ? (
+      <InfoTooltip
+        content={
+          <SimpleTooltipContent
+            title={titleInfo.title}
+            href={titleInfo.href}
+            cta="Learn more"
+          />
+        }
+      />
+    ) : (
+      titleInfo
+    );
+
+  const hasHeaderContent = !!(title || controls || headerContent);
+
+  return (
+    <div className={cn("border-border-subtle", hasHeaderContent && "border-b")}>
+      <PageWidthWrapper>
+        <div
+          className={cn(
+            "flex h-12 items-center justify-between gap-4",
+            hasHeaderContent ? "sm:h-16" : "sm:h-0",
+          )}
+        >
+          <div className="flex min-w-0 items-center gap-4">
+            <NavButton />
+            {title && (
+              <div className="flex min-w-0 items-center gap-2">
+                {titleBackHref && (
+                  <Link
+                    href={titleBackHref}
+                    className="rounded-lg p-1.5 text-neutral-500 transition-colors hover:bg-neutral-100 hover:text-neutral-900"
+                  >
+                    <ChevronLeft className="size-5" />
+                  </Link>
+                )}
+                <h1 className="text-content-emphasis min-w-0 text-lg font-semibold leading-7">
+                  {title}
+                </h1>
+                {finalTitleInfo}
+              </div>
+            )}
+          </div>
+          {controls && (
+            <div className="flex items-center gap-2">{controls}</div>
+          )}
+        </div>
+        {headerContent && <div className="pb-3 pt-1">{headerContent}</div>}
+      </PageWidthWrapper>
+    </div>
+  );
+}
diff --git a/apps/web/ui/layout/page-content/page-content-with-side-panel.tsx b/apps/web/ui/layout/page-content/page-content-with-side-panel.tsx
new file mode 100644
index 00000000000..02bfd6c05a6
--- /dev/null
+++ b/apps/web/ui/layout/page-content/page-content-with-side-panel.tsx
@@ -0,0 +1,116 @@
+"use client";
+
+import { X } from "@/ui/shared/icons";
+import { cn } from "@dub/utils";
+import {
+  Dispatch,
+  PropsWithChildren,
+  ReactNode,
+  SetStateAction,
+  createContext,
+  useState,
+} from "react";
+import {
+  PageContentHeader,
+  PageContentHeaderProps,
+} from "./page-content-header";
+import { ToggleSidePanelButton } from "./toggle-side-panel-button";
+
+export const PageContentWithSidePanelContext = createContext<{
+  isSidePanelOpen: boolean;
+  setIsSidePanelOpen: Dispatch<SetStateAction<boolean>>;
+}>({
+  isSidePanelOpen: false,
+  setIsSidePanelOpen: () => {},
+});
+
+export function PageContentWithSidePanel({
+  className,
+  contentWrapperClassName,
+  sidePanel,
+  children,
+  controls,
+  ...headerProps
+}: PropsWithChildren<
+  {
+    className?: string;
+    contentWrapperClassName?: string;
+    sidePanel?: {
+      title: ReactNode;
+      content: ReactNode;
+      controls?: ReactNode;
+    };
+  } & PageContentHeaderProps
+>) {
+  const [isSidePanelOpen, setIsSidePanelOpen] = useState(false);
+
+  return (
+    <PageContentWithSidePanelContext.Provider
+      value={{ isSidePanelOpen, setIsSidePanelOpen }}
+    >
+      <div
+        className={cn(
+          "@container/page-content relative grid min-h-[calc(100dvh-var(--page-top-margin)-1px)] grid-cols-[minmax(340px,1fr)_minmax(0,min-content)] rounded-t-[inherit] bg-neutral-100 md:bg-white",
+          className,
+        )}
+      >
+        <div>
+          <PageContentHeader
+            {...headerProps}
+            controls={
+              <>
+                {controls}
+                {sidePanel && (
+                  <ToggleSidePanelButton
+                    isOpen={isSidePanelOpen}
+                    onClick={() => setIsSidePanelOpen((o) => !o)}
+                  />
+                )}
+              </>
+            }
+          />
+          <div
+            className={cn(
+              "rounded-t-[inherit] bg-white pt-3 lg:pt-6",
+              contentWrapperClassName,
+            )}
+          >
+            {children}
+          </div>
+        </div>
+
+        {/* Right side panel - Profile */}
+        {sidePanel && (
+          <div
+            className={cn(
+              "absolute right-0 top-0 h-full min-h-0 w-0 overflow-hidden bg-white shadow-lg transition-[width]",
+              "@[960px]/page-content:shadow-none @[960px]/page-content:relative",
+              isSidePanelOpen && "w-full sm:w-[340px]",
+            )}
+          >
+            <div className="border-border-subtle flex size-full min-h-0 w-full flex-col border-l sm:w-[340px]">
+              <div className="border-border-subtle box-content flex h-12 shrink-0 items-center justify-between gap-4 border-b px-4 sm:h-16 sm:px-6">
+                <h2 className="text-content-emphasis text-lg font-semibold leading-7">
+                  {sidePanel.title}
+                </h2>
+                <div className="flex items-center gap-2">
+                  {sidePanel.controls}
+                  <button
+                    type="button"
+                    onClick={() => setIsSidePanelOpen(false)}
+                    className="@[960px]/page-content:hidden rounded-lg p-2 text-neutral-500 transition-colors hover:bg-neutral-100 hover:text-neutral-900"
+                  >
+                    <X className="size-4" />
+                  </button>
+                </div>
+              </div>
+              <div className="bg-bg-muted scrollbar-hide flex grow flex-col gap-4 overflow-y-scroll p-6">
+                {sidePanel.content}
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+    </PageContentWithSidePanelContext.Provider>
+  );
+}
diff --git a/apps/web/ui/layout/page-content/toggle-side-panel-button.tsx b/apps/web/ui/layout/page-content/toggle-side-panel-button.tsx
new file mode 100644
index 00000000000..53f2a5275e6
--- /dev/null
+++ b/apps/web/ui/layout/page-content/toggle-side-panel-button.tsx
@@ -0,0 +1,66 @@
+import { Button } from "@dub/ui";
+import { cn } from "@dub/utils";
+
+export function ToggleSidePanelButton({
+  side = "right",
+  isOpen,
+  onClick,
+}: {
+  side?: "left" | "right";
+  isOpen: boolean;
+  onClick: () => void;
+}) {
+  return (
+    <Button
+      onClick={onClick}
+      variant="secondary"
+      className="size-9 shrink-0 rounded-lg p-0"
+      icon={
+        <svg
+          viewBox="0 0 18 18"
+          xmlns="http://www.w3.org/2000/svg"
+          className={cn("size-4", side === "left" && "rotate-180")}
+        >
+          <g fill="currentColor">
+            <line
+              fill="none"
+              stroke="currentColor"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth="1.5"
+              x1="11.75"
+              x2="11.75"
+              y1="2.75"
+              y2="15.25"
+            />
+            <polyline
+              fill="none"
+              points="5.75 6.5 8.25 9 5.75 11.5"
+              stroke="currentColor"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth="1.5"
+              className={cn(
+                "transition-transform [transform-box:fill-box] [transform-origin:center] [vector-effect:non-scaling-stroke]",
+                !isOpen && "-scale-x-100",
+              )}
+            />
+            <rect
+              height="12.5"
+              width="14.5"
+              fill="none"
+              rx="2"
+              ry="2"
+              stroke="currentColor"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth="1.5"
+              x="1.75"
+              y="2.75"
+            />
+          </g>
+        </svg>
+      }
+    />
+  );
+}
diff --git a/apps/web/ui/links/links-toolbar.tsx b/apps/web/ui/links/links-toolbar.tsx
index 2430255eb05..e7522557eb9 100644
--- a/apps/web/ui/links/links-toolbar.tsx
+++ b/apps/web/ui/links/links-toolbar.tsx
@@ -206,7 +206,7 @@ export const LinksToolbar = memo(
         {/* Leave room at bottom of list */}
         <div className="h-[90px]" />
 
-        <div className="fixed bottom-4 left-0 w-full sm:max-[1372px]:w-[calc(100%-150px)] md:left-[304px] md:w-[calc(100%-304px)] md:max-[1372px]:w-[calc(100%-304px-150px)]">
+        <div className="fixed bottom-4 left-0 z-10 w-full sm:max-[1372px]:w-[calc(100%-150px)] md:left-[304px] md:w-[calc(100%-304px)] md:max-[1372px]:w-[calc(100%-304px-150px)]">
           <div
             className={cn(
               "relative left-1/2 w-full max-w-[768px] -translate-x-1/2 px-5",
diff --git a/apps/web/ui/shared/max-characters-counter.tsx b/apps/web/ui/shared/max-characters-counter.tsx
index 6999717c9f0..0f519e1f3fa 100644
--- a/apps/web/ui/shared/max-characters-counter.tsx
+++ b/apps/web/ui/shared/max-characters-counter.tsx
@@ -15,7 +15,7 @@ export function MaxCharactersCounter({
   const value = useWatch({ control, name });
 
   return (
-    <span className={cn("text-content-subtle text-xs", className)}>
+    <span className={cn("text-content-subtle text-xs tabular-nums", className)}>
       {value?.toString().length || 0}/{maxLength}
     </span>
   );
diff --git a/packages/prisma/schema/folder.prisma b/packages/prisma/schema/folder.prisma
index fc0b67551b3..ce109c6098e 100644
--- a/packages/prisma/schema/folder.prisma
+++ b/packages/prisma/schema/folder.prisma
@@ -17,6 +17,7 @@ enum FolderUserRole {
 model Folder {
   id          String             @id @default(cuid())
   name        String
+  description String?
   projectId   String
   type        FolderType         @default(default)
   accessLevel FolderAccessLevel? // Access level of the folder within the workspace

From 052f14058d11a91334604f371a74fcfb69eb72ee Mon Sep 17 00:00:00 2001
From: Tim Wilson <tim@twilson.net>
Date: Tue, 7 Oct 2025 13:33:00 -0400
Subject: [PATCH 2/8] More folder updates

---
 apps/web/app/api/folders/[folderId]/route.ts  |   3 +-
 apps/web/app/api/folders/route.ts             |   3 +-
 .../[slug]/links/folders/page-client.tsx      |   7 +-
 .../(dashboard)/[slug]/links/page-client.tsx  |   2 +-
 apps/web/lib/types.ts                         |   5 +-
 apps/web/ui/folders/add-folder-form.tsx       |   7 +-
 apps/web/ui/folders/edit-folder-form.tsx      |  96 +++++
 apps/web/ui/folders/edit-folder-panel.tsx     | 336 ++++++++++++++++
 apps/web/ui/folders/folder-actions.tsx        |  11 +-
 .../ui/folders/folder-permissions-panel.tsx   | 376 ------------------
 .../page-content-with-side-panel.tsx          |   3 +-
 11 files changed, 459 insertions(+), 390 deletions(-)
 create mode 100644 apps/web/ui/folders/edit-folder-form.tsx
 create mode 100644 apps/web/ui/folders/edit-folder-panel.tsx
 delete mode 100644 apps/web/ui/folders/folder-permissions-panel.tsx

diff --git a/apps/web/app/api/folders/[folderId]/route.ts b/apps/web/app/api/folders/[folderId]/route.ts
index 238e116c3f4..702ae82d9c6 100644
--- 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
index 5547b583c8e..8b31096c03e 100644
--- 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
index 5fd461925d0..a0a33f9609c 100644
--- 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
index 1448add3f93..18b157c5572 100644
--- 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
@@ -87,7 +87,7 @@ export function WorkspaceLinksPageControls() {
     <>
       <LinkBuilder />
       <div className="hidden sm:block">
-        <CreateLinkButton />
+        <CreateLinkButton className="h-9" />
       </div>
     </>
   );
diff --git a/apps/web/lib/types.ts b/apps/web/lib/types.ts
index 06ebaf0ac32..acaf4afc164 100644
--- 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/ui/folders/add-folder-form.tsx b/apps/web/ui/folders/add-folder-form.tsx
index 3cc047ef380..e106c3ad37e 100644
--- a/apps/web/ui/folders/add-folder-form.tsx
+++ b/apps/web/ui/folders/add-folder-form.tsx
@@ -101,7 +101,7 @@ export const AddFolderForm = ({ onSuccess, onCancel }: AddFolderFormProps) => {
             {step === 1 ? (
               <div className="mt-6">
                 <label>
-                  <span className="text-content-emphasis text-sm font-medium">
+                  <span className="text-content-emphasis block text-sm font-medium">
                     Name
                   </span>
                   <div className="mt-2 flex rounded-md">
@@ -126,8 +126,9 @@ export const AddFolderForm = ({ onSuccess, onCancel }: AddFolderFormProps) => {
                 </label>
 
                 <label className="mt-6 block">
-                  <span className="text-content-emphasis text-sm font-medium">
-                    Description
+                  <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"
diff --git a/apps/web/ui/folders/edit-folder-form.tsx b/apps/web/ui/folders/edit-folder-form.tsx
new file mode 100644
index 00000000000..76c1d80959b
--- /dev/null
+++ b/apps/web/ui/folders/edit-folder-form.tsx
@@ -0,0 +1,96 @@
+import { mutatePrefix } from "@/lib/swr/mutate";
+import useWorkspace from "@/lib/swr/use-workspace";
+import { Folder } from "@/lib/types";
+import {
+  FOLDER_MAX_DESCRIPTION_LENGTH,
+  updateFolderSchema,
+} from "@/lib/zod/schemas/folders";
+import { Button } from "@dub/ui";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
+import { MaxCharactersCounter } from "../shared/max-characters-counter";
+
+export function EditFolderForm({
+  folder,
+}: {
+  folder: Pick<Folder, "id" | "name" | "description">;
+}) {
+  const { id: workspaceId } = useWorkspace();
+
+  const {
+    handleSubmit,
+    register,
+    control,
+    reset,
+    formState: { isDirty, isSubmitting },
+  } = useForm<Pick<z.infer<typeof updateFolderSchema>, "name" | "description">>(
+    {
+      defaultValues: {
+        name: folder.name,
+        description: folder.description,
+      },
+    },
+  );
+
+  return (
+    <form
+      onSubmit={handleSubmit(async (data) => {
+        const response = await fetch(
+          `/api/folders/${folder.id}?workspaceId=${workspaceId}`,
+          {
+            method: "PATCH",
+            body: JSON.stringify(data),
+          },
+        );
+
+        if (!response.ok) {
+          const { error } = await response.json();
+          toast.error(error.message);
+          return;
+        }
+
+        reset(data);
+        mutatePrefix("/api/folders");
+        toast.success("Folder updated successfully!");
+      })}
+    >
+      <label>
+        <span className="text-content-emphasis block text-sm font-medium">
+          Name
+        </span>
+        <div className="mt-2 flex rounded-md">
+          <input
+            type="text"
+            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"
+            placeholder="Acme Links"
+            {...register("name", { required: true })}
+          />
+        </div>
+      </label>
+
+      <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"
+          {...register("description")}
+        />
+        <MaxCharactersCounter
+          control={control}
+          name="description"
+          maxLength={FOLDER_MAX_DESCRIPTION_LENGTH}
+        />
+      </label>
+
+      <Button
+        type="submit"
+        className="mt-6 h-8 w-fit rounded-lg px-3"
+        disabled={!isDirty}
+        loading={isSubmitting}
+        text="Save changes"
+      />
+    </form>
+  );
+}
diff --git a/apps/web/ui/folders/edit-folder-panel.tsx b/apps/web/ui/folders/edit-folder-panel.tsx
new file mode 100644
index 00000000000..a50dc290b70
--- /dev/null
+++ b/apps/web/ui/folders/edit-folder-panel.tsx
@@ -0,0 +1,336 @@
+import { updateUserRoleInFolder } from "@/lib/actions/folders/update-folder-user-role";
+import {
+  FOLDER_USER_ROLE,
+  FOLDER_WORKSPACE_ACCESS,
+} from "@/lib/folder/constants";
+import { getPlanCapabilities } from "@/lib/plan-capabilities";
+import {
+  useCheckFolderPermission,
+  useFolderPermissions,
+} from "@/lib/swr/use-folder-permissions";
+import { useFolderUsers } from "@/lib/swr/use-folder-users";
+import useWorkspace from "@/lib/swr/use-workspace";
+import { Folder, FolderUser } from "@/lib/types";
+import { FolderUserRole } from "@dub/prisma/client";
+import {
+  Avatar,
+  BlurImage,
+  Button,
+  Sheet,
+  Tooltip,
+  TooltipContent,
+} from "@dub/ui";
+import { UserCheck } from "@dub/ui/icons";
+import { cn, OG_AVATAR_URL } from "@dub/utils";
+import { useSession } from "next-auth/react";
+import { useAction } from "next-safe-action/hooks";
+import { useState } from "react";
+import { toast } from "sonner";
+import { mutate } from "swr";
+import { AnimatedEmptyState } from "../shared/animated-empty-state";
+import { X } from "../shared/icons";
+import { EditFolderForm } from "./edit-folder-form";
+
+interface EditFolderPanelProps {
+  showPanel: boolean;
+  setShowPanel: (showPanel: boolean) => void;
+  folder: Pick<Folder, "id" | "name" | "description" | "accessLevel">;
+  onSuccess?: () => void;
+}
+
+const EditFolderPanelContent = ({
+  showPanel,
+  folder,
+}: EditFolderPanelProps) => {
+  const { id: workspaceId, slug, logo, name, plan } = useWorkspace();
+
+  const [isUpdating, setIsUpdating] = useState(false);
+  const [workspaceAccessLevel, setWorkspaceAccessLevel] = useState<string>();
+
+  const { isLoading: isLoadingPermissions } = useFolderPermissions();
+  const canUpdateFolder = useCheckFolderPermission(folder.id, "folders.write");
+
+  const { canManageFolderPermissions } = getPlanCapabilities(plan);
+
+  const {
+    users,
+    isLoading: isUsersLoading,
+    isValidating: isUsersValidating,
+  } = useFolderUsers({ folderId: folder.id, enabled: showPanel });
+
+  const updateWorkspaceAccessLevel = async (accessLevel: string) => {
+    setIsUpdating(true);
+    setWorkspaceAccessLevel(accessLevel);
+
+    const response = await fetch(
+      `/api/folders/${folder.id}?workspaceId=${workspaceId}`,
+      {
+        method: "PATCH",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          accessLevel: accessLevel === "" ? null : accessLevel,
+        }),
+      },
+    );
+
+    setIsUpdating(false);
+
+    if (!response.ok) {
+      const { error } = await response.json();
+      toast.error(error.message);
+      return;
+    }
+
+    toast.success("Workspace access updated!");
+    await mutate(
+      (key) => typeof key === "string" && key.startsWith(`/api/folders`),
+    );
+  };
+
+  const selectDropdown = (
+    <select
+      className={cn(
+        "appearance-none rounded-md border border-neutral-200 bg-white pl-3 pr-8 text-sm text-neutral-900 focus:border-neutral-300 focus:ring-neutral-300",
+        !canUpdateFolder && "cursor-not-allowed bg-neutral-100",
+      )}
+      value={workspaceAccessLevel || folder?.accessLevel || ""}
+      disabled={
+        isUpdating ||
+        isLoadingPermissions ||
+        !canUpdateFolder ||
+        !canManageFolderPermissions
+      }
+      onChange={(e) => updateWorkspaceAccessLevel(e.target.value)}
+    >
+      {Object.keys(FOLDER_WORKSPACE_ACCESS).map((access) => (
+        <option value={access} key={access}>
+          {FOLDER_WORKSPACE_ACCESS[access]}
+        </option>
+      ))}
+      <option value="" key="no-access">
+        No access
+      </option>
+    </select>
+  );
+
+  return (
+    <>
+      <div className="sticky top-0 z-10 border-b border-neutral-200 bg-white">
+        <div className="flex h-16 items-center justify-between px-6 py-4">
+          <Sheet.Title className="text-lg font-semibold">
+            Edit folder
+          </Sheet.Title>
+          <Sheet.Close asChild>
+            <Button
+              variant="outline"
+              icon={<X className="size-5" />}
+              className="h-auto w-fit p-1"
+            />
+          </Sheet.Close>
+        </div>
+      </div>
+      <div className="scrollbar-hide flex size-full grow flex-col overflow-y-auto bg-zinc-50">
+        <div className="bg-white px-8 py-6">
+          <EditFolderForm folder={folder} />
+        </div>
+        <div className="border-border-subtle border-t px-8 py-6">
+          {/* Workspace-level access */}
+          <div>
+            <span className="text-sm font-medium text-neutral-900">
+              Workspace
+            </span>
+            <div className="relative mt-3 flex items-center justify-between gap-4">
+              <div className="flex min-w-12 items-center gap-2">
+                <BlurImage
+                  src={logo || `${OG_AVATAR_URL}${name}`}
+                  alt={name || "Workspace logo"}
+                  className="size-8 shrink-0 overflow-hidden rounded-full"
+                  width={32}
+                  height={32}
+                />
+                <span className="truncate whitespace-nowrap text-sm text-neutral-800">
+                  {name}
+                </span>
+              </div>
+
+              {canManageFolderPermissions ? (
+                selectDropdown
+              ) : (
+                <Tooltip
+                  content={
+                    <TooltipContent
+                      title="You can only set custom folder permissions on a Business plan and above."
+                      cta="Upgrade to Business"
+                      href={`/${slug}/upgrade`}
+                      target="_blank"
+                    />
+                  }
+                  align="end"
+                >
+                  {selectDropdown}
+                </Tooltip>
+              )}
+            </div>
+          </div>
+
+          {/* Users */}
+          <div className="mt-4">
+            <span className="text-sm font-medium text-neutral-900">
+              Folder Users
+            </span>
+            {!canManageFolderPermissions ? (
+              <AnimatedEmptyState
+                title="Folder permissions"
+                description="Add and manage users permissions to this folder"
+                cardContent={
+                  <>
+                    <UserCheck className="size-4 text-neutral-700" />
+                    <div className="h-2.5 w-28 min-w-0 rounded-sm bg-neutral-200" />
+                  </>
+                }
+                className="border-none"
+                learnMoreHref={`/${slug}/upgrade`}
+                learnMoreText="Upgrade to Business"
+              />
+            ) : (
+              <div className="mt-4 grid grid-cols-[minmax(0,1fr)] gap-3">
+                {isUsersValidating || isUsersLoading || false
+                  ? [...Array(3)].map((_, i) => (
+                      <FolderUserPlaceholder key={i} />
+                    ))
+                  : folder &&
+                    users?.map((user) => (
+                      <FolderUserRow
+                        key={user.id}
+                        user={user}
+                        folder={folder}
+                      />
+                    ))}
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
+
+const EditFolderPanel = (props: EditFolderPanelProps) => {
+  return (
+    <Sheet open={props.showPanel} onOpenChange={props.setShowPanel}>
+      <EditFolderPanelContent {...props} />
+    </Sheet>
+  );
+};
+
+const FolderUserRow = ({
+  user,
+  folder,
+}: {
+  user: FolderUser;
+  folder: Pick<Folder, "id" | "name" | "accessLevel">;
+}) => {
+  const { data: session } = useSession();
+  const { id: workspaceId } = useWorkspace();
+  const [role, setRole] = useState<FolderUserRole>(user.role);
+
+  const canUpdateRole = useCheckFolderPermission(
+    folder.id,
+    "folders.users.write",
+  );
+
+  const { executeAsync, isPending } = useAction(updateUserRoleInFolder, {
+    onSuccess: () => {
+      toast.success("Role updated!");
+    },
+    onError: ({ error }) => {
+      toast.error(error.serverError);
+    },
+  });
+
+  const isCurrentUser = user.email === session?.user?.email;
+  const disableRoleUpdate = !canUpdateRole || isPending || isCurrentUser;
+
+  return (
+    <div key={user.id} className="flex items-center justify-between gap-3">
+      <div className="flex min-w-12 items-center gap-3">
+        <Avatar user={user} className="size-8" />
+        <div className="min-w-0">
+          <h3 className="truncate text-xs font-medium text-neutral-800">
+            {user.name || user.email}
+          </h3>
+          <p className="truncate text-xs font-normal text-neutral-400">
+            {user.email}
+          </p>
+        </div>
+      </div>
+
+      <div className="flex items-center gap-3">
+        <select
+          className={cn(
+            "cursor-pointer appearance-none rounded-md border border-neutral-200 bg-white pl-3 pr-8 text-sm text-neutral-900 focus:border-neutral-300 focus:ring-neutral-300",
+            disableRoleUpdate && "cursor-not-allowed bg-neutral-100",
+          )}
+          value={role === null ? "" : role}
+          disabled={disableRoleUpdate}
+          onChange={(e) => {
+            if (!folder || !workspaceId) {
+              return;
+            }
+
+            const role = (e.target.value as FolderUserRole) || null;
+
+            executeAsync({
+              workspaceId,
+              folderId: folder.id,
+              userId: user.id,
+              role,
+            });
+
+            setRole(role);
+          }}
+        >
+          {Object.keys(FOLDER_USER_ROLE).map((role) => (
+            <option value={role} key={role}>
+              {FOLDER_USER_ROLE[role]}
+            </option>
+          ))}
+
+          <option value="" key="no-access">
+            No access
+          </option>
+        </select>
+      </div>
+    </div>
+  );
+};
+
+const FolderUserPlaceholder = () => (
+  <div className="flex items-center justify-between gap-3">
+    <div className="flex items-center gap-3">
+      <div className="size-8 animate-pulse rounded-full bg-neutral-200" />
+      <div className="flex flex-col">
+        <div className="h-4 w-24 animate-pulse rounded bg-neutral-200" />
+        <div className="mt-1 h-3 w-32 animate-pulse rounded bg-neutral-200" />
+      </div>
+    </div>
+    <div className="my-px h-9 w-24 animate-pulse rounded bg-neutral-200" />
+  </div>
+);
+
+export function useEditFolderPanel(
+  folder: Pick<Folder, "id" | "name" | "description" | "accessLevel">,
+) {
+  const [showEditFolderPanel, setShowEditFolderPanel] = useState(false);
+
+  return {
+    setShowEditFolderPanel,
+    editFolderPanel: (
+      <EditFolderPanel
+        showPanel={showEditFolderPanel}
+        setShowPanel={setShowEditFolderPanel}
+        folder={folder}
+      />
+    ),
+  };
+}
diff --git a/apps/web/ui/folders/folder-actions.tsx b/apps/web/ui/folders/folder-actions.tsx
index 8d78bfd67cf..a6ca5988e2f 100644
--- a/apps/web/ui/folders/folder-actions.tsx
+++ b/apps/web/ui/folders/folder-actions.tsx
@@ -21,7 +21,7 @@ import { useDeleteFolderModal } from "../modals/delete-folder-modal";
 import { useRenameFolderModal } from "../modals/rename-folder-modal";
 import { useDefaultFolderModal } from "../modals/set-default-folder-modal";
 import { Delete, ThreeDots } from "../shared/icons";
-import { useFolderPermissionsPanel } from "./folder-permissions-panel";
+import { useEditFolderPanel } from "./edit-folder-panel";
 import { isDefaultFolder } from "./utils";
 
 export const FolderActions = ({
@@ -33,6 +33,7 @@ export const FolderActions = ({
   onDelete?: () => void;
   className?: string;
 }) => {
+  console.log(folder);
   const router = useRouter();
   const [openPopover, setOpenPopover] = useState(false);
   const { slug: workspaceSlug, defaultFolderId } = useWorkspace();
@@ -50,8 +51,10 @@ export const FolderActions = ({
       folder,
     });
 
-  const { folderPermissionsPanel, setShowFolderPermissionsPanel } =
-    useFolderPermissionsPanel(folder);
+  const {
+    editFolderPanel: folderPermissionsPanel,
+    setShowEditFolderPanel: setShowFolderPermissionsPanel,
+  } = useEditFolderPanel(folder);
 
   const copyFolderId = () => {
     toast.promise(copyToClipboard(folder.id), {
@@ -216,7 +219,7 @@ export const FolderActions = ({
             className,
           )}
           onClick={() => setOpenPopover(true)}
-          icon={<ThreeDots className="size-4 shrink-0 text-neutral-500" />}
+          icon={<ThreeDots className="size-4 shrink-0 text-neutral-600" />}
         />
       </Popover>
     </>
diff --git a/apps/web/ui/folders/folder-permissions-panel.tsx b/apps/web/ui/folders/folder-permissions-panel.tsx
deleted file mode 100644
index 0da41c968b4..00000000000
--- a/apps/web/ui/folders/folder-permissions-panel.tsx
+++ /dev/null
@@ -1,376 +0,0 @@
-import { updateUserRoleInFolder } from "@/lib/actions/folders/update-folder-user-role";
-import {
-  FOLDER_USER_ROLE,
-  FOLDER_WORKSPACE_ACCESS,
-} from "@/lib/folder/constants";
-import { getPlanCapabilities } from "@/lib/plan-capabilities";
-import { useFolderLinkCount } from "@/lib/swr/use-folder-link-count";
-import {
-  useCheckFolderPermission,
-  useFolderPermissions,
-} from "@/lib/swr/use-folder-permissions";
-import { useFolderUsers } from "@/lib/swr/use-folder-users";
-import useWorkspace from "@/lib/swr/use-workspace";
-import { Folder, FolderUser } from "@/lib/types";
-import { FolderUserRole } from "@dub/prisma/client";
-import { Avatar, BlurImage, Button, Tooltip, TooltipContent } from "@dub/ui";
-import { Globe, UserCheck } from "@dub/ui/icons";
-import { cn, nFormatter, OG_AVATAR_URL, pluralize } from "@dub/utils";
-import { useSession } from "next-auth/react";
-import { useAction } from "next-safe-action/hooks";
-import { useState } from "react";
-import { toast } from "sonner";
-import { mutate } from "swr";
-import { Drawer } from "vaul";
-import { AnimatedEmptyState } from "../shared/animated-empty-state";
-import { X } from "../shared/icons";
-import { FolderIcon } from "./folder-icon";
-import { RequestFolderEditAccessButton } from "./request-edit-button";
-
-// TODO
-// Use the new `<Sheet />` component
-
-interface FolderPermissionsPanelProps {
-  showPanel: boolean;
-  setShowPanel: (showPanel: boolean) => void;
-  folder: Pick<Folder, "id" | "name" | "accessLevel">;
-  onSuccess?: () => void;
-}
-
-const FolderPermissionsPanel = ({
-  showPanel,
-  setShowPanel,
-  folder,
-}: FolderPermissionsPanelProps) => {
-  const { id: workspaceId, slug, logo, name, plan } = useWorkspace();
-
-  const [isUpdating, setIsUpdating] = useState(false);
-  const [workspaceAccessLevel, setWorkspaceAccessLevel] = useState<string>();
-
-  const { isLoading: isLoadingPermissions } = useFolderPermissions();
-  const canUpdateFolder = useCheckFolderPermission(folder.id, "folders.write");
-  const canCreateLinks = useCheckFolderPermission(
-    folder.id,
-    "folders.links.write",
-  );
-
-  const { canManageFolderPermissions } = getPlanCapabilities(plan);
-
-  const {
-    users,
-    isLoading: isUsersLoading,
-    isValidating: isUsersValidating,
-  } = useFolderUsers({ folderId: folder.id, enabled: showPanel });
-
-  const { folderLinkCount } = useFolderLinkCount({ folderId: folder.id });
-
-  const updateWorkspaceAccessLevel = async (accessLevel: string) => {
-    setIsUpdating(true);
-    setWorkspaceAccessLevel(accessLevel);
-
-    const response = await fetch(
-      `/api/folders/${folder.id}?workspaceId=${workspaceId}`,
-      {
-        method: "PATCH",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({
-          accessLevel: accessLevel === "" ? null : accessLevel,
-        }),
-      },
-    );
-
-    setIsUpdating(false);
-
-    if (!response.ok) {
-      const { error } = await response.json();
-      toast.error(error.message);
-      return;
-    }
-
-    toast.success("Workspace access updated!");
-    await mutate(
-      (key) => typeof key === "string" && key.startsWith(`/api/folders`),
-    );
-  };
-
-  const selectDropdown = (
-    <select
-      className={cn(
-        "appearance-none rounded-md border border-neutral-200 bg-white pl-3 pr-8 text-sm text-neutral-900 focus:border-neutral-300 focus:ring-neutral-300",
-        !canUpdateFolder && "cursor-not-allowed bg-neutral-100",
-      )}
-      value={workspaceAccessLevel || folder?.accessLevel || ""}
-      disabled={
-        isUpdating ||
-        isLoadingPermissions ||
-        !canUpdateFolder ||
-        !canManageFolderPermissions
-      }
-      onChange={(e) => updateWorkspaceAccessLevel(e.target.value)}
-    >
-      {Object.keys(FOLDER_WORKSPACE_ACCESS).map((access) => (
-        <option value={access} key={access}>
-          {FOLDER_WORKSPACE_ACCESS[access]}
-        </option>
-      ))}
-      <option value="" key="no-access">
-        No access
-      </option>
-    </select>
-  );
-
-  return (
-    <Drawer.Root open={showPanel} onOpenChange={setShowPanel} direction="right">
-      <Drawer.Portal>
-        <Drawer.Overlay className="fixed inset-0 bg-black/20" />
-        <Drawer.Content
-          className="fixed bottom-2 right-2 top-2 z-10 flex w-[calc(100%-16px)] outline-none md:w-[540px]"
-          style={
-            // 8px between edge of screen and drawer
-            { "--initial-transform": "calc(100% + 8px)" } as React.CSSProperties
-          }
-        >
-          <div className="scrollbar-hide flex size-full grow flex-col overflow-y-auto rounded-lg bg-zinc-50">
-            <div className="flex items-center justify-between border-b border-neutral-200 px-8 py-5">
-              <Drawer.Title className="text-xl font-medium text-zinc-900">
-                Folder permissions
-              </Drawer.Title>
-              <Drawer.Description className="sr-only">
-                Configure permissions for the "{folder.name}" folder
-              </Drawer.Description>
-              <Drawer.Close asChild>
-                <Button
-                  variant="outline"
-                  icon={<X className="size-5" />}
-                  className="h-auto w-fit p-1"
-                />
-              </Drawer.Close>
-            </div>
-            <div className="px-8 py-6">
-              <div className="flex flex-col justify-between rounded-xl border border-neutral-200 bg-white px-5 py-4 sm:h-36">
-                <div className="flex items-start justify-between">
-                  <FolderIcon folder={folder} />
-                  {!isLoadingPermissions && !canCreateLinks && (
-                    <RequestFolderEditAccessButton
-                      folderId={folder.id}
-                      workspaceId={workspaceId!}
-                    />
-                  )}
-                </div>
-                <div>
-                  <span className="flex items-center justify-start gap-1.5 text-sm font-medium text-neutral-900">
-                    <span className="truncate">{folder.name}</span>
-                    {folder.id === "unsorted" && (
-                      <div className="rounded bg-neutral-100 p-1">
-                        <div className="text-xs font-normal text-black">
-                          Unsorted
-                        </div>
-                      </div>
-                    )}
-                  </span>
-
-                  <div className="mt-1.5 flex items-center gap-1 text-neutral-500">
-                    <Globe className="size-3.5" />
-                    <span className="text-sm font-normal">
-                      {nFormatter(folderLinkCount, { full: true })}{" "}
-                      {pluralize("link", folderLinkCount)}
-                    </span>
-                  </div>
-                </div>
-              </div>
-
-              {/* Workspace-level access */}
-              <div className="mt-6">
-                <span className="text-sm font-medium text-neutral-900">
-                  Workspace
-                </span>
-                <div className="relative mt-3 flex items-center justify-between gap-4">
-                  <div className="flex min-w-12 items-center gap-2">
-                    <BlurImage
-                      src={logo || `${OG_AVATAR_URL}${name}`}
-                      alt={name || "Workspace logo"}
-                      className="size-8 shrink-0 overflow-hidden rounded-full"
-                      width={32}
-                      height={32}
-                    />
-                    <span className="truncate whitespace-nowrap text-sm text-neutral-800">
-                      {name}
-                    </span>
-                  </div>
-
-                  {canManageFolderPermissions ? (
-                    selectDropdown
-                  ) : (
-                    <Tooltip
-                      content={
-                        <TooltipContent
-                          title="You can only set custom folder permissions on a Business plan and above."
-                          cta="Upgrade to Business"
-                          href={`/${slug}/upgrade`}
-                          target="_blank"
-                        />
-                      }
-                      align="end"
-                    >
-                      {selectDropdown}
-                    </Tooltip>
-                  )}
-                </div>
-              </div>
-
-              {/* Users */}
-              <div className="mt-4">
-                <span className="text-sm font-medium text-neutral-900">
-                  Folder Users
-                </span>
-                {!canManageFolderPermissions ? (
-                  <AnimatedEmptyState
-                    title="Folder permissions"
-                    description="Add and manage users permissions to this folder"
-                    cardContent={
-                      <>
-                        <UserCheck className="size-4 text-neutral-700" />
-                        <div className="h-2.5 w-28 min-w-0 rounded-sm bg-neutral-200" />
-                      </>
-                    }
-                    className="border-none"
-                    learnMoreHref={`/${slug}/upgrade`}
-                    learnMoreText="Upgrade to Business"
-                  />
-                ) : (
-                  <div className="mt-4 grid grid-cols-[minmax(0,1fr)] gap-3">
-                    {isUsersValidating || isUsersLoading || false
-                      ? [...Array(3)].map((_, i) => (
-                          <FolderUserPlaceholder key={i} />
-                        ))
-                      : folder &&
-                        users?.map((user) => (
-                          <FolderUserRow
-                            key={user.id}
-                            user={user}
-                            folder={folder}
-                          />
-                        ))}
-                  </div>
-                )}
-              </div>
-            </div>
-          </div>
-        </Drawer.Content>
-      </Drawer.Portal>
-    </Drawer.Root>
-  );
-};
-
-const FolderUserRow = ({
-  user,
-  folder,
-}: {
-  user: FolderUser;
-  folder: Pick<Folder, "id" | "name" | "accessLevel">;
-}) => {
-  const { data: session } = useSession();
-  const { id: workspaceId } = useWorkspace();
-  const [role, setRole] = useState<FolderUserRole>(user.role);
-
-  const canUpdateRole = useCheckFolderPermission(
-    folder.id,
-    "folders.users.write",
-  );
-
-  const { executeAsync, isPending } = useAction(updateUserRoleInFolder, {
-    onSuccess: () => {
-      toast.success("Role updated!");
-    },
-    onError: ({ error }) => {
-      toast.error(error.serverError);
-    },
-  });
-
-  const isCurrentUser = user.email === session?.user?.email;
-  const disableRoleUpdate = !canUpdateRole || isPending || isCurrentUser;
-
-  return (
-    <div key={user.id} className="flex items-center justify-between gap-3">
-      <div className="flex min-w-12 items-center gap-3">
-        <Avatar user={user} className="size-8" />
-        <div className="min-w-0">
-          <h3 className="truncate text-xs font-medium text-neutral-800">
-            {user.name || user.email}
-          </h3>
-          <p className="truncate text-xs font-normal text-neutral-400">
-            {user.email}
-          </p>
-        </div>
-      </div>
-
-      <div className="flex items-center gap-3">
-        <select
-          className={cn(
-            "cursor-pointer appearance-none rounded-md border border-neutral-200 bg-white pl-3 pr-8 text-sm text-neutral-900 focus:border-neutral-300 focus:ring-neutral-300",
-            disableRoleUpdate && "cursor-not-allowed bg-neutral-100",
-          )}
-          value={role === null ? "" : role}
-          disabled={disableRoleUpdate}
-          onChange={(e) => {
-            if (!folder || !workspaceId) {
-              return;
-            }
-
-            const role = (e.target.value as FolderUserRole) || null;
-
-            executeAsync({
-              workspaceId,
-              folderId: folder.id,
-              userId: user.id,
-              role,
-            });
-
-            setRole(role);
-          }}
-        >
-          {Object.keys(FOLDER_USER_ROLE).map((role) => (
-            <option value={role} key={role}>
-              {FOLDER_USER_ROLE[role]}
-            </option>
-          ))}
-
-          <option value="" key="no-access">
-            No access
-          </option>
-        </select>
-      </div>
-    </div>
-  );
-};
-
-const FolderUserPlaceholder = () => (
-  <div className="flex items-center justify-between gap-3">
-    <div className="flex items-center gap-3">
-      <div className="size-8 animate-pulse rounded-full bg-neutral-200" />
-      <div className="flex flex-col">
-        <div className="h-4 w-24 animate-pulse rounded bg-neutral-200" />
-        <div className="mt-1 h-3 w-32 animate-pulse rounded bg-neutral-200" />
-      </div>
-    </div>
-    <div className="my-px h-9 w-24 animate-pulse rounded bg-neutral-200" />
-  </div>
-);
-
-export function useFolderPermissionsPanel(
-  folder: Pick<Folder, "id" | "name" | "accessLevel">,
-) {
-  const [showFolderPermissionsPanel, setShowFolderPermissionsPanel] =
-    useState(false);
-
-  return {
-    setShowFolderPermissionsPanel,
-    folderPermissionsPanel: (
-      <FolderPermissionsPanel
-        showPanel={showFolderPermissionsPanel}
-        setShowPanel={setShowFolderPermissionsPanel}
-        folder={folder}
-      />
-    ),
-  };
-}
diff --git a/apps/web/ui/layout/page-content/page-content-with-side-panel.tsx b/apps/web/ui/layout/page-content/page-content-with-side-panel.tsx
index 02bfd6c05a6..22b8311e791 100644
--- a/apps/web/ui/layout/page-content/page-content-with-side-panel.tsx
+++ b/apps/web/ui/layout/page-content/page-content-with-side-panel.tsx
@@ -85,7 +85,8 @@ export function PageContentWithSidePanel({
             className={cn(
               "absolute right-0 top-0 h-full min-h-0 w-0 overflow-hidden bg-white shadow-lg transition-[width]",
               "@[960px]/page-content:shadow-none @[960px]/page-content:relative",
-              isSidePanelOpen && "w-full sm:w-[340px]",
+              isSidePanelOpen &&
+                "@[960px]/page-content:z-auto z-10 w-full sm:w-[340px]",
             )}
           >
             <div className="border-border-subtle flex size-full min-h-0 w-full flex-col border-l sm:w-[340px]">

From 9a3df656d11db9aebe0f711bf004c3745ce4b9a0 Mon Sep 17 00:00:00 2001
From: Tim Wilson <tim@twilson.net>
Date: Tue, 7 Oct 2025 13:42:23 -0400
Subject: [PATCH 3/8] Quick fixes

---
 apps/web/ui/folders/add-folder-form.tsx  | 1 +
 apps/web/ui/folders/edit-folder-form.tsx | 9 +++++++--
 packages/ui/src/sheet.tsx                | 4 ++--
 3 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/apps/web/ui/folders/add-folder-form.tsx b/apps/web/ui/folders/add-folder-form.tsx
index e106c3ad37e..7331cead71a 100644
--- a/apps/web/ui/folders/add-folder-form.tsx
+++ b/apps/web/ui/folders/add-folder-form.tsx
@@ -134,6 +134,7 @@ export const AddFolderForm = ({ onSuccess, onCancel }: AddFolderFormProps) => {
                     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"
                     aria-invalid="true"
                     value={description}
+                    maxLength={FOLDER_MAX_DESCRIPTION_LENGTH}
                     onChange={(e) => setDescription(e.target.value)}
                     onKeyDown={(e) => {
                       if (e.key === "Enter" && (e.ctrlKey || e.metaKey)) {
diff --git a/apps/web/ui/folders/edit-folder-form.tsx b/apps/web/ui/folders/edit-folder-form.tsx
index 76c1d80959b..4ce73c08f88 100644
--- a/apps/web/ui/folders/edit-folder-form.tsx
+++ b/apps/web/ui/folders/edit-folder-form.tsx
@@ -5,7 +5,7 @@ import {
   FOLDER_MAX_DESCRIPTION_LENGTH,
   updateFolderSchema,
 } from "@/lib/zod/schemas/folders";
-import { Button } from "@dub/ui";
+import { Button, useEnterSubmit } from "@dub/ui";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { z } from "zod";
@@ -33,6 +33,8 @@ export function EditFolderForm({
     },
   );
 
+  const { handleKeyDown } = useEnterSubmit();
+
   return (
     <form
       onSubmit={handleSubmit(async (data) => {
@@ -75,7 +77,10 @@ export function EditFolderForm({
         </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"
-          {...register("description")}
+          onKeyDown={handleKeyDown}
+          {...register("description", {
+            maxLength: FOLDER_MAX_DESCRIPTION_LENGTH,
+          })}
         />
         <MaxCharactersCounter
           control={control}
diff --git a/packages/ui/src/sheet.tsx b/packages/ui/src/sheet.tsx
index bacc9196143..4126acdb042 100644
--- a/packages/ui/src/sheet.tsx
+++ b/packages/ui/src/sheet.tsx
@@ -17,7 +17,7 @@ function SheetRoot({
     <RootComponent direction="right" handleOnly {...rest}>
       <Drawer.Portal>
         <Drawer.Overlay
-          className="fixed inset-0 bg-black/20"
+          className="fixed inset-0 z-40 bg-black/20"
           data-sheet-overlay
         />
         <Drawer.Content
@@ -33,7 +33,7 @@ function SheetRoot({
             contentProps?.onPointerDownOutside?.(e);
           }}
           className={cn(
-            "@container/sheet fixed bottom-2 right-2 top-2 z-10 flex w-[calc(100%-16px)] outline-none md:w-[540px]",
+            "@container/sheet fixed bottom-2 right-2 top-2 z-40 flex w-[calc(100%-16px)] outline-none md:w-[540px]",
             contentProps?.className,
           )}
           style={

From d2810f81ab4069ae40c058a6be7be9853bfed4a1 Mon Sep 17 00:00:00 2001
From: Tim Wilson <tim@twilson.net>
Date: Tue, 7 Oct 2025 13:49:02 -0400
Subject: [PATCH 4/8] Quick fixes

---
 apps/web/ui/folders/folder-actions.tsx    |  1 -
 apps/web/ui/folders/folder-info-panel.tsx | 12 +++++++-----
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/apps/web/ui/folders/folder-actions.tsx b/apps/web/ui/folders/folder-actions.tsx
index a6ca5988e2f..0b2eb8c4256 100644
--- a/apps/web/ui/folders/folder-actions.tsx
+++ b/apps/web/ui/folders/folder-actions.tsx
@@ -33,7 +33,6 @@ export const FolderActions = ({
   onDelete?: () => void;
   className?: string;
 }) => {
-  console.log(folder);
   const router = useRouter();
   const [openPopover, setOpenPopover] = useState(false);
   const { slug: workspaceSlug, defaultFolderId } = useWorkspace();
diff --git a/apps/web/ui/folders/folder-info-panel.tsx b/apps/web/ui/folders/folder-info-panel.tsx
index 8a7ea005784..2b828f5be96 100644
--- a/apps/web/ui/folders/folder-info-panel.tsx
+++ b/apps/web/ui/folders/folder-info-panel.tsx
@@ -67,12 +67,14 @@ export function FolderInfoPanel() {
         </div>
       </div>
 
-      <div className="flex flex-col gap-2">
-        <SectionHeader>Owner</SectionHeader>
-        <div className="flex flex-wrap items-center gap-3">
-          <UserList users={owners} />
+      {Boolean(isLoadingUsers || owners?.length) && (
+        <div className="flex flex-col gap-2">
+          <SectionHeader>Owner</SectionHeader>
+          <div className="flex flex-wrap items-center gap-3">
+            <UserList users={owners} />
+          </div>
         </div>
-      </div>
+      )}
 
       {Boolean(isLoadingUsers || editors?.length) && (
         <div className="flex flex-col gap-2">

From 3927e3a5b5bec42ce4677323f4ec9e09e80952ba Mon Sep 17 00:00:00 2001
From: Tim Wilson <tim@twilson.net>
Date: Tue, 7 Oct 2025 13:50:38 -0400
Subject: [PATCH 5/8] Update add-folder-form.tsx

---
 apps/web/ui/folders/add-folder-form.tsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/apps/web/ui/folders/add-folder-form.tsx b/apps/web/ui/folders/add-folder-form.tsx
index 7331cead71a..ac392a3e459 100644
--- a/apps/web/ui/folders/add-folder-form.tsx
+++ b/apps/web/ui/folders/add-folder-form.tsx
@@ -132,7 +132,6 @@ export const AddFolderForm = ({ onSuccess, onCancel }: AddFolderFormProps) => {
                   </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"
-                    aria-invalid="true"
                     value={description}
                     maxLength={FOLDER_MAX_DESCRIPTION_LENGTH}
                     onChange={(e) => setDescription(e.target.value)}
@@ -144,8 +143,7 @@ export const AddFolderForm = ({ onSuccess, onCancel }: AddFolderFormProps) => {
                     }}
                   />
                   <span className="text-content-subtle text-xs tabular-nums">
-                    {description?.toString().length || 0}/
-                    {FOLDER_MAX_DESCRIPTION_LENGTH}
+                    {description?.length || 0}/{FOLDER_MAX_DESCRIPTION_LENGTH}
                   </span>
                 </label>
               </div>

From 4ff2279ba8054c40dc0d49f497933fdbbdf896eb Mon Sep 17 00:00:00 2001
From: Tim Wilson <tim@twilson.net>
Date: Tue, 7 Oct 2025 15:21:22 -0400
Subject: [PATCH 6/8] Fix build

---
 apps/web/lib/folder/constants.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/apps/web/lib/folder/constants.ts b/apps/web/lib/folder/constants.ts
index 97cd7412993..fcc2fd9c4a8 100644
--- 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",
 };

From f54b0e9af55d615be395ef65fd50de8b866fb86e Mon Sep 17 00:00:00 2001
From: Steven Tey <stevensteel97@gmail.com>
Date: Tue, 7 Oct 2025 12:40:49 -0700
Subject: [PATCH 7/8] change description to @db.Text instead of varchar

---
 packages/prisma/schema/folder.prisma | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/prisma/schema/folder.prisma b/packages/prisma/schema/folder.prisma
index ce109c6098e..55d4ef8cdd5 100644
--- a/packages/prisma/schema/folder.prisma
+++ b/packages/prisma/schema/folder.prisma
@@ -17,7 +17,7 @@ enum FolderUserRole {
 model Folder {
   id          String             @id @default(cuid())
   name        String
-  description String?
+  description String?            @db.Text
   projectId   String
   type        FolderType         @default(default)
   accessLevel FolderAccessLevel? // Access level of the folder within the workspace

From 43d9a0e4935bcbeb502820c874e604cd0d15cfb0 Mon Sep 17 00:00:00 2001
From: Steven Tey <stevensteel97@gmail.com>
Date: Tue, 7 Oct 2025 12:54:54 -0700
Subject: [PATCH 8/8] update folder tests

---
 apps/web/tests/folders/index.test.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/apps/web/tests/folders/index.test.ts b/apps/web/tests/folders/index.test.ts
index 159758c971c..13581045a17 100644
--- 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),
 };