fix: templates

- Add folder search
- Used correct HTML elements
- Added missing translations
- Removed automatic folder redirects
- Removed duplicate code
- Added folder loading skeletons and empty states

README.md

@@ -49,8 +49,6 @@ 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.
@@ -247,14 +245,14 @@ Now you can install the dependencies and build it:
 
 ```
 npm i
-npm run build:web
+npm run build
 npm run prisma:migrate-deploy
 ```
 
 Finally, you can start it with:
 
 ```
-cd apps/web
+cd apps/remix
 npm run start
 ```
 
@@ -275,7 +273,7 @@ After=network.target
 Environment=PATH=/path/to/your/node/binaries
 Type=simple
 User=www-data
-WorkingDirectory=/var/www/documenso/apps/web
+WorkingDirectory=/var/www/documenso/apps/remix
 ExecStart=/usr/bin/next start -p 3500
 TimeoutSec=15
 Restart=always

apps/documentation/.gitignore

@@ -34,3 +34,8 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+# next-sitemap output
+/public/sitemap.xml
+/public/robots.txt
+/public/sitemap-*.xml

apps/documentation/next-sitemap.config.js

@@ -0,0 +1,5 @@
+/** @type {import('next-sitemap').IConfig} */
+module.exports = {
+  siteUrl: 'https://docs.documenso.com', // Replace with your actual site URL
+  generateRobotsTxt: true, // Generates robots.txt
+};

apps/documentation/package.json

@@ -4,7 +4,7 @@
   "private": true,
   "scripts": {
     "dev": "next dev -p 3002",
-    "build": "next build",
+    "build": "next build && next-sitemap",
     "start": "next start -p 3002",
     "lint:fix": "next lint --fix",
     "clean": "rimraf .next && rimraf node_modules"
@@ -26,6 +26,7 @@
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
+    "next-sitemap": "^4.2.3",
     "typescript": "5.6.2"
   }
-}
+}

apps/documentation/pages/developers/_meta.json

@@ -5,6 +5,7 @@
     "title": "Development & Deployment"
   },
   "local-development": "Local Development",
+  "developer-mode": "Developer Mode",
   "self-hosting": "Self Hosting",
   "contributing": "Contributing",
   "-- API & Integration Guides": {

apps/documentation/pages/developers/developer-mode/field-coordinates.mdx

@@ -0,0 +1,18 @@
+---
+title: Field Coordinates
+description: Learn how to get the coordinates of a field in a document.
+---
+
+## Field Coordinates
+
+Field coordinates represent the position of a field in a document. They are returned in the `pageX` and `pageY` properties of the field.
+
+To enable field coordinates, you can use the `devmode` query parameter.
+
+```bash
+https://app.documenso.com/documents/<document-id>/edit?devmode=true
+```
+
+You should then see the coordinates on top of each field.
+
+![Field Coordinates](/developer-mode/field-coordinates.webp)

apps/documentation/pages/users/_meta.json

@@ -6,11 +6,12 @@
     "title": "How To Use"
   },
   "get-started": "Get Started",
-  "profile": "User Profile",
-  "signing-documents": "Signing Documents",
+  "profile": "Public Profile",
+  "organisations": "Organisations",
+  "documents": "Documents",
   "templates": "Templates",
+  "branding": "Branding",
   "direct-links": "Direct Signing Links",
-  "teams": "Teams",
   "-- Legal Overview": {
     "type": "separator",
     "title": "Legal Overview"
@@ -18,4 +19,4 @@
   "fair-use": "Fair Use Policy",
   "licenses": "Licenses",
   "compliance": "Compliance"
-}
+}

apps/documentation/pages/users/branding.mdx

@@ -0,0 +1,28 @@
+---
+title: Branding Preferences
+description: Learn how to set the branding preferences for your team account.
+---
+
+import Image from 'next/image';
+
+import { Callout, Steps } from 'nextra/components';
+
+# Branding Preferences
+
+Branding preferences allow you to set the default settings when emailing documents to your recipients.
+
+## Preferences
+
+Branding preferences can be set on either the organisation or team level.
+
+By default, teams inherit the preferences from the organisation. You can override these preferences on the team level at any time.
+
+To access the preferences, navigate to either the organisation or teams settings page and click the **Preferences** tab. This page contains both the preferences for documents and branding, the branding section is located at the bottom of the page.
+
+![A screenshot of the organisation's document preferences page](/organisations/organisation-branding.webp)
+
+On this page, you can:
+
+- **Upload a Logo** - Upload your team's logo to be displayed instead of the default Documenso logo.
+- **Set the Brand Website** - Enter the URL of your team's website to be displayed in the email communications sent by the team.
+- **Add Additional Brand Details** - You can add additional information to display at the bottom of the emails sent by the team. This can include contact information, social media links, and other relevant details.

apps/documentation/pages/users/documents/_meta.json

@@ -0,0 +1,5 @@
+{
+  "sending-documents": "Sending Documents",
+  "document-preferences": "Document Preferences",
+  "document-visibility": "Document Visibility"
+}

apps/documentation/pages/users/documents/document-preferences.mdx

@@ -0,0 +1,42 @@
+---
+title: Preferences
+description: Learn how to manage your team's global preferences.
+---
+
+import Image from 'next/image';
+
+import { Callout, Steps } from 'nextra/components';
+
+# Document Preferences
+
+Document preferences allow you to set the default settings when creating new documents and templates.
+
+For example, you can set the default language for documents sent by the team, or set the allowed signatures types.
+
+## Preferences
+
+Document preferences can be set on either the organisation or team level.
+
+By default, teams inherit the preferences from the organisation. You can override these preferences on the team level at any time.
+
+To access the preferences, navigate to either the organisation or teams settings page and click the **Preferences** tab.
+
+![A screenshot of the organisation's document preferences page](/organisations/organisation-document-preferences.webp)
+
+- **Document Visibility** - Set the default visibility of the documents created by team members. Learn more about [document visibility](/users/documents/document-visibility).
+- **Default Document Language** - This setting allows you to set the default language for the documents uploaded in the organisation. The default language is used as the default language in the email communications with the document recipients.
+- **Signature Settings** - Controls what signatures are allowed to be used when signing the documents.
+- **Sender Details** - Set whether the sender's name should be included in the emails sent by the team. See more below [sender details](/users/documents/document-preferences#sender-details).
+- **Include the Signing Certificate** - This setting controls whether the signing certificate should be included in the signed documents. If enabled, the signing certificate is included in the signed documents. If disabled, the signing certificate is not included in the signed documents. Regardless of this setting, the signing certificate is always available in the document's audit log page.
+
+Document visibility, language and signature settings can be overriden on a per document basis.
+
+### Sender Details
+
+If the **Sender Details** setting is enabled, the emails sent by the team will include the sender's name. The email will say:
+
+> "Example User" on behalf of "Example Team" has invited you to sign "document.pdf"
+
+If the **Sender Details** setting is disabled, the emails sent by the team will not include the sender's name. The email will say:
+
+> "Example Team" has invited you to sign "document.pdf"

apps/documentation/pages/users/documents/document-visibility.mdx

@@ -5,19 +5,25 @@ description: Learn how to control the visibility of your team documents.
 
 import { Callout } from 'nextra/components';
 
-# Team's Document Visibility
+# Document Visibility
 
-The default document visibility option allows you to control who can view and access the documents uploaded to your team account. The document visibility can be set to one of the following options:
+The default document visibility option allows you to control who can view and access the documents uploaded within a team.
+
+This value can either be set in the [document preferences](/users/documents/document-preferences), or when you [create the document](/users/documents/send-document)
+
+## Document Visibility Options
+
+The document visibility can be set to one of the following options:
 
 - **Everyone** - The document is visible to all team members.
 - **Managers and above** - The document is visible to team members with the role of _Manager or above_ and _Admin_.
 - **Admin only** - The document is only visible to the team's admins.
 
-![A screenshot of the document visibility selector from the team's global preferences page](/teams/team-preferences-document-visibility.webp)
+The default document visibility is set to "_EVERYONE_" by default. You can change this setting by going to the [document preferences page](/users/documents/document-preferences) and selecting a different visibility option.
 
-The default document visibility is set to "_EVERYONE_" by default. You can change this setting by going to the [team's general preferences page](/users/teams/preferences) and selecting a different visibility option.
+![Document visibility preference](/organisations/organisation-document-visibility.webp)
 
-Here's how it works:
+## How it works
 
 - If a user with the "_Member_" role creates a document and the default document visibility is set to "_Everyone_", the document's visibility is set to "_EVERYONE_".
   - The user can't change the visibility of the document in the document editor.

apps/documentation/pages/users/documents/sending-documents.mdx

@@ -115,7 +115,7 @@ All fields can be placed anywhere on the document and resized as needed.
 
 <Callout type="info">
   Learn more about the available field types and how to use them on the [Fields
-  page](signing-documents/fields).
+  page](/users/documents/fields).
 </Callout>
 
 #### Signature Required

apps/documentation/pages/users/get-started/account-creation.mdx

@@ -10,7 +10,7 @@ import { Callout, Steps } from 'nextra/components';
 <Steps>
 ### Pick a Plan
 
-The first step to start using Documenso is to pick a plan and create an account. At the moment of writing this guide, we have 3 plans available: Free, Individual, and Teams.
+The first step to start using Documenso is to pick a plan and create an account. At the moment of writing this guide, we have 3 plans available: Free, Individual, Teams and Platform.
 
 Explore each plan's features and choose the one that best suits your needs. The [pricing page](https://documen.so/pricing) has more information about the plans.
 
@@ -28,6 +28,6 @@ You can claim a premium username by upgrading to a paid plan. After upgrading to
 
 ### Optional: Create a Team
 
-If you are working with others, you can create a team and invite your team members to collaborate on your documents. More information about teams is available in the [Teams section](/users/get-started/teams).
+If you are working with others, you can create a team and invite your team members to collaborate on your documents. More information about teams is available in the [Teams section](/users/organisations/teams).
 
 </Steps>

apps/documentation/pages/users/get-started/teams.mdx

@@ -1,99 +0,0 @@
----
-title: Teams
-description: Learn how to create and manage teams in Documenso.
----
-
-import Image from 'next/image';
-
-import { Callout, Steps } from 'nextra/components';
-
-# Teams
-
-Documenso allows you to create teams to collaborate with others on creating and signing documents.
-
-<Steps>
-
-### Create a New Team
-
-Anyone can create a team from their account by clicking on the "+" (plus) button in the "Teams" section from the account dropdown.
-
-![Documenso account dropdown menu](/get-started-images/add-team.webp)
-
-Each team is a separate entity with its members, documents, and templates. You can create as many teams as you like but remember that each team is billed separately.
-
-<Callout type="info">You can transfer the ownership of the team at any time.</Callout>
-
-### Name and URL
-
-Clicking the "+" button will open a modal where you must pick your team's name and URL. The URL is the team's identifier and will link to the team's page and settings. An example URL would be:
-
-```bash
-https://app.documenso.com/t/<your-team-name>
-```
-
-![Documenso create team modal](/get-started-images/add-team-2.webp)
-
-You can select a different name and URL for your team, but we recommend using the same or similar name.
-
-### Invite Team Members
-
-After creating the team, you can invite team members by navigating to the "Members" tab in the team settings and clicking the "Invite member" button.
-
-To access the team settings, click on the team's name in the account dropdown and select the appropriate team. Lastly, click again on the avatar and then "Team Settings".
-
-Or you can copy this URL:
-
-```bash
-https://app.documenso.com/t/<your-team-name>/settings/members
-```
-
-Once you click on the "Invite member" button, you will be prompted to enter the email address of the person you want to invite. You can also select the role of the person you are inviting.
-
-![Invite team members in Documenso dashboard](/get-started-images/add-team-members-documenso.webp)
-
-You can also bulk-invite members by uploading a CSV file with the email addresses and roles of the people you want to invite.
-
-The table below shows how the CSV file should be structured:
-
-| Email address              | Role    |
-| -------------------------- | ------- |
-| team-admin@documenso.com   | Admin   |
-| team-manager@documenso.com | Manager |
-| team-member@documenso.com  | Member  |
-
-<Callout type="info">
-  The basic team plan includes 5 members. You can invite as many members as you like by upgrading
-  your team's seats on the team's billing page.
-</Callout>
-
-#### Roles
-
-You can assign different permissions to team members based on their roles. The roles available are:
-
-|  Role   | Create, Edit, Send Documents | Manage Users | Manage Admins | Settings | Billing | Delete/ Transfer |
-| :-----: | :--------------------------: | :----------: | :-----------: | :------: | :-----: | :--------------: |
-| Member  |              ✅              |      ❌      |      ❌       |    ❌    |   ❌    |        ❌        |
-| Manager |              ✅              |      ✅      |      ❌       |    ✅    |   ✅    |        ❌        |
-|  Admin  |              ✅              |      ✅      |      ✅       |    ✅    |   ✅    |        ❌        |
-|  Owner  |              ✅              |      ✅      |      ✅       |    ✅    |   ✅    |        ✅        |
-
-### Set a Team Email
-
-You can add a team email to make signing and sending documents easier. Adding a team email allows you to:
-
-- See a signing request sent to this email (Team Inbox)
-- See all documents sent on behalf of the team
-
-### (Optional) Transfer Team Ownership
-
-You can transfer the team's ownership at any time. To do this, navigate to the "General" tab in the team settings and click the "Transfer team" button.
-
-Use this URL to get to the team settings:
-
-```bash
-https://app.documenso.com/t/<your-team-name>/settings
-```
-
-### [Send your First Document](https://app.documenso.com/)
-
-</Steps>

apps/documentation/pages/users/organisations/_meta.json

@@ -0,0 +1,7 @@
+{
+  "index": "Introduction",
+  "members": "Members",
+  "groups": "Groups",
+  "teams": "Teams",
+  "billing": "Billing"
+}

apps/documentation/pages/users/organisations/billing.mdx

@@ -0,0 +1,19 @@
+---
+title: Billing
+description: Learn how to manage your organisation's billing and subscription.
+---
+
+import Image from 'next/image';
+
+import { Callout, Steps } from 'nextra/components';
+
+### Billing and Subscription Management
+
+Organisations handle billing centrally, making it easier to manage:
+
+- **Unified Billing**: One subscription covers all teams in the organisation
+- **Seat Management**: Add or remove seats across all teams automatically (Teams plan)
+
+You can change plans, view invoices and manage your subscription from the billing page which is accessible from the organisation settings.
+
+![A screenshot of the organisation's billing page](/organisations/organisations-billing.webp)

apps/documentation/pages/users/organisations/groups.mdx

@@ -0,0 +1,75 @@
+---
+title: Preferences
+description: Learn how to manage your team's global preferences.
+---
+
+import Image from 'next/image';
+
+import { Callout, Steps } from 'nextra/components';
+
+# Organisation Groups
+
+Organisation groups are a powerful administrative tool that streamlines user management across your entire organisation. Instead of manually assigning individual users to multiple teams, groups allow you to manage access at scale.
+
+This automated approach ensures consistent permissions while reducing administrative overhead for tasks like onboarding employees or managing contractor access.
+
+## Understanding groups
+
+### Key Benefits
+
+- **Instant Access Management**: New hires get immediate, appropriate access across all relevant teams
+- **Bulk Operations**: Remove an entire group (like a departing contractor team) and all members lose access simultaneously
+- **Role Consistency**: Ensure the same role is applied consistently across teams—no more accidentally giving admin access when member access was intended
+- **Audit Trail**: Easily track which groups have access to which teams
+
+### Example use case: Legal Compliance Team
+
+Imagine you have a legal compliance team that needs access to review documents across all departments. Instead of manually adding each legal team member to every departmental team (Sales, Marketing, HR, Operations), you can:
+
+1. Create a "Legal Compliance" group with the "Member" Organisation Role
+2. Add legal team members to this group
+3. Assign the "Legal Compliance" group to the required teams
+
+Now, when Sarah from Legal joins the company, you can simply add her to the "Legal Compliance" group. Once added, she automatically gains access to all teams the "Legal Compliance" group is assigned to.
+
+When John from Legal leaves the company, you remove him from the group and his access is instantly revoked across all teams.
+
+## Getting started with groups
+
+Navigate to the "Groups" section in your organisation settings to create and manage groups.
+
+There are two types of roles when using groups:
+
+- **Organisation Role**: A global organisation role given to all members of the group
+- **Team Role**: A team role you select when assigning the group to a team
+
+You should generally have the "Organisation Role" set to "Organisation Member", otherwise these members would by default have access to all teams anyway due to the high organisation role.
+
+### Creating Custom Groups
+
+When creating a custom group, you can:
+
+1. **Name the Group**: Give it a descriptive name that reflects its purpose
+2. **Set Organisation Role**: Define the default **organisation role** for group members
+3. **Add Members**: Include organisation members in the group
+
+![Organisation group creation](/organisations/organisation-group-create.webp)
+
+### Manage Custom Groups
+
+By clicking the "Manage" button on a custom group, you can view all teams it is assigned to and modify the group's settings.
+
+![Organisation group management](/organisations/organisation-group-manage.webp)
+
+### Assigning a group to a team
+
+To assign a group to a team, you need to navigate to the team settings and click the "Groups" tab.
+
+![Organisation group assignment](/organisations/organisation-group-assignment.webp)
+
+From here, click the "Add groups" button to begin the process of assigning a group to a team. Once you have added the group you can see that the members have been automatically added to the team in the members tab.
+
+## What's next?
+
+- [Create Your First Team](/users/organisations/teams)
+- [Manage Default Settings](/users/documents/document-preferences)

apps/documentation/pages/users/organisations/index.mdx

@@ -0,0 +1,65 @@
+---
+title: Organisations
+description: Learn how to create and manage organisations in Documenso.
+---
+
+import Image from 'next/image';
+
+import { Callout, Steps } from 'nextra/components';
+
+# Organisations
+
+Organisations allow you to manage multiple teams and users under a single managed entity. This powerful feature enables enterprise-level collaboration and streamlined management across your entire organisation.
+
+## What are Organisations?
+
+Organisations are the top-level entity in Documenso's hierarchy structure:
+
+![Organisations diagram](/organisations/organisations-basic-diagram.webp)
+
+Each organisation can contain multiple teams, and each team can have multiple members. This structure provides:
+
+- **Centralized Management**: Control multiple teams from a single organisational dashboard
+- **Unified Billing**: Manage billing and subscriptions at the organisation level
+- **Access Control**: Define roles and groups across the entire organisation
+- **Group Management**: Create custom groups to organise members and control team access
+- **Global Settings**: Apply consistent settings across all teams in your organisation
+
+## Create a new organisation
+
+You can create multiple organisations, but each organisation will be billed separately.
+
+<Steps>
+
+### Creating Organisations
+
+To create a new organisation, navigate to the organisation section in your account settings and click the "Create Organisation" button.
+
+![Create organisation in Documenso dashboard](/organisations/organisations-create.webp)
+
+### Select your plan
+
+Choose from our range of plans for your new organisation. If you want to instead upgrade your current organisation, you can do so by going into your settings billing page and upgrade it there.
+
+### Name setup
+
+When creating an organisation, you'll need to provide:
+
+- **Organisation Name**: The display name for your organisation
+
+</Steps>
+
+Once your organisation is established, you can create teams to organise your work and collaborate effectively. Each team operates independently but inherits organisation-level settings and branding.
+
+## Best Practices for Organisation Management
+
+1. **Use groups effectively**: Leverage groups to simplify permission management
+2. **Set default settings**: Configure organisation-wide settings for consistency
+
+## What's next?
+
+- [Create Your First Team](/users/organisations/teams)
+- [Invite Organisation Members](/users/organisations/members)
+- [Create Organisation Groups](/users/organisations/groups)
+- [Manage Default Settings](/users/documents/document-preferences)
+- [Manage Default Branding](/users/branding)

apps/documentation/pages/users/organisations/members.mdx

@@ -0,0 +1,65 @@
+---
+title: Members
+description: Learn how to invite and manage your organisation's members.
+---
+
+import Image from 'next/image';
+
+import { Callout, Steps } from 'nextra/components';
+
+# Organisation Members
+
+Organisation members are the core users of your organisation. They are the ones who can access the team resources and collaborate with other members.
+
+## Organisation Roles
+
+You can assign different permissions to organisation members by using roles. The roles available are:
+
+|         Role         | Manage Settings/Teams/Members | Billing | Delete Organisation |
+| :------------------: | :---------------------------: | :-----: | ------------------- |
+|  Organisation Owner  |              ✅               |   ✅    | ✅                  |
+|  Organisation Admin  |              ✅               |   ✅    | ✅                  |
+| Organisation Manager |              ✅               |   ❌    | ❌                  |
+| Organisation Member  |              ❌               |   ❌    | ❌                  |
+
+<Callout type="info">
+  Organisation admins and managers will automatically have access to all teams as the "Team Admin"
+  role. When creating a team you can also decide whether to automatically allow normal members to
+  access it by default as well.
+</Callout>
+
+## Invite Organisation Members
+
+To invite organisation members, you need to be an organisation owner, admin or manager.
+
+1. Open the menu switcher top right
+2. Hover over your new organisation and click the settings icon
+3. Navigate to the "Members" tab
+4. Click "Invite Member"
+
+Once you click on the "Invite member" button, you will be prompted to enter the email address of the person you want to invite. You can also select the role of the person you are inviting.
+
+![Invite organisation members](/organisations/organisations-member-invite.webp)
+
+You can also bulk-invite members by uploading a CSV file with the email addresses and roles of the people you want to invite.
+
+The table below shows how the CSV file should be structured:
+
+| Email address             | Role    |
+| ------------------------- | ------- |
+| org-admin@documenso.com   | Admin   |
+| org-manager@documenso.com | Manager |
+| org-member@documenso.com  | Member  |
+
+<Callout type="info">
+  The basic team plan includes 5 organisation members. Going over the 5 members will charge your
+  organisation according to the seat plan pricing.
+</Callout>
+
+## Manage Organisation Members
+
+On the same page, you can change the organisation member's roles or remove them from the organisation.
+
+## What's next?
+
+- [Use groups to organise your members](/users/organisations/groups)

apps/documentation/pages/users/organisations/teams.mdx

@@ -0,0 +1,121 @@
+---
+title: Teams
+description: Learn how to create and manage teams in Documenso.
+---
+
+import Image from 'next/image';
+
+import { Callout, Steps } from 'nextra/components';
+
+# Teams
+
+Documenso teams allow you to collaborate with others on creating, sending and receiving documents within your organisation. Teams operate within the organisational structure and inherit settings and branding from their parent organisation.
+
+## Team Structure
+
+Teams provide focused collaboration spaces while benefiting from organisation-level management and settings.
+
+Each team within an organisation has its own:
+
+- Team members and roles
+- Documents and templates
+- Team-specific settings (that can override organisation defaults)
+- Team email and branding (if enabled)
+
+## Creating a Team
+
+Only members with the "Organisation Admin" or "Organisation Manager" role can create teams.
+
+<Steps>
+
+### Create Team
+
+To create a team, navigate to the organisation settings page and click the "Teams" tab. Then you can click the "Create Team" button.
+
+![Create Team Dialog](/teams/team-create.webp)
+
+### Name and URL
+
+When creating a team, you'll need to provide:
+
+- **Team Name**: The display name for your team
+- **Team URL**: A unique identifier for your team
+
+The team URL will follow this format:
+
+```bash
+https://app.documenso.com/t/<team-url>
+```
+
+You can select different names and URLs for your team, but we recommend using the same or similar names for consistency.
+
+![Documenso create team modal](/teams/team-create-dialog.webp)
+
+You can also decide whether to automatically inherit members from the organisation into the team. This means that all members of the organisation will have access to this team.
+
+Members with the "Organisation Admin" or "Organisation Manager" role will be assigned as "Team Admin" regardless of this setting. This will only affect members with the "Organisation Member" role, who will be added to the team as a "Team Member".
+
+Disabling this setting will remove all these members automatically. This can always be turned on or off later in the teams member settings page.
+
+</Steps>
+
+## Team Members
+
+After creating the team, you can add organisation members into your team using two methods:
+
+- Directly adding members to the team
+- Add members using groups
+
+### Directly adding members
+
+1. Navigate to the team settings member page
+2. Click the "Add Members" button
+3. Choose which members you want to add
+4. Assign the team roles for each team member
+
+If you want to add people outside of the organisation, you will need to invite them to the organisation first.
+
+See the [organisation members](/users/organisations/members#invite-organisation-members) page for more information.
+
+### Adding members using groups
+
+1. Navigate to the teams settings groups page
+2. Click the "Add groups" button
+3. Choose which groups you want to add
+4. Assign the team roles for each group
+
+See the [organisation groups](/users/organisations/groups) page for more information.
+
+### Team Member Roles
+
+You can assign different permissions to team members based on their roles. The roles available are:
+
+|     Role     | Manage Documents | Manage Team | Delete Team |
+| :----------: | :--------------: | :---------: | :---------: |
+|  Team Admin  |        ✅        |     ✅      |     ✅      |
+| Team Manager |        ✅        |     ✅      |     ❌      |
+| Team Member  |        ✅        |     ❌      |     ❌      |
+
+These roles can be used for document visibility and management as well.
+
+## Set a Team Email
+
+You can add a team email which allows you to:
+
+- See signing requests sent to this email (Team Inbox)
+- See documents sent from this email
+- Send documents on behalf of the team
+- Maintain consistent team branding in communications
+
+## Team Settings and Branding
+
+You can override preferences and settings from the Organisation on the Team level. See the following pages for more information:
+
+- [Document preferences](/users/documents/document-preferences)
+- [Branding preferences](/users/branding/branding-preferences)
+
+## What's next?
+
+- [Send your first document](/users/documents/sending-documents)
+- [Setup your default document preferences](/users/documents/document-preferences)
+- [Setup your default branding preferences](/users/branding)

apps/documentation/pages/users/profile.mdx

@@ -1,5 +1,5 @@
 ---
-title: User Profile
+title: Public Profile
 description: Learn how to set up your public profile on Documenso.
 ---
 
@@ -15,7 +15,7 @@ Documenso allows you to create a public profile to share your templates for anyo
 
 ### Navigate to Your Profile Settings
 
-Click on your profile picture in the top right corner and select "User settings". Then, navigate to the "Public Profile" tab to configure your profile.
+Click on your profile picture in the top right corner and select "Settings" or "Team Settings". Then, navigate to the "Public Profile" tab to configure your profile.
 
 ![The profile settings page](/public-profile/documenso-public-profile-settings.webp)
 
@@ -45,6 +45,8 @@ You can choose to make your profile public or private. Only you can access it if
 
 To make your profile public, toggle the switch to the right ("Show") at the top right-hand side of the page.
 
+![An example of a enabling a public profile on Documenso](/public-profile/documenso-enable-public-profile-settings.webp)
+
 ### (Optional) Link Templates
 
 Linking templates to your profile is optional, but it's what makes your profile helpful. Linking templates allow people to sign documents directly from your profile. As a result, we recommend linking at least one template you want to share with others.

apps/documentation/pages/users/signing-documents/_meta.json

@@ -1,4 +0,0 @@
-{
-  "index": "Send Documents",
-  "fields": "Document Fields"
-}

apps/documentation/pages/users/teams/_meta.json

@@ -1,6 +0,0 @@
-{
-  "preferences": "Preferences",
-  "document-visibility": "Document Visibility",
-  "sender-details": "Email Sender Details",
-  "branding-preferences": "Branding Preferences"
-}

apps/documentation/pages/users/teams/branding-preferences.mdx

@@ -1,16 +0,0 @@
----
-title: Branding Preferences
-description: Learn how to set the branding preferences for your team account.
----
-
-# Branding Preferences
-
-You can set the branding preferences for your team account by going to the **Branding Preferences** tab in the team's settings dashboard.
-
-![A screenshot of the team's branding preferences page](/teams/team-branding-preferences.webp)
-
-On this page, you can:
-
-- **Upload a Logo** - Upload your team's logo to be displayed instead of the default Documenso logo.
-- **Set the Brand Website** - Enter the URL of your team's website to be displayed in the email communications sent by the team.
-- **Add Additional Brand Details** - You can add additional information to display at the bottom of the emails sent by the team. This can include contact information, social media links, and other relevant details.

apps/documentation/pages/users/teams/preferences.mdx

@@ -1,19 +0,0 @@
----
-title: Preferences
-description: Learn how to manage your team's global preferences.
----
-
-# Preferences
-
-You can manage your team's global preferences by clicking on the **Preferences** tab in the team's settings dashboard.
-
-![A screenshot of the team's global preferences page](/teams/team-preferences.webp)
-
-The preferences page allows you to update the following settings:
-
-- **Document Visibility** - Set the default visibility of the documents created by team members. Learn more about [document visibility](/users/teams/document-visibility).
-- **Default Document Language** - This setting allows you to set the default language for the documents uploaded in the team account. The default language is used as the default language in the email communications with the document recipients. You can change the language for individual documents when uploading them.
-- **Sender Details** - Set whether the sender's name should be included in the emails sent by the team. Learn more about [sender details](/users/teams/sender-details).
-- **Typed Signature** - It controls whether the document recipients can sign the documents with a typed signature or not. If enabled, the recipients can sign the document using either a drawn or a typed signature. If disabled, the recipients can only sign the documents usign a drawn signature. This setting can also be changed for individual documents when uploading them.
-- **Include the Signing Certificate** - This setting controls whether the signing certificate should be included in the signed documents. If enabled, the signing certificate is included in the signed documents. If disabled, the signing certificate is not included in the signed documents. Regardless of this setting, the signing certificate is always available in the document's audit log page.
-- **Branding Preferences** - Set the branding preferences and defaults for the team account. Learn more about [branding preferences](/users/teams/branding-preferences).

apps/documentation/pages/users/teams/sender-details.mdx

@@ -1,14 +0,0 @@
----
-title: Email Sender Details
-description: Learn how to update the sender details for your team's email notifications.
----
-
-## Sender Details
-
-If the **Sender Details** setting is enabled, the emails sent by the team will include the sender's name. The email will say:
-
-> "Example User" on behalf of "Example Team" has invited you to sign "document.pdf"
-
-If the **Sender Details** setting is disabled, the emails sent by the team will not include the sender's name. The email will say:
-
-> "Example Team" has invited you to sign "document.pdf"

apps/remix/app/app.css

@@ -1,19 +1,30 @@
 @import '@documenso/ui/styles/theme.css';
 
+/* Inter Variable Fonts */
 @font-face {
   font-family: 'Inter';
-  src: url('/public/fonts/inter-regular.ttf') format('ttf');
-  /* font-weight: 400;
+  src: url('/fonts/inter-variablefont_opsz,wght.ttf') format('truetype-variations');
+  font-weight: 100 900;
   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('/public/fonts/caveat.ttf') format('ttf');
-  /* font-weight: 400;
+  src: url('/fonts/caveat-variablefont_wght.ttf') format('truetype-variations');
+  font-weight: 400 600;
   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 } from 'react';
+import { useEffect, 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 * as DialogPrimitive from '@radix-ui/react-dialog';
-import { FolderIcon, HomeIcon, Loader2 } from 'lucide-react';
+import { FolderIcon, HomeIcon, Loader2, Search } from 'lucide-react';
 import { useForm } from 'react-hook-form';
 import { useNavigate } from 'react-router';
 import { z } from 'zod';
@@ -31,6 +31,7 @@ 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';
@@ -61,6 +62,8 @@ export const DocumentMoveToFolderDialog = ({
   const navigate = useNavigate();
   const team = useCurrentTeam();
 
+  const [searchTerm, setSearchTerm] = useState('');
+
   const form = useForm<TMoveDocumentFormSchema>({
     resolver: zodResolver(ZMoveDocumentFormSchema),
     defaultValues: {
@@ -83,6 +86,7 @@ export const DocumentMoveToFolderDialog = ({
   useEffect(() => {
     if (!open) {
       form.reset();
+      setSearchTerm('');
     } else {
       form.reset({ folderId: currentFolderId });
     }
@@ -131,6 +135,10 @@ export const DocumentMoveToFolderDialog = ({
     }
   };
 
+  const filteredFolders = folders?.data.filter((folder) =>
+    folder.name.toLowerCase().includes(searchTerm.toLowerCase()),
+  );
+
   return (
     <Dialog {...props} open={open} onOpenChange={onOpenChange}>
       <DialogContent>
@@ -144,8 +152,18 @@ 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="mt-4 flex flex-col gap-y-4">
+          <form onSubmit={form.handleSubmit(onSubmit)} className="flex flex-col gap-y-4">
             <FormField
               control={form.control}
               name="folderId"
@@ -154,8 +172,9 @@ export const DocumentMoveToFolderDialog = ({
                   <FormLabel>
                     <Trans>Folder</Trans>
                   </FormLabel>
+
                   <FormControl>
-                    <div className="space-y-2">
+                    <div className="max-h-96 space-y-2 overflow-y-auto">
                       {isFoldersLoading ? (
                         <div className="flex h-10 items-center justify-center">
                           <Loader2 className="h-4 w-4 animate-spin" />
@@ -170,10 +189,10 @@ export const DocumentMoveToFolderDialog = ({
                             disabled={currentFolderId === null}
                           >
                             <HomeIcon className="mr-2 h-4 w-4" />
-                            <Trans>Root (No Folder)</Trans>
+                            <Trans>Home (No Folder)</Trans>
                           </Button>
 
-                          {folders?.data.map((folder) => (
+                          {filteredFolders?.map((folder) => (
                             <Button
                               key={folder.id}
                               type="button"
@@ -186,6 +205,12 @@ 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,17 +1,14 @@
 import { useEffect, useState } from 'react';
 
 import { zodResolver } from '@hookform/resolvers/zod';
-import { msg } from '@lingui/core/macro';
-import { useLingui } from '@lingui/react';
+import { Trans, useLingui } from '@lingui/react/macro';
+import type { FolderType } from '@prisma/client';
 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 { 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 {
@@ -34,26 +31,22 @@ 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 CreateFolderDialogProps = {
+export type FolderCreateDialogProps = {
+  type: FolderType;
   trigger?: React.ReactNode;
 } & Omit<DialogPrimitive.DialogProps, 'children'>;
 
-export const CreateFolderDialog = ({ trigger, ...props }: CreateFolderDialogProps) => {
-  const { _ } = useLingui();
+export const FolderCreateDialog = ({ type, trigger, ...props }: FolderCreateDialogProps) => {
+  const { t } = 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();
@@ -67,37 +60,21 @@ export const CreateFolderDialog = ({ trigger, ...props }: CreateFolderDialogProp
 
   const onSubmit = async (data: TCreateFolderFormSchema) => {
     try {
-      const newFolder = await createFolder({
+      await createFolder({
         name: data.name,
         parentId: folderId,
-        type: FolderType.DOCUMENT,
+        type,
       });
 
       setIsCreateFolderOpen(false);
 
-      const documentsPath = formatDocumentsPath(team.url);
-
-      await navigate(`${documentsPath}/f/${newFolder.id}`);
-
       toast({
-        description: 'Folder created successfully',
+        description: t`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: 'Failed to create folder',
-        description: _(msg`An unknown error occurred while creating the folder.`),
+        title: t`Failed to create folder`,
+        description: t`An unknown error occurred while creating the folder.`,
         variant: 'destructive',
       });
     }
@@ -113,48 +90,60 @@ export const CreateFolderDialog = ({ trigger, ...props }: CreateFolderDialogProp
     <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
+            variant="outline"
+            className="flex items-center"
+            data-testid="folder-create-button"
+          >
+            <FolderPlusIcon className="mr-2 h-4 w-4" />
+            <Trans>Create Folder</Trans>
           </Button>
         )}
       </DialogTrigger>
 
       <DialogContent>
         <DialogHeader>
-          <DialogTitle>Create New Folder</DialogTitle>
+          <DialogTitle>
+            <Trans>Create New Folder</Trans>
+          </DialogTitle>
           <DialogDescription>
-            Enter a name for your new folder. Folders help you organise your documents.
+            <Trans>Enter a name for your new folder. Folders help you organise your items.</Trans>
           </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>
-              )}
-            />
+          <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>
+                )}
+              />
 
-            <DialogFooter>
-              <Button
-                type="button"
-                variant="secondary"
-                onClick={() => setIsCreateFolderOpen(false)}
-              >
-                Cancel
-              </Button>
+              <DialogFooter>
+                <Button
+                  type="button"
+                  variant="secondary"
+                  onClick={() => setIsCreateFolderOpen(false)}
+                >
+                  <Trans>Cancel</Trans>
+                </Button>
 
-              <Button type="submit">Create</Button>
-            </DialogFooter>
+                <Button type="submit" loading={form.formState.isSubmitting}>
+                  <Trans>Create</Trans>
+                </Button>
+              </DialogFooter>
+            </fieldset>
           </form>
         </Form>
       </DialogContent>

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

@@ -1,8 +1,7 @@
 import { useEffect } from 'react';
 
 import { zodResolver } from '@hookform/resolvers/zod';
-import { msg } from '@lingui/core/macro';
-import { useLingui } from '@lingui/react';
+import { useLingui } from '@lingui/react/macro';
 import { Trans } from '@lingui/react/macro';
 import type * as DialogPrimitive from '@radix-ui/react-dialog';
 import { useForm } from 'react-hook-form';
@@ -11,6 +10,7 @@ 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 | null;
+  folder: TFolderWithSubfolders;
   isOpen: boolean;
   onOpenChange: (open: boolean) => void;
 } & Omit<DialogPrimitive.DialogProps, 'children'>;
 
 export const FolderDeleteDialog = ({ folder, isOpen, onOpenChange }: FolderDeleteDialogProps) => {
-  const { _ } = useLingui();
+  const { t } = useLingui();
 
   const { toast } = useToast();
   const { mutateAsync: deleteFolder } = trpc.folder.deleteFolder.useMutation();
 
-  const deleteMessage = _(msg`delete ${folder?.name ?? 'folder'}`);
+  const deleteMessage = t`delete ${folder.name}`;
 
   const ZDeleteFolderFormSchema = z.object({
     confirmText: z.literal(deleteMessage, {
-      errorMap: () => ({ message: _(msg`You must type '${deleteMessage}' to confirm`) }),
+      errorMap: () => ({ message: t`You must type '${deleteMessage}' to confirm` }),
     }),
   });
 
@@ -61,8 +61,6 @@ export const FolderDeleteDialog = ({ folder, isOpen, onOpenChange }: FolderDelet
   });
 
   const onFormSubmit = async () => {
-    if (!folder) return;
-
     try {
       await deleteFolder({
         id: folder.id,
@@ -71,15 +69,15 @@ export const FolderDeleteDialog = ({ folder, isOpen, onOpenChange }: FolderDelet
       onOpenChange(false);
 
       toast({
-        title: 'Folder deleted successfully',
+        title: t`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.`),
+          title: t`Folder not found`,
+          description: t`The folder you are trying to delete does not exist.`,
           variant: 'destructive',
         });
 
@@ -87,8 +85,8 @@ export const FolderDeleteDialog = ({ folder, isOpen, onOpenChange }: FolderDelet
       }
 
       toast({
-        title: 'Failed to delete folder',
-        description: _(msg`An unknown error occurred while deleting the folder.`),
+        title: t`Failed to delete folder`,
+        description: t`An unknown error occurred while deleting the folder.`,
         variant: 'destructive',
       });
     }
@@ -104,53 +102,65 @@ export const FolderDeleteDialog = ({ folder, isOpen, onOpenChange }: FolderDelet
     <Dialog open={isOpen} onOpenChange={onOpenChange}>
       <DialogContent>
         <DialogHeader>
-          <DialogTitle>Delete Folder</DialogTitle>
+          <DialogTitle>
+            <Trans>Delete Folder</Trans>
+          </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>
-            )}
+            <Trans>Are you sure you want to delete this folder?</Trans>
           </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 also delete all items in the
+                folder, including nested folders and their contents.
+              </Trans>
+            </AlertDescription>
+          </Alert>
+        )}
+
         <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 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>
         </Form>
       </DialogContent>

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

@@ -1,10 +1,10 @@
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 
 import { zodResolver } from '@hookform/resolvers/zod';
-import { msg } from '@lingui/core/macro';
-import { useLingui } from '@lingui/react';
+import { useLingui } from '@lingui/react/macro';
+import { Trans } from '@lingui/react/macro';
 import type * as DialogPrimitive from '@radix-ui/react-dialog';
-import { FolderIcon, HomeIcon } from 'lucide-react';
+import { FolderIcon, HomeIcon, Search } from 'lucide-react';
 import { useForm } from 'react-hook-form';
 import { z } from 'zod';
 
@@ -27,6 +27,7 @@ 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 = {
@@ -48,9 +49,10 @@ export const FolderMoveDialog = ({
   isOpen,
   onOpenChange,
 }: FolderMoveDialogProps) => {
-  const { _ } = useLingui();
-
+  const { t } = useLingui();
   const { toast } = useToast();
+  const [searchTerm, setSearchTerm] = useState('');
+
   const { mutateAsync: moveFolder } = trpc.folder.moveFolder.useMutation();
 
   const form = useForm<TMoveFolderFormSchema>({
@@ -72,15 +74,15 @@ export const FolderMoveDialog = ({
       onOpenChange(false);
 
       toast({
-        title: 'Folder moved successfully',
+        title: t`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.`),
+          title: t`Folder not found`,
+          description: t`The folder you are trying to move does not exist.`,
           variant: 'destructive',
         });
 
@@ -88,8 +90,8 @@ export const FolderMoveDialog = ({
       }
 
       toast({
-        title: 'Failed to move folder',
-        description: _(msg`An unknown error occurred while moving the folder.`),
+        title: t`Failed to move folder`,
+        description: t`An unknown error occurred while moving the folder.`,
         variant: 'destructive',
       });
     }
@@ -98,69 +100,91 @@ export const FolderMoveDialog = ({
   useEffect(() => {
     if (!isOpen) {
       form.reset();
+      setSearchTerm('');
     }
   }, [isOpen, form]);
 
-  // Filter out the current folder and only show folders of the same type
+  // Filter out the current folder, only show folders of the same type, and filter by search term
   const filteredFolders = foldersData?.filter(
-    (f) => f.id !== folder?.id && f.type === folder?.type,
+    (f) =>
+      f.id !== folder?.id &&
+      f.type === folder?.type &&
+      (searchTerm === '' || f.name.toLowerCase().includes(searchTerm.toLowerCase())),
   );
 
   return (
     <Dialog open={isOpen} onOpenChange={onOpenChange}>
       <DialogContent>
         <DialogHeader>
-          <DialogTitle>Move Folder</DialogTitle>
-          <DialogDescription>Select a destination for this folder.</DialogDescription>
+          <DialogTitle>
+            <Trans>Move Folder</Trans>
+          </DialogTitle>
+          <DialogDescription>
+            <Trans>Select a destination for this folder.</Trans>
+          </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(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)}>
-                Cancel
-              </Button>
-              <Button type="submit" disabled={form.formState.isSubmitting}>
-                Move Folder
-              </Button>
-            </DialogFooter>
+        <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>
+
+                        {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>
           </form>
         </Form>
       </DialogContent>

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

@@ -83,7 +83,9 @@ export const OrganisationCreateDialog = ({ trigger, ...props }: OrganisationCrea
 
   const { mutateAsync: createOrganisation } = trpc.organisation.create.useMutation();
 
-  const { data: plansData } = trpc.billing.plans.get.useQuery();
+  const { data: plansData } = trpc.billing.plans.get.useQuery(undefined, {
+    enabled: IS_BILLING_ENABLED(),
+  });
 
   const onFormSubmit = async ({ name }: TCreateOrganisationFormSchema) => {
     try {

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

@@ -0,0 +1,94 @@
+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-group-create-dialog.tsx

@@ -142,11 +142,11 @@ export const TeamGroupCreateDialog = ({ ...props }: TeamGroupCreateDialogProps)
           .with('SELECT', () => (
             <DialogHeader>
               <DialogTitle>
-                <Trans>Add members</Trans>
+                <Trans>Add groups</Trans>
               </DialogTitle>
 
               <DialogDescription>
-                <Trans>Select members or groups of members to add to the team.</Trans>
+                <Trans>Select groups of members to add to the team.</Trans>
               </DialogDescription>
             </DialogHeader>
           ))

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

@@ -8,6 +8,7 @@ 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 {
@@ -23,18 +24,21 @@ 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 = ({ templateRootPath, folderId }: TemplateCreateDialogProps) => {
+export const TemplateCreateDialog = ({ 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);
@@ -66,7 +70,7 @@ export const TemplateCreateDialog = ({ templateRootPath, folderId }: TemplateCre
 
       setShowTemplateCreateDialog(false);
 
-      await navigate(`${templateRootPath}/${id}/edit`);
+      await navigate(`${formatTemplatesPath(team.url)}/${id}/edit`);
     } catch {
       toast({
         title: _(msg`Something went wrong`),

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

@@ -1,165 +0,0 @@
-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

@@ -1,163 +0,0 @@
-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

@@ -1,175 +0,0 @@
-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

@@ -1,176 +0,0 @@
-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 } from 'react';
+import { useEffect, 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 * as DialogPrimitive from '@radix-ui/react-dialog';
-import { FolderIcon, HomeIcon, Loader2 } from 'lucide-react';
+import { FolderIcon, HomeIcon, Loader2, Search } from 'lucide-react';
 import { useForm } from 'react-hook-form';
 import { useNavigate } from 'react-router';
 import { z } from 'zod';
@@ -31,6 +31,7 @@ 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';
@@ -59,9 +60,12 @@ 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: {
@@ -84,6 +88,7 @@ export function TemplateMoveToFolderDialog({
   useEffect(() => {
     if (!isOpen) {
       form.reset();
+      setSearchTerm('');
     } else {
       form.reset({ folderId: currentFolderId ?? null });
     }
@@ -132,6 +137,10 @@ export function TemplateMoveToFolderDialog({
     }
   };
 
+  const filteredFolders = folders?.data?.filter((folder) =>
+    folder.name.toLowerCase().includes(searchTerm.toLowerCase()),
+  );
+
   return (
     <Dialog {...props} open={isOpen} onOpenChange={onOpenChange}>
       <DialogContent>
@@ -145,6 +154,16 @@ 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
@@ -155,8 +174,9 @@ export function TemplateMoveToFolderDialog({
                   <FormLabel>
                     <Trans>Folder</Trans>
                   </FormLabel>
+
                   <FormControl>
-                    <div className="space-y-2">
+                    <div className="max-h-96 space-y-2 overflow-y-auto">
                       {isFoldersLoading ? (
                         <div className="flex h-10 items-center justify-center">
                           <Loader2 className="h-4 w-4 animate-spin" />
@@ -171,10 +191,10 @@ export function TemplateMoveToFolderDialog({
                             disabled={currentFolderId === null}
                           >
                             <HomeIcon className="mr-2 h-4 w-4" />
-                            <Trans>Root (No Folder)</Trans>
+                            <Trans>Home (No Folder)</Trans>
                           </Button>
 
-                          {folders?.data?.map((folder) => (
+                          {filteredFolders?.map((folder) => (
                             <Button
                               key={folder.id}
                               type="button"
@@ -187,6 +207,12 @@ 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/general/admin-monthly-active-user-charts.tsx

@@ -0,0 +1,73 @@
+'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,11 +1,13 @@
 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';
 
@@ -28,6 +30,15 @@ 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);
@@ -61,12 +72,11 @@ 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" />
 
-            {/* 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
+            {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}
               </span>
-            )} */}
+            )}
           </Link>
         </Button>
 

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

@@ -2,12 +2,14 @@ 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';
 
@@ -25,6 +27,15 @@ 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);
   };
@@ -52,11 +63,11 @@ export const AppNavMobile = ({ isMenuOpen, onMenuOpenChange }: AppNavMobileProps
     return [
       {
         href: `/t/${teamUrl}/documents`,
-        label: t`Documents`,
+        text: t`Documents`,
       },
       {
         href: `/t/${teamUrl}/templates`,
-        label: t`Templates`,
+        text: t`Templates`,
       },
       {
         href: '/inbox',
@@ -86,11 +97,16 @@ export const AppNavMobile = ({ isMenuOpen, onMenuOpenChange }: AppNavMobileProps
           {menuNavigationLinks.map(({ href, text }) => (
             <Link
               key={href}
-              className="text-foreground hover:text-foreground/80 text-2xl font-semibold"
+              className="text-foreground hover:text-foreground/80 flex items-center gap-2 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/document/document-search.tsx

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

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

@@ -1,19 +1,32 @@
-import { FolderIcon, PinIcon } from 'lucide-react';
+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 { FolderType } from '@documenso/lib/types/folder-type';
-import { formatFolderCount } from '@documenso/lib/utils/format-folder-count';
+import { formatDocumentsPath, formatTemplatesPath } from '@documenso/lib/utils/teams';
 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;
@@ -23,66 +36,132 @@ 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 (
-    <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>
-            <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>
+    <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>
-        </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>
+        </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>
+            <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>
+          </div>
+        </div>
+      </CardContent>
+    </Card>
   );
 };

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

@@ -0,0 +1,249 @@
+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 { FolderSettingsDialog } from '~/components/dialogs/folder-settings-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);
+          }
+        }}
+      />
+
+      <FolderSettingsDialog
+        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/root.tsx

@@ -36,23 +36,7 @@ const { trackPageview } = Plausible({
   trackLocalhost: false,
 });
 
-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 const links: Route.LinksFunction = () => [{ rel: 'stylesheet', href: stylesheet }];
 
 export function meta() {
   return appMetaTags();

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

@@ -18,11 +18,14 @@ 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';
@@ -37,18 +40,16 @@ export async function loader() {
     docStats,
     recipientStats,
     signerConversionMonthly,
-    // userWithAtLeastOneDocumentPerMonth,
-    // userWithAtLeastOneDocumentSignedPerMonth,
-    // MONTHLY_USERS_SIGNED,
+    monthlyUsersWithDocuments,
+    monthlyActiveUsers,
   ] = await Promise.all([
     getUsersCount(),
     getOrganisationsWithSubscriptionsCount(),
     getDocumentStats(),
     getRecipientsStats(),
     getSignerConversionMonthly(),
-    // getUserWithAtLeastOneDocumentPerMonth(),
-    // getUserWithAtLeastOneDocumentSignedPerMonth(),
-    // getUserWithSignedDocumentMonthlyGrowth(),
+    getUserWithSignedDocumentMonthlyGrowth(),
+    getMonthlyActiveUsers(),
   ]);
 
   return {
@@ -57,7 +58,8 @@ export async function loader() {
     docStats,
     recipientStats,
     signerConversionMonthly,
-    // MONTHLY_USERS_SIGNED,
+    monthlyUsersWithDocuments,
+    monthlyActiveUsers,
   };
 }
 
@@ -70,7 +72,8 @@ export default function AdminStatsPage({ loaderData }: Route.ComponentProps) {
     docStats,
     recipientStats,
     signerConversionMonthly,
-    // MONTHLY_USERS_SIGNED,
+    monthlyUsersWithDocuments,
+    monthlyActiveUsers,
   } = loaderData;
 
   return (
@@ -147,15 +150,21 @@ 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={[]}
-            // data={MONTHLY_USERS_SIGNED}
+            data={monthlyUsersWithDocuments}
             title={_(msg`MAU (created document)`)}
             tooltip={_(msg`Monthly Active Users: Users that created at least one Document`)}
           />
           <AdminStatsUsersWithDocumentsChart
-            data={[]}
-            // data={MONTHLY_USERS_SIGNED}
+            data={monthlyUsersWithDocuments}
             completed
             title={_(msg`MAU (had document completed)`)}
             tooltip={_(

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

@@ -171,6 +171,27 @@ 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

@@ -0,0 +1,192 @@
+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._index.tsx

@@ -1,14 +1,12 @@
 import { useEffect, useMemo, useState } from 'react';
 
 import { Trans } from '@lingui/react/macro';
-import { OrganisationType } from '@prisma/client';
-import { FolderIcon, HomeIcon, Loader2 } from 'lucide-react';
-import { useNavigate, useSearchParams } from 'react-router';
+import { FolderType, OrganisationType } from '@prisma/client';
+import { useParams, useSearchParams } from 'react-router';
 import { Link } 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';
@@ -18,21 +16,14 @@ 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 { 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 { FolderGrid } from '~/components/general/folder/folder-grid';
 import { PeriodSelector } from '~/components/general/period-selector';
 import { DocumentsTable } from '~/components/tables/documents-table';
 import { DocumentsTableEmptyState } from '~/components/tables/documents-table-empty-state';
@@ -55,23 +46,14 @@ 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,
@@ -87,26 +69,11 @@ export default function DocumentsPage() {
     [searchParams],
   );
 
-  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,
+  const { data, isLoading, isLoadingError } = trpc.document.findDocumentsInternal.useQuery({
+    ...findDocumentSearchParams,
+    folderId,
   });
 
-  useEffect(() => {
-    void refetch();
-    void refetchFolders();
-  }, [team?.url]);
-
   const getTabHref = (value: keyof typeof ExtendedDocumentStatus) => {
     const params = new URLSearchParams(searchParams);
 
@@ -124,7 +91,17 @@ export default function DocumentsPage() {
       params.delete('page');
     }
 
-    return `${formatDocumentsPath(team.url)}?${params.toString()}`;
+    let path = formatDocumentsPath(team.url);
+
+    if (folderId) {
+      path += `/f/${folderId}`;
+    }
+
+    if (params.toString()) {
+      path += `?${params.toString()}`;
+    }
+
+    return path;
   };
 
   useEffect(() => {
@@ -133,147 +110,19 @@ 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">
-        <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>
+        <FolderGrid type={FolderType.DOCUMENT} parentId={folderId ?? null} />
 
-            {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="mt-8 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>
-            )}
+            <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>
@@ -329,9 +178,7 @@ export default function DocumentsPage() {
 
         <div className="mt-8">
           <div>
-            {data &&
-            data.count === 0 &&
-            (!foldersData?.folders.length || foldersData.folders.length === 0) ? (
+            {data && data.count === 0 ? (
               <DocumentsTableEmptyState
                 status={findDocumentSearchParams.status || ExtendedDocumentStatus.ALL}
               />
@@ -353,6 +200,7 @@ export default function DocumentsPage() {
           <DocumentMoveToFolderDialog
             documentId={documentToMove}
             open={isMovingDocument}
+            currentFolderId={folderId}
             onOpenChange={(open) => {
               setIsMovingDocument(open);
 
@@ -362,43 +210,6 @@ 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,374 +1,5 @@
-import { useEffect, useMemo, useState } from 'react';
+import DocumentPage, { meta } from './documents._index';
 
-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 { meta };
 
-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 { 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);
-                }}
-              />
-            )}
-          </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>
-  );
-}
+export default DocumentPage;

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

@@ -1,7 +1,7 @@
 import { useState } from 'react';
 
-import { Trans } from '@lingui/react/macro';
-import { HomeIcon, Loader2 } from 'lucide-react';
+import { Trans, useLingui } from '@lingui/react/macro';
+import { HomeIcon, Loader2, SearchIcon } from 'lucide-react';
 import { useNavigate } from 'react-router';
 
 import { FolderType } from '@documenso/lib/types/folder-type';
@@ -9,8 +9,9 @@ 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 { CreateFolderDialog } from '~/components/dialogs/folder-create-dialog';
+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 { FolderSettingsDialog } from '~/components/dialogs/folder-settings-dialog';
@@ -23,6 +24,8 @@ export function meta() {
 }
 
 export default function DocumentsFoldersPage() {
+  const { t } = useLingui();
+
   const navigate = useNavigate();
   const team = useCurrentTeam();
 
@@ -32,6 +35,7 @@ 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,
@@ -51,6 +55,9 @@ 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">
@@ -67,60 +74,41 @@ export default function DocumentsFoldersPage() {
         </div>
 
         <div className="flex flex-col gap-y-4 sm:flex-row sm:justify-end sm:gap-x-4">
-          <CreateFolderDialog />
+          <FolderCreateDialog type={FolderType.DOCUMENT} />
         </div>
       </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>
-            )}
+      <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-12">
-              <h1 className="truncate text-2xl font-semibold md:text-3xl">
-                <Trans>All Folders</Trans>
-              </h1>
+      <h1 className="mt-4 truncate text-2xl font-semibold md:text-3xl">
+        <Trans>All Folders</Trans>
+      </h1>
 
-              <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)
+      {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))
                   .map((folder) => (
                     <FolderCard
                       key={folder.id}
                       folder={folder}
-                      onNavigate={navigateToFolder}
                       onMove={(folder) => {
                         setFolderToMove(folder);
                         setIsMovingFolder(true);
@@ -139,9 +127,42 @@ export default function DocumentsFoldersPage() {
                   ))}
               </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)
+                .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
         foldersData={foldersData?.folders}
@@ -168,17 +189,19 @@ export default function DocumentsFoldersPage() {
         }}
       />
 
-      <FolderDeleteDialog
-        folder={folderToDelete}
-        isOpen={isDeletingFolder}
-        onOpenChange={(open) => {
-          setIsDeletingFolder(open);
+      {folderToDelete && (
+        <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+/templates._index.tsx

@@ -1,23 +1,14 @@
-import { useEffect, useState } from 'react';
-
 import { Trans } from '@lingui/react/macro';
-import { Bird, FolderIcon, HomeIcon, Loader2 } from 'lucide-react';
-import { useNavigate, useSearchParams } from 'react-router';
+import { Bird } from 'lucide-react';
+import { useParams, 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 { 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 { FolderGrid } from '~/components/general/folder/folder-grid';
 import { TemplatesTable } from '~/components/tables/templates-table';
 import { useCurrentTeam } from '~/providers/team';
 import { appMetaTags } from '~/utils/meta';
@@ -27,20 +18,10 @@ 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 { mutateAsync: pinFolder } = trpc.folder.pinFolder.useMutation();
-  const { mutateAsync: unpinFolder } = trpc.folder.unpinFolder.useMutation();
+  const { folderId } = useParams();
+  const [searchParams] = useSearchParams();
 
   const page = Number(searchParams.get('page')) || 1;
   const perPage = Number(searchParams.get('perPage')) || 10;
@@ -48,174 +29,24 @@ export default function TemplatesPage() {
   const documentRootPath = formatDocumentsPath(team.url);
   const templateRootPath = formatTemplatesPath(team.url);
 
-  const { data, isLoading, isLoadingError, refetch } = trpc.template.findTemplates.useQuery({
+  const { data, isLoading, isLoadingError } = 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">
-      <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>
+      <FolderGrid type={FolderType.TEMPLATE} parentId={folderId ?? null} />
 
-          {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="mt-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>
-          )}
+          <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>
@@ -250,43 +81,6 @@ 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,369 +1,5 @@
-import { useEffect, useState } from 'react';
+import TemplatesPage, { meta } from './templates._index';
 
-import { Trans } from '@lingui/react/macro';
-import { Bird, FolderIcon, HomeIcon, Loader2, PinIcon } from 'lucide-react';
-import { useNavigate, useParams, useSearchParams } from 'react-router';
+export { meta };
 
-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>
-  );
-}
+export default TemplatesPage;

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

@@ -1,7 +1,7 @@
 import { useState } from 'react';
 
-import { Trans } from '@lingui/react/macro';
-import { HomeIcon, Loader2 } from 'lucide-react';
+import { Trans, useLingui } from '@lingui/react/macro';
+import { HomeIcon, Loader2, SearchIcon } from 'lucide-react';
 import { useNavigate } from 'react-router';
 
 import { FolderType } from '@documenso/lib/types/folder-type';
@@ -9,11 +9,12 @@ 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 { 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 { FolderCreateDialog } 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 { FolderCard } from '~/components/general/folder/folder-card';
 import { useCurrentTeam } from '~/providers/team';
 import { appMetaTags } from '~/utils/meta';
@@ -23,6 +24,8 @@ export function meta() {
 }
 
 export default function TemplatesFoldersPage() {
+  const { t } = useLingui();
+
   const navigate = useNavigate();
   const team = useCurrentTeam();
 
@@ -32,6 +35,7 @@ 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,
@@ -51,6 +55,9 @@ 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">
@@ -67,60 +74,41 @@ export default function TemplatesFoldersPage() {
         </div>
 
         <div className="flex flex-col gap-y-4 sm:flex-row sm:justify-end sm:gap-x-4">
-          <TemplateFolderCreateDialog />
+          <FolderCreateDialog type={FolderType.TEMPLATE} />
         </div>
       </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>
-            )}
+      <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-12">
-              <h1 className="truncate text-2xl font-semibold md:text-3xl">
-                <Trans>All Folders</Trans>
-              </h1>
+      <h1 className="mt-4 truncate text-2xl font-semibold md:text-3xl">
+        <Trans>All Folders</Trans>
+      </h1>
 
-              <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)
+      {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))
                   .map((folder) => (
                     <FolderCard
                       key={folder.id}
                       folder={folder}
-                      onNavigate={navigateToFolder}
                       onMove={(folder) => {
                         setFolderToMove(folder);
                         setIsMovingFolder(true);
@@ -139,11 +127,44 @@ export default function TemplatesFoldersPage() {
                   ))}
               </div>
             </div>
-          </>
-        )}
-      </div>
+          )}
 
-      <TemplateFolderMoveDialog
+          <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
         foldersData={foldersData?.folders}
         folder={folderToMove}
         isOpen={isMovingFolder}
@@ -156,7 +177,7 @@ export default function TemplatesFoldersPage() {
         }}
       />
 
-      <TemplateFolderSettingsDialog
+      <FolderSettingsDialog
         folder={folderToSettings}
         isOpen={isSettingsFolderOpen}
         onOpenChange={(open: boolean) => {
@@ -168,17 +189,19 @@ export default function TemplatesFoldersPage() {
         }}
       />
 
-      <TemplateFolderDeleteDialog
-        folder={folderToDelete}
-        isOpen={isDeletingFolder}
-        onOpenChange={(open: boolean) => {
-          setIsDeletingFolder(open);
+      {folderToDelete && (
+        <FolderDeleteDialog
+          folder={folderToDelete}
+          isOpen={isDeletingFolder}
+          onOpenChange={(open: boolean) => {
+            setIsDeletingFolder(open);
 
-          if (!open) {
-            setFolderToDelete(null);
-          }
-        }}
-      />
+            if (!open) {
+              setFolderToDelete(null);
+            }
+          }}
+        />
+      )}
     </div>
   );
 }

apps/remix/app/routes/_unauthenticated+/team.verify.transfer.$token.tsx

@@ -1,28 +0,0 @@
-import { Trans } from '@lingui/react/macro';
-import { Link } from 'react-router';
-
-import { Button } from '@documenso/ui/primitives/button';
-
-import type { Route } from './+types/team.verify.transfer.$token';
-
-export default function VerifyTeamTransferPage({ loaderData }: Route.ComponentProps) {
-  return (
-    <div className="w-screen max-w-lg px-4">
-      <div className="w-full">
-        <h1 className="text-4xl font-semibold">
-          <Trans>Invalid link</Trans>
-        </h1>
-
-        <p className="text-muted-foreground mb-4 mt-2 text-sm">
-          <Trans>This link is invalid or has expired.</Trans>
-        </p>
-
-        <Button asChild>
-          <Link to="/">
-            <Trans>Return</Trans>
-          </Link>
-        </Button>
-      </div>
-    </div>
-  );
-}

apps/remix/package.json

@@ -100,5 +100,5 @@
     "vite-plugin-babel-macros": "^1.0.6",
     "vite-tsconfig-paths": "^5.1.4"
   },
-  "version": "1.12.0-rc.3"
+  "version": "1.12.0-rc.4"
 }

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@documenso/root",
-  "version": "1.12.0-rc.3",
+  "version": "1.12.0-rc.4",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@documenso/root",
-      "version": "1.12.0-rc.3",
+      "version": "1.12.0-rc.4",
       "workspaces": [
         "apps/*",
         "packages/*"
@@ -69,6 +69,7 @@
         "@types/node": "^20",
         "@types/react": "^18",
         "@types/react-dom": "^18",
+        "next-sitemap": "^4.2.3",
         "typescript": "5.6.2"
       }
     },
@@ -88,7 +89,7 @@
     },
     "apps/remix": {
       "name": "@documenso/remix",
-      "version": "1.12.0-rc.3",
+      "version": "1.12.0-rc.4",
       "dependencies": {
         "@documenso/api": "*",
         "@documenso/assets": "*",
@@ -2122,6 +2123,13 @@
         "node": ">=v14"
       }
     },
+    "node_modules/@corex/deepmerge": {
+      "version": "4.0.43",
+      "resolved": "https://registry.npmjs.org/@corex/deepmerge/-/deepmerge-4.0.43.tgz",
+      "integrity": "sha512-N8uEMrMPL0cu/bdboEWpQYb/0i2K5Qn8eCsxzOmxSggJbbQte7ljMRoXm917AbntqTGOzdTu+vP3KOOzoC70HQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@cspotcode/source-map-support": {
       "version": "0.8.1",
       "resolved": "https://registry.npmjs.org/@cspotcode/source-map-support/-/source-map-support-0.8.1.tgz",
@@ -25341,6 +25349,41 @@
         "react-dom": ">=16.0.0"
       }
     },
+    "node_modules/next-sitemap": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/next-sitemap/-/next-sitemap-4.2.3.tgz",
+      "integrity": "sha512-vjdCxeDuWDzldhCnyFCQipw5bfpl4HmZA7uoo3GAaYGjGgfL4Cxb1CiztPuWGmS+auYs7/8OekRS8C2cjdAsjQ==",
+      "dev": true,
+      "funding": [
+        {
+          "url": "https://github.com/iamvishnusankar/next-sitemap.git"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "@corex/deepmerge": "^4.0.43",
+        "@next/env": "^13.4.3",
+        "fast-glob": "^3.2.12",
+        "minimist": "^1.2.8"
+      },
+      "bin": {
+        "next-sitemap": "bin/next-sitemap.mjs",
+        "next-sitemap-cjs": "bin/next-sitemap.cjs"
+      },
+      "engines": {
+        "node": ">=14.18"
+      },
+      "peerDependencies": {
+        "next": "*"
+      }
+    },
+    "node_modules/next-sitemap/node_modules/@next/env": {
+      "version": "13.5.11",
+      "resolved": "https://registry.npmjs.org/@next/env/-/env-13.5.11.tgz",
+      "integrity": "sha512-fbb2C7HChgM7CemdCY+y3N1n8pcTKdqtQLbC7/EQtPdLvlMUT9JX/dBYl8MMZAtYG4uVMyPFHXckb68q/NRwqg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/next-themes": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/next-themes/-/next-themes-0.2.1.tgz",

package.json

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

packages/api/v1/schema.ts

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

packages/app-tests/e2e/api/v1/template-field-prefill.spec.ts

@@ -197,7 +197,7 @@ test.describe('Template Field Prefill API v1', () => {
               id: numberField.id,
               type: 'number',
               label: 'Prefilled Number',
-              value: '42',
+              value: '98765',
             },
             {
               id: radioField.id,
@@ -256,7 +256,7 @@ test.describe('Template Field Prefill API v1', () => {
     expect(documentNumberField?.fieldMeta).toMatchObject({
       type: 'number',
       label: 'Prefilled Number',
-      value: '42',
+      value: '98765',
     });
 
     const documentRadioField = document?.fields.find(
@@ -329,7 +329,7 @@ test.describe('Template Field Prefill API v1', () => {
     await expect(page.getByText('This is prefilled')).toBeVisible();
 
     // Number field
-    await expect(page.getByText('42')).toBeVisible();
+    await expect(page.getByText('98765', { exact: true })).toBeVisible();
 
     // Radio field
     await expect(page.getByText('Option A')).toBeVisible();
@@ -383,7 +383,7 @@ test.describe('Template Field Prefill API v1', () => {
 
     // 5. Add fields to the template
     // Add TEXT field
-    const textField = await prisma.field.create({
+    await prisma.field.create({
       data: {
         templateId: template.id,
         recipientId: recipient.id,
@@ -403,7 +403,7 @@ test.describe('Template Field Prefill API v1', () => {
     });
 
     // Add NUMBER field
-    const numberField = await prisma.field.create({
+    await prisma.field.create({
       data: {
         templateId: template.id,
         recipientId: recipient.id,

packages/app-tests/e2e/api/v2/template-field-prefill.spec.ts

@@ -194,7 +194,7 @@ test.describe('Template Field Prefill API v2', () => {
             id: numberField.id,
             type: 'number',
             label: 'Prefilled Number',
-            value: '42',
+            value: '98765',
           },
           {
             id: radioField.id,
@@ -253,7 +253,7 @@ test.describe('Template Field Prefill API v2', () => {
     expect(documentNumberField?.fieldMeta).toMatchObject({
       type: 'number',
       label: 'Prefilled Number',
-      value: '42',
+      value: '98765',
     });
 
     const documentRadioField = document?.fields.find(
@@ -326,7 +326,7 @@ test.describe('Template Field Prefill API v2', () => {
     await expect(page.getByText('This is prefilled')).toBeVisible();
 
     // Number field
-    await expect(page.getByText('42')).toBeVisible();
+    await expect(page.getByText('98765', { exact: true })).toBeVisible();
 
     // Radio field
     await expect(page.getByText('Option A')).toBeVisible();
@@ -380,7 +380,7 @@ test.describe('Template Field Prefill API v2', () => {
 
     // 5. Add fields to the template
     // Add TEXT field
-    const textField = await prisma.field.create({
+    await prisma.field.create({
       data: {
         templateId: template.id,
         recipientId: recipient.id,
@@ -400,7 +400,7 @@ test.describe('Template Field Prefill API v2', () => {
     });
 
     // Add NUMBER field
-    const numberField = await prisma.field.create({
+    await prisma.field.create({
       data: {
         templateId: template.id,
         recipientId: recipient.id,

packages/app-tests/e2e/document-flow/stepper-component.spec.ts

@@ -633,7 +633,7 @@ test('[DOCUMENT_FLOW]: should be able to create and sign a document with 3 recip
   }
 
   // Wait for the document to be signed.
-  await page.waitForTimeout(5000);
+  await page.waitForTimeout(10000);
 
   const finalDocument = await prisma.document.findFirst({
     where: { id: createdDocument?.id },

packages/app-tests/e2e/documents/delete-documents.spec.ts

@@ -283,10 +283,10 @@ test('[DOCUMENTS]: deleting documents as a recipient should only hide it for the
   }).toPass();
 
   // Delete document.
-  await page.getByRole('menuitem', { name: 'Hide' }).click();
-  await page.getByRole('button', { name: 'Hide' }).click();
-
-  await page.waitForTimeout(1000);
+  await page.getByRole('menuitem', { name: 'Hide' }).waitFor({ state: 'visible' });
+  await page.getByRole('menuitem', { name: 'Hide' }).click({ force: true });
+  await page.getByRole('button', { name: 'Hide' }).click({ force: true });
+  await page.waitForTimeout(2000);
 
   await expect(async () => {
     await page
@@ -300,8 +300,10 @@ test('[DOCUMENTS]: deleting documents as a recipient should only hide it for the
   }).toPass();
 
   // Delete document.
-  await page.getByRole('menuitem', { name: 'Hide' }).click();
-  await page.getByRole('button', { name: 'Hide' }).click();
+  await page.getByRole('menuitem', { name: 'Hide' }).waitFor({ state: 'visible' });
+  await page.getByRole('menuitem', { name: 'Hide' }).click({ force: true });
+  await page.getByRole('button', { name: 'Hide' }).click({ force: true });
+  await page.waitForTimeout(2000);
 
   // Check document counts.
   await expect(page.getByRole('row', { name: /Document 1 - Completed/ })).not.toBeVisible();

packages/app-tests/e2e/features/include-document-certificate.spec.ts

@@ -49,9 +49,11 @@ test.describe('Signing Certificate Tests', () => {
     }
 
     await page.getByRole('button', { name: 'Complete' }).click();
-    await page.getByRole('button', { name: 'Sign' }).click();
+    await page.getByRole('button', { name: 'Sign' }).click({ force: true });
     await page.waitForURL(`/sign/${recipient.token}/complete`);
 
+    await page.waitForTimeout(10000);
+
     await expect(async () => {
       const { status } = await getDocumentByToken({
         token: recipient.token,

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

@@ -3,8 +3,7 @@ import path from 'node:path';
 
 import { prisma } from '@documenso/prisma';
 import { DocumentVisibility, FolderType, TeamMemberRole } from '@documenso/prisma/client';
-import { seedTeamDocuments } from '@documenso/prisma/seed/documents';
-import { seedBlankDocument } from '@documenso/prisma/seed/documents';
+import { seedBlankDocument, seedTeamDocuments } from '@documenso/prisma/seed/documents';
 import { seedBlankFolder } from '@documenso/prisma/seed/folders';
 import { seedTeamMember } from '@documenso/prisma/seed/teams';
 import { seedBlankTemplate } from '@documenso/prisma/seed/templates';
@@ -22,7 +21,7 @@ test('[TEAMS]: create document folder button is visible', async ({ page }) => {
     redirectPath: `/t/${team.url}`,
   });
 
-  await expect(page.getByRole('button', { name: 'Create Folder' })).toBeVisible();
+  await expect(page.getByTestId('folder-create-button')).toBeVisible();
 });
 
 test('[TEAMS]: can create document folder', async ({ page }) => {
@@ -34,7 +33,7 @@ test('[TEAMS]: can create document folder', async ({ page }) => {
     redirectPath: `/t/${team.url}`,
   });
 
-  await page.getByRole('button', { name: 'Create Folder' }).click();
+  await page.getByTestId('folder-create-button').click();
 
   await page.getByLabel('Folder name').fill('Team Folder');
   await page.getByRole('button', { name: 'Create' }).click();
@@ -60,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.getByRole('button', { name: 'Create Folder' }).click();
+  await page.getByTestId('folder-create-button').click();
 
   await page.getByLabel('Folder name').fill('Subfolder');
   await page.getByRole('button', { name: 'Create' }).click();
@@ -116,7 +115,7 @@ test('[TEAMS]: can pin a document folder', async ({ page }) => {
     redirectPath: `/t/${team.url}/documents`,
   });
 
-  await page.getByRole('button', { name: '•••' }).click();
+  await page.getByTestId('folder-card-more-button').click();
   await page.getByRole('menuitem', { name: 'Pin' }).click();
 
   await page.reload();
@@ -141,7 +140,7 @@ test('[TEAMS]: can unpin a document folder', async ({ page }) => {
     redirectPath: `/t/${team.url}/documents`,
   });
 
-  await page.getByRole('button', { name: '•••' }).click();
+  await page.getByTestId('folder-card-more-button').click();
   await page.getByRole('menuitem', { name: 'Unpin' }).click();
 
   await page.reload();
@@ -165,7 +164,7 @@ test('[TEAMS]: can rename a document folder', async ({ page }) => {
     redirectPath: `/t/${team.url}/documents`,
   });
 
-  await page.getByRole('button', { name: '•••' }).click();
+  await page.getByTestId('folder-card-more-button').click();
   await page.getByRole('menuitem', { name: 'Settings' }).click();
 
   await page.getByLabel('Name').fill('Team Archive');
@@ -190,7 +189,7 @@ test('[TEAMS]: document folder visibility is visible to team member', async ({ p
     redirectPath: `/t/${team.url}/documents`,
   });
 
-  await page.getByRole('button', { name: '•••' }).click();
+  await page.getByTestId('folder-card-more-button').click();
   await page.getByRole('menuitem', { name: 'Settings' }).click();
 
   await expect(page.getByRole('combobox', { name: 'Visibility' })).toBeVisible();
@@ -219,11 +218,11 @@ test('[TEAMS]: document folder can be moved to another document folder', async (
     redirectPath: `/t/${team.url}/documents`,
   });
 
-  await page.getByRole('button', { name: '•••' }).nth(0).click();
+  await page.getByTestId('folder-card-more-button').nth(0).click();
   await page.getByRole('menuitem', { name: 'Move' }).click();
 
   await page.getByRole('button', { name: 'Team Clients' }).click();
-  await page.getByRole('button', { name: 'Move Folder' }).click();
+  await page.getByRole('button', { name: 'Move' }).click();
 
   await page.waitForTimeout(1000);
 
@@ -270,7 +269,7 @@ test('[TEAMS]: document folder and its contents can be deleted', async ({ page }
     redirectPath: `/t/${team.url}/documents`,
   });
 
-  await page.getByRole('button', { name: '•••' }).click();
+  await page.getByTestId('folder-card-more-button').click();
   await page.getByRole('menuitem', { name: 'Delete' }).click();
 
   await page.getByRole('textbox').fill(`delete ${folder.name}`);
@@ -296,7 +295,7 @@ test('[TEAMS]: create folder button is visible on templates page', async ({ page
     redirectPath: `/t/${team.url}/templates`,
   });
 
-  await expect(page.getByRole('button', { name: 'Create Folder' })).toBeVisible();
+  await expect(page.getByTestId('folder-create-button')).toBeVisible();
 });
 
 test('[TEAMS]: can create a template folder', async ({ page }) => {
@@ -308,7 +307,7 @@ test('[TEAMS]: can create a template folder', async ({ page }) => {
     redirectPath: `/t/${team.url}/templates`,
   });
 
-  await page.getByRole('button', { name: 'Create Folder' }).click();
+  await page.getByTestId('folder-create-button').click();
   await expect(page.getByRole('dialog', { name: 'Create New folder' })).toBeVisible();
 
   await page.getByLabel('Folder name').fill('Team template folder');
@@ -343,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.getByRole('button', { name: 'Create Folder' }).click();
+  await page.getByTestId('folder-create-button').click();
   await expect(page.getByRole('dialog', { name: 'Create New folder' })).toBeVisible();
 
   await page.getByLabel('Folder name').fill('Team Contract Templates');
@@ -415,7 +414,7 @@ test('[TEAMS]: can pin a template folder', async ({ page }) => {
     redirectPath: `/t/${team.url}/templates`,
   });
 
-  await page.getByRole('button', { name: '•••' }).click();
+  await page.getByTestId('folder-card-more-button').click();
   await page.getByRole('menuitem', { name: 'Pin' }).click();
 
   await page.reload();
@@ -441,7 +440,7 @@ test('[TEAMS]: can unpin a template folder', async ({ page }) => {
     redirectPath: `/t/${team.url}/templates`,
   });
 
-  await page.getByRole('button', { name: '•••' }).click();
+  await page.getByTestId('folder-card-more-button').click();
   await page.getByRole('menuitem', { name: 'Unpin' }).click();
 
   await page.reload();
@@ -467,7 +466,7 @@ test('[TEAMS]: can rename a template folder', async ({ page }) => {
     redirectPath: `/t/${team.url}/templates`,
   });
 
-  await page.getByRole('button', { name: '•••' }).click();
+  await page.getByTestId('folder-card-more-button').click();
   await page.getByRole('menuitem', { name: 'Settings' }).click();
 
   await page.getByLabel('Name').fill('Updated Team Template Folder');
@@ -493,7 +492,7 @@ test('[TEAMS]: template folder visibility is not visible to team member', async
     redirectPath: `/t/${team.url}/templates`,
   });
 
-  await page.getByRole('button', { name: '•••' }).click();
+  await page.getByTestId('folder-card-more-button').click();
   await page.getByRole('menuitem', { name: 'Settings' }).click();
 
   await expect(page.getByRole('menuitem', { name: 'Visibility' })).not.toBeVisible();
@@ -524,11 +523,11 @@ test('[TEAMS]: template folder can be moved to another template folder', async (
     redirectPath: `/t/${team.url}/templates`,
   });
 
-  await page.getByRole('button', { name: '•••' }).nth(0).click();
+  await page.getByTestId('folder-card-more-button').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 Folder' }).click();
+  await page.getByRole('button', { name: 'Move' }).click();
 
   await page.waitForTimeout(1000);
 
@@ -577,7 +576,7 @@ test('[TEAMS]: template folder and its contents can be deleted', async ({ page }
     redirectPath: `/t/${team.url}/templates`,
   });
 
-  await page.getByRole('button', { name: '•••' }).click();
+  await page.getByTestId('folder-card-more-button').click();
   await page.getByRole('menuitem', { name: 'Delete' }).click();
 
   await page.getByRole('textbox').fill(`delete ${folder.name}`);
@@ -634,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('button', { name: parentFolder.name }).click();
+  await page.getByRole('link', { name: parentFolder.name }).click();
   await expect(page.getByText('Team Contract Templates')).toBeVisible();
 
-  await page.getByRole('button', { name: subfolder.name }).click();
+  await page.getByRole('link', { name: subfolder.name }).click();
   await expect(page.getByText('Team Contract Template 1')).toBeVisible();
 });
 
@@ -755,7 +754,7 @@ test('[TEAMS]: folder inherits team visibility settings', async ({ page }) => {
     redirectPath: `/t/${team.url}/documents`,
   });
 
-  await page.getByRole('button', { name: 'Create Folder' }).click();
+  await page.getByTestId('folder-create-button').click();
   await page.getByLabel('Name').fill('Admin Only Folder');
   await page.getByRole('button', { name: 'Create' }).click();
 
@@ -763,7 +762,7 @@ test('[TEAMS]: folder inherits team visibility settings', async ({ page }) => {
 
   await page.goto(`/t/${team.url}/documents/`);
 
-  await page.getByRole('button', { name: '•••' }).click();
+  await page.getByTestId('folder-card-more-button').click();
   await page.getByRole('menuitem', { name: 'Settings' }).click();
 
   await expect(page.getByRole('combobox', { name: 'Visibility' })).toHaveText('Admins only');
@@ -775,15 +774,15 @@ test('[TEAMS]: folder inherits team visibility settings', async ({ page }) => {
 
   await page.reload();
 
-  await page.getByRole('button', { name: 'Create Folder' }).click();
+  await page.getByTestId('folder-create-button').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.getByRole('button', { name: '•••' }).nth(0).click();
+  await page.getByTestId('folder-card-more-button').nth(0).click();
   await page.getByRole('menuitem', { name: 'Settings' }).click();
 
   await expect(page.getByRole('combobox', { name: 'Visibility' })).toHaveText('Managers and above');
@@ -795,7 +794,7 @@ test('[TEAMS]: folder inherits team visibility settings', async ({ page }) => {
 
   await page.reload();
 
-  await page.getByRole('button', { name: 'Create Folder' }).click();
+  await page.getByTestId('folder-create-button').click();
   await page.getByLabel('Name').fill('Everyone Folder');
   await page.getByRole('button', { name: 'Create' }).click();
 
@@ -803,7 +802,7 @@ test('[TEAMS]: folder inherits team visibility settings', async ({ page }) => {
 
   await page.goto(`/t/${team.url}/documents/`);
 
-  await page.getByRole('button', { name: '•••' }).nth(0).click();
+  await page.getByTestId('folder-card-more-button').nth(0).click();
   await page.getByRole('menuitem', { name: 'Settings' }).click();
 
   await expect(page.getByRole('combobox', { name: 'Visibility' })).toHaveText('Everyone');
@@ -835,7 +834,7 @@ test('[TEAMS]: documents inherit folder visibility', async ({ page }) => {
     redirectPath: `/t/${team.url}/documents`,
   });
 
-  await page.getByRole('button', { name: 'Create Folder' }).click();
+  await page.getByTestId('folder-create-button').click();
   await page.getByLabel('Name').fill('Admin Only Folder');
   await page.getByRole('button', { name: 'Create' }).click();
 
@@ -1328,7 +1327,7 @@ test('[TEAMS]: team admin can move manager document to admin folder', async ({ p
 
   const managerDocRow = page.getByRole('row', { name: /\[TEST\] Manager Document/ });
   await managerDocRow.getByTestId('document-table-action-btn').click();
-  await page.getByRole('menuitem', { name: 'Move to Folder' }).click();
+  await page.getByRole('menuitem', { name: 'Move to Folder' }).click({ force: true });
 
   await expect(page.getByRole('button', { name: 'Admin Folder' })).toBeVisible();
   await page.getByRole('button', { name: 'Admin Folder' }).click();
@@ -1379,7 +1378,7 @@ test('[TEAMS]: team admin can move manager document to manager folder', async ({
 
   const managerDocRow = page.getByRole('row', { name: /\[TEST\] Manager Document/ });
   await managerDocRow.getByTestId('document-table-action-btn').click();
-  await page.getByRole('menuitem', { name: 'Move to Folder' }).click();
+  await page.getByRole('menuitem', { name: 'Move to Folder' }).click({ force: true });
 
   await expect(page.getByRole('button', { name: 'Manager Folder' })).toBeVisible();
   await page.getByRole('button', { name: 'Manager Folder' }).click();
@@ -1430,7 +1429,7 @@ test('[TEAMS]: team admin can move manager document to everyone folder', async (
 
   const managerDocRow = page.getByRole('row', { name: /\[TEST\] Manager Document/ });
   await managerDocRow.getByTestId('document-table-action-btn').click();
-  await page.getByRole('menuitem', { name: 'Move to Folder' }).click();
+  await page.getByRole('menuitem', { name: 'Move to Folder' }).click({ force: true });
 
   await expect(page.getByRole('button', { name: 'Everyone Folder' })).toBeVisible();
   await page.getByRole('button', { name: 'Everyone Folder' }).click();
@@ -2369,7 +2368,10 @@ test('[TEAMS]: team manager can see manager and everyone documents in manager fo
     redirectPath: `/t/${team.url}/documents/f/${managerFolder.id}`,
   });
 
-  await expect(page.getByRole('button', { name: 'Manager Folder' })).toBeVisible();
+  await expect(
+    page.getByTestId('folder-grid-breadcrumbs').getByRole('link', { 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();
@@ -2427,7 +2429,10 @@ test('[TEAMS]: team manager can see manager and everyone documents in everyone f
     redirectPath: `/t/${team.url}/documents/f/${everyoneFolder.id}`,
   });
 
-  await expect(page.getByRole('button', { name: 'Everyone Folder' })).toBeVisible();
+  await expect(
+    page.getByTestId('folder-grid-breadcrumbs').getByRole('link', { 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();
@@ -2573,7 +2578,10 @@ test('[TEAMS]: team owner can see all documents in admin folder', async ({ page
     redirectPath: `/t/${team.url}/documents/f/${adminFolder.id}`,
   });
 
-  await expect(page.getByRole('button', { name: 'Admin Only Folder' })).toBeVisible();
+  await expect(
+    page.getByTestId('folder-grid-breadcrumbs').getByRole('link', { 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();
@@ -2623,7 +2631,9 @@ test('[TEAMS]: team owner can see all documents in manager folder', async ({ pag
     redirectPath: `/t/${team.url}/documents/f/${managerFolder.id}`,
   });
 
-  await expect(page.getByRole('button', { name: 'Manager Folder' })).toBeVisible();
+  await expect(
+    page.getByTestId('folder-grid-breadcrumbs').getByRole('link', { 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();
@@ -2673,7 +2683,9 @@ test('[TEAMS]: team owner can see all documents in everyone folder', async ({ pa
     redirectPath: `/t/${team.url}/documents/f/${everyoneFolder.id}`,
   });
 
-  await expect(page.getByRole('button', { name: 'Everyone Folder' })).toBeVisible();
+  await expect(
+    page.getByTestId('folder-grid-breadcrumbs').getByRole('link', { 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();
@@ -2773,7 +2785,10 @@ test('[TEAMS]: team admin can see all documents in admin folder', async ({ page
     redirectPath: `/t/${team.url}/documents/f/${adminFolder.id}`,
   });
 
-  await expect(page.getByRole('button', { name: 'Admin Only Folder' })).toBeVisible();
+  await expect(
+    page.getByTestId('folder-grid-breadcrumbs').getByRole('link', { 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();
@@ -2829,7 +2844,9 @@ test('[TEAMS]: team admin can see all documents in manager folder', async ({ pag
     redirectPath: `/t/${team.url}/documents/f/${managerFolder.id}`,
   });
 
-  await expect(page.getByRole('button', { name: 'Manager Folder' })).toBeVisible();
+  await expect(
+    page.getByTestId('folder-grid-breadcrumbs').getByRole('link', { 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();
@@ -2885,7 +2902,9 @@ test('[TEAMS]: team admin can see all documents in everyone folder', async ({ pa
     redirectPath: `/t/${team.url}/documents/f/${everyoneFolder.id}`,
   });
 
-  await expect(page.getByRole('button', { name: 'Everyone Folder' })).toBeVisible();
+  await expect(
+    page.getByTestId('folder-grid-breadcrumbs').getByRole('link', { 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/organisations/manage-organisation.spec.ts

@@ -31,7 +31,7 @@ test('[ORGANISATIONS]: create and delete organisation', async ({ page }) => {
   await page.getByRole('button', { name: 'Delete' }).click();
 
   await page.waitForURL(`/settings/organisations`);
-  await expect(page.getByText('No results found')).toBeVisible();
+  await expectTextToBeVisible(page, 'No results found');
   await page.getByRole('button', { name: 'Create organisation' }).click();
 
   await page.getByLabel('Organisation Name*').fill('test');

packages/app-tests/e2e/teams/team-documents.spec.ts

@@ -1,8 +1,11 @@
 import { expect, test } from '@playwright/test';
 import { DocumentStatus, DocumentVisibility, TeamMemberRole } from '@prisma/client';
 
-import { seedBlankDocument } from '@documenso/prisma/seed/documents';
-import { seedDocuments, seedTeamDocuments } from '@documenso/prisma/seed/documents';
+import {
+  seedBlankDocument,
+  seedDocuments,
+  seedTeamDocuments,
+} from '@documenso/prisma/seed/documents';
 import { seedTeam, seedTeamEmail, seedTeamMember } from '@documenso/prisma/seed/teams';
 import { seedUser } from '@documenso/prisma/seed/users';
 
@@ -314,9 +317,9 @@ test('[TEAMS]: delete pending team document', async ({ page }) => {
     await expect(page.getByRole('menuitem', { name: 'Delete' })).toBeVisible();
   }).toPass();
 
-  await page.getByRole('menuitem', { name: 'Delete' }).click();
+  await page.getByRole('menuitem', { name: 'Delete' }).click({ force: true });
   await page.getByPlaceholder("Type 'delete' to confirm").fill('delete');
-  await page.getByRole('button', { name: 'Delete' }).click();
+  await page.getByRole('button', { name: 'Delete' }).click({ force: true });
 
   await checkDocumentTabCount(page, 'Pending', 1);
 
@@ -359,9 +362,9 @@ test('[TEAMS]: delete completed team document', async ({ page }) => {
     await expect(page.getByRole('menuitem', { name: 'Delete' })).toBeVisible();
   }).toPass();
 
-  await page.getByRole('menuitem', { name: 'Delete' }).click();
+  await page.getByRole('menuitem', { name: 'Delete' }).click({ force: true });
   await page.getByPlaceholder("Type 'delete' to confirm").fill('delete');
-  await page.getByRole('button', { name: 'Delete' }).click();
+  await page.getByRole('button', { name: 'Delete' }).click({ force: true });
 
   await checkDocumentTabCount(page, 'Completed', 0);
 

packages/app-tests/e2e/teams/team-signature-settings.spec.ts

@@ -80,18 +80,27 @@ test('[TEAMS]: check signature modes can be disabled', async ({ page }) => {
 
     await page.getByRole('button', { name: 'Update' }).first().click();
 
+    // Wait for the update to complete
+    const toast = page.locator('li[role="status"][data-state="open"]').first();
+    await expect(toast).toBeVisible();
+    await expect(toast.getByText('Document preferences updated', { exact: true })).toBeVisible();
+
     const document = await seedTeamDocumentWithMeta(team);
 
-    // Go to document and check that the signatured tabs are correct.
+    // Go to document and check that the signature tabs are correct.
     await page.goto(`/sign/${document.recipients[0].token}`);
     await page.getByTestId('signature-pad-dialog-button').click();
 
+    // Wait for signature dialog to fully load
+    await page.waitForSelector('[role="dialog"]');
+
     // Check the tab values
     for (const tab of allTabs) {
       if (tabs.includes(tab)) {
         await expect(page.getByRole('tab', { name: tab })).toBeVisible();
       } else {
-        await expect(page.getByRole('tab', { name: tab })).not.toBeVisible();
+        // await expect(page.getByRole('tab', { name: tab })).not.toBeVisible();
+        await expect(page.getByRole('tab', { name: tab })).toHaveCount(0);
       }
     }
   }

packages/app-tests/e2e/templates/create-document-from-template.spec.ts

@@ -297,10 +297,22 @@ test('[TEMPLATE]: should create a document from a template with custom document'
     },
   });
 
+  const expectedDocumentDataType =
+    process.env.NEXT_PUBLIC_UPLOAD_TRANSPORT === 's3'
+      ? DocumentDataType.S3_PATH
+      : DocumentDataType.BYTES_64;
+
   expect(document.title).toEqual('TEMPLATE_WITH_CUSTOM_DOC');
-  expect(document.documentData.type).toEqual(DocumentDataType.BYTES_64);
-  expect(document.documentData.data).toEqual(pdfContent);
-  expect(document.documentData.initialData).toEqual(pdfContent);
+  expect(document.documentData.type).toEqual(expectedDocumentDataType);
+
+  if (expectedDocumentDataType === DocumentDataType.BYTES_64) {
+    expect(document.documentData.data).toEqual(pdfContent);
+    expect(document.documentData.initialData).toEqual(pdfContent);
+  } else {
+    // For S3, we expect the data/initialData to be the S3 path (non-empty string)
+    expect(document.documentData.data).toBeTruthy();
+    expect(document.documentData.initialData).toBeTruthy();
+  }
 });
 
 /**
@@ -378,11 +390,23 @@ test('[TEMPLATE]: should create a team document from a template with custom docu
     },
   });
 
+  const expectedDocumentDataType =
+    process.env.NEXT_PUBLIC_UPLOAD_TRANSPORT === 's3'
+      ? DocumentDataType.S3_PATH
+      : DocumentDataType.BYTES_64;
+
   expect(document.teamId).toEqual(team.id);
   expect(document.title).toEqual('TEAM_TEMPLATE_WITH_CUSTOM_DOC');
-  expect(document.documentData.type).toEqual(DocumentDataType.BYTES_64);
-  expect(document.documentData.data).toEqual(pdfContent);
-  expect(document.documentData.initialData).toEqual(pdfContent);
+  expect(document.documentData.type).toEqual(expectedDocumentDataType);
+
+  if (expectedDocumentDataType === DocumentDataType.BYTES_64) {
+    expect(document.documentData.data).toEqual(pdfContent);
+    expect(document.documentData.initialData).toEqual(pdfContent);
+  } else {
+    // For S3, we expect the data/initialData to be the S3 path (non-empty string)
+    expect(document.documentData.data).toBeTruthy();
+    expect(document.documentData.initialData).toBeTruthy();
+  }
 });
 
 /**

packages/app-tests/e2e/templates/direct-templates.spec.ts

@@ -178,4 +178,7 @@ test('[DIRECT_TEMPLATES]: use direct template link with 1 recipient', async ({ p
   await page.getByRole('button', { name: 'Sign' }).click();
   await page.waitForURL(/\/sign/);
   await expect(page.getByRole('heading', { name: 'Document Signed' })).toBeVisible();
+
+  // Add a longer waiting period to ensure document status is updated
+  await page.waitForTimeout(3000);
 });

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

@@ -27,6 +27,9 @@ test('[USER] can sign up with email and password', async ({ page }: { page: Page
 
   await page.waitForURL('/unverified-account');
 
+  // Wait to ensure token is created in the database
+  await page.waitForTimeout(2000);
+
   const { token } = await extractUserVerificationToken(email);
 
   const team = await prisma.team.findFirstOrThrow({

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

@@ -0,0 +1,82 @@
+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/app-tests/e2e/user/password.spec.ts

@@ -17,9 +17,14 @@ test('[USER] can reset password via forgot password', async ({ page }: { page: P
 
   await page.goto('http://localhost:3000/signin');
   await page.getByRole('link', { name: 'Forgot your password?' }).click();
+
+  await page.getByRole('textbox', { name: 'Email' }).click();
   await page.getByRole('textbox', { name: 'Email' }).fill(user.email);
+
+  await expect(page.getByRole('button', { name: 'Reset Password' })).toBeEnabled();
   await page.getByRole('button', { name: 'Reset Password' }).click();
-  await expect(page.locator('body')).toContainText('Reset email sent');
+
+  await expect(page.locator('body')).toContainText('Reset email sent', { timeout: 10000 });
 
   const foundToken = await prisma.passwordResetToken.findFirstOrThrow({
     where: {
@@ -33,16 +38,26 @@ test('[USER] can reset password via forgot password', async ({ page }: { page: P
   await page.goto(`http://localhost:3000/reset-password/${foundToken.token}`);
 
   // Assert that password cannot be same as old password.
-  await page.getByRole('textbox', { name: 'Password', exact: true }).fill(oldPassword);
-  await page.getByRole('textbox', { name: 'Repeat Password' }).fill(oldPassword);
+  await page.getByLabel('Password', { exact: true }).fill(oldPassword);
+  await page.getByLabel('Repeat Password').fill(oldPassword);
+
+  // Ensure both fields are filled before clicking
+  await expect(page.getByLabel('Password', { exact: true })).toHaveValue(oldPassword);
+  await expect(page.getByLabel('Repeat Password')).toHaveValue(oldPassword);
+
   await page.getByRole('button', { name: 'Reset Password' }).click();
   await expect(page.locator('body')).toContainText(
     'Your new password cannot be the same as your old password.',
   );
 
   // Assert password reset.
-  await page.getByRole('textbox', { name: 'Password', exact: true }).fill(newPassword);
-  await page.getByRole('textbox', { name: 'Repeat Password' }).fill(newPassword);
+  await page.getByLabel('Password', { exact: true }).fill(newPassword);
+  await page.getByLabel('Repeat Password').fill(newPassword);
+
+  // Ensure both fields are filled before clicking
+  await expect(page.getByLabel('Password', { exact: true })).toHaveValue(newPassword);
+  await expect(page.getByLabel('Repeat Password')).toHaveValue(newPassword);
+
   await page.getByRole('button', { name: 'Reset Password' }).click();
   await expect(page.locator('body')).toContainText('Your password has been updated successfully.');
 
@@ -73,9 +88,9 @@ test('[USER] can reset password via user settings', async ({ page }: { page: Pag
     redirectPath: '/settings/security',
   });
 
-  await page.getByRole('textbox', { name: 'Current password' }).fill(oldPassword);
-  await page.getByRole('textbox', { name: 'New password' }).fill(newPassword);
-  await page.getByRole('textbox', { name: 'Repeat password' }).fill(newPassword);
+  await page.getByLabel('Current password').fill(oldPassword);
+  await page.getByLabel('New password').fill(newPassword);
+  await page.getByLabel('Repeat password').fill(newPassword);
   await page.getByRole('button', { name: 'Update password' }).click();
   await expect(page.locator('body')).toContainText('Password updated');