fix: open dialog

Changes:
- Updating styling of read only fields
- Removed truncation for fields and used overflow hidden instead

.env.example

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

.gitignore

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

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/developers/public-api/index.mdx

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

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/billing-plans.tsx

@@ -1,4 +1,4 @@
-import { useMemo, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useLingui } from '@lingui/react/macro';
@@ -44,12 +44,22 @@ const MotionCard = motion(Card);
 
 export type BillingPlansProps = {
   plans: InternalClaimPlans;
+  selectedPlan?: string | null;
+  selectedCycle?: 'monthly' | 'yearly' | null;
+  isFromPricingPage?: boolean;
 };
 
-export const BillingPlans = ({ plans }: BillingPlansProps) => {
+export const BillingPlans = ({
+  plans,
+  selectedPlan,
+  selectedCycle,
+  isFromPricingPage,
+}: BillingPlansProps) => {
   const isMounted = useIsMounted();
 
-  const [interval, setInterval] = useState<'monthlyPrice' | 'yearlyPrice'>('yearlyPrice');
+  const [interval, setInterval] = useState<'monthlyPrice' | 'yearlyPrice'>(
+    selectedCycle === 'monthly' ? 'monthlyPrice' : 'yearlyPrice',
+  );
 
   const pricesToDisplay = useMemo(() => {
     const prices = [];
@@ -85,56 +95,65 @@ export const BillingPlans = ({ plans }: BillingPlansProps) => {
 
       <div className="mt-8 grid gap-8 lg:grid-cols-2 2xl:grid-cols-3">
         <AnimatePresence mode="wait">
-          {pricesToDisplay.map((price) => (
-            <MotionCard
-              key={price.id}
-              initial={{ opacity: isMounted ? 0 : 1, y: isMounted ? 20 : 0 }}
-              animate={{ opacity: 1, y: 0, transition: { duration: 0.3 } }}
-              exit={{ opacity: 0, transition: { duration: 0.3 } }}
-            >
-              <CardContent className="flex h-full flex-col p-6">
-                <CardTitle>{price.product.name}</CardTitle>
+          {pricesToDisplay.map((price) => {
+            const planId = price.claim.toLowerCase().replace('claim_', '');
+            const isSelected = selectedPlan && planId === selectedPlan?.toLowerCase();
 
-                <div className="text-muted-foreground mt-2 text-lg font-medium">
-                  {price.friendlyPrice + ' '}
-                  <span className="text-xs">
-                    {interval === 'monthlyPrice' ? (
-                      <Trans>per month</Trans>
-                    ) : (
-                      <Trans>per year</Trans>
-                    )}
-                  </span>
-                </div>
+            return (
+              <MotionCard
+                key={price.id}
+                initial={{ opacity: isMounted ? 0 : 1, y: isMounted ? 20 : 0 }}
+                animate={{ opacity: 1, y: 0, transition: { duration: 0.3 } }}
+                exit={{ opacity: 0, transition: { duration: 0.3 } }}
+                className={isSelected ? 'ring-primary ring-2' : ''}
+              >
+                <CardContent className="flex h-full flex-col p-6">
+                  <CardTitle>{price.product.name}</CardTitle>
 
-                <div className="text-muted-foreground mt-1.5 text-sm">
-                  {price.product.description}
-                </div>
-
-                {price.product.features && price.product.features.length > 0 && (
-                  <div className="text-muted-foreground mt-4">
-                    <div className="text-sm font-medium">Includes:</div>
-
-                    <ul className="mt-1 divide-y text-sm">
-                      {price.product.features.map((feature, index) => (
-                        <li key={index} className="py-2">
-                          {feature.name}
-                        </li>
-                      ))}
-                    </ul>
+                  <div className="text-muted-foreground mt-2 text-lg font-medium">
+                    {price.friendlyPrice + ' '}
+                    <span className="text-xs">
+                      {interval === 'monthlyPrice' ? (
+                        <Trans>per month</Trans>
+                      ) : (
+                        <Trans>per year</Trans>
+                      )}
+                    </span>
                   </div>
-                )}
 
-                <div className="flex-1" />
+                  <div className="text-muted-foreground mt-1.5 text-sm">
+                    {price.product.description}
+                  </div>
 
-                <BillingDialog
-                  priceId={price.id}
-                  planName={price.product.name}
-                  memberCount={price.memberCount}
-                  claim={price.claim}
-                />
-              </CardContent>
-            </MotionCard>
-          ))}
+                  {price.product.features && price.product.features.length > 0 && (
+                    <div className="text-muted-foreground mt-4">
+                      <div className="text-sm font-medium">Includes:</div>
+
+                      <ul className="mt-1 divide-y text-sm">
+                        {price.product.features.map((feature, index) => (
+                          <li key={index} className="py-2">
+                            {feature.name}
+                          </li>
+                        ))}
+                      </ul>
+                    </div>
+                  )}
+
+                  <div className="flex-1" />
+
+                  <BillingDialog
+                    priceId={price.id}
+                    planName={price.product.name}
+                    memberCount={price.memberCount}
+                    claim={price.claim}
+                    isSelected={isSelected || false}
+                    isFromPricingPage={isFromPricingPage}
+                    interval={interval}
+                  />
+                </CardContent>
+              </MotionCard>
+            );
+          })}
         </AnimatePresence>
       </div>
     </div>
@@ -145,14 +164,26 @@ const BillingDialog = ({
   priceId,
   planName,
   claim,
+  isSelected,
+  isFromPricingPage,
+  interval,
 }: {
   priceId: string;
   planName: string;
   memberCount: number;
   claim: string;
+  isSelected?: boolean;
+  isFromPricingPage?: boolean;
+  interval: 'monthlyPrice' | 'yearlyPrice';
 }) => {
   const [isOpen, setIsOpen] = useState(false);
 
+  useEffect(() => {
+    if (isSelected && isFromPricingPage) {
+      setIsOpen(true);
+    }
+  }, [isSelected, isFromPricingPage]);
+
   const { t } = useLingui();
   const { toast } = useToast();
 
@@ -227,11 +258,13 @@ const BillingDialog = ({
       <DialogContent>
         <DialogHeader>
           <DialogTitle>
-            <Trans>Subscribe</Trans>
+            <Trans>
+              Subscribe to {planName} {interval === 'monthlyPrice' ? '(Monthly)' : '(Yearly)'}
+            </Trans>
           </DialogTitle>
 
           <DialogDescription>
-            <Trans>You are about to subscribe to the {planName}</Trans>
+            <Trans>Choose how to proceed with your subscription</Trans>
           </DialogDescription>
         </DialogHeader>
 

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

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

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

@@ -286,6 +286,7 @@ export const DocumentSigningCheckboxField = ({
                     className="h-3 w-3"
                     id={`checkbox-${field.id}-${item.id}`}
                     checked={checkedValues.includes(itemValue)}
+                    disabled={isReadOnly}
                     onCheckedChange={() => handleCheckboxChange(item.value, item.id)}
                   />
                   {!item.value.includes('empty-value-') && item.value && (
@@ -314,7 +315,7 @@ export const DocumentSigningCheckboxField = ({
                   className="h-3 w-3"
                   id={`checkbox-${field.id}-${item.id}`}
                   checked={parsedCheckedValues.includes(itemValue)}
-                  disabled={isLoading}
+                  disabled={isLoading || isReadOnly}
                   onCheckedChange={() => void handleCheckboxOptionClick(item)}
                 />
                 {!item.value.includes('empty-value-') && item.value && (

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

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

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

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

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

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

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

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

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

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

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

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

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

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

apps/remix/app/components/general/document/document-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/components/general/template/template-edit-form.tsx

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

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+/o.$orgUrl.settings.billing.tsx

@@ -1,6 +1,7 @@
 import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
 import { Loader } from 'lucide-react';
+import { useSearchParams } from 'react-router';
 import type Stripe from 'stripe';
 import { match } from 'ts-pattern';
 
@@ -19,9 +20,14 @@ export function meta() {
 
 export default function TeamsSettingBillingPage() {
   const { _, i18n } = useLingui();
+  const [searchParams] = useSearchParams();
 
   const organisation = useCurrentOrganisation();
 
+  const selectedPlan = searchParams.get('plan');
+  const selectedCycle = searchParams.get('cycle') as 'monthly' | 'yearly' | null;
+  const source = searchParams.get('source');
+
   const { data: subscriptionQuery, isLoading: isLoadingSubscription } =
     trpc.billing.subscription.get.useQuery({
       organisationId: organisation.id,
@@ -48,8 +54,21 @@ export default function TeamsSettingBillingPage() {
     // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
     (stripeSubscription?.items.data[0].price.product as Stripe.Product | undefined)?.name;
 
+  const isFromPricingPage = source === 'pricing';
+
   return (
     <div>
+      {isFromPricingPage && selectedPlan && !subscription && (
+        <div className="bg-muted mb-4 rounded-lg p-4">
+          <p className="text-sm">
+            <Trans>
+              Select a plan below to upgrade <strong>{organisation.name}</strong> to the{' '}
+              {selectedPlan} plan
+            </Trans>
+          </p>
+        </div>
+      )}
+
       <div className="flex flex-row items-end justify-between">
         <div>
           <h3 className="text-2xl font-semibold">
@@ -134,7 +153,14 @@ export default function TeamsSettingBillingPage() {
 
       <hr className="my-4" />
 
-      {!subscription && canManageBilling && <BillingPlans plans={plans} />}
+      {!subscription && canManageBilling && (
+        <BillingPlans
+          plans={plans}
+          selectedPlan={selectedPlan}
+          selectedCycle={selectedCycle}
+          isFromPricingPage={source === 'pricing'}
+        />
+      )}
 
       <section className="mt-6">
         <OrganisationBillingInvoicesTable

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.$id._index.tsx

@@ -1,7 +1,7 @@
 import { useLingui } from '@lingui/react';
 import { Plural, Trans } from '@lingui/react/macro';
 import { DocumentStatus, TeamMemberRole } from '@prisma/client';
-import { ChevronLeft, Clock9, Users2 } from 'lucide-react';
+import { ChevronLeft, Users2 } from 'lucide-react';
 import { Link, redirect } from 'react-router';
 import { match } from 'ts-pattern';
 
@@ -13,11 +13,9 @@ import { DocumentVisibility } from '@documenso/lib/types/document-visibility';
 import { formatDocumentsPath } from '@documenso/lib/utils/teams';
 import { DocumentReadOnlyFields } from '@documenso/ui/components/document/document-read-only-fields';
 import { Badge } from '@documenso/ui/primitives/badge';
-import { Button } from '@documenso/ui/primitives/button';
 import { Card, CardContent } from '@documenso/ui/primitives/card';
 import { PDFViewer } from '@documenso/ui/primitives/pdf-viewer';
 
-import { DocumentHistorySheet } from '~/components/general/document/document-history-sheet';
 import { DocumentPageViewButton } from '~/components/general/document/document-page-view-button';
 import { DocumentPageViewDropdown } from '~/components/general/document/document-page-view-dropdown';
 import { DocumentPageViewInformation } from '~/components/general/document/document-page-view-information';
@@ -101,9 +99,6 @@ export default function DocumentPage() {
 
   const { recipients, documentData, documentMeta } = document;
 
-  // This was a feature flag. Leave to false since it's not ready.
-  const isDocumentHistoryEnabled = false;
-
   return (
     <div className="mx-auto -mt-4 w-full max-w-screen-xl px-4 md:px-8">
       {document.status === DocumentStatus.PENDING && (
@@ -154,17 +149,6 @@ export default function DocumentPage() {
             )}
           </div>
         </div>
-
-        {isDocumentHistoryEnabled && (
-          <div className="self-end">
-            <DocumentHistorySheet documentId={document.id} userId={user.id}>
-              <Button variant="outline">
-                <Clock9 className="mr-1.5 h-4 w-4" />
-                <Trans>Document history</Trans>
-              </Button>
-            </DocumentHistorySheet>
-          </div>
-        )}
       </div>
 
       <div className="mt-6 grid w-full grid-cols-12 gap-8">

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+/signin.tsx

@@ -20,6 +20,8 @@ export function meta() {
 
 export async function loader({ request }: Route.LoaderArgs) {
   const { isAuthenticated } = await getOptionalSession(request);
+  const url = new URL(request.url);
+  const redirectParam = url.searchParams.get('redirect');
 
   // SSR env variables.
   const isGoogleSSOEnabled = IS_GOOGLE_SSO_ENABLED;
@@ -27,6 +29,9 @@ export async function loader({ request }: Route.LoaderArgs) {
   const oidcProviderLabel = OIDC_PROVIDER_LABEL;
 
   if (isAuthenticated) {
+    if (redirectParam) {
+      throw redirect(redirectParam);
+    }
     throw redirect('/');
   }
 
@@ -34,11 +39,12 @@ export async function loader({ request }: Route.LoaderArgs) {
     isGoogleSSOEnabled,
     isOIDCSSOEnabled,
     oidcProviderLabel,
+    redirectTo: redirectParam,
   };
 }
 
 export default function SignIn({ loaderData }: Route.ComponentProps) {
-  const { isGoogleSSOEnabled, isOIDCSSOEnabled, oidcProviderLabel } = loaderData;
+  const { isGoogleSSOEnabled, isOIDCSSOEnabled, oidcProviderLabel, redirectTo } = loaderData;
 
   return (
     <div className="w-screen max-w-lg px-4">
@@ -56,6 +62,7 @@ export default function SignIn({ loaderData }: Route.ComponentProps) {
           isGoogleSSOEnabled={isGoogleSSOEnabled}
           isOIDCSSOEnabled={isOIDCSSOEnabled}
           oidcProviderLabel={oidcProviderLabel}
+          returnTo={redirectTo || undefined}
         />
 
         {env('NEXT_PUBLIC_DISABLE_SIGNUP') !== 'true' && (

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/app/routes/billing-redirect.tsx

@@ -0,0 +1,49 @@
+import { redirect } from 'react-router';
+
+import { getOptionalSession } from '@documenso/auth/server/lib/utils/get-session';
+import { isPersonalLayout } from '@documenso/lib/utils/organisations';
+import { getOrganisations } from '@documenso/trpc/server/organisation-router/get-organisations';
+
+import type { Route } from './+types/billing-redirect';
+
+export async function loader({ request }: Route.LoaderArgs) {
+  const session = await getOptionalSession(request);
+  if (!session.isAuthenticated) {
+    const currentUrl = new URL(request.url);
+    const redirectParam = encodeURIComponent(currentUrl.pathname + currentUrl.search);
+    throw redirect(`/signin?redirect=${redirectParam}`);
+  }
+
+  const url = new URL(request.url);
+  const plan = url.searchParams.get('plan');
+  const cycle = url.searchParams.get('cycle');
+  const source = url.searchParams.get('source');
+
+  const queryParams = new URLSearchParams();
+  if (plan) {
+    queryParams.set('plan', plan);
+  }
+  if (cycle) {
+    queryParams.set('cycle', cycle);
+  }
+  if (source) {
+    queryParams.set('source', source);
+  }
+  const queryString = queryParams.toString() ? `?${queryParams.toString()}` : '';
+
+  const organisations = await getOrganisations({ userId: session.user.id });
+  if (isPersonalLayout(organisations)) {
+    return redirect(`/settings/billing${queryString}`);
+  }
+
+  const personalOrg = organisations.find((org) => org.type === 'PERSONAL') || organisations[0];
+  if (personalOrg) {
+    return redirect(`/o/${personalOrg.url}/settings/billing${queryString}`);
+  }
+
+  return redirect('/settings/profile');
+}
+
+export default function BillingRedirect() {
+  return null;
+}

apps/remix/package.json

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