feat: add folders (#1711)

apps/remix/app/components/tables/templates-table-action-dropdown.tsx

@@ -2,7 +2,16 @@ import { useState } from 'react';
 
 import { Trans } from '@lingui/react/macro';
 import type { Recipient, Template, TemplateDirectLink } from '@prisma/client';
-import { Copy, Edit, MoreHorizontal, MoveRight, Share2Icon, Trash2, Upload } from 'lucide-react';
+import {
+  Copy,
+  Edit,
+  FolderIcon,
+  MoreHorizontal,
+  MoveRight,
+  Share2Icon,
+  Trash2,
+  Upload,
+} from 'lucide-react';
 import { Link } from 'react-router';
 
 import { useSession } from '@documenso/lib/client-only/providers/session';
@@ -19,6 +28,7 @@ import { TemplateDeleteDialog } from '../dialogs/template-delete-dialog';
 import { TemplateDirectLinkDialog } from '../dialogs/template-direct-link-dialog';
 import { TemplateDuplicateDialog } from '../dialogs/template-duplicate-dialog';
 import { TemplateMoveDialog } from '../dialogs/template-move-dialog';
+import { TemplateMoveToFolderDialog } from '../dialogs/template-move-to-folder-dialog';
 
 export type TemplatesTableActionDropdownProps = {
   row: Template & {
@@ -50,13 +60,20 @@ export const TemplatesTableActionDropdown = ({
   const [isTemplateDirectLinkDialogOpen, setTemplateDirectLinkDialogOpen] = useState(false);
   const [isDuplicateDialogOpen, setDuplicateDialogOpen] = useState(false);
   const [isMoveDialogOpen, setMoveDialogOpen] = useState(false);
+  const [isMoveToFolderDialogOpen, setMoveToFolderDialogOpen] = useState(false);
 
   const isOwner = row.userId === user.id;
   const isTeamTemplate = row.teamId === teamId;
 
+  const formatPath = row.folderId
+    ? `${templateRootPath}/f/${row.folderId}/${row.id}/edit`
+    : `${templateRootPath}/${row.id}/edit`;
+
+  
+
   return (
     <DropdownMenu>
-      <DropdownMenuTrigger>
+      <DropdownMenuTrigger data-testid="template-table-action-btn">
         <MoreHorizontal className="text-muted-foreground h-5 w-5" />
       </DropdownMenuTrigger>
 
@@ -64,7 +81,7 @@ export const TemplatesTableActionDropdown = ({
         <DropdownMenuLabel>Action</DropdownMenuLabel>
 
         <DropdownMenuItem disabled={!isOwner && !isTeamTemplate} asChild>
-          <Link to={`${templateRootPath}/${row.id}/edit`}>
+          <Link to={formatPath}>
             <Edit className="mr-2 h-4 w-4" />
             <Trans>Edit</Trans>
           </Link>
@@ -83,6 +100,11 @@ export const TemplatesTableActionDropdown = ({
           <Trans>Direct link</Trans>
         </DropdownMenuItem>
 
+        <DropdownMenuItem onClick={() => setMoveToFolderDialogOpen(true)}>
+          <FolderIcon className="mr-2 h-4 w-4" />
+          <Trans>Move to Folder</Trans>
+        </DropdownMenuItem>
+
         {!teamId && !row.teamId && (
           <DropdownMenuItem onClick={() => setMoveDialogOpen(true)}>
             <MoveRight className="mr-2 h-4 w-4" />
@@ -135,6 +157,14 @@ export const TemplatesTableActionDropdown = ({
         onOpenChange={setDeleteDialogOpen}
         onDelete={onDelete}
       />
+
+      <TemplateMoveToFolderDialog
+        templateId={row.id}
+        templateTitle={row.title}
+        isOpen={isMoveToFolderDialogOpen}
+        onOpenChange={setMoveToFolderDialogOpen}
+        currentFolderId={row.folderId}
+      />
     </DropdownMenu>
   );
 };