fix: rebase

.env.example

@@ -127,6 +127,4 @@ E2E_TEST_AUTHENTICATE_USER_EMAIL="testuser@mail.com"
 E2E_TEST_AUTHENTICATE_USER_PASSWORD="test_Password123"
 
 # [[LOGGER]]
-# OPTIONAL: The file to save the logger output to. Will disable stdout if provided.
-NEXT_PRIVATE_LOGGER_FILE_PATH=
-
+NEXT_PRIVATE_LOGGER_HONEY_BADGER_API_KEY=

.github/PULL_REQUEST_TEMPLATE.md

@@ -1,3 +1,8 @@
+---
+name: Pull Request
+about: Submit changes to the project for review and inclusion
+---
+
 ## Description
 
 <!--- Describe the changes introduced by this pull request. -->

.gitignore

@@ -50,10 +50,3 @@ yarn-error.log*
 !.vscode/tasks.json
 !.vscode/launch.json
 !.vscode/extensions.json
-
-# logs
-logs.json
-
-# claude
-.claude
-CLAUDE.md

README.md

@@ -49,6 +49,8 @@ Join us in creating the next generation of open trust infrastructure.
 
 ## Community and Next Steps 🎯
 
+We're currently working on a redesign of the application, including a revamp of the codebase, so Documenso can be more intuitive to use and robust to develop upon.
+
 - Check out the first source code release in this repository and test it.
 - Tell us what you think in the [Discussions](https://github.com/documenso/documenso/discussions).
 - Join the [Discord server](https://documen.so/discord) for any questions and getting to know to other community members.

apps/documentation/pages/developers/public-api/_meta.json

@@ -1,6 +1,5 @@
 {
   "index": "Get Started",
   "authentication": "Authentication",
-  "rate-limits": "Rate Limits",
   "versioning": "Versioning"
 }

apps/documentation/pages/developers/public-api/index.mdx

@@ -33,7 +33,7 @@ Our new API V2 supports the following typed SDKs:
 
 <Callout type="info">
   For the staging API, please use the following base URL:
-  `https://stg-app.documenso.com/api/v2-beta/`
+  `https://stg-app.documenso.dev/api/v2-beta/`
 </Callout>
 
 🚀 [V2 Announcement](https://documen.so/sdk-blog)

apps/documentation/pages/developers/public-api/rate-limits.mdx

@@ -1,54 +0,0 @@
-import { Callout } from 'nextra/components';
-
-# Rate Limits
-
-Documenso enforces rate limits on all API endpoints to ensure service stability.
-
-## HTTP Rate Limits
-
-**Limit:** 100 requests per minute per IP address  
-**Response:** 429 Too Many Requests
-
-### Rate Limit Response
-
-```json
-{
-  "error": "Too many requests, please try again later."
-}
-```
-
-<Callout type="warning">
-  No rate limit headers are currently provided. When you receive a 429 response, wait at least 60
-  seconds before retrying.
-</Callout>
-
-## Resource Limits
-
-Beyond HTTP rate limits, your account has usage limits based on your subscription plan.
-
-### Plan Limits
-
-| Resource         | Free | Paid      | Self-hosted | Enterprise |
-| ---------------- | ---- | --------- | ----------- | ---------- |
-| Documents/month  | 5    | Unlimited | Unlimited   | Unlimited  |
-| Total Recipients | 10   | Unlimited | Unlimited   | Unlimited  |
-| Direct Templates | 3    | Unlimited | Unlimited   | Unlimited  |
-
-### Error Response
-
-When you exceed a resource limit:
-
-```json
-{
-  "error": "You have reached your document limit for this month. Please upgrade your plan.",
-  "code": "LIMIT_EXCEEDED",
-  "statusCode": 400
-}
-```
-
-## Error Codes
-
-| Code                | Status | Description                   |
-| ------------------- | ------ | ----------------------------- |
-| `TOO_MANY_REQUESTS` | 429    | HTTP rate limit exceeded      |
-| `LIMIT_EXCEEDED`    | 400    | Resource usage limit exceeded |

apps/documentation/pages/developers/webhooks.mdx

@@ -619,18 +619,6 @@ Example payload for the `document.rejected` event:
 }
 ```
 
-## Webhook Events Testing
-
-You can trigger test webhook events to test the webhook functionality. To trigger a test webhook, navigate to the [Webhooks page](/developers/webhooks) and click on the "Test Webhook" button.
-
-![Documenso's Webhooks Page](/webhook-images/test-webhooks-page.webp)
-
-This opens a dialog where you can select the event type to test.
-
-![Documenso's individual webhook page](/webhook-images/test-webhook-dialog.webp)
-
-Choose the appropriate event and click "Send Test Webhook." You’ll shortly receive a test payload from Documenso with sample data.
-
 ## Availability
 
 Webhooks are available to individual users and teams.

apps/remix/app/app.css

@@ -1,30 +1,19 @@
 @import '@documenso/ui/styles/theme.css';
 
-/* Inter Variable Fonts */
 @font-face {
   font-family: 'Inter';
-  src: url('/fonts/inter-variablefont_opsz,wght.ttf') format('truetype-variations');
-  font-weight: 100 900;
+  src: url('/public/fonts/inter-regular.ttf') format('ttf');
+  /* font-weight: 400;
   font-style: normal;
-  font-display: swap;
+  font-display: swap; */
 }
 
-/* Inter Italic Variable Fonts */
-@font-face {
-  font-family: 'Inter';
-  src: url('/fonts/inter-italic-variablefont_opsz,wght.ttf') format('truetype-variations');
-  font-weight: 100 900;
-  font-style: italic;
-  font-display: swap;
-}
-
-/* Caveat Variable Font */
 @font-face {
   font-family: 'Caveat';
-  src: url('/fonts/caveat-variablefont_wght.ttf') format('truetype-variations');
-  font-weight: 400 600;
+  src: url('/public/fonts/caveat.ttf') format('ttf');
+  /* font-weight: 400;
   font-style: normal;
-  font-display: swap;
+  font-display: swap; */
 }
 
 @layer base {

apps/remix/app/components/dialogs/document-move-to-folder-dialog.tsx

@@ -1,11 +1,11 @@
-import { useEffect, useState } from 'react';
+import { useEffect } from 'react';
 
 import { zodResolver } from '@hookform/resolvers/zod';
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
 import type * as DialogPrimitive from '@radix-ui/react-dialog';
-import { FolderIcon, HomeIcon, Loader2, Search } from 'lucide-react';
+import { FolderIcon, HomeIcon, Loader2 } from 'lucide-react';
 import { useForm } from 'react-hook-form';
 import { useNavigate } from 'react-router';
 import { z } from 'zod';
@@ -31,7 +31,6 @@ import {
   FormLabel,
   FormMessage,
 } from '@documenso/ui/primitives/form/form';
-import { Input } from '@documenso/ui/primitives/input';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
 import { useCurrentTeam } from '~/providers/team';
@@ -62,8 +61,6 @@ export const DocumentMoveToFolderDialog = ({
   const navigate = useNavigate();
   const team = useCurrentTeam();
 
-  const [searchTerm, setSearchTerm] = useState('');
-
   const form = useForm<TMoveDocumentFormSchema>({
     resolver: zodResolver(ZMoveDocumentFormSchema),
     defaultValues: {
@@ -86,7 +83,6 @@ export const DocumentMoveToFolderDialog = ({
   useEffect(() => {
     if (!open) {
       form.reset();
-      setSearchTerm('');
     } else {
       form.reset({ folderId: currentFolderId });
     }
@@ -127,16 +123,6 @@ export const DocumentMoveToFolderDialog = ({
         return;
       }
 
-      if (error.code === AppErrorCode.UNAUTHORIZED) {
-        toast({
-          title: _(msg`Error`),
-          description: _(msg`You are not allowed to move this document.`),
-          variant: 'destructive',
-        });
-
-        return;
-      }
-
       toast({
         title: _(msg`Error`),
         description: _(msg`An error occurred while moving the document.`),
@@ -145,10 +131,6 @@ export const DocumentMoveToFolderDialog = ({
     }
   };
 
-  const filteredFolders = folders?.data.filter((folder) =>
-    folder.name.toLowerCase().includes(searchTerm.toLowerCase()),
-  );
-
   return (
     <Dialog {...props} open={open} onOpenChange={onOpenChange}>
       <DialogContent>
@@ -162,18 +144,8 @@ export const DocumentMoveToFolderDialog = ({
           </DialogDescription>
         </DialogHeader>
 
-        <div className="relative">
-          <Search className="text-muted-foreground absolute left-2 top-3 h-4 w-4" />
-          <Input
-            placeholder={_(msg`Search folders...`)}
-            value={searchTerm}
-            onChange={(e) => setSearchTerm(e.target.value)}
-            className="pl-8"
-          />
-        </div>
-
         <Form {...form}>
-          <form onSubmit={form.handleSubmit(onSubmit)} className="flex flex-col gap-y-4">
+          <form onSubmit={form.handleSubmit(onSubmit)} className="mt-4 flex flex-col gap-y-4">
             <FormField
               control={form.control}
               name="folderId"
@@ -182,9 +154,8 @@ export const DocumentMoveToFolderDialog = ({
                   <FormLabel>
                     <Trans>Folder</Trans>
                   </FormLabel>
-
                   <FormControl>
-                    <div className="max-h-96 space-y-2 overflow-y-auto">
+                    <div className="space-y-2">
                       {isFoldersLoading ? (
                         <div className="flex h-10 items-center justify-center">
                           <Loader2 className="h-4 w-4 animate-spin" />
@@ -199,10 +170,10 @@ export const DocumentMoveToFolderDialog = ({
                             disabled={currentFolderId === null}
                           >
                             <HomeIcon className="mr-2 h-4 w-4" />
-                            <Trans>Home (No Folder)</Trans>
+                            <Trans>Root (No Folder)</Trans>
                           </Button>
 
-                          {filteredFolders?.map((folder) => (
+                          {folders?.data.map((folder) => (
                             <Button
                               key={folder.id}
                               type="button"
@@ -215,12 +186,6 @@ export const DocumentMoveToFolderDialog = ({
                               {folder.name}
                             </Button>
                           ))}
-
-                          {searchTerm && filteredFolders?.length === 0 && (
-                            <div className="text-muted-foreground px-2 py-2 text-center text-sm">
-                              <Trans>No folders found</Trans>
-                            </div>
-                          )}
                         </>
                       )}
                     </div>

apps/remix/app/components/dialogs/folder-create-dialog.tsx

@@ -1,14 +1,17 @@
 import { useEffect, useState } from 'react';
 
 import { zodResolver } from '@hookform/resolvers/zod';
-import { Trans, useLingui } from '@lingui/react/macro';
-import type { FolderType } from '@prisma/client';
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
 import type * as DialogPrimitive from '@radix-ui/react-dialog';
 import { FolderPlusIcon } from 'lucide-react';
 import { useForm } from 'react-hook-form';
-import { useParams } from 'react-router';
+import { useNavigate, useParams } from 'react-router';
 import { z } from 'zod';
 
+import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
+import { FolderType } from '@documenso/lib/types/folder-type';
+import { formatDocumentsPath } from '@documenso/lib/utils/teams';
 import { trpc } from '@documenso/trpc/react';
 import { Button } from '@documenso/ui/primitives/button';
 import {
@@ -31,22 +34,26 @@ import {
 import { Input } from '@documenso/ui/primitives/input';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
+import { useCurrentTeam } from '~/providers/team';
+
 const ZCreateFolderFormSchema = z.object({
   name: z.string().min(1, { message: 'Folder name is required' }),
 });
 
 type TCreateFolderFormSchema = z.infer<typeof ZCreateFolderFormSchema>;
 
-export type FolderCreateDialogProps = {
-  type: FolderType;
+export type CreateFolderDialogProps = {
   trigger?: React.ReactNode;
 } & Omit<DialogPrimitive.DialogProps, 'children'>;
 
-export const FolderCreateDialog = ({ type, trigger, ...props }: FolderCreateDialogProps) => {
-  const { t } = useLingui();
+export const CreateFolderDialog = ({ trigger, ...props }: CreateFolderDialogProps) => {
+  const { _ } = useLingui();
   const { toast } = useToast();
   const { folderId } = useParams();
 
+  const navigate = useNavigate();
+  const team = useCurrentTeam();
+
   const [isCreateFolderOpen, setIsCreateFolderOpen] = useState(false);
 
   const { mutateAsync: createFolder } = trpc.folder.createFolder.useMutation();
@@ -60,21 +67,37 @@ export const FolderCreateDialog = ({ type, trigger, ...props }: FolderCreateDial
 
   const onSubmit = async (data: TCreateFolderFormSchema) => {
     try {
-      await createFolder({
+      const newFolder = await createFolder({
         name: data.name,
         parentId: folderId,
-        type,
+        type: FolderType.DOCUMENT,
       });
 
       setIsCreateFolderOpen(false);
 
+      const documentsPath = formatDocumentsPath(team.url);
+
+      await navigate(`${documentsPath}/f/${newFolder.id}`);
+
       toast({
-        description: t`Folder created successfully`,
+        description: 'Folder created successfully',
       });
     } catch (err) {
+      const error = AppError.parseError(err);
+
+      if (error.code === AppErrorCode.ALREADY_EXISTS) {
+        toast({
+          title: 'Failed to create folder',
+          description: _(msg`This folder name is already taken.`),
+          variant: 'destructive',
+        });
+
+        return;
+      }
+
       toast({
-        title: t`Failed to create folder`,
-        description: t`An unknown error occurred while creating the folder.`,
+        title: 'Failed to create folder',
+        description: _(msg`An unknown error occurred while creating the folder.`),
         variant: 'destructive',
       });
     }
@@ -90,60 +113,48 @@ export const FolderCreateDialog = ({ type, trigger, ...props }: FolderCreateDial
     <Dialog {...props} open={isCreateFolderOpen} onOpenChange={setIsCreateFolderOpen}>
       <DialogTrigger asChild>
         {trigger ?? (
-          <Button
-            variant="outline"
-            className="flex items-center"
-            data-testid="folder-create-button"
-          >
-            <FolderPlusIcon className="mr-2 h-4 w-4" />
-            <Trans>Create Folder</Trans>
+          <Button variant="outline" className="flex items-center space-x-2">
+            <FolderPlusIcon className="h-4 w-4" />
+            <span>Create Folder</span>
           </Button>
         )}
       </DialogTrigger>
 
       <DialogContent>
         <DialogHeader>
-          <DialogTitle>
-            <Trans>Create New Folder</Trans>
-          </DialogTitle>
+          <DialogTitle>Create New Folder</DialogTitle>
           <DialogDescription>
-            <Trans>Enter a name for your new folder. Folders help you organise your items.</Trans>
+            Enter a name for your new folder. Folders help you organise your documents.
           </DialogDescription>
         </DialogHeader>
 
         <Form {...form}>
-          <form onSubmit={form.handleSubmit(onSubmit)}>
-            <fieldset disabled={form.formState.isSubmitting} className="space-y-4">
-              <FormField
-                control={form.control}
-                name="name"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>
-                      <Trans>Folder Name</Trans>
-                    </FormLabel>
-                    <FormControl>
-                      <Input placeholder={t`My Folder`} {...field} />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
+          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+            <FormField
+              control={form.control}
+              name="name"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Folder Name</FormLabel>
+                  <FormControl>
+                    <Input placeholder="My Folder" {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
 
-              <DialogFooter>
-                <Button
-                  type="button"
-                  variant="secondary"
-                  onClick={() => setIsCreateFolderOpen(false)}
-                >
-                  <Trans>Cancel</Trans>
-                </Button>
+            <DialogFooter>
+              <Button
+                type="button"
+                variant="secondary"
+                onClick={() => setIsCreateFolderOpen(false)}
+              >
+                Cancel
+              </Button>
 
-                <Button type="submit" loading={form.formState.isSubmitting}>
-                  <Trans>Create</Trans>
-                </Button>
-              </DialogFooter>
-            </fieldset>
+              <Button type="submit">Create</Button>
+            </DialogFooter>
           </form>
         </Form>
       </DialogContent>

apps/remix/app/components/dialogs/folder-delete-dialog.tsx

@@ -1,7 +1,8 @@
 import { useEffect } from 'react';
 
 import { zodResolver } from '@hookform/resolvers/zod';
-import { useLingui } from '@lingui/react/macro';
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
 import type * as DialogPrimitive from '@radix-ui/react-dialog';
 import { useForm } from 'react-hook-form';
@@ -10,7 +11,6 @@ import { z } from 'zod';
 import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
 import { trpc } from '@documenso/trpc/react';
 import type { TFolderWithSubfolders } from '@documenso/trpc/server/folder-router/schema';
-import { Alert, AlertDescription } from '@documenso/ui/primitives/alert';
 import { Button } from '@documenso/ui/primitives/button';
 import {
   Dialog,
@@ -32,22 +32,22 @@ import { Input } from '@documenso/ui/primitives/input';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
 export type FolderDeleteDialogProps = {
-  folder: TFolderWithSubfolders;
+  folder: TFolderWithSubfolders | null;
   isOpen: boolean;
   onOpenChange: (open: boolean) => void;
 } & Omit<DialogPrimitive.DialogProps, 'children'>;
 
 export const FolderDeleteDialog = ({ folder, isOpen, onOpenChange }: FolderDeleteDialogProps) => {
-  const { t } = useLingui();
+  const { _ } = useLingui();
 
   const { toast } = useToast();
   const { mutateAsync: deleteFolder } = trpc.folder.deleteFolder.useMutation();
 
-  const deleteMessage = t`delete ${folder.name}`;
+  const deleteMessage = _(msg`delete ${folder?.name ?? 'folder'}`);
 
   const ZDeleteFolderFormSchema = z.object({
     confirmText: z.literal(deleteMessage, {
-      errorMap: () => ({ message: t`You must type '${deleteMessage}' to confirm` }),
+      errorMap: () => ({ message: _(msg`You must type '${deleteMessage}' to confirm`) }),
     }),
   });
 
@@ -61,6 +61,8 @@ export const FolderDeleteDialog = ({ folder, isOpen, onOpenChange }: FolderDelet
   });
 
   const onFormSubmit = async () => {
+    if (!folder) return;
+
     try {
       await deleteFolder({
         id: folder.id,
@@ -69,15 +71,15 @@ export const FolderDeleteDialog = ({ folder, isOpen, onOpenChange }: FolderDelet
       onOpenChange(false);
 
       toast({
-        title: t`Folder deleted successfully`,
+        title: 'Folder deleted successfully',
       });
     } catch (err) {
       const error = AppError.parseError(err);
 
       if (error.code === AppErrorCode.NOT_FOUND) {
         toast({
-          title: t`Folder not found`,
-          description: t`The folder you are trying to delete does not exist.`,
+          title: 'Folder not found',
+          description: _(msg`The folder you are trying to delete does not exist.`),
           variant: 'destructive',
         });
 
@@ -85,8 +87,8 @@ export const FolderDeleteDialog = ({ folder, isOpen, onOpenChange }: FolderDelet
       }
 
       toast({
-        title: t`Failed to delete folder`,
-        description: t`An unknown error occurred while deleting the folder.`,
+        title: 'Failed to delete folder',
+        description: _(msg`An unknown error occurred while deleting the folder.`),
         variant: 'destructive',
       });
     }
@@ -102,65 +104,53 @@ export const FolderDeleteDialog = ({ folder, isOpen, onOpenChange }: FolderDelet
     <Dialog open={isOpen} onOpenChange={onOpenChange}>
       <DialogContent>
         <DialogHeader>
-          <DialogTitle>
-            <Trans>Delete Folder</Trans>
-          </DialogTitle>
+          <DialogTitle>Delete Folder</DialogTitle>
           <DialogDescription>
-            <Trans>Are you sure you want to delete this folder?</Trans>
+            Are you sure you want to delete this folder?
+            {folder && folder._count.documents > 0 && (
+              <span className="text-destructive mt-2 block">
+                This folder contains {folder._count.documents} document(s). Deleting it will also
+                delete all documents in the folder.
+              </span>
+            )}
+            {folder && folder._count.subfolders > 0 && (
+              <span className="text-destructive mt-2 block">
+                This folder contains {folder._count.subfolders} subfolder(s). Deleting it will
+                delete all subfolders and their contents.
+              </span>
+            )}
           </DialogDescription>
         </DialogHeader>
-
-        {(folder._count.documents > 0 ||
-          folder._count.templates > 0 ||
-          folder._count.subfolders > 0) && (
-          <Alert variant="destructive">
-            <AlertDescription>
-              <Trans>
-                This folder contains multiple items. Deleting it will remove all subfolders and move
-                all nested documents and templates to the root folder.
-              </Trans>
-            </AlertDescription>
-          </Alert>
-        )}
-
         <Form {...form}>
-          <form onSubmit={form.handleSubmit(onFormSubmit)}>
-            <fieldset disabled={form.formState.isSubmitting} className="space-y-4">
-              <FormField
-                control={form.control}
-                name="confirmText"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>
-                      <Trans>
-                        Confirm by typing:{' '}
-                        <span className="font-sm text-destructive font-semibold">
-                          {deleteMessage}
-                        </span>
-                      </Trans>
-                    </FormLabel>
-                    <FormControl>
-                      <Input placeholder={deleteMessage} {...field} />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-
-              <DialogFooter>
-                <Button type="button" variant="secondary" onClick={() => onOpenChange(false)}>
-                  <Trans>Cancel</Trans>
-                </Button>
-                <Button
-                  variant="destructive"
-                  type="submit"
-                  disabled={!form.formState.isValid}
-                  loading={form.formState.isSubmitting}
-                >
-                  <Trans>Delete</Trans>
-                </Button>
-              </DialogFooter>
-            </fieldset>
+          <form onSubmit={form.handleSubmit(onFormSubmit)} className="space-y-4">
+            <FormField
+              control={form.control}
+              name="confirmText"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>
+                    <Trans>
+                      Confirm by typing:{' '}
+                      <span className="font-sm text-destructive font-semibold">
+                        {deleteMessage}
+                      </span>
+                    </Trans>
+                  </FormLabel>
+                  <FormControl>
+                    <Input {...field} placeholder={deleteMessage} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <DialogFooter>
+              <Button variant="secondary" onClick={() => onOpenChange(false)}>
+                Cancel
+              </Button>
+              <Button variant="destructive" type="submit" disabled={!form.formState.isValid}>
+                Delete
+              </Button>
+            </DialogFooter>
           </form>
         </Form>
       </DialogContent>

apps/remix/app/components/dialogs/folder-move-dialog.tsx

@@ -1,10 +1,10 @@
-import { useEffect, useState } from 'react';
+import { useEffect } from 'react';
 
 import { zodResolver } from '@hookform/resolvers/zod';
-import { useLingui } from '@lingui/react/macro';
-import { Trans } from '@lingui/react/macro';
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
 import type * as DialogPrimitive from '@radix-ui/react-dialog';
-import { FolderIcon, HomeIcon, Search } from 'lucide-react';
+import { FolderIcon, HomeIcon } from 'lucide-react';
 import { useForm } from 'react-hook-form';
 import { z } from 'zod';
 
@@ -27,7 +27,6 @@ import {
   FormItem,
   FormMessage,
 } from '@documenso/ui/primitives/form/form';
-import { Input } from '@documenso/ui/primitives/input';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
 export type FolderMoveDialogProps = {
@@ -49,10 +48,9 @@ export const FolderMoveDialog = ({
   isOpen,
   onOpenChange,
 }: FolderMoveDialogProps) => {
-  const { t } = useLingui();
-  const { toast } = useToast();
-  const [searchTerm, setSearchTerm] = useState('');
+  const { _ } = useLingui();
 
+  const { toast } = useToast();
   const { mutateAsync: moveFolder } = trpc.folder.moveFolder.useMutation();
 
   const form = useForm<TMoveFolderFormSchema>({
@@ -74,15 +72,15 @@ export const FolderMoveDialog = ({
       onOpenChange(false);
 
       toast({
-        title: t`Folder moved successfully`,
+        title: 'Folder moved successfully',
       });
     } catch (err) {
       const error = AppError.parseError(err);
 
       if (error.code === AppErrorCode.NOT_FOUND) {
         toast({
-          title: t`Folder not found`,
-          description: t`The folder you are trying to move does not exist.`,
+          title: 'Folder not found',
+          description: _(msg`The folder you are trying to move does not exist.`),
           variant: 'destructive',
         });
 
@@ -90,8 +88,8 @@ export const FolderMoveDialog = ({
       }
 
       toast({
-        title: t`Failed to move folder`,
-        description: t`An unknown error occurred while moving the folder.`,
+        title: 'Failed to move folder',
+        description: _(msg`An unknown error occurred while moving the folder.`),
         variant: 'destructive',
       });
     }
@@ -100,91 +98,69 @@ export const FolderMoveDialog = ({
   useEffect(() => {
     if (!isOpen) {
       form.reset();
-      setSearchTerm('');
     }
   }, [isOpen, form]);
 
-  // Filter out the current folder, only show folders of the same type, and filter by search term
+  // Filter out the current folder and only show folders of the same type
   const filteredFolders = foldersData?.filter(
-    (f) =>
-      f.id !== folder?.id &&
-      f.type === folder?.type &&
-      (searchTerm === '' || f.name.toLowerCase().includes(searchTerm.toLowerCase())),
+    (f) => f.id !== folder?.id && f.type === folder?.type,
   );
 
   return (
     <Dialog open={isOpen} onOpenChange={onOpenChange}>
       <DialogContent>
         <DialogHeader>
-          <DialogTitle>
-            <Trans>Move Folder</Trans>
-          </DialogTitle>
-          <DialogDescription>
-            <Trans>Select a destination for this folder.</Trans>
-          </DialogDescription>
+          <DialogTitle>Move Folder</DialogTitle>
+          <DialogDescription>Select a destination for this folder.</DialogDescription>
         </DialogHeader>
-
-        <div className="relative">
-          <Search className="text-muted-foreground absolute left-2 top-3 h-4 w-4" />
-          <Input
-            placeholder={t`Search folders...`}
-            value={searchTerm}
-            onChange={(e) => setSearchTerm(e.target.value)}
-            className="pl-8"
-          />
-        </div>
-
         <Form {...form}>
-          <form onSubmit={form.handleSubmit(onFormSubmit)}>
-            <fieldset disabled={form.formState.isSubmitting} className="space-y-4">
-              <FormField
-                control={form.control}
-                name="targetFolderId"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormControl>
-                      <div className="max-h-96 space-y-2 overflow-y-auto">
-                        <Button
-                          type="button"
-                          variant={!field.value ? 'default' : 'outline'}
-                          className="w-full justify-start"
-                          disabled={!folder?.parentId}
-                          onClick={() => field.onChange(null)}
-                        >
-                          <HomeIcon className="mr-2 h-4 w-4" />
-                          <Trans>Home</Trans>
-                        </Button>
+          <form onSubmit={form.handleSubmit(onFormSubmit)} className="space-y-4 py-4">
+            <FormField
+              control={form.control}
+              name="targetFolderId"
+              render={({ field }) => (
+                <FormItem>
+                  <FormControl>
+                    <div className="space-y-2">
+                      <Button
+                        type="button"
+                        variant={!field.value ? 'default' : 'outline'}
+                        className="w-full justify-start"
+                        disabled={!folder?.parentId}
+                        onClick={() => field.onChange(null)}
+                      >
+                        <HomeIcon className="mr-2 h-4 w-4" />
+                        Root
+                      </Button>
 
-                        {filteredFolders &&
-                          filteredFolders.map((f) => (
-                            <Button
-                              key={f.id}
-                              type="button"
-                              disabled={f.id === folder?.parentId}
-                              variant={field.value === f.id ? 'default' : 'outline'}
-                              className="w-full justify-start"
-                              onClick={() => field.onChange(f.id)}
-                            >
-                              <FolderIcon className="mr-2 h-4 w-4" />
-                              {f.name}
-                            </Button>
-                          ))}
-                      </div>
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-
-              <DialogFooter>
-                <Button type="button" variant="secondary" onClick={() => onOpenChange(false)}>
-                  <Trans>Cancel</Trans>
-                </Button>
-                <Button type="submit" loading={form.formState.isSubmitting}>
-                  <Trans>Move</Trans>
-                </Button>
-              </DialogFooter>
-            </fieldset>
+                      {filteredFolders &&
+                        filteredFolders.map((f) => (
+                          <Button
+                            key={f.id}
+                            type="button"
+                            disabled={f.id === folder?.parentId}
+                            variant={field.value === f.id ? 'default' : 'outline'}
+                            className="w-full justify-start"
+                            onClick={() => field.onChange(f.id)}
+                          >
+                            <FolderIcon className="mr-2 h-4 w-4" />
+                            {f.name}
+                          </Button>
+                        ))}
+                    </div>
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <DialogFooter>
+              <Button type="button" variant="secondary" onClick={() => onOpenChange(false)}>
+                Cancel
+              </Button>
+              <Button type="submit" disabled={form.formState.isSubmitting}>
+                Move Folder
+              </Button>
+            </DialogFooter>
           </form>
         </Form>
       </DialogContent>

apps/remix/app/components/dialogs/folder-settings-dialog.tsx

@@ -1,8 +1,8 @@
 import { useEffect } from 'react';
 
 import { zodResolver } from '@hookform/resolvers/zod';
-import { useLingui } from '@lingui/react/macro';
-import { Trans } from '@lingui/react/macro';
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
 import type * as DialogPrimitive from '@radix-ui/react-dialog';
 import { useForm } from 'react-hook-form';
 import { z } from 'zod';
@@ -14,7 +14,6 @@ import type { TFolderWithSubfolders } from '@documenso/trpc/server/folder-router
 import { Button } from '@documenso/ui/primitives/button';
 import {
   Dialog,
-  DialogClose,
   DialogContent,
   DialogDescription,
   DialogFooter,
@@ -41,7 +40,7 @@ import { useToast } from '@documenso/ui/primitives/use-toast';
 
 import { useOptionalCurrentTeam } from '~/providers/team';
 
-export type FolderUpdateDialogProps = {
+export type FolderSettingsDialogProps = {
   folder: TFolderWithSubfolders | null;
   isOpen: boolean;
   onOpenChange: (open: boolean) => void;
@@ -54,8 +53,12 @@ export const ZUpdateFolderFormSchema = z.object({
 
 export type TUpdateFolderFormSchema = z.infer<typeof ZUpdateFolderFormSchema>;
 
-export const FolderUpdateDialog = ({ folder, isOpen, onOpenChange }: FolderUpdateDialogProps) => {
-  const { t } = useLingui();
+export const FolderSettingsDialog = ({
+  folder,
+  isOpen,
+  onOpenChange,
+}: FolderSettingsDialogProps) => {
+  const { _ } = useLingui();
   const team = useOptionalCurrentTeam();
 
   const { toast } = useToast();
@@ -81,9 +84,7 @@ export const FolderUpdateDialog = ({ folder, isOpen, onOpenChange }: FolderUpdat
   }, [folder, form]);
 
   const onFormSubmit = async (data: TUpdateFolderFormSchema) => {
-    if (!folder) {
-      return;
-    }
+    if (!folder) return;
 
     try {
       await updateFolder({
@@ -95,7 +96,7 @@ export const FolderUpdateDialog = ({ folder, isOpen, onOpenChange }: FolderUpdat
       });
 
       toast({
-        title: t`Folder updated successfully`,
+        title: _(msg`Folder updated successfully`),
       });
 
       onOpenChange(false);
@@ -104,7 +105,7 @@ export const FolderUpdateDialog = ({ folder, isOpen, onOpenChange }: FolderUpdat
 
       if (error.code === AppErrorCode.NOT_FOUND) {
         toast({
-          title: t`Folder not found`,
+          title: _(msg`Folder not found`),
         });
       }
     }
@@ -114,12 +115,8 @@ export const FolderUpdateDialog = ({ folder, isOpen, onOpenChange }: FolderUpdat
     <Dialog open={isOpen} onOpenChange={onOpenChange}>
       <DialogContent>
         <DialogHeader>
-          <DialogTitle>
-            <Trans>Folder Settings</Trans>
-          </DialogTitle>
-          <DialogDescription>
-            <Trans>Manage the settings for this folder.</Trans>
-          </DialogDescription>
+          <DialogTitle>Folder Settings</DialogTitle>
+          <DialogDescription>Manage the settings for this folder.</DialogDescription>
         </DialogHeader>
 
         <Form {...form}>
@@ -129,9 +126,7 @@ export const FolderUpdateDialog = ({ folder, isOpen, onOpenChange }: FolderUpdat
               name="name"
               render={({ field }) => (
                 <FormItem>
-                  <FormLabel>
-                    <Trans>Name</Trans>
-                  </FormLabel>
+                  <FormLabel>Name</FormLabel>
                   <FormControl>
                     <Input {...field} />
                   </FormControl>
@@ -146,25 +141,19 @@ export const FolderUpdateDialog = ({ folder, isOpen, onOpenChange }: FolderUpdat
                 name="visibility"
                 render={({ field }) => (
                   <FormItem>
-                    <FormLabel>
-                      <Trans>Visibility</Trans>
-                    </FormLabel>
+                    <FormLabel>Visibility</FormLabel>
                     <Select onValueChange={field.onChange} defaultValue={field.value}>
                       <FormControl>
                         <SelectTrigger>
-                          <SelectValue placeholder={t`Select visibility`} />
+                          <SelectValue placeholder="Select visibility" />
                         </SelectTrigger>
                       </FormControl>
                       <SelectContent>
-                        <SelectItem value={DocumentVisibility.EVERYONE}>
-                          <Trans>Everyone</Trans>
-                        </SelectItem>
+                        <SelectItem value={DocumentVisibility.EVERYONE}>Everyone</SelectItem>
                         <SelectItem value={DocumentVisibility.MANAGER_AND_ABOVE}>
-                          <Trans>Managers and above</Trans>
-                        </SelectItem>
-                        <SelectItem value={DocumentVisibility.ADMIN}>
-                          <Trans>Admins only</Trans>
+                          Managers and above
                         </SelectItem>
+                        <SelectItem value={DocumentVisibility.ADMIN}>Admins only</SelectItem>
                       </SelectContent>
                     </Select>
                     <FormMessage />
@@ -174,15 +163,7 @@ export const FolderUpdateDialog = ({ folder, isOpen, onOpenChange }: FolderUpdat
             )}
 
             <DialogFooter>
-              <DialogClose asChild>
-                <Button variant="secondary">
-                  <Trans>Cancel</Trans>
-                </Button>
-              </DialogClose>
-
-              <Button type="submit" loading={form.formState.isSubmitting}>
-                <Trans>Update</Trans>
-              </Button>
+              <Button type="submit">Save Changes</Button>
             </DialogFooter>
           </form>
         </Form>

apps/remix/app/components/dialogs/organisation-create-dialog.tsx

@@ -19,7 +19,6 @@ import { IS_BILLING_ENABLED } from '@documenso/lib/constants/app';
 import { AppError } from '@documenso/lib/errors/app-error';
 import { INTERNAL_CLAIM_ID } from '@documenso/lib/types/subscription';
 import { parseMessageDescriptorMacro } from '@documenso/lib/utils/i18n';
-import { isPersonalLayout } from '@documenso/lib/utils/organisations';
 import { trpc } from '@documenso/trpc/react';
 import { ZCreateOrganisationRequestSchema } from '@documenso/trpc/server/organisation-router/create-organisation.types';
 import { cn } from '@documenso/ui/lib/utils';
@@ -47,8 +46,6 @@ import { SpinnerBox } from '@documenso/ui/primitives/spinner';
 import { Tabs, TabsList, TabsTrigger } from '@documenso/ui/primitives/tabs';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
-import { IndividualPersonalLayoutCheckoutButton } from '../general/billing-plans';
-
 export type OrganisationCreateDialogProps = {
   trigger?: React.ReactNode;
 } & Omit<DialogPrimitive.DialogProps, 'children'>;
@@ -62,11 +59,10 @@ export type TCreateOrganisationFormSchema = z.infer<typeof ZCreateOrganisationFo
 export const OrganisationCreateDialog = ({ trigger, ...props }: OrganisationCreateDialogProps) => {
   const { t } = useLingui();
   const { toast } = useToast();
-  const { refreshSession, organisations } = useSession();
+  const { refreshSession } = useSession();
 
   const [searchParams] = useSearchParams();
   const updateSearchParams = useUpdateSearchParams();
-  const isPersonalLayoutMode = isPersonalLayout(organisations);
 
   const actionSearchParam = searchParams?.get('action');
 
@@ -87,9 +83,7 @@ export const OrganisationCreateDialog = ({ trigger, ...props }: OrganisationCrea
 
   const { mutateAsync: createOrganisation } = trpc.organisation.create.useMutation();
 
-  const { data: plansData } = trpc.billing.plans.get.useQuery(undefined, {
-    enabled: IS_BILLING_ENABLED(),
-  });
+  const { data: plansData } = trpc.billing.plans.get.useQuery();
 
   const onFormSubmit = async ({ name }: TCreateOrganisationFormSchema) => {
     try {
@@ -137,13 +131,6 @@ export const OrganisationCreateDialog = ({ trigger, ...props }: OrganisationCrea
     form.reset();
   }, [open, form]);
 
-  const isIndividualPlan = (priceId: string) => {
-    return (
-      plansData?.plans[INTERNAL_CLAIM_ID.INDIVIDUAL]?.monthlyPrice?.id === priceId ||
-      plansData?.plans[INTERNAL_CLAIM_ID.INDIVIDUAL]?.yearlyPrice?.id === priceId
-    );
-  };
-
   return (
     <Dialog
       {...props}
@@ -188,15 +175,9 @@ export const OrganisationCreateDialog = ({ trigger, ...props }: OrganisationCrea
                     <Trans>Cancel</Trans>
                   </Button>
 
-                  {isIndividualPlan(selectedPriceId) && isPersonalLayoutMode ? (
-                    <IndividualPersonalLayoutCheckoutButton priceId={selectedPriceId}>
-                      <Trans>Checkout</Trans>
-                    </IndividualPersonalLayoutCheckoutButton>
-                  ) : (
-                    <Button type="submit" onClick={() => setStep('create')}>
-                      <Trans>Continue</Trans>
-                    </Button>
-                  )}
+                  <Button type="submit" onClick={() => setStep('create')}>
+                    <Trans>Continue</Trans>
+                  </Button>
                 </DialogFooter>
               </fieldset>
             </>
@@ -323,11 +304,7 @@ const BillingPlanForm = ({
   }, [value]);
 
   const onBillingPeriodChange = (billingPeriod: 'monthlyPrice' | 'yearlyPrice') => {
-    const plan = dynamicPlans.find(
-      (plan) =>
-        // Purposely using the opposite billing period to get the correct plan.
-        plan[billingPeriod === 'monthlyPrice' ? 'yearlyPrice' : 'monthlyPrice']?.id === value,
-    );
+    const plan = dynamicPlans.find((plan) => plan[billingPeriod]?.id === value);
 
     setBillingPeriod(billingPeriod);
 

apps/remix/app/components/dialogs/organisation-member-invite-dialog.tsx

@@ -13,7 +13,7 @@ import { z } from 'zod';
 
 import { downloadFile } from '@documenso/lib/client-only/download-file';
 import { useCurrentOrganisation } from '@documenso/lib/client-only/providers/organisation';
-import { IS_BILLING_ENABLED, SUPPORT_EMAIL } from '@documenso/lib/constants/app';
+import { IS_BILLING_ENABLED } from '@documenso/lib/constants/app';
 import { ORGANISATION_MEMBER_ROLE_HIERARCHY } from '@documenso/lib/constants/organisations';
 import { ORGANISATION_MEMBER_ROLE_MAP } from '@documenso/lib/constants/organisations-translations';
 import { INTERNAL_CLAIM_ID } from '@documenso/lib/types/subscription';
@@ -303,8 +303,8 @@ export const OrganisationMemberInviteDialog = ({
               <AlertDescription>
                 <Trans>
                   Your plan does not support inviting members. Please upgrade or your plan or
-                  contact sales at <a href={`mailto:${SUPPORT_EMAIL}`}>{SUPPORT_EMAIL}</a> if you
-                  would like to discuss your options.
+                  contact sales at <a href="mailto:support@documenso.com">support@documenso.com</a>{' '}
+                  if you would like to discuss your options.
                 </Trans>
               </AlertDescription>
             </Alert>

apps/remix/app/components/dialogs/session-logout-all-dialog.tsx

@@ -1,94 +0,0 @@
-import { useState } from 'react';
-
-import { Trans, useLingui } from '@lingui/react/macro';
-
-import { authClient } from '@documenso/auth/client';
-import { Button } from '@documenso/ui/primitives/button';
-import {
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from '@documenso/ui/primitives/dialog';
-import { useToast } from '@documenso/ui/primitives/use-toast';
-
-type SessionLogoutAllDialogProps = {
-  onSuccess?: () => Promise<unknown>;
-  disabled?: boolean;
-};
-
-export const SessionLogoutAllDialog = ({ onSuccess, disabled }: SessionLogoutAllDialogProps) => {
-  const { t } = useLingui();
-  const { toast } = useToast();
-
-  const [isOpen, setIsOpen] = useState(false);
-  const [isLoading, setIsLoading] = useState(false);
-
-  const handleSignOutAllSessions = async () => {
-    setIsLoading(true);
-
-    try {
-      await authClient.signOutAllSessions();
-
-      if (onSuccess) {
-        await onSuccess();
-      }
-
-      toast({
-        title: t`Sessions have been revoked`,
-      });
-
-      setIsOpen(false);
-    } catch (error) {
-      console.error(error);
-
-      toast({
-        title: t`Error`,
-        description: t`Failed to sign out all sessions`,
-        variant: 'destructive',
-      });
-    }
-
-    setIsLoading(false);
-  };
-
-  return (
-    <Dialog open={isOpen} onOpenChange={(value) => (isLoading ? undefined : setIsOpen(value))}>
-      <DialogTrigger asChild>
-        <Button variant="secondary" disabled={disabled}>
-          <Trans>Revoke all sessions</Trans>
-        </Button>
-      </DialogTrigger>
-
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>
-            <Trans>Revoke all sessions</Trans>
-          </DialogTitle>
-          <DialogDescription>
-            <Trans>
-              This will sign you out of all other devices. You will need to sign in again on those
-              devices to continue using your account.
-            </Trans>
-          </DialogDescription>
-        </DialogHeader>
-
-        <DialogFooter>
-          <DialogClose asChild>
-            <Button variant="secondary" disabled={isLoading}>
-              <Trans>Cancel</Trans>
-            </Button>
-          </DialogClose>
-
-          <Button loading={isLoading} variant="destructive" onClick={handleSignOutAllSessions}>
-            <Trans>Revoke all sessions</Trans>
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  );
-};

apps/remix/app/components/dialogs/team-create-dialog.tsx

@@ -12,11 +12,7 @@ import type { z } from 'zod';
 import { useUpdateSearchParams } from '@documenso/lib/client-only/hooks/use-update-search-params';
 import { useCurrentOrganisation } from '@documenso/lib/client-only/providers/organisation';
 import { useSession } from '@documenso/lib/client-only/providers/session';
-import {
-  IS_BILLING_ENABLED,
-  NEXT_PUBLIC_WEBAPP_URL,
-  SUPPORT_EMAIL,
-} from '@documenso/lib/constants/app';
+import { IS_BILLING_ENABLED, NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app';
 import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
 import { trpc } from '@documenso/trpc/react';
 import { ZCreateTeamRequestSchema } from '@documenso/trpc/server/team-router/create-team.types';
@@ -197,8 +193,8 @@ export const TeamCreateDialog = ({ trigger, onCreated, ...props }: TeamCreateDia
               <AlertDescription className="mt-0">
                 <Trans>
                   You have reached the maximum number of teams for your plan. Please contact sales
-                  at <a href={`mailto:${SUPPORT_EMAIL}`}>{SUPPORT_EMAIL}</a> if you would like to
-                  adjust your plan.
+                  at <a href="mailto:support@documenso.com">support@documenso.com</a> if you would
+                  like to adjust your plan.
                 </Trans>
               </AlertDescription>
             </Alert>

apps/remix/app/components/dialogs/template-create-dialog.tsx

@@ -8,7 +8,6 @@ import { useNavigate } from 'react-router';
 
 import { useSession } from '@documenso/lib/client-only/providers/session';
 import { putPdfFile } from '@documenso/lib/universal/upload/put-file';
-import { formatTemplatesPath } from '@documenso/lib/utils/teams';
 import { trpc } from '@documenso/trpc/react';
 import { Button } from '@documenso/ui/primitives/button';
 import {
@@ -24,21 +23,18 @@ import {
 import { DocumentDropzone } from '@documenso/ui/primitives/document-dropzone';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
-import { useCurrentTeam } from '~/providers/team';
-
 type TemplateCreateDialogProps = {
+  templateRootPath: string;
   folderId?: string;
 };
 
-export const TemplateCreateDialog = ({ folderId }: TemplateCreateDialogProps) => {
+export const TemplateCreateDialog = ({ templateRootPath, folderId }: TemplateCreateDialogProps) => {
   const navigate = useNavigate();
 
   const { user } = useSession();
   const { toast } = useToast();
   const { _ } = useLingui();
 
-  const team = useCurrentTeam();
-
   const { mutateAsync: createTemplate } = trpc.template.createTemplate.useMutation();
 
   const [showTemplateCreateDialog, setShowTemplateCreateDialog] = useState(false);
@@ -70,7 +66,7 @@ export const TemplateCreateDialog = ({ folderId }: TemplateCreateDialogProps) =>
 
       setShowTemplateCreateDialog(false);
 
-      await navigate(`${formatTemplatesPath(team.url)}/${id}/edit`);
+      await navigate(`${templateRootPath}/${id}/edit`);
     } catch {
       toast({
         title: _(msg`Something went wrong`),

apps/remix/app/components/dialogs/template-folder-create-dialog.tsx

@@ -0,0 +1,165 @@
+import { useEffect, useState } from 'react';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
+import type * as DialogPrimitive from '@radix-ui/react-dialog';
+import { FolderPlusIcon } from 'lucide-react';
+import { useForm } from 'react-hook-form';
+import { useNavigate, useParams } from 'react-router';
+import { z } from 'zod';
+
+import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
+import { FolderType } from '@documenso/lib/types/folder-type';
+import { formatTemplatesPath } from '@documenso/lib/utils/teams';
+import { trpc } from '@documenso/trpc/react';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@documenso/ui/primitives/dialog';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@documenso/ui/primitives/form/form';
+import { Input } from '@documenso/ui/primitives/input';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+import { useCurrentTeam } from '~/providers/team';
+
+const ZCreateFolderFormSchema = z.object({
+  name: z.string().min(1, { message: 'Folder name is required' }),
+});
+
+type TCreateFolderFormSchema = z.infer<typeof ZCreateFolderFormSchema>;
+
+export type TemplateFolderCreateDialogProps = {
+  trigger?: React.ReactNode;
+} & Omit<DialogPrimitive.DialogProps, 'children'>;
+
+export const TemplateFolderCreateDialog = ({
+  trigger,
+  ...props
+}: TemplateFolderCreateDialogProps) => {
+  const { toast } = useToast();
+  const { _ } = useLingui();
+  const { folderId } = useParams();
+
+  const navigate = useNavigate();
+  const team = useCurrentTeam();
+
+  const [isCreateFolderOpen, setIsCreateFolderOpen] = useState(false);
+
+  const { mutateAsync: createFolder } = trpc.folder.createFolder.useMutation();
+
+  const form = useForm<TCreateFolderFormSchema>({
+    resolver: zodResolver(ZCreateFolderFormSchema),
+    defaultValues: {
+      name: '',
+    },
+  });
+
+  const onSubmit = async (data: TCreateFolderFormSchema) => {
+    try {
+      const newFolder = await createFolder({
+        name: data.name,
+        parentId: folderId,
+        type: FolderType.TEMPLATE,
+      });
+
+      setIsCreateFolderOpen(false);
+
+      toast({
+        description: _(msg`Folder created successfully`),
+      });
+
+      const templatesPath = formatTemplatesPath(team.url);
+
+      void navigate(`${templatesPath}/f/${newFolder.id}`);
+    } catch (err) {
+      const error = AppError.parseError(err);
+
+      if (error.code === AppErrorCode.ALREADY_EXISTS) {
+        toast({
+          title: _(msg`Failed to create folder`),
+          description: _(msg`This folder name is already taken.`),
+          variant: 'destructive',
+        });
+
+        return;
+      }
+
+      toast({
+        title: _(msg`Failed to create folder`),
+        description: _(msg`An unknown error occurred while creating the folder.`),
+        variant: 'destructive',
+      });
+    }
+  };
+
+  useEffect(() => {
+    if (!isCreateFolderOpen) {
+      form.reset();
+    }
+  }, [isCreateFolderOpen, form]);
+
+  return (
+    <Dialog {...props} open={isCreateFolderOpen} onOpenChange={setIsCreateFolderOpen}>
+      <DialogTrigger asChild>
+        {trigger ?? (
+          <Button variant="outline" className="flex items-center space-x-2">
+            <FolderPlusIcon className="h-4 w-4" />
+            <span>Create Folder</span>
+          </Button>
+        )}
+      </DialogTrigger>
+
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Create New Folder</DialogTitle>
+          <DialogDescription>
+            Enter a name for your new folder. Folders help you organise your templates.
+          </DialogDescription>
+        </DialogHeader>
+
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+            <FormField
+              control={form.control}
+              name="name"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Folder Name</FormLabel>
+                  <FormControl>
+                    <Input placeholder="My Folder" {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <DialogFooter>
+              <Button
+                type="button"
+                variant="secondary"
+                onClick={() => setIsCreateFolderOpen(false)}
+              >
+                Cancel
+              </Button>
+              <Button type="submit">Create</Button>
+            </DialogFooter>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  );
+};

apps/remix/app/components/dialogs/template-folder-delete-dialog.tsx

@@ -0,0 +1,163 @@
+import { useEffect } from 'react';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
+import type * as DialogPrimitive from '@radix-ui/react-dialog';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+
+import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
+import { trpc } from '@documenso/trpc/react';
+import type { TFolderWithSubfolders } from '@documenso/trpc/server/folder-router/schema';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@documenso/ui/primitives/dialog';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@documenso/ui/primitives/form/form';
+import { Input } from '@documenso/ui/primitives/input';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+export type TemplateFolderDeleteDialogProps = {
+  folder: TFolderWithSubfolders | null;
+  isOpen: boolean;
+  onOpenChange: (open: boolean) => void;
+} & Omit<DialogPrimitive.DialogProps, 'children'>;
+
+export const TemplateFolderDeleteDialog = ({
+  folder,
+  isOpen,
+  onOpenChange,
+}: TemplateFolderDeleteDialogProps) => {
+  const { _ } = useLingui();
+
+  const { toast } = useToast();
+  const { mutateAsync: deleteFolder } = trpc.folder.deleteFolder.useMutation();
+
+  const deleteMessage = _(msg`delete ${folder?.name ?? 'folder'}`);
+
+  const ZDeleteFolderFormSchema = z.object({
+    confirmText: z.literal(deleteMessage, {
+      errorMap: () => ({ message: _(msg`You must type '${deleteMessage}' to confirm`) }),
+    }),
+  });
+
+  type TDeleteFolderFormSchema = z.infer<typeof ZDeleteFolderFormSchema>;
+
+  const form = useForm<TDeleteFolderFormSchema>({
+    resolver: zodResolver(ZDeleteFolderFormSchema),
+    defaultValues: {
+      confirmText: '',
+    },
+  });
+
+  const onFormSubmit = async () => {
+    if (!folder) return;
+
+    try {
+      await deleteFolder({
+        id: folder.id,
+      });
+
+      onOpenChange(false);
+
+      toast({
+        title: 'Folder deleted successfully',
+      });
+    } catch (err) {
+      const error = AppError.parseError(err);
+
+      if (error.code === AppErrorCode.NOT_FOUND) {
+        toast({
+          title: 'Folder not found',
+          description: _(msg`The folder you are trying to delete does not exist.`),
+          variant: 'destructive',
+        });
+
+        return;
+      }
+
+      toast({
+        title: 'Failed to delete folder',
+        description: _(msg`An unknown error occurred while deleting the folder.`),
+        variant: 'destructive',
+      });
+    }
+  };
+
+  useEffect(() => {
+    if (!isOpen) {
+      form.reset();
+    }
+  }, [isOpen]);
+
+  return (
+    <Dialog open={isOpen} onOpenChange={onOpenChange}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Delete Folder</DialogTitle>
+          <DialogDescription>
+            Are you sure you want to delete this folder?
+            {folder && folder._count.documents > 0 && (
+              <span className="text-destructive mt-2 block">
+                This folder contains {folder._count.documents} document(s). Deleting it will also
+                delete all documents in the folder.
+              </span>
+            )}
+            {folder && folder._count.subfolders > 0 && (
+              <span className="text-destructive mt-2 block">
+                This folder contains {folder._count.subfolders} subfolder(s). Deleting it will
+                delete all subfolders and their contents.
+              </span>
+            )}
+          </DialogDescription>
+        </DialogHeader>
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onFormSubmit)} className="space-y-4">
+            <FormField
+              control={form.control}
+              name="confirmText"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>
+                    <Trans>
+                      Confirm by typing:{' '}
+                      <span className="font-sm text-destructive font-semibold">
+                        {deleteMessage}
+                      </span>
+                    </Trans>
+                  </FormLabel>
+                  <FormControl>
+                    <Input {...field} placeholder={deleteMessage} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <DialogFooter>
+              <Button variant="secondary" onClick={() => onOpenChange(false)}>
+                Cancel
+              </Button>
+              <Button variant="destructive" type="submit" disabled={!form.formState.isValid}>
+                Delete
+              </Button>
+            </DialogFooter>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  );
+};

apps/remix/app/components/dialogs/template-folder-move-dialog.tsx

@@ -0,0 +1,175 @@
+import { useEffect } from 'react';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
+import type * as DialogPrimitive from '@radix-ui/react-dialog';
+import { FolderIcon, HomeIcon } from 'lucide-react';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+
+import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
+import { trpc } from '@documenso/trpc/react';
+import type { TFolderWithSubfolders } from '@documenso/trpc/server/folder-router/schema';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@documenso/ui/primitives/dialog';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormMessage,
+} from '@documenso/ui/primitives/form/form';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+export type TemplateFolderMoveDialogProps = {
+  foldersData: TFolderWithSubfolders[] | undefined;
+  folder: TFolderWithSubfolders | null;
+  isOpen: boolean;
+  onOpenChange: (open: boolean) => void;
+} & Omit<DialogPrimitive.DialogProps, 'children'>;
+
+const ZMoveFolderFormSchema = z.object({
+  targetFolderId: z.string().optional(),
+});
+
+type TMoveFolderFormSchema = z.infer<typeof ZMoveFolderFormSchema>;
+
+export const TemplateFolderMoveDialog = ({
+  foldersData,
+  folder,
+  isOpen,
+  onOpenChange,
+}: TemplateFolderMoveDialogProps) => {
+  const { _ } = useLingui();
+
+  const { toast } = useToast();
+  const { mutateAsync: moveFolder } = trpc.folder.moveFolder.useMutation();
+
+  const form = useForm<TMoveFolderFormSchema>({
+    resolver: zodResolver(ZMoveFolderFormSchema),
+    defaultValues: {
+      targetFolderId: folder?.parentId ?? '',
+    },
+  });
+
+  const onFormSubmit = async ({ targetFolderId }: TMoveFolderFormSchema) => {
+    if (!folder) return;
+
+    try {
+      await moveFolder({
+        id: folder.id,
+        parentId: targetFolderId ?? '',
+      });
+
+      onOpenChange(false);
+
+      toast({
+        title: 'Folder moved successfully',
+      });
+    } catch (err) {
+      const error = AppError.parseError(err);
+
+      if (error.code === AppErrorCode.NOT_FOUND) {
+        toast({
+          title: 'Folder not found',
+          description: _(msg`The folder you are trying to move does not exist.`),
+          variant: 'destructive',
+        });
+
+        return;
+      }
+
+      toast({
+        title: 'Failed to move folder',
+        description: _(msg`An unknown error occurred while moving the folder.`),
+        variant: 'destructive',
+      });
+    }
+  };
+
+  useEffect(() => {
+    if (!isOpen) {
+      form.reset();
+    }
+  }, [isOpen, form]);
+
+  // Filter out the current folder and only show folders of the same type
+  const filteredFolders = foldersData?.filter(
+    (f) => f.id !== folder?.id && f.type === folder?.type,
+  );
+
+  return (
+    <Dialog open={isOpen} onOpenChange={onOpenChange}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Move Folder</DialogTitle>
+          <DialogDescription>Select a destination for this folder.</DialogDescription>
+        </DialogHeader>
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onFormSubmit)} className="space-y-4 py-4">
+            <FormField
+              control={form.control}
+              name="targetFolderId"
+              render={({ field }) => (
+                <FormItem>
+                  <FormControl>
+                    <div className="space-y-2">
+                      <Button
+                        type="button"
+                        variant={!field.value ? 'default' : 'outline'}
+                        className="w-full justify-start"
+                        disabled={!folder?.parentId}
+                        onClick={() => field.onChange(undefined)}
+                      >
+                        <HomeIcon className="mr-2 h-4 w-4" />
+                        Root
+                      </Button>
+
+                      {filteredFolders &&
+                        filteredFolders.map((f) => (
+                          <Button
+                            key={f.id}
+                            type="button"
+                            disabled={f.id === folder?.parentId}
+                            variant={field.value === f.id ? 'default' : 'outline'}
+                            className="w-full justify-start"
+                            onClick={() => field.onChange(f.id)}
+                          >
+                            <FolderIcon className="mr-2 h-4 w-4" />
+                            {f.name}
+                          </Button>
+                        ))}
+                    </div>
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <DialogFooter>
+              <Button type="button" variant="secondary" onClick={() => onOpenChange(false)}>
+                Cancel
+              </Button>
+              <Button
+                type="submit"
+                disabled={
+                  form.formState.isSubmitting ||
+                  form.getValues('targetFolderId') === folder?.parentId
+                }
+              >
+                Move Folder
+              </Button>
+            </DialogFooter>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  );
+};

apps/remix/app/components/dialogs/template-folder-settings-dialog.tsx

@@ -0,0 +1,176 @@
+import { useEffect } from 'react';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
+import type * as DialogPrimitive from '@radix-ui/react-dialog';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+
+import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
+import { DocumentVisibility } from '@documenso/lib/types/document-visibility';
+import { FolderType } from '@documenso/lib/types/folder-type';
+import { trpc } from '@documenso/trpc/react';
+import type { TFolderWithSubfolders } from '@documenso/trpc/server/folder-router/schema';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@documenso/ui/primitives/dialog';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@documenso/ui/primitives/form/form';
+import { Input } from '@documenso/ui/primitives/input';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@documenso/ui/primitives/select';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+import { useOptionalCurrentTeam } from '~/providers/team';
+
+export type TemplateFolderSettingsDialogProps = {
+  folder: TFolderWithSubfolders | null;
+  isOpen: boolean;
+  onOpenChange: (open: boolean) => void;
+} & Omit<DialogPrimitive.DialogProps, 'children'>;
+
+export const ZUpdateFolderFormSchema = z.object({
+  name: z.string().min(1),
+  visibility: z.nativeEnum(DocumentVisibility).optional(),
+});
+
+export type TUpdateFolderFormSchema = z.infer<typeof ZUpdateFolderFormSchema>;
+
+export const TemplateFolderSettingsDialog = ({
+  folder,
+  isOpen,
+  onOpenChange,
+}: TemplateFolderSettingsDialogProps) => {
+  const { _ } = useLingui();
+  const team = useOptionalCurrentTeam();
+
+  const { toast } = useToast();
+  const { mutateAsync: updateFolder } = trpc.folder.updateFolder.useMutation();
+
+  const isTeamContext = !!team;
+  const isTemplateFolder = folder?.type === FolderType.TEMPLATE;
+
+  const form = useForm<z.infer<typeof ZUpdateFolderFormSchema>>({
+    resolver: zodResolver(ZUpdateFolderFormSchema),
+    defaultValues: {
+      name: folder?.name ?? '',
+      visibility: folder?.visibility ?? DocumentVisibility.EVERYONE,
+    },
+  });
+
+  useEffect(() => {
+    if (folder) {
+      form.reset({
+        name: folder.name,
+        visibility: folder.visibility ?? DocumentVisibility.EVERYONE,
+      });
+    }
+  }, [folder, form]);
+
+  const onFormSubmit = async (data: TUpdateFolderFormSchema) => {
+    if (!folder) return;
+
+    try {
+      await updateFolder({
+        id: folder.id,
+        name: data.name,
+        visibility:
+          isTeamContext && !isTemplateFolder
+            ? (data.visibility ?? DocumentVisibility.EVERYONE)
+            : DocumentVisibility.EVERYONE,
+      });
+
+      toast({
+        title: _(msg`Folder updated successfully`),
+      });
+
+      onOpenChange(false);
+    } catch (err) {
+      const error = AppError.parseError(err);
+
+      if (error.code === AppErrorCode.NOT_FOUND) {
+        toast({
+          title: _(msg`Folder not found`),
+        });
+      }
+    }
+  };
+
+  return (
+    <Dialog open={isOpen} onOpenChange={onOpenChange}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Folder Settings</DialogTitle>
+          <DialogDescription>Manage the settings for this folder.</DialogDescription>
+        </DialogHeader>
+
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onFormSubmit)} className="space-y-4">
+            <FormField
+              control={form.control}
+              name="name"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Name</FormLabel>
+                  <FormControl>
+                    <Input {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            {isTeamContext && !isTemplateFolder && (
+              <FormField
+                control={form.control}
+                name="visibility"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Visibility</FormLabel>
+                    <Select onValueChange={field.onChange} defaultValue={field.value}>
+                      <FormControl>
+                        <SelectTrigger>
+                          <SelectValue placeholder="Select visibility" />
+                        </SelectTrigger>
+                      </FormControl>
+                      <SelectContent>
+                        <SelectItem value={DocumentVisibility.EVERYONE}>Everyone</SelectItem>
+                        <SelectItem value={DocumentVisibility.MANAGER_AND_ABOVE}>
+                          Managers and above
+                        </SelectItem>
+                        <SelectItem value={DocumentVisibility.ADMIN}>Admins only</SelectItem>
+                      </SelectContent>
+                    </Select>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            )}
+
+            <DialogFooter>
+              <Button type="submit">Save Changes</Button>
+            </DialogFooter>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  );
+};

apps/remix/app/components/dialogs/template-move-to-folder-dialog.tsx

@@ -1,11 +1,11 @@
-import { useEffect, useState } from 'react';
+import { useEffect } from 'react';
 
 import { zodResolver } from '@hookform/resolvers/zod';
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
 import type * as DialogPrimitive from '@radix-ui/react-dialog';
-import { FolderIcon, HomeIcon, Loader2, Search } from 'lucide-react';
+import { FolderIcon, HomeIcon, Loader2 } from 'lucide-react';
 import { useForm } from 'react-hook-form';
 import { useNavigate } from 'react-router';
 import { z } from 'zod';
@@ -31,7 +31,6 @@ import {
   FormLabel,
   FormMessage,
 } from '@documenso/ui/primitives/form/form';
-import { Input } from '@documenso/ui/primitives/input';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
 import { useCurrentTeam } from '~/providers/team';
@@ -60,12 +59,9 @@ export function TemplateMoveToFolderDialog({
 }: TemplateMoveToFolderDialogProps) {
   const { _ } = useLingui();
   const { toast } = useToast();
-
   const navigate = useNavigate();
   const team = useCurrentTeam();
 
-  const [searchTerm, setSearchTerm] = useState('');
-
   const form = useForm<TMoveTemplateFormSchema>({
     resolver: zodResolver(ZMoveTemplateFormSchema),
     defaultValues: {
@@ -88,7 +84,6 @@ export function TemplateMoveToFolderDialog({
   useEffect(() => {
     if (!isOpen) {
       form.reset();
-      setSearchTerm('');
     } else {
       form.reset({ folderId: currentFolderId ?? null });
     }
@@ -137,10 +132,6 @@ export function TemplateMoveToFolderDialog({
     }
   };
 
-  const filteredFolders = folders?.data?.filter((folder) =>
-    folder.name.toLowerCase().includes(searchTerm.toLowerCase()),
-  );
-
   return (
     <Dialog {...props} open={isOpen} onOpenChange={onOpenChange}>
       <DialogContent>
@@ -154,16 +145,6 @@ export function TemplateMoveToFolderDialog({
           </DialogDescription>
         </DialogHeader>
 
-        <div className="relative">
-          <Search className="text-muted-foreground absolute left-2 top-3 h-4 w-4" />
-          <Input
-            placeholder={_(msg`Search folders...`)}
-            value={searchTerm}
-            onChange={(e) => setSearchTerm(e.target.value)}
-            className="pl-8"
-          />
-        </div>
-
         <Form {...form}>
           <form onSubmit={form.handleSubmit(onSubmit)} className="mt-4 flex flex-col gap-y-4">
             <FormField
@@ -174,9 +155,8 @@ export function TemplateMoveToFolderDialog({
                   <FormLabel>
                     <Trans>Folder</Trans>
                   </FormLabel>
-
                   <FormControl>
-                    <div className="max-h-96 space-y-2 overflow-y-auto">
+                    <div className="space-y-2">
                       {isFoldersLoading ? (
                         <div className="flex h-10 items-center justify-center">
                           <Loader2 className="h-4 w-4 animate-spin" />
@@ -191,10 +171,10 @@ export function TemplateMoveToFolderDialog({
                             disabled={currentFolderId === null}
                           >
                             <HomeIcon className="mr-2 h-4 w-4" />
-                            <Trans>Home (No Folder)</Trans>
+                            <Trans>Root (No Folder)</Trans>
                           </Button>
 
-                          {filteredFolders?.map((folder) => (
+                          {folders?.data?.map((folder) => (
                             <Button
                               key={folder.id}
                               type="button"
@@ -207,12 +187,6 @@ export function TemplateMoveToFolderDialog({
                               {folder.name}
                             </Button>
                           ))}
-
-                          {searchTerm && filteredFolders?.length === 0 && (
-                            <div className="text-muted-foreground px-2 py-2 text-center text-sm">
-                              <Trans>No folders found</Trans>
-                            </div>
-                          )}
                         </>
                       )}
                     </div>

apps/remix/app/components/dialogs/webhook-test-dialog.tsx

@@ -1,170 +0,0 @@
-import { useState } from 'react';
-
-import { zodResolver } from '@hookform/resolvers/zod';
-import { msg } from '@lingui/core/macro';
-import { useLingui } from '@lingui/react';
-import { Trans } from '@lingui/react/macro';
-import type { Webhook } from '@prisma/client';
-import { WebhookTriggerEvents } from '@prisma/client';
-import { useForm } from 'react-hook-form';
-import { z } from 'zod';
-
-import { toFriendlyWebhookEventName } from '@documenso/lib/universal/webhook/to-friendly-webhook-event-name';
-import { trpc } from '@documenso/trpc/react';
-import { Button } from '@documenso/ui/primitives/button';
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from '@documenso/ui/primitives/dialog';
-import {
-  Form,
-  FormControl,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from '@documenso/ui/primitives/form/form';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@documenso/ui/primitives/select';
-import { useToast } from '@documenso/ui/primitives/use-toast';
-
-import { useCurrentTeam } from '~/providers/team';
-
-export type WebhookTestDialogProps = {
-  webhook: Pick<Webhook, 'id' | 'webhookUrl' | 'eventTriggers'>;
-  children: React.ReactNode;
-};
-
-const ZTestWebhookFormSchema = z.object({
-  event: z.nativeEnum(WebhookTriggerEvents),
-});
-
-type TTestWebhookFormSchema = z.infer<typeof ZTestWebhookFormSchema>;
-
-export const WebhookTestDialog = ({ webhook, children }: WebhookTestDialogProps) => {
-  const { _ } = useLingui();
-  const { toast } = useToast();
-
-  const team = useCurrentTeam();
-
-  const [open, setOpen] = useState(false);
-
-  const { mutateAsync: testWebhook } = trpc.webhook.testWebhook.useMutation();
-
-  const form = useForm<TTestWebhookFormSchema>({
-    resolver: zodResolver(ZTestWebhookFormSchema),
-    defaultValues: {
-      event: webhook.eventTriggers[0],
-    },
-  });
-
-  const onSubmit = async ({ event }: TTestWebhookFormSchema) => {
-    try {
-      await testWebhook({
-        id: webhook.id,
-        event,
-        teamId: team.id,
-      });
-
-      toast({
-        title: _(msg`Test webhook sent`),
-        description: _(msg`The test webhook has been successfully sent to your endpoint.`),
-        duration: 5000,
-      });
-
-      setOpen(false);
-    } catch (error) {
-      toast({
-        title: _(msg`Test webhook failed`),
-        description: _(
-          msg`We encountered an error while sending the test webhook. Please check your endpoint and try again.`,
-        ),
-        variant: 'destructive',
-        duration: 5000,
-      });
-    }
-  };
-
-  return (
-    <Dialog open={open} onOpenChange={(value) => !form.formState.isSubmitting && setOpen(value)}>
-      <DialogTrigger asChild>{children}</DialogTrigger>
-
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>
-            <Trans>Test Webhook</Trans>
-          </DialogTitle>
-
-          <DialogDescription>
-            <Trans>
-              Send a test webhook with sample data to verify your integration is working correctly.
-            </Trans>
-          </DialogDescription>
-        </DialogHeader>
-
-        <Form {...form}>
-          <form onSubmit={form.handleSubmit(onSubmit)}>
-            <fieldset
-              className="flex h-full flex-col space-y-4"
-              disabled={form.formState.isSubmitting}
-            >
-              <FormField
-                control={form.control}
-                name="event"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>
-                      <Trans>Event Type</Trans>
-                    </FormLabel>
-                    <Select onValueChange={field.onChange} value={field.value}>
-                      <FormControl>
-                        <SelectTrigger>
-                          <SelectValue placeholder="Select an event type" />
-                        </SelectTrigger>
-                      </FormControl>
-                      <SelectContent>
-                        {webhook.eventTriggers.map((event) => (
-                          <SelectItem key={event} value={event}>
-                            {toFriendlyWebhookEventName(event)}
-                          </SelectItem>
-                        ))}
-                      </SelectContent>
-                    </Select>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-
-              <div className="rounded-md border p-4">
-                <h4 className="mb-2 text-sm font-medium">
-                  <Trans>Webhook URL</Trans>
-                </h4>
-                <p className="text-muted-foreground break-all text-sm">{webhook.webhookUrl}</p>
-              </div>
-
-              <DialogFooter>
-                <Button type="button" variant="secondary" onClick={() => setOpen(false)}>
-                  <Trans>Cancel</Trans>
-                </Button>
-
-                <Button type="submit" loading={form.formState.isSubmitting}>
-                  <Trans>Send Test Webhook</Trans>
-                </Button>
-              </DialogFooter>
-            </fieldset>
-          </form>
-        </Form>
-      </DialogContent>
-    </Dialog>
-  );
-};

apps/remix/app/components/general/admin-monthly-active-user-charts.tsx

@@ -1,73 +0,0 @@
-'use client';
-
-import { DateTime } from 'luxon';
-import type { TooltipProps } from 'recharts';
-import { Bar, BarChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
-import type { NameType, ValueType } from 'recharts/types/component/DefaultTooltipContent';
-
-import type { GetMonthlyActiveUsersResult } from '@documenso/lib/server-only/admin/get-users-stats';
-
-export type MonthlyActiveUsersChartProps = {
-  className?: string;
-  title: string;
-  cummulative?: boolean;
-  data: GetMonthlyActiveUsersResult;
-};
-
-const CustomTooltip = ({ active, payload, label }: TooltipProps<ValueType, NameType>) => {
-  if (active && payload && payload.length) {
-    return (
-      <div className="z-100 w-60 space-y-1 rounded-md border border-solid bg-white p-2 px-3">
-        <p>{label}</p>
-        <p className="text-documenso">
-          {payload[0].name === 'cume_count' ? 'Cumulative MAU' : 'Monthly Active Users'}:{' '}
-          <span className="text-black">{Number(payload[0].value).toLocaleString('en-US')}</span>
-        </p>
-      </div>
-    );
-  }
-
-  return null;
-};
-
-export const MonthlyActiveUsersChart = ({
-  className,
-  data,
-  title,
-  cummulative = false,
-}: MonthlyActiveUsersChartProps) => {
-  const formattedData = [...data].reverse().map(({ month, count, cume_count }) => {
-    return {
-      month: DateTime.fromFormat(month, 'yyyy-MM').toFormat('MMM yyyy'),
-      count: Number(count),
-      cume_count: Number(cume_count),
-    };
-  });
-
-  return (
-    <div className={className}>
-      <div className="border-border flex flex-1 flex-col justify-center rounded-2xl border p-6 pl-2">
-        <div className="mb-6 flex px-4">
-          <h3 className="text-lg font-semibold">{title}</h3>
-        </div>
-
-        <ResponsiveContainer width="100%" height={400}>
-          <BarChart data={formattedData}>
-            <XAxis dataKey="month" />
-            <YAxis />
-
-            <Tooltip content={<CustomTooltip />} cursor={{ fill: 'hsl(var(--primary) / 10%)' }} />
-
-            <Bar
-              dataKey={cummulative ? 'cume_count' : 'count'}
-              fill="hsl(var(--primary))"
-              radius={[4, 4, 0, 0]}
-              maxBarSize={60}
-              label={cummulative ? 'Cumulative MAU' : 'Monthly Active Users'}
-            />
-          </BarChart>
-        </ResponsiveContainer>
-      </div>
-    </div>
-  );
-};

apps/remix/app/components/general/app-header.tsx

@@ -1,13 +1,11 @@
 import { type HTMLAttributes, useEffect, useState } from 'react';
 
-import { ReadStatus } from '@prisma/client';
 import { InboxIcon, MenuIcon, SearchIcon } from 'lucide-react';
 import { Link, useParams } from 'react-router';
 
 import { useSession } from '@documenso/lib/client-only/providers/session';
 import { isPersonalLayout } from '@documenso/lib/utils/organisations';
 import { getRootHref } from '@documenso/lib/utils/params';
-import { trpc } from '@documenso/trpc/react';
 import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
 
@@ -30,15 +28,6 @@ export const Header = ({ className, ...props }: HeaderProps) => {
   const [isHamburgerMenuOpen, setIsHamburgerMenuOpen] = useState(false);
   const [scrollY, setScrollY] = useState(0);
 
-  const { data: unreadCountData } = trpc.document.inbox.getCount.useQuery(
-    {
-      readStatus: ReadStatus.NOT_OPENED,
-    },
-    {
-      // refetchInterval: 30000, // Refetch every 30 seconds
-    },
-  );
-
   useEffect(() => {
     const onScroll = () => {
       setScrollY(window.scrollY);
@@ -72,11 +61,12 @@ export const Header = ({ className, ...props }: HeaderProps) => {
           <Link to="/inbox" className="relative block h-10 w-10">
             <InboxIcon className="text-muted-foreground hover:text-foreground h-5 w-5 flex-shrink-0 transition-colors" />
 
-            {unreadCountData && unreadCountData.count > 0 && (
-              <span className="bg-primary text-primary-foreground absolute -right-1.5 -top-1.5 flex h-5 w-5 items-center justify-center rounded-full text-[10px] font-semibold">
-                {unreadCountData.count > 99 ? '99+' : unreadCountData.count}
+            {/* Todo: Add counter. */}
+            {/* {unreadCount > 0 && (
+              <span className="bg-muted text-muted-foreground absolute -right-2 -top-2 flex h-5 w-5 items-center justify-center rounded-full text-[10px]">
+                1
               </span>
-            )}
+            )} */}
           </Link>
         </Button>
 

apps/remix/app/components/general/app-nav-mobile.tsx

@@ -2,14 +2,12 @@ import { useMemo } from 'react';
 
 import { useLingui } from '@lingui/react/macro';
 import { Trans } from '@lingui/react/macro';
-import { ReadStatus } from '@prisma/client';
 import { Link } from 'react-router';
 
 import LogoImage from '@documenso/assets/logo.png';
 import { authClient } from '@documenso/auth/client';
 import { useSession } from '@documenso/lib/client-only/providers/session';
 import { isPersonalLayout } from '@documenso/lib/utils/organisations';
-import { trpc } from '@documenso/trpc/react';
 import { Sheet, SheetContent } from '@documenso/ui/primitives/sheet';
 import { ThemeSwitcher } from '@documenso/ui/primitives/theme-switcher';
 
@@ -27,15 +25,6 @@ export const AppNavMobile = ({ isMenuOpen, onMenuOpenChange }: AppNavMobileProps
 
   const currentTeam = useOptionalCurrentTeam();
 
-  const { data: unreadCountData } = trpc.document.inbox.getCount.useQuery(
-    {
-      readStatus: ReadStatus.NOT_OPENED,
-    },
-    {
-      // refetchInterval: 30000, // Refetch every 30 seconds
-    },
-  );
-
   const handleMenuItemClick = () => {
     onMenuOpenChange?.(false);
   };
@@ -63,11 +52,11 @@ export const AppNavMobile = ({ isMenuOpen, onMenuOpenChange }: AppNavMobileProps
     return [
       {
         href: `/t/${teamUrl}/documents`,
-        text: t`Documents`,
+        label: t`Documents`,
       },
       {
         href: `/t/${teamUrl}/templates`,
-        text: t`Templates`,
+        label: t`Templates`,
       },
       {
         href: '/inbox',
@@ -97,16 +86,11 @@ export const AppNavMobile = ({ isMenuOpen, onMenuOpenChange }: AppNavMobileProps
           {menuNavigationLinks.map(({ href, text }) => (
             <Link
               key={href}
-              className="text-foreground hover:text-foreground/80 flex items-center gap-2 text-2xl font-semibold"
+              className="text-foreground hover:text-foreground/80 text-2xl font-semibold"
               to={href}
               onClick={() => handleMenuItemClick()}
             >
               {text}
-              {href === '/inbox' && unreadCountData && unreadCountData.count > 0 && (
-                <span className="bg-primary text-primary-foreground flex h-6 min-w-[1.5rem] items-center justify-center rounded-full px-1.5 text-xs font-semibold">
-                  {unreadCountData.count > 99 ? '99+' : unreadCountData.count}
-                </span>
-              )}
             </Link>
           ))}
 

apps/remix/app/components/general/billing-plans.tsx

@@ -10,9 +10,7 @@ import { useForm } from 'react-hook-form';
 import type { InternalClaimPlans } from '@documenso/ee/server-only/stripe/get-internal-claim-plans';
 import { useIsMounted } from '@documenso/lib/client-only/hooks/use-is-mounted';
 import { useCurrentOrganisation } from '@documenso/lib/client-only/providers/organisation';
-import { useSession } from '@documenso/lib/client-only/providers/session';
 import { INTERNAL_CLAIM_ID } from '@documenso/lib/types/subscription';
-import { isPersonalLayout } from '@documenso/lib/utils/organisations';
 import { trpc } from '@documenso/trpc/react';
 import { Button } from '@documenso/ui/primitives/button';
 import { Card, CardContent, CardTitle } from '@documenso/ui/primitives/card';
@@ -51,12 +49,8 @@ export type BillingPlansProps = {
 export const BillingPlans = ({ plans }: BillingPlansProps) => {
   const isMounted = useIsMounted();
 
-  const { organisations } = useSession();
-
   const [interval, setInterval] = useState<'monthlyPrice' | 'yearlyPrice'>('yearlyPrice');
 
-  const isPersonalLayoutMode = isPersonalLayout(organisations);
-
   const pricesToDisplay = useMemo(() => {
     const prices = [];
 
@@ -132,18 +126,12 @@ export const BillingPlans = ({ plans }: BillingPlansProps) => {
 
                 <div className="flex-1" />
 
-                {isPersonalLayoutMode && price.claim === INTERNAL_CLAIM_ID.INDIVIDUAL ? (
-                  <IndividualPersonalLayoutCheckoutButton priceId={price.id}>
-                    <Trans>Subscribe</Trans>
-                  </IndividualPersonalLayoutCheckoutButton>
-                ) : (
-                  <BillingDialog
-                    priceId={price.id}
-                    planName={price.product.name}
-                    memberCount={price.memberCount}
-                    claim={price.claim}
-                  />
-                )}
+                <BillingDialog
+                  priceId={price.id}
+                  planName={price.product.name}
+                  memberCount={price.memberCount}
+                  claim={price.claim}
+                />
               </CardContent>
             </MotionCard>
           ))}
@@ -327,48 +315,3 @@ const BillingDialog = ({
     </Dialog>
   );
 };
-
-/**
- * Custom checkout button for individual organisations in personal layout mode.
- *
- * This is so they don't create an additional organisation which is not needed since
- * it will clutter up the UI for them with unnecessary organisations.
- */
-export const IndividualPersonalLayoutCheckoutButton = ({
-  priceId,
-  children,
-}: {
-  priceId: string;
-  children: React.ReactNode;
-}) => {
-  const { t } = useLingui();
-  const { toast } = useToast();
-  const { organisations } = useSession();
-
-  const { mutateAsync: createSubscription, isPending } =
-    trpc.billing.subscription.create.useMutation();
-
-  const onSubscribeClick = async () => {
-    try {
-      const createSubscriptionResponse = await createSubscription({
-        organisationId: organisations[0].id,
-        priceId,
-        isPersonalLayoutMode: true,
-      });
-
-      window.location.href = createSubscriptionResponse.redirectUrl;
-    } catch (_err) {
-      toast({
-        title: t`Something went wrong`,
-        description: t`An error occurred while trying to create a checkout session.`,
-        variant: 'destructive',
-      });
-    }
-  };
-
-  return (
-    <Button loading={isPending} onClick={() => void onSubscribeClick()}>
-      {children}
-    </Button>
-  );
-};

apps/remix/app/components/general/document-signing/document-signing-auto-sign.tsx

@@ -10,7 +10,6 @@ import { useRevalidator } from 'react-router';
 import { P, match } from 'ts-pattern';
 
 import { unsafe_useEffectOnce } from '@documenso/lib/client-only/hooks/use-effect-once';
-import { AUTO_SIGNABLE_FIELD_TYPES } from '@documenso/lib/constants/autosign';
 import { DocumentAuth } from '@documenso/lib/types/document-auth';
 import { extractInitials } from '@documenso/lib/utils/recipient-formatter';
 import { trpc } from '@documenso/trpc/react';
@@ -31,6 +30,13 @@ import { DocumentSigningDisclosure } from '~/components/general/document-signing
 import { useRequiredDocumentSigningAuthContext } from './document-signing-auth-provider';
 import { useRequiredDocumentSigningContext } from './document-signing-provider';
 
+const AUTO_SIGNABLE_FIELD_TYPES: string[] = [
+  FieldType.NAME,
+  FieldType.INITIALS,
+  FieldType.EMAIL,
+  FieldType.DATE,
+];
+
 // The action auth types that are not allowed to be auto signed
 //
 // Reasoning: If the action auth is a passkey or 2FA, it's likely that the owner of the document

apps/remix/app/components/general/document-signing/document-signing-checkbox-field.tsx

@@ -17,7 +17,6 @@ import type {
   TSignFieldWithTokenMutationSchema,
 } from '@documenso/trpc/server/field-router/schema';
 import { FieldToolTip } from '@documenso/ui/components/field/field-tooltip';
-import { cn } from '@documenso/ui/lib/utils';
 import { Checkbox } from '@documenso/ui/primitives/checkbox';
 import { checkboxValidationSigns } from '@documenso/ui/primitives/document-flow/field-items-advanced-settings/constants';
 import { Label } from '@documenso/ui/primitives/label';
@@ -277,14 +276,7 @@ export const DocumentSigningCheckboxField = ({
               {validationSign?.label} {checkboxValidationLength}
             </FieldToolTip>
           )}
-          <div
-            className={cn(
-              'z-50 my-0.5 flex gap-1',
-              parsedFieldMeta.direction === 'horizontal'
-                ? 'flex-row flex-wrap'
-                : 'flex-col gap-y-1',
-            )}
-          >
+          <div className="z-50 my-0.5 flex flex-col gap-y-1">
             {values?.map((item: { id: number; value: string; checked: boolean }, index: number) => {
               const itemValue = item.value || `empty-value-${item.id}`;
 
@@ -294,7 +286,6 @@ export const DocumentSigningCheckboxField = ({
                     className="h-3 w-3"
                     id={`checkbox-${field.id}-${item.id}`}
                     checked={checkedValues.includes(itemValue)}
-                    disabled={isReadOnly}
                     onCheckedChange={() => handleCheckboxChange(item.value, item.id)}
                   />
                   {!item.value.includes('empty-value-') && item.value && (
@@ -313,12 +304,7 @@ export const DocumentSigningCheckboxField = ({
       )}
 
       {field.inserted && (
-        <div
-          className={cn(
-            'my-0.5 flex gap-1',
-            parsedFieldMeta.direction === 'horizontal' ? 'flex-row flex-wrap' : 'flex-col gap-y-1',
-          )}
-        >
+        <div className="my-0.5 flex flex-col gap-y-1">
           {values?.map((item: { id: number; value: string; checked: boolean }, index: number) => {
             const itemValue = item.value || `empty-value-${item.id}`;
 
@@ -328,7 +314,7 @@ export const DocumentSigningCheckboxField = ({
                   className="h-3 w-3"
                   id={`checkbox-${field.id}-${item.id}`}
                   checked={parsedCheckedValues.includes(itemValue)}
-                  disabled={isLoading || isReadOnly}
+                  disabled={isLoading}
                   onCheckedChange={() => void handleCheckboxOptionClick(item)}
                 />
                 {!item.value.includes('empty-value-') && item.value && (

apps/remix/app/components/general/document-signing/document-signing-field-container.tsx

@@ -131,12 +131,7 @@ export const DocumentSigningFieldContainer = ({
 
   return (
     <div className={cn('[container-type:size]')}>
-      <FieldRootContainer
-        color={
-          field.fieldMeta?.readOnly ? RECIPIENT_COLOR_STYLES.readOnly : RECIPIENT_COLOR_STYLES.green
-        }
-        field={field}
-      >
+      <FieldRootContainer color={RECIPIENT_COLOR_STYLES.green} field={field}>
         {!field.inserted && !loading && !readOnlyField && (
           <button
             type="submit"
@@ -145,6 +140,14 @@ export const DocumentSigningFieldContainer = ({
           />
         )}
 
+        {readOnlyField && (
+          <button className="bg-background/40 absolute inset-0 z-10 flex h-full w-full items-center justify-center rounded-md text-sm opacity-0 duration-200 group-hover:opacity-100">
+            <span className="bg-foreground/50 text-background rounded-xl p-2">
+              <Trans>Read only field</Trans>
+            </span>
+          </button>
+        )}
+
         {type === 'Checkbox' && field.inserted && !loading && !readOnlyField && (
           <button
             className="absolute -bottom-10 flex items-center justify-evenly rounded-md border bg-gray-900 opacity-0 group-hover:opacity-100"

apps/remix/app/components/general/document-signing/document-signing-fields.tsx

@@ -34,7 +34,7 @@ export const DocumentSigningFieldsInserted = ({
   textAlign = 'left',
 }: DocumentSigningFieldsInsertedProps) => {
   return (
-    <div className="flex h-full w-full items-center overflow-hidden">
+    <div className="flex h-full w-full items-center">
       <p
         className={cn(
           'text-foreground w-full text-left text-[clamp(0.425rem,25cqw,0.825rem)] duration-200',

apps/remix/app/components/general/document-signing/document-signing-number-field.tsx

@@ -54,7 +54,7 @@ export const DocumentSigningNumberField = ({
   const { toast } = useToast();
   const { revalidate } = useRevalidator();
 
-  const { recipient, isAssistantMode } = useDocumentSigningRecipientContext();
+  const { recipient, targetSigner, isAssistantMode } = useDocumentSigningRecipientContext();
 
   const [showNumberModal, setShowNumberModal] = useState(false);
 
@@ -62,8 +62,8 @@ export const DocumentSigningNumberField = ({
   const parsedFieldMeta = safeFieldMeta.success ? safeFieldMeta.data : null;
 
   const defaultValue = parsedFieldMeta?.value;
-  const [localNumber, setLocalNumber] = useState(() =>
-    parsedFieldMeta?.value ? String(parsedFieldMeta.value) : '',
+  const [localNumber, setLocalNumber] = useState(
+    parsedFieldMeta?.value ? String(parsedFieldMeta.value) : '0',
   );
 
   const initialErrors: ValidationErrors = {
@@ -213,13 +213,16 @@ export const DocumentSigningNumberField = ({
 
   useEffect(() => {
     if (!showNumberModal) {
-      setLocalNumber(parsedFieldMeta?.value ? String(parsedFieldMeta.value) : '');
+      setLocalNumber(parsedFieldMeta?.value ? String(parsedFieldMeta.value) : '0');
       setErrors(initialErrors);
     }
   }, [showNumberModal]);
 
   useEffect(() => {
-    if (!field.inserted && defaultValue) {
+    if (
+      (!field.inserted && defaultValue && localNumber) ||
+      (!field.inserted && parsedFieldMeta?.readOnly && defaultValue)
+    ) {
       void executeActionAuthProcedure({
         onReauthFormSubmit: async (authOptions) => await onSign(authOptions),
         actionTarget: field.type,
@@ -315,7 +318,7 @@ export const DocumentSigningNumberField = ({
                 variant="secondary"
                 onClick={() => {
                   setShowNumberModal(false);
-                  setLocalNumber(parsedFieldMeta?.value ? String(parsedFieldMeta.value) : '');
+                  setLocalNumber('');
                 }}
               >
                 <Trans>Cancel</Trans>

apps/remix/app/components/general/document-signing/document-signing-page-view.tsx

@@ -72,11 +72,9 @@ export const DocumentSigningPageView = ({
   }
 
   const selectedSigner = allRecipients?.find((r) => r.id === selectedSignerId);
-  const targetSigner =
-    recipient.role === RecipientRole.ASSISTANT && selectedSigner ? selectedSigner : null;
 
   return (
-    <DocumentSigningRecipientProvider recipient={recipient} targetSigner={targetSigner}>
+    <DocumentSigningRecipientProvider recipient={recipient} targetSigner={selectedSigner ?? null}>
       <div className="mx-auto w-full max-w-screen-xl">
         <h1
           className="mt-4 block max-w-[20rem] truncate text-2xl font-semibold md:max-w-[30rem] md:text-3xl"

apps/remix/app/components/general/document-signing/document-signing-radio-field.tsx

@@ -41,7 +41,6 @@ export const DocumentSigningRadioField = ({
   const { recipient, targetSigner, isAssistantMode } = useDocumentSigningRecipientContext();
 
   const parsedFieldMeta = ZRadioFieldMeta.parse(field.fieldMeta);
-  const isReadOnly = parsedFieldMeta.readOnly;
   const values = parsedFieldMeta.values?.map((item) => ({
     ...item,
     value: item.value.length > 0 ? item.value : `empty-value-${item.id}`,
@@ -165,7 +164,6 @@ export const DocumentSigningRadioField = ({
                 value={item.value}
                 id={`option-${field.id}-${item.id}`}
                 checked={item.checked}
-                disabled={isReadOnly}
               />
               {!item.value.includes('empty-value-') && item.value && (
                 <Label
@@ -189,7 +187,6 @@ export const DocumentSigningRadioField = ({
                 value={item.value}
                 id={`option-${field.id}-${item.id}`}
                 checked={item.value === field.customText}
-                disabled={isReadOnly}
               />
               {!item.value.includes('empty-value-') && item.value && (
                 <Label

apps/remix/app/components/general/document-signing/document-signing-recipient-provider.tsx

@@ -38,6 +38,11 @@ export const DocumentSigningRecipientProvider = ({
   recipient,
   targetSigner = null,
 }: DocumentSigningRecipientProviderProps) => {
+  // console.log({
+  //   recipient,
+  //   targetSigner,
+  //   isAssistantMode: !!targetSigner,
+  // });
   return (
     <DocumentSigningRecipientContext.Provider
       value={{

apps/remix/app/components/general/document-signing/document-signing-text-field.tsx

@@ -262,7 +262,9 @@ export const DocumentSigningTextField = ({
 
       {field.inserted && (
         <DocumentSigningFieldsInserted textAlign={parsedFieldMeta?.textAlign}>
-          {field.customText}
+          {field.customText.length < 20
+            ? field.customText
+            : field.customText.substring(0, 20) + '...'}
         </DocumentSigningFieldsInserted>
       )}
 

apps/remix/app/components/general/document/document-edit-form.tsx

@@ -4,7 +4,6 @@ import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { DocumentDistributionMethod, DocumentStatus } from '@prisma/client';
 import { useNavigate, useSearchParams } from 'react-router';
-import { z } from 'zod';
 
 import { DocumentSignatureType } from '@documenso/lib/constants/document';
 import { isValidLanguageCode } from '@documenso/lib/constants/i18n';
@@ -13,7 +12,6 @@ import {
   SKIP_QUERY_BATCH_META,
 } from '@documenso/lib/constants/trpc';
 import type { TDocument } from '@documenso/lib/types/document';
-import { ZDocumentAccessAuthTypesSchema } from '@documenso/lib/types/document-auth';
 import { trpc } from '@documenso/trpc/react';
 import { cn } from '@documenso/ui/lib/utils';
 import { Card, CardContent } from '@documenso/ui/primitives/card';
@@ -177,17 +175,13 @@ export const DocumentEditForm = ({
     try {
       const { timezone, dateFormat, redirectUrl, language, signatureTypes } = data.meta;
 
-      const parsedGlobalAccessAuth = z
-        .array(ZDocumentAccessAuthTypesSchema)
-        .safeParse(data.globalAccessAuth);
-
       await updateDocument({
         documentId: document.id,
         data: {
           title: data.title,
           externalId: data.externalId || null,
           visibility: data.visibility,
-          globalAccessAuth: parsedGlobalAccessAuth.success ? parsedGlobalAccessAuth.data : [],
+          globalAccessAuth: data.globalAccessAuth ?? [],
           globalActionAuth: data.globalActionAuth ?? [],
         },
         meta: {

apps/remix/app/components/general/document/document-history-sheet-changes.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+
+import { Badge } from '@documenso/ui/primitives/badge';
+
+export type DocumentHistorySheetChangesProps = {
+  values: {
+    key: string | React.ReactNode;
+    value: string | React.ReactNode;
+  }[];
+};
+
+export const DocumentHistorySheetChanges = ({ values }: DocumentHistorySheetChangesProps) => {
+  return (
+    <Badge
+      className="text-muted-foreground mt-3 block w-full space-y-0.5 text-xs"
+      variant="neutral"
+    >
+      {values.map(({ key, value }, i) => (
+        <p key={typeof key === 'string' ? key : i}>
+          <span>{key}: </span>
+          <span className="font-normal">{value}</span>
+        </p>
+      ))}
+    </Badge>
+  );
+};

apps/remix/app/components/general/document/document-history-sheet.tsx

@@ -0,0 +1,410 @@
+import { useMemo, useState } from 'react';
+
+import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
+import { ArrowRightIcon, Loader } from 'lucide-react';
+import { DateTime } from 'luxon';
+import { match } from 'ts-pattern';
+import { UAParser } from 'ua-parser-js';
+
+import { DOCUMENT_AUDIT_LOG_EMAIL_FORMAT } from '@documenso/lib/constants/document-audit-logs';
+import { DOCUMENT_AUTH_TYPES } from '@documenso/lib/constants/document-auth';
+import { DOCUMENT_AUDIT_LOG_TYPE } from '@documenso/lib/types/document-audit-logs';
+import { formatDocumentAuditLogAction } from '@documenso/lib/utils/document-audit-logs';
+import { trpc } from '@documenso/trpc/react';
+import { cn } from '@documenso/ui/lib/utils';
+import { Avatar, AvatarFallback } from '@documenso/ui/primitives/avatar';
+import { Badge } from '@documenso/ui/primitives/badge';
+import { Button } from '@documenso/ui/primitives/button';
+import { Sheet, SheetContent, SheetTrigger } from '@documenso/ui/primitives/sheet';
+
+import { DocumentHistorySheetChanges } from './document-history-sheet-changes';
+
+export type DocumentHistorySheetProps = {
+  documentId: number;
+  userId: number;
+  isMenuOpen?: boolean;
+  onMenuOpenChange?: (_value: boolean) => void;
+  children?: React.ReactNode;
+};
+
+export const DocumentHistorySheet = ({
+  documentId,
+  userId,
+  isMenuOpen,
+  onMenuOpenChange,
+  children,
+}: DocumentHistorySheetProps) => {
+  const { _, i18n } = useLingui();
+
+  const [isUserDetailsVisible, setIsUserDetailsVisible] = useState(false);
+
+  const {
+    data,
+    isLoading,
+    isLoadingError,
+    refetch,
+    hasNextPage,
+    fetchNextPage,
+    isFetchingNextPage,
+  } = trpc.document.findDocumentAuditLogs.useInfiniteQuery(
+    {
+      documentId,
+    },
+    {
+      getNextPageParam: (lastPage) => lastPage.nextCursor,
+      placeholderData: (previousData) => previousData,
+    },
+  );
+
+  const documentAuditLogs = useMemo(() => (data?.pages ?? []).flatMap((page) => page.data), [data]);
+
+  const extractBrowser = (userAgent?: string | null) => {
+    if (!userAgent) {
+      return 'Unknown';
+    }
+
+    const parser = new UAParser(userAgent);
+
+    parser.setUA(userAgent);
+
+    const result = parser.getResult();
+
+    return result.browser.name;
+  };
+
+  /**
+   * Applies the following formatting for a given text:
+   * - Uppercase first lower, lowercase rest
+   * - Replace _ with spaces
+   *
+   * @param text The text to format
+   * @returns The formatted text
+   */
+  const formatGenericText = (text?: string | string[] | null): string => {
+    if (!text) {
+      return '';
+    }
+
+    if (Array.isArray(text)) {
+      return text.map((t) => formatGenericText(t)).join(', ');
+    }
+
+    return (text.charAt(0).toUpperCase() + text.slice(1).toLowerCase()).replaceAll('_', ' ');
+  };
+
+  return (
+    <Sheet open={isMenuOpen} onOpenChange={onMenuOpenChange}>
+      {children && <SheetTrigger asChild>{children}</SheetTrigger>}
+
+      <SheetContent
+        sheetClass="backdrop-blur-none"
+        className="flex w-full max-w-[500px] flex-col overflow-y-auto p-0"
+      >
+        <div className="text-foreground px-6 pt-6">
+          <h1 className="text-lg font-medium">
+            <Trans>Document history</Trans>
+          </h1>
+          <button
+            className="text-muted-foreground text-sm"
+            onClick={() => setIsUserDetailsVisible(!isUserDetailsVisible)}
+          >
+            {isUserDetailsVisible ? (
+              <Trans>Hide additional information</Trans>
+            ) : (
+              <Trans>Show additional information</Trans>
+            )}
+          </button>
+        </div>
+
+        {isLoading && (
+          <div className="flex h-full items-center justify-center">
+            <Loader className="text-muted-foreground h-6 w-6 animate-spin" />
+          </div>
+        )}
+
+        {isLoadingError && (
+          <div className="flex h-full flex-col items-center justify-center">
+            <p className="text-foreground/80 text-sm">
+              <Trans>Unable to load document history</Trans>
+            </p>
+            <button
+              onClick={async () => refetch()}
+              className="text-foreground/70 hover:text-muted-foreground mt-2 text-sm"
+            >
+              <Trans>Click here to retry</Trans>
+            </button>
+          </div>
+        )}
+
+        {data && (
+          <ul
+            className={cn('divide-y border-t', {
+              'mb-4 border-b': !hasNextPage,
+            })}
+          >
+            {documentAuditLogs.map((auditLog) => (
+              <li className="px-4 py-2.5" key={auditLog.id}>
+                <div className="flex flex-row items-center">
+                  <Avatar className="mr-2 h-9 w-9">
+                    <AvatarFallback className="text-xs text-gray-400">
+                      {(auditLog?.email ?? auditLog?.name ?? '?').slice(0, 1).toUpperCase()}
+                    </AvatarFallback>
+                  </Avatar>
+
+                  <div>
+                    <p className="text-foreground text-xs font-bold">
+                      {formatDocumentAuditLogAction(_, auditLog, userId).description}
+                    </p>
+                    <p className="text-foreground/50 text-xs">
+                      {DateTime.fromJSDate(auditLog.createdAt)
+                        .setLocale(i18n.locales?.[0] || i18n.locale)
+                        .toFormat('d MMM, yyyy HH:MM a')}
+                    </p>
+                  </div>
+                </div>
+
+                {match(auditLog)
+                  .with(
+                    { type: DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_CREATED },
+                    { type: DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_COMPLETED },
+                    { type: DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_DELETED },
+                    { type: DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_OPENED },
+                    { type: DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_RECIPIENT_COMPLETED },
+                    { type: DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_RECIPIENT_REJECTED },
+                    { type: DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_SENT },
+                    { type: DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_MOVED_TO_TEAM },
+                    () => null,
+                  )
+                  .with(
+                    { type: DOCUMENT_AUDIT_LOG_TYPE.RECIPIENT_CREATED },
+                    { type: DOCUMENT_AUDIT_LOG_TYPE.RECIPIENT_DELETED },
+                    ({ data }) => {
+                      const values = [
+                        {
+                          key: 'Email',
+                          value: data.recipientEmail,
+                        },
+                        {
+                          key: 'Role',
+                          value: formatGenericText(data.recipientRole),
+                        },
+                      ];
+
+                      // Insert the name to the start of the array if available.
+                      if (data.recipientName) {
+                        values.unshift({
+                          key: 'Name',
+                          value: data.recipientName,
+                        });
+                      }
+
+                      return <DocumentHistorySheetChanges values={values} />;
+                    },
+                  )
+                  .with({ type: DOCUMENT_AUDIT_LOG_TYPE.RECIPIENT_UPDATED }, ({ data }) => {
+                    if (data.changes.length === 0) {
+                      return null;
+                    }
+
+                    return (
+                      <DocumentHistorySheetChanges
+                        values={data.changes.map(({ type, from, to }) => ({
+                          key: formatGenericText(type),
+                          value: (
+                            <span className="inline-flex flex-row items-center">
+                              <span>{type === 'ROLE' ? formatGenericText(from) : from}</span>
+                              <ArrowRightIcon className="h-4 w-4" />
+                              <span>{type === 'ROLE' ? formatGenericText(to) : to}</span>
+                            </span>
+                          ),
+                        }))}
+                      />
+                    );
+                  })
+                  .with(
+                    { type: DOCUMENT_AUDIT_LOG_TYPE.FIELD_CREATED },
+                    { type: DOCUMENT_AUDIT_LOG_TYPE.FIELD_DELETED },
+                    { type: DOCUMENT_AUDIT_LOG_TYPE.FIELD_UPDATED },
+                    ({ data }) => (
+                      <DocumentHistorySheetChanges
+                        values={[
+                          {
+                            key: 'Field',
+                            value: formatGenericText(data.fieldType),
+                          },
+                          {
+                            key: 'Recipient',
+                            value: formatGenericText(data.fieldRecipientEmail),
+                          },
+                        ]}
+                      />
+                    ),
+                  )
+                  .with(
+                    { type: DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_GLOBAL_AUTH_ACCESS_UPDATED },
+                    { type: DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_GLOBAL_AUTH_ACTION_UPDATED },
+                    ({ data }) => (
+                      <DocumentHistorySheetChanges
+                        values={[
+                          {
+                            key: 'Old',
+                            value: Array.isArray(data.from)
+                              ? data.from
+                                  .map((f) => DOCUMENT_AUTH_TYPES[f]?.value || 'None')
+                                  .join(', ')
+                              : DOCUMENT_AUTH_TYPES[data.from || '']?.value || 'None',
+                          },
+                          {
+                            key: 'New',
+                            value: Array.isArray(data.to)
+                              ? data.to
+                                  .map((f) => DOCUMENT_AUTH_TYPES[f]?.value || 'None')
+                                  .join(', ')
+                              : DOCUMENT_AUTH_TYPES[data.to || '']?.value || 'None',
+                          },
+                        ]}
+                      />
+                    ),
+                  )
+                  .with({ type: DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_META_UPDATED }, ({ data }) => {
+                    if (data.changes.length === 0) {
+                      return null;
+                    }
+
+                    return (
+                      <DocumentHistorySheetChanges
+                        values={data.changes.map((change) => ({
+                          key: formatGenericText(change.type),
+                          value: change.type === 'PASSWORD' ? '*********' : change.to,
+                        }))}
+                      />
+                    );
+                  })
+                  .with({ type: DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_TITLE_UPDATED }, ({ data }) => (
+                    <DocumentHistorySheetChanges
+                      values={[
+                        {
+                          key: 'Old',
+                          value: data.from,
+                        },
+                        {
+                          key: 'New',
+                          value: data.to,
+                        },
+                      ]}
+                    />
+                  ))
+                  .with(
+                    { type: DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_EXTERNAL_ID_UPDATED },
+                    ({ data }) => (
+                      <DocumentHistorySheetChanges
+                        values={[
+                          {
+                            key: 'Old',
+                            value: data.from,
+                          },
+                          {
+                            key: 'New',
+                            value: data.to,
+                          },
+                        ]}
+                      />
+                    ),
+                  )
+                  .with({ type: DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_FIELD_INSERTED }, ({ data }) => (
+                    <DocumentHistorySheetChanges
+                      values={[
+                        {
+                          key: 'Field inserted',
+                          value: formatGenericText(data.field.type),
+                        },
+                      ]}
+                    />
+                  ))
+                  .with({ type: DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_FIELD_UNINSERTED }, ({ data }) => (
+                    <DocumentHistorySheetChanges
+                      values={[
+                        {
+                          key: 'Field uninserted',
+                          value: formatGenericText(data.field),
+                        },
+                      ]}
+                    />
+                  ))
+                  .with({ type: DOCUMENT_AUDIT_LOG_TYPE.EMAIL_SENT }, ({ data }) => (
+                    <DocumentHistorySheetChanges
+                      values={[
+                        {
+                          key: 'Type',
+                          value: DOCUMENT_AUDIT_LOG_EMAIL_FORMAT[data.emailType].description,
+                        },
+                        {
+                          key: 'Sent to',
+                          value: data.recipientEmail,
+                        },
+                      ]}
+                    />
+                  ))
+                  .with(
+                    { type: DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_VISIBILITY_UPDATED },
+                    ({ data }) => (
+                      <DocumentHistorySheetChanges
+                        values={[
+                          {
+                            key: 'Old',
+                            value: data.from,
+                          },
+                          {
+                            key: 'New',
+                            value: data.to,
+                          },
+                        ]}
+                      />
+                    ),
+                  )
+                  .with({ type: DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_FIELD_PREFILLED }, ({ data }) => (
+                    <DocumentHistorySheetChanges
+                      values={[
+                        {
+                          key: 'Field prefilled',
+                          value: formatGenericText(data.field.type),
+                        },
+                      ]}
+                    />
+                  ))
+                  .exhaustive()}
+
+                {isUserDetailsVisible && (
+                  <>
+                    <div className="mb-1 mt-2 flex flex-row space-x-2">
+                      <Badge variant="neutral" className="text-muted-foreground">
+                        IP: {auditLog.ipAddress ?? 'Unknown'}
+                      </Badge>
+
+                      <Badge variant="neutral" className="text-muted-foreground">
+                        Browser: {extractBrowser(auditLog.userAgent)}
+                      </Badge>
+                    </div>
+                  </>
+                )}
+              </li>
+            ))}
+
+            {hasNextPage && (
+              <div className="flex items-center justify-center py-4">
+                <Button
+                  variant="outline"
+                  loading={isFetchingNextPage}
+                  onClick={async () => fetchNextPage()}
+                >
+                  Show more
+                </Button>
+              </div>
+            )}
+          </ul>
+        )}
+      </SheetContent>
+    </Sheet>
+  );
+};

apps/remix/app/components/general/document/document-processing-poll.tsx

@@ -0,0 +1,54 @@
+import { useEffect } from 'react';
+
+import type { DocumentStatus, RecipientRole, SigningStatus } from '@prisma/client';
+import { useRevalidator } from 'react-router';
+
+import { isDocumentBeingProcessed } from '@documenso/lib/utils/document';
+
+type DocumentType = {
+  id: number;
+  status: DocumentStatus;
+  deletedAt: Date | null;
+  recipients: Array<{
+    role: RecipientRole;
+    signingStatus: SigningStatus;
+  }>;
+};
+
+export type DocumentProcessingPollProps = {
+  documents?: DocumentType[] | DocumentType;
+};
+
+export const DocumentProcessingPoll = ({ documents }: DocumentProcessingPollProps) => {
+  const { revalidate } = useRevalidator();
+
+  useEffect(() => {
+    if (!documents) {
+      return;
+    }
+
+    const documentArray = Array.isArray(documents) ? documents : [documents];
+
+    if (documentArray.length === 0) {
+      return;
+    }
+
+    const hasProcessingDocuments = documentArray.some((document) =>
+      isDocumentBeingProcessed(document),
+    );
+
+    if (!hasProcessingDocuments) {
+      return;
+    }
+
+    const interval = setInterval(() => {
+      if (window.document.hasFocus()) {
+        void revalidate();
+      }
+    }, 3000);
+
+    return () => clearInterval(interval);
+  }, [documents, revalidate]);
+
+  return null;
+};

apps/remix/app/components/general/document/document-search.tsx

@@ -30,12 +30,8 @@ export const DocumentSearch = ({ initialValue = '' }: { initialValue?: string })
   );
 
   useEffect(() => {
-    const currentQueryParam = searchParams.get('query') || '';
-
-    if (debouncedSearchTerm !== currentQueryParam) {
-      handleSearch(debouncedSearchTerm);
-    }
-  }, [debouncedSearchTerm, searchParams]);
+    handleSearch(searchTerm);
+  }, [debouncedSearchTerm]);
 
   return (
     <Input

apps/remix/app/components/general/document/document-status.tsx

@@ -3,7 +3,7 @@ import type { HTMLAttributes } from 'react';
 import type { MessageDescriptor } from '@lingui/core';
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
-import { CheckCircle2, Clock, File, XCircle } from 'lucide-react';
+import { CheckCircle2, Clock, File, Loader2, XCircle } from 'lucide-react';
 import type { LucideIcon } from 'lucide-react/dist/lucide-react';
 
 import type { ExtendedDocumentStatus } from '@documenso/prisma/types/extended-document-status';
@@ -15,6 +15,7 @@ type FriendlyStatus = {
   labelExtended: MessageDescriptor;
   icon?: LucideIcon;
   color: string;
+  animate?: boolean;
 };
 
 export const FRIENDLY_STATUS_MAP: Record<ExtendedDocumentStatus, FriendlyStatus> = {
@@ -55,20 +56,31 @@ export const FRIENDLY_STATUS_MAP: Record<ExtendedDocumentStatus, FriendlyStatus>
   },
 };
 
+const PROCESSING_STATUS: FriendlyStatus = {
+  label: msg`Processing`,
+  labelExtended: msg`Document processing`,
+  icon: Loader2,
+  color: 'text-blue-600 dark:text-blue-300',
+  animate: true,
+};
+
 export type DocumentStatusProps = HTMLAttributes<HTMLSpanElement> & {
   status: ExtendedDocumentStatus;
   inheritColor?: boolean;
+  isProcessing?: boolean;
 };
 
 export const DocumentStatus = ({
   className,
   status,
   inheritColor,
+  isProcessing,
   ...props
 }: DocumentStatusProps) => {
   const { _ } = useLingui();
 
-  const { label, icon: Icon, color } = FRIENDLY_STATUS_MAP[status];
+  const statusConfig = isProcessing ? PROCESSING_STATUS : FRIENDLY_STATUS_MAP[status];
+  const { label, icon: Icon, color, animate } = statusConfig;
 
   return (
     <span className={cn('flex items-center', className)} {...props}>
@@ -76,6 +88,7 @@ export const DocumentStatus = ({
         <Icon
           className={cn('mr-2 inline-block h-4 w-4', {
             [color]: !inheritColor,
+            'animate-spin': animate,
           })}
         />
       )}

apps/remix/app/components/general/folder/folder-card.tsx

@@ -1,32 +1,19 @@
-import { Plural, Trans } from '@lingui/react/macro';
-import { FolderType } from '@prisma/client';
-import {
-  ArrowRightIcon,
-  FolderIcon,
-  FolderPlusIcon,
-  MoreVerticalIcon,
-  PinIcon,
-  SettingsIcon,
-  TrashIcon,
-} from 'lucide-react';
-import { Link } from 'react-router';
+import { FolderIcon, PinIcon } from 'lucide-react';
 
-import { formatDocumentsPath, formatTemplatesPath } from '@documenso/lib/utils/teams';
+import { FolderType } from '@documenso/lib/types/folder-type';
+import { formatFolderCount } from '@documenso/lib/utils/format-folder-count';
 import { type TFolderWithSubfolders } from '@documenso/trpc/server/folder-router/schema';
 import { Button } from '@documenso/ui/primitives/button';
-import { Card, CardContent } from '@documenso/ui/primitives/card';
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
-  DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from '@documenso/ui/primitives/dropdown-menu';
 
-import { useCurrentTeam } from '~/providers/team';
-
 export type FolderCardProps = {
   folder: TFolderWithSubfolders;
+  onNavigate: (folderId: string) => void;
   onMove: (folder: TFolderWithSubfolders) => void;
   onPin: (folderId: string) => void;
   onUnpin: (folderId: string) => void;
@@ -36,132 +23,66 @@ export type FolderCardProps = {
 
 export const FolderCard = ({
   folder,
+  onNavigate,
   onMove,
   onPin,
   onUnpin,
   onSettings,
   onDelete,
 }: FolderCardProps) => {
-  const team = useCurrentTeam();
-
-  const formatPath = () => {
-    const rootPath =
-      folder.type === FolderType.DOCUMENT
-        ? formatDocumentsPath(team.url)
-        : formatTemplatesPath(team.url);
-
-    return `${rootPath}/f/${folder.id}`;
-  };
-
   return (
-    <Link to={formatPath()} key={folder.id}>
-      <Card className="hover:bg-muted/50 border-border h-full border transition-all">
-        <CardContent className="p-4">
-          <div className="flex min-w-0 items-center gap-3">
-            <FolderIcon className="text-documenso h-6 w-6 flex-shrink-0" />
-
-            <div className="flex w-full min-w-0 items-center justify-between">
-              <div className="min-w-0 flex-1">
-                <h3 className="flex min-w-0 items-center gap-2 font-medium">
-                  <span className="truncate">{folder.name}</span>
-                  {folder.pinned && <PinIcon className="text-documenso h-3 w-3 flex-shrink-0" />}
-                </h3>
-
-                <div className="text-muted-foreground mt-1 flex space-x-2 truncate text-xs">
-                  <span>
-                    {folder.type === FolderType.TEMPLATE ? (
-                      <Plural
-                        value={folder._count.templates}
-                        one={<Trans># template</Trans>}
-                        other={<Trans># templates</Trans>}
-                      />
-                    ) : (
-                      <Plural
-                        value={folder._count.documents}
-                        one={<Trans># document</Trans>}
-                        other={<Trans># documents</Trans>}
-                      />
-                    )}
-                  </span>
-                  <span>•</span>
-                  <span>
-                    <Plural
-                      value={folder._count.subfolders}
-                      one={<Trans># folder</Trans>}
-                      other={<Trans># folders</Trans>}
-                    />
-                  </span>
-                </div>
-              </div>
-
-              <DropdownMenu>
-                <DropdownMenuTrigger asChild>
-                  <Button
-                    variant="ghost"
-                    size="sm"
-                    className="h-8 w-8 p-0"
-                    data-testid="folder-card-more-button"
-                  >
-                    <MoreVerticalIcon className="h-4 w-4" />
-                  </Button>
-                </DropdownMenuTrigger>
-
-                <DropdownMenuContent onClick={(e) => e.stopPropagation()} align="end">
-                  <DropdownMenuItem onClick={() => onMove(folder)}>
-                    <ArrowRightIcon className="mr-2 h-4 w-4" />
-                    <Trans>Move</Trans>
-                  </DropdownMenuItem>
-
-                  <DropdownMenuItem
-                    onClick={() => (folder.pinned ? onUnpin(folder.id) : onPin(folder.id))}
-                  >
-                    <PinIcon className="mr-2 h-4 w-4" />
-                    {folder.pinned ? <Trans>Unpin</Trans> : <Trans>Pin</Trans>}
-                  </DropdownMenuItem>
-
-                  <DropdownMenuItem onClick={() => onSettings(folder)}>
-                    <SettingsIcon className="mr-2 h-4 w-4" />
-                    <Trans>Settings</Trans>
-                  </DropdownMenuItem>
-
-                  <DropdownMenuSeparator />
-
-                  <DropdownMenuItem onClick={() => onDelete(folder)}>
-                    <TrashIcon className="mr-2 h-4 w-4" />
-                    <Trans>Delete</Trans>
-                  </DropdownMenuItem>
-                </DropdownMenuContent>
-              </DropdownMenu>
-            </div>
-          </div>
-        </CardContent>
-      </Card>
-    </Link>
-  );
-};
-
-export const FolderCardEmpty = ({ type }: { type: FolderType }) => {
-  return (
-    <Card className="hover:bg-muted/50 border-border h-full border transition-all">
-      <CardContent className="p-4">
-        <div className="flex items-center gap-3">
-          <FolderPlusIcon className="text-muted-foreground/60 h-6 w-6" />
-
+    <div
+      key={folder.id}
+      className="border-border hover:border-muted-foreground/40 group relative flex flex-col rounded-lg border p-4 transition-all hover:shadow-sm"
+    >
+      <div className="flex items-start justify-between">
+        <button
+          className="flex items-center space-x-2 text-left"
+          onClick={() => onNavigate(folder.id)}
+        >
+          <FolderIcon className="text-documenso h-6 w-6" />
           <div>
-            <h3 className="text-muted-foreground flex items-center gap-2 font-medium">
-              <Trans>Create folder</Trans>
-            </h3>
-
-            <div className="text-muted-foreground/60 mt-1 flex space-x-2 truncate text-xs">
-              {type === FolderType.DOCUMENT ? (
-                <Trans>Organise your documents</Trans>
-              ) : (
-                <Trans>Organise your templates</Trans>
-              )}
+            <div className="flex items-center gap-2">
+              <h3 className="font-medium">{folder.name}</h3>
+              {folder.pinned && <PinIcon className="text-documenso h-3 w-3" />}
+            </div>
+            <div className="mt-1 flex space-x-2 text-xs text-gray-500">
+              <span>
+                {formatFolderCount(
+                  folder.type === FolderType.TEMPLATE
+                    ? folder._count.templates
+                    : folder._count.documents,
+                  folder.type === FolderType.TEMPLATE ? 'template' : 'document',
+                  folder.type === FolderType.TEMPLATE ? 'templates' : 'documents',
+                )}
+              </span>
+              <span>•</span>
+              <span>{formatFolderCount(folder._count.subfolders, 'folder', 'folders')}</span>
             </div>
           </div>
-        </div>
-      </CardContent>
-    </Card>
+        </button>
+
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button variant="ghost" size="sm" className="opacity-0 group-hover:opacity-100">
+              •••
+            </Button>
+          </DropdownMenuTrigger>
+
+          <DropdownMenuContent align="end">
+            <DropdownMenuItem onClick={() => onMove(folder)}>Move</DropdownMenuItem>
+            {folder.pinned ? (
+              <DropdownMenuItem onClick={() => onUnpin(folder.id)}>Unpin</DropdownMenuItem>
+            ) : (
+              <DropdownMenuItem onClick={() => onPin(folder.id)}>Pin</DropdownMenuItem>
+            )}
+            <DropdownMenuItem onClick={() => onSettings(folder)}>Settings</DropdownMenuItem>
+            <DropdownMenuItem className="text-red-500" onClick={() => onDelete(folder)}>
+              Delete
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+    </div>
   );
 };

apps/remix/app/components/general/folder/folder-grid.tsx

@@ -1,249 +0,0 @@
-import { useState } from 'react';
-
-import { Trans } from '@lingui/react/macro';
-import { FolderType } from '@prisma/client';
-import { FolderIcon, HomeIcon } from 'lucide-react';
-import { Link } from 'react-router';
-
-import { formatDocumentsPath, formatTemplatesPath } from '@documenso/lib/utils/teams';
-import { trpc } from '@documenso/trpc/react';
-import { type TFolderWithSubfolders } from '@documenso/trpc/server/folder-router/schema';
-import { Skeleton } from '@documenso/ui/primitives/skeleton';
-
-import { FolderCreateDialog } from '~/components/dialogs/folder-create-dialog';
-import { FolderDeleteDialog } from '~/components/dialogs/folder-delete-dialog';
-import { FolderMoveDialog } from '~/components/dialogs/folder-move-dialog';
-import { FolderUpdateDialog } from '~/components/dialogs/folder-update-dialog';
-import { TemplateCreateDialog } from '~/components/dialogs/template-create-dialog';
-import { DocumentUploadDropzone } from '~/components/general/document/document-upload';
-import { FolderCard, FolderCardEmpty } from '~/components/general/folder/folder-card';
-import { useCurrentTeam } from '~/providers/team';
-
-export type FolderGridProps = {
-  type: FolderType;
-  parentId: string | null;
-};
-
-export const FolderGrid = ({ type, parentId }: FolderGridProps) => {
-  const team = useCurrentTeam();
-
-  const [isMovingFolder, setIsMovingFolder] = useState(false);
-  const [folderToMove, setFolderToMove] = useState<TFolderWithSubfolders | null>(null);
-  const [isDeletingFolder, setIsDeletingFolder] = useState(false);
-  const [folderToDelete, setFolderToDelete] = useState<TFolderWithSubfolders | null>(null);
-  const [isSettingsFolderOpen, setIsSettingsFolderOpen] = useState(false);
-  const [folderToSettings, setFolderToSettings] = useState<TFolderWithSubfolders | null>(null);
-
-  const { mutateAsync: pinFolder } = trpc.folder.pinFolder.useMutation();
-  const { mutateAsync: unpinFolder } = trpc.folder.unpinFolder.useMutation();
-
-  const { data: foldersData, isPending } = trpc.folder.getFolders.useQuery({
-    type,
-    parentId,
-  });
-
-  const formatBreadCrumbPath = (folderId: string) => {
-    const rootPath =
-      type === FolderType.DOCUMENT ? formatDocumentsPath(team.url) : formatTemplatesPath(team.url);
-
-    return `${rootPath}/f/${folderId}`;
-  };
-
-  const formatViewAllFoldersPath = () => {
-    const rootPath =
-      type === FolderType.DOCUMENT ? formatDocumentsPath(team.url) : formatTemplatesPath(team.url);
-
-    return `${rootPath}/folders`;
-  };
-
-  const formatRootPath = () => {
-    return type === FolderType.DOCUMENT
-      ? formatDocumentsPath(team.url)
-      : formatTemplatesPath(team.url);
-  };
-
-  const pinnedFolders = foldersData?.folders.filter((folder) => folder.pinned) || [];
-  const unpinnedFolders = foldersData?.folders.filter((folder) => !folder.pinned) || [];
-
-  return (
-    <div>
-      <div className="mb-4 flex flex-col gap-4 md:flex-row md:items-end md:justify-between">
-        <div
-          className="text-muted-foreground hover:text-muted-foreground/80 flex flex-1 items-center text-sm font-medium"
-          data-testid="folder-grid-breadcrumbs"
-        >
-          <Link to={formatRootPath()} className="flex items-center">
-            <HomeIcon className="mr-2 h-4 w-4" />
-            <Trans>Home</Trans>
-          </Link>
-
-          {isPending && parentId ? (
-            <div className="flex items-center">
-              <Skeleton className="mx-3 h-4 w-1 rotate-12" />
-
-              <Skeleton className="h-4 w-20" />
-            </div>
-          ) : (
-            foldersData?.breadcrumbs.map((folder) => (
-              <div key={folder.id} className="flex items-center">
-                <span className="px-3">/</span>
-                <Link to={formatBreadCrumbPath(folder.id)} className="flex items-center">
-                  <FolderIcon className="mr-2 h-4 w-4" />
-                  <span>{folder.name}</span>
-                </Link>
-              </div>
-            ))
-          )}
-        </div>
-
-        <div className="flex gap-4 sm:flex-row sm:justify-end">
-          {type === FolderType.DOCUMENT ? (
-            <DocumentUploadDropzone />
-          ) : (
-            <TemplateCreateDialog folderId={parentId ?? undefined} />
-          )}
-
-          <FolderCreateDialog type={type} />
-        </div>
-      </div>
-
-      {isPending ? (
-        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
-          {Array.from({ length: 4 }).map((_, index) => (
-            <div key={index} className="border-border bg-card h-full rounded-lg border px-4 py-5">
-              <div className="flex items-center gap-3">
-                <Skeleton className="h-8 w-8 rounded" />
-                <div className="flex w-full items-center justify-between">
-                  <div className="flex-1">
-                    <Skeleton className="mb-2 h-4 w-24" />
-                    <div className="flex space-x-2">
-                      <Skeleton className="h-3 w-16" />
-                      <Skeleton className="h-3 w-3" />
-                      <Skeleton className="h-3 w-12" />
-                    </div>
-                  </div>
-                  <Skeleton className="h-8 w-2 rounded" />
-                </div>
-              </div>
-            </div>
-          ))}
-        </div>
-      ) : foldersData && foldersData.folders.length === 0 ? (
-        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
-          <FolderCreateDialog
-            type={type}
-            trigger={
-              <button>
-                <FolderCardEmpty type={type} />
-              </button>
-            }
-          />
-        </div>
-      ) : (
-        foldersData && (
-          <div key="content" className="space-y-4">
-            {pinnedFolders.length > 0 && (
-              <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
-                {pinnedFolders.map((folder) => (
-                  <FolderCard
-                    key={folder.id}
-                    folder={folder}
-                    onMove={(folder) => {
-                      setFolderToMove(folder);
-                      setIsMovingFolder(true);
-                    }}
-                    onPin={(folderId) => void pinFolder({ folderId })}
-                    onUnpin={(folderId) => void unpinFolder({ folderId })}
-                    onSettings={(folder) => {
-                      setFolderToSettings(folder);
-                      setIsSettingsFolderOpen(true);
-                    }}
-                    onDelete={(folder) => {
-                      setFolderToDelete(folder);
-                      setIsDeletingFolder(true);
-                    }}
-                  />
-                ))}
-              </div>
-            )}
-
-            {unpinnedFolders.length > 0 && (
-              <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
-                {unpinnedFolders.slice(0, 12).map((folder) => (
-                  <FolderCard
-                    key={folder.id}
-                    folder={folder}
-                    onMove={(folder) => {
-                      setFolderToMove(folder);
-                      setIsMovingFolder(true);
-                    }}
-                    onPin={(folderId) => void pinFolder({ folderId })}
-                    onUnpin={(folderId) => void unpinFolder({ folderId })}
-                    onSettings={(folder) => {
-                      setFolderToSettings(folder);
-                      setIsSettingsFolderOpen(true);
-                    }}
-                    onDelete={(folder) => {
-                      setFolderToDelete(folder);
-                      setIsDeletingFolder(true);
-                    }}
-                  />
-                ))}
-              </div>
-            )}
-
-            {foldersData.folders.length > 12 && (
-              <div className="mt-2 flex items-center justify-center">
-                <Link
-                  className="text-muted-foreground hover:text-foreground text-sm font-medium"
-                  to={formatViewAllFoldersPath()}
-                >
-                  View all folders
-                </Link>
-              </div>
-            )}
-          </div>
-        )
-      )}
-
-      <FolderMoveDialog
-        foldersData={foldersData?.folders}
-        folder={folderToMove}
-        isOpen={isMovingFolder}
-        onOpenChange={(open) => {
-          setIsMovingFolder(open);
-
-          if (!open) {
-            setFolderToMove(null);
-          }
-        }}
-      />
-
-      <FolderUpdateDialog
-        folder={folderToSettings}
-        isOpen={isSettingsFolderOpen}
-        onOpenChange={(open) => {
-          setIsSettingsFolderOpen(open);
-
-          if (!open) {
-            setFolderToSettings(null);
-          }
-        }}
-      />
-
-      {folderToDelete && (
-        <FolderDeleteDialog
-          folder={folderToDelete}
-          isOpen={isDeletingFolder}
-          onOpenChange={(open) => {
-            setIsDeletingFolder(open);
-
-            if (!open) {
-              setFolderToDelete(null);
-            }
-          }}
-        />
-      )}
-    </div>
-  );
-};

apps/remix/app/components/general/organisations/organisation-billing-banner.tsx

@@ -5,23 +5,18 @@ import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
 import { SubscriptionStatus } from '@prisma/client';
 import { AlertTriangle } from 'lucide-react';
-import { Link } from 'react-router';
 import { match } from 'ts-pattern';
 
 import { useOptionalCurrentOrganisation } from '@documenso/lib/client-only/providers/organisation';
-import { SUPPORT_EMAIL } from '@documenso/lib/constants/app';
 import { canExecuteOrganisationAction } from '@documenso/lib/utils/organisations';
 import { trpc } from '@documenso/trpc/react';
 import { cn } from '@documenso/ui/lib/utils';
-import { Alert, AlertDescription } from '@documenso/ui/primitives/alert';
 import { Button } from '@documenso/ui/primitives/button';
 import {
   Dialog,
-  DialogClose,
   DialogContent,
   DialogDescription,
   DialogFooter,
-  DialogHeader,
   DialogTitle,
 } from '@documenso/ui/primitives/dialog';
 import { useToast } from '@documenso/ui/primitives/use-toast';
@@ -91,7 +86,7 @@ export const OrganisationBillingBanner = () => {
             className={cn({
               'text-yellow-900 hover:bg-yellow-100 dark:hover:bg-yellow-500':
                 subscriptionStatus === SubscriptionStatus.PAST_DUE,
-              'text-destructive-foreground hover:bg-destructive hover:text-white':
+              'text-destructive-foreground hover:bg-destructive-foreground hover:text-white':
                 subscriptionStatus === SubscriptionStatus.INACTIVE,
             })}
             disabled={isPending}
@@ -104,78 +99,38 @@ export const OrganisationBillingBanner = () => {
       </div>
 
       <Dialog open={isOpen} onOpenChange={(value) => !isPending && setIsOpen(value)}>
-        {match(subscriptionStatus)
-          .with(SubscriptionStatus.PAST_DUE, () => (
-            <DialogContent>
-              <DialogHeader>
-                <DialogTitle>
-                  <Trans>Payment overdue</Trans>
-                </DialogTitle>
+        <DialogContent>
+          <DialogTitle>
+            <Trans>Payment overdue</Trans>
+          </DialogTitle>
 
-                <DialogDescription>
-                  <Trans>
-                    Your payment is overdue. Please settle the payment to avoid any service
-                    disruptions.
-                  </Trans>
-                </DialogDescription>
-              </DialogHeader>
+          {match(subscriptionStatus)
+            .with(SubscriptionStatus.PAST_DUE, () => (
+              <DialogDescription>
+                <Trans>
+                  Your payment for teams is overdue. Please settle the payment to avoid any service
+                  disruptions.
+                </Trans>
+              </DialogDescription>
+            ))
+            .with(SubscriptionStatus.INACTIVE, () => (
+              <DialogDescription>
+                <Trans>
+                  Due to an unpaid invoice, your team has been restricted. Please settle the payment
+                  to restore full access to your team.
+                </Trans>
+              </DialogDescription>
+            ))
+            .otherwise(() => null)}
 
-              {canExecuteOrganisationAction(
-                'MANAGE_BILLING',
-                organisation.currentOrganisationRole,
-              ) && (
-                <DialogFooter>
-                  <Button
-                    loading={isPending}
-                    onClick={async () => handleCreatePortal(organisation.id)}
-                  >
-                    <Trans>Resolve payment</Trans>
-                  </Button>
-                </DialogFooter>
-              )}
-            </DialogContent>
-          ))
-          .with(SubscriptionStatus.INACTIVE, () => (
-            <DialogContent>
-              <DialogHeader>
-                <DialogTitle>
-                  <Trans>Subscription invalid</Trans>
-                </DialogTitle>
-
-                <DialogDescription>
-                  <Trans>
-                    Your plan is no longer valid. Please subscribe to a new plan to continue using
-                    Documenso.
-                  </Trans>
-                </DialogDescription>
-              </DialogHeader>
-
-              <Alert variant="neutral">
-                <AlertDescription>
-                  <Trans>
-                    If there is any issue with your subscription, please contact us at{' '}
-                    <a href={`mailto:${SUPPORT_EMAIL}`}>{SUPPORT_EMAIL}</a>.
-                  </Trans>
-                </AlertDescription>
-              </Alert>
-
-              {canExecuteOrganisationAction(
-                'MANAGE_BILLING',
-                organisation.currentOrganisationRole,
-              ) && (
-                <DialogFooter>
-                  <DialogClose asChild>
-                    <Button asChild>
-                      <Link to={`/o/${organisation.url}/settings/billing`}>
-                        <Trans>Manage Billing</Trans>
-                      </Link>
-                    </Button>
-                  </DialogClose>
-                </DialogFooter>
-              )}
-            </DialogContent>
-          ))
-          .otherwise(() => null)}
+          {canExecuteOrganisationAction('MANAGE_BILLING', organisation.currentOrganisationRole) && (
+            <DialogFooter>
+              <Button loading={isPending} onClick={async () => handleCreatePortal(organisation.id)}>
+                <Trans>Resolve payment</Trans>
+              </Button>
+            </DialogFooter>
+          )}
+        </DialogContent>
       </Dialog>
     </>
   );

apps/remix/app/components/general/template/template-edit-form.tsx

@@ -3,7 +3,6 @@ import { useEffect, useState } from 'react';
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { useNavigate } from 'react-router';
-import { z } from 'zod';
 
 import { DocumentSignatureType } from '@documenso/lib/constants/document';
 import { isValidLanguageCode } from '@documenso/lib/constants/i18n';
@@ -11,7 +10,6 @@ import {
   DO_NOT_INVALIDATE_QUERY_ON_MUTATION,
   SKIP_QUERY_BATCH_META,
 } from '@documenso/lib/constants/trpc';
-import { ZDocumentAccessAuthTypesSchema } from '@documenso/lib/types/document-auth';
 import type { TTemplate } from '@documenso/lib/types/template';
 import { trpc } from '@documenso/trpc/react';
 import { cn } from '@documenso/ui/lib/utils';
@@ -127,10 +125,6 @@ export const TemplateEditForm = ({
   const onAddSettingsFormSubmit = async (data: TAddTemplateSettingsFormSchema) => {
     const { signatureTypes } = data.meta;
 
-    const parsedGlobalAccessAuth = z
-      .array(ZDocumentAccessAuthTypesSchema)
-      .safeParse(data.globalAccessAuth);
-
     try {
       await updateTemplateSettings({
         templateId: template.id,
@@ -138,7 +132,7 @@ export const TemplateEditForm = ({
           title: data.title,
           externalId: data.externalId || null,
           visibility: data.visibility,
-          globalAccessAuth: parsedGlobalAccessAuth.success ? parsedGlobalAccessAuth.data : [],
+          globalAccessAuth: data.globalAccessAuth ?? [],
           globalActionAuth: data.globalActionAuth ?? [],
         },
         meta: {

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

@@ -188,7 +188,7 @@ export const DocumentsTableActionDropdown = ({
           <Trans>Duplicate</Trans>
         </DropdownMenuItem>
 
-        {onMoveDocument && canManageDocument && (
+        {onMoveDocument && (
           <DropdownMenuItem onClick={onMoveDocument} onSelect={(e) => e.preventDefault()}>
             <FolderInput className="mr-2 h-4 w-4" />
             <Trans>Move to Folder</Trans>

apps/remix/app/components/tables/documents-table.tsx

@@ -9,7 +9,7 @@ import { match } from 'ts-pattern';
 
 import { useUpdateSearchParams } from '@documenso/lib/client-only/hooks/use-update-search-params';
 import { useSession } from '@documenso/lib/client-only/providers/session';
-import { isDocumentCompleted } from '@documenso/lib/utils/document';
+import { isDocumentBeingProcessed, isDocumentCompleted } from '@documenso/lib/utils/document';
 import { formatDocumentsPath } from '@documenso/lib/utils/teams';
 import type { TFindDocumentsResponse } from '@documenso/trpc/server/document-router/schema';
 import type { DataTableColumnDef } from '@documenso/ui/primitives/data-table';
@@ -77,7 +77,12 @@ export const DocumentsTable = ({
       {
         header: _(msg`Status`),
         accessorKey: 'status',
-        cell: ({ row }) => <DocumentStatus status={row.original.status} />,
+        cell: ({ row }) => (
+          <DocumentStatus
+            status={row.original.status}
+            isProcessing={isDocumentBeingProcessed(row.original)}
+          />
+        ),
         size: 140,
       },
       {

apps/remix/app/root.tsx

@@ -36,7 +36,23 @@ const { trackPageview } = Plausible({
   trackLocalhost: false,
 });
 
-export const links: Route.LinksFunction = () => [{ rel: 'stylesheet', href: stylesheet }];
+export const links: Route.LinksFunction = () => [
+  { rel: 'preconnect', href: 'https://fonts.googleapis.com' },
+  {
+    rel: 'preconnect',
+    href: 'https://fonts.gstatic.com',
+    crossOrigin: 'anonymous',
+  },
+  {
+    rel: 'stylesheet',
+    href: 'https://fonts.googleapis.com/css2?family=Caveat:wght@400..600&display=swap',
+  },
+  {
+    rel: 'stylesheet',
+    href: 'https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap',
+  },
+  { rel: 'stylesheet', href: stylesheet },
+];
 
 export function meta() {
   return appMetaTags();

apps/remix/app/routes/_authenticated+/admin+/documents.$id.tsx

@@ -6,6 +6,7 @@ import { DateTime } from 'luxon';
 import { Link, redirect } from 'react-router';
 
 import { getEntireDocument } from '@documenso/lib/server-only/admin/get-entire-document';
+import { isDocumentBeingProcessed } from '@documenso/lib/utils/document';
 import { trpc } from '@documenso/trpc/react';
 import {
   Accordion,
@@ -24,6 +25,7 @@ import {
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
 import { AdminDocumentDeleteDialog } from '~/components/dialogs/admin-document-delete-dialog';
+import { DocumentProcessingPoll } from '~/components/general/document/document-processing-poll';
 import { DocumentStatus } from '~/components/general/document/document-status';
 import { AdminDocumentRecipientItemTable } from '~/components/tables/admin-document-recipient-item-table';
 
@@ -69,7 +71,10 @@ export default function AdminDocumentDetailsPage({ loaderData }: Route.Component
       <div className="flex items-start justify-between">
         <div className="flex items-center gap-x-4">
           <h1 className="text-2xl font-semibold">{document.title}</h1>
-          <DocumentStatus status={document.status} />
+          <DocumentStatus
+            status={document.status}
+            isProcessing={isDocumentBeingProcessed(document)}
+          />
         </div>
 
         {document.deletedAt && (
@@ -162,6 +167,8 @@ export default function AdminDocumentDetailsPage({ loaderData }: Route.Component
       <hr className="my-4" />
 
       {document && <AdminDocumentDeleteDialog document={document} />}
+
+      <DocumentProcessingPoll documents={document} />
     </div>
   );
 }

apps/remix/app/routes/_authenticated+/admin+/documents._index.tsx

@@ -8,6 +8,7 @@ import { Link, useSearchParams } from 'react-router';
 
 import { useDebouncedValue } from '@documenso/lib/client-only/hooks/use-debounced-value';
 import { useUpdateSearchParams } from '@documenso/lib/client-only/hooks/use-update-search-params';
+import { isDocumentBeingProcessed } from '@documenso/lib/utils/document';
 import { extractInitials } from '@documenso/lib/utils/recipient-formatter';
 import { trpc } from '@documenso/trpc/react';
 import { Avatar, AvatarFallback } from '@documenso/ui/primitives/avatar';
@@ -75,7 +76,12 @@ export default function AdminDocumentsPage() {
       {
         header: _(msg`Status`),
         accessorKey: 'status',
-        cell: ({ row }) => <DocumentStatus status={row.original.status} />,
+        cell: ({ row }) => (
+          <DocumentStatus
+            status={row.original.status}
+            isProcessing={isDocumentBeingProcessed(row.original)}
+          />
+        ),
       },
       {
         header: _(msg`Owner`),

apps/remix/app/routes/_authenticated+/admin+/stats.tsx

@@ -18,14 +18,11 @@ import {
 import { getDocumentStats } from '@documenso/lib/server-only/admin/get-documents-stats';
 import { getRecipientsStats } from '@documenso/lib/server-only/admin/get-recipients-stats';
 import {
-  getMonthlyActiveUsers,
   getOrganisationsWithSubscriptionsCount,
-  getUserWithSignedDocumentMonthlyGrowth,
   getUsersCount,
 } from '@documenso/lib/server-only/admin/get-users-stats';
 import { getSignerConversionMonthly } from '@documenso/lib/server-only/user/get-signer-conversion';
 
-import { MonthlyActiveUsersChart } from '~/components/general/admin-monthly-active-user-charts';
 import { AdminStatsSignerConversionChart } from '~/components/general/admin-stats-signer-conversion-chart';
 import { AdminStatsUsersWithDocumentsChart } from '~/components/general/admin-stats-users-with-documents';
 import { CardMetric } from '~/components/general/metric-card';
@@ -40,16 +37,18 @@ export async function loader() {
     docStats,
     recipientStats,
     signerConversionMonthly,
-    monthlyUsersWithDocuments,
-    monthlyActiveUsers,
+    // userWithAtLeastOneDocumentPerMonth,
+    // userWithAtLeastOneDocumentSignedPerMonth,
+    // MONTHLY_USERS_SIGNED,
   ] = await Promise.all([
     getUsersCount(),
     getOrganisationsWithSubscriptionsCount(),
     getDocumentStats(),
     getRecipientsStats(),
     getSignerConversionMonthly(),
-    getUserWithSignedDocumentMonthlyGrowth(),
-    getMonthlyActiveUsers(),
+    // getUserWithAtLeastOneDocumentPerMonth(),
+    // getUserWithAtLeastOneDocumentSignedPerMonth(),
+    // getUserWithSignedDocumentMonthlyGrowth(),
   ]);
 
   return {
@@ -58,8 +57,7 @@ export async function loader() {
     docStats,
     recipientStats,
     signerConversionMonthly,
-    monthlyUsersWithDocuments,
-    monthlyActiveUsers,
+    // MONTHLY_USERS_SIGNED,
   };
 }
 
@@ -72,8 +70,7 @@ export default function AdminStatsPage({ loaderData }: Route.ComponentProps) {
     docStats,
     recipientStats,
     signerConversionMonthly,
-    monthlyUsersWithDocuments,
-    monthlyActiveUsers,
+    // MONTHLY_USERS_SIGNED,
   } = loaderData;
 
   return (
@@ -150,21 +147,15 @@ export default function AdminStatsPage({ loaderData }: Route.ComponentProps) {
           <Trans>Charts</Trans>
         </h3>
         <div className="mt-5 grid grid-cols-2 gap-8">
-          <MonthlyActiveUsersChart title={_(msg`MAU (signed in)`)} data={monthlyActiveUsers} />
-
-          <MonthlyActiveUsersChart
-            title={_(msg`Cumulative MAU (signed in)`)}
-            data={monthlyActiveUsers}
-            cummulative
-          />
-
           <AdminStatsUsersWithDocumentsChart
-            data={monthlyUsersWithDocuments}
+            data={[]}
+            // data={MONTHLY_USERS_SIGNED}
             title={_(msg`MAU (created document)`)}
             tooltip={_(msg`Monthly Active Users: Users that created at least one Document`)}
           />
           <AdminStatsUsersWithDocumentsChart
-            data={monthlyUsersWithDocuments}
+            data={[]}
+            // data={MONTHLY_USERS_SIGNED}
             completed
             title={_(msg`MAU (had document completed)`)}
             tooltip={_(

apps/remix/app/routes/_authenticated+/o.$orgUrl.settings.billing.tsx

@@ -1,6 +1,5 @@
 import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
-import { SubscriptionStatus } from '@prisma/client';
 import { Loader } from 'lucide-react';
 import type Stripe from 'stripe';
 import { match } from 'ts-pattern';
@@ -135,9 +134,7 @@ export default function TeamsSettingBillingPage() {
 
       <hr className="my-4" />
 
-      {(!subscription ||
-        subscription.organisationSubscription.status === SubscriptionStatus.INACTIVE) &&
-        canManageBilling && <BillingPlans plans={plans} />}
+      {!subscription && canManageBilling && <BillingPlans plans={plans} />}
 
       <section className="mt-6">
         <OrganisationBillingInvoicesTable

apps/remix/app/routes/_authenticated+/settings+/security._index.tsx

@@ -171,27 +171,6 @@ export default function SettingsSecurity({ loaderData }: Route.ComponentProps) {
           </Link>
         </Button>
       </Alert>
-
-      <Alert
-        className="mt-6 flex flex-col justify-between p-6 sm:flex-row sm:items-center"
-        variant="neutral"
-      >
-        <div className="mb-4 mr-4 sm:mb-0">
-          <AlertTitle>
-            <Trans>Active sessions</Trans>
-          </AlertTitle>
-
-          <AlertDescription className="mr-2">
-            <Trans>View and manage all active sessions for your account.</Trans>
-          </AlertDescription>
-        </div>
-
-        <Button asChild variant="outline" className="bg-background">
-          <Link to="/settings/security/sessions">
-            <Trans>Manage sessions</Trans>
-          </Link>
-        </Button>
-      </Alert>
     </div>
   );
 }

apps/remix/app/routes/_authenticated+/settings+/security.sessions.tsx

@@ -1,192 +0,0 @@
-import { useMemo, useState } from 'react';
-
-import { useLingui } from '@lingui/react/macro';
-import { Trans } from '@lingui/react/macro';
-import { useQuery } from '@tanstack/react-query';
-import { DateTime } from 'luxon';
-import { UAParser } from 'ua-parser-js';
-
-import { authClient } from '@documenso/auth/client';
-import { useSession } from '@documenso/lib/client-only/providers/session';
-import { Badge } from '@documenso/ui/primitives/badge';
-import { Button } from '@documenso/ui/primitives/button';
-import type { DataTableColumnDef } from '@documenso/ui/primitives/data-table';
-import { DataTable } from '@documenso/ui/primitives/data-table';
-import { Skeleton } from '@documenso/ui/primitives/skeleton';
-import { TableCell } from '@documenso/ui/primitives/table';
-import { useToast } from '@documenso/ui/primitives/use-toast';
-
-import { SessionLogoutAllDialog } from '~/components/dialogs/session-logout-all-dialog';
-import { SettingsHeader } from '~/components/general/settings-header';
-import { appMetaTags } from '~/utils/meta';
-
-export function meta() {
-  return appMetaTags('Active Sessions');
-}
-
-const parser = new UAParser();
-
-export default function SettingsSecuritySessions() {
-  const { t } = useLingui();
-
-  const { data, isLoading, isLoadingError, refetch } = useQuery({
-    queryKey: ['active-sessions'],
-    queryFn: async () => await authClient.getSessions(),
-  });
-
-  const { session } = useSession();
-
-  const results = data?.sessions ?? [];
-
-  const columns = useMemo(() => {
-    return [
-      {
-        header: t`Device`,
-        accessorKey: 'userAgent',
-        cell: ({ row }) => {
-          const userAgent = row.original.userAgent || '';
-          parser.setUA(userAgent);
-
-          const result = parser.getResult();
-          const browser = result.browser.name || t`Unknown`;
-          const os = result.os.name || t`Unknown`;
-          const isCurrentSession = row.original.id === session?.id;
-
-          return (
-            <div className="flex items-center gap-2">
-              <span>
-                {browser} ({os})
-              </span>
-              {isCurrentSession && (
-                <Badge>
-                  <Trans>Current</Trans>
-                </Badge>
-              )}
-            </div>
-          );
-        },
-      },
-      {
-        header: t`IP Address`,
-        accessorKey: 'ipAddress',
-        cell: ({ row }) => row.original.ipAddress || t`Unknown`,
-      },
-      {
-        header: t`Last Active`,
-        accessorKey: 'updatedAt',
-        cell: ({ row }) => DateTime.fromJSDate(row.original.updatedAt).toRelative(),
-      },
-      {
-        header: t`Created`,
-        accessorKey: 'createdAt',
-        cell: ({ row }) => DateTime.fromJSDate(row.original.createdAt).toRelative(),
-      },
-      {
-        id: 'actions',
-        cell: ({ row }) => (
-          <SessionRevokeButton
-            sessionId={row.original.id}
-            isCurrentSession={row.original.id === session?.id}
-            onSuccess={refetch}
-          />
-        ),
-      },
-    ] satisfies DataTableColumnDef<(typeof results)[number]>[];
-  }, []);
-
-  return (
-    <div>
-      <SettingsHeader
-        title={t`Active sessions`}
-        subtitle={t`View and manage all active sessions for your account.`}
-      >
-        <SessionLogoutAllDialog onSuccess={refetch} disabled={results.length === 1 || isLoading} />
-      </SettingsHeader>
-
-      <div className="mt-4">
-        <DataTable
-          columns={columns}
-          data={results}
-          hasFilters={false}
-          error={{
-            enable: isLoadingError,
-          }}
-          skeleton={{
-            enable: isLoading,
-            rows: 3,
-            component: (
-              <>
-                <TableCell>
-                  <Skeleton className="h-4 w-40 rounded-full" />
-                </TableCell>
-                <TableCell>
-                  <Skeleton className="h-4 w-24 rounded-full" />
-                </TableCell>
-                <TableCell>
-                  <Skeleton className="h-4 w-24 rounded-full" />
-                </TableCell>
-                <TableCell>
-                  <Skeleton className="h-4 w-24 rounded-full" />
-                </TableCell>
-                <TableCell>
-                  <Skeleton className="h-8 w-16 rounded" />
-                </TableCell>
-              </>
-            ),
-          }}
-        />
-      </div>
-    </div>
-  );
-}
-
-type SessionRevokeButtonProps = {
-  sessionId: string;
-  isCurrentSession: boolean;
-  onSuccess: () => Promise<unknown>;
-};
-
-const SessionRevokeButton = ({
-  sessionId,
-  isCurrentSession,
-  onSuccess,
-}: SessionRevokeButtonProps) => {
-  const { toast } = useToast();
-  const { t } = useLingui();
-
-  const [isLoading, setIsLoading] = useState(false);
-
-  const handleRevoke = async () => {
-    setIsLoading(true);
-    try {
-      await authClient.signOutSession({
-        sessionId,
-        redirectPath: isCurrentSession ? '/signin' : undefined,
-      });
-
-      if (!isCurrentSession) {
-        await onSuccess();
-      }
-
-      toast({
-        title: t`Session revoked`,
-      });
-    } catch (error) {
-      console.error(error);
-
-      toast({
-        title: t`Error`,
-        description: t`Failed to revoke session`,
-        variant: 'destructive',
-      });
-    }
-
-    setIsLoading(false);
-  };
-
-  return (
-    <Button variant="destructive" size="sm" onClick={handleRevoke} loading={isLoading}>
-      <Trans>Revoke</Trans>
-    </Button>
-  );
-};

apps/remix/app/routes/_authenticated+/t.$teamUrl+/documents.$id._index.tsx

@@ -1,7 +1,7 @@
 import { useLingui } from '@lingui/react';
 import { Plural, Trans } from '@lingui/react/macro';
 import { DocumentStatus, TeamMemberRole } from '@prisma/client';
-import { ChevronLeft, Users2 } from 'lucide-react';
+import { ChevronLeft, Clock9, Users2 } from 'lucide-react';
 import { Link, redirect } from 'react-router';
 import { match } from 'ts-pattern';
 
@@ -10,17 +10,21 @@ import { useSession } from '@documenso/lib/client-only/providers/session';
 import { getDocumentWithDetailsById } from '@documenso/lib/server-only/document/get-document-with-details-by-id';
 import { getTeamByUrl } from '@documenso/lib/server-only/team/get-team';
 import { DocumentVisibility } from '@documenso/lib/types/document-visibility';
+import { isDocumentBeingProcessed } from '@documenso/lib/utils/document';
 import { formatDocumentsPath } from '@documenso/lib/utils/teams';
 import { DocumentReadOnlyFields } from '@documenso/ui/components/document/document-read-only-fields';
 import { Badge } from '@documenso/ui/primitives/badge';
+import { Button } from '@documenso/ui/primitives/button';
 import { Card, CardContent } from '@documenso/ui/primitives/card';
 import { PDFViewer } from '@documenso/ui/primitives/pdf-viewer';
 
+import { DocumentHistorySheet } from '~/components/general/document/document-history-sheet';
 import { DocumentPageViewButton } from '~/components/general/document/document-page-view-button';
 import { DocumentPageViewDropdown } from '~/components/general/document/document-page-view-dropdown';
 import { DocumentPageViewInformation } from '~/components/general/document/document-page-view-information';
 import { DocumentPageViewRecentActivity } from '~/components/general/document/document-page-view-recent-activity';
 import { DocumentPageViewRecipients } from '~/components/general/document/document-page-view-recipients';
+import { DocumentProcessingPoll } from '~/components/general/document/document-processing-poll';
 import { DocumentRecipientLinkCopyDialog } from '~/components/general/document/document-recipient-link-copy-dialog';
 import {
   DocumentStatus as DocumentStatusComponent,
@@ -99,6 +103,9 @@ export default function DocumentPage() {
 
   const { recipients, documentData, documentMeta } = document;
 
+  // This was a feature flag. Leave to false since it's not ready.
+  const isDocumentHistoryEnabled = false;
+
   return (
     <div className="mx-auto -mt-4 w-full max-w-screen-xl px-4 md:px-8">
       {document.status === DocumentStatus.PENDING && (
@@ -123,6 +130,7 @@ export default function DocumentPage() {
             <DocumentStatusComponent
               inheritColor
               status={document.status}
+              isProcessing={isDocumentBeingProcessed(document)}
               className="text-muted-foreground"
             />
 
@@ -149,6 +157,17 @@ export default function DocumentPage() {
             )}
           </div>
         </div>
+
+        {isDocumentHistoryEnabled && (
+          <div className="self-end">
+            <DocumentHistorySheet documentId={document.id} userId={user.id}>
+              <Button variant="outline">
+                <Clock9 className="mr-1.5 h-4 w-4" />
+                <Trans>Document history</Trans>
+              </Button>
+            </DocumentHistorySheet>
+          </div>
+        )}
       </div>
 
       <div className="mt-6 grid w-full grid-cols-12 gap-8">
@@ -225,6 +244,8 @@ export default function DocumentPage() {
           </div>
         </div>
       </div>
+
+      <DocumentProcessingPoll documents={document} />
     </div>
   );
 }

apps/remix/app/routes/_authenticated+/t.$teamUrl+/documents._index.tsx

@@ -1,12 +1,13 @@
 import { useEffect, useMemo, useState } from 'react';
 
 import { Trans } from '@lingui/react/macro';
-import { FolderType, OrganisationType } from '@prisma/client';
-import { useParams, useSearchParams } from 'react-router';
-import { Link } from 'react-router';
+import { OrganisationType } from '@prisma/client';
+import { FolderIcon, HomeIcon, Loader2 } from 'lucide-react';
+import { Link, useNavigate, useSearchParams } from 'react-router';
 import { z } from 'zod';
 
 import { useCurrentOrganisation } from '@documenso/lib/client-only/providers/organisation';
+import { FolderType } from '@documenso/lib/types/folder-type';
 import { formatAvatarUrl } from '@documenso/lib/utils/avatars';
 import { parseToIntegerArray } from '@documenso/lib/utils/params';
 import { formatDocumentsPath } from '@documenso/lib/utils/teams';
@@ -16,14 +17,22 @@ import {
   type TFindDocumentsInternalResponse,
   ZFindDocumentsInternalRequestSchema,
 } from '@documenso/trpc/server/document-router/schema';
+import { type TFolderWithSubfolders } from '@documenso/trpc/server/folder-router/schema';
 import { Avatar, AvatarFallback, AvatarImage } from '@documenso/ui/primitives/avatar';
+import { Button } from '@documenso/ui/primitives/button';
 import { Tabs, TabsList, TabsTrigger } from '@documenso/ui/primitives/tabs';
 
 import { DocumentMoveToFolderDialog } from '~/components/dialogs/document-move-to-folder-dialog';
+import { CreateFolderDialog } from '~/components/dialogs/folder-create-dialog';
+import { FolderDeleteDialog } from '~/components/dialogs/folder-delete-dialog';
+import { FolderMoveDialog } from '~/components/dialogs/folder-move-dialog';
+import { FolderSettingsDialog } from '~/components/dialogs/folder-settings-dialog';
 import { DocumentDropZoneWrapper } from '~/components/general/document/document-drop-zone-wrapper';
+import { DocumentProcessingPoll } from '~/components/general/document/document-processing-poll';
 import { DocumentSearch } from '~/components/general/document/document-search';
 import { DocumentStatus } from '~/components/general/document/document-status';
-import { FolderGrid } from '~/components/general/folder/folder-grid';
+import { DocumentUploadDropzone } from '~/components/general/document/document-upload';
+import { FolderCard } from '~/components/general/folder/folder-card';
 import { PeriodSelector } from '~/components/general/period-selector';
 import { DocumentsTable } from '~/components/tables/documents-table';
 import { DocumentsTableEmptyState } from '~/components/tables/documents-table-empty-state';
@@ -46,14 +55,23 @@ const ZSearchParamsSchema = ZFindDocumentsInternalRequestSchema.pick({
 });
 
 export default function DocumentsPage() {
+  const [searchParams] = useSearchParams();
+  const navigate = useNavigate();
+
   const organisation = useCurrentOrganisation();
   const team = useCurrentTeam();
 
-  const { folderId } = useParams();
-  const [searchParams] = useSearchParams();
-
   const [isMovingDocument, setIsMovingDocument] = useState(false);
   const [documentToMove, setDocumentToMove] = useState<number | null>(null);
+  const [isMovingFolder, setIsMovingFolder] = useState(false);
+  const [folderToMove, setFolderToMove] = useState<TFolderWithSubfolders | null>(null);
+  const [isDeletingFolder, setIsDeletingFolder] = useState(false);
+  const [folderToDelete, setFolderToDelete] = useState<TFolderWithSubfolders | null>(null);
+  const [isSettingsFolderOpen, setIsSettingsFolderOpen] = useState(false);
+  const [folderToSettings, setFolderToSettings] = useState<TFolderWithSubfolders | null>(null);
+
+  const { mutateAsync: pinFolder } = trpc.folder.pinFolder.useMutation();
+  const { mutateAsync: unpinFolder } = trpc.folder.unpinFolder.useMutation();
 
   const [stats, setStats] = useState<TFindDocumentsInternalResponse['stats']>({
     [ExtendedDocumentStatus.DRAFT]: 0,
@@ -69,11 +87,26 @@ export default function DocumentsPage() {
     [searchParams],
   );
 
-  const { data, isLoading, isLoadingError } = trpc.document.findDocumentsInternal.useQuery({
-    ...findDocumentSearchParams,
-    folderId,
+  const { data, isLoading, isLoadingError, refetch } = trpc.document.findDocumentsInternal.useQuery(
+    {
+      ...findDocumentSearchParams,
+    },
+  );
+
+  const {
+    data: foldersData,
+    isLoading: isFoldersLoading,
+    refetch: refetchFolders,
+  } = trpc.folder.getFolders.useQuery({
+    type: FolderType.DOCUMENT,
+    parentId: null,
   });
 
+  useEffect(() => {
+    void refetch();
+    void refetchFolders();
+  }, [team?.url]);
+
   const getTabHref = (value: keyof typeof ExtendedDocumentStatus) => {
     const params = new URLSearchParams(searchParams);
 
@@ -91,17 +124,7 @@ export default function DocumentsPage() {
       params.delete('page');
     }
 
-    let path = formatDocumentsPath(team.url);
-
-    if (folderId) {
-      path += `/f/${folderId}`;
-    }
-
-    if (params.toString()) {
-      path += `?${params.toString()}`;
-    }
-
-    return path;
+    return `${formatDocumentsPath(team.url)}?${params.toString()}`;
   };
 
   useEffect(() => {
@@ -110,19 +133,147 @@ export default function DocumentsPage() {
     }
   }, [data?.stats]);
 
+  const navigateToFolder = (folderId?: string | null) => {
+    const documentsPath = formatDocumentsPath(team.url);
+
+    if (folderId) {
+      void navigate(`${documentsPath}/f/${folderId}`);
+    } else {
+      void navigate(documentsPath);
+    }
+  };
+
+  const handleViewAllFolders = () => {
+    void navigate(`${formatDocumentsPath(team.url)}/folders`);
+  };
+
   return (
     <DocumentDropZoneWrapper>
       <div className="mx-auto w-full max-w-screen-xl px-4 md:px-8">
-        <FolderGrid type={FolderType.DOCUMENT} parentId={folderId ?? null} />
+        <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
+          <div className="flex flex-1 items-center">
+            <Button
+              variant="ghost"
+              size="sm"
+              className="flex items-center space-x-2 pl-0 hover:bg-transparent"
+              onClick={() => navigateToFolder(null)}
+            >
+              <HomeIcon className="h-4 w-4" />
+              <span>Home</span>
+            </Button>
 
-        <div className="mt-8 flex flex-wrap items-center justify-between gap-x-4 gap-y-8">
+            {foldersData?.breadcrumbs.map((folder) => (
+              <div key={folder.id} className="flex items-center space-x-2">
+                <span>/</span>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  className="flex items-center space-x-2 pl-1 hover:bg-transparent"
+                  onClick={() => navigateToFolder(folder.id)}
+                >
+                  <FolderIcon className="h-4 w-4" />
+                  <span>{folder.name}</span>
+                </Button>
+              </div>
+            ))}
+          </div>
+
+          <div className="flex gap-4 sm:flex-row sm:justify-end">
+            <DocumentUploadDropzone />
+            <CreateFolderDialog />
+          </div>
+        </div>
+
+        {isFoldersLoading ? (
+          <div className="mt-6 flex justify-center">
+            <Loader2 className="text-muted-foreground h-8 w-8 animate-spin" />
+          </div>
+        ) : (
+          <>
+            {foldersData?.folders?.some((folder) => folder.pinned) && (
+              <div className="mt-6">
+                <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
+                  {foldersData.folders
+                    .filter((folder) => folder.pinned)
+                    .map((folder) => (
+                      <FolderCard
+                        key={folder.id}
+                        folder={folder}
+                        onNavigate={navigateToFolder}
+                        onMove={(folder) => {
+                          setFolderToMove(folder);
+                          setIsMovingFolder(true);
+                        }}
+                        onPin={(folderId) => void pinFolder({ folderId })}
+                        onUnpin={(folderId) => void unpinFolder({ folderId })}
+                        onSettings={(folder) => {
+                          setFolderToSettings(folder);
+                          setIsSettingsFolderOpen(true);
+                        }}
+                        onDelete={(folder) => {
+                          setFolderToDelete(folder);
+                          setIsDeletingFolder(true);
+                        }}
+                      />
+                    ))}
+                </div>
+              </div>
+            )}
+
+            <div className="mt-6">
+              <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
+                {foldersData?.folders
+                  ?.filter((folder) => !folder.pinned)
+                  .slice(0, 12)
+                  .map((folder) => (
+                    <FolderCard
+                      key={folder.id}
+                      folder={folder}
+                      onNavigate={navigateToFolder}
+                      onMove={(folder) => {
+                        setFolderToMove(folder);
+                        setIsMovingFolder(true);
+                      }}
+                      onPin={(folderId) => void pinFolder({ folderId })}
+                      onUnpin={(folderId) => void unpinFolder({ folderId })}
+                      onSettings={(folder) => {
+                        setFolderToSettings(folder);
+                        setIsSettingsFolderOpen(true);
+                      }}
+                      onDelete={(folder) => {
+                        setFolderToDelete(folder);
+                        setIsDeletingFolder(true);
+                      }}
+                    />
+                  ))}
+              </div>
+
+              <div className="mt-6 flex items-center justify-center">
+                {foldersData && foldersData.folders?.length > 12 && (
+                  <Button
+                    variant="link"
+                    size="sm"
+                    className="text-muted-foreground hover:text-foreground"
+                    onClick={() => void handleViewAllFolders()}
+                  >
+                    View all folders
+                  </Button>
+                )}
+              </div>
+            </div>
+          </>
+        )}
+
+        <div className="mt-12 flex flex-wrap items-center justify-between gap-x-4 gap-y-8">
           <div className="flex flex-row items-center">
-            <Avatar className="dark:border-border mr-3 h-12 w-12 border-2 border-solid border-white">
-              {team.avatarImageId && <AvatarImage src={formatAvatarUrl(team.avatarImageId)} />}
-              <AvatarFallback className="text-muted-foreground text-xs">
-                {team.name.slice(0, 1)}
-              </AvatarFallback>
-            </Avatar>
+            {team && (
+              <Avatar className="dark:border-border mr-3 h-12 w-12 border-2 border-solid border-white">
+                {team.avatarImageId && <AvatarImage src={formatAvatarUrl(team.avatarImageId)} />}
+                <AvatarFallback className="text-muted-foreground text-xs">
+                  {team.name.slice(0, 1)}
+                </AvatarFallback>
+              </Avatar>
+            )}
 
             <h2 className="text-4xl font-semibold">
               <Trans>Documents</Trans>
@@ -178,7 +329,9 @@ export default function DocumentsPage() {
 
         <div className="mt-8">
           <div>
-            {data && data.count === 0 ? (
+            {data &&
+            data.count === 0 &&
+            (!foldersData?.folders.length || foldersData.folders.length === 0) ? (
               <DocumentsTableEmptyState
                 status={findDocumentSearchParams.status || ExtendedDocumentStatus.ALL}
               />
@@ -193,6 +346,8 @@ export default function DocumentsPage() {
                 }}
               />
             )}
+
+            <DocumentProcessingPoll documents={data?.data} />
           </div>
         </div>
 
@@ -200,7 +355,6 @@ export default function DocumentsPage() {
           <DocumentMoveToFolderDialog
             documentId={documentToMove}
             open={isMovingDocument}
-            currentFolderId={folderId}
             onOpenChange={(open) => {
               setIsMovingDocument(open);
 
@@ -210,6 +364,43 @@ export default function DocumentsPage() {
             }}
           />
         )}
+
+        <FolderMoveDialog
+          foldersData={foldersData?.folders}
+          folder={folderToMove}
+          isOpen={isMovingFolder}
+          onOpenChange={(open) => {
+            setIsMovingFolder(open);
+
+            if (!open) {
+              setFolderToMove(null);
+            }
+          }}
+        />
+
+        <FolderSettingsDialog
+          folder={folderToSettings}
+          isOpen={isSettingsFolderOpen}
+          onOpenChange={(open) => {
+            setIsSettingsFolderOpen(open);
+
+            if (!open) {
+              setFolderToSettings(null);
+            }
+          }}
+        />
+
+        <FolderDeleteDialog
+          folder={folderToDelete}
+          isOpen={isDeletingFolder}
+          onOpenChange={(open) => {
+            setIsDeletingFolder(open);
+
+            if (!open) {
+              setFolderToDelete(null);
+            }
+          }}
+        />
       </div>
     </DocumentDropZoneWrapper>
   );

apps/remix/app/routes/_authenticated+/t.$teamUrl+/documents.f.$folderId._index.tsx

@@ -1,5 +1,377 @@
-import DocumentPage, { meta } from './documents._index';
+import { useEffect, useMemo, useState } from 'react';
 
-export { meta };
+import { Trans } from '@lingui/react/macro';
+import { FolderIcon, HomeIcon, Loader2 } from 'lucide-react';
+import { useNavigate, useParams, useSearchParams } from 'react-router';
+import { Link } from 'react-router';
+import { z } from 'zod';
 
-export default DocumentPage;
+import { formatAvatarUrl } from '@documenso/lib/utils/avatars';
+import { parseToIntegerArray } from '@documenso/lib/utils/params';
+import { formatDocumentsPath } from '@documenso/lib/utils/teams';
+import { ExtendedDocumentStatus } from '@documenso/prisma/types/extended-document-status';
+import { trpc } from '@documenso/trpc/react';
+import {
+  type TFindDocumentsInternalResponse,
+  ZFindDocumentsInternalRequestSchema,
+} from '@documenso/trpc/server/document-router/schema';
+import { type TFolderWithSubfolders } from '@documenso/trpc/server/folder-router/schema';
+import { Avatar, AvatarFallback, AvatarImage } from '@documenso/ui/primitives/avatar';
+import { Button } from '@documenso/ui/primitives/button';
+import { Tabs, TabsList, TabsTrigger } from '@documenso/ui/primitives/tabs';
+
+import { DocumentMoveToFolderDialog } from '~/components/dialogs/document-move-to-folder-dialog';
+import { CreateFolderDialog } from '~/components/dialogs/folder-create-dialog';
+import { FolderDeleteDialog } from '~/components/dialogs/folder-delete-dialog';
+import { FolderMoveDialog } from '~/components/dialogs/folder-move-dialog';
+import { FolderSettingsDialog } from '~/components/dialogs/folder-settings-dialog';
+import { DocumentDropZoneWrapper } from '~/components/general/document/document-drop-zone-wrapper';
+import { DocumentProcessingPoll } from '~/components/general/document/document-processing-poll';
+import { DocumentSearch } from '~/components/general/document/document-search';
+import { DocumentStatus } from '~/components/general/document/document-status';
+import { DocumentUploadDropzone } from '~/components/general/document/document-upload';
+import { FolderCard } from '~/components/general/folder/folder-card';
+import { PeriodSelector } from '~/components/general/period-selector';
+import { DocumentsTable } from '~/components/tables/documents-table';
+import { DocumentsTableEmptyState } from '~/components/tables/documents-table-empty-state';
+import { DocumentsTableSenderFilter } from '~/components/tables/documents-table-sender-filter';
+import { useCurrentTeam } from '~/providers/team';
+import { appMetaTags } from '~/utils/meta';
+
+export function meta() {
+  return appMetaTags('Documents');
+}
+
+const ZSearchParamsSchema = ZFindDocumentsInternalRequestSchema.pick({
+  status: true,
+  period: true,
+  page: true,
+  perPage: true,
+  query: true,
+}).extend({
+  senderIds: z.string().transform(parseToIntegerArray).optional().catch([]),
+});
+
+export default function DocumentsPage() {
+  const [searchParams] = useSearchParams();
+  const navigate = useNavigate();
+
+  const [isMovingDocument, setIsMovingDocument] = useState(false);
+  const [documentToMove, setDocumentToMove] = useState<number | null>(null);
+  const [isMovingFolder, setIsMovingFolder] = useState(false);
+  const [folderToMove, setFolderToMove] = useState<TFolderWithSubfolders | null>(null);
+  const [isDeletingFolder, setIsDeletingFolder] = useState(false);
+  const [folderToDelete, setFolderToDelete] = useState<TFolderWithSubfolders | null>(null);
+  const [isSettingsFolderOpen, setIsSettingsFolderOpen] = useState(false);
+  const [folderToSettings, setFolderToSettings] = useState<TFolderWithSubfolders | null>(null);
+
+  const { folderId } = useParams();
+
+  const team = useCurrentTeam();
+
+  const { mutateAsync: pinFolder } = trpc.folder.pinFolder.useMutation();
+  const { mutateAsync: unpinFolder } = trpc.folder.unpinFolder.useMutation();
+
+  const [stats, setStats] = useState<TFindDocumentsInternalResponse['stats']>({
+    [ExtendedDocumentStatus.DRAFT]: 0,
+    [ExtendedDocumentStatus.PENDING]: 0,
+    [ExtendedDocumentStatus.COMPLETED]: 0,
+    [ExtendedDocumentStatus.REJECTED]: 0,
+    [ExtendedDocumentStatus.INBOX]: 0,
+    [ExtendedDocumentStatus.ALL]: 0,
+  });
+
+  const findDocumentSearchParams = useMemo(
+    () => ZSearchParamsSchema.safeParse(Object.fromEntries(searchParams.entries())).data || {},
+    [searchParams],
+  );
+
+  const { data, isLoading, isLoadingError, refetch } = trpc.document.findDocumentsInternal.useQuery(
+    {
+      ...findDocumentSearchParams,
+      folderId,
+    },
+  );
+
+  const {
+    data: foldersData,
+    isLoading: isFoldersLoading,
+    refetch: refetchFolders,
+  } = trpc.folder.getFolders.useQuery({
+    parentId: folderId,
+  });
+
+  useEffect(() => {
+    void refetch();
+    void refetchFolders();
+  }, [team.url]);
+
+  const getTabHref = (value: keyof typeof ExtendedDocumentStatus) => {
+    const params = new URLSearchParams(searchParams);
+
+    params.set('status', value);
+
+    if (value === ExtendedDocumentStatus.ALL) {
+      params.delete('status');
+    }
+
+    if (params.has('page')) {
+      params.delete('page');
+    }
+
+    return `${formatDocumentsPath(team.url)}/f/${folderId}?${params.toString()}`;
+  };
+
+  useEffect(() => {
+    if (data?.stats) {
+      setStats(data.stats);
+    }
+  }, [data?.stats]);
+
+  const navigateToFolder = (folderId?: string | null) => {
+    const documentsPath = formatDocumentsPath(team.url);
+
+    if (folderId) {
+      void navigate(`${documentsPath}/f/${folderId}`);
+    } else {
+      void navigate(documentsPath);
+    }
+  };
+
+  return (
+    <DocumentDropZoneWrapper>
+      <div className="mx-auto w-full max-w-screen-xl px-4 md:px-8">
+        <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
+          <div className="flex flex-1 items-center">
+            <Button
+              variant="ghost"
+              size="sm"
+              className="flex items-center space-x-2 pl-0 hover:bg-transparent"
+              onClick={() => navigateToFolder(null)}
+            >
+              <HomeIcon className="h-4 w-4" />
+              <span>Home</span>
+            </Button>
+
+            {foldersData?.breadcrumbs.map((folder) => (
+              <div key={folder.id} className="flex items-center space-x-2">
+                <span>/</span>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  className="flex items-center space-x-2 pl-1 hover:bg-transparent"
+                  onClick={() => navigateToFolder(folder.id)}
+                >
+                  <FolderIcon className="h-4 w-4" />
+                  <span>{folder.name}</span>
+                </Button>
+              </div>
+            ))}
+          </div>
+
+          <div className="flex gap-4 sm:flex-row sm:justify-end">
+            <DocumentUploadDropzone />
+            <CreateFolderDialog />
+          </div>
+        </div>
+
+        {isFoldersLoading ? (
+          <div className="mt-6 flex justify-center">
+            <Loader2 className="text-muted-foreground h-8 w-8 animate-spin" />
+          </div>
+        ) : (
+          <>
+            {foldersData?.folders && foldersData.folders.some((folder) => folder.pinned) && (
+              <div className="mt-6">
+                <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
+                  {foldersData.folders
+                    .filter((folder) => folder.pinned)
+                    .map((folder) => (
+                      <FolderCard
+                        key={folder.id}
+                        folder={folder}
+                        onNavigate={navigateToFolder}
+                        onMove={(folder) => {
+                          setFolderToMove(folder);
+                          setIsMovingFolder(true);
+                        }}
+                        onPin={(folderId) => void pinFolder({ folderId })}
+                        onUnpin={(folderId) => void unpinFolder({ folderId })}
+                        onSettings={(folder) => {
+                          setFolderToSettings(folder);
+                          setIsSettingsFolderOpen(true);
+                        }}
+                        onDelete={(folder) => {
+                          setFolderToDelete(folder);
+                          setIsDeletingFolder(true);
+                        }}
+                      />
+                    ))}
+                </div>
+              </div>
+            )}
+
+            <div className="mt-6">
+              <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
+                {foldersData?.folders
+                  .filter((folder) => !folder.pinned)
+                  .map((folder) => (
+                    <FolderCard
+                      key={folder.id}
+                      folder={folder}
+                      onNavigate={navigateToFolder}
+                      onMove={(folder) => {
+                        setFolderToMove(folder);
+                        setIsMovingFolder(true);
+                      }}
+                      onPin={(folderId) => void pinFolder({ folderId })}
+                      onUnpin={(folderId) => void unpinFolder({ folderId })}
+                      onSettings={(folder) => {
+                        setFolderToSettings(folder);
+                        setIsSettingsFolderOpen(true);
+                      }}
+                      onDelete={(folder) => {
+                        setFolderToDelete(folder);
+                        setIsDeletingFolder(true);
+                      }}
+                    />
+                  ))}
+              </div>
+            </div>
+          </>
+        )}
+
+        <div className="mt-12 flex flex-wrap items-center justify-between gap-x-4 gap-y-8">
+          <div className="flex flex-row items-center">
+            {team && (
+              <Avatar className="dark:border-border mr-3 h-12 w-12 border-2 border-solid border-white">
+                {team.avatarImageId && <AvatarImage src={formatAvatarUrl(team.avatarImageId)} />}
+                <AvatarFallback className="text-muted-foreground text-xs">
+                  {team.name.slice(0, 1)}
+                </AvatarFallback>
+              </Avatar>
+            )}
+
+            <h2 className="text-4xl font-semibold">
+              <Trans>Documents</Trans>
+            </h2>
+          </div>
+
+          <div className="-m-1 flex flex-wrap gap-x-4 gap-y-6 overflow-hidden p-1">
+            <Tabs value={findDocumentSearchParams.status || 'ALL'} className="overflow-x-auto">
+              <TabsList>
+                {[
+                  ExtendedDocumentStatus.INBOX,
+                  ExtendedDocumentStatus.PENDING,
+                  ExtendedDocumentStatus.COMPLETED,
+                  ExtendedDocumentStatus.DRAFT,
+                  ExtendedDocumentStatus.ALL,
+                ].map((value) => (
+                  <TabsTrigger
+                    key={value}
+                    className="hover:text-foreground min-w-[60px]"
+                    value={value}
+                    asChild
+                  >
+                    <Link to={getTabHref(value)} preventScrollReset>
+                      <DocumentStatus status={value} />
+
+                      {value !== ExtendedDocumentStatus.ALL && (
+                        <span className="ml-1 inline-block opacity-50">{stats[value]}</span>
+                      )}
+                    </Link>
+                  </TabsTrigger>
+                ))}
+              </TabsList>
+            </Tabs>
+
+            {team && <DocumentsTableSenderFilter teamId={team.id} />}
+
+            <div className="flex w-48 flex-wrap items-center justify-between gap-x-2 gap-y-4">
+              <PeriodSelector />
+            </div>
+            <div className="flex w-48 flex-wrap items-center justify-between gap-x-2 gap-y-4">
+              <DocumentSearch initialValue={findDocumentSearchParams.query} />
+            </div>
+          </div>
+        </div>
+
+        <div className="mt-8">
+          <div>
+            {data &&
+            data.count === 0 &&
+            (!foldersData?.folders.length || foldersData.folders.length === 0) ? (
+              <DocumentsTableEmptyState
+                status={findDocumentSearchParams.status || ExtendedDocumentStatus.ALL}
+              />
+            ) : (
+              <DocumentsTable
+                data={data}
+                isLoading={isLoading}
+                isLoadingError={isLoadingError}
+                onMoveDocument={(documentId) => {
+                  setDocumentToMove(documentId);
+                  setIsMovingDocument(true);
+                }}
+              />
+            )}
+
+            <DocumentProcessingPoll documents={data?.data} />
+          </div>
+        </div>
+
+        {documentToMove && (
+          <DocumentMoveToFolderDialog
+            documentId={documentToMove}
+            open={isMovingDocument}
+            onOpenChange={(open) => {
+              setIsMovingDocument(open);
+
+              if (!open) {
+                setDocumentToMove(null);
+              }
+            }}
+            currentFolderId={folderId}
+          />
+        )}
+
+        <FolderMoveDialog
+          foldersData={foldersData?.folders}
+          folder={folderToMove}
+          isOpen={isMovingFolder}
+          onOpenChange={(open) => {
+            setIsMovingFolder(open);
+
+            if (!open) {
+              setFolderToMove(null);
+            }
+          }}
+        />
+
+        <FolderSettingsDialog
+          folder={folderToSettings}
+          isOpen={isSettingsFolderOpen}
+          onOpenChange={(open) => {
+            setIsSettingsFolderOpen(open);
+
+            if (!open) {
+              setFolderToSettings(null);
+            }
+          }}
+        />
+
+        <FolderDeleteDialog
+          folder={folderToDelete}
+          isOpen={isDeletingFolder}
+          onOpenChange={(open) => {
+            setIsDeletingFolder(open);
+
+            if (!open) {
+              setFolderToDelete(null);
+            }
+          }}
+        />
+      </div>
+    </DocumentDropZoneWrapper>
+  );
+}

apps/remix/app/routes/_authenticated+/t.$teamUrl+/documents.folders._index.tsx

@@ -1,7 +1,7 @@
 import { useState } from 'react';
 
-import { Trans, useLingui } from '@lingui/react/macro';
-import { HomeIcon, Loader2, SearchIcon } from 'lucide-react';
+import { Trans } from '@lingui/react/macro';
+import { HomeIcon, Loader2 } from 'lucide-react';
 import { useNavigate } from 'react-router';
 
 import { FolderType } from '@documenso/lib/types/folder-type';
@@ -9,12 +9,11 @@ import { formatDocumentsPath } from '@documenso/lib/utils/teams';
 import { trpc } from '@documenso/trpc/react';
 import { type TFolderWithSubfolders } from '@documenso/trpc/server/folder-router/schema';
 import { Button } from '@documenso/ui/primitives/button';
-import { Input } from '@documenso/ui/primitives/input';
 
-import { FolderCreateDialog } from '~/components/dialogs/folder-create-dialog';
+import { CreateFolderDialog } from '~/components/dialogs/folder-create-dialog';
 import { FolderDeleteDialog } from '~/components/dialogs/folder-delete-dialog';
 import { FolderMoveDialog } from '~/components/dialogs/folder-move-dialog';
-import { FolderUpdateDialog } from '~/components/dialogs/folder-update-dialog';
+import { FolderSettingsDialog } from '~/components/dialogs/folder-settings-dialog';
 import { FolderCard } from '~/components/general/folder/folder-card';
 import { useCurrentTeam } from '~/providers/team';
 import { appMetaTags } from '~/utils/meta';
@@ -24,8 +23,6 @@ export function meta() {
 }
 
 export default function DocumentsFoldersPage() {
-  const { t } = useLingui();
-
   const navigate = useNavigate();
   const team = useCurrentTeam();
 
@@ -35,7 +32,6 @@ export default function DocumentsFoldersPage() {
   const [folderToDelete, setFolderToDelete] = useState<TFolderWithSubfolders | null>(null);
   const [isSettingsFolderOpen, setIsSettingsFolderOpen] = useState(false);
   const [folderToSettings, setFolderToSettings] = useState<TFolderWithSubfolders | null>(null);
-  const [searchTerm, setSearchTerm] = useState('');
 
   const { data: foldersData, isLoading: isFoldersLoading } = trpc.folder.getFolders.useQuery({
     type: FolderType.DOCUMENT,
@@ -55,9 +51,6 @@ export default function DocumentsFoldersPage() {
     }
   };
 
-  const isFolderMatchingSearch = (folder: TFolderWithSubfolders) =>
-    folder.name.toLowerCase().includes(searchTerm.toLowerCase());
-
   return (
     <div className="mx-auto w-full max-w-screen-xl px-4 md:px-8">
       <div className="flex w-full items-center justify-between">
@@ -74,41 +67,60 @@ export default function DocumentsFoldersPage() {
         </div>
 
         <div className="flex flex-col gap-y-4 sm:flex-row sm:justify-end sm:gap-x-4">
-          <FolderCreateDialog type={FolderType.DOCUMENT} />
+          <CreateFolderDialog />
         </div>
       </div>
 
-      <div className="relative w-full max-w-md py-6">
-        <SearchIcon className="text-muted-foreground absolute left-2 top-9 h-4 w-4" />
-        <Input
-          placeholder={t`Search folders...`}
-          value={searchTerm}
-          onChange={(e) => setSearchTerm(e.target.value)}
-          className="pl-8"
-        />
-      </div>
+      <div className="mt-6">
+        {isFoldersLoading ? (
+          <div className="mt-6 flex justify-center">
+            <Loader2 className="text-muted-foreground h-8 w-8 animate-spin" />
+          </div>
+        ) : (
+          <>
+            {foldersData?.folders?.some((folder) => folder.pinned) && (
+              <div className="mt-6">
+                <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
+                  {foldersData.folders
+                    .filter((folder) => folder.pinned)
+                    .map((folder) => (
+                      <FolderCard
+                        key={folder.id}
+                        folder={folder}
+                        onNavigate={navigateToFolder}
+                        onMove={(folder) => {
+                          setFolderToMove(folder);
+                          setIsMovingFolder(true);
+                        }}
+                        onPin={(folderId) => void pinFolder({ folderId })}
+                        onUnpin={(folderId) => void unpinFolder({ folderId })}
+                        onSettings={(folder) => {
+                          setFolderToSettings(folder);
+                          setIsSettingsFolderOpen(true);
+                        }}
+                        onDelete={(folder) => {
+                          setFolderToDelete(folder);
+                          setIsDeletingFolder(true);
+                        }}
+                      />
+                    ))}
+                </div>
+              </div>
+            )}
 
-      <h1 className="mt-4 truncate text-2xl font-semibold md:text-3xl">
-        <Trans>All Folders</Trans>
-      </h1>
+            <div className="mt-12">
+              <h1 className="truncate text-2xl font-semibold md:text-3xl">
+                <Trans>All Folders</Trans>
+              </h1>
 
-      {isFoldersLoading ? (
-        <div className="mt-6 flex justify-center">
-          <Loader2 className="text-muted-foreground h-8 w-8 animate-spin" />
-        </div>
-      ) : (
-        <>
-          {foldersData?.folders?.some(
-            (folder) => folder.pinned && isFolderMatchingSearch(folder),
-          ) && (
-            <div className="mt-6">
-              <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
-                {foldersData.folders
-                  .filter((folder) => folder.pinned && isFolderMatchingSearch(folder))
+              <div className="mt-6 grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
+                {foldersData?.folders
+                  .filter((folder) => !folder.pinned)
                   .map((folder) => (
                     <FolderCard
                       key={folder.id}
                       folder={folder}
+                      onNavigate={navigateToFolder}
                       onMove={(folder) => {
                         setFolderToMove(folder);
                         setIsMovingFolder(true);
@@ -127,42 +139,9 @@ export default function DocumentsFoldersPage() {
                   ))}
               </div>
             </div>
-          )}
-
-          <div>
-            {searchTerm && foldersData?.folders.filter(isFolderMatchingSearch).length === 0 && (
-              <div className="text-muted-foreground mt-6 text-center">
-                <Trans>No folders found matching "{searchTerm}"</Trans>
-              </div>
-            )}
-
-            <div className="mt-6 grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
-              {foldersData?.folders
-                .filter((folder) => !folder.pinned)
-                .map((folder) => (
-                  <FolderCard
-                    key={folder.id}
-                    folder={folder}
-                    onMove={(folder) => {
-                      setFolderToMove(folder);
-                      setIsMovingFolder(true);
-                    }}
-                    onPin={(folderId) => void pinFolder({ folderId })}
-                    onUnpin={(folderId) => void unpinFolder({ folderId })}
-                    onSettings={(folder) => {
-                      setFolderToSettings(folder);
-                      setIsSettingsFolderOpen(true);
-                    }}
-                    onDelete={(folder) => {
-                      setFolderToDelete(folder);
-                      setIsDeletingFolder(true);
-                    }}
-                  />
-                ))}
-            </div>
-          </div>
-        </>
-      )}
+          </>
+        )}
+      </div>
 
       <FolderMoveDialog
         foldersData={foldersData?.folders}
@@ -177,7 +156,7 @@ export default function DocumentsFoldersPage() {
         }}
       />
 
-      <FolderUpdateDialog
+      <FolderSettingsDialog
         folder={folderToSettings}
         isOpen={isSettingsFolderOpen}
         onOpenChange={(open) => {
@@ -189,19 +168,17 @@ export default function DocumentsFoldersPage() {
         }}
       />
 
-      {folderToDelete && (
-        <FolderDeleteDialog
-          folder={folderToDelete}
-          isOpen={isDeletingFolder}
-          onOpenChange={(open) => {
-            setIsDeletingFolder(open);
+      <FolderDeleteDialog
+        folder={folderToDelete}
+        isOpen={isDeletingFolder}
+        onOpenChange={(open) => {
+          setIsDeletingFolder(open);
 
-            if (!open) {
-              setFolderToDelete(null);
-            }
-          }}
-        />
-      )}
+          if (!open) {
+            setFolderToDelete(null);
+          }
+        }}
+      />
     </div>
   );
 }

apps/remix/app/routes/_authenticated+/t.$teamUrl+/settings.webhooks.$id.tsx

@@ -2,14 +2,13 @@ import { zodResolver } from '@hookform/resolvers/zod';
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
+import { Loader } from 'lucide-react';
 import { useForm } from 'react-hook-form';
 import { useRevalidator } from 'react-router';
-import { Link } from 'react-router';
 import type { z } from 'zod';
 
 import { trpc } from '@documenso/trpc/react';
 import { ZEditWebhookRequestSchema } from '@documenso/trpc/server/webhook-router/schema';
-import { Alert, AlertDescription, AlertTitle } from '@documenso/ui/primitives/alert';
 import { Button } from '@documenso/ui/primitives/button';
 import {
   Form,
@@ -22,12 +21,9 @@ import {
 } from '@documenso/ui/primitives/form/form';
 import { Input } from '@documenso/ui/primitives/input';
 import { PasswordInput } from '@documenso/ui/primitives/password-input';
-import { SpinnerBox } from '@documenso/ui/primitives/spinner';
 import { Switch } from '@documenso/ui/primitives/switch';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
-import { WebhookTestDialog } from '~/components/dialogs/webhook-test-dialog';
-import { GenericErrorLayout } from '~/components/general/generic-error-layout';
 import { SettingsHeader } from '~/components/general/settings-header';
 import { WebhookMultiSelectCombobox } from '~/components/general/webhook-multiselect-combobox';
 import { useCurrentTeam } from '~/providers/team';
@@ -96,45 +92,25 @@ export default function WebhookPage({ params }: Route.ComponentProps) {
     }
   };
 
-  if (isLoading) {
-    return <SpinnerBox className="py-32" />;
-  }
-
-  // Todo: Update UI, currently out of place.
-  if (!webhook) {
-    return (
-      <GenericErrorLayout
-        errorCode={404}
-        errorCodeMap={{
-          404: {
-            heading: msg`Webhook not found`,
-            subHeading: msg`404 Webhook not found`,
-            message: msg`The webhook you are looking for may have been removed, renamed or may have never
-                    existed.`,
-          },
-        }}
-        primaryButton={
-          <Button asChild>
-            <Link to={`/t/${team.url}/settings/webhooks`}>
-              <Trans>Go back</Trans>
-            </Link>
-          </Button>
-        }
-        secondaryButton={null}
-      />
-    );
-  }
-
   return (
-    <div className="max-w-2xl">
+    <div>
       <SettingsHeader
         title={_(msg`Edit webhook`)}
         subtitle={_(msg`On this page, you can edit the webhook and its settings.`)}
       />
 
+      {isLoading && (
+        <div className="absolute inset-0 z-50 flex items-center justify-center bg-white/50">
+          <Loader className="h-8 w-8 animate-spin text-gray-500" />
+        </div>
+      )}
+
       <Form {...form}>
         <form onSubmit={form.handleSubmit(onSubmit)}>
-          <fieldset className="flex h-full flex-col gap-y-6" disabled={form.formState.isSubmitting}>
+          <fieldset
+            className="flex h-full max-w-xl flex-col gap-y-6"
+            disabled={form.formState.isSubmitting}
+          >
             <div className="flex flex-col-reverse gap-4 md:flex-row">
               <FormField
                 control={form.control}
@@ -227,7 +203,7 @@ export default function WebhookPage({ params }: Route.ComponentProps) {
               )}
             />
 
-            <div className="flex justify-end gap-4">
+            <div className="mt-4">
               <Button type="submit" loading={form.formState.isSubmitting}>
                 <Trans>Update webhook</Trans>
               </Button>
@@ -235,30 +211,6 @@ export default function WebhookPage({ params }: Route.ComponentProps) {
           </fieldset>
         </form>
       </Form>
-
-      <Alert
-        className="mt-6 flex flex-col items-center justify-between gap-4 p-6 md:flex-row"
-        variant="neutral"
-      >
-        <div>
-          <AlertTitle>
-            <Trans>Test Webhook</Trans>
-          </AlertTitle>
-          <AlertDescription className="mr-2">
-            <Trans>
-              Send a test webhook with sample data to verify your integration is working correctly.
-            </Trans>
-          </AlertDescription>
-        </div>
-
-        <div className="flex-shrink-0">
-          <WebhookTestDialog webhook={webhook}>
-            <Button variant="outline" disabled={!webhook.enabled}>
-              <Trans>Test Webhook</Trans>
-            </Button>
-          </WebhookTestDialog>
-        </div>
-      </Alert>
     </div>
   );
 }

apps/remix/app/routes/_authenticated+/t.$teamUrl+/settings.webhooks._index.tsx

@@ -54,7 +54,7 @@ export default function WebhookPage() {
         </div>
       )}
       {webhooks && webhooks.length > 0 && (
-        <div className="mt-4 flex max-w-2xl flex-col gap-y-4">
+        <div className="mt-4 flex max-w-xl flex-col gap-y-4">
           {webhooks?.map((webhook) => (
             <div
               key={webhook.id}

apps/remix/app/routes/_authenticated+/t.$teamUrl+/templates._index.tsx

@@ -1,14 +1,23 @@
+import { useEffect, useState } from 'react';
+
 import { Trans } from '@lingui/react/macro';
-import { Bird } from 'lucide-react';
-import { useParams, useSearchParams } from 'react-router';
+import { Bird, FolderIcon, HomeIcon, Loader2 } from 'lucide-react';
+import { useNavigate, useSearchParams } from 'react-router';
 
 import { FolderType } from '@documenso/lib/types/folder-type';
 import { formatAvatarUrl } from '@documenso/lib/utils/avatars';
 import { formatDocumentsPath, formatTemplatesPath } from '@documenso/lib/utils/teams';
 import { trpc } from '@documenso/trpc/react';
+import type { TFolderWithSubfolders } from '@documenso/trpc/server/folder-router/schema';
 import { Avatar, AvatarFallback, AvatarImage } from '@documenso/ui/primitives/avatar';
+import { Button } from '@documenso/ui/primitives/button';
 
-import { FolderGrid } from '~/components/general/folder/folder-grid';
+import { TemplateCreateDialog } from '~/components/dialogs/template-create-dialog';
+import { TemplateFolderCreateDialog } from '~/components/dialogs/template-folder-create-dialog';
+import { TemplateFolderDeleteDialog } from '~/components/dialogs/template-folder-delete-dialog';
+import { TemplateFolderMoveDialog } from '~/components/dialogs/template-folder-move-dialog';
+import { TemplateFolderSettingsDialog } from '~/components/dialogs/template-folder-settings-dialog';
+import { FolderCard } from '~/components/general/folder/folder-card';
 import { TemplatesTable } from '~/components/tables/templates-table';
 import { useCurrentTeam } from '~/providers/team';
 import { appMetaTags } from '~/utils/meta';
@@ -18,10 +27,20 @@ export function meta() {
 }
 
 export default function TemplatesPage() {
+  const navigate = useNavigate();
+  const [searchParams] = useSearchParams();
+
+  const [isMovingFolder, setIsMovingFolder] = useState(false);
+  const [folderToMove, setFolderToMove] = useState<TFolderWithSubfolders | null>(null);
+  const [isDeletingFolder, setIsDeletingFolder] = useState(false);
+  const [folderToDelete, setFolderToDelete] = useState<TFolderWithSubfolders | null>(null);
+  const [isSettingsFolderOpen, setIsSettingsFolderOpen] = useState(false);
+  const [folderToSettings, setFolderToSettings] = useState<TFolderWithSubfolders | null>(null);
+
   const team = useCurrentTeam();
 
-  const { folderId } = useParams();
-  const [searchParams] = useSearchParams();
+  const { mutateAsync: pinFolder } = trpc.folder.pinFolder.useMutation();
+  const { mutateAsync: unpinFolder } = trpc.folder.unpinFolder.useMutation();
 
   const page = Number(searchParams.get('page')) || 1;
   const perPage = Number(searchParams.get('perPage')) || 10;
@@ -29,24 +48,174 @@ export default function TemplatesPage() {
   const documentRootPath = formatDocumentsPath(team.url);
   const templateRootPath = formatTemplatesPath(team.url);
 
-  const { data, isLoading, isLoadingError } = trpc.template.findTemplates.useQuery({
+  const { data, isLoading, isLoadingError, refetch } = trpc.template.findTemplates.useQuery({
     page: page,
     perPage: perPage,
-    folderId,
   });
 
+  const {
+    data: foldersData,
+    isLoading: isFoldersLoading,
+    refetch: refetchFolders,
+  } = trpc.folder.getFolders.useQuery({
+    type: FolderType.TEMPLATE,
+    parentId: null,
+  });
+
+  useEffect(() => {
+    void refetch();
+    void refetchFolders();
+  }, [team.url]);
+
+  const navigateToFolder = (folderId?: string | null) => {
+    const templatesPath = formatTemplatesPath(team.url);
+
+    if (folderId) {
+      void navigate(`${templatesPath}/f/${folderId}`);
+    } else {
+      void navigate(templatesPath);
+    }
+  };
+
+  const handleNavigate = (folderId: string) => {
+    navigateToFolder(folderId);
+  };
+
+  const handleMove = (folder: TFolderWithSubfolders) => {
+    setFolderToMove(folder);
+    setIsMovingFolder(true);
+  };
+
+  const handlePin = (folderId: string) => {
+    void pinFolder({ folderId });
+  };
+
+  const handleUnpin = (folderId: string) => {
+    void unpinFolder({ folderId });
+  };
+
+  const handleSettings = (folder: TFolderWithSubfolders) => {
+    setFolderToSettings(folder);
+    setIsSettingsFolderOpen(true);
+  };
+
+  const handleDelete = (folder: TFolderWithSubfolders) => {
+    setFolderToDelete(folder);
+    setIsDeletingFolder(true);
+  };
+
+  const handleViewAllFolders = () => {
+    void navigate(`${formatTemplatesPath(team.url)}/folders`);
+  };
+
   return (
     <div className="mx-auto max-w-screen-xl px-4 md:px-8">
-      <FolderGrid type={FolderType.TEMPLATE} parentId={folderId ?? null} />
+      <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
+        <div className="flex flex-1 items-center">
+          <Button
+            variant="ghost"
+            size="sm"
+            className="flex items-center space-x-2 pl-0 hover:bg-transparent"
+            onClick={() => navigateToFolder(null)}
+          >
+            <HomeIcon className="h-4 w-4" />
+            <span>Home</span>
+          </Button>
 
-      <div className="mt-8">
+          {foldersData?.breadcrumbs.map((folder) => (
+            <div key={folder.id} className="flex items-center space-x-2">
+              <span>/</span>
+              <Button
+                variant="ghost"
+                size="sm"
+                className="flex items-center space-x-2 pl-1 hover:bg-transparent"
+                onClick={() => navigateToFolder(folder.id)}
+              >
+                <FolderIcon className="h-4 w-4" />
+                <span>{folder.name}</span>
+              </Button>
+            </div>
+          ))}
+        </div>
+
+        <div className="flex gap-4 sm:flex-row sm:justify-end">
+          <TemplateCreateDialog templateRootPath={templateRootPath} />
+          <TemplateFolderCreateDialog />
+        </div>
+      </div>
+
+      {isFoldersLoading ? (
+        <div className="mt-6 flex justify-center">
+          <Loader2 className="text-muted-foreground h-8 w-8 animate-spin" />
+        </div>
+      ) : (
+        <>
+          {foldersData?.folders && foldersData.folders.some((folder) => folder.pinned) && (
+            <div className="mt-6">
+              <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
+                {foldersData.folders
+                  .filter((folder) => folder.pinned)
+                  .map((folder) => (
+                    <FolderCard
+                      key={folder.id}
+                      folder={folder}
+                      onNavigate={handleNavigate}
+                      onMove={handleMove}
+                      onPin={handlePin}
+                      onUnpin={handleUnpin}
+                      onSettings={handleSettings}
+                      onDelete={handleDelete}
+                    />
+                  ))}
+              </div>
+            </div>
+          )}
+
+          <div className="mt-6">
+            <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
+              {foldersData?.folders
+                ?.filter((folder) => !folder.pinned)
+                .slice(0, 12)
+                .map((folder) => (
+                  <FolderCard
+                    key={folder.id}
+                    folder={folder}
+                    onNavigate={handleNavigate}
+                    onMove={handleMove}
+                    onPin={handlePin}
+                    onUnpin={handleUnpin}
+                    onSettings={handleSettings}
+                    onDelete={handleDelete}
+                  />
+                ))}
+            </div>
+
+            <div className="mt-6 flex items-center justify-center">
+              {foldersData && foldersData.folders?.length > 12 && (
+                <Button
+                  variant="link"
+                  size="sm"
+                  className="text-muted-foreground hover:text-foreground"
+                  onClick={() => void handleViewAllFolders()}
+                >
+                  View all folders
+                </Button>
+              )}
+            </div>
+          </div>
+        </>
+      )}
+
+      <div className="mt-12">
         <div className="flex flex-row items-center">
-          <Avatar className="dark:border-border mr-3 h-12 w-12 border-2 border-solid border-white">
-            {team.avatarImageId && <AvatarImage src={formatAvatarUrl(team.avatarImageId)} />}
-            <AvatarFallback className="text-muted-foreground text-xs">
-              {team.name.slice(0, 1)}
-            </AvatarFallback>
-          </Avatar>
+          {team && (
+            <Avatar className="dark:border-border mr-3 h-12 w-12 border-2 border-solid border-white">
+              {team.avatarImageId && <AvatarImage src={formatAvatarUrl(team.avatarImageId)} />}
+              <AvatarFallback className="text-muted-foreground text-xs">
+                {team.name.slice(0, 1)}
+              </AvatarFallback>
+            </Avatar>
+          )}
 
           <h1 className="truncate text-2xl font-semibold md:text-3xl">
             <Trans>Templates</Trans>
@@ -81,6 +250,43 @@ export default function TemplatesPage() {
           )}
         </div>
       </div>
+
+      <TemplateFolderMoveDialog
+        foldersData={foldersData?.folders}
+        folder={folderToMove}
+        isOpen={isMovingFolder}
+        onOpenChange={(open) => {
+          setIsMovingFolder(open);
+
+          if (!open) {
+            setFolderToMove(null);
+          }
+        }}
+      />
+
+      <TemplateFolderSettingsDialog
+        folder={folderToSettings}
+        isOpen={isSettingsFolderOpen}
+        onOpenChange={(open) => {
+          setIsSettingsFolderOpen(open);
+
+          if (!open) {
+            setFolderToSettings(null);
+          }
+        }}
+      />
+
+      <TemplateFolderDeleteDialog
+        folder={folderToDelete}
+        isOpen={isDeletingFolder}
+        onOpenChange={(open) => {
+          setIsDeletingFolder(open);
+
+          if (!open) {
+            setFolderToDelete(null);
+          }
+        }}
+      />
     </div>
   );
 }

apps/remix/app/routes/_authenticated+/t.$teamUrl+/templates.f.$folderId._index.tsx

@@ -1,5 +1,369 @@
-import TemplatesPage, { meta } from './templates._index';
+import { useEffect, useState } from 'react';
 
-export { meta };
+import { Trans } from '@lingui/react/macro';
+import { Bird, FolderIcon, HomeIcon, Loader2, PinIcon } from 'lucide-react';
+import { useNavigate, useParams, useSearchParams } from 'react-router';
 
-export default TemplatesPage;
+import { FolderType } from '@documenso/lib/types/folder-type';
+import { formatAvatarUrl } from '@documenso/lib/utils/avatars';
+import { formatDocumentsPath, formatTemplatesPath } from '@documenso/lib/utils/teams';
+import { trpc } from '@documenso/trpc/react';
+import type { TFolderWithSubfolders } from '@documenso/trpc/server/folder-router/schema';
+import { Avatar, AvatarFallback, AvatarImage } from '@documenso/ui/primitives/avatar';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@documenso/ui/primitives/dropdown-menu';
+
+import { FolderDeleteDialog } from '~/components/dialogs/folder-delete-dialog';
+import { FolderMoveDialog } from '~/components/dialogs/folder-move-dialog';
+import { FolderSettingsDialog } from '~/components/dialogs/folder-settings-dialog';
+import { TemplateCreateDialog } from '~/components/dialogs/template-create-dialog';
+import { TemplateFolderCreateDialog } from '~/components/dialogs/template-folder-create-dialog';
+import { TemplatesTable } from '~/components/tables/templates-table';
+import { useCurrentTeam } from '~/providers/team';
+import { appMetaTags } from '~/utils/meta';
+
+export function meta() {
+  return appMetaTags('Templates');
+}
+
+export default function TemplatesPage() {
+  const [searchParams] = useSearchParams();
+  const { folderId } = useParams();
+  const navigate = useNavigate();
+
+  const team = useCurrentTeam();
+
+  const page = Number(searchParams.get('page')) || 1;
+  const perPage = Number(searchParams.get('perPage')) || 10;
+
+  const documentRootPath = formatDocumentsPath(team.url);
+  const templateRootPath = formatTemplatesPath(team.url);
+
+  const { data, isLoading, isLoadingError, refetch } = trpc.template.findTemplates.useQuery({
+    page: page,
+    perPage: perPage,
+    folderId: folderId,
+  });
+
+  const {
+    data: foldersData,
+    isLoading: isFoldersLoading,
+    refetch: refetchFolders,
+  } = trpc.folder.getFolders.useQuery({
+    parentId: folderId,
+    type: FolderType.TEMPLATE,
+  });
+
+  const { mutateAsync: pinFolder } = trpc.folder.pinFolder.useMutation();
+  const { mutateAsync: unpinFolder } = trpc.folder.unpinFolder.useMutation();
+
+  const [folderToMove, setFolderToMove] = useState<TFolderWithSubfolders | null>(null);
+  const [isMovingFolder, setIsMovingFolder] = useState(false);
+  const [folderToSettings, setFolderToSettings] = useState<TFolderWithSubfolders | null>(null);
+  const [isSettingsFolderOpen, setIsSettingsFolderOpen] = useState(false);
+  const [folderToDelete, setFolderToDelete] = useState<TFolderWithSubfolders | null>(null);
+  const [isDeletingFolder, setIsDeletingFolder] = useState(false);
+
+  useEffect(() => {
+    void refetch();
+    void refetchFolders();
+  }, [team?.url]);
+
+  const navigateToFolder = (folderId?: string) => {
+    const templatesPath = formatTemplatesPath(team.url);
+
+    if (folderId) {
+      void navigate(`${templatesPath}/f/${folderId}`);
+    } else {
+      void navigate(templatesPath);
+    }
+  };
+
+  return (
+    <div className="mx-auto max-w-screen-xl px-4 md:px-8">
+      <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
+        <div className="flex flex-1 items-center">
+          <Button
+            variant="ghost"
+            size="sm"
+            className="flex items-center space-x-2 pl-0 hover:bg-transparent"
+            onClick={() => navigateToFolder()}
+          >
+            <HomeIcon className="h-4 w-4" />
+            <span>Home</span>
+          </Button>
+
+          {foldersData?.breadcrumbs.map((folder) => (
+            <div key={folder.id} className="flex items-center space-x-2">
+              <span>/</span>
+              <Button
+                variant="ghost"
+                size="sm"
+                className="flex items-center space-x-2 pl-1 hover:bg-transparent"
+                onClick={() => navigateToFolder(folder.id)}
+              >
+                <FolderIcon className="h-4 w-4" />
+                <span>{folder.name}</span>
+              </Button>
+            </div>
+          ))}
+        </div>
+
+        <div className="flex gap-4 sm:flex-row sm:justify-end">
+          <TemplateFolderCreateDialog />
+          <TemplateCreateDialog templateRootPath={templateRootPath} folderId={folderId} />
+        </div>
+      </div>
+
+      {isFoldersLoading ? (
+        <div className="mt-6 flex justify-center">
+          <Loader2 className="text-muted-foreground h-8 w-8 animate-spin" />
+        </div>
+      ) : (
+        <>
+          {foldersData?.folders.some((folder) => folder.pinned) && (
+            <div className="mt-6">
+              <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
+                {foldersData?.folders
+                  .filter((folder) => folder.pinned)
+                  .map((folder) => (
+                    <div
+                      key={folder.id}
+                      className="border-border hover:border-muted-foreground/40 group relative flex flex-col rounded-lg border p-4 transition-all hover:shadow-sm"
+                    >
+                      <div className="flex items-start justify-between">
+                        <button
+                          className="flex items-center space-x-2 text-left"
+                          onClick={() => navigateToFolder(folder.id)}
+                        >
+                          <FolderIcon className="text-documenso h-6 w-6" />
+                          <div>
+                            <div className="flex items-center gap-2">
+                              <h3 className="font-medium">{folder.name}</h3>
+                              <PinIcon className="text-documenso h-3 w-3" />
+                            </div>
+                            <div className="mt-1 flex space-x-2 text-xs text-gray-500">
+                              <span>{folder._count.templates || 0} templates</span>
+                              <span>•</span>
+                              <span>{folder._count.subfolders} folders</span>
+                            </div>
+                          </div>
+                        </button>
+
+                        <DropdownMenu>
+                          <DropdownMenuTrigger asChild>
+                            <Button
+                              variant="ghost"
+                              size="sm"
+                              className="opacity-0 group-hover:opacity-100"
+                            >
+                              •••
+                            </Button>
+                          </DropdownMenuTrigger>
+                          <DropdownMenuContent align="end">
+                            <DropdownMenuItem
+                              onClick={() => {
+                                setFolderToMove(folder);
+                                setIsMovingFolder(true);
+                              }}
+                            >
+                              Move
+                            </DropdownMenuItem>
+                            <DropdownMenuItem
+                              onClick={() => {
+                                void unpinFolder({ folderId: folder.id });
+                              }}
+                            >
+                              Unpin
+                            </DropdownMenuItem>
+                            <DropdownMenuItem
+                              onClick={() => {
+                                setFolderToSettings(folder);
+                                setIsSettingsFolderOpen(true);
+                              }}
+                            >
+                              Settings
+                            </DropdownMenuItem>
+                            <DropdownMenuItem
+                              className="text-red-500"
+                              onClick={() => {
+                                setFolderToDelete(folder);
+                                setIsDeletingFolder(true);
+                              }}
+                            >
+                              Delete
+                            </DropdownMenuItem>
+                          </DropdownMenuContent>
+                        </DropdownMenu>
+                      </div>
+                    </div>
+                  ))}
+              </div>
+            </div>
+          )}
+
+          <div className="mt-6 grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
+            {foldersData?.folders
+              .filter((folder) => !folder.pinned)
+              .map((folder) => (
+                <div
+                  key={folder.id}
+                  className="border-border hover:border-muted-foreground/40 group relative flex flex-col rounded-lg border p-4 transition-all hover:shadow-sm"
+                >
+                  <div className="flex items-start justify-between">
+                    <button
+                      className="flex items-center space-x-2 text-left"
+                      onClick={() => navigateToFolder(folder.id)}
+                    >
+                      <FolderIcon className="text-documenso h-6 w-6" />
+                      <div>
+                        <h3 className="font-medium">{folder.name}</h3>
+                        <div className="mt-1 flex space-x-2 text-xs text-gray-500">
+                          <span>{folder._count.templates || 0} templates</span>
+                          <span>•</span>
+                          <span>{folder._count.subfolders} folders</span>
+                        </div>
+                      </div>
+                    </button>
+
+                    <DropdownMenu>
+                      <DropdownMenuTrigger asChild>
+                        <Button
+                          variant="ghost"
+                          size="sm"
+                          className="opacity-0 group-hover:opacity-100"
+                        >
+                          •••
+                        </Button>
+                      </DropdownMenuTrigger>
+                      <DropdownMenuContent align="end">
+                        <DropdownMenuItem
+                          onClick={() => {
+                            setFolderToMove(folder);
+                            setIsMovingFolder(true);
+                          }}
+                        >
+                          Move
+                        </DropdownMenuItem>
+                        <DropdownMenuItem
+                          onClick={() => {
+                            void pinFolder({ folderId: folder.id });
+                          }}
+                        >
+                          Pin
+                        </DropdownMenuItem>
+                        <DropdownMenuItem
+                          onClick={() => {
+                            setFolderToSettings(folder);
+                            setIsSettingsFolderOpen(true);
+                          }}
+                        >
+                          Settings
+                        </DropdownMenuItem>
+                        <DropdownMenuItem
+                          className="text-red-500"
+                          onClick={() => {
+                            setFolderToDelete(folder);
+                            setIsDeletingFolder(true);
+                          }}
+                        >
+                          Delete
+                        </DropdownMenuItem>
+                      </DropdownMenuContent>
+                    </DropdownMenu>
+                  </div>
+                </div>
+              ))}
+          </div>
+        </>
+      )}
+
+      <div className="relative mt-12">
+        <div className="flex flex-row items-center">
+          {team && (
+            <Avatar className="dark:border-border mr-3 h-12 w-12 border-2 border-solid border-white">
+              {team.avatarImageId && <AvatarImage src={formatAvatarUrl(team.avatarImageId)} />}
+              <AvatarFallback className="text-muted-foreground text-xs">
+                {team.name.slice(0, 1)}
+              </AvatarFallback>
+            </Avatar>
+          )}
+
+          <h1 className="truncate text-2xl font-semibold md:text-3xl">
+            <Trans>Templates</Trans>
+          </h1>
+        </div>
+
+        <div className="mt-8">
+          {data && data.count === 0 ? (
+            <div className="text-muted-foreground/60 flex h-96 flex-col items-center justify-center gap-y-4">
+              <Bird className="h-12 w-12" strokeWidth={1.5} />
+
+              <div className="text-center">
+                <h3 className="text-lg font-semibold">
+                  <Trans>We're all empty</Trans>
+                </h3>
+
+                <p className="mt-2 max-w-[50ch]">
+                  <Trans>
+                    You have not yet created any templates. To create a template please upload one.
+                  </Trans>
+                </p>
+              </div>
+            </div>
+          ) : (
+            <TemplatesTable
+              data={data}
+              isLoading={isLoading}
+              isLoadingError={isLoadingError}
+              documentRootPath={documentRootPath}
+              templateRootPath={templateRootPath}
+            />
+          )}
+        </div>
+      </div>
+
+      <FolderMoveDialog
+        foldersData={foldersData?.folders}
+        folder={folderToMove}
+        isOpen={isMovingFolder}
+        onOpenChange={(open) => {
+          setIsMovingFolder(open);
+
+          if (!open) {
+            setFolderToMove(null);
+          }
+        }}
+      />
+
+      <FolderSettingsDialog
+        folder={folderToSettings}
+        isOpen={isSettingsFolderOpen}
+        onOpenChange={(open) => {
+          setIsSettingsFolderOpen(open);
+
+          if (!open) {
+            setFolderToSettings(null);
+          }
+        }}
+      />
+
+      <FolderDeleteDialog
+        folder={folderToDelete}
+        isOpen={isDeletingFolder}
+        onOpenChange={(open) => {
+          setIsDeletingFolder(open);
+
+          if (!open) {
+            setFolderToDelete(null);
+          }
+        }}
+      />
+    </div>
+  );
+}

apps/remix/app/routes/_authenticated+/t.$teamUrl+/templates.folders._index.tsx

@@ -1,7 +1,7 @@
 import { useState } from 'react';
 
-import { Trans, useLingui } from '@lingui/react/macro';
-import { HomeIcon, Loader2, SearchIcon } from 'lucide-react';
+import { Trans } from '@lingui/react/macro';
+import { HomeIcon, Loader2 } from 'lucide-react';
 import { useNavigate } from 'react-router';
 
 import { FolderType } from '@documenso/lib/types/folder-type';
@@ -9,12 +9,11 @@ import { formatTemplatesPath } from '@documenso/lib/utils/teams';
 import { trpc } from '@documenso/trpc/react';
 import { type TFolderWithSubfolders } from '@documenso/trpc/server/folder-router/schema';
 import { Button } from '@documenso/ui/primitives/button';
-import { Input } from '@documenso/ui/primitives/input';
 
-import { FolderCreateDialog } from '~/components/dialogs/folder-create-dialog';
-import { FolderDeleteDialog } from '~/components/dialogs/folder-delete-dialog';
-import { FolderMoveDialog } from '~/components/dialogs/folder-move-dialog';
-import { FolderUpdateDialog } from '~/components/dialogs/folder-update-dialog';
+import { TemplateFolderCreateDialog } from '~/components/dialogs/template-folder-create-dialog';
+import { TemplateFolderDeleteDialog } from '~/components/dialogs/template-folder-delete-dialog';
+import { TemplateFolderMoveDialog } from '~/components/dialogs/template-folder-move-dialog';
+import { TemplateFolderSettingsDialog } from '~/components/dialogs/template-folder-settings-dialog';
 import { FolderCard } from '~/components/general/folder/folder-card';
 import { useCurrentTeam } from '~/providers/team';
 import { appMetaTags } from '~/utils/meta';
@@ -24,8 +23,6 @@ export function meta() {
 }
 
 export default function TemplatesFoldersPage() {
-  const { t } = useLingui();
-
   const navigate = useNavigate();
   const team = useCurrentTeam();
 
@@ -35,7 +32,6 @@ export default function TemplatesFoldersPage() {
   const [folderToDelete, setFolderToDelete] = useState<TFolderWithSubfolders | null>(null);
   const [isSettingsFolderOpen, setIsSettingsFolderOpen] = useState(false);
   const [folderToSettings, setFolderToSettings] = useState<TFolderWithSubfolders | null>(null);
-  const [searchTerm, setSearchTerm] = useState('');
 
   const { data: foldersData, isLoading: isFoldersLoading } = trpc.folder.getFolders.useQuery({
     type: FolderType.TEMPLATE,
@@ -55,9 +51,6 @@ export default function TemplatesFoldersPage() {
     }
   };
 
-  const isFolderMatchingSearch = (folder: TFolderWithSubfolders) =>
-    folder.name.toLowerCase().includes(searchTerm.toLowerCase());
-
   return (
     <div className="mx-auto w-full max-w-screen-xl px-4 md:px-8">
       <div className="flex w-full items-center justify-between">
@@ -74,41 +67,60 @@ export default function TemplatesFoldersPage() {
         </div>
 
         <div className="flex flex-col gap-y-4 sm:flex-row sm:justify-end sm:gap-x-4">
-          <FolderCreateDialog type={FolderType.TEMPLATE} />
+          <TemplateFolderCreateDialog />
         </div>
       </div>
 
-      <div className="relative w-full max-w-md py-6">
-        <SearchIcon className="text-muted-foreground absolute left-2 top-9 h-4 w-4" />
-        <Input
-          placeholder={t`Search folders...`}
-          value={searchTerm}
-          onChange={(e) => setSearchTerm(e.target.value)}
-          className="pl-8"
-        />
-      </div>
+      <div className="mt-6">
+        {isFoldersLoading ? (
+          <div className="mt- flex justify-center">
+            <Loader2 className="text-muted-foreground h-8 w-8 animate-spin" />
+          </div>
+        ) : (
+          <>
+            {foldersData?.folders?.some((folder) => folder.pinned) && (
+              <div className="mt-6">
+                <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
+                  {foldersData.folders
+                    .filter((folder) => folder.pinned)
+                    .map((folder) => (
+                      <FolderCard
+                        key={folder.id}
+                        folder={folder}
+                        onNavigate={navigateToFolder}
+                        onMove={(folder) => {
+                          setFolderToMove(folder);
+                          setIsMovingFolder(true);
+                        }}
+                        onPin={(folderId) => void pinFolder({ folderId })}
+                        onUnpin={(folderId) => void unpinFolder({ folderId })}
+                        onSettings={(folder) => {
+                          setFolderToSettings(folder);
+                          setIsSettingsFolderOpen(true);
+                        }}
+                        onDelete={(folder) => {
+                          setFolderToDelete(folder);
+                          setIsDeletingFolder(true);
+                        }}
+                      />
+                    ))}
+                </div>
+              </div>
+            )}
 
-      <h1 className="mt-4 truncate text-2xl font-semibold md:text-3xl">
-        <Trans>All Folders</Trans>
-      </h1>
+            <div className="mt-12">
+              <h1 className="truncate text-2xl font-semibold md:text-3xl">
+                <Trans>All Folders</Trans>
+              </h1>
 
-      {isFoldersLoading ? (
-        <div className="mt- flex justify-center">
-          <Loader2 className="text-muted-foreground h-8 w-8 animate-spin" />
-        </div>
-      ) : (
-        <>
-          {foldersData?.folders?.some(
-            (folder) => folder.pinned && isFolderMatchingSearch(folder),
-          ) && (
-            <div className="mt-6">
-              <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
-                {foldersData.folders
-                  .filter((folder) => folder.pinned && isFolderMatchingSearch(folder))
+              <div className="mt-6 grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
+                {foldersData?.folders
+                  .filter((folder) => !folder.pinned)
                   .map((folder) => (
                     <FolderCard
                       key={folder.id}
                       folder={folder}
+                      onNavigate={navigateToFolder}
                       onMove={(folder) => {
                         setFolderToMove(folder);
                         setIsMovingFolder(true);
@@ -127,44 +139,11 @@ export default function TemplatesFoldersPage() {
                   ))}
               </div>
             </div>
-          )}
+          </>
+        )}
+      </div>
 
-          <div>
-            {searchTerm && foldersData?.folders.filter(isFolderMatchingSearch).length === 0 && (
-              <div className="text-muted-foreground mt-6 text-center">
-                <Trans>No folders found matching "{searchTerm}"</Trans>
-              </div>
-            )}
-
-            <div className="mt-6 grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
-              {foldersData?.folders
-                .filter((folder) => !folder.pinned && isFolderMatchingSearch(folder))
-                .map((folder) => (
-                  <FolderCard
-                    key={folder.id}
-                    folder={folder}
-                    onMove={(folder) => {
-                      setFolderToMove(folder);
-                      setIsMovingFolder(true);
-                    }}
-                    onPin={(folderId) => void pinFolder({ folderId })}
-                    onUnpin={(folderId) => void unpinFolder({ folderId })}
-                    onSettings={(folder) => {
-                      setFolderToSettings(folder);
-                      setIsSettingsFolderOpen(true);
-                    }}
-                    onDelete={(folder) => {
-                      setFolderToDelete(folder);
-                      setIsDeletingFolder(true);
-                    }}
-                  />
-                ))}
-            </div>
-          </div>
-        </>
-      )}
-
-      <FolderMoveDialog
+      <TemplateFolderMoveDialog
         foldersData={foldersData?.folders}
         folder={folderToMove}
         isOpen={isMovingFolder}
@@ -177,7 +156,7 @@ export default function TemplatesFoldersPage() {
         }}
       />
 
-      <FolderUpdateDialog
+      <TemplateFolderSettingsDialog
         folder={folderToSettings}
         isOpen={isSettingsFolderOpen}
         onOpenChange={(open: boolean) => {
@@ -189,19 +168,17 @@ export default function TemplatesFoldersPage() {
         }}
       />
 
-      {folderToDelete && (
-        <FolderDeleteDialog
-          folder={folderToDelete}
-          isOpen={isDeletingFolder}
-          onOpenChange={(open: boolean) => {
-            setIsDeletingFolder(open);
+      <TemplateFolderDeleteDialog
+        folder={folderToDelete}
+        isOpen={isDeletingFolder}
+        onOpenChange={(open: boolean) => {
+          setIsDeletingFolder(open);
 
-            if (!open) {
-              setFolderToDelete(null);
-            }
-          }}
-        />
-      )}
+          if (!open) {
+            setFolderToDelete(null);
+          }
+        }}
+      />
     </div>
   );
 }

apps/remix/app/routes/_recipient+/sign.$token+/complete.tsx

@@ -3,8 +3,14 @@ import { useEffect } from 'react';
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
-import { type Document, DocumentStatus, FieldType, RecipientRole } from '@prisma/client';
-import { CheckCircle2, Clock8, FileSearch } from 'lucide-react';
+import {
+  type Document,
+  DocumentStatus,
+  FieldType,
+  RecipientRole,
+  SigningStatus,
+} from '@prisma/client';
+import { CheckCircle2, Clock8, FileSearch, Loader2 } from 'lucide-react';
 import { Link, useRevalidator } from 'react-router';
 import { match } from 'ts-pattern';
 
@@ -16,10 +22,11 @@ import { isRecipientAuthorized } from '@documenso/lib/server-only/document/is-re
 import { getFieldsForToken } from '@documenso/lib/server-only/field/get-fields-for-token';
 import { getRecipientByToken } from '@documenso/lib/server-only/recipient/get-recipient-by-token';
 import { getRecipientSignatures } from '@documenso/lib/server-only/recipient/get-recipient-signatures';
+import { getAllRecipientsByDocumentId } from '@documenso/lib/server-only/recipient/get-recipients-for-document';
 import { getUserByEmail } from '@documenso/lib/server-only/user/get-user-by-email';
 import { isDocumentCompleted } from '@documenso/lib/utils/document';
 import { env } from '@documenso/lib/utils/env';
-import DocumentDialog from '@documenso/ui/components/document/document-dialog';
+import { DocumentDialog } from '@documenso/ui/components/document/document-dialog';
 import { DocumentDownloadButton } from '@documenso/ui/components/document/document-download-button';
 import { DocumentShareButton } from '@documenso/ui/components/document/document-share-button';
 import { SigningCard3D } from '@documenso/ui/components/signing-card';
@@ -50,9 +57,10 @@ export async function loader({ params, request }: Route.LoaderArgs) {
     throw new Response('Not Found', { status: 404 });
   }
 
-  const [fields, recipient] = await Promise.all([
+  const [fields, recipient, allRecipients] = await Promise.all([
     getFieldsForToken({ token }),
     getRecipientByToken({ token }).catch(() => null),
+    getAllRecipientsByDocumentId({ documentId: document.id }),
   ]);
 
   if (!recipient) {
@@ -66,17 +74,26 @@ export async function loader({ params, request }: Route.LoaderArgs) {
     userId: user?.id,
   });
 
+  const isDocumentWaitingForSignatureFromOthers =
+    allRecipients.length > 1 &&
+    allRecipients.some(
+      (r) => r.role !== RecipientRole.CC && r.signingStatus !== SigningStatus.SIGNED,
+    );
+
   if (!isDocumentAccessValid) {
     return {
       isDocumentAccessValid: false,
       recipientEmail: recipient.email,
+      isDocumentWaitingForSignatureFromOthers,
     } as const;
   }
 
   const signatures = await getRecipientSignatures({ recipientId: recipient.id });
-  const isExistingUser = await getUserByEmail({ email: recipient.email })
-    .then((u) => !!u)
-    .catch(() => false);
+  const isExistingUser = recipient.email
+    ? await getUserByEmail({ email: recipient.email })
+        .then((u) => !!u)
+        .catch(() => false)
+    : false;
 
   const recipientName =
     recipient.name ||
@@ -93,6 +110,7 @@ export async function loader({ params, request }: Route.LoaderArgs) {
     signatures,
     document,
     recipient,
+    isDocumentWaitingForSignatureFromOthers,
   };
 }
 
@@ -110,10 +128,11 @@ export default function CompletedSigningPage({ loaderData }: Route.ComponentProp
     document,
     recipient,
     recipientEmail,
+    isDocumentWaitingForSignatureFromOthers,
   } = loaderData;
 
   if (!isDocumentAccessValid) {
-    return <DocumentSigningAuthPageView email={recipientEmail} />;
+    return <DocumentSigningAuthPageView email={recipientEmail ?? ''} />;
   }
 
   return (
@@ -142,7 +161,7 @@ export default function CompletedSigningPage({ loaderData }: Route.ComponentProp
 
           {/* Card with recipient */}
           <SigningCard3D
-            name={recipientName}
+            name={recipientName ?? ''}
             signature={signatures.at(0)}
             signingCelebrationImage={signingCelebration}
           />
@@ -153,7 +172,11 @@ export default function CompletedSigningPage({ loaderData }: Route.ComponentProp
             {recipient.role === RecipientRole.APPROVER && <Trans>Document Approved</Trans>}
           </h2>
 
-          {match({ status: document.status, deletedAt: document.deletedAt })
+          {match({
+            status: document.status,
+            deletedAt: document.deletedAt,
+            waitingForOthers: isDocumentWaitingForSignatureFromOthers,
+          })
             .with({ status: DocumentStatus.COMPLETED }, () => (
               <div className="text-documenso-700 mt-4 flex items-center text-center">
                 <CheckCircle2 className="mr-2 h-5 w-5" />
@@ -162,7 +185,15 @@ export default function CompletedSigningPage({ loaderData }: Route.ComponentProp
                 </span>
               </div>
             ))
-            .with({ deletedAt: null }, () => (
+            .with({ deletedAt: null, waitingForOthers: false }, () => (
+              <div className="mt-4 flex items-center text-center text-blue-600">
+                <Loader2 className="mr-2 h-5 w-5 animate-spin" />
+                <span className="text-sm">
+                  <Trans>Processing document...</Trans>
+                </span>
+              </div>
+            ))
+            .with({ deletedAt: null, waitingForOthers: true }, () => (
               <div className="mt-4 flex items-center text-center text-blue-600">
                 <Clock8 className="mr-2 h-5 w-5" />
                 <span className="text-sm">
@@ -179,7 +210,11 @@ export default function CompletedSigningPage({ loaderData }: Route.ComponentProp
               </div>
             ))}
 
-          {match({ status: document.status, deletedAt: document.deletedAt })
+          {match({
+            status: document.status,
+            deletedAt: document.deletedAt,
+            waitingForOthers: isDocumentWaitingForSignatureFromOthers,
+          })
             .with({ status: DocumentStatus.COMPLETED }, () => (
               <p className="text-muted-foreground/60 mt-2.5 max-w-[60ch] text-center text-sm font-medium md:text-base">
                 <Trans>
@@ -187,7 +222,15 @@ export default function CompletedSigningPage({ loaderData }: Route.ComponentProp
                 </Trans>
               </p>
             ))
-            .with({ deletedAt: null }, () => (
+            .with({ deletedAt: null, waitingForOthers: false }, () => (
+              <p className="text-muted-foreground/60 mt-2.5 max-w-[60ch] text-center text-sm font-medium md:text-base">
+                <Trans>
+                  All parties have completed their actions. The document is now being finalized. You
+                  will receive an Email copy once it is ready.
+                </Trans>
+              </p>
+            ))
+            .with({ deletedAt: null, waitingForOthers: true }, () => (
               <p className="text-muted-foreground/60 mt-2.5 max-w-[60ch] text-center text-sm font-medium md:text-base">
                 <Trans>
                   You will receive an Email copy of the signed document once everyone has signed.
@@ -244,7 +287,10 @@ export default function CompletedSigningPage({ loaderData }: Route.ComponentProp
                 </Trans>
               </p>
 
-              <ClaimAccount defaultName={recipientName} defaultEmail={recipient.email} />
+              <ClaimAccount
+                defaultName={recipientName ?? ''}
+                defaultEmail={recipient.email ?? ''}
+              />
             </div>
           )}
 

apps/remix/app/routes/_unauthenticated+/articles.signature-disclosure.tsx

@@ -1,9 +1,10 @@
 import { Trans } from '@lingui/react/macro';
 import { Link } from 'react-router';
 
-import { SUPPORT_EMAIL } from '@documenso/lib/constants/app';
 import { Button } from '@documenso/ui/primitives/button';
 
+const SUPPORT_EMAIL = 'support@documenso.com';
+
 export default function SignatureDisclosure() {
   return (
     <div>

apps/remix/package.json

@@ -41,7 +41,6 @@
     "colord": "^2.9.3",
     "framer-motion": "^10.12.8",
     "hono": "4.7.0",
-    "hono-rate-limiter": "^0.4.2",
     "hono-react-router-adapter": "^0.6.2",
     "input-otp": "^1.2.4",
     "isbot": "^5.1.17",
@@ -101,5 +100,5 @@
     "vite-plugin-babel-macros": "^1.0.6",
     "vite-tsconfig-paths": "^5.1.4"
   },
-  "version": "1.12.2-rc.2"
+  "version": "1.12.0-rc.3"
 }

apps/remix/server/router.ts

@@ -1,16 +1,10 @@
 import { Hono } from 'hono';
-import { rateLimiter } from 'hono-rate-limiter';
 import { contextStorage } from 'hono/context-storage';
-import { requestId } from 'hono/request-id';
-import type { RequestIdVariables } from 'hono/request-id';
-import type { Logger } from 'pino';
 
 import { tsRestHonoApp } from '@documenso/api/hono';
 import { auth } from '@documenso/auth/server';
 import { API_V2_BETA_URL } from '@documenso/lib/constants/app';
 import { jobsClient } from '@documenso/lib/jobs/client';
-import { getIpAddress } from '@documenso/lib/universal/get-ip-address';
-import { logger } from '@documenso/lib/utils/logger';
 import { openApiDocument } from '@documenso/trpc/server/open-api';
 
 import { filesRoute } from './api/files';
@@ -20,33 +14,13 @@ import { openApiTrpcServerHandler } from './trpc/hono-trpc-open-api';
 import { reactRouterTrpcServer } from './trpc/hono-trpc-remix';
 
 export interface HonoEnv {
-  Variables: RequestIdVariables & {
+  Variables: {
     context: AppContext;
-    logger: Logger;
   };
 }
 
 const app = new Hono<HonoEnv>();
 
-/**
- * Rate limiting for v1 and v2 API routes only.
- * - 100 requests per minute per IP address
- */
-const rateLimitMiddleware = rateLimiter({
-  windowMs: 60 * 1000, // 1 minute
-  limit: 100, // 100 requests per window
-  keyGenerator: (c) => {
-    try {
-      return getIpAddress(c.req.raw);
-    } catch (error) {
-      return 'unknown';
-    }
-  },
-  message: {
-    error: 'Too many requests, please try again later.',
-  },
-});
-
 /**
  * Attach session and context to requests.
  */
@@ -57,24 +31,6 @@ app.use(appContext);
  * RR7 app middleware.
  */
 app.use('*', appMiddleware);
-app.use('*', requestId());
-app.use(async (c, next) => {
-  const metadata = c.get('context').requestMetadata;
-
-  const honoLogger = logger.child({
-    requestId: c.var.requestId,
-    ipAddress: metadata.ipAddress,
-    userAgent: metadata.userAgent,
-  });
-
-  c.set('logger', honoLogger);
-
-  await next();
-});
-
-// Apply rate limit to /api/v1/*
-app.use('/api/v1/*', rateLimitMiddleware);
-app.use('/api/v2/*', rateLimitMiddleware);
 
 // Auth server.
 app.route('/api/auth', auth);

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@documenso/root",
-  "version": "1.12.2-rc.2",
+  "version": "1.12.0-rc.3",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@documenso/root",
-      "version": "1.12.2-rc.2",
+      "version": "1.12.0-rc.3",
       "workspaces": [
         "apps/*",
         "packages/*"
@@ -89,7 +89,7 @@
     },
     "apps/remix": {
       "name": "@documenso/remix",
-      "version": "1.12.2-rc.2",
+      "version": "1.12.0-rc.3",
       "dependencies": {
         "@documenso/api": "*",
         "@documenso/assets": "*",
@@ -118,7 +118,6 @@
         "colord": "^2.9.3",
         "framer-motion": "^10.12.8",
         "hono": "4.7.0",
-        "hono-rate-limiter": "^0.4.2",
         "hono-react-router-adapter": "^0.6.2",
         "input-otp": "^1.2.4",
         "isbot": "^5.1.17",
@@ -3073,6 +3072,36 @@
       "integrity": "sha512-lhqDEAvWixy3bZ+UOYbPwUbBkwBq5C1LAJ/xPC8Oi+lL54oyakv/npbA0aU2hgCsx/1NUd4IBvV03+aUBWxerw==",
       "license": "MIT"
     },
+    "node_modules/@honeybadger-io/core": {
+      "version": "6.7.0",
+      "resolved": "https://registry.npmjs.org/@honeybadger-io/core/-/core-6.7.0.tgz",
+      "integrity": "sha512-bEXRe2UVbfr9q3434/2eO3AHguUT0froYEqrHfTPphR4Aw6+AlFac0YE8elqDZqUSgRQ6m1OXqxmq/HOF+W6LQ==",
+      "license": "MIT",
+      "dependencies": {
+        "json-nd": "^1.0.0",
+        "stacktrace-parser": "^0.1.10"
+      },
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/@honeybadger-io/js": {
+      "version": "6.11.0",
+      "resolved": "https://registry.npmjs.org/@honeybadger-io/js/-/js-6.11.0.tgz",
+      "integrity": "sha512-nSibKUr9ccrs6Jb3Ql7uO/4MdEEv3ONGP1CrD0w3zSMHUvQKHe43NPYfESA7btxjrf9PVeV+m6ETP/193BSILg==",
+      "license": "MIT",
+      "dependencies": {
+        "@honeybadger-io/core": "^6.7.0",
+        "@types/aws-lambda": "^8.10.89",
+        "@types/express": "^4.17.13"
+      },
+      "bin": {
+        "honeybadger-checkins-sync": "scripts/check-ins-sync-bin.js"
+      },
+      "engines": {
+        "node": ">=14"
+      }
+    },
     "node_modules/@hono/node-server": {
       "version": "1.14.2",
       "resolved": "https://registry.npmjs.org/@hono/node-server/-/node-server-1.14.2.tgz",
@@ -11685,6 +11714,16 @@
         "@babel/types": "^7.20.7"
       }
     },
+    "node_modules/@types/body-parser": {
+      "version": "1.19.5",
+      "resolved": "https://registry.npmjs.org/@types/body-parser/-/body-parser-1.19.5.tgz",
+      "integrity": "sha512-fB3Zu92ucau0iQ0JMCFQE7b/dv8Ot07NI3KaZIkIUNXq82k4eBAqUaneXfleGY9JWskeS9y+u0nXMyspcuQrCg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/connect": "*",
+        "@types/node": "*"
+      }
+    },
     "node_modules/@types/bunyan": {
       "version": "1.8.11",
       "resolved": "https://registry.npmjs.org/@types/bunyan/-/bunyan-1.8.11.tgz",
@@ -11805,6 +11844,30 @@
         "@types/estree": "*"
       }
     },
+    "node_modules/@types/express": {
+      "version": "4.17.22",
+      "resolved": "https://registry.npmjs.org/@types/express/-/express-4.17.22.tgz",
+      "integrity": "sha512-eZUmSnhRX9YRSkplpz0N+k6NljUUn5l3EWZIKZvYzhvMphEuNiyyy1viH/ejgt66JWgALwC/gtSUAeQKtSwW/w==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/body-parser": "*",
+        "@types/express-serve-static-core": "^4.17.33",
+        "@types/qs": "*",
+        "@types/serve-static": "*"
+      }
+    },
+    "node_modules/@types/express-serve-static-core": {
+      "version": "4.19.6",
+      "resolved": "https://registry.npmjs.org/@types/express-serve-static-core/-/express-serve-static-core-4.19.6.tgz",
+      "integrity": "sha512-N4LZ2xG7DatVqhCZzOGb1Yi5lMbXSZcmdLDe9EzSndPV2HpWYWzRbaerl2n27irrm94EPpprqa8KpskPT085+A==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*",
+        "@types/qs": "*",
+        "@types/range-parser": "*",
+        "@types/send": "*"
+      }
+    },
     "node_modules/@types/formidable": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/@types/formidable/-/formidable-2.0.6.tgz",
@@ -11834,6 +11897,12 @@
         "hoist-non-react-statics": "^3.3.0"
       }
     },
+    "node_modules/@types/http-errors": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/@types/http-errors/-/http-errors-2.0.4.tgz",
+      "integrity": "sha512-D0CFMMtydbJAegzOyHjtiKPLlvnm3iTZyZRSZoLq2mRhDdmLfIWOCYPfQJ4cu2erKghU++QvjcUjp/5h7hESpA==",
+      "license": "MIT"
+    },
     "node_modules/@types/istanbul-lib-coverage": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.6.tgz",
@@ -11907,6 +11976,12 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@types/mime": {
+      "version": "1.3.5",
+      "resolved": "https://registry.npmjs.org/@types/mime/-/mime-1.3.5.tgz",
+      "integrity": "sha512-/pyBZWSLD2n0dcHE3hq8s8ZvcETHtEuF+3E7XVt0Ig2nvsVQXdghHVcEkIWjy9A0wKfTn97a/PSDYohKIlnP/w==",
+      "license": "MIT"
+    },
     "node_modules/@types/minimist": {
       "version": "1.2.5",
       "resolved": "https://registry.npmjs.org/@types/minimist/-/minimist-1.2.5.tgz",
@@ -11994,6 +12069,12 @@
       "integrity": "sha512-gNMvNH49DJ7OJYv+KAKn0Xp45p8PLl6zo2YnvDIbTd4J6MER2BmWN49TG7n9LvkyihINxeKW8+3bfS2yDC9dzQ==",
       "license": "MIT"
     },
+    "node_modules/@types/qs": {
+      "version": "6.14.0",
+      "resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.14.0.tgz",
+      "integrity": "sha512-eOunJqu0K1923aExK6y8p6fsihYEn/BYuQ4g0CxAAgFc4b/ZLN4CrsRZ55srTdqoiLzU2B2evC+apEIxprEzkQ==",
+      "license": "MIT"
+    },
     "node_modules/@types/ramda": {
       "version": "0.30.2",
       "resolved": "https://registry.npmjs.org/@types/ramda/-/ramda-0.30.2.tgz",
@@ -12003,6 +12084,12 @@
         "types-ramda": "^0.30.1"
       }
     },
+    "node_modules/@types/range-parser": {
+      "version": "1.2.7",
+      "resolved": "https://registry.npmjs.org/@types/range-parser/-/range-parser-1.2.7.tgz",
+      "integrity": "sha512-hKormJbkJqzQGhziax5PItDUTMAM9uE2XXQmM37dyd4hVM+5aVl7oVxMVUiVQn2oCQFN/LKCZdvSM0pFRqbSmQ==",
+      "license": "MIT"
+    },
     "node_modules/@types/react": {
       "version": "18.3.5",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.5.tgz",
@@ -12036,6 +12123,27 @@
       "integrity": "sha512-wWKOClTTiizcZhXnPY4wikVAwmdYHp8q6DmC+EJUzAMsycb7HB32Kh9RN4+0gExjmPmZSAQjgURXIGATPegAvA==",
       "license": "MIT"
     },
+    "node_modules/@types/send": {
+      "version": "0.17.4",
+      "resolved": "https://registry.npmjs.org/@types/send/-/send-0.17.4.tgz",
+      "integrity": "sha512-x2EM6TJOybec7c52BX0ZspPodMsQUd5L6PRwOunVyVUhXiBSKf3AezDL8Dgvgt5o0UfKNfuA0eMLr2wLT4AiBA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mime": "^1",
+        "@types/node": "*"
+      }
+    },
+    "node_modules/@types/serve-static": {
+      "version": "1.15.7",
+      "resolved": "https://registry.npmjs.org/@types/serve-static/-/serve-static-1.15.7.tgz",
+      "integrity": "sha512-W8Ym+h8nhuRwaKPaDw34QUkwsGi6Rc4yYqvKFo5rm2FUEhCFbzVWrxXUxuKK8TASjWsysJY0nsmNCGhCOIsrOw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/http-errors": "*",
+        "@types/node": "*",
+        "@types/send": "*"
+      }
+    },
     "node_modules/@types/shimmer": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/@types/shimmer/-/shimmer-1.2.0.tgz",
@@ -13203,15 +13311,6 @@
       "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
       "license": "MIT"
     },
-    "node_modules/atomic-sleep": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/atomic-sleep/-/atomic-sleep-1.0.0.tgz",
-      "integrity": "sha512-kNOjDqAh7px0XWNI+4QbzoiR/nTkHAWNud2uvnJquD1/x5a7EQZMJT0AczqK0Qn67oY/TTQ1LbUKajZpp3I9tQ==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=8.0.0"
-      }
-    },
     "node_modules/attr-accept": {
       "version": "2.2.5",
       "resolved": "https://registry.npmjs.org/attr-accept/-/attr-accept-2.2.5.tgz",
@@ -14837,6 +14936,7 @@
       "version": "2.0.20",
       "resolved": "https://registry.npmjs.org/colorette/-/colorette-2.0.20.tgz",
       "integrity": "sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==",
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/colors": {
@@ -16018,15 +16118,6 @@
         "url": "https://github.com/sponsors/kossnocorp"
       }
     },
-    "node_modules/dateformat": {
-      "version": "4.6.3",
-      "resolved": "https://registry.npmjs.org/dateformat/-/dateformat-4.6.3.tgz",
-      "integrity": "sha512-2P0p0pFGzHS5EMnhdxQi7aJN+iMheud0UhG4dlE1DLAlvL8JHjJJTX/CSm4JXwV0Ka5nGk3zC5mcb5bUQUxxMA==",
-      "license": "MIT",
-      "engines": {
-        "node": "*"
-      }
-    },
     "node_modules/dayjs": {
       "version": "1.11.13",
       "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.13.tgz",
@@ -18149,12 +18240,6 @@
         "node": ">=4"
       }
     },
-    "node_modules/fast-copy": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/fast-copy/-/fast-copy-3.0.2.tgz",
-      "integrity": "sha512-dl0O9Vhju8IrcLndv2eU4ldt1ftXMqqfgN4H1cpmGV7P6jeB9FwpN9a2c8DPGE1Ys88rNUJVYDHq73CGAGOPfQ==",
-      "license": "MIT"
-    },
     "node_modules/fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
@@ -18223,21 +18308,6 @@
       "integrity": "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==",
       "license": "MIT"
     },
-    "node_modules/fast-redact": {
-      "version": "3.5.0",
-      "resolved": "https://registry.npmjs.org/fast-redact/-/fast-redact-3.5.0.tgz",
-      "integrity": "sha512-dwsoQlS7h9hMeYUq1W++23NDcBLV4KqONnITDV9DjfS3q1SgDGVrBdvvTLUotWtPSD7asWDV9/CmsZPy8Hf70A==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/fast-safe-stringify": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/fast-safe-stringify/-/fast-safe-stringify-2.1.1.tgz",
-      "integrity": "sha512-W+KJc2dmILlPplD/H4K9l9LcAHAfPtP6BY84uVLXQ6Evcz9Lcg33Y2z1IVblT6xdY54PXYVHEv+0Wpq8Io6zkA==",
-      "license": "MIT"
-    },
     "node_modules/fast-uri": {
       "version": "3.0.6",
       "resolved": "https://registry.npmjs.org/fast-uri/-/fast-uri-3.0.6.tgz",
@@ -20171,15 +20241,6 @@
         "node": ">=16.9.0"
       }
     },
-    "node_modules/hono-rate-limiter": {
-      "version": "0.4.2",
-      "resolved": "https://registry.npmjs.org/hono-rate-limiter/-/hono-rate-limiter-0.4.2.tgz",
-      "integrity": "sha512-AAtFqgADyrmbDijcRTT/HJfwqfvhalya2Zo+MgfdrMPas3zSMD8SU03cv+ZsYwRU1swv7zgVt0shwN059yzhjw==",
-      "license": "MIT",
-      "peerDependencies": {
-        "hono": "^4.1.1"
-      }
-    },
     "node_modules/hono-react-router-adapter": {
       "version": "0.6.5",
       "resolved": "https://registry.npmjs.org/hono-react-router-adapter/-/hono-react-router-adapter-0.6.5.tgz",
@@ -21582,6 +21643,7 @@
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/joycon/-/joycon-3.1.1.tgz",
       "integrity": "sha512-34wB/Y7MW7bzjKRjUKTa46I2Z7eV62Rkhva+KkopW7Qvv/OSWBqvkSY7vusOPrNuZcUG3tApvdVgNB8POj3SPw==",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=10"
@@ -21790,6 +21852,12 @@
       "integrity": "sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==",
       "license": "MIT"
     },
+    "node_modules/json-nd": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/json-nd/-/json-nd-1.0.0.tgz",
+      "integrity": "sha512-8TIp0HZAY0VVrwRQJJPb4+nOTSPoOWZeEKBTLizUfQO4oym5Fc/MKqN8vEbLCxcyxDf2vwNxOQ1q84O49GWPyQ==",
+      "license": "BSD-3-Clause"
+    },
     "node_modules/json-parse-even-better-errors": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
@@ -26006,15 +26074,6 @@
       "integrity": "sha512-PX1wu0AmAdPqOL1mWhqmlOd8kOIZQwGZw6rh7uby9fTc5lhaOWFLX3I6R1hrF9k3zUY40e6igsLGkDXK92LJNg==",
       "license": "MIT"
     },
-    "node_modules/on-exit-leak-free": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/on-exit-leak-free/-/on-exit-leak-free-2.1.2.tgz",
-      "integrity": "sha512-0eJJY6hXLGf1udHwfNftBqH+g73EU4B504nZeKpz1sYRKafAghwxEJunB2O7rDZkL4PGfsMVnTXZ2EjibbqcsA==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=14.0.0"
-      }
-    },
     "node_modules/on-finished": {
       "version": "2.4.1",
       "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.4.1.tgz",
@@ -26834,82 +26893,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/pino": {
-      "version": "9.7.0",
-      "resolved": "https://registry.npmjs.org/pino/-/pino-9.7.0.tgz",
-      "integrity": "sha512-vnMCM6xZTb1WDmLvtG2lE/2p+t9hDEIvTWJsu6FejkE62vB7gDhvzrpFR4Cw2to+9JNQxVnkAKVPA1KPB98vWg==",
-      "license": "MIT",
-      "dependencies": {
-        "atomic-sleep": "^1.0.0",
-        "fast-redact": "^3.1.1",
-        "on-exit-leak-free": "^2.1.0",
-        "pino-abstract-transport": "^2.0.0",
-        "pino-std-serializers": "^7.0.0",
-        "process-warning": "^5.0.0",
-        "quick-format-unescaped": "^4.0.3",
-        "real-require": "^0.2.0",
-        "safe-stable-stringify": "^2.3.1",
-        "sonic-boom": "^4.0.1",
-        "thread-stream": "^3.0.0"
-      },
-      "bin": {
-        "pino": "bin.js"
-      }
-    },
-    "node_modules/pino-abstract-transport": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/pino-abstract-transport/-/pino-abstract-transport-2.0.0.tgz",
-      "integrity": "sha512-F63x5tizV6WCh4R6RHyi2Ml+M70DNRXt/+HANowMflpgGFMAym/VKm6G7ZOQRjqN7XbGxK1Lg9t6ZrtzOaivMw==",
-      "license": "MIT",
-      "dependencies": {
-        "split2": "^4.0.0"
-      }
-    },
-    "node_modules/pino-abstract-transport/node_modules/split2": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/split2/-/split2-4.2.0.tgz",
-      "integrity": "sha512-UcjcJOWknrNkF6PLX83qcHM6KHgVKNkV62Y8a5uYDVv9ydGQVwAHMKqHdJje1VTWpljG0WYpCDhrCdAOYH4TWg==",
-      "license": "ISC",
-      "engines": {
-        "node": ">= 10.x"
-      }
-    },
-    "node_modules/pino-pretty": {
-      "version": "13.0.0",
-      "resolved": "https://registry.npmjs.org/pino-pretty/-/pino-pretty-13.0.0.tgz",
-      "integrity": "sha512-cQBBIVG3YajgoUjo1FdKVRX6t9XPxwB9lcNJVD5GCnNM4Y6T12YYx8c6zEejxQsU0wrg9TwmDulcE9LR7qcJqA==",
-      "license": "MIT",
-      "dependencies": {
-        "colorette": "^2.0.7",
-        "dateformat": "^4.6.3",
-        "fast-copy": "^3.0.2",
-        "fast-safe-stringify": "^2.1.1",
-        "help-me": "^5.0.0",
-        "joycon": "^3.1.1",
-        "minimist": "^1.2.6",
-        "on-exit-leak-free": "^2.1.0",
-        "pino-abstract-transport": "^2.0.0",
-        "pump": "^3.0.0",
-        "secure-json-parse": "^2.4.0",
-        "sonic-boom": "^4.0.1",
-        "strip-json-comments": "^3.1.1"
-      },
-      "bin": {
-        "pino-pretty": "bin.js"
-      }
-    },
-    "node_modules/pino-pretty/node_modules/help-me": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/help-me/-/help-me-5.0.0.tgz",
-      "integrity": "sha512-7xgomUX6ADmcYzFik0HzAxh/73YlKR9bmFzf51CZwR+b6YtzU2m0u49hQCqV6SvlqIqsaxovfwdvbnsw3b/zpg==",
-      "license": "MIT"
-    },
-    "node_modules/pino-std-serializers": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/pino-std-serializers/-/pino-std-serializers-7.0.0.tgz",
-      "integrity": "sha512-e906FRY0+tV27iq4juKzSYPbUj2do2X2JX4EzSca1631EB2QJQUqGbDuERal7LCtOpxl6x3+nvo9NPZcmjkiFA==",
-      "license": "MIT"
-    },
     "node_modules/pirates": {
       "version": "4.0.7",
       "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.7.tgz",
@@ -27787,22 +27770,6 @@
       "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==",
       "license": "MIT"
     },
-    "node_modules/process-warning": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/process-warning/-/process-warning-5.0.0.tgz",
-      "integrity": "sha512-a39t9ApHNx2L4+HBnQKqxxHNs1r7KF+Intd8Q/g1bUh6q0WIp9voPXJ/x0j+ZL45KF1pJd9+q2jLIRMfvEshkA==",
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/fastify"
-        },
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/fastify"
-        }
-      ],
-      "license": "MIT"
-    },
     "node_modules/progress": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/progress/-/progress-2.0.3.tgz",
@@ -28040,12 +28007,6 @@
       ],
       "license": "MIT"
     },
-    "node_modules/quick-format-unescaped": {
-      "version": "4.0.4",
-      "resolved": "https://registry.npmjs.org/quick-format-unescaped/-/quick-format-unescaped-4.0.4.tgz",
-      "integrity": "sha512-tYC1Q1hgyRuHgloV/YXs2w15unPVh8qfu/qCTfhTYamaw7fyhumKa2yGpdSo87vY32rIclj+4fWYQXUMs9EHvg==",
-      "license": "MIT"
-    },
     "node_modules/quick-lru": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/quick-lru/-/quick-lru-4.0.1.tgz",
@@ -29437,15 +29398,6 @@
       "integrity": "sha512-onYyVhBNr4CmAxFsKS7bz+uTLRakypIe4R+5A824vBSkQy/hB3fZepoVEf8OVAxzLvK+H/jm9TzpI3ETSm64Kg==",
       "license": "MIT"
     },
-    "node_modules/real-require": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/real-require/-/real-require-0.2.0.tgz",
-      "integrity": "sha512-57frrGM/OCTLqLOAh0mhVA9VBMHd+9U7Zb2THMGdBUoZVOtGbJzjxsYGDJ3A9AYYCP4hn6y1TVbaOfzWtm5GFg==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 12.13.0"
-      }
-    },
     "node_modules/recharts": {
       "version": "2.15.3",
       "resolved": "https://registry.npmjs.org/recharts/-/recharts-2.15.3.tgz",
@@ -30497,15 +30449,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/safe-stable-stringify": {
-      "version": "2.5.0",
-      "resolved": "https://registry.npmjs.org/safe-stable-stringify/-/safe-stable-stringify-2.5.0.tgz",
-      "integrity": "sha512-b3rppTKm9T+PsVCBEOUR46GWI7fdOs00VKZ1+9c1EWDaDMvjQc6tUwuFyIprgGgTcWoVHSKrU8H31ZHA2e0RHA==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=10"
-      }
-    },
     "node_modules/safer-buffer": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
@@ -30571,12 +30514,6 @@
         "node": ">=4"
       }
     },
-    "node_modules/secure-json-parse": {
-      "version": "2.7.0",
-      "resolved": "https://registry.npmjs.org/secure-json-parse/-/secure-json-parse-2.7.0.tgz",
-      "integrity": "sha512-6aU+Rwsezw7VR8/nyvKTx8QpWH9FrcYiXXlqC4z5d5XQBDRqtbfsRjnwGyqbi3gddNtWHuEk9OANUotL26qKUw==",
-      "license": "BSD-3-Clause"
-    },
     "node_modules/selderee": {
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/selderee/-/selderee-0.11.0.tgz",
@@ -31138,15 +31075,6 @@
         "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
-    "node_modules/sonic-boom": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/sonic-boom/-/sonic-boom-4.2.0.tgz",
-      "integrity": "sha512-INb7TM37/mAcsGmc9hyyI6+QR3rR1zVRu36B0NeGXKnOOLiZOfER5SA+N7X7k3yUYRzLWafduTDvJAfDswwEww==",
-      "license": "MIT",
-      "dependencies": {
-        "atomic-sleep": "^1.0.0"
-      }
-    },
     "node_modules/sort-keys": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/sort-keys/-/sort-keys-5.1.0.tgz",
@@ -31376,6 +31304,27 @@
       "integrity": "sha512-+L3ccpzibovGXFK+Ap/f8LOS0ahMrHTf3xu7mMLSpEGU0EO9ucaysSylKo9eRDFNhWve/y275iPmIZ4z39a9iA==",
       "license": "MIT"
     },
+    "node_modules/stacktrace-parser": {
+      "version": "0.1.11",
+      "resolved": "https://registry.npmjs.org/stacktrace-parser/-/stacktrace-parser-0.1.11.tgz",
+      "integrity": "sha512-WjlahMgHmCJpqzU8bIBy4qtsZdU9lRlcZE3Lvyej6t4tuOuv1vk57OW3MBrj6hXBFx/nNoC9MPMTcr5YA7NQbg==",
+      "license": "MIT",
+      "dependencies": {
+        "type-fest": "^0.7.1"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/stacktrace-parser/node_modules/type-fest": {
+      "version": "0.7.1",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.7.1.tgz",
+      "integrity": "sha512-Ne2YiiGN8bmrmJJEuTWTLJR32nh/JdL1+PSicowtNb0WFpn59GK8/lfD61bVtzguz7b3PBt74nxpv/Pw5po5Rg==",
+      "license": "(MIT OR CC0-1.0)",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/statuses": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.1.tgz",
@@ -32391,15 +32340,6 @@
         "node": ">=0.8"
       }
     },
-    "node_modules/thread-stream": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/thread-stream/-/thread-stream-3.1.0.tgz",
-      "integrity": "sha512-OqyPZ9u96VohAyMfJykzmivOrY2wfMSf3C5TtFJVgN+Hm6aj+voFhlK+kZEIv2FBh1X6Xp3DlnCOfEQ3B2J86A==",
-      "license": "MIT",
-      "dependencies": {
-        "real-require": "^0.2.0"
-      }
-    },
     "node_modules/through": {
       "version": "2.3.8",
       "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz",
@@ -36044,6 +35984,7 @@
         "@documenso/email": "*",
         "@documenso/prisma": "*",
         "@documenso/signing": "*",
+        "@honeybadger-io/js": "^6.10.1",
         "@lingui/core": "^5.2.0",
         "@lingui/macro": "^5.2.0",
         "@lingui/react": "^5.2.0",
@@ -36064,8 +36005,6 @@
         "oslo": "^0.17.0",
         "pdf-lib": "^1.17.1",
         "pg": "^8.11.3",
-        "pino": "^9.7.0",
-        "pino-pretty": "^13.0.0",
         "playwright": "1.52.0",
         "posthog-js": "^1.245.0",
         "posthog-node": "^4.17.0",

package.json

@@ -1,6 +1,6 @@
 {
   "private": true,
-  "version": "1.12.2-rc.2",
+  "version": "1.12.0-rc.3",
   "scripts": {
     "build": "turbo run build",
     "dev": "turbo run dev --filter=@documenso/remix",

packages/api/hono.ts

@@ -8,12 +8,10 @@ import { testCredentialsHandler } from '@documenso/lib/server-only/public-api/te
 import { listDocumentsHandler } from '@documenso/lib/server-only/webhooks/zapier/list-documents';
 import { subscribeHandler } from '@documenso/lib/server-only/webhooks/zapier/subscribe';
 import { unsubscribeHandler } from '@documenso/lib/server-only/webhooks/zapier/unsubscribe';
-// This is a bit nasty. Todo: Extract
-import type { HonoEnv } from '@documenso/remix/server/router';
 
 // This is bad, ts-router will be created on each request.
 // But don't really have a choice here.
-export const tsRestHonoApp = new Hono<HonoEnv>();
+export const tsRestHonoApp = new Hono();
 
 tsRestHonoApp
   .get('/openapi', (c) => c.redirect('https://openapi-v1.documenso.com'))

packages/api/v1/implementation.ts

@@ -77,15 +77,9 @@ export const ApiContractV1Implementation = tsr.router(ApiContractV1, {
     };
   }),
 
-  getDocument: authenticatedMiddleware(async (args, user, team, { logger }) => {
+  getDocument: authenticatedMiddleware(async (args, user, team) => {
     const { id: documentId } = args.params;
 
-    logger.info({
-      input: {
-        id: documentId,
-      },
-    });
-
     try {
       const document = await getDocumentById({
         documentId: Number(documentId),
@@ -145,16 +139,10 @@ export const ApiContractV1Implementation = tsr.router(ApiContractV1, {
     }
   }),
 
-  downloadSignedDocument: authenticatedMiddleware(async (args, user, team, { logger }) => {
+  downloadSignedDocument: authenticatedMiddleware(async (args, user, team) => {
     const { id: documentId } = args.params;
     const { downloadOriginalDocument } = args.query;
 
-    logger.info({
-      input: {
-        id: documentId,
-      },
-    });
-
     try {
       if (process.env.NEXT_PUBLIC_UPLOAD_TRANSPORT !== 's3') {
         return {
@@ -216,15 +204,9 @@ export const ApiContractV1Implementation = tsr.router(ApiContractV1, {
     }
   }),
 
-  deleteDocument: authenticatedMiddleware(async (args, user, team, { logger, metadata }) => {
+  deleteDocument: authenticatedMiddleware(async (args, user, team, { metadata }) => {
     const { id: documentId } = args.params;
 
-    logger.info({
-      input: {
-        id: documentId,
-      },
-    });
-
     try {
       const document = await getDocumentById({
         documentId: Number(documentId),
@@ -400,15 +382,9 @@ export const ApiContractV1Implementation = tsr.router(ApiContractV1, {
     }
   }),
 
-  deleteTemplate: authenticatedMiddleware(async (args, user, team, { logger }) => {
+  deleteTemplate: authenticatedMiddleware(async (args, user, team) => {
     const { id: templateId } = args.params;
 
-    logger.info({
-      input: {
-        id: templateId,
-      },
-    });
-
     try {
       const deletedTemplate = await deleteTemplate({
         id: Number(templateId),
@@ -430,15 +406,9 @@ export const ApiContractV1Implementation = tsr.router(ApiContractV1, {
     }
   }),
 
-  getTemplate: authenticatedMiddleware(async (args, user, team, { logger }) => {
+  getTemplate: authenticatedMiddleware(async (args, user, team) => {
     const { id: templateId } = args.params;
 
-    logger.info({
-      input: {
-        id: templateId,
-      },
-    });
-
     try {
       const template = await getTemplateById({
         id: Number(templateId),
@@ -493,224 +463,202 @@ export const ApiContractV1Implementation = tsr.router(ApiContractV1, {
     }
   }),
 
-  createDocumentFromTemplate: authenticatedMiddleware(
-    async (args, user, team, { logger, metadata }) => {
-      const { body, params } = args;
+  createDocumentFromTemplate: authenticatedMiddleware(async (args, user, team, { metadata }) => {
+    const { body, params } = args;
 
-      logger.info({
-        input: {
-          templateId: params.templateId,
+    const { remaining } = await getServerLimits({ userId: user.id, teamId: team?.id });
+
+    if (remaining.documents <= 0) {
+      return {
+        status: 400,
+        body: {
+          message: 'You have reached the maximum number of documents allowed for this month',
         },
+      };
+    }
+
+    const templateId = Number(params.templateId);
+
+    const fileName = body.title.endsWith('.pdf') ? body.title : `${body.title}.pdf`;
+
+    const document = await createDocumentFromTemplateLegacy({
+      templateId,
+      userId: user.id,
+      teamId: team?.id,
+      recipients: body.recipients,
+    });
+
+    let documentDataId = document.documentDataId;
+
+    if (body.formValues) {
+      const pdf = await getFileServerSide(document.documentData);
+
+      const prefilled = await insertFormValuesInPdf({
+        pdf: Buffer.from(pdf),
+        formValues: body.formValues,
       });
 
-      const { remaining } = await getServerLimits({ userId: user.id, teamId: team?.id });
+      const newDocumentData = await putPdfFileServerSide({
+        name: fileName,
+        type: 'application/pdf',
+        arrayBuffer: async () => Promise.resolve(prefilled),
+      });
 
-      if (remaining.documents <= 0) {
-        return {
-          status: 400,
-          body: {
-            message: 'You have reached the maximum number of documents allowed for this month',
+      documentDataId = newDocumentData.id;
+    }
+
+    await updateDocument({
+      documentId: document.id,
+      userId: user.id,
+      teamId: team?.id,
+      data: {
+        title: fileName,
+        externalId: body.externalId || null,
+        formValues: body.formValues,
+        documentData: {
+          connect: {
+            id: documentDataId,
           },
-        };
-      }
+        },
+      },
+    });
 
-      const templateId = Number(params.templateId);
+    if (body.meta) {
+      await upsertDocumentMeta({
+        documentId: document.id,
+        userId: user.id,
+        teamId: team?.id,
+        ...body.meta,
+        requestMetadata: metadata,
+      });
+    }
 
-      const fileName = body.title.endsWith('.pdf') ? body.title : `${body.title}.pdf`;
+    if (body.authOptions) {
+      await updateDocumentSettings({
+        documentId: document.id,
+        userId: user.id,
+        teamId: team?.id,
+        data: body.authOptions,
+        requestMetadata: metadata,
+      });
+    }
 
-      const document = await createDocumentFromTemplateLegacy({
+    return {
+      status: 200,
+      body: {
+        documentId: document.id,
+        recipients: document.recipients.map((recipient) => ({
+          recipientId: recipient.id,
+          name: recipient.name,
+          email: recipient.email,
+          token: recipient.token,
+          role: recipient.role,
+          signingOrder: recipient.signingOrder,
+
+          signingUrl: `${NEXT_PUBLIC_WEBAPP_URL()}/sign/${recipient.token}`,
+        })),
+      },
+    };
+  }),
+
+  generateDocumentFromTemplate: authenticatedMiddleware(async (args, user, team, { metadata }) => {
+    const { body, params } = args;
+
+    const { remaining } = await getServerLimits({ userId: user.id, teamId: team?.id });
+
+    if (remaining.documents <= 0) {
+      return {
+        status: 400,
+        body: {
+          message: 'You have reached the maximum number of documents allowed for this month',
+        },
+      };
+    }
+
+    const templateId = Number(params.templateId);
+
+    let document: Awaited<ReturnType<typeof createDocumentFromTemplate>> | null = null;
+
+    try {
+      document = await createDocumentFromTemplate({
         templateId,
+        externalId: body.externalId || null,
         userId: user.id,
         teamId: team?.id,
         recipients: body.recipients,
+        prefillFields: body.prefillFields,
+        override: {
+          title: body.title,
+          ...body.meta,
+        },
+        requestMetadata: metadata,
+      });
+    } catch (err) {
+      return AppError.toRestAPIError(err);
+    }
+
+    if (body.formValues) {
+      const fileName = document.title.endsWith('.pdf') ? document.title : `${document.title}.pdf`;
+
+      const pdf = await getFileServerSide(document.documentData);
+
+      const prefilled = await insertFormValuesInPdf({
+        pdf: Buffer.from(pdf),
+        formValues: body.formValues,
       });
 
-      let documentDataId = document.documentDataId;
-
-      if (body.formValues) {
-        const pdf = await getFileServerSide(document.documentData);
-
-        const prefilled = await insertFormValuesInPdf({
-          pdf: Buffer.from(pdf),
-          formValues: body.formValues,
-        });
-
-        const newDocumentData = await putPdfFileServerSide({
-          name: fileName,
-          type: 'application/pdf',
-          arrayBuffer: async () => Promise.resolve(prefilled),
-        });
-
-        documentDataId = newDocumentData.id;
-      }
+      const newDocumentData = await putPdfFileServerSide({
+        name: fileName,
+        type: 'application/pdf',
+        arrayBuffer: async () => Promise.resolve(prefilled),
+      });
 
       await updateDocument({
         documentId: document.id,
         userId: user.id,
         teamId: team?.id,
         data: {
-          title: fileName,
-          externalId: body.externalId || null,
           formValues: body.formValues,
           documentData: {
             connect: {
-              id: documentDataId,
+              id: newDocumentData.id,
             },
           },
         },
       });
+    }
 
-      if (body.meta) {
-        await upsertDocumentMeta({
-          documentId: document.id,
-          userId: user.id,
-          teamId: team?.id,
-          ...body.meta,
-          requestMetadata: metadata,
-        });
-      }
-
-      if (body.authOptions) {
-        await updateDocumentSettings({
-          documentId: document.id,
-          userId: user.id,
-          teamId: team?.id,
-          data: body.authOptions,
-          requestMetadata: metadata,
-        });
-      }
-
-      return {
-        status: 200,
-        body: {
-          documentId: document.id,
-          recipients: document.recipients.map((recipient) => ({
-            recipientId: recipient.id,
-            name: recipient.name,
-            email: recipient.email,
-            token: recipient.token,
-            role: recipient.role,
-            signingOrder: recipient.signingOrder,
-
-            signingUrl: `${NEXT_PUBLIC_WEBAPP_URL()}/sign/${recipient.token}`,
-          })),
-        },
-      };
-    },
-  ),
-
-  generateDocumentFromTemplate: authenticatedMiddleware(
-    async (args, user, team, { logger, metadata }) => {
-      const { body, params } = args;
-
-      logger.info({
-        input: {
-          templateId: params.templateId,
-        },
+    if (body.authOptions) {
+      await updateDocumentSettings({
+        documentId: document.id,
+        userId: user.id,
+        teamId: team?.id,
+        data: body.authOptions,
+        requestMetadata: metadata,
       });
+    }
 
-      const { remaining } = await getServerLimits({ userId: user.id, teamId: team?.id });
+    return {
+      status: 200,
+      body: {
+        documentId: document.id,
+        recipients: document.recipients.map((recipient) => ({
+          recipientId: recipient.id,
+          name: recipient.name,
+          email: recipient.email,
+          token: recipient.token,
+          role: recipient.role,
+          signingOrder: recipient.signingOrder,
+          signingUrl: `${NEXT_PUBLIC_WEBAPP_URL()}/sign/${recipient.token}`,
+        })),
+      },
+    };
+  }),
 
-      if (remaining.documents <= 0) {
-        return {
-          status: 400,
-          body: {
-            message: 'You have reached the maximum number of documents allowed for this month',
-          },
-        };
-      }
-
-      const templateId = Number(params.templateId);
-
-      let document: Awaited<ReturnType<typeof createDocumentFromTemplate>> | null = null;
-
-      try {
-        document = await createDocumentFromTemplate({
-          templateId,
-          externalId: body.externalId || null,
-          userId: user.id,
-          teamId: team?.id,
-          recipients: body.recipients,
-          prefillFields: body.prefillFields,
-          override: {
-            title: body.title,
-            ...body.meta,
-          },
-          requestMetadata: metadata,
-        });
-      } catch (err) {
-        return AppError.toRestAPIError(err);
-      }
-
-      if (body.formValues) {
-        const fileName = document.title.endsWith('.pdf') ? document.title : `${document.title}.pdf`;
-
-        const pdf = await getFileServerSide(document.documentData);
-
-        const prefilled = await insertFormValuesInPdf({
-          pdf: Buffer.from(pdf),
-          formValues: body.formValues,
-        });
-
-        const newDocumentData = await putPdfFileServerSide({
-          name: fileName,
-          type: 'application/pdf',
-          arrayBuffer: async () => Promise.resolve(prefilled),
-        });
-
-        await updateDocument({
-          documentId: document.id,
-          userId: user.id,
-          teamId: team?.id,
-          data: {
-            formValues: body.formValues,
-            documentData: {
-              connect: {
-                id: newDocumentData.id,
-              },
-            },
-          },
-        });
-      }
-
-      if (body.authOptions) {
-        await updateDocumentSettings({
-          documentId: document.id,
-          userId: user.id,
-          teamId: team?.id,
-          data: body.authOptions,
-          requestMetadata: metadata,
-        });
-      }
-
-      return {
-        status: 200,
-        body: {
-          documentId: document.id,
-          recipients: document.recipients.map((recipient) => ({
-            recipientId: recipient.id,
-            name: recipient.name,
-            email: recipient.email,
-            token: recipient.token,
-            role: recipient.role,
-            signingOrder: recipient.signingOrder,
-            signingUrl: `${NEXT_PUBLIC_WEBAPP_URL()}/sign/${recipient.token}`,
-          })),
-        },
-      };
-    },
-  ),
-
-  sendDocument: authenticatedMiddleware(async (args, user, team, { logger, metadata }) => {
+  sendDocument: authenticatedMiddleware(async (args, user, team, { metadata }) => {
     const { id: documentId } = args.params;
     const { sendEmail, sendCompletionEmails } = args.body;
 
-    logger.info({
-      input: {
-        id: documentId,
-      },
-    });
-
     try {
       const document = await getDocumentById({
         documentId: Number(documentId),
@@ -782,16 +730,10 @@ export const ApiContractV1Implementation = tsr.router(ApiContractV1, {
     }
   }),
 
-  resendDocument: authenticatedMiddleware(async (args, user, team, { logger, metadata }) => {
+  resendDocument: authenticatedMiddleware(async (args, user, team, { metadata }) => {
     const { id: documentId } = args.params;
     const { recipients } = args.body;
 
-    logger.info({
-      input: {
-        id: documentId,
-      },
-    });
-
     try {
       await resendDocument({
         userId: user.id,
@@ -817,16 +759,10 @@ export const ApiContractV1Implementation = tsr.router(ApiContractV1, {
     }
   }),
 
-  createRecipient: authenticatedMiddleware(async (args, user, team, { logger, metadata }) => {
+  createRecipient: authenticatedMiddleware(async (args, user, team, { metadata }) => {
     const { id: documentId } = args.params;
     const { name, email, role, authOptions, signingOrder } = args.body;
 
-    logger.info({
-      input: {
-        id: documentId,
-      },
-    });
-
     const document = await getDocumentById({
       documentId: Number(documentId),
       userId: user.id,
@@ -914,17 +850,10 @@ export const ApiContractV1Implementation = tsr.router(ApiContractV1, {
     }
   }),
 
-  updateRecipient: authenticatedMiddleware(async (args, user, team, { logger, metadata }) => {
+  updateRecipient: authenticatedMiddleware(async (args, user, team, { metadata }) => {
     const { id: documentId, recipientId } = args.params;
     const { name, email, role, authOptions, signingOrder } = args.body;
 
-    logger.info({
-      input: {
-        id: documentId,
-        recipientId,
-      },
-    });
-
     const document = await getDocumentById({
       documentId: Number(documentId),
       userId: user.id,
@@ -987,16 +916,9 @@ export const ApiContractV1Implementation = tsr.router(ApiContractV1, {
     };
   }),
 
-  deleteRecipient: authenticatedMiddleware(async (args, user, team, { logger, metadata }) => {
+  deleteRecipient: authenticatedMiddleware(async (args, user, team, { metadata }) => {
     const { id: documentId, recipientId } = args.params;
 
-    logger.info({
-      input: {
-        id: documentId,
-        recipientId,
-      },
-    });
-
     const document = await getDocumentById({
       documentId: Number(documentId),
       userId: user.id,
@@ -1048,15 +970,8 @@ export const ApiContractV1Implementation = tsr.router(ApiContractV1, {
     };
   }),
 
-  createField: authenticatedMiddleware(async (args, user, team, { logger, metadata }) => {
+  createField: authenticatedMiddleware(async (args, user, team, { metadata }) => {
     const { id: documentId } = args.params;
-
-    logger.info({
-      input: {
-        id: documentId,
-      },
-    });
-
     const fields = Array.isArray(args.body) ? args.body : [args.body];
 
     const document = await prisma.document.findFirst({
@@ -1216,18 +1131,11 @@ export const ApiContractV1Implementation = tsr.router(ApiContractV1, {
     }
   }),
 
-  updateField: authenticatedMiddleware(async (args, user, team, { logger, metadata }) => {
+  updateField: authenticatedMiddleware(async (args, user, team, { metadata }) => {
     const { id: documentId, fieldId } = args.params;
     const { recipientId, type, pageNumber, pageWidth, pageHeight, pageX, pageY, fieldMeta } =
       args.body;
 
-    logger.info({
-      input: {
-        id: documentId,
-        fieldId,
-      },
-    });
-
     const document = await getDocumentById({
       documentId: Number(documentId),
       userId: user.id,
@@ -1314,16 +1222,9 @@ export const ApiContractV1Implementation = tsr.router(ApiContractV1, {
     };
   }),
 
-  deleteField: authenticatedMiddleware(async (args, user, team, { logger, metadata }) => {
+  deleteField: authenticatedMiddleware(async (args, user, team, { metadata }) => {
     const { id: documentId, fieldId } = args.params;
 
-    logger.info({
-      input: {
-        id: documentId,
-        fieldId,
-      },
-    });
-
     const document = await getDocumentById({
       documentId: Number(documentId),
       userId: user.id,
@@ -1432,6 +1333,7 @@ const updateDocument = async ({
   return await prisma.document.update({
     where: {
       id: documentId,
+      userId,
       team: buildTeamWhereQuery({ teamId, userId }),
     },
     data: {

packages/api/v1/middleware/authenticated.ts

@@ -1,14 +1,10 @@
 import type { Team, User } from '@prisma/client';
 import type { TsRestRequest } from '@ts-rest/serverless';
-import type { Logger } from 'pino';
 
 import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
 import { getApiTokenByToken } from '@documenso/lib/server-only/public-api/get-api-token-by-token';
-import type { BaseApiLog, RootApiLog } from '@documenso/lib/types/api-logs';
 import type { ApiRequestMetadata } from '@documenso/lib/universal/extract-request-metadata';
 import { extractRequestMetadata } from '@documenso/lib/universal/extract-request-metadata';
-import { nanoid } from '@documenso/lib/universal/id';
-import { logger } from '@documenso/lib/utils/logger';
 
 type B = {
   // appRoute: any;
@@ -31,24 +27,10 @@ export const authenticatedMiddleware = <
     args: T & { req: TsRestRequest },
     user: Pick<User, 'id' | 'email' | 'name' | 'disabled'>,
     team: Team,
-    options: { metadata: ApiRequestMetadata; logger: Logger },
+    options: { metadata: ApiRequestMetadata },
   ) => Promise<R>,
 ) => {
   return async (args: T, { request }: B) => {
-    const requestMetadata = extractRequestMetadata(request);
-
-    const apiLogger = logger.child({
-      ipAddress: requestMetadata.ipAddress,
-      userAgent: requestMetadata.userAgent,
-      requestId: nanoid(),
-    } satisfies RootApiLog);
-
-    const infoToLog: BaseApiLog = {
-      auth: 'api',
-      source: 'apiV1',
-      path: request.url,
-    };
-
     try {
       const { authorization } = args.headers;
 
@@ -69,14 +51,8 @@ export const authenticatedMiddleware = <
         });
       }
 
-      apiLogger.info({
-        ...infoToLog,
-        userId: apiToken.user.id,
-        apiTokenId: apiToken.id,
-      } satisfies BaseApiLog);
-
       const metadata: ApiRequestMetadata = {
-        requestMetadata,
+        requestMetadata: extractRequestMetadata(request),
         source: 'apiV1',
         auth: 'api',
         auditUser: {
@@ -93,12 +69,10 @@ export const authenticatedMiddleware = <
         },
         apiToken.user,
         apiToken.team,
-        { metadata, logger: apiLogger },
+        { metadata },
       );
     } catch (err) {
-      console.log({ err });
-
-      apiLogger.info(infoToLog);
+      console.log({ err: err });
 
       let message = 'Unauthorized';
 

packages/api/v1/schema.ts

@@ -176,16 +176,8 @@ export const ZCreateDocumentMutationSchema = z.object({
     .default({}),
   authOptions: z
     .object({
-      globalAccessAuth: z
-        .union([ZDocumentAccessAuthTypesSchema, z.array(ZDocumentAccessAuthTypesSchema)])
-        .transform((val) => (Array.isArray(val) ? val : [val]))
-        .optional()
-        .default([]),
-      globalActionAuth: z
-        .union([ZDocumentActionAuthTypesSchema, z.array(ZDocumentActionAuthTypesSchema)])
-        .transform((val) => (Array.isArray(val) ? val : [val]))
-        .optional()
-        .default([]),
+      globalAccessAuth: z.array(ZDocumentAccessAuthTypesSchema).optional().default([]),
+      globalActionAuth: z.array(ZDocumentActionAuthTypesSchema).optional().default([]),
     })
     .optional()
     .openapi({
@@ -244,16 +236,8 @@ export const ZCreateDocumentFromTemplateMutationSchema = z.object({
     .optional(),
   authOptions: z
     .object({
-      globalAccessAuth: z
-        .union([ZDocumentAccessAuthTypesSchema, z.array(ZDocumentAccessAuthTypesSchema)])
-        .transform((val) => (Array.isArray(val) ? val : [val]))
-        .optional()
-        .default([]),
-      globalActionAuth: z
-        .union([ZDocumentActionAuthTypesSchema, z.array(ZDocumentActionAuthTypesSchema)])
-        .transform((val) => (Array.isArray(val) ? val : [val]))
-        .optional()
-        .default([]),
+      globalAccessAuth: z.array(ZDocumentAccessAuthTypesSchema).optional().default([]),
+      globalActionAuth: z.array(ZDocumentActionAuthTypesSchema).optional().default([]),
     })
     .optional(),
   formValues: z.record(z.string(), z.union([z.string(), z.boolean(), z.number()])).optional(),
@@ -325,16 +309,8 @@ export const ZGenerateDocumentFromTemplateMutationSchema = z.object({
     .optional(),
   authOptions: z
     .object({
-      globalAccessAuth: z
-        .union([ZDocumentAccessAuthTypesSchema, z.array(ZDocumentAccessAuthTypesSchema)])
-        .transform((val) => (Array.isArray(val) ? val : [val]))
-        .optional()
-        .default([]),
-      globalActionAuth: z
-        .union([ZDocumentActionAuthTypesSchema, z.array(ZDocumentActionAuthTypesSchema)])
-        .transform((val) => (Array.isArray(val) ? val : [val]))
-        .optional()
-        .default([]),
+      globalAccessAuth: z.array(ZDocumentAccessAuthTypesSchema).optional().default([]),
+      globalActionAuth: z.array(ZDocumentActionAuthTypesSchema).optional().default([]),
     })
     .optional(),
   formValues: z.record(z.string(), z.union([z.string(), z.boolean(), z.number()])).optional(),
@@ -373,11 +349,7 @@ export const ZCreateRecipientMutationSchema = z.object({
   signingOrder: z.number().nullish(),
   authOptions: z
     .object({
-      actionAuth: z
-        .union([ZRecipientActionAuthTypesSchema, z.array(ZRecipientActionAuthTypesSchema)])
-        .transform((val) => (Array.isArray(val) ? val : [val]))
-        .optional()
-        .default([]),
+      actionAuth: z.array(ZRecipientActionAuthTypesSchema).optional().default([]),
     })
     .optional()
     .openapi({

packages/app-tests/e2e/api/v1/test-unauthorized-api-access.spec.ts

@@ -1,540 +0,0 @@
-import { expect, test } from '@playwright/test';
-
-import { NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app';
-import { createApiToken } from '@documenso/lib/server-only/public-api/create-api-token';
-import { prisma } from '@documenso/prisma';
-import { FieldType } from '@documenso/prisma/client';
-import {
-  seedBlankDocument,
-  seedCompletedDocument,
-  seedDraftDocument,
-  seedPendingDocumentWithFullFields,
-} from '@documenso/prisma/seed/documents';
-import { seedBlankTemplate } from '@documenso/prisma/seed/templates';
-import { seedUser } from '@documenso/prisma/seed/users';
-
-const WEBAPP_BASE_URL = NEXT_PUBLIC_WEBAPP_URL();
-
-test.describe.configure({
-  mode: 'parallel',
-});
-
-test.describe('Document Access API V1', () => {
-  test('should block unauthorized access to documents not owned by the user', async ({
-    request,
-  }) => {
-    const { user: userA, team: teamA } = await seedUser();
-
-    const { user: userB, team: teamB } = await seedUser();
-    const { token: tokenB } = await createApiToken({
-      userId: userB.id,
-      teamId: teamB.id,
-      tokenName: 'userB',
-      expiresIn: null,
-    });
-
-    const documentA = await seedBlankDocument(userA, teamA.id);
-
-    // User B cannot access User A's document
-    const resB = await request.get(`${WEBAPP_BASE_URL}/api/v1/documents/${documentA.id}`, {
-      headers: { Authorization: `Bearer ${tokenB}` },
-    });
-
-    expect(resB.ok()).toBeFalsy();
-    expect(resB.status()).toBe(404);
-  });
-
-  test('should block unauthorized access to document download endpoint', async ({ request }) => {
-    const { user: userA, team: teamA } = await seedUser();
-
-    const { user: userB, team: teamB } = await seedUser();
-    const { token: tokenB } = await createApiToken({
-      userId: userB.id,
-      teamId: teamB.id,
-      tokenName: 'userB',
-      expiresIn: null,
-    });
-
-    const documentA = await seedCompletedDocument(userA, teamA.id, ['test@example.com'], {
-      createDocumentOptions: { title: 'Document 1 - Completed' },
-    });
-
-    const resB = await request.get(`${WEBAPP_BASE_URL}/api/v1/documents/${documentA.id}/download`, {
-      headers: { Authorization: `Bearer ${tokenB}` },
-    });
-
-    expect(resB.ok()).toBeFalsy();
-    expect(resB.status()).toBe(500);
-  });
-
-  test('should block unauthorized access to document delete endpoint', async ({ request }) => {
-    const { user: userA, team: teamA } = await seedUser();
-
-    const { user: userB, team: teamB } = await seedUser();
-    const { token: tokenB } = await createApiToken({
-      userId: userB.id,
-      teamId: teamB.id,
-      tokenName: 'userB',
-      expiresIn: null,
-    });
-
-    const documentA = await seedBlankDocument(userA, teamA.id);
-
-    const resB = await request.delete(`${WEBAPP_BASE_URL}/api/v1/documents/${documentA.id}`, {
-      headers: { Authorization: `Bearer ${tokenB}` },
-    });
-
-    expect(resB.ok()).toBeFalsy();
-    expect(resB.status()).toBe(404);
-  });
-
-  test('should block unauthorized access to document send endpoint', async ({ request }) => {
-    const { user: userA, team: teamA } = await seedUser();
-
-    const { user: userB, team: teamB } = await seedUser();
-    const { token: tokenB } = await createApiToken({
-      userId: userB.id,
-      teamId: teamB.id,
-      tokenName: 'userB',
-      expiresIn: null,
-    });
-
-    const { document: documentA } = await seedPendingDocumentWithFullFields({
-      owner: userA,
-      recipients: ['test@example.com'],
-      teamId: teamA.id,
-    });
-
-    const resB = await request.post(`${WEBAPP_BASE_URL}/api/v1/documents/${documentA.id}/send`, {
-      headers: { Authorization: `Bearer ${tokenB}` },
-      data: {},
-    });
-
-    expect(resB.ok()).toBeFalsy();
-    expect(resB.status()).toBe(500);
-  });
-
-  test('should block unauthorized access to document resend endpoint', async ({ request }) => {
-    const { user: userA, team: teamA } = await seedUser();
-
-    const { user: userB, team: teamB } = await seedUser();
-    const { token: tokenB } = await createApiToken({
-      userId: userB.id,
-      teamId: teamB.id,
-      tokenName: 'userB',
-      expiresIn: null,
-    });
-
-    const { user: recipientUser } = await seedUser();
-
-    const { document: documentA, recipients } = await seedPendingDocumentWithFullFields({
-      owner: userA,
-      recipients: [recipientUser.email],
-      teamId: teamA.id,
-    });
-
-    const resB = await request.post(`${WEBAPP_BASE_URL}/api/v1/documents/${documentA.id}/resend`, {
-      headers: { Authorization: `Bearer ${tokenB}` },
-      data: {
-        recipients: [recipients[0].id],
-      },
-    });
-
-    expect(resB.ok()).toBeFalsy();
-    expect(resB.status()).toBe(500);
-  });
-
-  test('should block unauthorized access to document recipients endpoint', async ({ request }) => {
-    const { user: userA, team: teamA } = await seedUser();
-
-    const { user: userB, team: teamB } = await seedUser();
-    const { token: tokenB } = await createApiToken({
-      userId: userB.id,
-      teamId: teamB.id,
-      tokenName: 'userB',
-      expiresIn: null,
-    });
-
-    const documentA = await seedBlankDocument(userA, teamA.id);
-
-    const resB = await request.post(
-      `${WEBAPP_BASE_URL}/api/v1/documents/${documentA.id}/recipients`,
-      {
-        headers: { Authorization: `Bearer ${tokenB}` },
-        data: { name: 'Test', email: 'test@example.com' },
-      },
-    );
-
-    expect(resB.ok()).toBeFalsy();
-    expect(resB.status()).toBe(401);
-  });
-
-  test('should block unauthorized access to PATCH on recipients endpoint', async ({ request }) => {
-    const { user: userA, team: teamA } = await seedUser();
-
-    const { user: userB, team: teamB } = await seedUser();
-    const { token: tokenB } = await createApiToken({
-      userId: userB.id,
-      teamId: teamB.id,
-      tokenName: 'userB',
-      expiresIn: null,
-    });
-
-    const { user: userRecipient } = await seedUser();
-
-    const documentA = await seedDraftDocument(userA, teamA.id, [userRecipient.email]);
-
-    const recipient = await prisma.recipient.findFirst({
-      where: {
-        documentId: documentA.id,
-        email: userRecipient.email,
-      },
-    });
-
-    const patchRes = await request.patch(
-      `${WEBAPP_BASE_URL}/api/v1/documents/${documentA.id}/recipients/${recipient!.id}`,
-      {
-        headers: { Authorization: `Bearer ${tokenB}` },
-        data: {
-          name: 'New Name',
-          email: 'new@example.com',
-          role: 'SIGNER',
-          signingOrder: null,
-          authOptions: {
-            accessAuth: [],
-            actionAuth: [],
-          },
-        },
-      },
-    );
-
-    expect(patchRes.ok()).toBeFalsy();
-    expect(patchRes.status()).toBe(401);
-  });
-
-  test('should block unauthorized access to DELETE on recipients endpoint', async ({ request }) => {
-    const { user: userA, team: teamA } = await seedUser();
-
-    const { user: userB, team: teamB } = await seedUser();
-    const { token: tokenB } = await createApiToken({
-      userId: userB.id,
-      teamId: teamB.id,
-      tokenName: 'userB',
-      expiresIn: null,
-    });
-
-    const { user: userRecipient } = await seedUser();
-
-    const documentA = await seedDraftDocument(userA, teamA.id, [userRecipient.email]);
-
-    const recipient = await prisma.recipient.findFirst({
-      where: {
-        documentId: documentA.id,
-        email: userRecipient.email,
-      },
-    });
-
-    const deleteRes = await request.delete(
-      `${WEBAPP_BASE_URL}/api/v1/documents/${documentA.id}/recipients/${recipient!.id}`,
-      {
-        headers: { Authorization: `Bearer ${tokenB}` },
-        data: {},
-      },
-    );
-
-    expect(deleteRes.ok()).toBeFalsy();
-    expect(deleteRes.status()).toBe(401);
-  });
-
-  test('should block unauthorized access to document fields endpoint', async ({ request }) => {
-    const { user: userA, team: teamA } = await seedUser();
-
-    const { user: userB, team: teamB } = await seedUser();
-    const { token: tokenB } = await createApiToken({
-      userId: userB.id,
-      teamId: teamB.id,
-      tokenName: 'userB',
-      expiresIn: null,
-    });
-
-    const { user: recipientUser } = await seedUser();
-
-    const documentA = await seedDraftDocument(userA, teamA.id, [recipientUser.email]);
-
-    const documentRecipient = await prisma.recipient.findFirst({
-      where: {
-        documentId: documentA.id,
-        email: recipientUser.email,
-      },
-    });
-
-    const resB = await request.post(`${WEBAPP_BASE_URL}/api/v1/documents/${documentA.id}/fields`, {
-      headers: { Authorization: `Bearer ${tokenB}` },
-      data: {
-        recipientId: documentRecipient!.id,
-        type: 'SIGNATURE',
-        pageNumber: 1,
-        pageX: 1,
-        pageY: 1,
-        pageWidth: 1,
-        pageHeight: 1,
-      },
-    });
-
-    expect(resB.ok()).toBeFalsy();
-    expect(resB.status()).toBe(404);
-  });
-
-  test('should block unauthorized access to template get endpoint', async ({ request }) => {
-    const { user: userA, team: teamA } = await seedUser();
-
-    const { user: userB, team: teamB } = await seedUser();
-    const { token: tokenB } = await createApiToken({
-      userId: userB.id,
-      teamId: teamB.id,
-      tokenName: 'userB',
-      expiresIn: null,
-    });
-
-    const templateA = await seedBlankTemplate(userA, teamA.id);
-
-    const resB = await request.get(`${WEBAPP_BASE_URL}/api/v1/templates/${templateA.id}`, {
-      headers: { Authorization: `Bearer ${tokenB}` },
-    });
-
-    expect(resB.ok()).toBeFalsy();
-    expect(resB.status()).toBe(404);
-  });
-
-  test('should block unauthorized access to template delete endpoint', async ({ request }) => {
-    const { user: userA, team: teamA } = await seedUser();
-
-    const { user: userB, team: teamB } = await seedUser();
-    const { token: tokenB } = await createApiToken({
-      userId: userB.id,
-      teamId: teamB.id,
-      tokenName: 'userB',
-      expiresIn: null,
-    });
-
-    const templateA = await seedBlankTemplate(userA, teamA.id);
-
-    const resB = await request.delete(`${WEBAPP_BASE_URL}/api/v1/templates/${templateA.id}`, {
-      headers: { Authorization: `Bearer ${tokenB}` },
-    });
-
-    expect(resB.ok()).toBeFalsy();
-    expect(resB.status()).toBe(404);
-  });
-
-  test('should block unauthorized access to PATCH on fields endpoint', async ({ request }) => {
-    const { user: userA, team: teamA } = await seedUser();
-
-    const { user: userB, team: teamB } = await seedUser();
-    const { token: tokenB } = await createApiToken({
-      userId: userB.id,
-      teamId: teamB.id,
-      tokenName: 'userB',
-      expiresIn: null,
-    });
-
-    const { user: userRecipient } = await seedUser();
-    const documentA = await seedDraftDocument(userA, teamA.id, [userRecipient.email]);
-
-    const recipient = await prisma.recipient.findFirst({
-      where: {
-        documentId: documentA.id,
-        email: userRecipient.email,
-      },
-    });
-
-    const field = await prisma.field.create({
-      data: {
-        documentId: documentA.id,
-        recipientId: recipient!.id,
-        type: FieldType.TEXT,
-        page: 1,
-        positionX: 5,
-        positionY: 5,
-        width: 10,
-        height: 5,
-        customText: '',
-        inserted: false,
-        fieldMeta: {
-          type: 'text',
-          label: 'Default Text Field',
-        },
-      },
-    });
-
-    const patchRes = await request.patch(
-      `${WEBAPP_BASE_URL}/api/v1/documents/${documentA.id}/fields/${field.id}`,
-      {
-        headers: { Authorization: `Bearer ${tokenB}` },
-        data: {
-          recipientId: recipient!.id,
-          type: FieldType.TEXT,
-          pageNumber: 1,
-          pageX: 99,
-          pageY: 99,
-          pageWidth: 99,
-          pageHeight: 99,
-          fieldMeta: {
-            type: 'text',
-            label: 'My new field',
-          },
-        },
-      },
-    );
-    expect(patchRes.ok()).toBeFalsy();
-    expect(patchRes.status()).toBe(401);
-  });
-
-  test('should block unauthorized access to DELETE on fields endpoint', async ({ request }) => {
-    const { user: userA, team: teamA } = await seedUser();
-
-    const { user: userB, team: teamB } = await seedUser();
-    const { token: tokenB } = await createApiToken({
-      userId: userB.id,
-      teamId: teamB.id,
-      tokenName: 'userB',
-      expiresIn: null,
-    });
-
-    const { user: userRecipient } = await seedUser();
-    const documentA = await seedDraftDocument(userA, teamA.id, [userRecipient.email]);
-
-    const recipient = await prisma.recipient.findFirst({
-      where: {
-        documentId: documentA.id,
-        email: userRecipient.email,
-      },
-    });
-
-    const field = await prisma.field.create({
-      data: {
-        documentId: documentA.id,
-        recipientId: recipient!.id,
-        type: FieldType.NUMBER,
-        page: 1,
-        positionX: 5,
-        positionY: 5,
-        width: 10,
-        height: 5,
-        customText: '',
-        inserted: false,
-        fieldMeta: {
-          type: 'number',
-          label: 'Default Number Field',
-        },
-      },
-    });
-
-    const deleteRes = await request.delete(
-      `${WEBAPP_BASE_URL}/api/v1/documents/${documentA.id}/fields/${field.id}`,
-      {
-        headers: { Authorization: `Bearer ${tokenB}` },
-        data: {},
-      },
-    );
-
-    expect(deleteRes.ok()).toBeFalsy();
-    expect(deleteRes.status()).toBe(401);
-  });
-
-  test('should block unauthorized access to documents list endpoint', async ({ request }) => {
-    const { user: userA, team: teamA } = await seedUser();
-
-    const { user: userB, team: teamB } = await seedUser();
-    const { token: tokenB } = await createApiToken({
-      userId: userB.id,
-      teamId: teamB.id,
-      tokenName: 'userB',
-      expiresIn: null,
-    });
-
-    await seedBlankDocument(userA, teamA.id);
-
-    const resB = await request.get(`${WEBAPP_BASE_URL}/api/v1/documents`, {
-      headers: { Authorization: `Bearer ${tokenB}` },
-    });
-
-    const reqData = await resB.json();
-
-    expect(resB.ok()).toBeTruthy();
-    expect(resB.status()).toBe(200);
-    expect(reqData.documents.every((doc: { userId: number }) => doc.userId !== userA.id)).toBe(
-      true,
-    );
-    expect(reqData.documents.length).toBe(0);
-    expect(reqData.totalPages).toBe(0);
-  });
-
-  test('should block unauthorized access to templates list endpoint', async ({ request }) => {
-    const { user: userA, team: teamA } = await seedUser();
-
-    const { user: userB, team: teamB } = await seedUser();
-    const { token: tokenB } = await createApiToken({
-      userId: userB.id,
-      teamId: teamB.id,
-      tokenName: 'userB',
-      expiresIn: null,
-    });
-
-    await seedBlankTemplate(userA, teamA.id);
-
-    const resB = await request.get(`${WEBAPP_BASE_URL}/api/v1/templates`, {
-      headers: { Authorization: `Bearer ${tokenB}` },
-    });
-
-    const reqData = await resB.json();
-
-    expect(resB.ok()).toBeTruthy();
-    expect(resB.status()).toBe(200);
-    expect(reqData.templates.every((tpl: { userId: number }) => tpl.userId !== userA.id)).toBe(
-      true,
-    );
-    expect(reqData.templates.length).toBe(0);
-    expect(reqData.totalPages).toBe(0);
-  });
-
-  test('should block unauthorized access to create-document-from-template endpoint', async ({
-    request,
-  }) => {
-    const { user: userA, team: teamA } = await seedUser();
-
-    const { user: userB, team: teamB } = await seedUser();
-    const { token: tokenB } = await createApiToken({
-      userId: userB.id,
-      teamId: teamB.id,
-      tokenName: 'userB',
-      expiresIn: null,
-    });
-
-    const templateA = await seedBlankTemplate(userA, teamA.id);
-
-    const resB = await request.post(
-      `${WEBAPP_BASE_URL}/api/v1/templates/${templateA.id}/create-document`,
-      {
-        headers: {
-          Authorization: `Bearer ${tokenB}`,
-          'Content-Type': 'application/json',
-        },
-        data: {
-          title: 'Should not work',
-          recipients: [{ name: 'Test user', email: 'test@example.com' }],
-          meta: {
-            subject: 'Test',
-            message: 'Test',
-            timezone: 'UTC',
-            dateFormat: 'yyyy-MM-dd',
-            redirectUrl: 'https://example.com',
-          },
-        },
-      },
-    );
-
-    expect(resB.ok()).toBeFalsy();
-    expect(resB.status()).toBe(401);
-  });
-});

packages/app-tests/e2e/documents/test-unauthorized-document-access.spec.ts

@@ -1,100 +0,0 @@
-import { expect, test } from '@playwright/test';
-
-import { NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app';
-import {
-  seedBlankDocument,
-  seedCompletedDocument,
-  seedPendingDocument,
-} from '@documenso/prisma/seed/documents';
-import { seedUser } from '@documenso/prisma/seed/users';
-
-import { apiSignin } from '../fixtures/authentication';
-
-test.describe.configure({
-  mode: 'parallel',
-});
-
-test.describe('Unauthorized Access to Documents', () => {
-  test('should block unauthorized access to the draft document page', async ({ page }) => {
-    const { user, team } = await seedUser();
-    const document = await seedBlankDocument(user, team.id);
-
-    const { user: unauthorizedUser } = await seedUser();
-
-    await apiSignin({
-      page,
-      email: unauthorizedUser.email,
-      redirectPath: `/t/${team.url}/documents`,
-    });
-
-    await page.goto(`${NEXT_PUBLIC_WEBAPP_URL()}/t/${team.url}/documents/${document.id}`);
-    await expect(page.getByRole('heading', { name: 'Oops! Something went wrong.' })).toBeVisible();
-  });
-
-  test('should block unauthorized access to the draft document edit page', async ({ page }) => {
-    const { user, team } = await seedUser();
-    const document = await seedBlankDocument(user, team.id);
-
-    const { user: unauthorizedUser } = await seedUser();
-
-    await apiSignin({
-      page,
-      email: unauthorizedUser.email,
-      redirectPath: `/t/${team.url}/documents/${document.id}/edit`,
-    });
-
-    await page.goto(`${NEXT_PUBLIC_WEBAPP_URL()}/t/${team.url}/documents/${document.id}/edit`);
-    await expect(page.getByRole('heading', { name: 'Oops! Something went wrong.' })).toBeVisible();
-  });
-
-  test('should block unauthorized access to the pending document page', async ({ page }) => {
-    const { user, team } = await seedUser();
-    const { user: recipient } = await seedUser();
-    const document = await seedPendingDocument(user, team.id, [recipient]);
-
-    const { user: unauthorizedUser } = await seedUser();
-
-    await apiSignin({
-      page,
-      email: unauthorizedUser.email,
-      redirectPath: `/t/${team.url}/documents/${document.id}`,
-    });
-
-    await page.goto(`${NEXT_PUBLIC_WEBAPP_URL()}/t/${team.url}/documents/${document.id}`);
-    await expect(page.getByRole('heading', { name: 'Oops! Something went wrong.' })).toBeVisible();
-  });
-
-  test('should block unauthorized access to pending document edit page', async ({ page }) => {
-    const { user, team } = await seedUser();
-    const { user: recipient } = await seedUser();
-    const document = await seedPendingDocument(user, team.id, [recipient]);
-
-    const { user: unauthorizedUser } = await seedUser();
-
-    await apiSignin({
-      page,
-      email: unauthorizedUser.email,
-      redirectPath: `/t/${team.url}/documents/${document.id}/edit`,
-    });
-
-    await page.goto(`${NEXT_PUBLIC_WEBAPP_URL()}/t/${team.url}/documents/${document.id}/edit`);
-    await expect(page.getByRole('heading', { name: 'Oops! Something went wrong.' })).toBeVisible();
-  });
-
-  test('should block unauthorized access to completed document page', async ({ page }) => {
-    const { user, team } = await seedUser();
-    const { user: recipient } = await seedUser();
-    const document = await seedCompletedDocument(user, team.id, [recipient]);
-
-    const { user: unauthorizedUser } = await seedUser();
-
-    await apiSignin({
-      page,
-      email: unauthorizedUser.email,
-      redirectPath: `/t/${team.url}/documents/${document.id}`,
-    });
-
-    await page.goto(`${NEXT_PUBLIC_WEBAPP_URL()}/t/${team.url}/documents/${document.id}`);
-    await expect(page.getByRole('heading', { name: 'Oops! Something went wrong.' })).toBeVisible();
-  });
-});

packages/app-tests/e2e/folders/team-account-folders.spec.ts

@@ -21,7 +21,7 @@ test('[TEAMS]: create document folder button is visible', async ({ page }) => {
     redirectPath: `/t/${team.url}`,
   });
 
-  await expect(page.getByTestId('folder-create-button')).toBeVisible();
+  await expect(page.getByRole('button', { name: 'Create Folder' })).toBeVisible();
 });
 
 test('[TEAMS]: can create document folder', async ({ page }) => {
@@ -33,7 +33,7 @@ test('[TEAMS]: can create document folder', async ({ page }) => {
     redirectPath: `/t/${team.url}`,
   });
 
-  await page.getByTestId('folder-create-button').click();
+  await page.getByRole('button', { name: 'Create Folder' }).click();
 
   await page.getByLabel('Folder name').fill('Team Folder');
   await page.getByRole('button', { name: 'Create' }).click();
@@ -59,7 +59,7 @@ test('[TEAMS]: can create document subfolder within a document folder', async ({
 
   await page.goto(`/t/${team.url}/documents/f/${teamFolder.id}`);
 
-  await page.getByTestId('folder-create-button').click();
+  await page.getByRole('button', { name: 'Create Folder' }).click();
 
   await page.getByLabel('Folder name').fill('Subfolder');
   await page.getByRole('button', { name: 'Create' }).click();
@@ -115,7 +115,7 @@ test('[TEAMS]: can pin a document folder', async ({ page }) => {
     redirectPath: `/t/${team.url}/documents`,
   });
 
-  await page.getByTestId('folder-card-more-button').click();
+  await page.getByRole('button', { name: '•••' }).click();
   await page.getByRole('menuitem', { name: 'Pin' }).click();
 
   await page.reload();
@@ -140,7 +140,7 @@ test('[TEAMS]: can unpin a document folder', async ({ page }) => {
     redirectPath: `/t/${team.url}/documents`,
   });
 
-  await page.getByTestId('folder-card-more-button').click();
+  await page.getByRole('button', { name: '•••' }).click();
   await page.getByRole('menuitem', { name: 'Unpin' }).click();
 
   await page.reload();
@@ -164,11 +164,11 @@ test('[TEAMS]: can rename a document folder', async ({ page }) => {
     redirectPath: `/t/${team.url}/documents`,
   });
 
-  await page.getByTestId('folder-card-more-button').click();
+  await page.getByRole('button', { name: '•••' }).click();
   await page.getByRole('menuitem', { name: 'Settings' }).click();
 
   await page.getByLabel('Name').fill('Team Archive');
-  await page.getByRole('button', { name: 'Update' }).click();
+  await page.getByRole('button', { name: 'Save Changes' }).click();
 
   await expect(page.getByText('Team Archive')).toBeVisible();
 });
@@ -189,7 +189,7 @@ test('[TEAMS]: document folder visibility is visible to team member', async ({ p
     redirectPath: `/t/${team.url}/documents`,
   });
 
-  await page.getByTestId('folder-card-more-button').click();
+  await page.getByRole('button', { name: '•••' }).click();
   await page.getByRole('menuitem', { name: 'Settings' }).click();
 
   await expect(page.getByRole('combobox', { name: 'Visibility' })).toBeVisible();
@@ -218,11 +218,11 @@ test('[TEAMS]: document folder can be moved to another document folder', async (
     redirectPath: `/t/${team.url}/documents`,
   });
 
-  await page.getByTestId('folder-card-more-button').nth(0).click();
+  await page.getByRole('button', { name: '•••' }).nth(0).click();
   await page.getByRole('menuitem', { name: 'Move' }).click();
 
   await page.getByRole('button', { name: 'Team Clients' }).click();
-  await page.getByRole('button', { name: 'Move' }).click();
+  await page.getByRole('button', { name: 'Move Folder' }).click();
 
   await page.waitForTimeout(1000);
 
@@ -269,7 +269,7 @@ test('[TEAMS]: document folder and its contents can be deleted', async ({ page }
     redirectPath: `/t/${team.url}/documents`,
   });
 
-  await page.getByTestId('folder-card-more-button').click();
+  await page.getByRole('button', { name: '•••' }).click();
   await page.getByRole('menuitem', { name: 'Delete' }).click();
 
   await page.getByRole('textbox').fill(`delete ${folder.name}`);
@@ -295,7 +295,7 @@ test('[TEAMS]: create folder button is visible on templates page', async ({ page
     redirectPath: `/t/${team.url}/templates`,
   });
 
-  await expect(page.getByTestId('folder-create-button')).toBeVisible();
+  await expect(page.getByRole('button', { name: 'Create Folder' })).toBeVisible();
 });
 
 test('[TEAMS]: can create a template folder', async ({ page }) => {
@@ -307,7 +307,7 @@ test('[TEAMS]: can create a template folder', async ({ page }) => {
     redirectPath: `/t/${team.url}/templates`,
   });
 
-  await page.getByTestId('folder-create-button').click();
+  await page.getByRole('button', { name: 'Create Folder' }).click();
   await expect(page.getByRole('dialog', { name: 'Create New folder' })).toBeVisible();
 
   await page.getByLabel('Folder name').fill('Team template folder');
@@ -342,7 +342,7 @@ test('[TEAMS]: can create a template subfolder inside a template folder', async
 
   await expect(page.getByText('Team Client Templates')).toBeVisible();
 
-  await page.getByTestId('folder-create-button').click();
+  await page.getByRole('button', { name: 'Create Folder' }).click();
   await expect(page.getByRole('dialog', { name: 'Create New folder' })).toBeVisible();
 
   await page.getByLabel('Folder name').fill('Team Contract Templates');
@@ -414,7 +414,7 @@ test('[TEAMS]: can pin a template folder', async ({ page }) => {
     redirectPath: `/t/${team.url}/templates`,
   });
 
-  await page.getByTestId('folder-card-more-button').click();
+  await page.getByRole('button', { name: '•••' }).click();
   await page.getByRole('menuitem', { name: 'Pin' }).click();
 
   await page.reload();
@@ -440,7 +440,7 @@ test('[TEAMS]: can unpin a template folder', async ({ page }) => {
     redirectPath: `/t/${team.url}/templates`,
   });
 
-  await page.getByTestId('folder-card-more-button').click();
+  await page.getByRole('button', { name: '•••' }).click();
   await page.getByRole('menuitem', { name: 'Unpin' }).click();
 
   await page.reload();
@@ -466,11 +466,11 @@ test('[TEAMS]: can rename a template folder', async ({ page }) => {
     redirectPath: `/t/${team.url}/templates`,
   });
 
-  await page.getByTestId('folder-card-more-button').click();
+  await page.getByRole('button', { name: '•••' }).click();
   await page.getByRole('menuitem', { name: 'Settings' }).click();
 
   await page.getByLabel('Name').fill('Updated Team Template Folder');
-  await page.getByRole('button', { name: 'Update' }).click();
+  await page.getByRole('button', { name: 'Save Changes' }).click();
 
   await expect(page.getByText('Updated Team Template Folder')).toBeVisible();
 });
@@ -492,7 +492,7 @@ test('[TEAMS]: template folder visibility is not visible to team member', async
     redirectPath: `/t/${team.url}/templates`,
   });
 
-  await page.getByTestId('folder-card-more-button').click();
+  await page.getByRole('button', { name: '•••' }).click();
   await page.getByRole('menuitem', { name: 'Settings' }).click();
 
   await expect(page.getByRole('menuitem', { name: 'Visibility' })).not.toBeVisible();
@@ -523,11 +523,11 @@ test('[TEAMS]: template folder can be moved to another template folder', async (
     redirectPath: `/t/${team.url}/templates`,
   });
 
-  await page.getByTestId('folder-card-more-button').nth(0).click();
+  await page.getByRole('button', { name: '•••' }).nth(0).click();
   await page.getByRole('menuitem', { name: 'Move' }).click();
 
   await page.getByRole('button', { name: 'Team Client Templates' }).click();
-  await page.getByRole('button', { name: 'Move' }).click();
+  await page.getByRole('button', { name: 'Move Folder' }).click();
 
   await page.waitForTimeout(1000);
 
@@ -576,7 +576,7 @@ test('[TEAMS]: template folder and its contents can be deleted', async ({ page }
     redirectPath: `/t/${team.url}/templates`,
   });
 
-  await page.getByTestId('folder-card-more-button').click();
+  await page.getByRole('button', { name: '•••' }).click();
   await page.getByRole('menuitem', { name: 'Delete' }).click();
 
   await page.getByRole('textbox').fill(`delete ${folder.name}`);
@@ -633,10 +633,10 @@ test('[TEAMS]: can navigate between template folders', async ({ page }) => {
   await page.getByText('Team Contract Templates').click();
   await expect(page.getByText('Team Contract Template 1')).toBeVisible();
 
-  await page.getByRole('link', { name: parentFolder.name }).click();
+  await page.getByRole('button', { name: parentFolder.name }).click();
   await expect(page.getByText('Team Contract Templates')).toBeVisible();
 
-  await page.getByRole('link', { name: subfolder.name }).click();
+  await page.getByRole('button', { name: subfolder.name }).click();
   await expect(page.getByText('Team Contract Template 1')).toBeVisible();
 });
 
@@ -754,7 +754,7 @@ test('[TEAMS]: folder inherits team visibility settings', async ({ page }) => {
     redirectPath: `/t/${team.url}/documents`,
   });
 
-  await page.getByTestId('folder-create-button').click();
+  await page.getByRole('button', { name: 'Create Folder' }).click();
   await page.getByLabel('Name').fill('Admin Only Folder');
   await page.getByRole('button', { name: 'Create' }).click();
 
@@ -762,7 +762,7 @@ test('[TEAMS]: folder inherits team visibility settings', async ({ page }) => {
 
   await page.goto(`/t/${team.url}/documents/`);
 
-  await page.getByTestId('folder-card-more-button').click();
+  await page.getByRole('button', { name: '•••' }).click();
   await page.getByRole('menuitem', { name: 'Settings' }).click();
 
   await expect(page.getByRole('combobox', { name: 'Visibility' })).toHaveText('Admins only');
@@ -774,15 +774,15 @@ test('[TEAMS]: folder inherits team visibility settings', async ({ page }) => {
 
   await page.reload();
 
-  await page.getByTestId('folder-create-button').click();
+  await page.getByRole('button', { name: 'Create Folder' }).click();
   await page.getByLabel('Name').fill('Manager and above Folder');
   await page.getByRole('button', { name: 'Create' }).click();
 
   await expect(page.getByText('Manager and above Folder')).toBeVisible();
 
-  await page.goto(`/t/${team.url}/documents`);
+  await page.goto(`/t/${team.url}/documents/`);
 
-  await page.getByTestId('folder-card-more-button').nth(0).click();
+  await page.getByRole('button', { name: '•••' }).nth(0).click();
   await page.getByRole('menuitem', { name: 'Settings' }).click();
 
   await expect(page.getByRole('combobox', { name: 'Visibility' })).toHaveText('Managers and above');
@@ -794,7 +794,7 @@ test('[TEAMS]: folder inherits team visibility settings', async ({ page }) => {
 
   await page.reload();
 
-  await page.getByTestId('folder-create-button').click();
+  await page.getByRole('button', { name: 'Create Folder' }).click();
   await page.getByLabel('Name').fill('Everyone Folder');
   await page.getByRole('button', { name: 'Create' }).click();
 
@@ -802,7 +802,7 @@ test('[TEAMS]: folder inherits team visibility settings', async ({ page }) => {
 
   await page.goto(`/t/${team.url}/documents/`);
 
-  await page.getByTestId('folder-card-more-button').nth(0).click();
+  await page.getByRole('button', { name: '•••' }).nth(0).click();
   await page.getByRole('menuitem', { name: 'Settings' }).click();
 
   await expect(page.getByRole('combobox', { name: 'Visibility' })).toHaveText('Everyone');
@@ -834,7 +834,7 @@ test('[TEAMS]: documents inherit folder visibility', async ({ page }) => {
     redirectPath: `/t/${team.url}/documents`,
   });
 
-  await page.getByTestId('folder-create-button').click();
+  await page.getByRole('button', { name: 'Create Folder' }).click();
   await page.getByLabel('Name').fill('Admin Only Folder');
   await page.getByRole('button', { name: 'Create' }).click();
 
@@ -2368,10 +2368,7 @@ test('[TEAMS]: team manager can see manager and everyone documents in manager fo
     redirectPath: `/t/${team.url}/documents/f/${managerFolder.id}`,
   });
 
-  await expect(
-    page.getByTestId('folder-grid-breadcrumbs').getByRole('link', { name: 'Manager Folder' }),
-  ).toBeVisible();
-
+  await expect(page.getByRole('button', { name: 'Manager Folder' })).toBeVisible();
   await expect(page.getByText('Manager Folder - Everyone Document')).toBeVisible();
   await expect(page.getByText('Manager Folder - Manager Document')).toBeVisible();
   await expect(page.getByText('Manager Folder - Admin Document')).not.toBeVisible();
@@ -2429,10 +2426,7 @@ test('[TEAMS]: team manager can see manager and everyone documents in everyone f
     redirectPath: `/t/${team.url}/documents/f/${everyoneFolder.id}`,
   });
 
-  await expect(
-    page.getByTestId('folder-grid-breadcrumbs').getByRole('link', { name: 'Everyone Folder' }),
-  ).toBeVisible();
-
+  await expect(page.getByRole('button', { name: 'Everyone Folder' })).toBeVisible();
   await expect(page.getByText('Everyone Folder - Everyone Document')).toBeVisible();
   await expect(page.getByText('Everyone Folder - Manager Document')).toBeVisible();
   await expect(page.getByText('Everyone Folder - Admin Document')).not.toBeVisible();
@@ -2578,10 +2572,7 @@ test('[TEAMS]: team owner can see all documents in admin folder', async ({ page
     redirectPath: `/t/${team.url}/documents/f/${adminFolder.id}`,
   });
 
-  await expect(
-    page.getByTestId('folder-grid-breadcrumbs').getByRole('link', { name: 'Admin Only Folder' }),
-  ).toBeVisible();
-
+  await expect(page.getByRole('button', { name: 'Admin Only Folder' })).toBeVisible();
   await expect(page.getByText('Admin Folder - Everyone Document')).toBeVisible();
   await expect(page.getByText('Admin Folder - Manager Document')).toBeVisible();
   await expect(page.getByText('Admin Folder - Admin Document')).toBeVisible();
@@ -2631,9 +2622,7 @@ test('[TEAMS]: team owner can see all documents in manager folder', async ({ pag
     redirectPath: `/t/${team.url}/documents/f/${managerFolder.id}`,
   });
 
-  await expect(
-    page.getByTestId('folder-grid-breadcrumbs').getByRole('link', { name: 'Manager Folder' }),
-  ).toBeVisible();
+  await expect(page.getByRole('button', { name: 'Manager Folder' })).toBeVisible();
   await expect(page.getByText('Manager Folder - Everyone Document')).toBeVisible();
   await expect(page.getByText('Manager Folder - Manager Document')).toBeVisible();
   await expect(page.getByText('Manager Folder - Admin Document')).toBeVisible();
@@ -2683,9 +2672,7 @@ test('[TEAMS]: team owner can see all documents in everyone folder', async ({ pa
     redirectPath: `/t/${team.url}/documents/f/${everyoneFolder.id}`,
   });
 
-  await expect(
-    page.getByTestId('folder-grid-breadcrumbs').getByRole('link', { name: 'Everyone Folder' }),
-  ).toBeVisible();
+  await expect(page.getByRole('button', { name: 'Everyone Folder' })).toBeVisible();
   await expect(page.getByText('Everyone Folder - Everyone Document')).toBeVisible();
   await expect(page.getByText('Everyone Folder - Manager Document')).toBeVisible();
   await expect(page.getByText('Everyone Folder - Admin Document')).toBeVisible();
@@ -2785,10 +2772,7 @@ test('[TEAMS]: team admin can see all documents in admin folder', async ({ page
     redirectPath: `/t/${team.url}/documents/f/${adminFolder.id}`,
   });
 
-  await expect(
-    page.getByTestId('folder-grid-breadcrumbs').getByRole('link', { name: 'Admin Only Folder' }),
-  ).toBeVisible();
-
+  await expect(page.getByRole('button', { name: 'Admin Only Folder' })).toBeVisible();
   await expect(page.getByText('Admin Folder - Everyone Document')).toBeVisible();
   await expect(page.getByText('Admin Folder - Manager Document')).toBeVisible();
   await expect(page.getByText('Admin Folder - Admin Document')).toBeVisible();
@@ -2844,9 +2828,7 @@ test('[TEAMS]: team admin can see all documents in manager folder', async ({ pag
     redirectPath: `/t/${team.url}/documents/f/${managerFolder.id}`,
   });
 
-  await expect(
-    page.getByTestId('folder-grid-breadcrumbs').getByRole('link', { name: 'Manager Folder' }),
-  ).toBeVisible();
+  await expect(page.getByRole('button', { name: 'Manager Folder' })).toBeVisible();
   await expect(page.getByText('Manager Folder - Everyone Document')).toBeVisible();
   await expect(page.getByText('Manager Folder - Manager Document')).toBeVisible();
   await expect(page.getByText('Manager Folder - Admin Document')).toBeVisible();
@@ -2902,9 +2884,7 @@ test('[TEAMS]: team admin can see all documents in everyone folder', async ({ pa
     redirectPath: `/t/${team.url}/documents/f/${everyoneFolder.id}`,
   });
 
-  await expect(
-    page.getByTestId('folder-grid-breadcrumbs').getByRole('link', { name: 'Everyone Folder' }),
-  ).toBeVisible();
+  await expect(page.getByRole('button', { name: 'Everyone Folder' })).toBeVisible();
   await expect(page.getByText('Everyone Folder - Everyone Document')).toBeVisible();
   await expect(page.getByText('Everyone Folder - Manager Document')).toBeVisible();
   await expect(page.getByText('Everyone Folder - Admin Document')).toBeVisible();

packages/app-tests/e2e/templates/test-unauthorized-template-access.spec.ts

@@ -1,45 +0,0 @@
-import { expect, test } from '@playwright/test';
-
-import { NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app';
-import { seedBlankTemplate } from '@documenso/prisma/seed/templates';
-import { seedUser } from '@documenso/prisma/seed/users';
-
-import { apiSignin } from '../fixtures/authentication';
-
-test.describe.configure({
-  mode: 'parallel',
-});
-
-test.describe('Unauthorized Access to Templates', () => {
-  test('should block unauthorized access to the template page', async ({ page }) => {
-    const { user, team } = await seedUser();
-    const template = await seedBlankTemplate(user, team.id);
-
-    const { user: unauthorizedUser } = await seedUser();
-
-    await apiSignin({
-      page,
-      email: unauthorizedUser.email,
-      redirectPath: `/t/${team.url}/templates/${template.id}`,
-    });
-
-    await page.goto(`${NEXT_PUBLIC_WEBAPP_URL()}/t/${team.url}/templates/${template.id}`);
-    await expect(page.getByRole('heading', { name: 'Oops! Something went wrong.' })).toBeVisible();
-  });
-
-  test('should block unauthorized access to the template edit page', async ({ page }) => {
-    const { user, team } = await seedUser();
-    const template = await seedBlankTemplate(user, team.id);
-
-    const { user: unauthorizedUser } = await seedUser();
-
-    await apiSignin({
-      page,
-      email: unauthorizedUser.email,
-      redirectPath: `/t/${team.url}/templates/${template.id}/edit`,
-    });
-
-    await page.goto(`${NEXT_PUBLIC_WEBAPP_URL()}/t/${team.url}/templates/${template.id}/edit`);
-    await expect(page.getByRole('heading', { name: 'Oops! Something went wrong.' })).toBeVisible();
-  });
-});

packages/app-tests/e2e/user/auth-sessions.spec.ts

@@ -1,82 +0,0 @@
-import { type Page, expect, test } from '@playwright/test';
-
-import { seedUser } from '@documenso/prisma/seed/users';
-
-import { apiSignin } from '../fixtures/authentication';
-import { expectTextToBeVisible } from '../fixtures/generic';
-
-test('[USER] revoke sessions', async ({ page }: { page: Page }) => {
-  const { user, team } = await seedUser();
-
-  await apiSignin({
-    page,
-    email: user.email,
-    password: 'password',
-    redirectPath: '/settings/security/sessions',
-  });
-
-  // Expect 2 rows length (header + 1)
-  await expect(page.getByRole('row')).toHaveCount(2);
-
-  // Clear cookies
-  await page.context().clearCookies();
-
-  await apiSignin({
-    page,
-    email: user.email,
-    password: 'password',
-    redirectPath: '/settings/security/sessions',
-  });
-
-  await page.context().clearCookies();
-
-  await apiSignin({
-    page,
-    email: user.email,
-    password: 'password',
-    redirectPath: '/settings/security/sessions',
-  });
-
-  // Expect 4 (3 sessions + 1 header) rows length
-  await expect(page.getByRole('row')).toHaveCount(4);
-
-  // Revoke all sessions
-  await page.getByRole('button', { name: 'Revoke all sessions' }).click();
-  await page.getByRole('button', { name: 'Revoke all sessions' }).click();
-
-  await expectTextToBeVisible(page, 'Sessions have been revoked');
-
-  // Expect (1 sessions + 1 header) rows length
-  await expect(page.getByRole('row')).toHaveCount(2);
-
-  await page.context().clearCookies();
-
-  await apiSignin({
-    page,
-    email: user.email,
-    password: 'password',
-    redirectPath: '/settings/security/sessions',
-  });
-
-  // Find table row which does not have text 'Current' and click the button called Revoke within the row.
-  await page
-    .getByRole('row')
-    .filter({ hasNotText: 'Current' })
-    .nth(1)
-    .getByRole('button', { name: 'Revoke' })
-    .click();
-  await expectTextToBeVisible(page, 'Session revoked');
-
-  // Expect (1 sessions + 1 header) rows length
-  await expect(page.getByRole('row')).toHaveCount(2);
-
-  // Revoke own session.
-  await page
-    .getByRole('row')
-    .filter({ hasText: 'Current' })
-    .first()
-    .getByRole('button', { name: 'Revoke' })
-    .click();
-
-  await expect(page).toHaveURL('/signin');
-});

packages/auth/client/index.ts

@@ -7,7 +7,6 @@ import { AppError } from '@documenso/lib/errors/app-error';
 
 import type { AuthAppType } from '../server';
 import type { SessionValidationResult } from '../server/lib/session/session';
-import type { ActiveSession } from '../server/lib/utils/get-session';
 import { handleSignInRedirect } from '../server/lib/utils/redirect';
 import type {
   TDisableTwoFactorRequestSchema,
@@ -48,26 +47,6 @@ export class AuthClient {
     window.location.href = redirectPath ?? this.signOutredirectPath;
   }
 
-  public async signOutAllSessions() {
-    await this.client['signout-all'].$post();
-  }
-
-  public async signOutSession({
-    sessionId,
-    redirectPath,
-  }: {
-    sessionId: string;
-    redirectPath?: string;
-  }) {
-    await this.client['signout-session'].$post({
-      json: { sessionId },
-    });
-
-    if (redirectPath) {
-      window.location.href = redirectPath;
-    }
-  }
-
   public async getSession() {
     const response = await this.client['session-json'].$get();
 
@@ -78,16 +57,6 @@ export class AuthClient {
     return superjson.deserialize<SessionValidationResult>(result);
   }
 
-  public async getSessions() {
-    const response = await this.client['sessions'].$get();
-
-    await this.handleError(response);
-
-    const result = await response.json();
-
-    return superjson.deserialize<{ sessions: ActiveSession[] }>(result);
-  }
-
   private async handleError<T>(response: ClientResponse<T>): Promise<void> {
     if (!response.ok) {
       const error = await response.json();

packages/auth/index.ts

@@ -1 +1,2 @@
+export * from './server/lib/errors/errors';
 export * from './server/lib/errors/error-codes';

packages/auth/server/lib/session/session.ts

@@ -2,7 +2,6 @@ import { sha256 } from '@oslojs/crypto/sha2';
 import { encodeBase32LowerCaseNoPadding, encodeHexLowerCase } from '@oslojs/encoding';
 import { type Session, type User, UserSecurityAuditLogType } from '@prisma/client';
 
-import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
 import type { RequestMetadata } from '@documenso/lib/universal/extract-request-metadata';
 import { prisma } from '@documenso/prisma';
 
@@ -130,46 +129,18 @@ export const validateSessionToken = async (token: string): Promise<SessionValida
   return { session, user, isAuthenticated: true };
 };
 
-type InvalidateSessionsOptions = {
-  userId: number;
-  sessionIds: string[];
-  metadata: RequestMetadata;
-  isRevoke?: boolean;
-};
+export const invalidateSession = async (
+  sessionId: string,
+  metadata: RequestMetadata,
+): Promise<void> => {
+  const session = await prisma.session.delete({ where: { id: sessionId } });
 
-export const invalidateSessions = async ({
-  userId,
-  sessionIds,
-  metadata,
-  isRevoke,
-}: InvalidateSessionsOptions): Promise<void> => {
-  if (sessionIds.length === 0) {
-    return;
-  }
-
-  await prisma.$transaction(async (tx) => {
-    const { count } = await tx.session.deleteMany({
-      where: {
-        userId,
-        id: { in: sessionIds },
-      },
-    });
-
-    if (count !== sessionIds.length) {
-      throw new AppError(AppErrorCode.INVALID_REQUEST, {
-        message: 'One or more sessions are not valid.',
-      });
-    }
-
-    await tx.userSecurityAuditLog.createMany({
-      data: sessionIds.map(() => ({
-        userId,
-        ipAddress: metadata.ipAddress,
-        userAgent: metadata.userAgent,
-        type: isRevoke
-          ? UserSecurityAuditLogType.SESSION_REVOKED
-          : UserSecurityAuditLogType.SIGN_OUT,
-      })),
-    });
+  await prisma.userSecurityAuditLog.create({
+    data: {
+      userId: session.userId,
+      ipAddress: metadata.ipAddress,
+      userAgent: metadata.userAgent,
+      type: UserSecurityAuditLogType.SIGN_OUT,
+    },
   });
 };

packages/auth/server/lib/utils/get-session.ts

@@ -1,8 +1,6 @@
-import type { Session } from '@prisma/client';
 import type { Context } from 'hono';
 
 import { AppError } from '@documenso/lib/errors/app-error';
-import { prisma } from '@documenso/prisma';
 
 import { AuthenticationErrorCode } from '../errors/error-codes';
 import type { SessionValidationResult } from '../session/session';
@@ -39,33 +37,6 @@ export const getOptionalSession = async (
   return await validateSessionToken(sessionId);
 };
 
-export type ActiveSession = Omit<Session, 'sessionToken'>;
-
-export const getActiveSessions = async (c: Context | Request): Promise<ActiveSession[]> => {
-  const { user } = await getSession(c);
-
-  return await prisma.session.findMany({
-    where: {
-      userId: user.id,
-      expiresAt: {
-        gt: new Date(),
-      },
-    },
-    orderBy: {
-      updatedAt: 'desc',
-    },
-    select: {
-      id: true,
-      userId: true,
-      expiresAt: true,
-      updatedAt: true,
-      createdAt: true,
-      ipAddress: true,
-      userAgent: true,
-    },
-  });
-};
-
 /**
  * Todo: (RR7) Rethink, this is pretty sketchy.
  */

packages/auth/server/routes/session.ts

@@ -2,7 +2,7 @@ import { Hono } from 'hono';
 import superjson from 'superjson';
 
 import type { SessionValidationResult } from '../lib/session/session';
-import { getActiveSessions, getOptionalSession } from '../lib/utils/get-session';
+import { getOptionalSession } from '../lib/utils/get-session';
 
 export const sessionRoute = new Hono()
   .get('/session', async (c) => {
@@ -10,11 +10,6 @@ export const sessionRoute = new Hono()
 
     return c.json(session);
   })
-  .get('/sessions', async (c) => {
-    const sessions = await getActiveSessions(c);
-
-    return c.json(superjson.serialize({ sessions }));
-  })
   .get('/session-json', async (c) => {
     const session: SessionValidationResult = await getOptionalSession(c);
 

packages/auth/server/routes/sign-out.ts

@@ -1,114 +1,27 @@
-import { sValidator } from '@hono/standard-validator';
 import { Hono } from 'hono';
-import { z } from 'zod';
 
-import { prisma } from '@documenso/prisma';
-
-import { invalidateSessions, validateSessionToken } from '../lib/session/session';
+import { invalidateSession, validateSessionToken } from '../lib/session/session';
 import { deleteSessionCookie, getSessionCookie } from '../lib/session/session-cookies';
 import type { HonoAuthContext } from '../types/context';
 
-const ZSignoutSessionSchema = z.object({
-  sessionId: z.string().trim().min(1),
+export const signOutRoute = new Hono<HonoAuthContext>().post('/signout', async (c) => {
+  const metadata = c.get('requestMetadata');
+
+  const sessionId = await getSessionCookie(c);
+
+  if (!sessionId) {
+    return new Response('No session found', { status: 401 });
+  }
+
+  const { session } = await validateSessionToken(sessionId);
+
+  if (!session) {
+    return new Response('No session found', { status: 401 });
+  }
+
+  await invalidateSession(session.id, metadata);
+
+  deleteSessionCookie(c);
+
+  return c.status(200);
 });
-
-export const signOutRoute = new Hono<HonoAuthContext>()
-  .post('/signout', async (c) => {
-    const metadata = c.get('requestMetadata');
-
-    const sessionToken = await getSessionCookie(c);
-
-    if (!sessionToken) {
-      return new Response('No session found', { status: 401 });
-    }
-
-    const { session } = await validateSessionToken(sessionToken);
-
-    if (!session) {
-      deleteSessionCookie(c);
-      return new Response('No session found', { status: 401 });
-    }
-
-    await invalidateSessions({
-      userId: session.userId,
-      sessionIds: [session.id],
-      metadata,
-      isRevoke: false,
-    });
-
-    deleteSessionCookie(c);
-
-    return c.status(200);
-  })
-  .post('/signout-all', async (c) => {
-    const metadata = c.get('requestMetadata');
-
-    const sessionToken = await getSessionCookie(c);
-
-    if (!sessionToken) {
-      return new Response('No session found', { status: 401 });
-    }
-
-    const { session } = await validateSessionToken(sessionToken);
-
-    if (!session) {
-      deleteSessionCookie(c);
-      return new Response('No session found', { status: 401 });
-    }
-
-    const userId = session.userId;
-
-    const userSessionIds = await prisma.session
-      .findMany({
-        where: {
-          userId,
-          id: {
-            not: session.id,
-          },
-        },
-        select: {
-          id: true,
-        },
-      })
-      .then((sessions) => sessions.map((session) => session.id));
-
-    await invalidateSessions({
-      userId,
-      sessionIds: userSessionIds,
-      metadata,
-      isRevoke: true,
-    });
-
-    return c.status(200);
-  })
-  .post('/signout-session', sValidator('json', ZSignoutSessionSchema), async (c) => {
-    const metadata = c.get('requestMetadata');
-
-    const { sessionId: sessionIdToRevoke } = c.req.valid('json');
-
-    const sessionToken = await getSessionCookie(c);
-
-    if (!sessionToken) {
-      return new Response('No session found', { status: 401 });
-    }
-
-    const { session } = await validateSessionToken(sessionToken);
-
-    if (!session) {
-      deleteSessionCookie(c);
-      return new Response('No session found', { status: 401 });
-    }
-
-    await invalidateSessions({
-      userId: session.userId,
-      sessionIds: [sessionIdToRevoke],
-      metadata,
-      isRevoke: true,
-    });
-
-    if (session.id === sessionIdToRevoke) {
-      deleteSessionCookie(c);
-    }
-
-    return c.status(200);
-  });

packages/ee/server-only/limits/server.ts

@@ -66,7 +66,7 @@ export const getServerLimits = async ({
     };
   }
 
-  // Early return for users with an expired subscription.
+  // If plan expired.
   if (subscription && subscription.status !== SubscriptionStatus.ACTIVE) {
     return {
       quota: INACTIVE_PLAN_LIMITS,
@@ -74,46 +74,52 @@ export const getServerLimits = async ({
     };
   }
 
-  // Allow unlimited documents for users with an unlimited documents claim.
-  // This also allows "free" claim users without subscriptions if they have this flag.
-  if (organisation.organisationClaim.flags.unlimitedDocuments) {
+  if (subscription && organisation.organisationClaim.flags.unlimitedDocuments) {
     return {
       quota: PAID_PLAN_LIMITS,
       remaining: PAID_PLAN_LIMITS,
     };
   }
 
-  const [documents, directTemplates] = await Promise.all([
-    prisma.document.count({
-      where: {
-        team: {
-          organisationId: organisation.id,
+  // If free tier or plan does not have unlimited documents.
+  if (!subscription || !organisation.organisationClaim.flags.unlimitedDocuments) {
+    const [documents, directTemplates] = await Promise.all([
+      prisma.document.count({
+        where: {
+          team: {
+            organisationId: organisation.id,
+          },
+          createdAt: {
+            gte: DateTime.utc().startOf('month').toJSDate(),
+          },
+          source: {
+            not: DocumentSource.TEMPLATE_DIRECT_LINK,
+          },
         },
-        createdAt: {
-          gte: DateTime.utc().startOf('month').toJSDate(),
+      }),
+      prisma.template.count({
+        where: {
+          team: {
+            organisationId: organisation.id,
+          },
+          directLink: {
+            isNot: null,
+          },
         },
-        source: {
-          not: DocumentSource.TEMPLATE_DIRECT_LINK,
-        },
-      },
-    }),
-    prisma.template.count({
-      where: {
-        team: {
-          organisationId: organisation.id,
-        },
-        directLink: {
-          isNot: null,
-        },
-      },
-    }),
-  ]);
+      }),
+    ]);
 
-  remaining.documents = Math.max(remaining.documents - documents, 0);
-  remaining.directTemplates = Math.max(remaining.directTemplates - directTemplates, 0);
+    remaining.documents = Math.max(remaining.documents - documents, 0);
+    remaining.directTemplates = Math.max(remaining.directTemplates - directTemplates, 0);
+
+    return {
+      quota,
+      remaining,
+    };
+  }
 
   return {
-    quota,
-    remaining,
+    quota: PAID_PLAN_LIMITS,
+    remaining: PAID_PLAN_LIMITS,
   };
 };

packages/ee/server-only/stripe/webhook/early-adopter-checkout-metadata.ts

@@ -0,0 +1,13 @@
+import { z } from 'zod';
+
+export const ZEarlyAdopterCheckoutMetadataSchema = z.object({
+  name: z.string(),
+  email: z.string(),
+  signatureText: z.string(),
+  signatureDataUrl: z.string().optional(),
+  source: z.literal('marketing'),
+});
+
+export type TEarlyAdopterCheckoutMetadataSchema = z.infer<
+  typeof ZEarlyAdopterCheckoutMetadataSchema
+>;

packages/ee/server-only/stripe/webhook/on-subscription-created.ts

@@ -81,34 +81,17 @@ export const onSubscriptionCreated = async ({ subscription }: OnSubscriptionCrea
 
   const status = match(subscription.status)
     .with('active', () => SubscriptionStatus.ACTIVE)
-    .with('trialing', () => SubscriptionStatus.ACTIVE)
     .with('past_due', () => SubscriptionStatus.PAST_DUE)
     .otherwise(() => SubscriptionStatus.INACTIVE);
 
-  const periodEnd =
-    subscription.status === 'trialing' && subscription.trial_end
-      ? new Date(subscription.trial_end * 1000)
-      : new Date(subscription.current_period_end * 1000);
-
-  await prisma.subscription.upsert({
-    where: {
-      organisationId,
-    },
-    create: {
+  await prisma.subscription.create({
+    data: {
       organisationId,
       status,
       customerId,
       planId: subscription.id,
       priceId: subscription.items.data[0].price.id,
-      periodEnd,
-      cancelAtPeriodEnd: subscription.cancel_at_period_end,
-    },
-    update: {
-      status,
-      customerId,
-      planId: subscription.id,
-      priceId: subscription.items.data[0].price.id,
-      periodEnd,
+      periodEnd: new Date(subscription.current_period_end * 1000),
       cancelAtPeriodEnd: subscription.cancel_at_period_end,
     },
   });
@@ -189,17 +172,14 @@ const handleOrganisationUpdate = async ({ customerId, claim }: HandleOrganisatio
   }
 
   // Todo: logging
-  if (
-    organisation.subscription &&
-    organisation.subscription.status !== SubscriptionStatus.INACTIVE
-  ) {
-    console.error('Organisation already has an active subscription');
+  if (organisation.subscription) {
+    console.error('Organisation already has a subscription');
 
     // This should never happen
     throw Response.json(
       {
         success: false,
-        message: `Organisation already has an active subscription`,
+        message: `Organisation already has a subscription`,
       } satisfies StripeWebhookResponse,
       { status: 500 },
     );

packages/ee/server-only/stripe/webhook/on-subscription-updated.ts

@@ -1,9 +1,8 @@
-import { OrganisationType, SubscriptionStatus } from '@prisma/client';
+import { SubscriptionStatus } from '@prisma/client';
 import { match } from 'ts-pattern';
 
 import { createOrganisationClaimUpsertData } from '@documenso/lib/server-only/organisation/create-organisation';
 import { type Stripe, stripe } from '@documenso/lib/server-only/stripe';
-import { INTERNAL_CLAIM_ID } from '@documenso/lib/types/subscription';
 import { prisma } from '@documenso/prisma';
 
 export type OnSubscriptionUpdatedOptions = {
@@ -56,12 +55,8 @@ export const onSubscriptionUpdated = async ({
     );
   }
 
-  if (
-    organisation.subscription &&
-    organisation.subscription.status !== SubscriptionStatus.INACTIVE &&
-    organisation.subscription.planId !== subscription.id
-  ) {
-    console.error('[WARNING]: Organisation might have two subscriptions');
+  if (organisation.subscription?.planId !== subscription.id) {
+    console.error('[WARNING]: Organisation has two subscriptions');
   }
 
   const previousItem = previousAttributes?.items?.data[0];
@@ -88,41 +83,20 @@ export const onSubscriptionUpdated = async ({
 
   const status = match(subscription.status)
     .with('active', () => SubscriptionStatus.ACTIVE)
-    .with('trialing', () => SubscriptionStatus.ACTIVE)
     .with('past_due', () => SubscriptionStatus.PAST_DUE)
     .otherwise(() => SubscriptionStatus.INACTIVE);
 
-  const periodEnd =
-    subscription.status === 'trialing' && subscription.trial_end
-      ? new Date(subscription.trial_end * 1000)
-      : new Date(subscription.current_period_end * 1000);
-
-  // Migrate the organisation type if it is no longer an individual plan.
-  if (
-    updatedSubscriptionClaim.id !== INTERNAL_CLAIM_ID.INDIVIDUAL &&
-    updatedSubscriptionClaim.id !== INTERNAL_CLAIM_ID.FREE &&
-    organisation.type === OrganisationType.PERSONAL
-  ) {
-    await prisma.organisation.update({
-      where: {
-        id: organisation.id,
-      },
-      data: {
-        type: OrganisationType.ORGANISATION,
-      },
-    });
-  }
-
   await prisma.$transaction(async (tx) => {
     await tx.subscription.update({
       where: {
-        organisationId: organisation.id,
+        planId: subscription.id,
       },
       data: {
+        organisationId: organisation.id,
         status: status,
         planId: subscription.id,
         priceId: subscription.items.data[0].price.id,
-        periodEnd,
+        periodEnd: new Date(subscription.current_period_end * 1000),
         cancelAtPeriodEnd: subscription.cancel_at_period_end,
       },
     });