Merge branch 'main' into feat/docker-image

* fix: add type="button" to modal close buttons to fix Enter key form submission

Previously, pressing Enter in modal form inputs would dismiss the modal instead
of submitting the form because close buttons defaulted to type="submit". This
adds explicit type="button" to all modal close buttons to ensure Enter key
properly submits forms.

Fixes:
- New board creation via Enter key
- New workspace creation via Enter key
- New card creation via Enter key
- New list creation via Enter key
- Member invitation via Enter key
- Label creation/editing via Enter key
- Board URL updates via Enter key
- Import boards forms via Enter key

* fix: submit forms on enter key submission

---------

Co-authored-by: Henry <henry_ball@hotmail.co.uk>

.dockerignore

@@ -1,5 +1,7 @@
 .env
 
+docker-compose.override.yml
+
 Dockerfile
 ./**/*/Dockerfile
 

.env.example

@@ -10,7 +10,6 @@ NEXT_PUBLIC_AVATAR_BUCKET_NAME=
 
 S3_REGION=
 S3_ENDPOINT=
-S3_ENDPOINT=
 S3_ACCESS_KEY_ID=
 S3_SECRET_ACCESS_KEY=
 

.gitignore

@@ -43,3 +43,6 @@ dist/
 
 # turbo
 .turbo
+
+# docker
+docker-compose.override.yml

README.md

@@ -32,6 +32,10 @@
 
 See our [roadmap](https://kan.bn/kan/roadmap) for upcoming features.
 
+## Screenshot 👁️
+
+<img width="1507" alt="hero-dark" src="https://github.com/user-attachments/assets/5f7b6ad3-f31d-4b45-93dc-0132b3f2afd4" />
+
 ## Made With 🛠️
 
 - [Next.js](https://nextjs.org/?ref=kan.bn)
@@ -41,7 +45,7 @@ See our [roadmap](https://kan.bn/kan/roadmap) for upcoming features.
 - [Drizzle ORM](https://orm.drizzle.team/?ref=kan.bn)
 - [React Email](https://react.email/?ref=kan.bn)
 
-## Local Development 🛠️
+## Local Development 🧑‍💻
 
 1. Clone the repository (or fork)
 
@@ -62,6 +66,30 @@ pnpm install
 pnpm dev
 ```
 
+## Environment Variables 🔐
+
+| Variable                         | Description                   | Required         | Example                                       |
+| -------------------------------- | ----------------------------- | ---------------- | --------------------------------------------- |
+| `POSTGRES_URL`                   | PostgreSQL connection URL     | Yes              | `postgres://user:pass@localhost:5432/db`      |
+| `EMAIL_FROM`                     | Sender email address          | Yes              | `"Kan <hello@mail.kan.bn>"`                   |
+| `EMAIL_URL`                      | Email service API URL         | Yes              | `https://api.resend.com/emails`               |
+| `EMAIL_TOKEN`                    | Email service API token       | Yes              | `re_xxxx`                                     |
+| `NEXT_PUBLIC_BASE_URL`           | Base URL of your installation | Yes              | `http://localhost:3000`                       |
+| `BETTER_AUTH_SECRET`             | Auth encryption secret        | Yes              | Random 32+ char string                        |
+| `BETTER_AUTH_URL`                | Auth callback URL             | Yes              | Same as `NEXT_PUBLIC_BASE_URL`                |
+| `BETTER_AUTH_TRUSTED_ORIGINS`    | Allowed callback origins      | For Google login | `http://localhost:3000,http://localhost:3001` |
+| `GOOGLE_CLIENT_ID`               | Google OAuth client ID        | For Google login | `xxx.apps.googleusercontent.com`              |
+| `GOOGLE_CLIENT_SECRET`           | Google OAuth client secret    | For Google login | `xxx`                                         |
+| `S3_REGION`                      | S3 storage region             | For file uploads | `WEUR`                                        |
+| `S3_ENDPOINT`                    | S3 endpoint URL               | For file uploads | `https://xxx.r2.cloudflarestorage.com`        |
+| `S3_ACCESS_KEY_ID`               | S3 access key                 | For file uploads | `xxx`                                         |
+| `S3_SECRET_ACCESS_KEY`           | S3 secret key                 | For file uploads | `xxx`                                         |
+| `NEXT_PUBLIC_STORAGE_URL`        | Storage service URL           | For file uploads | `https://storage.kanbn.com`                   |
+| `NEXT_PUBLIC_STORAGE_DOMAIN`     | Storage domain name           | For file uploads | `storage.kanbn.com`                           |
+| `NEXT_PUBLIC_AVATAR_BUCKET_NAME` | S3 bucket name for avatars    | For file uploads | `avatars`                                     |
+
+See `.env.example` for a complete list of supported environment variables.
+
 ## Contributing 🤝
 
 We welcome contributions! Please read our [contribution guidelines](CONTRIBUTING.md) before submitting a pull request.

apps/web/Dockerfile

@@ -42,13 +42,6 @@ ENV CI=true
 
 WORKDIR /app
 
-ARG NEXT_PUBLIC_KAN_ENV=${NEXT_PUBLIC_KAN_ENV}
-ARG NEXT_PUBLIC_UMAMI_ID=${NEXT_PUBLIC_UMAMI_ID}
-ARG NEXT_PUBLIC_BASE_URL=${NEXT_PUBLIC_BASE_URL}
-ARG NEXT_PUBLIC_STORAGE_URL=${NEXT_PUBLIC_STORAGE_URL}
-ARG NEXT_PUBLIC_STORAGE_DOMAIN=${NEXT_PUBLIC_STORAGE_DOMAIN}
-ARG NEXT_PUBLIC_AVATAR_BUCKET_NAME=${NEXT_PUBLIC_AVATAR_BUCKET_NAME}
-
 # Copy lockfile and package.json's of isolated subworkspace
 COPY --from=pruner /app/out/pnpm-lock.yaml ./pnpm-lock.yaml
 COPY --from=pruner /app/out/pnpm-workspace.yaml ./pnpm-workspace.yaml

apps/web/next.config.js

@@ -1,9 +1,13 @@
 import { fileURLToPath } from "url";
 import createJiti from "jiti";
+import { env } from "next-runtime-env";
+import { configureRuntimeEnv } from "next-runtime-env/build/configure.js";
 
 // Import env files to validate at build time. Use jiti so we can load .ts files in here.
 createJiti(fileURLToPath(import.meta.url))("./src/env");
 
+configureRuntimeEnv();
+
 /** @type {import("next").NextConfig} */
 const config = {
   reactStrictMode: true,
@@ -22,7 +26,7 @@ const config = {
   typescript: { ignoreBuildErrors: true },
 
   images: {
-    domains: [process.env.NEXT_PUBLIC_STORAGE_DOMAIN ?? ""],
+    domains: [env("NEXT_PUBLIC_STORAGE_DOMAIN") ?? ""],
   },
   experimental: {
     instrumentationHook: true,

apps/web/package.json

@@ -35,6 +35,7 @@
     "jwt-decode": "^4.0.0",
     "next": "^14.2.15",
     "next-logger": "^5.0.1",
+    "next-runtime-env": "^1.7.2",
     "nextjs-cors": "^2.2.0",
     "pino": "^9.6.0",
     "react": "catalog:react18",

apps/web/public/__ENV.js

@@ -0,0 +1,8 @@
+window.__ENV = {
+  NEXT_PUBLIC_UMAMI_ID: "aaed1f55-25e2-4223-b918-e429c390be35",
+  NEXT_PUBLIC_KAN_ENV: "cloud",
+  NEXT_PUBLIC_BASE_URL: "http://localhost:3000",
+  NEXT_PUBLIC_AVATAR_BUCKET_NAME: "avatars",
+  NEXT_PUBLIC_STORAGE_DOMAIN: "storage.kanbn.com",
+  NEXT_PUBLIC_STORAGE_URL: "https://storage.kanbn.com",
+};

apps/web/src/components/FeedbackButton.tsx

@@ -98,12 +98,16 @@ const FeedbackButton: React.FC = () => {
                 onChange={(e) => {
                   setValue("feedback", e.target.value);
                 }}
-                onKeyDown={(e) => {
-                  e.stopPropagation();
-                }}
                 value={watch("feedback")}
                 contentEditable
                 className="max-h-[300px] min-h-[100px]"
+                onKeyDown={async (e) => {
+                  e.stopPropagation();
+                  if (e.key === "Enter" && e.shiftKey) {
+                    e.preventDefault();
+                    await handleSubmit(onSubmit)();
+                  }
+                }}
               />
               <div className="flex flex-row items-center justify-between pt-2">
                 <div>

apps/web/src/components/Input.tsx

@@ -69,6 +69,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
               prefix && "rounded-l-none",
               className && className,
             )}
+            onKeyDown={onKeyDown}
             {...props}
           />
           {type === "password" && (

apps/web/src/components/LabelForm.tsx

@@ -1,5 +1,5 @@
 import { Listbox, Transition } from "@headlessui/react";
-import { Fragment } from "react";
+import { Fragment, useEffect } from "react";
 import { Controller, useForm } from "react-hook-form";
 import { HiChevronUpDown, HiXMark } from "react-icons/hi2";
 
@@ -103,6 +103,12 @@ export function LabelForm({
     }
   };
 
+  useEffect(() => {
+    const nameElement: HTMLElement | null =
+      document.querySelector<HTMLElement>("#label-name");
+    if (nameElement) nameElement.focus();
+  }, []);
+
   return (
     <form onSubmit={handleSubmit(onSubmit)}>
       <div className="px-5 pt-5">
@@ -111,6 +117,7 @@ export function LabelForm({
             {isEdit ? "Edit label" : "New label"}
           </h2>
           <button
+            type="button"
             className="rounded p-1 hover:bg-light-300 focus:outline-none dark:hover:bg-dark-300"
             onClick={(e) => {
               e.preventDefault();
@@ -121,7 +128,17 @@ export function LabelForm({
           </button>
         </div>
 
-        <Input id="label-name" placeholder="Name" {...register("name")} />
+        <Input
+          id="label-name"
+          placeholder="Name"
+          {...register("name")}
+          onKeyDown={async (e) => {
+            if (e.key === "Enter") {
+              e.preventDefault();
+              await handleSubmit(onSubmit)();
+            }
+          }}
+        />
         <Controller
           name="colour"
           control={control}

apps/web/src/components/NewWorkspaceForm.tsx

@@ -61,6 +61,7 @@ export function NewWorkspaceForm() {
             New workspace
           </h2>
           <button
+            type="button"
             className="rounded p-1 hover:bg-light-200 focus:outline-none dark:hover:bg-dark-300"
             onClick={(e) => {
               e.preventDefault();
@@ -75,6 +76,12 @@ export function NewWorkspaceForm() {
           id="workspace-name"
           placeholder="Workspace name"
           {...register("name")}
+          onKeyDown={async (e) => {
+            if (e.key === "Enter") {
+              e.preventDefault();
+              await handleSubmit(onSubmit)();
+            }
+          }}
         />
       </div>
       <div className="mt-12 flex items-center justify-end border-t border-light-600 px-5 pb-5 pt-5 dark:border-dark-600">

apps/web/src/pages/_app.tsx

@@ -2,8 +2,8 @@ import "~/styles/globals.css";
 
 import type { AppType } from "next/app";
 import { Plus_Jakarta_Sans } from "next/font/google";
+import { env } from "next-runtime-env";
 
-import { env } from "~/env";
 import { ModalProvider } from "~/providers/modal";
 import { PopupProvider } from "~/providers/popup";
 import { ThemeProvider } from "~/providers/theme";
@@ -31,13 +31,14 @@ const MyApp: AppType = ({ Component, pageProps }) => {
           position: relative;
         }
       `}</style>
-      {env.NEXT_PUBLIC_UMAMI_ID && (
+      {env("NEXT_PUBLIC_UMAMI_ID") && (
         <script
           defer
           src="https://cloud.umami.is/script.js"
-          data-website-id={env.NEXT_PUBLIC_UMAMI_ID}
+          data-website-id={env("NEXT_PUBLIC_UMAMI_ID")}
         />
       )}
+      <script src="/__ENV.js" />
       <main className="font-sans">
         <ThemeProvider>
           <ModalProvider>

apps/web/src/pages/api/stripe/create_billing_session.ts

@@ -1,4 +1,5 @@
 import type { NextApiRequest, NextApiResponse } from "next";
+import { env } from "next-runtime-env";
 
 import { createNextApiContext } from "@kan/api/trpc";
 import { createStripeClient } from "@kan/stripe";
@@ -22,7 +23,7 @@ export default async function handler(
 
     const session = await stripe.billingPortal.sessions.create({
       customer: user.stripeCustomerId,
-      return_url: `${process.env.NEXT_PUBLIC_BASE_URL}/settings`,
+      return_url: `${env("NEXT_PUBLIC_BASE_URL")}/settings`,
     });
 
     return res.status(200).json({ url: session.url });

apps/web/src/pages/api/stripe/create_checkout_session.ts

@@ -1,4 +1,5 @@
 import type { NextApiRequest, NextApiResponse } from "next";
+import { env } from "next-runtime-env";
 import { z } from "zod";
 
 import { createNextApiContext } from "@kan/api/trpc";
@@ -73,8 +74,8 @@ export default async function handler(
           quantity: 1,
         },
       ],
-      success_url: `${process.env.NEXT_PUBLIC_BASE_URL}${successUrl}`,
-      cancel_url: `${process.env.NEXT_PUBLIC_BASE_URL}${cancelUrl}`,
+      success_url: `${env("NEXT_PUBLIC_BASE_URL")}${successUrl}`,
+      cancel_url: `${env("NEXT_PUBLIC_BASE_URL")}${cancelUrl}`,
       customer: user.stripeCustomerId ?? undefined,
       metadata: {
         workspaceSlug: slug,

apps/web/src/pages/api/upload/image.ts

@@ -1,8 +1,11 @@
 import type { NextApiRequest, NextApiResponse } from "next";
 import { PutObjectCommand, S3Client } from "@aws-sdk/client-s3";
 import { getSignedUrl } from "@aws-sdk/s3-request-presigner";
+import { env } from "next-runtime-env";
+import { createNextApiContext } from "@kan/api/trpc";
 
-import { env } from "~/env";
+
+const allowedContentTypes = ["image/jpeg", "image/png"];
 
 export default async function handler(
   req: NextApiRequest,
@@ -13,14 +16,37 @@ export default async function handler(
   }
 
   try {
-    const { filename, contentType } = req.body;
+    const { user } = await createNextApiContext(req);
+
+    if (!user) {
+      return res.status(401).json({ error: "Unauthorized" });
+    }
+
+    const { filename, contentType } = req.body as {
+      filename: string;
+      contentType: string;
+    };
+
+    // Specific to avatar uploads for now
+    const filenameRegex = /^[a-f0-9\-]+\/[a-zA-Z0-9_\-]+(\.jpg|\.jpeg|\.png)$/;
+
+    if (!filenameRegex.test(filename)) {
+      return res.status(400).json({ error: "Invalid filename" });
+    }
+
+    if (
+      typeof contentType !== "string" ||
+      !allowedContentTypes.includes(contentType)
+    ) {
+      return res.status(400).json({ error: "Invalid content type" });
+    }
 
     const client = new S3Client({
-      region: env.S3_REGION,
-      endpoint: env.S3_ENDPOINT,
+      region: env.S3_REGION ?? "",
+      endpoint: env.S3_ENDPOINT ?? "",
       credentials: {
-        accessKeyId: env.S3_ACCESS_KEY_ID,
-        secretAccessKey: env.S3_SECRET_ACCESS_KEY,
+        accessKeyId: env.S3_ACCESS_KEY_ID ?? "",
+        secretAccessKey: env.S3_SECRET_ACCESS_KEY ?? "",
       },
     });
 
@@ -28,7 +54,7 @@ export default async function handler(
       // @ts-ignore
       client,
       new PutObjectCommand({
-        Bucket: process.env.NEXT_PUBLIC_AVATAR_BUCKET_NAME ?? "",
+        Bucket: env("NEXT_PUBLIC_AVATAR_BUCKET_NAME") ?? "",
         Key: filename,
       }),
     );

apps/web/src/utils/helpers.ts

@@ -1,4 +1,4 @@
-import { env } from "~/env";
+import { env } from "next-runtime-env";
 
 export const formatToArray = (
   value: string | string[] | undefined,
@@ -46,5 +46,5 @@ export const formatMemberDisplayName = (
 };
 
 export const getAvatarUrl = (key: string) => {
-  return `${env.NEXT_PUBLIC_STORAGE_URL}/${env.NEXT_PUBLIC_AVATAR_BUCKET_NAME}/${key}`;
+  return `${env("NEXT_PUBLIC_STORAGE_URL")}/${env("NEXT_PUBLIC_AVATAR_BUCKET_NAME")}/${key}`;
 };

apps/web/src/views/board/components/NewCardForm.tsx

@@ -226,6 +226,7 @@ export function NewCardForm({
             New card
           </h2>
           <button
+            type="button"
             className="rounded p-1 hover:bg-light-200 focus:outline-none dark:hover:bg-dark-300"
             onClick={(e) => {
               closeModal();
@@ -237,7 +238,17 @@ export function NewCardForm({
         </div>
 
         <div>
-          <Input id="title" placeholder="Card title" {...register("title")} />
+          <Input
+            id="title"
+            placeholder="Card title"
+            {...register("title")}
+            onKeyDown={async (e) => {
+              if (e.key === "Enter") {
+                e.preventDefault();
+                await handleSubmit(onSubmit)();
+              }
+            }}
+          />
         </div>
         <div className="mt-2">
           <Input
@@ -245,6 +256,12 @@ export function NewCardForm({
             onChange={(e) => setValue("description", e.target.value)}
             value={watch("description")}
             contentEditable
+            onKeyDown={async (e) => {
+              if (e.key === "Enter" && e.shiftKey) {
+                e.preventDefault();
+                await handleSubmit(onSubmit)();
+              }
+            }}
           />
         </div>
         <div className="mt-2 flex space-x-1">

apps/web/src/views/board/components/NewListForm.tsx

@@ -111,6 +111,7 @@ export function NewListForm({
             New list
           </h2>
           <button
+            type="button"
             className="rounded p-1 hover:bg-light-200 focus:outline-none dark:hover:bg-dark-300"
             onClick={(e) => {
               e.preventDefault();
@@ -121,7 +122,17 @@ export function NewListForm({
           </button>
         </div>
 
-        <Input id="list-name" placeholder="List name" {...register("name")} />
+        <Input
+          id="list-name"
+          placeholder="List name"
+          {...register("name")}
+          onKeyDown={async (e) => {
+            if (e.key === "Enter") {
+              e.preventDefault();
+              await handleSubmit(onSubmit)();
+            }
+          }}
+        />
       </div>
       <div className="mt-12 flex items-center justify-end border-t border-light-600 px-5 pb-5 pt-5 dark:border-dark-600">
         <Toggle

apps/web/src/views/board/components/UpdateBoardSlugForm.tsx

@@ -92,6 +92,7 @@ export function UpdateBoardSlugForm({
             Edit board URL
           </h2>
           <button
+            type="button"
             className="rounded p-1 hover:bg-light-200 focus:outline-none dark:hover:bg-dark-300"
             onClick={(e) => {
               e.preventDefault();
@@ -107,6 +108,12 @@ export function UpdateBoardSlugForm({
           {...register("slug")}
           errorMessage={errors.slug?.message}
           prefix={`kan.bn/${workspaceSlug}/`}
+          onKeyDown={async (e) => {
+            if (e.key === "Enter") {
+              e.preventDefault();
+              await handleSubmit(onSubmit)();
+            }
+          }}
         />
       </div>
       <div className="mt-12 flex items-center justify-end border-t border-light-600 px-5 pb-5 pt-5 dark:border-dark-600">

apps/web/src/views/boards/components/ImportBoardsForm.tsx

@@ -251,6 +251,7 @@ export function ImportBoardsForm() {
         </div>
 
         <button
+          type="button"
           className="rounded p-1 hover:bg-light-200 dark:hover:bg-dark-300"
           onClick={() => closeModal()}
         >

apps/web/src/views/boards/components/NewBoardForm.tsx

@@ -1,9 +1,11 @@
+import { useEffect } from "react";
 import { useForm } from "react-hook-form";
 import { HiXMark } from "react-icons/hi2";
 
 import type { NewBoardInput } from "@kan/api/types";
 
 import Button from "~/components/Button";
+import Input from "~/components/Input";
 import { useModal } from "~/providers/modal";
 import { useWorkspace } from "~/providers/workspace";
 import { api } from "~/utils/api";
@@ -33,12 +35,19 @@ export function NewBoardForm() {
     createBoard.mutate(data);
   };
 
+  useEffect(() => {
+    const titleElement: HTMLElement | null =
+      document.querySelector<HTMLElement>("#name");
+    if (titleElement) titleElement.focus();
+  }, []);
+
   return (
     <form onSubmit={handleSubmit(onSubmit)}>
       <div className="px-5 pt-5">
         <div className="text-neutral-9000 flex w-full items-center justify-between pb-4 dark:text-dark-1000">
           <h2 className="text-sm font-bold">New board</h2>
           <button
+            type="button"
             className="hover:bg-li ght-300 rounded p-1 focus:outline-none dark:hover:bg-dark-300"
             onClick={(e) => {
               e.preventDefault();
@@ -48,11 +57,16 @@ export function NewBoardForm() {
             <HiXMark size={18} className="dark:text-dark-9000 text-light-900" />
           </button>
         </div>
-        <input
+        <Input
           id="name"
           placeholder="Name"
           {...register("name", { required: true })}
-          className="block w-full rounded-md border-0 bg-white/5 py-1.5 text-neutral-900 placeholder-dark-800 shadow-sm ring-1 ring-inset ring-light-600 focus:ring-2 focus:ring-inset focus:ring-light-600 dark:bg-dark-300 dark:text-dark-1000 dark:ring-dark-700 dark:focus:ring-dark-700 sm:text-sm sm:leading-6"
+          onKeyDown={async (e) => {
+            if (e.key === "Enter") {
+              e.preventDefault();
+              await handleSubmit(onSubmit)();
+            }
+          }}
         />
       </div>
 

apps/web/src/views/card/components/NewCommentForm.tsx

@@ -58,6 +58,12 @@ const NewCommentForm = ({ cardPublicId }: { cardPublicId: string }) => {
         disabled={false}
         onChange={(e) => setValue("comment", e.target.value)}
         className="block w-full border-0 bg-transparent py-1.5 text-light-900 focus-visible:outline-none dark:text-dark-1000 sm:text-sm sm:leading-6"
+        onKeyDown={async (e) => {
+          if (e.key === "Enter" && e.shiftKey) {
+            e.preventDefault();
+            await handleSubmit(onSubmit)();
+          }
+        }}
       />
       <div className="flex justify-end">
         <button

apps/web/src/views/members/components/InviteMemberForm.tsx

@@ -1,9 +1,11 @@
+import { useEffect } from "react";
 import { useForm } from "react-hook-form";
 import { HiXMark } from "react-icons/hi2";
 
 import type { InviteMemberInput } from "@kan/api/types";
 
 import Button from "~/components/Button";
+import Input from "~/components/Input";
 import { useModal } from "~/providers/modal";
 import { useWorkspace } from "~/providers/workspace";
 import { api } from "~/utils/api";
@@ -34,12 +36,19 @@ export function InviteMemberForm() {
     createBoard.mutate(data);
   };
 
+  useEffect(() => {
+    const emailElement: HTMLElement | null =
+      document.querySelector<HTMLElement>("#email");
+    if (emailElement) emailElement.focus();
+  }, []);
+
   return (
     <form onSubmit={handleSubmit(onSubmit)}>
       <div className="px-5 pt-5">
         <div className="text-neutral-9000 flex w-full items-center justify-between pb-4 dark:text-dark-1000">
           <h2 className="text-sm font-bold">Add member</h2>
           <button
+            type="button"
             className="hover:bg-li ght-300 rounded p-1 focus:outline-none dark:hover:bg-dark-300"
             onClick={(e) => {
               e.preventDefault();
@@ -49,11 +58,16 @@ export function InviteMemberForm() {
             <HiXMark size={18} className="dark:text-dark-9000 text-light-900" />
           </button>
         </div>
-        <input
+        <Input
           id="email"
           placeholder="Email"
           {...register("email", { required: true })}
-          className="block w-full rounded-md border-0 bg-white/5 py-1.5 text-neutral-900 placeholder-dark-800 shadow-sm ring-1 ring-inset ring-light-600 focus:ring-2 focus:ring-inset focus:ring-light-600 dark:bg-dark-300 dark:text-dark-1000 dark:ring-dark-700 dark:focus:ring-dark-700 sm:text-sm sm:leading-6"
+          onKeyDown={async (e) => {
+            if (e.key === "Enter") {
+              e.preventDefault();
+              await handleSubmit(onSubmit)();
+            }
+          }}
         />
       </div>
 

apps/web/src/views/settings/components/Avatar.tsx

@@ -1,7 +1,7 @@
 import Image from "next/image";
+import { env } from "next-runtime-env";
 import { useState } from "react";
 
-import { env } from "~/env";
 import { usePopup } from "~/providers/popup";
 import { api } from "~/utils/api";
 import { getAvatarUrl } from "~/utils/helpers";
@@ -62,7 +62,7 @@ export default function Avatar({
       setUploading(true);
 
       const response = await fetch(
-        env.NEXT_PUBLIC_BASE_URL + "/api/upload/image",
+        env("NEXT_PUBLIC_BASE_URL") + "/api/upload/image",
         {
           method: "POST",
           headers: {

apps/web/src/views/settings/index.tsx

@@ -1,3 +1,4 @@
+import { env } from "next-runtime-env";
 import { HiMiniArrowTopRightOnSquare } from "react-icons/hi2";
 
 import Button from "~/components/Button";
@@ -95,7 +96,7 @@ export default function SettingsPage() {
               />
             </div>
 
-            {process.env.NEXT_PUBLIC_KAN_ENV === "cloud" && (
+            {env("NEXT_PUBLIC_KAN_ENV") === "cloud" && (
               <div className="mb-8 border-t border-light-300 dark:border-dark-300">
                 <h2 className="mb-4 mt-8 text-[14px] text-neutral-900 dark:text-dark-1000">
                   Billing

docker-compose.yml

@@ -2,6 +2,7 @@ version: "3.7"
 
 services:
   web:
+    image: ghcr.io/kanbn/kan:latest
     ports:
       - "3001:3000"
     networks:
@@ -9,12 +10,6 @@ services:
     build:
       context: .
       dockerfile: ./apps/web/Dockerfile
-      args:
-        NEXT_PUBLIC_KAN_ENV: ${NEXT_PUBLIC_KAN_ENV}
-        NEXT_PUBLIC_UMAMI_ID: ${NEXT_PUBLIC_UMAMI_ID}
-        NEXT_PUBLIC_BASE_URL: ${NEXT_PUBLIC_BASE_URL}
-        NEXT_PUBLIC_STORAGE_URL: ${NEXT_PUBLIC_STORAGE_URL}
-        NEXT_PUBLIC_AVATAR_BUCKET_NAME: ${NEXT_PUBLIC_AVATAR_BUCKET_NAME}
     env_file:
       - .env
     command: ["pnpm", "start"]
@@ -40,7 +35,6 @@ services:
       - NEXT_PUBLIC_AVATAR_BUCKET_NAME=${NEXT_PUBLIC_AVATAR_BUCKET_NAME}
       - NEXT_PUBLIC_STORAGE_DOMAIN=${NEXT_PUBLIC_STORAGE_DOMAIN}
       - NEXT_PUBLIC_UMAMI_ID=${NEXT_PUBLIC_UMAMI_ID}
-
 networks:
   dokploy-network:
     external: true

packages/api/src/openapi.ts

@@ -1,3 +1,4 @@
+import { env } from "next-runtime-env";
 import { generateOpenApiDocument } from "trpc-to-openapi";
 
 import { appRouter } from "./root";
@@ -6,7 +7,7 @@ export const openApiDocument = generateOpenApiDocument(appRouter, {
   title: "Kan API",
   description: "OpenAPI compliant REST API",
   version: "1.0.0",
-  baseUrl: `${process.env.NEXT_PUBLIC_BASE_URL}/api/v1`,
+  baseUrl: `${env("NEXT_PUBLIC_BASE_URL")}/api/v1`,
   docsUrl: "docs.kan.bn",
   tags: ["Auth", "Users", "Boards", "Lists", "Cards", "Labels", "Imports"],
 });

packages/auth/src/auth.ts

@@ -3,6 +3,7 @@ import { drizzleAdapter } from "better-auth/adapters/drizzle";
 import { createAuthMiddleware } from "better-auth/api";
 import { apiKey } from "better-auth/plugins";
 import { magicLink } from "better-auth/plugins/magic-link";
+import { env } from "next-runtime-env";
 
 import type { dbClient } from "@kan/db/client";
 import * as memberRepo from "@kan/db/repository/member.repo";
@@ -70,7 +71,7 @@ export const initAuth = (db: dbClient) => {
           const user = ctx.context.session?.user;
 
           if (
-            process.env.NEXT_PUBLIC_KAN_ENV === "cloud" &&
+            env("NEXT_PUBLIC_KAN_ENV") === "cloud" &&
             user &&
             !user.stripeCustomerId
           ) {

packages/email/src/templates/join-workspace.tsx

@@ -8,6 +8,7 @@ import { Html } from "@react-email/html";
 import { Link } from "@react-email/link";
 import { Preview } from "@react-email/preview";
 import { Text } from "@react-email/text";
+import { env } from "next-runtime-env";
 import * as React from "react";
 
 export const JoinWorkspaceTemplate = ({
@@ -90,7 +91,7 @@ export const JoinWorkspaceTemplate = ({
         />
         <Text style={{ color: "#7e7e7e" }}>
           <Link
-            href={process.env.NEXT_PUBLIC_BASE_URL}
+            href={env("NEXT_PUBLIC_BASE_URL")}
             target="_blank"
             style={{ color: "#7e7e7e", textDecoration: "underline" }}
           >

packages/email/src/templates/magic-link.tsx

@@ -8,6 +8,7 @@ import { Html } from "@react-email/html";
 import { Link } from "@react-email/link";
 import { Preview } from "@react-email/preview";
 import { Text } from "@react-email/text";
+import { env } from "next-runtime-env";
 import * as React from "react";
 
 export const MagicLinkTemplate = ({
@@ -90,7 +91,7 @@ export const MagicLinkTemplate = ({
         />
         <Text style={{ color: "#7e7e7e" }}>
           <Link
-            href={process.env.NEXT_PUBLIC_BASE_URL}
+            href={env("NEXT_PUBLIC_BASE_URL")}
             target="_blank"
             style={{ color: "#7e7e7e", textDecoration: "underline" }}
           >

pnpm-lock.yaml

@@ -138,6 +138,9 @@ importers:
       next-logger:
         specifier: ^5.0.1
         version: 5.0.1(next@14.2.20(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(pino@9.6.0)
+      next-runtime-env:
+        specifier: ^1.7.2
+        version: 1.8.0
       nextjs-cors:
         specifier: ^2.2.0
         version: 2.2.0(next@14.2.20(react-dom@18.3.1(react@18.3.1))(react@18.3.1))
@@ -4461,6 +4464,9 @@ packages:
       winston:
         optional: true
 
+  next-runtime-env@1.8.0:
+    resolution: {integrity: sha512-QJVxzmr2gTao/vZKFgcrByFrifl0YOMTvuUVxcI/X7ratlW+9zMvMmA9AGU9cFsumXJtohWkCvwPdBNdkTCYfw==}
+
   next@14.2.20:
     resolution: {integrity: sha512-yPvIiWsiyVYqJlSQxwmzMIReXn5HxFNq4+tlVQ812N1FbvhmE+fDpIAD7bcS2mGYQwPJ5vAsQouyme2eKsxaug==}
     engines: {node: '>=18.17.0'}
@@ -10665,6 +10671,10 @@ snapshots:
     optionalDependencies:
       pino: 9.6.0
 
+  next-runtime-env@1.8.0:
+    dependencies:
+      chalk: 4.1.2
+
   next@14.2.20(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
     dependencies:
       '@next/env': 14.2.20