Set default folder

apps/web/app/api/links/count/route.ts

@@ -33,6 +33,7 @@ export const GET = withWorkspace(
         folderId,
         requiredPermission: "folders.read",
       });
+
       if (selectedFolder.type === "mega") {
         throw new DubApiError({
           code: "bad_request",
@@ -61,6 +62,7 @@ export const GET = withWorkspace(
         folderIds = undefined;
       }
     }
+
     const count = await getLinksCount({
       searchParams: params,
       workspaceId: workspace.id,

apps/web/app/api/workspaces/route.ts

@@ -32,6 +32,7 @@ export const GET = withSession(async ({ session }) => {
         },
         select: {
           role: true,
+          defaultFolderId: true,
         },
       },
       domains: {

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

@@ -1,5 +1,6 @@
 "use client";
 
+import { unsortedLinks } from "@/lib/folder/constants";
 import useFolders from "@/lib/swr/use-folders";
 import useFoldersCount from "@/lib/swr/use-folders-count";
 import useWorkspace from "@/lib/swr/use-workspace";
@@ -13,13 +14,10 @@ import { PaginationControls, usePagination, useRouterStuff } from "@dub/ui";
 import { useRouter, useSearchParams } from "next/navigation";
 
 const allLinkFolder: Folder = {
-  id: "unsorted",
-  name: "Links",
   type: "default",
-  accessLevel: null,
-  linkCount: 0,
   createdAt: new Date(),
   updatedAt: new Date(),
+  ...unsortedLinks,
 };
 
 export const FoldersPageClient = () => {

apps/web/lib/actions/folders/set-default-folder.ts

@@ -0,0 +1,40 @@
+"use server";
+
+import { verifyFolderAccess } from "@/lib/folder/permissions";
+import { prisma } from "@dub/prisma";
+import { z } from "zod";
+import { authActionClient } from "../safe-action";
+
+const setDefaultFolderSchema = z.object({
+  workspaceId: z.string(),
+  folderId: z.string().nullable(),
+});
+
+// Set the default folder for a workspace for a user
+export const setDefaultFolderAction = authActionClient
+  .schema(setDefaultFolderSchema)
+  .action(async ({ ctx, parsedInput }) => {
+    const { user, workspace } = ctx;
+    const { folderId } = parsedInput;
+
+    if (folderId) {
+      await verifyFolderAccess({
+        workspace,
+        userId: user.id,
+        folderId,
+        requiredPermission: "folders.read",
+      });
+    }
+
+    await prisma.projectUsers.update({
+      where: {
+        userId_projectId: {
+          userId: user.id,
+          projectId: workspace.id,
+        },
+      },
+      data: {
+        defaultFolderId: folderId,
+      },
+    });
+  });

apps/web/lib/auth/workspace.ts

@@ -261,6 +261,7 @@ export const withWorkspace = (
               },
               select: {
                 role: true,
+                defaultFolderId: true,
               },
             },
           },

apps/web/lib/folder/constants.ts

@@ -44,6 +44,6 @@ export const FOLDER_USER_ROLE_TO_PERMISSIONS: Record<
 export const unsortedLinks: FolderSummary = {
   id: "unsorted",
   name: "Links",
-  accessLevel: null,
+  accessLevel: "write",
   linkCount: -1,
 };

apps/web/lib/swr/use-folder-permissions.ts

@@ -37,7 +37,7 @@ export function useCheckFolderPermission(
     return true;
   }
 
-  if (!folderId) {
+  if (!folderId || folderId === "unsorted") {
     return true;
   }
 

apps/web/lib/swr/use-folder.ts

@@ -6,14 +6,19 @@ import useWorkspace from "./use-workspace";
 export default function useFolder({ folderId }: { folderId?: string | null }) {
   const { id: workspaceId, plan, flags } = useWorkspace();
 
+  const enabled =
+    folderId &&
+    folderId !== "unsorted" &&
+    workspaceId &&
+    flags?.linkFolders &&
+    plan !== "free";
+
   const {
     data: folder,
     isValidating,
     isLoading,
   } = useSWR<Folder>(
-    folderId && workspaceId && flags?.linkFolders && plan !== "free"
-      ? `/api/folders/${folderId}?workspaceId=${workspaceId}`
-      : null,
+    enabled ? `/api/folders/${folderId}?workspaceId=${workspaceId}` : null,
     fetcher,
     {
       dedupingInterval: 60000,

apps/web/lib/swr/use-workspace.ts

@@ -38,6 +38,7 @@ export default function useWorkspace({
     exceededDomains:
       workspace?.domains && workspace.domains.length >= workspace.domainsLimit,
     error,
+    defaultFolderId: workspace?.users && workspace.users[0].defaultFolderId,
     mutate,
     loading: slug && !workspace && !error ? true : false,
   };

apps/web/lib/types.ts

@@ -145,6 +145,7 @@ export interface WorkspaceProps extends Project {
   }[];
   users: {
     role: RoleProps;
+    defaultFolderId: string | null;
   }[];
   flags?: {
     [key in BetaFeatures]: boolean;

apps/web/lib/zod/schemas/workspaces.ts

@@ -88,6 +88,12 @@ export const WorkspaceSchema = z
       .array(
         z.object({
           role: roleSchema,
+          defaultFolderId: z
+            .string()
+            .nullable()
+            .describe(
+              "The ID of the default folder for the user in the workspace.",
+            ),
         }),
       )
       .describe("The role of the authenticated user in the workspace."),

apps/web/ui/folders/folder-actions.tsx

@@ -12,13 +12,16 @@ import {
   Users,
 } from "@dub/ui";
 import { cn } from "@dub/utils";
+import { Bookmark } from "lucide-react";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 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 { useFolderPermissionsPanel } from "./folder-permissions-panel";
+import { isDefaultFolder } from "./utils";
 
 export const FolderActions = ({
   folder,
@@ -28,9 +31,8 @@ export const FolderActions = ({
   onDelete?: () => void;
 }) => {
   const router = useRouter();
-  const { slug: workspaceSlug } = useWorkspace();
   const [openPopover, setOpenPopover] = useState(false);
-  const canUpdateFolder = useCheckFolderPermission(folder.id, "folders.write");
+  const { slug: workspaceSlug, defaultFolderId } = useWorkspace();
 
   const { RenameFolderModal, setShowRenameFolderModal } =
     useRenameFolderModal(folder);
@@ -40,30 +42,50 @@ export const FolderActions = ({
     onDelete,
   );
 
+  const { DefaultFolderModal, setShowDefaultFolderModal } =
+    useDefaultFolderModal({
+      folder,
+    });
+
   const { folderPermissionsPanel, setShowFolderPermissionsPanel } =
     useFolderPermissionsPanel(folder);
 
-  const [copiedFolderId, copyToClipboard] = useCopyToClipboard();
-
   const copyFolderId = () => {
     toast.promise(copyToClipboard(folder.id), {
       success: "Folder ID copied!",
     });
   };
 
+  const [copiedFolderId, copyToClipboard] = useCopyToClipboard();
+  const canUpdateFolder = useCheckFolderPermission(folder.id, "folders.write");
+
+  const isDefault = isDefaultFolder({ folder, defaultFolderId });
+  const unsortedLinks = folder.id === "unsorted";
+
   useKeyboardShortcut(
-    ["r", "m", "i", "x", "a"],
+    ["r", "m", "i", "x", "a", "d"],
     (e) => {
       setOpenPopover(false);
       switch (e.key) {
         case "a":
-          router.push(`/${workspaceSlug}/analytics?folderId=${folder.id}`);
+          if (!unsortedLinks) {
+            router.push(`/${workspaceSlug}/analytics?folderId=${folder.id}`);
+          }
           break;
         case "m":
-          setShowFolderPermissionsPanel(true);
+          if (!unsortedLinks) {
+            setShowFolderPermissionsPanel(true);
+          }
           break;
         case "i":
-          copyFolderId();
+          if (!unsortedLinks) {
+            copyFolderId();
+          }
+          break;
+        case "d":
+          if (!isDefault) {
+            setShowDefaultFolderModal(true);
+          }
           break;
         case "r":
           if (canUpdateFolder) {
@@ -86,6 +108,7 @@ export const FolderActions = ({
     <>
       <RenameFolderModal />
       <DeleteFolderModal />
+      <DefaultFolderModal />
       {folderPermissionsPanel}
       <Popover
         content={
@@ -104,35 +127,57 @@ export const FolderActions = ({
                 shortcut="A"
                 className="h-9 px-2 font-medium"
               />
+
+              {!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>
+
+            <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="Members"
+                text="Set as Default"
                 variant="outline"
                 onClick={() => {
                   setOpenPopover(false);
-                  setShowFolderPermissionsPanel(true);
+                  setShowDefaultFolderModal(true);
                 }}
-                icon={<Users className="h-4 w-4" />}
-                shortcut="M"
+                icon={<Bookmark className="h-4 w-4" />}
+                shortcut="D"
                 className="h-9 px-2 font-medium"
-              />
-            </div>
-            <div className="grid gap-px p-2">
-              <Button
-                text="Copy Folder ID"
-                variant="outline"
-                onClick={() => copyFolderId()}
-                icon={
-                  copiedFolderId ? (
-                    <CircleCheck className="h-4 w-4" />
-                  ) : (
-                    <Copy className="h-4 w-4" />
-                  )
+                disabled={isDefault}
+                disabledTooltip={
+                  isDefault ? "This is your default folder." : undefined
                 }
-                shortcut="I"
-                className="h-9 px-2 font-medium"
               />
 
-              {canUpdateFolder && (
+              {!unsortedLinks && (
                 <>
                   <Button
                     text="Rename"
@@ -144,7 +189,14 @@ export const FolderActions = ({
                     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"
@@ -155,6 +207,12 @@ export const FolderActions = ({
                     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
+                    }
                   />
                 </>
               )}