feat: runtime env

Support runtime environment variables using server components.

This will mean docker images can change env vars for runtime as required.

.github/ISSUE_TEMPLATE/bug-report.md

@@ -1,50 +0,0 @@
----
-name: Bug Report
-about: Create a bug report to help us improve
----
-
-<!--- Please provide a general summary of the issue in the Title above -->
-
-## Issue Description
-
-<!--- Please provide a clear and concise description of the problem. -->
-
-## Steps to Reproduce
-
-<!--- Please provide step-by-step instructions to reproduce the issue. -->
-<!--- Include code snippets, error messages, and any other relevant information. -->
-
-1. Step 1
-2. Step 2
-3. ...
-
-## Expected Behavior
-
-<!--- Describe what you expected to happen. -->
-
-## Current Behavior
-
-<!--- Describe what is currently happening. -->
-
-## Screenshots (optional)
-
-<!--- If applicable, add screenshots to help explain the issue. -->
-
-## Environment
-
-<!--- Please provide information about your environment, such as operating system, browser, version, etc. -->
-
-- OS: [e.g., Windows 10]
-- Browser: [e.g., Chrome, Firefox]
-- Version: [e.g., 2.0.1]
-
-## Checklist
-
-<!--- Please check the boxes that apply to this issue report. -->
-<!--- You can add or remove items as needed. -->
-
-- [ ] I have searched the existing issues to make sure this is not a duplicate.
-- [ ] I have provided steps to reproduce the issue.
-- [ ] I have included relevant environment information.
-- [ ] I have included any relevant screenshots.
-- [ ] I understand that this is a voluntary contribution and that there is no guarantee of resolution.

.github/ISSUE_TEMPLATE/bug-report.yml

@@ -0,0 +1,48 @@
+name: "Bug Report"
+labels: ["bug"]
+description: Create a bug report to help us improve
+body:
+  - type: markdown
+    attributes:
+      value:
+        Thank you for reporting an issue.
+        Please fill in as much of the form below as you're able to.
+  - type: textarea
+    attributes:
+      label: Issue Description
+      description: Please provide a clear and concise description of the problem.
+  - type: textarea
+    attributes:
+      label: Steps to Reproduce
+      description: Please provide step-by-step instructions to reproduce the issue. Include code snippets, error messages, and any other relevant information.
+  - type: textarea
+    attributes:
+      label: Expected Behavior
+      description: Describe what you expected to happen.
+  - type: textarea
+    attributes:
+      label: Current Behavior
+      description: Describe what is currently happening.
+  - type: textarea
+    attributes:
+      label: Screenshots (optional)
+      description: If applicable, add screenshots to help explain the issue.
+  - type: input
+    attributes:
+      label: Operating System [e.g., Windows 10]
+  - type: input
+    attributes:
+      label: Browser [e.g., Chrome, Firefox]
+  - type: input
+    attributes:
+      label: Version [e.g., 2.0.1]
+  - type: checkboxes
+    attributes:
+      label: Please check the boxes that apply to this issue report.
+      options:
+        - label: I have searched the existing issues to make sure this is not a duplicate.
+        - label: I have provided steps to reproduce the issue.
+        - label: I have included relevant environment information.
+        - label: I have included any relevant screenshots.
+        - label: I understand that this is a voluntary contribution and that there is no guarantee of resolution.
+        - label: I want to work on creating a PR for this issue if approved

.github/ISSUE_TEMPLATE/feature-request.md

@@ -1,41 +0,0 @@
----
-name: Feature Request
-about: Suggest a new idea or enhancement for this project
----
-
-<!--- Please provide a clear and concise title for your feature request -->
-
-## Feature Description
-
-<!--- Describe the feature you are requesting in detail. -->
-<!--- Explain what problem it solves or what value it adds to the project. -->
-
-## Use Case
-
-<!--- Provide a scenario or use case where this feature would be beneficial. -->
-<!--- Explain how users would interact with this feature and why it's important. -->
-
-## Proposed Solution
-
-<!--- If you have an idea of how this feature could be implemented, describe it here. -->
-<!--- Include any technical details, UI/UX considerations, or design suggestions. -->
-
-## Alternatives (optional)
-
-<!--- Are there any alternative ways to achieve the same goal? -->
-<!--- Describe other approaches that could be considered if this feature is not implemented. -->
-
-## Additional Context
-
-<!--- Add any additional context or information that might be relevant to the feature request. -->
-
-## Checklist
-
-<!--- Please check the boxes that apply to this feature request. -->
-<!--- You can add or remove items as needed. -->
-
-- [ ] I have searched the existing feature requests to make sure this is not a duplicate.
-- [ ] I have provided a detailed description of the requested feature.
-- [ ] I have explained the use case or scenario for this feature.
-- [ ] I have included any relevant technical details or design suggestions.
-- [ ] I understand that this is a suggestion and that there is no guarantee of implementation.

.github/ISSUE_TEMPLATE/feature-request.yml

@@ -0,0 +1,35 @@
+name: "Feature Request"
+description: Suggest a new idea or enhancement for this project
+body:
+  - type: markdown
+    attributes:
+      value: Please provide a clear and concise title for your feature request 
+  - type: textarea
+    attributes:
+      label: Feature Description
+      description: Describe the feature you are requesting in detail. Explain what problem it solves or what value it adds to the project.
+  - type: textarea
+    attributes:
+      label: Use Case
+      description: Provide a scenario or use case where this feature would be beneficial. Explain how users would interact with this feature and why it's important.
+  - type: textarea
+    attributes:
+      label: Proposed Solution
+      description: If you have an idea of how this feature could be implemented, describe it here. Include any technical details, UI/UX considerations, or design suggestions.
+  - type: textarea
+    attributes:
+      label: Alternatives (optional)
+      description: Are there any alternative ways to achieve the same goal? Describe other approaches that could be considered if this feature is not implemented.
+  - type: textarea
+    attributes:
+      label: Additional Context
+      description: Add any additional context or information that might be relevant to the feature request.
+  - type: checkboxes
+    attributes:
+      label: Please check the boxes that apply to this feature request.
+      options:
+        - label: I have searched the existing feature requests to make sure this is not a duplicate.
+        - label: I have provided a detailed description of the requested feature.
+        - label: I have explained the use case or scenario for this feature.
+        - label: I have included any relevant technical details or design suggestions.
+        - label: I understand that this is a suggestion and that there is no guarantee of implementation.

.github/ISSUE_TEMPLATE/improvement.md

@@ -1,41 +0,0 @@
----
-name: General Improvement
-about: Suggest a minor enhancement or improvement for this project
----
-
-<!--- Please provide a clear and concise title for your improvement suggestion -->
-
-## Improvement Description
-
-<!--- Describe the improvement you are suggesting in detail. -->
-<!--- Explain what specific aspect of the project it addresses or enhances. -->
-
-## Rationale
-
-<!--- Explain why this improvement would be beneficial. -->
-<!--- Share any context, pain points, or reasons for suggesting this change. -->
-
-## Proposed Solution
-
-<!--- If you have a suggestion for how this improvement could be implemented, describe it here. -->
-<!--- Include any technical details, design suggestions, or other relevant information. -->
-
-## Alternatives (optional)
-
-<!--- Are there any alternative approaches to achieve the same improvement? -->
-<!--- Describe other ways to address the issue or enhance the project. -->
-
-## Additional Context
-
-<!--- Add any additional context or information that might be relevant to the improvement suggestion. -->
-
-## Checklist
-
-<!--- Please check the boxes that apply to this improvement suggestion. -->
-<!--- You can add or remove items as needed. -->
-
-- [ ] I have searched the existing issues and improvement suggestions to avoid duplication.
-- [ ] I have provided a clear description of the improvement being suggested.
-- [ ] I have explained the rationale behind this improvement.
-- [ ] I have included any relevant technical details or design suggestions.
-- [ ] I understand that this is a suggestion and that there is no guarantee of implementation.

.github/ISSUE_TEMPLATE/improvement.yml

@@ -0,0 +1,35 @@
+name: "General Improvement"
+description: Suggest a minor enhancement or improvement for this project
+body:
+  - type: markdown
+    attributes:
+      value: Please provide a clear and concise title for your improvement suggestion
+  - type: textarea
+    attributes:
+      label: Improvement Description
+      description: Describe the improvement you are suggesting in detail. Explain what specific aspect of the project it addresses or enhances.
+  - type: textarea
+    attributes:
+      label: Rationale
+      description: Explain why this improvement would be beneficial. Share any context, pain points, or reasons for suggesting this change.
+  - type: textarea
+    attributes:
+      label: Proposed Solution
+      description: If you have a suggestion for how this improvement could be implemented, describe it here. Include any technical details, design suggestions, or other relevant information.
+  - type: textarea
+    attributes:
+      label: Alternatives (optional)
+      description: Are there any alternative approaches to achieve the same improvement? Describe other ways to address the issue or enhance the project.
+  - type: textarea
+    attributes:
+      label: Additional Context
+      description: Add any additional context or information that might be relevant to the improvement suggestion.
+  - type: checkboxes
+    attributes:
+      label: Please check the boxes that apply to this improvement suggestion.
+      options:
+        - label: I have searched the existing issues and improvement suggestions to avoid duplication.
+        - label: I have provided a clear description of the improvement being suggested.
+        - label: I have explained the rationale behind this improvement.
+        - label: I have included any relevant technical details or design suggestions.
+        - label: I understand that this is a suggestion and that there is no guarantee of implementation.

.github/dependabot.yml

@@ -5,7 +5,7 @@ updates:
     directory: '/'
     schedule:
       interval: "weekly"
-    target-branch: "feat/refresh"
+    target-branch: "main"
     labels:
       - "ci dependencies"
       - "ci"
@@ -15,7 +15,7 @@ updates:
     directory: "/apps/marketing"
     schedule:
       interval: "weekly"
-    target-branch: "feat/refresh"
+    target-branch: "main"
     labels:
       - "npm dependencies"
       - "frontend"
@@ -25,7 +25,7 @@ updates:
     directory: "/apps/web"
     schedule:
       interval: "weekly"
-    target-branch: "feat/refresh"
+    target-branch: "main"
     labels:
       - "npm dependencies"
       - "frontend"

.github/workflows/ci.yml

@@ -2,9 +2,9 @@ name: "Continuous Integration"
 
 on:
   push:
-    branches: [ "feat/refresh" ]
+    branches: [ "main" ]
   pull_request:
-    branches: [ "feat/refresh" ]
+    branches: [ "main" ]
 
 concurrency:
   group: ${{ github.workflow }}-${{ github.head_ref || github.run_id }}

.github/workflows/codeql-analysis.yml

@@ -3,9 +3,9 @@ name: "CodeQL"
 on:
   workflow_dispatch:
   push:
-    branches: [ feat/refresh ]
+    branches: [ "main" ]
   pull_request:
-    branches: [ feat/refresh ]
+    branches: [ "main" ]
 
 jobs:
   analyze:

.github/workflows/e2e-tests.yml

@@ -1,9 +1,9 @@
 name: Playwright Tests
 on:
   push:
-    branches: [feat/refresh]
+    branches: [ "main" ]
   pull_request:
-    branches: [feat/refresh]
+    branches: [ "main" ]
 jobs:
   e2e_tests:
     timeout-minutes: 60

CONTRIBUTING.md

@@ -37,7 +37,7 @@ The development branch is <code>main</code>. All pull requests should be made ag
 - Create a new branch (include the issue id and something readable):
 
   ```sh
-  git checkout -b doc-999-my-feature-or-fix
+  git checkout -b feat/doc-999-somefeature-that-rocks
   ```
 
 3. See the [Developer Setup](https://github.com/documenso/documenso/blob/main/README.md#developer-setup) for more setup details.

MANIFEST.md

@@ -0,0 +1,6 @@
+# The Documenso Manifest
+Signing documents is a fundamental building block of private, economic, and government interactions. Access to easy and secure signing to participate in society should therefore be a fundamental right for everyone. The technology to enable this should be accessible and widespread.
+
+We know that open source is the key to solving this need once and for all to benefit all humankind. Using open source kickstarts innovation by putting the open sharing of ideas and solutions first. With Documenso, we will create an open and globally accessible signing platform to empower users, customers, and developers to fulfill their needs. Documenso is built by and for the global community, listening and implementing what is needed. Being transparent with the  code and the processes that use it brings trust and security to the platform.
+
+We build Documenso for longevity and scale by embracing the capital efficiency and inclusiveness of the Commercial Open Source (COSS) movement. We are building a global commodity for the world.

README.md

@@ -30,14 +30,6 @@
    <a href="code_of_conduct.md"><img src="https://img.shields.io/badge/Contributor%20Covenant-2.1-4baaaa.svg" alt="Contributor Covenant"></a>
 </p>
 
-> 🦺 Documenso 1.0 is deployed to our <a href="https://documen.so/staging" target="_blank">Staging Environment</a>.
->
-> The code can be found on the [feat/refresh](https://github.com/documenso/documenso/tree/feat/refresh) branch.
->
-> The new version will be released after the current testing phase.
-
-# Join us in testing Documenso 1.0 during [MALFUNCTION MANIA](https://documenso.com/blog/malfunction-mania)
-
 <div>
   <img style="display: block; height: 120px; width: 24%"
     src="https://github.com/documenso/documenso/assets/1309312/67e08c98-c153-4115-aa2d-77979bb12c94)">
@@ -70,14 +62,14 @@ 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.
+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
-- ⭐ the repository to help us raise awareness
-- Spread the word on Twitter that Documenso is working towards a more open signing tool
-- Fix or create [issues](https://github.com/documenso/documenso/issues), that are needed for the first production release
+- 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.
+- ⭐ the repository to help us raise awareness.
+- Spread the word on Twitter that Documenso is working towards a more open signing tool.
+- Fix or create [issues](https://github.com/documenso/documenso/issues), that are needed for the first production release.
 
 ## Contributing
 
@@ -111,7 +103,7 @@ Contact us if you are interested in our Enterprise plan for large organizations
 
 ### Requirements
 
-To run Documenso locally you will need
+To run Documenso locally, you will need
 
 - Node.js
 - Postgres SQL Database
@@ -129,7 +121,7 @@ Want to get up and running quickly? Follow these steps:
 git clone https://github.com/documenso/documenso
 ```
 
-2. Set up your `.env` file using the recommendations in the `.env.example` file. Alternatively just run `cp .env.example .env` to get started with our handpicked defaults.
+2. Set up your `.env` file using the recommendations in the `.env.example` file. Alternatively, just run `cp .env.example .env` to get started with our handpicked defaults.
 
 3. Run `npm run dx` in the root directory
 
@@ -156,7 +148,7 @@ npm run d
 
 ### Manual Setup
 
-Follow these steps to setup documenso on you local machine:
+Follow these steps to setup Documenso on your local machine:
 
 1. [Clone the repository](https://help.github.com/articles/cloning-a-repository/) it to your local device.
 
@@ -164,11 +156,11 @@ Follow these steps to setup documenso on you local machine:
 git clone https://github.com/documenso/documenso
 ```
 
-2. Run `npm i` in root directory
+2. Run `npm i` in the root directory
 
 3. Create your `.env` from the `.env.example`. You can use `cp .env.example .env` to get started with our handpicked defaults.
 
-4. Set the following environement variables.
+4. Set the following environment variables:
 
    - NEXTAUTH_URL
    - NEXTAUTH_SECRET
@@ -181,15 +173,15 @@ git clone https://github.com/documenso/documenso
 
 5. Create the database schema by running `npm run prisma:migrate-dev`
 
-6. Run `npm run dev` root directory to start
+6. Run `npm run dev` in the root directory to start
 
 7. Register a new user at http://localhost:3000/signup
 
 ---
 
-- Optional: Seed the database using `npm run prisma:seed -w @documenso/prisma` to create a test user and document
-- Optional: Create your own signing certificate
-  - To generate your own using these steps and a Linux Terminal or Windows Subsystem for Linux (WSL) see **[Create your own signing certificate](./SIGNING.md)**.
+- Optional: Seed the database using `npm run prisma:seed -w @documenso/prisma` to create a test user and document.
+- Optional: Create your own signing certificate.
+  - To generate your own using these steps and a Linux Terminal or Windows Subsystem for Linux (WSL), see **[Create your own signing certificate](./SIGNING.md)**.
 
 ### Run in Gitpod
 
@@ -203,13 +195,80 @@ We support DevContainers for VSCode. [Click here to get started.](https://vscode
 
 ## Docker
 
-🚧 Docker containers and images are current in progress. We are actively working on bringing a simple docker build and publish pipeline for Documenso.
+🚧 Docker containers and images are current in progress. We are actively working on bringing a simple Docker build and publish pipeline for Documenso.
 
 ## Self Hosting
 
 We support a variety of deployment methods, and are actively working on adding more. Stay tuned for updates!
 
-> Please note the below deployment methods are for v0.9, we will update these to v1.0 once it has been released.
+> Please note that the below deployment methods are for v0.9, we will update these to v1.0 once it has been released.
+
+### Fetch, configure, and build
+
+First, clone the code from Github:
+
+```
+git clone https://github.com/documenso/documenso.git
+```
+
+Then, inside the `documenso` folder, copy the example env file:
+
+```
+cp .env.example .env
+```
+
+The following environment variables must be set:
+
+* `NEXTAUTH_URL`
+* `NEXTAUTH_SECRET`
+* `NEXT_PUBLIC_WEBAPP_URL`
+* `NEXT_PUBLIC_MARKETING_URL`
+* `NEXT_PRIVATE_DATABASE_URL`
+* `NEXT_PRIVATE_DIRECT_DATABASE_URL`
+* `NEXT_PRIVATE_SMTP_FROM_NAME`
+* `NEXT_PRIVATE_SMTP_FROM_ADDRESS`
+
+> If you are using a reverse proxy in front of Documenso, don't forget to provide the public URL for both `NEXTAUTH_URL` and `NEXT_PUBLIC_WEBAPP_URL` variables!
+
+Now you can install the dependencies and build it:
+
+```
+npm i
+npm run:build:web
+npm run prisma:migrate-deploy
+```
+
+Finally, you can start it with:
+
+```
+npm run start
+```
+
+This will start the server on `localhost:3000`. For now, any reverse proxy can then do the frontend and SSL termination.
+
+> If you want to run with another port than 3000, you can start the application with `next -p <ANY PORT>` from the `apps/web` folder.
+
+### Run as a service
+
+You can use a systemd service file to run the app. Here is a simple example of the service running on port 3500 (using 3000 by default):
+
+```bash
+[Unit]
+Description=documenso
+After=network.target
+
+[Service]
+Environment=PATH=/path/to/your/node/binaries
+Type=simple
+User=www-data
+WorkingDirectory=/var/www/documenso/apps/web
+ExecStart=/usr/bin/next start -p 3500
+TimeoutSec=15
+Restart=always
+
+[Install]
+WantedBy=multi-user.target
+```
 
 ### Railway
 
@@ -221,15 +280,15 @@ We support a variety of deployment methods, and are actively working on adding m
 
 ## Troubleshooting
 
-### I'm not receiving any emails when using the developer quickstart
+### I'm not receiving any emails when using the developer quickstart.
 
-When using the developer quickstart an [Inbucket](https://inbucket.org/) server will be spun up in a docker container that will store all outgoing email locally for you to view.
+When using the developer quickstart, an [Inbucket](https://inbucket.org/) server will be spun up in a docker container that will store all outgoing emails locally for you to view.
 
-The Web UI can be found at http://localhost:9000 while the SMTP port will be on localhost:2500.
+The Web UI can be found at http://localhost:9000, while the SMTP port will be on localhost:2500.
 
 ### Support IPv6
 
-In case you are deploying to a cluster that uses only IPv6. You can use a custom command to pass a parameter to the Next.js start command
+If you are deploying to a cluster that uses only IPv6, You can use a custom command to pass a parameter to the Next.js start command
 
 For local docker run
 
@@ -254,7 +313,7 @@ containers:
       - '::'
 ```
 
-### I can't see environment variables in my package scripts
+### I can't see environment variables in my package scripts.
 
 Wrap your package script with the `with:env` script like such:
 
@@ -262,7 +321,7 @@ Wrap your package script with the `with:env` script like such:
 npm run with:env -- npm run myscript
 ```
 
-The same can be done when using `npx` for one of bin scripts:
+The same can be done when using `npx` for one of the bin scripts:
 
 ```
 npm run with:env -- npx myscript

apps/marketing/content/blog/building-documenso-pt1.mdx

@@ -79,7 +79,7 @@ There weren’t any deeper reasons we choose WiseKey, other than they offered wh
 Do you have questions or thoughts about this? As always, let me know in the comments, on <a href="http://twitter.com/eltimuro" target="_blank">twitter.com/eltimuro</a>
 or directly: <a href="https://documen.so/timur" target="_blank">documen.so/timur</a>
 
-Join the self-hoster community here: <a href="https://documenso.slack.com/" target="_blank">https://documenso.slack.com/</a>
+Join the self-hoster community here: <a href="https://documen.so/discord" target="_blank">https://documen.so/discord</a>
 
 Best from Hamburg
 

apps/marketing/content/blog/live-roadmap-singleplayer.mdx

@@ -0,0 +1,75 @@
+---
+title: The 🔴 LIVE Roadmap
+description: It's the Launch Week Day finale, Day 5! We are going out with a bang and introducing the 🔴 LIVE roadmap, featuring our next Product Hunt Launch - Free Singleplayer Documenso - Sign without creating an account!
+authorName: 'Timur Ercan'
+authorImage: '/blog/blog-author-timur.jpeg'
+authorRole: 'Co-Founder'
+date: 2023-09-29
+tags:
+  - Free Plan
+  - Launch
+  - Roadmap
+---
+
+<figure>
+  <MdxNextImage
+    src="/blog/roadmap.png"
+    width="1260"
+    height="630"
+    alt="XKCD: Bug"
+  />
+
+  <figcaption className="text-center">
+    "Being early is, uh, good." -Unknown
+  </figcaption>
+</figure>
+
+> TLDR; We are launching a [🔴 LIVE roadmap](https://documen.so/launches), that gets updated regularly.\
+> First upcoming launch: A free single signer experience.
+
+## The Road Ahead
+
+It's been quite a week, launching our [design system](https://documenso.com/blog/design-system), [kicking of a Malfunction Mania](https://documenso.com/blog/malfunction-mania), a [shiny new contributor perk](https://documenso.com/blog/shop) and our [early adopter deal](https://documenso.com/blog/early-adopters). After discussing Version 1.0 a lot, we want to close the week by looking ahead. As an open company, we want transparency about what we are working on and what to expect next. Especially for our Early Adopters, we want to paint a clear picture of what to expect in the near term.
+
+Communicating software development progress and goals is historically tricky because of it's complex nature. Exact release dates are notoriously unreliable; if they are not, they force a particular style of development, forcing the team to make tradeoffs on scope and quality.
+
+To give an appropriate insight into our work, we are launching our new [🔴 LIVE roadmap](https://documen.so/launches) today:
+
+- A List of quarterly development and feature goals
+- That gets updated regularly (bi-weekly)
+- Has up-to-date insights from the team on where we stand
+
+**While there are some great features planned, one stands out: Single Player Mode!**
+
+## Announcing Documenso Singleplayer Mode
+
+<a href="https://www.producthunt.com/products/documenso" target="_blank">
+<figure>
+  <MdxNextImage
+    src="/blog/sp5.png"
+    width="1260"
+    height="630"
+  />
+
+  <figcaption className="text-center font-bold">
+   🚨 We are going back to Product Hunt! Are you ready, player one?
+  </figcaption>
+</figure>
+</a>
+
+Single Player Mode will be a free, loginless signing experience for single signers. If you hate creating an account to sign a single, once-in-a-while-document yourself as much as we do, we've got you. Our new free tier will accompany Singleplayer. While you don't HAVE to create an account to sign sth. quickly, you can. A free tier Documenso Account will give you the following:
+
+- A place to store all your sent and received Documenso-signed documents
+- Free forever
+- Unlimited recipients
+- 5 free signatures per month (for now, excluding third party types like QES)
+- The use of templates, as soon as we [release](https://documen.so/launches) them
+
+Singleplayer will launch in the first half of October, shortly after the release of 1.0, **[ON PRODUCT HUNT!](https://www.producthunt.com/products/documenso)** That's right, we are going back to Product Hunt to kick of this new phase of Documenso and you are invited to join us once again :)
+
+**[Subscribe on PH](https://www.producthunt.com/products/documenso)** to be notified when we launch.
+
+If you have any questions or comments, please reach out on [Twitter / X](https://twitter.com/eltimuro) (DM open) or [Discord](https://documen.so/discord).
+
+Best from Hamburg\
+Timur

apps/marketing/package.json

@@ -20,6 +20,7 @@
     "contentlayer": "^0.3.4",
     "framer-motion": "^10.12.8",
     "lucide-react": "^0.279.0",
+    "luxon": "^3.4.0",
     "micro": "^10.0.1",
     "next": "14.0.0",
     "next-auth": "4.24.3",

apps/marketing/src/app/(marketing)/blog/[post]/opengraph-image.tsx

@@ -41,7 +41,7 @@ export default async function BlogPostOpenGraphImage({ params }: BlogPostOpenGra
 
   return new ImageResponse(
     (
-      <div tw="relative h-full w-full flex flex-col items-center justify-center text-center">
+      <div tw="relative h-full w-full flex flex-col items-center justify-center text-center bg-white">
         {/* @ts-expect-error Lack of typing from ImageResponse */}
         <img src={backgroundImage} alt="og-background" tw="absolute inset-0 w-full h-full" />
 

apps/marketing/src/app/(marketing)/open/bar-metrics.tsx

@@ -40,9 +40,9 @@ export const BarMetric = <T extends Record<string, Record<keyof T[string], unkno
         <span>{extraInfo}</span>
       </div>
 
-      <div className="border-border mt-2.5 flex flex-1 items-center justify-center rounded-2xl border pr-2 shadow-sm hover:shadow">
+      <div className="border-border mt-2.5 flex flex-1 items-center justify-center rounded-2xl border p-6 pl-2 pt-12 shadow-sm hover:shadow">
         <ResponsiveContainer width="100%" height={chartHeight}>
-          <BarChart data={formattedData} margin={{ top: 30, right: 20 }}>
+          <BarChart data={formattedData}>
             <XAxis dataKey="month" />
             <YAxis />
             <Tooltip
@@ -55,7 +55,13 @@ export const BarMetric = <T extends Record<string, Record<keyof T[string], unkno
               formatter={(value) => [Number(value), label]}
               cursor={{ fill: 'hsl(var(--primary) / 10%)' }}
             />
-            <Bar dataKey={metricKey as string} fill="hsl(var(--primary))" label={label} />{' '}
+            <Bar
+              dataKey={metricKey as string}
+              maxBarSize={60}
+              fill="hsl(var(--primary))"
+              label={label}
+              radius={[4, 4, 0, 0]}
+            />
           </BarChart>
         </ResponsiveContainer>
       </div>

apps/marketing/src/app/(marketing)/open/funding-raised.tsx

@@ -21,7 +21,7 @@ export const FundingRaised = ({ className, data, ...props }: FundingRaisedProps)
     <div className={cn('flex flex-col', className)} {...props}>
       <h3 className="px-4 text-lg font-semibold">Total Funding Raised</h3>
 
-      <div className="border-border mt-2.5 flex flex-1 flex-col items-center justify-center rounded-2xl border p-4 shadow-sm hover:shadow">
+      <div className="border-border mt-2.5 flex flex-1 flex-col items-center justify-center rounded-2xl border p-6 pl-2 pt-12 shadow-sm hover:shadow">
         <ResponsiveContainer width="100%" height={400}>
           <BarChart data={formattedData} margin={{ top: 40, right: 40, bottom: 20, left: 40 }}>
             <XAxis dataKey="date" />
@@ -51,7 +51,13 @@ export const FundingRaised = ({ className, data, ...props }: FundingRaisedProps)
               ]}
               cursor={{ fill: 'hsl(var(--primary) / 10%)' }}
             />
-            <Bar dataKey="amount" fill="hsl(var(--primary))" label="Amount Raised" />
+            <Bar
+              dataKey="amount"
+              fill="hsl(var(--primary))"
+              label="Amount Raised"
+              maxBarSize={60}
+              radius={[4, 4, 0, 0]}
+            />
           </BarChart>
         </ResponsiveContainer>
       </div>

apps/marketing/src/app/(marketing)/open/monthly-new-users-chart.tsx

@@ -0,0 +1,51 @@
+'use client';
+
+import { DateTime } from 'luxon';
+import { Bar, BarChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
+
+import { GetUserMonthlyGrowthResult } from '@documenso/lib/server-only/user/get-user-monthly-growth';
+import { cn } from '@documenso/ui/lib/utils';
+
+export type MonthlyNewUsersChartProps = {
+  className?: string;
+  data: GetUserMonthlyGrowthResult;
+};
+
+export const MonthlyNewUsersChart = ({ className, data }: MonthlyNewUsersChartProps) => {
+  const formattedData = [...data].reverse().map(({ month, count }) => {
+    return {
+      month: DateTime.fromFormat(month, 'yyyy-MM').toFormat('LLL'),
+      count: Number(count),
+    };
+  });
+
+  return (
+    <div className={cn('flex flex-col', className)}>
+      <div className="flex items-center px-4">
+        <h3 className="text-lg font-semibold">Monthly New Users</h3>
+      </div>
+
+      <div className="border-border mt-2.5 flex flex-1 items-center justify-center rounded-2xl border p-6 pl-2 pt-12 shadow-sm hover:shadow">
+        <ResponsiveContainer width="100%" height={400}>
+          <BarChart data={formattedData}>
+            <XAxis dataKey="month" />
+            <YAxis />
+
+            <Tooltip
+              formatter={(value) => [Number(value).toLocaleString('en-US'), 'New Users']}
+              cursor={{ fill: 'hsl(var(--primary) / 10%)' }}
+            />
+
+            <Bar
+              dataKey="count"
+              fill="hsl(var(--primary))"
+              radius={[4, 4, 0, 0]}
+              maxBarSize={60}
+              label="New Users"
+            />
+          </BarChart>
+        </ResponsiveContainer>
+      </div>
+    </div>
+  );
+};

apps/marketing/src/app/(marketing)/open/monthly-total-users-chart.tsx

@@ -0,0 +1,51 @@
+'use client';
+
+import { DateTime } from 'luxon';
+import { Bar, BarChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
+
+import { GetUserMonthlyGrowthResult } from '@documenso/lib/server-only/user/get-user-monthly-growth';
+import { cn } from '@documenso/ui/lib/utils';
+
+export type MonthlyTotalUsersChartProps = {
+  className?: string;
+  data: GetUserMonthlyGrowthResult;
+};
+
+export const MonthlyTotalUsersChart = ({ className, data }: MonthlyTotalUsersChartProps) => {
+  const formattedData = [...data].reverse().map(({ month, cume_count: count }) => {
+    return {
+      month: DateTime.fromFormat(month, 'yyyy-MM').toFormat('LLL'),
+      count: Number(count),
+    };
+  });
+
+  return (
+    <div className={cn('flex flex-col', className)}>
+      <div className="flex items-center px-4">
+        <h3 className="text-lg font-semibold">Monthly Total Users</h3>
+      </div>
+
+      <div className="border-border mt-2.5 flex flex-1 items-center justify-center rounded-2xl border p-6 pl-2 pt-12 shadow-sm hover:shadow">
+        <ResponsiveContainer width="100%" height={400}>
+          <BarChart data={formattedData}>
+            <XAxis dataKey="month" />
+            <YAxis />
+
+            <Tooltip
+              formatter={(value) => [Number(value).toLocaleString('en-US'), 'Total Users']}
+              cursor={{ fill: 'hsl(var(--primary) / 10%)' }}
+            />
+
+            <Bar
+              dataKey="count"
+              fill="hsl(var(--primary))"
+              radius={[4, 4, 0, 0]}
+              maxBarSize={60}
+              label="Total Users"
+            />
+          </BarChart>
+        </ResponsiveContainer>
+      </div>
+    </div>
+  );
+};

apps/marketing/src/app/(marketing)/open/page.tsx

@@ -1,5 +1,7 @@
 import { z } from 'zod';
 
+import { getUserMonthlyGrowth } from '@documenso/lib/server-only/user/get-user-monthly-growth';
+
 import { FUNDING_RAISED } from '~/app/(marketing)/open/data';
 import { MetricCard } from '~/app/(marketing)/open/metric-card';
 import { SalaryBands } from '~/app/(marketing)/open/salary-bands';
@@ -7,11 +9,15 @@ import { SalaryBands } from '~/app/(marketing)/open/salary-bands';
 import { BarMetric } from './bar-metrics';
 import { CapTable } from './cap-table';
 import { FundingRaised } from './funding-raised';
+import { MonthlyNewUsersChart } from './monthly-new-users-chart';
+import { MonthlyTotalUsersChart } from './monthly-total-users-chart';
 import { TeamMembers } from './team-members';
 import { OpenPageTooltip } from './tooltip';
 
 export const revalidate = 3600;
 
+export const dynamic = 'force-dynamic';
+
 const ZGithubStatsResponse = z.object({
   stargazers_count: z.number(),
   forks_count: z.number(),
@@ -43,14 +49,20 @@ export type StargazersType = z.infer<typeof ZStargazersLiveResponse>;
 export type EarlyAdoptersType = z.infer<typeof ZEarlyAdoptersResponse>;
 
 export default async function OpenPage() {
+  const GITHUB_HEADERS: Record<string, string> = {
+    accept: 'application/vnd.github.v3+json',
+  };
+
+  if (process.env.NEXT_PRIVATE_GITHUB_TOKEN) {
+    GITHUB_HEADERS.authorization = `Bearer ${process.env.NEXT_PRIVATE_GITHUB_TOKEN}`;
+  }
+
   const {
     forks_count: forksCount,
     open_issues: openIssues,
     stargazers_count: stargazersCount,
   } = await fetch('https://api.github.com/repos/documenso/documenso', {
-    headers: {
-      accept: 'application/vnd.github.v3+json',
-    },
+    headers: GITHUB_HEADERS,
   })
     .then(async (res) => res.json())
     .then((res) => ZGithubStatsResponse.parse(res));
@@ -58,9 +70,7 @@ export default async function OpenPage() {
   const { total_count: mergedPullRequests } = await fetch(
     'https://api.github.com/search/issues?q=repo:documenso/documenso/+is:pr+merged:>=2010-01-01&page=0&per_page=1',
     {
-      headers: {
-        accept: 'application/vnd.github.v3+json',
-      },
+      headers: GITHUB_HEADERS,
     },
   )
     .then(async (res) => res.json())
@@ -82,6 +92,8 @@ export default async function OpenPage() {
     .then(async (res) => res.json())
     .then((res) => ZEarlyAdoptersResponse.parse(res));
 
+  const MONTHLY_USERS = await getUserMonthlyGrowth();
+
   return (
     <div className="mx-auto mt-6 max-w-screen-lg sm:mt-12">
       <div className="flex flex-col items-center justify-center">
@@ -122,7 +134,7 @@ export default async function OpenPage() {
 
         <TeamMembers className="col-span-12" />
 
-        <SalaryBands className="col-span-12 lg:col-span-6" />
+        <SalaryBands className="col-span-12" />
 
         <FundingRaised data={FUNDING_RAISED} className="col-span-12 lg:col-span-6" />
 
@@ -172,6 +184,9 @@ export default async function OpenPage() {
           className="col-span-12 lg:col-span-6"
         />
 
+        <MonthlyTotalUsersChart data={MONTHLY_USERS} className="col-span-12 lg:col-span-6" />
+        <MonthlyNewUsersChart data={MONTHLY_USERS} className="col-span-12 lg:col-span-6" />
+
         <div className="col-span-12 mt-12 flex flex-col items-center justify-center">
           <h2 className="text-2xl font-bold">Where's the rest?</h2>
 

apps/marketing/src/app/(marketing)/open/tooltip.tsx

@@ -23,8 +23,8 @@ export function OpenPageTooltip() {
             <path
               d="M7.49991 0.876892C3.84222 0.876892 0.877075 3.84204 0.877075 7.49972C0.877075 11.1574 3.84222 14.1226 7.49991 14.1226C11.1576 14.1226 14.1227 11.1574 14.1227 7.49972C14.1227 3.84204 11.1576 0.876892 7.49991 0.876892ZM1.82707 7.49972C1.82707 4.36671 4.36689 1.82689 7.49991 1.82689C10.6329 1.82689 13.1727 4.36671 13.1727 7.49972C13.1727 10.6327 10.6329 13.1726 7.49991 13.1726C4.36689 13.1726 1.82707 10.6327 1.82707 7.49972ZM8.24992 4.49999C8.24992 4.9142 7.91413 5.24999 7.49992 5.24999C7.08571 5.24999 6.74992 4.9142 6.74992 4.49999C6.74992 4.08577 7.08571 3.74999 7.49992 3.74999C7.91413 3.74999 8.24992 4.08577 8.24992 4.49999ZM6.00003 5.99999H6.50003H7.50003C7.77618 5.99999 8.00003 6.22384 8.00003 6.49999V9.99999H8.50003H9.00003V11H8.50003H7.50003H6.50003H6.00003V9.99999H6.50003H7.00003V6.99999H6.50003H6.00003V5.99999Z"
               fill="currentColor"
-              fill-rule="evenodd"
-              clip-rule="evenodd"
+              fillRule="evenodd"
+              clipRule="evenodd"
             ></path>
           </svg>
         </TooltipTrigger>

apps/marketing/src/app/(marketing)/pricing/page.tsx

@@ -117,10 +117,10 @@ export default function PricingPage() {
               and join our{' '}
               <Link
                 className="text-documenso-700 font-bold"
-                href="https://join.slack.com/t/documenso/shared_invite/zt-1vibm8txi-DqsDFtdp44Hn2H5lc~RpPQ"
+                href="https://documen.so/discord"
                 target="_blank"
               >
-                Slack Community
+                Discord Community
               </Link>{' '}
               to keep up to date, on what the current priorities are. In any case, we are an open
               community and welcome all input, technical and non-technical ❤️
@@ -168,10 +168,10 @@ export default function PricingPage() {
               or{' '}
               <a
                 className="text-documenso-700 font-bold"
-                href="https://join.slack.com/t/documenso/shared_invite/zt-1vibm8txi-DqsDFtdp44Hn2H5lc~RpPQ"
+                href="https://documen.so/discord"
                 target="_blank"
               >
-                in our Slack-Support-Channel
+                in our Discord-Support-Channel
               </a>{' '}
               please message either Lucas or Timur to get added to the channel if you are not
               already a member.

apps/marketing/src/components/(marketing)/single-player-mode/create-single-player-document.action.ts

@@ -14,6 +14,7 @@ import { FROM_ADDRESS, FROM_NAME, SERVICE_USER_EMAIL } from '@documenso/lib/cons
 import { insertFieldInPDF } from '@documenso/lib/server-only/pdf/insert-field-in-pdf';
 import { alphaid } from '@documenso/lib/universal/id';
 import { getFile } from '@documenso/lib/universal/upload/get-file';
+import { putFile } from '@documenso/lib/universal/upload/put-file';
 import { prisma } from '@documenso/prisma';
 import {
   DocumentDataType,
@@ -24,6 +25,7 @@ import {
   SendStatus,
   SigningStatus,
 } from '@documenso/prisma/client';
+import { signPdf } from '@documenso/signing';
 
 const ZCreateSinglePlayerDocumentSchema = z.object({
   documentData: z.object({
@@ -97,11 +99,13 @@ export const createSinglePlayerDocument = async (
     });
   }
 
-  const pdfBytes = await doc.save();
+  const unsignedPdfBytes = await doc.save();
 
-  const documentToken = await prisma.$transaction(
+  const signedPdfBuffer = await signPdf({ pdf: Buffer.from(unsignedPdfBytes) });
+
+  const { token } = await prisma.$transaction(
     async (tx) => {
-      const documentToken = alphaid();
+      const token = alphaid();
 
       // Fetch service user who will be the owner of the document.
       const serviceUser = await tx.user.findFirstOrThrow({
@@ -110,14 +114,10 @@ export const createSinglePlayerDocument = async (
         },
       });
 
-      const documentDataBytes = Buffer.from(pdfBytes).toString('base64');
-
-      const { id: documentDataId } = await tx.documentData.create({
-        data: {
-          type: DocumentDataType.BYTES_64,
-          data: documentDataBytes,
-          initialData: documentDataBytes,
-        },
+      const { id: documentDataId } = await putFile({
+        name: `${documentName}.pdf`,
+        type: 'application/pdf',
+        arrayBuffer: async () => Promise.resolve(signedPdfBuffer),
       });
 
       // Create document.
@@ -137,7 +137,7 @@ export const createSinglePlayerDocument = async (
           documentId: document.id,
           name: signer.name,
           email: signer.email,
-          token: documentToken,
+          token,
           signedAt: createdAt,
           readStatus: ReadStatus.OPENED,
           signingStatus: SigningStatus.SIGNED,
@@ -169,7 +169,7 @@ export const createSinglePlayerDocument = async (
         }),
       );
 
-      return documentToken;
+      return { document, token };
     },
     {
       maxWait: 5000,
@@ -195,10 +195,10 @@ export const createSinglePlayerDocument = async (
     subject: 'Document signed',
     html: render(template),
     text: render(template, { plainText: true }),
-    attachments: [{ content: Buffer.from(pdfBytes), filename: documentName }],
+    attachments: [{ content: signedPdfBuffer, filename: documentName }],
   });
 
-  return documentToken;
+  return token;
 };
 
 /**

apps/marketing/src/components/(marketing)/widget.tsx

@@ -226,7 +226,7 @@ export const Widget = ({ className, children, ...props }: WidgetProps) => {
                           type="button"
                           className="bg-primary h-full w-14 rounded"
                           disabled={!field.value || !!errors.email?.message}
-                          onClick={() => onNextStepClick()}
+                          onClick={() => step === 'EMAIL' && onNextStepClick()}
                         >
                           Next
                         </Button>
@@ -303,7 +303,10 @@ export const Widget = ({ className, children, ...props }: WidgetProps) => {
             <div className="mt-12 flex-1" />
 
             <div className="flex items-center justify-between">
-              <p className="text-muted-foreground text-xs">{stepsRemaining} step(s) until signed</p>
+              <p className="text-muted-foreground text-xs">
+                {isValid ? 'Ready for Signing' : `${stepsRemaining} step(s) until signed`}
+              </p>
+
               <p className="text-muted-foreground block text-xs md:hidden">Minimise contract</p>
             </div>
 
@@ -313,6 +316,7 @@ export const Widget = ({ className, children, ...props }: WidgetProps) => {
                   'w-1/3': stepsRemaining === 3,
                   'w-2/3': stepsRemaining === 2,
                   'w-11/12': stepsRemaining === 1,
+                  'w-full': isValid,
                 })}
               />
             </div>

apps/web/package.json

@@ -36,6 +36,7 @@
     "react-dom": "18.2.0",
     "react-dropzone": "^14.2.3",
     "react-hook-form": "^7.43.9",
+    "react-hotkeys-hook": "^4.4.1",
     "react-icons": "^4.11.0",
     "react-rnd": "^10.4.1",
     "sharp": "0.32.5",

apps/web/src/app/(dashboard)/documents/data-table-action-button.tsx

@@ -6,14 +6,9 @@ import { Edit, Pencil, Share } from 'lucide-react';
 import { useSession } from 'next-auth/react';
 import { match } from 'ts-pattern';
 
-import { useCopyShareLink } from '@documenso/lib/client-only/hooks/use-copy-share-link';
-import {
-  TOAST_DOCUMENT_SHARE_ERROR,
-  TOAST_DOCUMENT_SHARE_SUCCESS,
-} from '@documenso/lib/constants/toast';
 import { Document, DocumentStatus, Recipient, SigningStatus, User } from '@documenso/prisma/client';
+import { DocumentShareButton } from '@documenso/ui/components/document/document-share-button';
 import { Button } from '@documenso/ui/primitives/button';
-import { useToast } from '@documenso/ui/primitives/use-toast';
 
 export type DataTableActionButtonProps = {
   row: Document & {
@@ -25,13 +20,6 @@ export type DataTableActionButtonProps = {
 export const DataTableActionButton = ({ row }: DataTableActionButtonProps) => {
   const { data: session } = useSession();
 
-  const { toast } = useToast();
-
-  const { createAndCopyShareLink, isCopyingShareLink } = useCopyShareLink({
-    onSuccess: () => toast(TOAST_DOCUMENT_SHARE_SUCCESS),
-    onError: () => toast(TOAST_DOCUMENT_SHARE_ERROR),
-  });
-
   if (!session) {
     return null;
   }
@@ -70,18 +58,15 @@ export const DataTableActionButton = ({ row }: DataTableActionButtonProps) => {
       </Button>
     ))
     .otherwise(() => (
-      <Button
-        className="w-24"
-        loading={isCopyingShareLink}
-        onClick={async () =>
-          createAndCopyShareLink({
-            token: recipient?.token,
-            documentId: row.id,
-          })
-        }
-      >
-        {!isCopyingShareLink && <Share className="-ml-1 mr-2 h-4 w-4" />}
-        Share
-      </Button>
+      <DocumentShareButton
+        documentId={row.id}
+        token={recipient?.token}
+        trigger={({ loading }) => (
+          <Button className="w-24" loading={loading}>
+            {!loading && <Share className="-ml-1 mr-2 h-4 w-4" />}
+            Share
+          </Button>
+        )}
+      />
     ));
 };

apps/web/src/app/(dashboard)/documents/data-table-action-dropdown.tsx

@@ -18,15 +18,11 @@ import {
 } from 'lucide-react';
 import { useSession } from 'next-auth/react';
 
-import { useCopyShareLink } from '@documenso/lib/client-only/hooks/use-copy-share-link';
-import {
-  TOAST_DOCUMENT_SHARE_ERROR,
-  TOAST_DOCUMENT_SHARE_SUCCESS,
-} from '@documenso/lib/constants/toast';
 import { getFile } from '@documenso/lib/universal/upload/get-file';
 import { Document, DocumentStatus, Recipient, User } from '@documenso/prisma/client';
 import { DocumentWithData } from '@documenso/prisma/types/document-with-data';
 import { trpc as trpcClient } from '@documenso/trpc/client';
+import { DocumentShareButton } from '@documenso/ui/components/document/document-share-button';
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -34,9 +30,9 @@ import {
   DropdownMenuLabel,
   DropdownMenuTrigger,
 } from '@documenso/ui/primitives/dropdown-menu';
-import { useToast } from '@documenso/ui/primitives/use-toast';
 
 import { DeleteDraftDocumentDialog } from './delete-draft-document-dialog';
+import { DuplicateDocumentDialog } from './duplicate-document-dialog';
 
 export type DataTableActionDropdownProps = {
   row: Document & {
@@ -48,14 +44,8 @@ export type DataTableActionDropdownProps = {
 export const DataTableActionDropdown = ({ row }: DataTableActionDropdownProps) => {
   const { data: session } = useSession();
 
-  const { toast } = useToast();
-
-  const { createAndCopyShareLink, isCopyingShareLink } = useCopyShareLink({
-    onSuccess: () => toast(TOAST_DOCUMENT_SHARE_SUCCESS),
-    onError: () => toast(TOAST_DOCUMENT_SHARE_ERROR),
-  });
-
   const [isDeleteDialogOpen, setDeleteDialogOpen] = useState(false);
+  const [isDuplicateDialogOpen, setDuplicateDialogOpen] = useState(false);
 
   if (!session) {
     return null;
@@ -134,7 +124,7 @@ export const DataTableActionDropdown = ({ row }: DataTableActionDropdownProps) =
           Download
         </DropdownMenuItem>
 
-        <DropdownMenuItem disabled>
+        <DropdownMenuItem onClick={() => setDuplicateDialogOpen(true)}>
           <Copy className="mr-2 h-4 w-4" />
           Duplicate
         </DropdownMenuItem>
@@ -156,22 +146,18 @@ export const DataTableActionDropdown = ({ row }: DataTableActionDropdownProps) =
           Resend
         </DropdownMenuItem>
 
-        <DropdownMenuItem
-          disabled={isDraft}
-          onClick={async () =>
-            createAndCopyShareLink({
-              token: recipient?.token,
-              documentId: row.id,
-            })
-          }
-        >
-          {isCopyingShareLink ? (
-            <Loader className="mr-2 h-4 w-4" />
-          ) : (
-            <Share className="mr-2 h-4 w-4" />
+        <DocumentShareButton
+          documentId={row.id}
+          token={recipient?.token}
+          trigger={({ loading, disabled }) => (
+            <DropdownMenuItem disabled={disabled || isDraft} onSelect={(e) => e.preventDefault()}>
+              <div className="flex items-center">
+                {loading ? <Loader className="mr-2 h-4 w-4" /> : <Share className="mr-2 h-4 w-4" />}
+                Share
+              </div>
+            </DropdownMenuItem>
           )}
-          Share
-        </DropdownMenuItem>
+        />
       </DropdownMenuContent>
 
       {isDocumentDeletable && (
@@ -181,6 +167,13 @@ export const DataTableActionDropdown = ({ row }: DataTableActionDropdownProps) =
           onOpenChange={setDeleteDialogOpen}
         />
       )}
+      {isDuplicateDialogOpen && (
+        <DuplicateDocumentDialog
+          id={row.id}
+          open={isDuplicateDialogOpen}
+          onOpenChange={setDuplicateDialogOpen}
+        />
+      )}
     </DropdownMenu>
   );
 };

apps/web/src/app/(dashboard)/documents/duplicate-document-dialog.tsx

@@ -0,0 +1,110 @@
+import { useRouter } from 'next/navigation';
+
+import { trpc as trpcReact } from '@documenso/trpc/react';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@documenso/ui/primitives/dialog';
+import { LazyPDFViewer } from '@documenso/ui/primitives/lazy-pdf-viewer';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+type DuplicateDocumentDialogProps = {
+  id: number;
+  open: boolean;
+  onOpenChange: (_open: boolean) => void;
+};
+
+export const DuplicateDocumentDialog = ({
+  id,
+  open,
+  onOpenChange,
+}: DuplicateDocumentDialogProps) => {
+  const router = useRouter();
+  const { toast } = useToast();
+
+  const { data, isLoading } = trpcReact.document.getDocumentById.useQuery({
+    id,
+  });
+
+  const documentData = data?.documentData
+    ? {
+        ...data.documentData,
+        data: data.documentData.initialData,
+      }
+    : undefined;
+
+  const { mutateAsync: duplicateDocument, isLoading: isDuplicateLoading } =
+    trpcReact.document.duplicateDocument.useMutation({
+      onSuccess: (newId) => {
+        router.push(`/documents/${newId}`);
+        toast({
+          title: 'Document Duplicated',
+          description: 'Your document has been successfully duplicated.',
+          duration: 5000,
+        });
+
+        onOpenChange(false);
+      },
+    });
+
+  const onDuplicate = async () => {
+    try {
+      await duplicateDocument({ id });
+    } catch {
+      toast({
+        title: 'Something went wrong',
+        description: 'This document could not be duplicated at this time. Please try again.',
+        variant: 'destructive',
+        duration: 7500,
+      });
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={(value) => !isLoading && onOpenChange(value)}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Duplicate</DialogTitle>
+        </DialogHeader>
+        {!documentData || isLoading ? (
+          <div className="mx-auto -mt-4 flex w-full max-w-screen-xl flex-col px-4 md:px-8">
+            <h1 className="mt-4 grow-0 truncate text-2xl font-semibold md:text-3xl">
+              Loading Document...
+            </h1>
+          </div>
+        ) : (
+          <div className="p-2 [&>div]:h-[50vh] [&>div]:overflow-y-scroll  ">
+            <LazyPDFViewer key={data?.id} documentData={documentData} />
+          </div>
+        )}
+
+        <DialogFooter>
+          <div className="flex w-full flex-1 flex-nowrap gap-4">
+            <Button
+              type="button"
+              variant="secondary"
+              onClick={() => onOpenChange(false)}
+              className="flex-1"
+            >
+              Cancel
+            </Button>
+
+            <Button
+              type="button"
+              disabled={isDuplicateLoading || isLoading}
+              loading={isDuplicateLoading}
+              onClick={onDuplicate}
+              className="flex-1"
+            >
+              Duplicate
+            </Button>
+          </div>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};

apps/web/src/app/(dashboard)/documents/empty-state.tsx

@@ -14,13 +14,13 @@ export const EmptyDocumentState = ({ status }: EmptyDocumentProps) => {
     .with(ExtendedDocumentStatus.COMPLETED, () => ({
       title: 'Nothing to do',
       message:
-        'There are no completed documents yet. Documents that you have created or received that become completed will appear here later.',
+        'There are no completed documents yet. Documents that you have created or received will appear here once completed.',
       icon: CheckCircle2,
     }))
     .with(ExtendedDocumentStatus.DRAFT, () => ({
       title: 'No active drafts',
       message:
-        'There are no active drafts at then current moment. You can upload a document to start drafting.',
+        'There are no active drafts at the current moment. You can upload a document to start drafting.',
       icon: CheckCircle2,
     }))
     .with(ExtendedDocumentStatus.ALL, () => ({
@@ -32,7 +32,7 @@ export const EmptyDocumentState = ({ status }: EmptyDocumentProps) => {
     .otherwise(() => ({
       title: 'Nothing to do',
       message:
-        'All documents are currently actioned. Any new documents are sent or recieved they will start to appear here.',
+        'All documents have been processed. Any new documents that are sent or received will show here.',
       icon: CheckCircle2,
     }));
 

apps/web/src/app/(dashboard)/documents/page.tsx

@@ -8,7 +8,10 @@ import { ExtendedDocumentStatus } from '@documenso/prisma/types/extended-documen
 import { Tabs, TabsList, TabsTrigger } from '@documenso/ui/primitives/tabs';
 
 import { PeriodSelector } from '~/components/(dashboard)/period-selector/period-selector';
-import { PeriodSelectorValue } from '~/components/(dashboard)/period-selector/types';
+import {
+  PeriodSelectorValue,
+  isPeriodSelectorValue,
+} from '~/components/(dashboard)/period-selector/types';
 import { DocumentStatus } from '~/components/formatter/document-status';
 
 import { DocumentsDataTable } from './data-table';
@@ -32,7 +35,7 @@ export default async function DocumentsPage({ searchParams = {} }: DocumentsPage
   });
 
   const status = isExtendedDocumentStatus(searchParams.status) ? searchParams.status : 'ALL';
-  // const period = isPeriodSelectorValue(searchParams.period) ? searchParams.period : '';
+  const period = isPeriodSelectorValue(searchParams.period) ? searchParams.period : '';
   const page = Number(searchParams.page) || 1;
   const perPage = Number(searchParams.perPage) || 20;
 
@@ -45,6 +48,7 @@ export default async function DocumentsPage({ searchParams = {} }: DocumentsPage
     },
     page,
     perPage,
+    period,
   });
 
   const getTabHref = (value: typeof status) => {

apps/web/src/app/(dashboard)/settings/billing/create-billing-portal.action.ts

@@ -8,10 +8,13 @@ import { getPortalSession } from '@documenso/ee/server-only/stripe/get-portal-se
 import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-session';
 import { Stripe, stripe } from '@documenso/lib/server-only/stripe';
 import { getSubscriptionByUserId } from '@documenso/lib/server-only/subscription/get-subscription-by-user-id';
+import { getRuntimeEnv } from '@documenso/lib/universal/runtime-env/get-runtime-env';
 
 export const createBillingPortal = async () => {
   const { user } = await getRequiredServerComponentSession();
 
+  const { NEXT_PUBLIC_WEBAPP_URL } = getRuntimeEnv();
+
   const existingSubscription = await getSubscriptionByUserId({ userId: user.id });
 
   let stripeCustomer: Stripe.Customer | null = null;
@@ -43,6 +46,6 @@ export const createBillingPortal = async () => {
 
   return getPortalSession({
     customerId: stripeCustomer.id,
-    returnUrl: `${process.env.NEXT_PUBLIC_WEBAPP_URL}/settings/billing`,
+    returnUrl: `${NEXT_PUBLIC_WEBAPP_URL}/settings/billing`,
   });
 };

apps/web/src/app/(dashboard)/settings/billing/create-checkout.action.ts

@@ -10,6 +10,7 @@ import { getPortalSession } from '@documenso/ee/server-only/stripe/get-portal-se
 import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-session';
 import { Stripe } from '@documenso/lib/server-only/stripe';
 import { getSubscriptionByUserId } from '@documenso/lib/server-only/subscription/get-subscription-by-user-id';
+import { getRuntimeEnv } from '@documenso/lib/universal/runtime-env/get-runtime-env';
 
 export type CreateCheckoutOptions = {
   priceId: string;
@@ -18,6 +19,8 @@ export type CreateCheckoutOptions = {
 export const createCheckout = async ({ priceId }: CreateCheckoutOptions) => {
   const { user } = await getRequiredServerComponentSession();
 
+  const { NEXT_PUBLIC_WEBAPP_URL } = getRuntimeEnv();
+
   const existingSubscription = await getSubscriptionByUserId({ userId: user.id });
 
   let stripeCustomer: Stripe.Customer | null = null;
@@ -32,7 +35,7 @@ export const createCheckout = async ({ priceId }: CreateCheckoutOptions) => {
 
     return getPortalSession({
       customerId: stripeCustomer.id,
-      returnUrl: `${process.env.NEXT_PUBLIC_WEBAPP_URL}/settings/billing`,
+      returnUrl: `${NEXT_PUBLIC_WEBAPP_URL}/settings/billing`,
     });
   }
 
@@ -53,6 +56,6 @@ export const createCheckout = async ({ priceId }: CreateCheckoutOptions) => {
   return getCheckoutSession({
     customerId: stripeCustomer.id,
     priceId,
-    returnUrl: `${process.env.NEXT_PUBLIC_WEBAPP_URL}/settings/billing`,
+    returnUrl: `${NEXT_PUBLIC_WEBAPP_URL}/settings/billing`,
   });
 };

apps/web/src/app/(share)/share/[slug]/opengraph/route.tsx

@@ -56,7 +56,7 @@ export async function GET(_request: Request, { params: { slug } }: SharePageOpen
 
   return new ImageResponse(
     (
-      <div tw="relative flex h-full w-full">
+      <div tw="relative flex h-full w-full bg-white">
         {/* @ts-expect-error Lack of typing from ImageResponse */}
         <img src={shareFrameImage} alt="og-share-frame" tw="absolute inset-0 w-full h-full" />
 
@@ -149,6 +149,10 @@ export async function GET(_request: Request, { params: { slug } }: SharePageOpen
           weight: 600,
         },
       ],
+      headers: {
+        'Access-Control-Allow-Origin': '*',
+        'Access-Control-Allow-Methods': 'GET, OPTIONS',
+      },
     },
   );
 }

apps/web/src/app/(share)/share/[slug]/page.tsx

@@ -2,7 +2,8 @@ import { Metadata } from 'next';
 import { headers } from 'next/headers';
 import { redirect } from 'next/navigation';
 
-import { APP_BASE_URL } from '@documenso/lib/constants/app';
+import { appBaseUrl } from '@documenso/lib/constants/app';
+import { getRuntimeEnv } from '@documenso/lib/universal/runtime-env/get-runtime-env';
 
 type SharePageProps = {
   params: { slug: string };
@@ -16,12 +17,12 @@ export function generateMetadata({ params: { slug } }: SharePageProps) {
       title: 'Documenso - Join the open source signing revolution',
       description: 'I just signed with Documenso!',
       type: 'website',
-      images: [`${APP_BASE_URL}/share/${slug}/opengraph`],
+      images: [`${appBaseUrl()}/share/${slug}/opengraph`],
     },
     twitter: {
       site: '@documenso',
       card: 'summary_large_image',
-      images: [`${APP_BASE_URL}/share/${slug}/opengraph`],
+      images: [`${appBaseUrl()}/share/${slug}/opengraph`],
       description: 'I just signed with Documenso!',
     },
   } satisfies Metadata;
@@ -30,10 +31,12 @@ export function generateMetadata({ params: { slug } }: SharePageProps) {
 export default function SharePage() {
   const userAgent = headers().get('User-Agent') ?? '';
 
+  const { NEXT_PUBLIC_MARKETING_URL } = getRuntimeEnv();
+
   // https://stackoverflow.com/questions/47026171/how-to-detect-bots-for-open-graph-with-user-agent
   if (/bot|facebookexternalhit|WhatsApp|google|bing|duckduckbot|MetaInspector/i.test(userAgent)) {
     return null;
   }
 
-  redirect(process.env.NEXT_PUBLIC_MARKETING_URL ?? 'http://localhost:3001');
+  redirect(NEXT_PUBLIC_MARKETING_URL ?? 'http://localhost:3001');
 }

apps/web/src/app/(signing)/sign/[token]/page.tsx

@@ -56,7 +56,11 @@ export default async function SigningPage({ params: { token } }: SigningPageProp
   }
 
   return (
-    <SigningProvider email={recipient.email} fullName={recipient.name} signature={user?.signature}>
+    <SigningProvider
+      email={recipient.email}
+      fullName={user?.email === recipient.email ? user.name : recipient.name}
+      signature={user?.email === recipient.email ? user.signature : undefined}
+    >
       <div className="mx-auto w-full max-w-screen-xl">
         <h1 className="mt-4 truncate text-2xl font-semibold md:text-3xl" title={document.title}>
           {document.title}

apps/web/src/app/(unauthenticated)/forgot-password/page.tsx

@@ -5,7 +5,7 @@ import { ForgotPasswordForm } from '~/components/forms/forgot-password';
 export default function ForgotPasswordPage() {
   return (
     <div>
-      <h1 className="text-4xl font-semibold">Forgotten your password?</h1>
+      <h1 className="text-4xl font-semibold">Forgot your password?</h1>
 
       <p className="text-muted-foreground mt-2 text-sm">
         No worries, it happens! Enter your email and we'll email you a special link to reset your

apps/web/src/app/(unauthenticated)/signin/page.tsx

@@ -25,7 +25,7 @@ export default function SignInPage() {
           href="/forgot-password"
           className="text-muted-foreground text-sm duration-200 hover:opacity-70"
         >
-          Forgotten your password?
+          Forgot your password?
         </Link>
       </p>
     </div>

apps/web/src/app/layout.tsx

@@ -6,6 +6,8 @@ import { FeatureFlagProvider } from '@documenso/lib/client-only/providers/featur
 import { LocaleProvider } from '@documenso/lib/client-only/providers/locale';
 import { getServerComponentAllFlags } from '@documenso/lib/server-only/feature-flags/get-server-component-feature-flag';
 import { getLocale } from '@documenso/lib/server-only/headers/get-locale';
+import { RuntimeEnvProvider } from '@documenso/lib/universal/runtime-env';
+import { getRuntimeEnv } from '@documenso/lib/universal/runtime-env/get-runtime-env';
 import { TrpcProvider } from '@documenso/trpc/react';
 import { cn } from '@documenso/ui/lib/utils';
 import { Toaster } from '@documenso/ui/primitives/toaster';
@@ -17,31 +19,39 @@ import { PostHogPageview } from '~/providers/posthog';
 
 import './globals.css';
 
+export const dynamic = 'force-dynamic';
+
 const fontInter = Inter({ subsets: ['latin'], variable: '--font-sans' });
 const fontCaveat = Caveat({ subsets: ['latin'], variable: '--font-signature' });
 
-export const metadata = {
-  title: 'Documenso - The Open Source DocuSign Alternative',
-  description:
-    'Join Documenso, the open signing infrastructure, and get a 10x better signing experience. Pricing starts at $30/mo. forever! Sign in now and enjoy a faster, smarter, and more beautiful document signing process. Integrates with your favorite tools, customizable, and expandable. Support our mission and become a part of our open-source community.',
-  keywords:
-    'Documenso, open source, DocuSign alternative, document signing, open signing infrastructure, open-source community, fast signing, beautiful signing, smart templates',
-  authors: { name: 'Documenso, Inc.' },
-  robots: 'index, follow',
-  openGraph: {
+// We do this so NEXT_PUBLIC variables will be evaluated at runtime.
+// eslint-disable-next-line @typescript-eslint/require-await
+export const generateMetadata = async () => {
+  const { NEXT_PUBLIC_WEBAPP_URL } = getRuntimeEnv();
+
+  return {
     title: 'Documenso - The Open Source DocuSign Alternative',
     description:
       'Join Documenso, the open signing infrastructure, and get a 10x better signing experience. Pricing starts at $30/mo. forever! Sign in now and enjoy a faster, smarter, and more beautiful document signing process. Integrates with your favorite tools, customizable, and expandable. Support our mission and become a part of our open-source community.',
-    type: 'website',
-    images: [`${process.env.NEXT_PUBLIC_WEBAPP_URL}/opengraph-image.jpg`],
-  },
-  twitter: {
-    site: '@documenso',
-    card: 'summary_large_image',
-    images: [`${process.env.NEXT_PUBLIC_WEBAPP_URL}/opengraph-image.jpg`],
-    description:
-      'Join Documenso, the open signing infrastructure, and get a 10x better signing experience. Pricing starts at $30/mo. forever! Sign in now and enjoy a faster, smarter, and more beautiful document signing process. Integrates with your favorite tools, customizable, and expandable. Support our mission and become a part of our open-source community.',
-  },
+    keywords:
+      'Documenso, open source, DocuSign alternative, document signing, open signing infrastructure, open-source community, fast signing, beautiful signing, smart templates',
+    authors: { name: 'Documenso, Inc.' },
+    robots: 'index, follow',
+    openGraph: {
+      title: 'Documenso - The Open Source DocuSign Alternative',
+      description:
+        'Join Documenso, the open signing infrastructure, and get a 10x better signing experience. Pricing starts at $30/mo. forever! Sign in now and enjoy a faster, smarter, and more beautiful document signing process. Integrates with your favorite tools, customizable, and expandable. Support our mission and become a part of our open-source community.',
+      type: 'website',
+      images: [`${NEXT_PUBLIC_WEBAPP_URL}/opengraph-image.jpg`],
+    },
+    twitter: {
+      site: '@documenso',
+      card: 'summary_large_image',
+      images: [`${NEXT_PUBLIC_WEBAPP_URL}/opengraph-image.jpg`],
+      description:
+        'Join Documenso, the open signing infrastructure, and get a 10x better signing experience. Pricing starts at $30/mo. forever! Sign in now and enjoy a faster, smarter, and more beautiful document signing process. Integrates with your favorite tools, customizable, and expandable. Support our mission and become a part of our open-source community.',
+    },
+  };
 };
 
 export default async function RootLayout({ children }: { children: React.ReactNode }) {
@@ -67,19 +77,21 @@ export default async function RootLayout({ children }: { children: React.ReactNo
       </Suspense>
 
       <body>
-        <LocaleProvider locale={locale}>
-          <FeatureFlagProvider initialFlags={flags}>
-            <PlausibleProvider>
-              <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
-                <TooltipProvider>
-                  <TrpcProvider>{children}</TrpcProvider>
-                </TooltipProvider>
-              </ThemeProvider>
-            </PlausibleProvider>
+        <RuntimeEnvProvider>
+          <LocaleProvider locale={locale}>
+            <FeatureFlagProvider initialFlags={flags}>
+              <PlausibleProvider>
+                <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
+                  <TooltipProvider>
+                    <TrpcProvider>{children}</TrpcProvider>
+                  </TooltipProvider>
+                </ThemeProvider>
+              </PlausibleProvider>
 
-            <Toaster />
-          </FeatureFlagProvider>
-        </LocaleProvider>
+              <Toaster />
+            </FeatureFlagProvider>
+          </LocaleProvider>
+        </RuntimeEnvProvider>
       </body>
     </html>
   );

apps/web/src/components/(dashboard)/common/command-menu.tsx

@@ -0,0 +1,175 @@
+'use client';
+
+import { useCallback, useMemo, useState } from 'react';
+
+import { useRouter } from 'next/navigation';
+
+import { Monitor, Moon, Sun } from 'lucide-react';
+import { useTheme } from 'next-themes';
+import { useHotkeys } from 'react-hotkeys-hook';
+
+import {
+  DOCUMENTS_PAGE_SHORTCUT,
+  SETTINGS_PAGE_SHORTCUT,
+} from '@documenso/lib/constants/keyboard-shortcuts';
+import {
+  CommandDialog,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandShortcut,
+} from '@documenso/ui/primitives/command';
+
+const DOCUMENTS_PAGES = [
+  {
+    label: 'All documents',
+    path: '/documents?status=ALL',
+    shortcut: DOCUMENTS_PAGE_SHORTCUT.replace('+', ''),
+  },
+  { label: 'Draft documents', path: '/documents?status=DRAFT' },
+  { label: 'Completed documents', path: '/documents?status=COMPLETED' },
+  { label: 'Pending documents', path: '/documents?status=PENDING' },
+  { label: 'Inbox documents', path: '/documents?status=INBOX' },
+];
+
+const SETTINGS_PAGES = [
+  { label: 'Settings', path: '/settings', shortcut: SETTINGS_PAGE_SHORTCUT.replace('+', '') },
+  { label: 'Profile', path: '/settings/profile' },
+  { label: 'Password', path: '/settings/password' },
+];
+
+export type CommandMenuProps = {
+  open?: boolean;
+  onOpenChange?: (_open: boolean) => void;
+};
+
+export function CommandMenu({ open, onOpenChange }: CommandMenuProps) {
+  const { setTheme } = useTheme();
+  const router = useRouter();
+
+  const [isOpen, setIsOpen] = useState(() => open ?? false);
+  const [search, setSearch] = useState('');
+  const [pages, setPages] = useState<string[]>([]);
+
+  const currentPage = pages[pages.length - 1];
+
+  const toggleOpen = () => {
+    setIsOpen((isOpen) => !isOpen);
+    onOpenChange?.(!isOpen);
+
+    if (isOpen) {
+      setPages([]);
+      setSearch('');
+    }
+  };
+
+  const setOpen = useCallback(
+    (open: boolean) => {
+      setIsOpen(open);
+      onOpenChange?.(open);
+
+      if (!open) {
+        setPages([]);
+        setSearch('');
+      }
+    },
+    [onOpenChange],
+  );
+
+  const push = useCallback(
+    (path: string) => {
+      router.push(path);
+      setOpen(false);
+    },
+    [router, setOpen],
+  );
+
+  const addPage = (page: string) => {
+    setPages((pages) => [...pages, page]);
+    setSearch('');
+  };
+
+  const goToSettings = useCallback(() => push(SETTINGS_PAGES[0].path), [push]);
+  const goToDocuments = useCallback(() => push(DOCUMENTS_PAGES[0].path), [push]);
+
+  useHotkeys(['ctrl+k', 'meta+k'], toggleOpen);
+  useHotkeys(SETTINGS_PAGE_SHORTCUT, goToSettings);
+  useHotkeys(DOCUMENTS_PAGE_SHORTCUT, goToDocuments);
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    // Escape goes to previous page
+    // Backspace goes to previous page when search is empty
+    if (e.key === 'Escape' || (e.key === 'Backspace' && !search)) {
+      e.preventDefault();
+
+      if (currentPage === undefined) {
+        setOpen(false);
+      }
+
+      setPages((pages) => pages.slice(0, -1));
+    }
+  };
+
+  return (
+    <CommandDialog commandProps={{ onKeyDown: handleKeyDown }} open={open} onOpenChange={setOpen}>
+      <CommandInput
+        value={search}
+        onValueChange={setSearch}
+        placeholder="Type a command or search..."
+      />
+
+      <CommandList>
+        <CommandEmpty>No results found.</CommandEmpty>
+        {!currentPage && (
+          <>
+            <CommandGroup heading="Documents">
+              <Commands push={push} pages={DOCUMENTS_PAGES} />
+            </CommandGroup>
+            <CommandGroup heading="Settings">
+              <Commands push={push} pages={SETTINGS_PAGES} />
+            </CommandGroup>
+            <CommandGroup heading="Preferences">
+              <CommandItem onSelect={() => addPage('theme')}>Change theme</CommandItem>
+            </CommandGroup>
+          </>
+        )}
+        {currentPage === 'theme' && <ThemeCommands setTheme={setTheme} />}
+      </CommandList>
+    </CommandDialog>
+  );
+}
+
+const Commands = ({
+  push,
+  pages,
+}: {
+  push: (_path: string) => void;
+  pages: { label: string; path: string; shortcut?: string }[];
+}) => {
+  return pages.map((page) => (
+    <CommandItem key={page.path} onSelect={() => push(page.path)}>
+      {page.label}
+      {page.shortcut && <CommandShortcut>{page.shortcut}</CommandShortcut>}
+    </CommandItem>
+  ));
+};
+
+const ThemeCommands = ({ setTheme }: { setTheme: (_theme: string) => void }) => {
+  const THEMES = useMemo(
+    () => [
+      { label: 'Light Mode', theme: 'light', icon: Sun },
+      { label: 'Dark Mode', theme: 'dark', icon: Moon },
+      { label: 'System Theme', theme: 'system', icon: Monitor },
+    ],
+    [],
+  );
+
+  return THEMES.map((theme) => (
+    <CommandItem key={theme.theme} onSelect={() => setTheme(theme.theme)}>
+      <theme.icon className="mr-2" />
+      {theme.label}
+    </CommandItem>
+  ));
+};

apps/web/src/components/(dashboard)/layout/desktop-nav.tsx

@@ -1,16 +1,44 @@
 'use client';
 
-import { HTMLAttributes } from 'react';
+import { HTMLAttributes, useState } from 'react';
+
+import { Search } from 'lucide-react';
 
 import { cn } from '@documenso/ui/lib/utils';
+import { Button } from '@documenso/ui/primitives/button';
+
+import { CommandMenu } from '../common/command-menu';
 
 export type DesktopNavProps = HTMLAttributes<HTMLDivElement>;
 
 export const DesktopNav = ({ className, ...props }: DesktopNavProps) => {
   // const pathname = usePathname();
+  const [open, setOpen] = useState(false);
 
   return (
-    <div className={cn('ml-8 hidden flex-1 gap-x-6 md:flex', className)} {...props}>
+    <div
+      className={cn('ml-8 hidden flex-1 gap-x-6 md:flex md:justify-center', className)}
+      {...props}
+    >
+      <CommandMenu open={open} onOpenChange={setOpen} />
+
+      <Button
+        variant="outline"
+        className="text-muted-foreground flex w-96 items-center justify-between rounded-lg"
+        onClick={() => setOpen((open) => !open)}
+      >
+        <div className="flex items-center">
+          <Search className="mr-2 h-5 w-5" />
+          Search
+        </div>
+
+        <div>
+          <div className="text-muted-foreground bg-muted rounded-md px-1.5 py-0.5 font-mono text-xs">
+            Ctrl+K
+          </div>
+        </div>
+      </Button>
+
       {/* We have no other subpaths rn */}
       {/* <Link
         href="/documents"

apps/web/src/helpers/get-asset-buffer.ts

@@ -1,3 +1,5 @@
+import { getRuntimeEnv } from '@documenso/lib/universal/runtime-env/get-runtime-env';
+
 /**
  * getAssetBuffer is used to retrieve array buffers for various assets
  * that are hosted in the `public` folder.
@@ -8,7 +10,9 @@
  * @param path The path to the asset, relative to the `public` folder.
  */
 export const getAssetBuffer = async (path: string) => {
-  const baseUrl = process.env.NEXT_PUBLIC_WEBAPP_URL || 'http://localhost:3000';
+  const { NEXT_PUBLIC_WEBAPP_URL } = getRuntimeEnv();
+
+  const baseUrl = NEXT_PUBLIC_WEBAPP_URL || 'http://localhost:3000';
 
   return fetch(new URL(path, baseUrl)).then(async (res) => res.arrayBuffer());
 };

package-lock.json

@@ -10,6 +10,7 @@
         "packages/*"
       ],
       "dependencies": {
+        "react-hotkeys-hook": "^4.4.1",
         "recharts": "^2.7.2"
       },
       "devDependencies": {
@@ -43,6 +44,7 @@
         "contentlayer": "^0.3.4",
         "framer-motion": "^10.12.8",
         "lucide-react": "^0.279.0",
+        "luxon": "^3.4.0",
         "micro": "^10.0.1",
         "next": "14.0.0",
         "next-auth": "4.24.3",
@@ -101,6 +103,7 @@
         "react-dom": "18.2.0",
         "react-dropzone": "^14.2.3",
         "react-hook-form": "^7.43.9",
+        "react-hotkeys-hook": "^4.4.1",
         "react-icons": "^4.11.0",
         "react-rnd": "^10.4.1",
         "sharp": "0.32.5",
@@ -423,6 +426,17 @@
         "node": ">=14.0.0"
       }
     },
+    "node_modules/@aws-sdk/cloudfront-signer": {
+      "version": "3.433.0",
+      "resolved": "https://registry.npmjs.org/@aws-sdk/cloudfront-signer/-/cloudfront-signer-3.433.0.tgz",
+      "integrity": "sha512-I86TTLVSAFb0nMVPWxNipVwkmf0dw0FEchoA1sJx5j9YPyBhc0gzg3Af1Qkzzty+Pkwwc+CtPbqHkYxbXI1tFg==",
+      "dependencies": {
+        "@smithy/url-parser": "^2.0.12"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
     "node_modules/@aws-sdk/credential-provider-env": {
       "version": "3.428.0",
       "resolved": "https://registry.npmjs.org/@aws-sdk/credential-provider-env/-/credential-provider-env-3.428.0.tgz",
@@ -1659,7 +1673,7 @@
       "version": "0.8.1",
       "resolved": "https://registry.npmjs.org/@cspotcode/source-map-support/-/source-map-support-0.8.1.tgz",
       "integrity": "sha512-IchNf6dN4tHoMFIn/7OE8LWZ19Y6q/67Bmf6vnGREv8RSbBVb9LPJxEcnwrcwX6ixSvaiGoomAUvu4YSxXrVgw==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "@jridgewell/trace-mapping": "0.3.9"
       },
@@ -5730,11 +5744,11 @@
       }
     },
     "node_modules/@smithy/querystring-parser": {
-      "version": "2.0.11",
-      "resolved": "https://registry.npmjs.org/@smithy/querystring-parser/-/querystring-parser-2.0.11.tgz",
-      "integrity": "sha512-YXe7jhi7s3dQ0Fu9dLoY/gLu6NCyy8tBWJL/v2c9i7/RLpHgKT+uT96/OqZkHizCJ4kr0ZD46tzMjql/o60KLg==",
+      "version": "2.0.12",
+      "resolved": "https://registry.npmjs.org/@smithy/querystring-parser/-/querystring-parser-2.0.12.tgz",
+      "integrity": "sha512-fytyTcXaMzPBuNtPlhj5v6dbl4bJAnwKZFyyItAGt4Tgm9HFPZNo7a9r1SKPr/qdxUEBzvL9Rh+B9SkTX3kFxg==",
       "dependencies": {
-        "@smithy/types": "^2.3.5",
+        "@smithy/types": "^2.4.0",
         "tslib": "^2.5.0"
       },
       "engines": {
@@ -5797,9 +5811,9 @@
       }
     },
     "node_modules/@smithy/types": {
-      "version": "2.3.5",
-      "resolved": "https://registry.npmjs.org/@smithy/types/-/types-2.3.5.tgz",
-      "integrity": "sha512-ehyDt8M9hehyxrLQGoA1BGPou8Js1Ocoh5M0ngDhJMqbFmNK5N6Xhr9/ZExWkyIW8XcGkiMPq3ZUEE0ScrhbuQ==",
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/@smithy/types/-/types-2.4.0.tgz",
+      "integrity": "sha512-iH1Xz68FWlmBJ9vvYeHifVMWJf82ONx+OybPW8ZGf5wnEv2S0UXcU4zwlwJkRXuLKpcSLHrraHbn2ucdVXLb4g==",
       "dependencies": {
         "tslib": "^2.5.0"
       },
@@ -5808,12 +5822,12 @@
       }
     },
     "node_modules/@smithy/url-parser": {
-      "version": "2.0.11",
-      "resolved": "https://registry.npmjs.org/@smithy/url-parser/-/url-parser-2.0.11.tgz",
-      "integrity": "sha512-h89yXMCCF+S5k9XIoKltMIWTYj+FcEkU/IIFZ6RtE222fskOTL4Iak6ZRG+ehSvZDt8yKEcxqheTDq7JvvtK3g==",
+      "version": "2.0.12",
+      "resolved": "https://registry.npmjs.org/@smithy/url-parser/-/url-parser-2.0.12.tgz",
+      "integrity": "sha512-qgkW2mZqRvlNUcBkxYB/gYacRaAdck77Dk3/g2iw0S9F0EYthIS3loGfly8AwoWpIvHKhkTsCXXQfzksgZ4zIA==",
       "dependencies": {
-        "@smithy/querystring-parser": "^2.0.11",
-        "@smithy/types": "^2.3.5",
+        "@smithy/querystring-parser": "^2.0.12",
+        "@smithy/types": "^2.4.0",
         "tslib": "^2.5.0"
       }
     },
@@ -6162,25 +6176,25 @@
       "version": "1.0.9",
       "resolved": "https://registry.npmjs.org/@tsconfig/node10/-/node10-1.0.9.tgz",
       "integrity": "sha512-jNsYVVxU8v5g43Erja32laIDHXeoNvFEpX33OK4d6hljo3jDhCBDhx5dhCCTMWUojscpAagGiRkBKxpdl9fxqA==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/@tsconfig/node12": {
       "version": "1.0.11",
       "resolved": "https://registry.npmjs.org/@tsconfig/node12/-/node12-1.0.11.tgz",
       "integrity": "sha512-cqefuRsh12pWyGsIoBKJA9luFu3mRxCA+ORZvA4ktLSzIuCUtWVxGIuXigEwO5/ywWFMZ2QEGKWvkZG1zDMTag==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/@tsconfig/node14": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/@tsconfig/node14/-/node14-1.0.3.tgz",
       "integrity": "sha512-ysT8mhdixWK6Hw3i1V2AeRqZ5WfXg1G43mqoYlM2nc6388Fq5jcXyr5mRsqViLx/GJYdoL0bfXD8nmF+Zn/Iow==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/@tsconfig/node16": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/@tsconfig/node16/-/node16-1.0.4.tgz",
       "integrity": "sha512-vxhUy4J8lyeyinH7Azl1pdd43GJhZH/tP2weN8TntQblOY+A0XbT8DJk1/oCPuOOyg/Ja757rG0CgHcWC8OfMA==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/@types/acorn": {
       "version": "4.0.6",
@@ -6383,7 +6397,7 @@
       "version": "18.2.7",
       "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.2.7.tgz",
       "integrity": "sha512-GRaAEriuT4zp9N4p1i8BDBYmEyfo+xQ3yHjJU4eiK5NDa1RmUZG+unZABUTK4/Ox/M+GaHwb6Ow8rUITrtjszA==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "@types/react": "*"
       }
@@ -6582,7 +6596,7 @@
       "version": "8.2.0",
       "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.2.0.tgz",
       "integrity": "sha512-k+iyHEuPgSw6SbuDpGQM+06HQUa04DZ3o+F6CSzXMvvI5KMvnaEqXe+YVe555R9nn6GPt404fos4wcgpw12SDA==",
-      "dev": true,
+      "devOptional": true,
       "engines": {
         "node": ">=0.4.0"
       }
@@ -8256,7 +8270,7 @@
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/create-require/-/create-require-1.1.1.tgz",
       "integrity": "sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/cross-spawn": {
       "version": "7.0.3",
@@ -12551,7 +12565,7 @@
       "version": "1.3.6",
       "resolved": "https://registry.npmjs.org/make-error/-/make-error-1.3.6.tgz",
       "integrity": "sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/make-event-props": {
       "version": "1.6.1",
@@ -15846,6 +15860,15 @@
         "react": "^16.8.0 || ^17 || ^18"
       }
     },
+    "node_modules/react-hotkeys-hook": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/react-hotkeys-hook/-/react-hotkeys-hook-4.4.1.tgz",
+      "integrity": "sha512-sClBMBioFEgFGYLTWWRKvhxcCx1DRznd+wkFHwQZspnRBkHTgruKIHptlK/U/2DPX8BhHoRGzpMVWUXMmdZlmw==",
+      "peerDependencies": {
+        "react": ">=16.8.1",
+        "react-dom": ">=16.8.1"
+      }
+    },
     "node_modules/react-icons": {
       "version": "4.11.0",
       "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.11.0.tgz",
@@ -17880,7 +17903,7 @@
       "version": "10.9.1",
       "resolved": "https://registry.npmjs.org/ts-node/-/ts-node-10.9.1.tgz",
       "integrity": "sha512-NtVysVPkxxrwFGUUxGYhfux8k78pQB3JqYBXlLRZgdGUqTO5wU/UyHop5p70iEbGhB7q5KmiZiU0Y3KlJrScEw==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "@cspotcode/source-map-support": "^0.8.0",
         "@tsconfig/node10": "^1.0.7",
@@ -18764,7 +18787,7 @@
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/v8-compile-cache-lib/-/v8-compile-cache-lib-3.0.1.tgz",
       "integrity": "sha512-wa7YjyUGfNZngI/vtK0UHAN+lgDCxBPCylVXGp0zu59Fz5aiGtNXaq3DhIov063MorB+VfufLh3JlF2KdTK3xg==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/validate-npm-package-license": {
       "version": "3.0.4",
@@ -19274,7 +19297,7 @@
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/yn/-/yn-3.1.1.tgz",
       "integrity": "sha512-Ux4ygGWsu2c7isFWe8Yu1YluJmqVhxqK2cLXNQA5AcC3QfbGNpM7fu0Y8b/z16pXLnFxZYvWhd3fhBY9DLmC6Q==",
-      "dev": true,
+      "devOptional": true,
       "engines": {
         "node": ">=6"
       }
@@ -19729,6 +19752,7 @@
       "license": "MIT",
       "dependencies": {
         "@aws-sdk/client-s3": "^3.410.0",
+        "@aws-sdk/cloudfront-signer": "^3.410.0",
         "@aws-sdk/s3-request-presigner": "^3.410.0",
         "@aws-sdk/signature-v4-crt": "^3.410.0",
         "@documenso/email": "*",

package.json

@@ -46,6 +46,7 @@
     "packages/*"
   ],
   "dependencies": {
+    "react-hotkeys-hook": "^4.4.1",
     "recharts": "^2.7.2"
   }
 }

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

@@ -10,7 +10,7 @@ export type GetLimitsOptions = {
 export const getLimits = async ({ headers }: GetLimitsOptions = {}) => {
   const requestHeaders = headers ?? {};
 
-  const url = new URL(`${APP_BASE_URL}/api/limits`);
+  const url = new URL('/api/limits', APP_BASE_URL ?? 'http://localhost:3000');
 
   return fetch(url, {
     headers: {

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

@@ -30,7 +30,7 @@ export const limitsHandler = async (
       });
     }
 
-    res.status(500).json({
+    return res.status(500).json({
       error: ERROR_CODES.UNKNOWN,
     });
   }

packages/lib/constants/app.ts

@@ -1,3 +1,5 @@
+import { getRuntimeEnv } from '../universal/runtime-env/get-runtime-env';
+
 export const IS_APP_MARKETING = process.env.NEXT_PUBLIC_PROJECT === 'marketing';
 export const IS_APP_WEB = process.env.NEXT_PUBLIC_PROJECT === 'web';
 
@@ -6,3 +8,21 @@ export const APP_FOLDER = IS_APP_MARKETING ? 'marketing' : 'web';
 export const APP_BASE_URL = IS_APP_WEB
   ? process.env.NEXT_PUBLIC_WEBAPP_URL
   : process.env.NEXT_PUBLIC_MARKETING_URL;
+
+export const appBaseUrl = () => {
+  const { NEXT_PUBLIC_WEBAPP_URL, NEXT_PUBLIC_MARKETING_URL } = getRuntimeEnv();
+
+  if (IS_APP_WEB) {
+    return NEXT_PUBLIC_WEBAPP_URL;
+  }
+
+  if (IS_APP_MARKETING) {
+    return NEXT_PUBLIC_MARKETING_URL;
+  }
+
+  if (typeof window !== 'undefined') {
+    return window.location.origin;
+  }
+
+  return NEXT_PUBLIC_WEBAPP_URL ?? 'http://localhost:3000';
+};

packages/lib/constants/feature-flags.ts

@@ -1,4 +1,4 @@
-import { APP_BASE_URL } from './app';
+import { appBaseUrl } from './app';
 
 /**
  * The flag name for global session recording feature flag.
@@ -25,7 +25,7 @@ export const LOCAL_FEATURE_FLAGS: Record<string, boolean> = {
  */
 export function extractPostHogConfig(): { key: string; host: string } | null {
   const postHogKey = process.env.NEXT_PUBLIC_POSTHOG_KEY;
-  const postHogHost = `${APP_BASE_URL}/ingest`;
+  const postHogHost = `${appBaseUrl()}/ingest`;
 
   if (!postHogKey || !postHogHost) {
     return null;

packages/lib/constants/keyboard-shortcuts.ts

@@ -0,0 +1,2 @@
+export const SETTINGS_PAGE_SHORTCUT = 'N+S';
+export const DOCUMENTS_PAGE_SHORTCUT = 'N+D';

packages/lib/constants/pdf.ts

@@ -1,9 +1,7 @@
-import { APP_BASE_URL } from './app';
-
 export const DEFAULT_STANDARD_FONT_SIZE = 15;
 export const DEFAULT_HANDWRITING_FONT_SIZE = 50;
 
 export const MIN_STANDARD_FONT_SIZE = 8;
 export const MIN_HANDWRITING_FONT_SIZE = 20;
 
-export const CAVEAT_FONT_PATH = `${APP_BASE_URL}/fonts/caveat.ttf`;
+export const CAVEAT_FONT_PATH = `/fonts/caveat.ttf`;

packages/lib/next-auth/auth-options.ts

@@ -1,5 +1,6 @@
 import { PrismaAdapter } from '@next-auth/prisma-adapter';
 import { compare } from 'bcrypt';
+import { DateTime } from 'luxon';
 import { AuthOptions, Session, User } from 'next-auth';
 import CredentialsProvider from 'next-auth/providers/credentials';
 import GoogleProvider, { GoogleProfile } from 'next-auth/providers/google';
@@ -54,6 +55,7 @@ export const NEXT_AUTH_OPTIONS: AuthOptions = {
       clientId: process.env.NEXT_PRIVATE_GOOGLE_CLIENT_ID ?? '',
       clientSecret: process.env.NEXT_PRIVATE_GOOGLE_CLIENT_SECRET ?? '',
       allowDangerousEmailAccountLinking: true,
+
       profile(profile) {
         return {
           id: Number(profile.sub),
@@ -65,27 +67,51 @@ export const NEXT_AUTH_OPTIONS: AuthOptions = {
   ],
   callbacks: {
     async jwt({ token, user }) {
-      if (!token.email) {
-        throw new Error('No email in token');
+      const merged = {
+        ...token,
+        ...user,
+      };
+
+      if (!merged.email) {
+        const userId = Number(merged.id ?? token.sub);
+
+        const retrieved = await prisma.user.findFirst({
+          where: {
+            id: userId,
+          },
+        });
+
+        if (!retrieved) {
+          return token;
+        }
+
+        merged.id = retrieved.id;
+        merged.name = retrieved.name;
+        merged.email = retrieved.email;
       }
 
-      const retrievedUser = await prisma.user.findFirst({
-        where: {
-          email: token.email,
-        },
-      });
+      if (
+        merged.id &&
+        (!merged.lastSignedIn ||
+          DateTime.fromISO(merged.lastSignedIn).plus({ hours: 1 }) <= DateTime.now())
+      ) {
+        merged.lastSignedIn = new Date().toISOString();
 
-      if (!retrievedUser) {
-        return {
-          ...token,
-          id: user.id,
-        };
+        await prisma.user.update({
+          where: {
+            id: Number(merged.id),
+          },
+          data: {
+            lastSignedIn: merged.lastSignedIn,
+          },
+        });
       }
 
       return {
-        id: retrievedUser.id,
-        name: retrievedUser.name,
-        email: retrievedUser.email,
+        id: merged.id,
+        name: merged.name,
+        email: merged.email,
+        lastSignedIn: merged.lastSignedIn,
       };
     },
 

packages/lib/package.json

@@ -15,6 +15,7 @@
   },
   "dependencies": {
     "@aws-sdk/client-s3": "^3.410.0",
+    "@aws-sdk/cloudfront-signer": "^3.410.0",
     "@aws-sdk/s3-request-presigner": "^3.410.0",
     "@aws-sdk/signature-v4-crt": "^3.410.0",
     "@documenso/email": "*",

packages/lib/server-only/auth/send-forgot-password.ts

@@ -5,11 +5,15 @@ import { render } from '@documenso/email/render';
 import { ForgotPasswordTemplate } from '@documenso/email/templates/forgot-password';
 import { prisma } from '@documenso/prisma';
 
+import { getRuntimeEnv } from '../../universal/runtime-env/get-runtime-env';
+
 export interface SendForgotPasswordOptions {
   userId: number;
 }
 
 export const sendForgotPassword = async ({ userId }: SendForgotPasswordOptions) => {
+  const { NEXT_PUBLIC_WEBAPP_URL } = getRuntimeEnv();
+
   const user = await prisma.user.findFirstOrThrow({
     where: {
       id: userId,
@@ -29,8 +33,8 @@ export const sendForgotPassword = async ({ userId }: SendForgotPasswordOptions)
   }
 
   const token = user.PasswordResetToken[0].token;
-  const assetBaseUrl = process.env.NEXT_PUBLIC_WEBAPP_URL || 'http://localhost:3000';
-  const resetPasswordLink = `${process.env.NEXT_PUBLIC_WEBAPP_URL}/reset-password/${token}`;
+  const assetBaseUrl = NEXT_PUBLIC_WEBAPP_URL || 'http://localhost:3000';
+  const resetPasswordLink = `${NEXT_PUBLIC_WEBAPP_URL}/reset-password/${token}`;
 
   const template = createElement(ForgotPasswordTemplate, {
     assetBaseUrl,

packages/lib/server-only/auth/send-reset-password.ts

@@ -5,18 +5,22 @@ import { render } from '@documenso/email/render';
 import { ResetPasswordTemplate } from '@documenso/email/templates/reset-password';
 import { prisma } from '@documenso/prisma';
 
+import { getRuntimeEnv } from '../../universal/runtime-env/get-runtime-env';
+
 export interface SendResetPasswordOptions {
   userId: number;
 }
 
 export const sendResetPassword = async ({ userId }: SendResetPasswordOptions) => {
+  const { NEXT_PUBLIC_WEBAPP_URL } = getRuntimeEnv();
+
   const user = await prisma.user.findFirstOrThrow({
     where: {
       id: userId,
     },
   });
 
-  const assetBaseUrl = process.env.NEXT_PUBLIC_WEBAPP_URL || 'http://localhost:3000';
+  const assetBaseUrl = NEXT_PUBLIC_WEBAPP_URL || 'http://localhost:3000';
 
   const template = createElement(ResetPasswordTemplate, {
     assetBaseUrl,

packages/lib/server-only/document/complete-document-with-token.ts

@@ -94,6 +94,7 @@ export const completeDocumentWithToken = async ({
     },
     data: {
       status: DocumentStatus.COMPLETED,
+      completedAt: new Date(),
     },
   });
 

packages/lib/server-only/document/duplicate-document-by-id.ts

@@ -0,0 +1,56 @@
+import { prisma } from '@documenso/prisma';
+
+export interface DuplicateDocumentByIdOptions {
+  id: number;
+  userId: number;
+}
+
+export const duplicateDocumentById = async ({ id, userId }: DuplicateDocumentByIdOptions) => {
+  const document = await prisma.document.findUniqueOrThrow({
+    where: {
+      id,
+      userId: userId,
+    },
+    select: {
+      title: true,
+      userId: true,
+      documentData: {
+        select: {
+          data: true,
+          initialData: true,
+          type: true,
+        },
+      },
+      documentMeta: {
+        select: {
+          message: true,
+          subject: true,
+        },
+      },
+    },
+  });
+
+  const createdDocument = await prisma.document.create({
+    data: {
+      title: document.title,
+      User: {
+        connect: {
+          id: document.userId,
+        },
+      },
+      documentData: {
+        create: {
+          ...document.documentData,
+          data: document.documentData.initialData,
+        },
+      },
+      documentMeta: {
+        create: {
+          ...document.documentMeta,
+        },
+      },
+    },
+  });
+
+  return createdDocument.id;
+};

packages/lib/server-only/document/find-documents.ts

@@ -1,4 +1,5 @@
-import { match } from 'ts-pattern';
+import { DateTime } from 'luxon';
+import { P, match } from 'ts-pattern';
 
 import { prisma } from '@documenso/prisma';
 import { Document, Prisma, SigningStatus } from '@documenso/prisma/client';
@@ -16,6 +17,7 @@ export interface FindDocumentsOptions {
     column: keyof Omit<Document, 'document'>;
     direction: 'asc' | 'desc';
   };
+  period?: '' | '7d' | '14d' | '30d';
 }
 
 export const findDocuments = async ({
@@ -25,6 +27,7 @@ export const findDocuments = async ({
   page = 1,
   perPage = 10,
   orderBy,
+  period,
 }: FindDocumentsOptions) => {
   const user = await prisma.user.findFirstOrThrow({
     where: {
@@ -35,14 +38,16 @@ export const findDocuments = async ({
   const orderByColumn = orderBy?.column ?? 'createdAt';
   const orderByDirection = orderBy?.direction ?? 'desc';
 
-  const termFilters = !term
-    ? undefined
-    : ({
+  const termFilters = match(term)
+    .with(P.string.minLength(1), () => {
+      return {
         title: {
           contains: term,
           mode: 'insensitive',
         },
-      } as const);
+      } as const;
+    })
+    .otherwise(() => undefined);
 
   const filters = match<ExtendedDocumentStatus, Prisma.DocumentWhereInput>(status)
     .with(ExtendedDocumentStatus.ALL, () => ({
@@ -113,12 +118,24 @@ export const findDocuments = async ({
     }))
     .exhaustive();
 
+  const whereClause = {
+    ...termFilters,
+    ...filters,
+  };
+
+  if (period) {
+    const daysAgo = parseInt(period.replace(/d$/, ''), 10);
+
+    const startOfPeriod = DateTime.now().minus({ days: daysAgo }).startOf('day');
+
+    whereClause.createdAt = {
+      gte: startOfPeriod.toJSDate(),
+    };
+  }
+
   const [data, count] = await Promise.all([
     prisma.document.findMany({
-      where: {
-        ...termFilters,
-        ...filters,
-      },
+      where: whereClause,
       skip: Math.max(page - 1, 0) * perPage,
       take: perPage,
       orderBy: {

packages/lib/server-only/document/send-completed-email.ts

@@ -5,6 +5,7 @@ import { render } from '@documenso/email/render';
 import { DocumentCompletedEmailTemplate } from '@documenso/email/templates/document-completed';
 import { prisma } from '@documenso/prisma';
 
+import { getRuntimeEnv } from '../../universal/runtime-env/get-runtime-env';
 import { getFile } from '../../universal/upload/get-file';
 
 export interface SendDocumentOptions {
@@ -12,6 +13,8 @@ export interface SendDocumentOptions {
 }
 
 export const sendCompletedEmail = async ({ documentId }: SendDocumentOptions) => {
+  const { NEXT_PUBLIC_WEBAPP_URL } = getRuntimeEnv();
+
   const document = await prisma.document.findUnique({
     where: {
       id: documentId,
@@ -36,12 +39,12 @@ export const sendCompletedEmail = async ({ documentId }: SendDocumentOptions) =>
     document.Recipient.map(async (recipient) => {
       const { email, name, token } = recipient;
 
-      const assetBaseUrl = process.env.NEXT_PUBLIC_WEBAPP_URL || 'http://localhost:3000';
+      const assetBaseUrl = NEXT_PUBLIC_WEBAPP_URL || 'http://localhost:3000';
 
       const template = createElement(DocumentCompletedEmailTemplate, {
         documentName: document.title,
         assetBaseUrl,
-        downloadLink: `${process.env.NEXT_PUBLIC_WEBAPP_URL}/sign/${token}/complete`,
+        downloadLink: `${NEXT_PUBLIC_WEBAPP_URL}/sign/${token}/complete`,
       });
 
       await mailer.sendMail({

packages/lib/server-only/document/send-document.tsx

@@ -8,12 +8,16 @@ import { renderCustomEmailTemplate } from '@documenso/lib/utils/render-custom-em
 import { prisma } from '@documenso/prisma';
 import { DocumentStatus, SendStatus } from '@documenso/prisma/client';
 
+import { getRuntimeEnv } from '../../universal/runtime-env/get-runtime-env';
+
 export type SendDocumentOptions = {
   documentId: number;
   userId: number;
 };
 
 export const sendDocument = async ({ documentId, userId }: SendDocumentOptions) => {
+  const { NEXT_PUBLIC_WEBAPP_URL } = getRuntimeEnv();
+
   const user = await prisma.user.findFirstOrThrow({
     where: {
       id: userId,
@@ -59,8 +63,8 @@ export const sendDocument = async ({ documentId, userId }: SendDocumentOptions)
         return;
       }
 
-      const assetBaseUrl = process.env.NEXT_PUBLIC_WEBAPP_URL || 'http://localhost:3000';
-      const signDocumentLink = `${process.env.NEXT_PUBLIC_WEBAPP_URL}/sign/${recipient.token}`;
+      const assetBaseUrl = NEXT_PUBLIC_WEBAPP_URL || 'http://localhost:3000';
+      const signDocumentLink = `${NEXT_PUBLIC_WEBAPP_URL}/sign/${recipient.token}`;
 
       const template = createElement(DocumentInviteEmailTemplate, {
         documentName: document.title,

packages/lib/server-only/document/send-pending-email.ts

@@ -5,12 +5,16 @@ import { render } from '@documenso/email/render';
 import { DocumentPendingEmailTemplate } from '@documenso/email/templates/document-pending';
 import { prisma } from '@documenso/prisma';
 
+import { getRuntimeEnv } from '../../universal/runtime-env/get-runtime-env';
+
 export interface SendPendingEmailOptions {
   documentId: number;
   recipientId: number;
 }
 
 export const sendPendingEmail = async ({ documentId, recipientId }: SendPendingEmailOptions) => {
+  const { NEXT_PUBLIC_WEBAPP_URL } = getRuntimeEnv();
+
   const document = await prisma.document.findFirst({
     where: {
       id: documentId,
@@ -41,7 +45,7 @@ export const sendPendingEmail = async ({ documentId, recipientId }: SendPendingE
 
   const { email, name } = recipient;
 
-  const assetBaseUrl = process.env.NEXT_PUBLIC_WEBAPP_URL || 'http://localhost:3000';
+  const assetBaseUrl = NEXT_PUBLIC_WEBAPP_URL || 'http://localhost:3000';
 
   const template = createElement(DocumentPendingEmailTemplate, {
     documentName: document.title,

packages/lib/server-only/feature-flags/all.ts

@@ -5,12 +5,15 @@ import { getToken } from 'next-auth/jwt';
 import { LOCAL_FEATURE_FLAGS } from '@documenso/lib/constants/feature-flags';
 import PostHogServerClient from '@documenso/lib/server-only/feature-flags/get-post-hog-server-client';
 
+import { getRuntimeEnv } from '../../universal/runtime-env/get-runtime-env';
 import { extractDistinctUserId, mapJwtToFlagProperties } from './get';
 
 /**
  * Get all the evaluated feature flags based on the current user if possible.
  */
 export default async function handlerFeatureFlagAll(req: Request) {
+  const { NEXT_PUBLIC_WEBAPP_URL, NEXT_PUBLIC_MARKETING_URL } = getRuntimeEnv();
+
   const requestHeaders = Object.fromEntries(req.headers.entries());
 
   const nextReq = new NextRequest(req, {
@@ -38,11 +41,11 @@ export default async function handlerFeatureFlagAll(req: Request) {
   const origin = req.headers.get('origin');
 
   if (origin) {
-    if (origin.startsWith(process.env.NEXT_PUBLIC_WEBAPP_URL ?? 'http://localhost:3000')) {
+    if (origin.startsWith(NEXT_PUBLIC_WEBAPP_URL ?? 'http://localhost:3000')) {
       res.headers.set('Access-Control-Allow-Origin', origin);
     }
 
-    if (origin.startsWith(process.env.NEXT_PUBLIC_MARKETING_URL ?? 'http://localhost:3001')) {
+    if (origin.startsWith(NEXT_PUBLIC_MARKETING_URL ?? 'http://localhost:3001')) {
       res.headers.set('Access-Control-Allow-Origin', origin);
     }
   }

packages/lib/server-only/feature-flags/get.ts

@@ -6,6 +6,8 @@ import { JWT, getToken } from 'next-auth/jwt';
 import { LOCAL_FEATURE_FLAGS, extractPostHogConfig } from '@documenso/lib/constants/feature-flags';
 import PostHogServerClient from '@documenso/lib/server-only/feature-flags/get-post-hog-server-client';
 
+import { getRuntimeEnv } from '../../universal/runtime-env/get-runtime-env';
+
 /**
  * Evaluate a single feature flag based on the current user if possible.
  *
@@ -13,6 +15,8 @@ import PostHogServerClient from '@documenso/lib/server-only/feature-flags/get-po
  * @returns A Response with the feature flag value.
  */
 export default async function handleFeatureFlagGet(req: Request) {
+  const { NEXT_PUBLIC_WEBAPP_URL, NEXT_PUBLIC_MARKETING_URL } = getRuntimeEnv();
+
   const { searchParams } = new URL(req.url ?? '');
   const flag = searchParams.get('flag');
 
@@ -57,11 +61,11 @@ export default async function handleFeatureFlagGet(req: Request) {
   const origin = req.headers.get('Origin');
 
   if (origin) {
-    if (origin.startsWith(process.env.NEXT_PUBLIC_WEBAPP_URL ?? 'http://localhost:3000')) {
+    if (origin.startsWith(NEXT_PUBLIC_WEBAPP_URL ?? 'http://localhost:3000')) {
       res.headers.set('Access-Control-Allow-Origin', origin);
     }
 
-    if (origin.startsWith(process.env.NEXT_PUBLIC_MARKETING_URL ?? 'http://localhost:3001')) {
+    if (origin.startsWith(NEXT_PUBLIC_MARKETING_URL ?? 'http://localhost:3001')) {
       res.headers.set('Access-Control-Allow-Origin', origin);
     }
   }
@@ -105,7 +109,7 @@ export const extractDistinctUserId = (jwt: JWT | null, request: NextRequest): st
   const config = extractPostHogConfig();
 
   const email = jwt?.email;
-  const userId = jwt?.id.toString();
+  const userId = jwt?.id?.toString();
 
   let fallbackDistinctId = nanoid();
 

packages/lib/server-only/pdf/insert-field-in-pdf.ts

@@ -12,9 +12,11 @@ import { FieldType } from '@documenso/prisma/client';
 import { isSignatureFieldType } from '@documenso/prisma/guards/is-signature-field';
 import { FieldWithSignature } from '@documenso/prisma/types/field-with-signature';
 
+import { appBaseUrl } from '../../constants/app';
+
 export const insertFieldInPDF = async (pdf: PDFDocument, field: FieldWithSignature) => {
   // Fetch the font file from the public URL.
-  const fontResponse = await fetch(CAVEAT_FONT_PATH);
+  const fontResponse = await fetch(new URL(CAVEAT_FONT_PATH, appBaseUrl()));
   const fontCaveat = await fontResponse.arrayBuffer();
 
   const isSignatureField = isSignatureFieldType(field.type);

packages/lib/server-only/pdf/insert-text-in-pdf.ts

@@ -1,6 +1,7 @@
 import fontkit from '@pdf-lib/fontkit';
 import { PDFDocument, StandardFonts, rgb } from 'pdf-lib';
 
+import { appBaseUrl } from '../../constants/app';
 import { CAVEAT_FONT_PATH } from '../../constants/pdf';
 
 export async function insertTextInPDF(
@@ -12,7 +13,7 @@ export async function insertTextInPDF(
   useHandwritingFont = true,
 ): Promise<string> {
   // Fetch the font file from the public URL.
-  const fontResponse = await fetch(CAVEAT_FONT_PATH);
+  const fontResponse = await fetch(new URL(CAVEAT_FONT_PATH, appBaseUrl()));
   const fontCaveat = await fontResponse.arrayBuffer();
 
   const pdfDoc = await PDFDocument.load(pdfAsBase64);

packages/lib/server-only/user/get-user-monthly-growth.ts

@@ -0,0 +1,34 @@
+import { DateTime } from 'luxon';
+
+import { prisma } from '@documenso/prisma';
+
+export type GetUserMonthlyGrowthResult = Array<{
+  month: string;
+  count: number;
+  cume_count: number;
+}>;
+
+type GetUserMonthlyGrowthQueryResult = Array<{
+  month: Date;
+  count: bigint;
+  cume_count: bigint;
+}>;
+
+export const getUserMonthlyGrowth = async () => {
+  const result = await prisma.$queryRaw<GetUserMonthlyGrowthQueryResult>`
+    SELECT
+      DATE_TRUNC('month', "createdAt") AS "month",
+      COUNT("id") as "count",
+      SUM(COUNT("id")) OVER (ORDER BY DATE_TRUNC('month', "createdAt")) as "cume_count"
+    FROM "User"
+    GROUP BY "month"
+    ORDER BY "month" DESC
+    LIMIT 12
+  `;
+
+  return result.map((row) => ({
+    month: DateTime.fromJSDate(row.month).toFormat('yyyy-MM'),
+    count: Number(row.count),
+    cume_count: Number(row.cume_count),
+  }));
+};

packages/lib/types/next-auth.d.ts

@@ -19,5 +19,6 @@ declare module 'next-auth/jwt' {
     id: string | number;
     name?: string | null;
     email: string | null;
+    lastSignedIn?: string | null;
   }
 }

packages/lib/types/pick-starts-with.ts

@@ -0,0 +1,3 @@
+export type PickStartsWith<T extends object, S extends string> = {
+  [K in keyof T as K extends `${S}${string}` ? K : never]: T[K];
+};

packages/lib/universal/get-feature-flag.ts

@@ -4,7 +4,7 @@ import {
   TFeatureFlagValue,
   ZFeatureFlagValueSchema,
 } from '@documenso/lib/client-only/providers/feature-flag.types';
-import { APP_BASE_URL } from '@documenso/lib/constants/app';
+import { appBaseUrl } from '@documenso/lib/constants/app';
 import { LOCAL_FEATURE_FLAGS, isFeatureFlagEnabled } from '@documenso/lib/constants/feature-flags';
 
 /**
@@ -24,7 +24,7 @@ export const getFlag = async (
     return LOCAL_FEATURE_FLAGS[flag] ?? true;
   }
 
-  const url = new URL(`${APP_BASE_URL}/api/feature-flag/get`);
+  const url = new URL(`${appBaseUrl()}/api/feature-flag/get`);
   url.searchParams.set('flag', flag);
 
   const response = await fetch(url, {
@@ -57,7 +57,7 @@ export const getAllFlags = async (
     return LOCAL_FEATURE_FLAGS;
   }
 
-  const url = new URL(`${APP_BASE_URL}/api/feature-flag/all`);
+  const url = new URL(`${appBaseUrl()}/api/feature-flag/all`);
 
   return fetch(url, {
     headers: {
@@ -82,7 +82,7 @@ export const getAllAnonymousFlags = async (): Promise<Record<string, TFeatureFla
     return LOCAL_FEATURE_FLAGS;
   }
 
-  const url = new URL(`${APP_BASE_URL}/api/feature-flag/all`);
+  const url = new URL(`${appBaseUrl()}/api/feature-flag/all`);
 
   return fetch(url, {
     next: {

packages/lib/universal/runtime-env/client.tsx

@@ -0,0 +1,26 @@
+'use client';
+
+import React, { useContext } from 'react';
+
+import { PublicEnv } from './types';
+
+export type RuntimeEnvClientProviderProps = {
+  value: PublicEnv;
+  children: React.ReactNode;
+};
+
+const RuntimeEnvContext = React.createContext<PublicEnv | null>(null);
+
+export const useRuntimeEnv = () => {
+  const context = useContext(RuntimeEnvContext);
+
+  if (!context) {
+    throw new Error('useRuntimeEnv must be used within a RuntimeEnvProvider');
+  }
+
+  return context;
+};
+
+export const RuntimeEnvClientProvider = ({ value, children }: RuntimeEnvClientProviderProps) => {
+  return <RuntimeEnvContext.Provider value={value}>{children}</RuntimeEnvContext.Provider>;
+};

packages/lib/universal/runtime-env/get-runtime-env.ts

@@ -0,0 +1,22 @@
+import { PublicEnv } from './types';
+
+declare global {
+  interface Window {
+    __unstable_runtimeEnv: PublicEnv;
+  }
+}
+
+export const getRuntimeEnv = () => {
+  if (typeof window === 'undefined') {
+    // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+    return Object.entries(process.env)
+      .filter(([key]) => key.startsWith('NEXT_PUBLIC_'))
+      .reduce((acc, [key, value]) => ({ ...acc, [key]: value }), {}) as PublicEnv;
+  }
+
+  if (typeof window !== 'undefined' && window.__unstable_runtimeEnv) {
+    return window.__unstable_runtimeEnv;
+  }
+
+  throw new Error('RuntimeEnv is not available');
+};

packages/lib/universal/runtime-env/index.ts

@@ -0,0 +1 @@
+export { RuntimeEnvProvider, type RuntimeEnvProviderProps } from './server';

packages/lib/universal/runtime-env/server.tsx

@@ -0,0 +1,29 @@
+'use server';
+
+import React from 'react';
+
+import { RuntimeEnvClientProvider } from './client';
+import { PublicEnv } from './types';
+
+export type RuntimeEnvProviderProps = {
+  children: React.ReactNode;
+};
+
+export const RuntimeEnvProvider = ({ children }: RuntimeEnvProviderProps) => {
+  // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+  const publicEnv = Object.entries(process.env)
+    .filter(([key]) => key.startsWith('NEXT_PUBLIC_'))
+    .reduce((acc, [key, value]) => ({ ...acc, [key]: value }), {}) as PublicEnv;
+
+  return (
+    <RuntimeEnvClientProvider value={publicEnv}>
+      {children}
+
+      <script
+        dangerouslySetInnerHTML={{
+          __html: `window.__unstable_runtimeEnv = ${JSON.stringify(publicEnv)}`,
+        }}
+      />
+    </RuntimeEnvClientProvider>
+  );
+};

packages/lib/universal/runtime-env/types.ts

@@ -0,0 +1,3 @@
+import { PickStartsWith } from '../../types/pick-starts-with';
+
+export type PublicEnv = PickStartsWith<typeof process.env, 'NEXT_PUBLIC_'>;

packages/lib/universal/upload/put-file.ts

@@ -4,6 +4,7 @@ import { match } from 'ts-pattern';
 import { DocumentDataType } from '@documenso/prisma/client';
 
 import { createDocumentData } from '../../server-only/document-data/create-document-data';
+import { getRuntimeEnv } from '../runtime-env/get-runtime-env';
 
 type File = {
   name: string;
@@ -12,7 +13,9 @@ type File = {
 };
 
 export const putFile = async (file: File) => {
-  const { type, data } = await match(process.env.NEXT_PUBLIC_UPLOAD_TRANSPORT)
+  const { NEXT_PUBLIC_UPLOAD_TRANSPORT } = getRuntimeEnv();
+
+  const { type, data } = await match(NEXT_PUBLIC_UPLOAD_TRANSPORT)
     .with('s3', async () => putFileInS3(file))
     .otherwise(async () => putFileInDatabase(file));
 

packages/lib/universal/upload/server-actions.ts

@@ -12,6 +12,7 @@ import path from 'node:path';
 import { ONE_HOUR, ONE_SECOND } from '../../constants/time';
 import { getServerComponentSession } from '../../next-auth/get-server-session';
 import { alphaid } from '../id';
+import { getRuntimeEnv } from '../runtime-env/get-runtime-env';
 
 export const getPresignPostUrl = async (fileName: string, contentType: string) => {
   const client = getS3Client();
@@ -45,14 +46,14 @@ export const getPresignPostUrl = async (fileName: string, contentType: string) =
 export const getAbsolutePresignPostUrl = async (key: string) => {
   const client = getS3Client();
 
-  const { getSignedUrl } = await import('@aws-sdk/s3-request-presigner');
+  const { getSignedUrl: getS3SignedUrl } = await import('@aws-sdk/s3-request-presigner');
 
   const putObjectCommand = new PutObjectCommand({
     Bucket: process.env.NEXT_PRIVATE_UPLOAD_BUCKET,
     Key: key,
   });
 
-  const url = await getSignedUrl(client, putObjectCommand, {
+  const url = await getS3SignedUrl(client, putObjectCommand, {
     expiresIn: ONE_HOUR / ONE_SECOND,
   });
 
@@ -60,16 +61,31 @@ export const getAbsolutePresignPostUrl = async (key: string) => {
 };
 
 export const getPresignGetUrl = async (key: string) => {
+  if (process.env.NEXT_PRIVATE_UPLOAD_DISTRIBUTION_DOMAIN) {
+    const distributionUrl = new URL(key, `${process.env.NEXT_PRIVATE_UPLOAD_DISTRIBUTION_DOMAIN}`);
+
+    const { getSignedUrl: getCloudfrontSignedUrl } = await import('@aws-sdk/cloudfront-signer');
+
+    const url = getCloudfrontSignedUrl({
+      url: distributionUrl.toString(),
+      keyPairId: `${process.env.NEXT_PRIVATE_UPLOAD_DISTRIBUTION_KEY_ID}`,
+      privateKey: `${process.env.NEXT_PRIVATE_UPLOAD_DISTRIBUTION_KEY_CONTENTS}`,
+      dateLessThan: new Date(Date.now() + ONE_HOUR).toISOString(),
+    });
+
+    return { key, url };
+  }
+
   const client = getS3Client();
 
-  const { getSignedUrl } = await import('@aws-sdk/s3-request-presigner');
+  const { getSignedUrl: getS3SignedUrl } = await import('@aws-sdk/s3-request-presigner');
 
   const getObjectCommand = new GetObjectCommand({
     Bucket: process.env.NEXT_PRIVATE_UPLOAD_BUCKET,
     Key: key,
   });
 
-  const url = await getSignedUrl(client, getObjectCommand, {
+  const url = await getS3SignedUrl(client, getObjectCommand, {
     expiresIn: ONE_HOUR / ONE_SECOND,
   });
 
@@ -88,7 +104,9 @@ export const deleteS3File = async (key: string) => {
 };
 
 const getS3Client = () => {
-  if (process.env.NEXT_PUBLIC_UPLOAD_TRANSPORT !== 's3') {
+  const { NEXT_PUBLIC_UPLOAD_TRANSPORT } = getRuntimeEnv();
+
+  if (NEXT_PUBLIC_UPLOAD_TRANSPORT !== 's3') {
     throw new Error('Invalid upload transport');
   }
 

packages/lib/universal/use-base-url.ts

@@ -0,0 +1,20 @@
+import { useRuntimeEnv } from './runtime-env/client';
+
+/* eslint-disable turbo/no-undeclared-env-vars */
+export const useBaseUrl = () => {
+  const { NEXT_PUBLIC_WEBAPP_URL } = useRuntimeEnv();
+
+  if (typeof window !== 'undefined') {
+    return '';
+  }
+
+  if (process.env.VERCEL_URL) {
+    return `https://${process.env.VERCEL_URL}`;
+  }
+
+  if (NEXT_PUBLIC_WEBAPP_URL) {
+    return NEXT_PUBLIC_WEBAPP_URL;
+  }
+
+  return `http://localhost:${process.env.PORT ?? 3000}`;
+};

packages/prisma/migrations/20231028094931_add_user_timestamp_columns/migration.sql

@@ -0,0 +1,4 @@
+-- AlterTable
+ALTER TABLE "User" ADD COLUMN     "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+ADD COLUMN     "lastSignedIn" TIMESTAMP(3) NOT NULL DEFAULT '1970-01-01 00:00:00 +00:00',
+ADD COLUMN     "updatedAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP;

packages/prisma/migrations/20231028095542_use_now_for_last_signed_in/migration.sql

@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "User" ALTER COLUMN "lastSignedIn" SET DEFAULT CURRENT_TIMESTAMP;

packages/prisma/migrations/20231030055821_add_database_indexes/migration.sql

@@ -0,0 +1,23 @@
+-- CreateIndex
+CREATE INDEX "Document_userId_idx" ON "Document"("userId");
+
+-- CreateIndex
+CREATE INDEX "Document_status_idx" ON "Document"("status");
+
+-- CreateIndex
+CREATE INDEX "Field_documentId_idx" ON "Field"("documentId");
+
+-- CreateIndex
+CREATE INDEX "Field_recipientId_idx" ON "Field"("recipientId");
+
+-- CreateIndex
+CREATE INDEX "Recipient_documentId_idx" ON "Recipient"("documentId");
+
+-- CreateIndex
+CREATE INDEX "Recipient_token_idx" ON "Recipient"("token");
+
+-- CreateIndex
+CREATE INDEX "Signature_recipientId_idx" ON "Signature"("recipientId");
+
+-- CreateIndex
+CREATE INDEX "User_email_idx" ON "User"("email");

packages/prisma/migrations/20231103044612_add_completed_date/migration.sql

@@ -0,0 +1,4 @@
+-- AlterTable
+ALTER TABLE "Document" ADD COLUMN     "completedAt" TIMESTAMP(3);
+
+UPDATE "Document" SET "completedAt" = "updatedAt" WHERE "status" = 'COMPLETED';

packages/prisma/schema.prisma

@@ -26,6 +26,9 @@ model User {
   password           String?
   source             String?
   signature          String?
+  createdAt          DateTime             @default(now())
+  updatedAt          DateTime             @default(now()) @updatedAt
+  lastSignedIn       DateTime             @default(now())
   roles              Role[]               @default([USER])
   identityProvider   IdentityProvider     @default(DOCUMENSO)
   accounts           Account[]
@@ -33,6 +36,8 @@ model User {
   Document           Document[]
   Subscription       Subscription?
   PasswordResetToken PasswordResetToken[]
+
+  @@index([email])
 }
 
 model PasswordResetToken {
@@ -111,12 +116,15 @@ model Document {
   Field          Field[]
   ShareLink      DocumentShareLink[]
   documentDataId String
-  documentData   DocumentData   @relation(fields: [documentDataId], references: [id], onDelete: Cascade)
+  documentData   DocumentData        @relation(fields: [documentDataId], references: [id], onDelete: Cascade)
   documentMeta   DocumentMeta?
-  createdAt      DateTime       @default(now())
-  updatedAt      DateTime       @default(now()) @updatedAt
+  createdAt      DateTime            @default(now())
+  updatedAt      DateTime            @default(now()) @updatedAt
+  completedAt    DateTime?
 
   @@unique([documentDataId])
+  @@index([userId])
+  @@index([status])
 }
 
 enum DocumentDataType {
@@ -134,11 +142,11 @@ model DocumentData {
 }
 
 model DocumentMeta {
-  id       String    @id @default(cuid())
-  subject  String?
-  message  String?
-  documentId Int @unique
-  document Document @relation(fields: [documentId], references: [id], onDelete: Cascade)
+  id         String   @id @default(cuid())
+  subject    String?
+  message    String?
+  documentId Int      @unique
+  document   Document @relation(fields: [documentId], references: [id], onDelete: Cascade)
 }
 
 enum ReadStatus {
@@ -172,6 +180,8 @@ model Recipient {
   Signature     Signature[]
 
   @@unique([documentId, email])
+  @@index([documentId])
+  @@index([token])
 }
 
 enum FieldType {
@@ -198,6 +208,9 @@ model Field {
   Document    Document   @relation(fields: [documentId], references: [id], onDelete: Cascade)
   Recipient   Recipient? @relation(fields: [recipientId], references: [id], onDelete: Cascade)
   Signature   Signature?
+
+  @@index([documentId])
+  @@index([recipientId])
 }
 
 model Signature {
@@ -210,6 +223,8 @@ model Signature {
 
   Recipient Recipient @relation(fields: [recipientId], references: [id], onDelete: Cascade)
   Field     Field     @relation(fields: [fieldId], references: [id], onDelete: Restrict)
+
+  @@index([recipientId])
 }
 
 model DocumentShareLink {

packages/trpc/server/document-router/router.ts

@@ -3,6 +3,7 @@ import { TRPCError } from '@trpc/server';
 import { getServerLimits } from '@documenso/ee/server-only/limits/server';
 import { createDocument } from '@documenso/lib/server-only/document/create-document';
 import { deleteDraftDocument } from '@documenso/lib/server-only/document/delete-draft-document';
+import { duplicateDocumentById } from '@documenso/lib/server-only/document/duplicate-document-by-id';
 import { getDocumentById } from '@documenso/lib/server-only/document/get-document-by-id';
 import { getDocumentAndSenderByToken } from '@documenso/lib/server-only/document/get-document-by-token';
 import { sendDocument } from '@documenso/lib/server-only/document/send-document';
@@ -172,4 +173,23 @@ export const documentRouter = router({
         });
       }
     }),
+
+  duplicateDocument: authenticatedProcedure
+    .input(ZGetDocumentByIdQuerySchema)
+    .mutation(async ({ input, ctx }) => {
+      try {
+        const { id } = input;
+
+        return await duplicateDocumentById({
+          id,
+          userId: ctx.user.id,
+        });
+      } catch (err) {
+        console.log(err);
+        throw new TRPCError({
+          code: 'BAD_REQUEST',
+          message: 'We are unable to duplicate this document. Please try again later.',
+        });
+      }
+    }),
 });

packages/tsconfig/process-env.d.ts

@@ -21,6 +21,9 @@ declare namespace NodeJS {
     NEXT_PRIVATE_UPLOAD_BUCKET?: string;
     NEXT_PRIVATE_UPLOAD_ACCESS_KEY_ID?: string;
     NEXT_PRIVATE_UPLOAD_SECRET_ACCESS_KEY?: string;
+    NEXT_PRIVATE_UPLOAD_DISTRIBUTION_DOMAIN?: string;
+    NEXT_PRIVATE_UPLOAD_DISTRIBUTION_KEY_ID?: string;
+    NEXT_PRIVATE_UPLOAD_DISTRIBUTION_KEY_CONTENTS?: string;
 
     NEXT_PRIVATE_SIGNING_TRANSPORT?: 'local' | 'http' | 'gcloud-hsm';
     NEXT_PRIVATE_SIGNING_PASSPHRASE?: string;

packages/ui/components/document/document-share-button.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { HTMLAttributes, useState } from 'react';
+import React, { HTMLAttributes, useState } from 'react';
 
 import { Copy, Share } from 'lucide-react';
 import { FaXTwitter } from 'react-icons/fa6';
@@ -11,6 +11,7 @@ import {
   TOAST_DOCUMENT_SHARE_SUCCESS,
 } from '@documenso/lib/constants/toast';
 import { generateTwitterIntent } from '@documenso/lib/universal/generate-twitter-intent';
+import { useRuntimeEnv } from '@documenso/lib/universal/runtime-env/client';
 import { trpc } from '@documenso/trpc/react';
 import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
@@ -25,12 +26,19 @@ import {
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
 export type DocumentShareButtonProps = HTMLAttributes<HTMLButtonElement> & {
-  token: string;
+  token?: string;
   documentId: number;
+  trigger?: (_props: { loading: boolean; disabled: boolean }) => React.ReactNode;
 };
 
-export const DocumentShareButton = ({ token, documentId, className }: DocumentShareButtonProps) => {
+export const DocumentShareButton = ({
+  token,
+  documentId,
+  className,
+  trigger,
+}: DocumentShareButtonProps) => {
   const { toast } = useToast();
+  const { NEXT_PUBLIC_WEBAPP_URL } = useRuntimeEnv();
 
   const { copyShareLink, createAndCopyShareLink, isCopyingShareLink } = useCopyShareLink({
     onSuccess: () => toast(TOAST_DOCUMENT_SHARE_SUCCESS),
@@ -58,7 +66,7 @@ export const DocumentShareButton = ({ token, documentId, className }: DocumentSh
 
   const onCopyClick = async () => {
     if (shareLink) {
-      await copyShareLink(`${window.location.origin}/share/${shareLink.slug}`);
+      await copyShareLink(`${NEXT_PUBLIC_WEBAPP_URL}/share/${shareLink.slug}`);
     } else {
       await createAndCopyShareLink({
         token,
@@ -81,10 +89,16 @@ export const DocumentShareButton = ({ token, documentId, className }: DocumentSh
       slug = result.slug;
     }
 
+    // Ensuring we've prewarmed the opengraph image for the Twitter
+    await fetch(`${NEXT_PUBLIC_WEBAPP_URL}/share/${slug}/opengraph`, {
+      // We don't care about the response, so we can use no-cors
+      mode: 'no-cors',
+    });
+
     window.open(
       generateTwitterIntent(
         `I just ${token ? 'signed' : 'sent'} a document with @documenso. Check it out!`,
-        `${process.env.NEXT_PUBLIC_WEBAPP_URL}/share/${slug}`,
+        `${NEXT_PUBLIC_WEBAPP_URL}/share/${slug}`,
       ),
       '_blank',
     );
@@ -94,16 +108,21 @@ export const DocumentShareButton = ({ token, documentId, className }: DocumentSh
 
   return (
     <Dialog open={isOpen} onOpenChange={onOpenChange}>
-      <DialogTrigger asChild>
-        <Button
-          variant="outline"
-          disabled={!token || !documentId}
-          className={cn('flex-1', className)}
-          loading={isLoading || isCopyingShareLink}
-        >
-          {!isLoading && !isCopyingShareLink && <Share className="mr-2 h-5 w-5" />}
-          Share
-        </Button>
+      <DialogTrigger onClick={(e) => e.stopPropagation()} asChild>
+        {trigger?.({
+          disabled: !token || !documentId,
+          loading: isLoading || isCopyingShareLink,
+        }) || (
+          <Button
+            variant="outline"
+            disabled={!token || !documentId}
+            className={cn('flex-1', className)}
+            loading={isLoading || isCopyingShareLink}
+          >
+            {!isLoading && !isCopyingShareLink && <Share className="mr-2 h-5 w-5" />}
+            Share
+          </Button>
+        )}
       </DialogTrigger>
 
       <DialogContent position="end">
@@ -124,8 +143,21 @@ export const DocumentShareButton = ({ token, documentId, className }: DocumentSh
                 'animate-pulse': !shareLink?.slug,
               })}
             >
-              {process.env.NEXT_PUBLIC_WEBAPP_URL}/share/{shareLink?.slug || '...'}
+              {NEXT_PUBLIC_WEBAPP_URL}/share/{shareLink?.slug || '...'}
             </span>
+            <div
+              className={cn('bg-muted/40 mt-4 aspect-video overflow-hidden rounded-lg border', {
+                'animate-pulse': !shareLink?.slug,
+              })}
+            >
+              {shareLink?.slug && (
+                <img
+                  src={`${NEXT_PUBLIC_WEBAPP_URL}/share/${shareLink.slug}/opengraph`}
+                  alt="sharing link"
+                  className="h-full w-full object-cover"
+                />
+              )}
+            </div>
           </div>
 
           <Button variant="outline" className="mt-4" onClick={onTweetClick}>

packages/ui/primitives/command.tsx

@@ -25,13 +25,18 @@ const Command = React.forwardRef<
 
 Command.displayName = CommandPrimitive.displayName;
 
-type CommandDialogProps = DialogProps;
+type CommandDialogProps = DialogProps & {
+  commandProps?: React.ComponentPropsWithoutRef<typeof CommandPrimitive>;
+};
 
-const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
+const CommandDialog = ({ children, commandProps, ...props }: CommandDialogProps) => {
   return (
     <Dialog {...props}>
       <DialogContent className="overflow-hidden p-0 shadow-2xl">
-        <Command className="[&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+        <Command
+          {...commandProps}
+          className="[&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-4 [&_[cmdk-item]_svg]:w-4"
+        >
           {children}
         </Command>
       </DialogContent>

packages/ui/primitives/document-flow/add-signers.tsx

@@ -176,7 +176,7 @@ export const AddSignersFormPartial = ({
                 <div>
                   <button
                     type="button"
-                    className="inline-flex h-10 w-10 items-center justify-center text-slate-500 hover:opacity-80 disabled:cursor-not-allowed disabled:opacity-50"
+                    className="justify-left inline-flex h-10 w-10 items-center text-slate-500 hover:opacity-80 disabled:cursor-not-allowed disabled:opacity-50"
                     disabled={
                       isSubmitting ||
                       hasBeenSentToRecipientId(signer.nativeId) ||

packages/ui/primitives/document-flow/document-flow-root.tsx

@@ -61,8 +61,14 @@ export const DocumentFlowFormContainerContent = ({
   ...props
 }: DocumentFlowFormContainerContentProps) => {
   return (
-    <div className={cn('flex flex-1 flex-col', className)} {...props}>
-      <div className="-mx-2 flex flex-1 flex-col overflow-y-auto px-2">{children}</div>
+    <div
+      className={cn(
+        'custom-scrollbar -mx-2 flex flex-1 flex-col overflow-y-auto overflow-x-hidden px-2',
+        className,
+      )}
+      {...props}
+    >
+      <div className="flex flex-1 flex-col">{children}</div>
     </div>
   );
 };
@@ -90,7 +96,6 @@ export type DocumentFlowFormContainerStepProps = {
 };
 
 export const DocumentFlowFormContainerStep = ({
-  title,
   step,
   maxStep,
 }: DocumentFlowFormContainerStepProps) => {

packages/ui/styles/theme.css

@@ -93,3 +93,24 @@
   mask-composite: exclude;
   -webkit-mask-composite: xor;
 }
+
+.custom-scrollbar::-webkit-scrollbar {
+  width: 6px;
+  background: transparent;
+  border-radius: 10px;
+  scrollbar-gutter: stable;
+}
+
+.custom-scrollbar::-webkit-scrollbar-track {
+  border-radius: 10px;
+}
+
+.custom-scrollbar::-webkit-scrollbar-thumb {
+  background: rgb(100 116 139 / 1);
+  border-radius: 10px;
+  width: 8px;
+}
+
+.custom-scrollbar::-webkit-scrollbar-thumb:hover {
+  background: rgb(100 116 139 / 0.5);
+}

turbo.json

@@ -49,6 +49,9 @@
     "NEXT_PRIVATE_UPLOAD_BUCKET",
     "NEXT_PRIVATE_UPLOAD_ACCESS_KEY_ID",
     "NEXT_PRIVATE_UPLOAD_SECRET_ACCESS_KEY",
+    "NEXT_PRIVATE_UPLOAD_DISTRIBUTION_DOMAIN",
+    "NEXT_PRIVATE_UPLOAD_DISTRIBUTION_KEY_ID",
+    "NEXT_PRIVATE_UPLOAD_DISTRIBUTION_KEY_CONTENTS",
     "NEXT_PRIVATE_SIGNING_TRANSPORT",
     "NEXT_PRIVATE_SIGNING_PASSPHRASE",
     "NEXT_PRIVATE_SIGNING_LOCAL_FILE_PATH",
@@ -72,6 +75,7 @@
     "NEXT_PRIVATE_SMTP_FROM_ADDRESS",
     "NEXT_PRIVATE_STRIPE_API_KEY",
     "NEXT_PRIVATE_STRIPE_WEBHOOK_SECRET",
+    "NEXT_PRIVATE_GITHUB_TOKEN",
     "VERCEL",
     "VERCEL_ENV",
     "VERCEL_URL",