fix: bulkCreate to stop imports with duplicate indices (#190)

* fix(db): normalize/compact indices to prevent import duplicates

- bulkCreate now assigns sequential indices per board (preserves order; ignores incoming indices).
- Auto-compact indices after create/insert if duplicates exist, keeping active lists unique and gap-free.
- Prevents reorder errors caused by duplicate indices from Trello imports.

* feat(db): normalize/compact indices with fail-safe duplicate recheck

apps/docs/README.md

@@ -24,9 +24,11 @@ mintlify dev
 
 ### Publishing Changes
 
-Install our Github App to auto propagate changes from your repo to your deployment. Changes will be deployed to production automatically after pushing to the default branch. Find the link to install on your dashboard. 
+Install our Github App to auto propagate changes from your repo to your deployment. Changes will be deployed to production automatically after pushing to the default branch. Find the link to install on your dashboard.
 
 #### Troubleshooting
 
 - Mintlify dev isn't running - Run `mintlify install` it'll re-install dependencies.
 - Page loads as a 404 - Make sure you are running in a folder with `mint.json`
+
+#BUMP

apps/docs/guides/self-hosting/introduction.mdx

@@ -0,0 +1,140 @@
+---
+title: "Introduction"
+description: "Overview and quick start to run Kan on your own infrastructure using Docker Compose."
+mode: "wide"
+tag: "NEW"
+---
+
+This guide introduces how to self-host Kan. It starts with the minimal Docker Compose setup (web + PostgreSQL) and points you to optional features like email and S3-based file storage.
+
+## What you’ll set up
+
+<CardGroup cols={2}>
+  <Card title="Kan" icon="globe" color="#0284c7" horizontal>
+    Next.js application served on port 3000.
+  </Card>
+  <Card title="PostgreSQL 15" icon="database" color="#65a30d" horizontal>
+    Primary database for Kan data.
+  </Card>
+</CardGroup>
+
+<Note>
+  For file uploads (avatars), OAuth, and other advanced options, see the
+  Environment Variables section in the README and the dedicated [S3
+  guide](/guides/self-hosting/s3). The [full
+  compose](https://github.com/kanbn/kan/blob/main/docker-compose.yml) in the
+  repo includes a richer configuration via <code>.env</code>.
+</Note>
+
+## Prerequisites
+
+- Docker and Docker Compose
+- A long random string for <code>BETTER_AUTH_SECRET</code> (32+ chars)
+
+## Quick start
+
+<Steps>
+  <Step title="Create a docker-compose.yml">
+    Paste the following minimal configuration into a new <code>docker-compose.yml</code> file:
+
+    ```yaml
+    services:
+      web:
+        image: ghcr.io/kanbn/kan:latest
+        container_name: kan-web
+        ports:
+          - "3000:3000"
+        networks:
+          - kan-network
+        environment:
+          NEXT_PUBLIC_BASE_URL: http://localhost:3000
+          BETTER_AUTH_SECRET: your_auth_secret
+          POSTGRES_URL: postgresql://kan:your_postgres_password@postgres:5432/kan_db
+          NEXT_PUBLIC_ALLOW_CREDENTIALS: true
+        depends_on:
+          - postgres
+        restart: unless-stopped
+
+      postgres:
+        image: postgres:15
+        container_name: kan-db
+        environment:
+          POSTGRES_DB: kan_db
+          POSTGRES_USER: kan
+          POSTGRES_PASSWORD: your_postgres_password
+        ports:
+          - 5432:5432
+        volumes:
+          - kan_postgres_data:/var/lib/postgresql/data
+        restart: unless-stopped
+        networks:
+          - kan-network
+
+    networks:
+      kan-network:
+
+    volumes:
+      kan_postgres_data:
+    ```
+
+    <Tip>
+      The example above is intentionally minimal. The repository provides a more feature-complete compose file at [docker-compose.yml](https://github.com/kanbn/kan/blob/main/docker-compose.yml) if you want environment-based configuration, OAuth, S3, and more.
+    </Tip>
+
+  </Step>
+
+  <Step title="Start the stack">
+    Bring everything up in detached mode:
+
+    ```bash
+    docker compose up -d
+    ```
+
+    Once started, open [http://localhost:3000](http://localhost:3000).
+
+  </Step>
+
+  <Step title="Manage the containers">
+    Useful commands while developing or testing:
+
+    - Stop the containers: <code>docker compose down</code>
+    - View logs: <code>docker compose logs -f</code>
+    - Restart: <code>docker compose restart</code>
+
+  </Step>
+
+  <Step title="Configure environment (optional)">
+    For a production-like setup and more features (email, OAuth, file uploads, etc.), create a <code>.env</code> file and set the relevant variables shown in the README’s Environment Variables section.
+
+    <Accordion title="Common variables">
+      ```bash
+      # Required
+      NEXT_PUBLIC_BASE_URL=http://localhost:3000
+      BETTER_AUTH_SECRET=replace_with_long_random_string
+      POSTGRES_URL=postgresql://kan:your_postgres_password@postgres:5432/kan_db
+
+      # Optional: Email
+      EMAIL_FROM="Kan <hello@mail.kan.bn>"
+      SMTP_HOST=smtp.resend.com
+      SMTP_PORT=465
+      SMTP_USER=resend
+      SMTP_PASSWORD=re_xxxx
+      SMTP_SECURE=true
+
+      # Optional: Auth toggles
+      NEXT_PUBLIC_ALLOW_CREDENTIALS=true
+      NEXT_PUBLIC_DISABLE_SIGN_UP=false
+      ```
+
+      <Note type="warning">
+        If you plan to enable file uploads (avatars, etc.), you’ll also need S3 variables (<code>S3_ENDPOINT</code>, <code>S3_ACCESS_KEY_ID</code>, <code>S3_SECRET_ACCESS_KEY</code>, <code>NEXT_PUBLIC_STORAGE_URL</code>, <code>NEXT_PUBLIC_STORAGE_DOMAIN</code>, …). See the S3 guide linked at the top.
+      </Note>
+    </Accordion>
+
+  </Step>
+</Steps>
+
+## Reference
+
+- [GitHub README](https://github.com/kanbn/kan/blob/main/README.md#self-hosting-)
+- [GitHub docker-compose.yml](https://github.com/kanbn/kan/blob/main/docker-compose.yml)

apps/docs/guides/self-hosting/s3.mdx

@@ -0,0 +1,397 @@
+---
+title: "Kan + MinIO (S3)"
+mode: "wide"
+tag: "NEW"
+---
+
+Deploy Kan with PostgreSQL and MinIO (S3-compatible storage) using Docker Compose, with clear steps and production notes.
+
+## What you’ll set up
+
+<CardGroup cols={2}>
+  <Card title="Kan" icon="globe" color="#0284c7" horizontal>
+    Kan web app (Next.js), on port 3000.
+  </Card>
+  <Card title="PostgreSQL 15" icon="database" color="#65a30d" horizontal>
+    PostgreSQL database for Kan.
+  </Card>
+</CardGroup>
+<Card title="MinIO (S3-compatible)" icon="cloud" color="#ca8a04" horizontal>
+  MinIO object storage (console port 9001, S3 API port 9000).
+</Card>
+
+## How it works
+
+- Kan stores data in PostgreSQL.
+- Kan uploads files (e.g., avatars) to MinIO over the S3 API.
+- The browser fetches public files directly from MinIO’s public URL.
+- The Next.js image optimizer in Kan must be explicitly allowed to fetch from your storage host.
+
+Key domain settings:
+
+- <code>NEXT_PUBLIC_BASE_URL</code> → the Kan site
+- <code>NEXT_PUBLIC_STORAGE_URL</code> → the public S3 base URL
+- <code>NEXT_PUBLIC_STORAGE_DOMAIN</code> → the exact S3 hostname (no scheme)
+
+## Prerequisites
+
+- Docker and Docker Compose
+- Open local ports: 3000 (Kan), 5432 (Postgres), 9000/9001 (MinIO)
+- A long random string for <code>BETTER_AUTH_SECRET</code> (32+ chars)
+
+<Note type="warning">
+  For production you’ll want a reverse proxy (Traefik/Nginx/Caddy), valid TLS
+  certificates, and DNS for your domains (e.g., <code>kan.example.com</code>,{" "}
+  <code>s3.example.com</code>).
+</Note>
+
+## Quick start
+
+<Tip type="info">
+  Why <code>localtest.me</code>? It resolves to <code>127.0.0.1</code>{" "}
+  automatically, so you can test domain-based configs locally without editing
+  hosts.
+</Tip>
+
+<Steps>
+  <Step title="Set environment variables">
+    Provide the minimum required configuration (local example):
+
+    ```bash
+    NEXT_PUBLIC_BASE_URL=http://kan.localtest.me:3000
+    BETTER_AUTH_SECRET=<long random string>
+    POSTGRES_URL=postgresql://kan:<password>@postgres:5432/kan_db
+
+    # MinIO/S3
+    S3_ENDPOINT=http://s3.localtest.me:9000
+    S3_ACCESS_KEY_ID=<minio-access-key>
+    S3_SECRET_ACCESS_KEY=<minio-secret-key>
+    S3_REGION=none
+    S3_FORCE_PATH_STYLE=true
+
+    # Public storage access
+    NEXT_PUBLIC_STORAGE_URL=http://s3.localtest.me:9000
+    NEXT_PUBLIC_STORAGE_DOMAIN=s3.localtest.me
+    NEXT_PUBLIC_AVATAR_BUCKET_NAME=kan
+    ```
+
+    <Note type="info">
+      Issue #109 fix: make sure <code>NEXT_PUBLIC_STORAGE_DOMAIN</code> exactly
+      equals the hostname that serves your images (no scheme, no port).
+    </Note>
+
+    Optional (see README for full list): Email (`EMAIL_FROM`, `SMTP_HOST`, `SMTP_PORT`, `SMTP_USER`, `SMTP_PASSWORD`, `SMTP_SECURE`), OAuth/OIDC (`GOOGLE_*`, `GITHUB_*`, `OIDC_*`), auth toggles, Trello import, etc.
+
+  </Step>
+
+  <Step title="Create or review Docker Compose files">
+    You can start from the minimal compose at the repository root (<code>docker-compose.yml</code>) and review the production-oriented settings in <code>cloud/docker-compose.yml</code>.
+
+    Start with the minimal setup (web + postgres + minio) and ensure environment variables are passed to the web service.
+
+    <Accordion title="Docker Compose example">
+
+    ```yaml
+    services:
+      postgres:
+        image: postgres:15
+        container_name: kan-db
+        ports:
+          - "5432:5432"
+        environment:
+          POSTGRES_USER: kan
+          POSTGRES_PASSWORD: changeme
+          POSTGRES_DB: kan_db
+        volumes:
+          - pg_data:/var/lib/postgresql/data
+        restart: unless-stopped
+
+      minio:
+        image: minio/minio:latest
+        container_name: kan-minio
+        command: server /data --console-address ":9001"
+        ports:
+          - "9000:9000" # S3 API
+          - "9001:9001" # Console
+        environment:
+          # Use the same credentials in your .env
+          # as S3_ACCESS_KEY_ID / S3_SECRET_ACCESS_KEY
+          MINIO_ROOT_USER: minio
+          MINIO_ROOT_PASSWORD: minio123456789
+        volumes:
+          - minio_data:/data
+        restart: unless-stopped
+
+      web:
+        image: ghcr.io/kanbn/kan:latest
+        container_name: kan-web
+        depends_on:
+          - postgres
+          - minio
+        ports:
+          - "3000:3000"
+        # Load variables from .env
+        # (see the "Set environment variables" step)
+        env_file:
+          - .env
+        restart: unless-stopped
+
+    volumes:
+      pg_data:
+      minio_data:
+    ```
+
+    <Note type="info">
+      Ensure your <code>.env</code> contains values that match this compose file.
+      For example:
+      <ul>
+        <li>
+          <code>POSTGRES_URL=postgresql://kan:changeme@postgres:5432/kan_db</code>
+        </li>
+        <li>
+          <code>S3_ENDPOINT=http://s3.localtest.me:9000</code>
+        </li>
+        <li>
+          <code>S3_ACCESS_KEY_ID=minio</code> and{" "}
+          <code>S3_SECRET_ACCESS_KEY=minio123456789</code>
+        </li>
+        <li>
+          <code>S3_FORCE_PATH_STYLE=true</code>
+        </li>
+        <li>
+          <code>NEXT_PUBLIC_STORAGE_URL=http://s3.localtest.me:9000</code>
+        </li>
+        <li>
+          <code>NEXT_PUBLIC_STORAGE_DOMAIN=s3.localtest.me</code>
+        </li>
+        <li>
+          <code>NEXT_PUBLIC_AVATAR_BUCKET_NAME=kan</code>
+        </li>
+      </ul>
+    </Note>
+
+    </Accordion>
+
+  </Step>
+
+  <Step title="Start services">
+
+    ```bash
+    docker compose up -d
+    ```
+
+    Then open:
+
+    <ul>
+      <li>
+        Kan: <a href="http://kan.localtest.me:3000">http://kan.localtest.me:3000</a>
+      </li>
+      <li>
+        MinIO Console:{" "}
+        <a href="http://minio.localtest.me:9001">http://minio.localtest.me:9001</a>
+      </li>
+      <li>
+        MinIO S3 API:{" "}
+        <a href="http://s3.localtest.me:9000">http://s3.localtest.me:9000</a>
+      </li>
+    </ul>
+
+  </Step>
+
+  <Step title="Initialize MinIO">
+    1) Log into the MinIO Console (http://minio.localtest.me:9001).
+
+    2. Create a bucket (e.g., <code>kan</code>).
+
+    3. For simple public avatars, apply a read-only policy so GET requests are allowed for objects:
+
+    ```json
+    {
+      "Version": "2012-10-17",
+      "Statement": [
+        {
+          "Effect": "Allow",
+          "Principal": { "AWS": ["*"] },
+          "Action": ["s3:GetBucketLocation", "s3:ListBucket"],
+          "Resource": ["arn:aws:s3:::kan"]
+        },
+        {
+          "Effect": "Allow",
+          "Principal": { "AWS": ["*"] },
+          "Action": ["s3:GetObject"],
+          "Resource": ["arn:aws:s3:::kan/*"]
+        }
+      ]
+    }
+    ```
+
+    <Note type="warning">
+      Alternatively, keep the bucket private and use presigned URLs. In that case,
+      ensure your server and browser access paths are correctly configured.
+    </Note>
+
+  </Step>
+
+  <Step title="Verify the setup">
+    <ul>
+      <li>Sign in to Kan and upload an avatar (Settings).</li>
+      <li>Confirm the object is created in your MinIO bucket.</li>
+      <li>The avatar should render without errors.</li>
+    </ul>
+
+    If you see a 400 from <code>/\_next/image</code> with “url parameter is not allowed”:
+
+    <ul>
+      <li>
+        <code>NEXT_PUBLIC_STORAGE_DOMAIN</code> must exactly match the S3 hostname
+        that serves images.
+      </li>
+      <li>
+        <code>NEXT_PUBLIC_STORAGE_URL</code> should use the same host (with
+        scheme/port).
+      </li>
+      <li>Ensure you’re using the latest Kan image.</li>
+    </ul>
+
+  </Step>
+</Steps>
+
+## Production setup
+
+<Tabs>
+  <Tab title="Local">
+
+  <ul>
+    <li><code>NEXT_PUBLIC_BASE_URL=http://kan.localtest.me:3000</code></li>
+    <li><code>S3_ENDPOINT=http://s3.localtest.me:9000</code></li>
+    <li><code>NEXT_PUBLIC_STORAGE_URL=http://s3.localtest.me:9000</code></li>
+    <li><code>NEXT_PUBLIC_STORAGE_DOMAIN=s3.localtest.me</code></li>
+    <li>Keep <code>S3_FORCE_PATH_STYLE=true</code> for MinIO.</li>
+  </ul>
+  </Tab>
+  <Tab title="Production">
+
+  <ul>
+    <li><code>NEXT_PUBLIC_BASE_URL=https://kan.example.com</code></li>
+    <li><code>S3_ENDPOINT=https://s3.example.com</code></li>
+    <li><code>NEXT_PUBLIC_STORAGE_URL=https://s3.example.com</code></li>
+    <li><code>NEXT_PUBLIC_STORAGE_DOMAIN=s3.example.com</code></li>
+    <li>Keep <code>S3_FORCE_PATH_STYLE=true</code> for MinIO.</li>
+    <li>Put Kan and MinIO behind HTTPS with a reverse proxy (Traefik/Nginx) and valid TLS.</li>
+  </ul>
+  </Tab>
+</Tabs>
+
+## Troubleshooting
+
+<AccordionGroup>
+  <Accordion title="Files upload but don’t display">
+    <ul>
+      <li>If public: confirm GET is allowed on objects (bucket policy).</li>
+      <li>If private: ensure presigned URLs are generated and valid.</li>
+      <li>403 AccessDenied indicates permissions, not CORS. CORS is not required for simple <code>&lt;img&gt;</code> GETs.</li>
+    </ul>
+  </Accordion>
+
+  <Accordion title="Make the bucket public (read-only) with mc" defaultOpen>
+    Use your MinIO root credentials to allow anonymous reads:
+
+    ```bash
+    # Replace with your MINIO_ROOT_PASSWORD
+    MINIO_PASS='<your-minio-password>'
+
+    # Point mc at MinIO via the container network (no ports required)
+    docker run --rm --network container:kan-minio minio/mc \
+      mc alias set local http://127.0.0.1:9000 minio "$MINIO_PASS"
+
+    # Allow public downloads from the bucket
+    docker run --rm --network container:kan-minio minio/mc \
+      mc anonymous set download local/kan
+
+    # Optional: verify anonymous status
+    docker run --rm --network container:kan-minio minio/mc \
+      mc anonymous get local/kan
+    ```
+
+  </Accordion>
+
+  <Accordion title="Alternative: S3 bucket policy (AWS CLI)">
+    If you prefer a bucket policy, apply a public-read policy for objects:
+
+    ```json policy.json
+    {
+      "Version": "2012-10-17",
+      "Statement": [
+        {
+          "Sid": "PublicReadGetObject",
+          "Effect": "Allow",
+          "Principal": "*",
+          "Action": ["s3:GetObject"],
+          "Resource": ["arn:aws:s3:::kan/*"]
+        }
+      ]
+    }
+    ```
+
+    ```bash
+    # Use your MinIO root credentials
+    MINIO_PASS='<your-minio-password>'
+
+    docker run --rm --network container:kan-minio \
+      -e AWS_ACCESS_KEY_ID=minio \
+      -e AWS_SECRET_ACCESS_KEY="$MINIO_PASS" \
+      -e AWS_DEFAULT_REGION=us-east-1 -e AWS_S3_FORCE_PATH_STYLE=true \
+      -v "$PWD:/work" amazon/aws-cli \
+      s3api put-bucket-policy --bucket kan --policy file:///work/policy.json \
+      --endpoint-url http://127.0.0.1:9000
+    ```
+
+  </Accordion>
+
+<Accordion title="Next.js optimizer 400 — url parameter is not allowed">
+  <ul>
+    <li>
+      Exact match on <code>NEXT_PUBLIC_STORAGE_DOMAIN</code> with your storage
+      host.
+    </li>
+    <li>
+      Same host in <code>NEXT_PUBLIC_STORAGE_URL</code>.
+    </li>
+    <li>Update to the latest Kan image.</li>
+  </ul>
+</Accordion>
+
+  <Accordion title="Next/Image: “url parameter is valid but upstream response is invalid”">
+    <ul>
+      <li>This means Next.js accepted the URL, but the upstream returned a non-image (e.g., 403 HTML/XML).</li>
+      <li>Fix: make the bucket/object publicly readable (see above), or use presigned URLs.</li>
+      <li>Sanity test from the web network (replace with your image URL):</li>
+    </ul>
+
+    ```bash
+    IMG_URL="https://s3.example.com/kan/path/to/avatar.jpg"
+
+    # Headers/content-type as seen from the app network
+    docker run --rm --network container:kan-web curlimages/curl:8.9.1 \
+      -I -L --max-redirs 5 "$IMG_URL"
+
+    # Quick status + content-type summary
+    docker run --rm --network container:kan-web curlimages/curl:8.9.1 \
+      -s -o /dev/null -w "HTTP:%{http_code} CT:%{content_type} URL:%{url_effective}\n" -L "$IMG_URL"
+    ```
+
+  </Accordion>
+
+  <Accordion title="Connectivity checks">
+    <ul>
+      <li>The Kan container must reach <code>S3_ENDPOINT</code>.</li>
+      <li>Verify DNS/ports inside the container (e.g., <code>docker exec -it &lt;kan-container&gt; sh</code>).</li>
+    </ul>
+  </Accordion>
+</AccordionGroup>
+
+## References
+
+- [Kan README](https://github.com/kanbn/kan/blob/main/README.md)
+- [Cloud compose reference](https://github.com/kanbn/kan/blob/main/cloud/docker-compose.yml)
+- [Kan #109 Issue](https://github.com/kanbn/kan/issues/109)

apps/docs/mint.json

@@ -44,6 +44,18 @@
       "group": "Get Started",
       "pages": ["introduction"]
     },
+    {
+      "group": "Guides",
+      "pages": [
+        {
+          "group": "Self-Hosting",
+          "pages": [
+            "guides/self-hosting/introduction",
+            "guides/self-hosting/s3"
+          ]
+        }
+      ]
+    },
     {
       "group": "Import",
       "pages": ["imports/trello"]

apps/web/i18n.json

@@ -2,7 +2,7 @@
   "version": 0,
   "locale": {
     "source": "en",
-    "targets": ["fr", "de", "es", "it", "nl"]
+    "targets": ["fr", "de", "es", "it", "nl", "ru"]
   },
   "buckets": {
     "po": {

apps/web/i18n.lock

@@ -6,8 +6,11 @@ checksums:
     "%7B0%7D%20%7C%20%7B1%7D/singular": 4628f9c6ec13c2dc2984a6ab80e19f8b
     "%7B0%7D%20labels/singular": 785f92bedf786ff3e285adfc07c69d18
     "%7BboardCount%2C%20plural%2C%20one%20%7BImport%20board%20(1)%7D%20other%20%7BImport%20boards%20(%7BboardCount%7D)%7D%7D/singular": 72358c550bd1a99fcb6e8952f0f947ef
+    "%2410%2Fmonth/singular": cab5e752ed83096e34fca780d90e1fb9
+    "%248%2Fmonth/singular": 4667034934bb2bc3d569c70b94205b51
     1%20user/singular: 3b547431ab12f0fba84307e6a81109d8
     A%20powerful%2C%20flexible%20kanban%20app%20that%20helps%20you%20organise%20work%2C%20track%20progress%2C%20and%20deliver%20results%E2%80%94all%20in%20one%20place./singular: d405b83b0d631cb72f4347c10bcbb643
+    Account/singular: 01215c12fb1cdb93bd0c84c1382bef56
     Account%20deleted/singular: a25da96a1579c4491be0a95669ef18a4
     Activity/singular: 1948763de8e531483a798b68195e297e
     Activity%20logs/singular: 8b1f0bb96a905646ecfad1cfdfa42168
@@ -26,12 +29,18 @@ checksums:
     added%20checklist%20%3C0%3E%7B0%7D%3C%2F0%3E/singular: fb6a852c50c1629f47c6f155fc93fdee
     added%20checklist%20item%20%3C0%3E%7B0%7D%3C%2F0%3E/singular: bdd202da20b1fffbec21792c5453f90c
     added%20label%20%3C0%3E%7B0%7D%3C%2F0%3E/singular: b32be052b3d57de0c9120fa7f9fc86ee
+    Adding%20a%20new%20member%20will%20cost%20an%20additional%20%7Bprice%7D%20(%7BbillingType%7D)%20per%20seat./singular: 12e88573028306110fbc15ef1e714892
+    Adjust%20the%20square%20crop%20to%20fit%20your%20avatar./singular: a4df26bbce6f14c6962fac1324db00a8
     Admin%20roles/singular: 32a5d78073b9bb9a246773afba8831df
-    All%20seats%20are%20free%20during%20the%20beta%20until%20Sept%201st!/singular: 015cec3899cf99e37c3cf231d432e31d
     All%20systems%20operational/singular: ee943a4046b09e6334cceeea9fda2bfc
     Already%20have%20an%20account%3F%20%3C0%3E%3C1%3ESign%20in%3C%2F1%3E%3C%2F0%3E/singular: 2959fd276248208b65cb27ed46b20135
     An%20error%20occurred%20while%20disconnecting%20your%20Trello%20account./singular: 0aa3973b860c1faf8d9123aebf567e40
     An%20unexpected%20error%20occurred.%20Please%20try%20again%20later./singular: 1b5749b0cca6a62d75a577bee6804074
+    API/singular: 01d9819514e27056dcc69463194b63d2
+    API%20key%20created/singular: 8dbb2b60a719b0d120e774d6666c8c45
+    API%20key%20name/singular: 2d8aeb08b2cce3b750a584bbc5ce6d1d
+    API%20key%20name%20cannot%20exceed%2030%20characters/singular: 3ea1c7d68e1074a75128017b097b727a
+    API%20key%20name%20is%20required/singular: 870970743b14cb56e7fb7b410af0e933
     API%20keys/singular: 07f3620a30e08136f0b072c9af8d1eef
     API%20Reference/singular: 7dcc877064bfdf889ec55dbc9e06a242
     Applicants/singular: 4babd8331a1441e91087f855f43e57f8
@@ -47,10 +56,13 @@ checksums:
     Awaiting%20Customer/singular: 122c108794f321c10e05a08f09b11457
     Backlog/singular: 35919fd5b10ad212839a75e72829fe4e
     Basic%20Kanban/singular: e46ebc406749486f3907436970d4d6c7
+    billed%20annually/singular: c782a8085ffee456bfc56c34ccc5e71c
+    billed%20monthly/singular: 793f2728acf06e9f06d6cdc26dfcf0cd
     Billing/singular: b01dbdd049ebbd4a349fa64d6ce65a3b
     Billing%20portal/singular: dc3afa14ffe19f5920992a0c9d49d525
     Blog%20Post/singular: 38e027f212be445dc530e427fc642a20
     Board/singular: 101ff39aab674c033c15ab978d0d8bac
+    Board%20analytics/singular: 336a8c70a91adc49c15266167ee84cc0
     Board%20name%20cannot%20exceed%20100%20characters/singular: 985c0177744ec56d8dac84f66ec284ca
     Board%20name%20is%20required/singular: dbd0c6cc945ab19e702fc27f970a023b
     Board%20not%20found/singular: 5af9844595fa8aed5985066620435515
@@ -69,11 +81,12 @@ checksums:
     Card%20not%20found/singular: 91509e2f92b0b3b11330b6983139fdbf
     Card%20title/singular: 7c34f59f4005e6cb3a6ff546ea0b96e3
     Change%20Password/singular: a552fc5c4189ebc3e2e6018edda7d18f
-    Change%20the%20language%20of%20the%20app./singular: fb20db145e28ed44aba89c146ded7bfc
+    Change%20your%20language%20preferences./singular: 293d49fc3c75e9c425b64bd7126e6b46
     Check%20your%20inbox/singular: e9a430fcd298def74212238df0f680d6
     Checklist%20name/singular: 5eb5de823f7ca5a4d97bb41e6a3f675a
     Clear%20filters/singular: 8f40ab5af527e4b190da94e7b6221379
     Click%20on%20the%20link%20we've%20sent%20to%20%7BmagicLinkRecipient%7D%20to%20sign%20in./singular: 210b6ff8727f976182ec3f29ea3c7667
+    Close/singular: 2c2e22f8424a1031de89063bd0022e16
     Code%20Review/singular: a2da6c2339301e7c3ddf068c4ff9f7e8
     Collaborate%20seamlessly%20with%20your%20team./singular: c5f10e431aaf8b51519bc009a4a4080c
     Coming%20soon/singular: ee2b0671e00972773210c5be5a9ccb89
@@ -83,7 +96,6 @@ checksums:
     Complete%20control%20and%20ownership%3A/singular: 0d8b682ba873272217425ccfc96aa9cd
     completed%20a%20checklist%20item/singular: 757b04c6c80cc927e1c597c0ad4fda33
     completed%20checklist%20item%20%3C0%3E%7B0%7D%3C%2F0%3E/singular: 71ec18acf051fc909a48a07ca3578673
-    Confirm%20URL%20change/singular: e14b4ce081d1ef6194b37e1814e97b39
     Confirm%20your%20new%20password/singular: a0d2935d7b63f8dd19d7c0de47524416
     Connect%20Trello/singular: 4440a0b9e387ef7136e3958e7a089213
     Connect%20your%20favorite%20tools%20to%20streamline%20your%20workflow./singular: 033c5dcdb059ccb634aef7fe63f2f45d
@@ -95,6 +107,7 @@ checksums:
     Continue%20with%20%7B0%7D/singular: 2eaf6e1da91e208f7c5fb6bf862fe8a6
     Control%20who%20can%20view%20and%20edit%20your%20boards./singular: 2a7e0bec29bac26280de707e2fe8bce5
     Create%20another/singular: 2de8a82a416eb78c0462aa36278edc9a
+    Create%20API%20key/singular: 70ed8431c6ed5f7fdef122cc34f75b41
     Create%20board/singular: 155b62818bfab0e34f0089e1b34a32f3
     Create%20card/singular: 32792935dd5837a9433909b04021c22b
     Create%20checklist/singular: 5cbca15a7004558c4e6d381f83a34da2
@@ -107,9 +120,11 @@ checksums:
     Create%20workspace/singular: 2e6718e79964ea5ce22d76c2189c77ca
     created%20the%20card/singular: 605475f5aaeb4dbccbf7c4eb9107b43d
     Critical/singular: eb327cd411b50aee954f8d1d215d003a
+    Crop%20your%20avatar/singular: eb25e2d5972ec36a0b40481c8136ab15
     Current%20password%20is%20required/singular: 72536bca9598680027f2be8ce80ac280
     Custom%20domain/singular: b09e7a9c187b7163b4a6cfc78042fe42
-    Custom%20URLs%20are%20a%20premium%20feature.%20You'll%20be%20directed%20to%20upgrade%20your%20account./singular: b52e4f6122cf739c9551d29beb89b25e
+    Custom%20URLs%20require%20upgrading%20to%20a%20Pro%20plan/singular: f7275e3b473b8f7b39dab6b37eb26fea
+    Custom%20workspace%20URL/singular: 7ba841d0946eb04fa3d17d74365be37b
     Customer%20Support/singular: 50e3c77e22e41061ca85ea2f02625a2e
     Dark/singular: 73e6e208ba628b26e90fcf6dce15e1b2
     Delete/singular: 8bcf303dd10a645b5baacb02b47d72c9
@@ -161,6 +176,8 @@ checksums:
     Error%20updating%20workspace%20description/singular: 7a9fd7c69b90ab848ee1f1d4a4995381
     Error%20updating%20workspace%20name/singular: 46025f42a7d5eff689e9cb8bed14a1e4
     Error%20updating%20workspace%20URL/singular: 9da6c012e1b512d8c7fbd812626c4675
+    Error%20upgrading%20subscription/singular: 57cc47581c7faaffb3b1721b6352b576
+    Error%20upgrading%20to%20Pro/singular: 934c6867d9bdbe6099b2c0f5a3107f78
     Error%20uploading%20profile%20image/singular: 0ba02753a797a74c6ea7b622c9f69c71
     Everything%20in%20the%20free%20plan%2C%20plus%3A/singular: 62b44c4973b92b806c69a4b15e0256dc
     Everything%20you%20need%2C%20free%20forever.%20Unlimited%20boards%2C%20unlimited%20lists%2C%20unlimited%20cards.%20Upgrade%20any%20time./singular: fa21632ab1468edf10acda2fe7b71323
@@ -176,6 +193,7 @@ checksums:
     Find%20answers%20to%20common%20questions%20about%20the%20project.%20Can't%20find%20what%20you're%20looking%20for%3F%20Feel%20free%20to%20%3C0%3Econtact%20us%3C%2F0%3E./singular: 4d99230dad703bf2d71ba670c2f79d3d
     For%20long-term%20sustainability%2C%20we%20recognise%20all%20good%20open%20source%20projects%20need%20a%20source%20of%20revenue.%20Ours%20comes%20from%20the%20paid%20cloud%20offering%20for%20workspaces%20with%20multiple%20users%20(free%20during%20the%20beta)%20and%20for%20custom%20workspace%20slugs.%20There's%20no%20obligation%20to%20use%20it%2C%20and%20you%20can%20self-host%20the%20software%20on%20your%20own%20infrastructure%20free%20of%20charge./singular: 4eedacd4311ff69bf0fd87083c90a268
     Free/singular: 0326365539c004f6088656f692602078
+    Free%20Plan/singular: c995acccc1e3cba379786892a5b4d4e5
     Free%2C%20forever/singular: ae4f2f81e88a50b5f250ef8e8e77e74b
     Full-time/singular: fe6e201f6676ae354111435cf6c76910
     Fun/singular: 395bdc48e943762b6cde649f4a96771d
@@ -216,6 +234,7 @@ checksums:
     Invite/singular: 181884cea804cbde665f160811ee7ad0
     Invite%20another/singular: acb543563dab7edbcf46060a53ade3a3
     Invite%20member/singular: ade922db1be6b26bc979565ce5de2bc7
+    Inviting%20members%20requires%20a%20Team%20Plan.%20You'll%20be%20redirected%20to%20upgrade%20your%20workspace./singular: 03eeed2d715e770259f722ba48a61ab3
     Junior/singular: ed1bd2c59a824fdcdd56fc8a0660fe9f
     Kanban%20is%20better%20with%20a%20team.%20Perfect%20for%20small%20and%20growing%20teams%20looking%20to%20collaborate./singular: a77bee43046b260797c8936ad23e9223
     Kanban%20reimagined/singular: 613ccfdd9f54c66cbf68cfa313498766
@@ -223,6 +242,9 @@ checksums:
     Labels/singular: 6f15627a90002323eac018274b6922d6
     Labels%20%26%20Filters/singular: 8f0bdd6084516f8241cb613178114390
     Language/singular: 277fd1a41cc237a437cd1d5e4a80463b
+    Launch%20offer/singular: 624592ba2ecf647a3fe60d493c1ee71a
+    Launch%20offer%3A%20Get%20unlimited%20members%20with%20Pro/singular: 8c1be80f5b2fcc112922282afbe30287
+    Launch%20offer%3A%20unlimited%20seats%20for%20just%20%2429%2Fmonth%20with%20Pro/singular: 235d1cda21811c296afdc0dcc438cc24
     Learning/singular: 90e91da3f870f065f2da9aa9adf53514
     Legal/singular: 00d3f08da61a21887009819cf93fb414
     License/singular: ac2bcac75151e2fcd9eb768cea275a77
@@ -241,11 +263,13 @@ checksums:
     Members/singular: 0932e80cba1e3e0a7f52bb67ff31da32
     Members%20%7C%20%7B0%7D/singular: a29e3e9f1076acd178c417d047584e88
     Monthly/singular: 818f1192e32bb855597f930d3e78806e
+    monthly%20billing/singular: e228107df80015377112d41f4f155cb3
     moved%20the%20card%20from%20%3C0%3E%7B0%7D%3C%2F0%3E%20to%3C1%3E%7B1%7D%3C%2F1%3E/singular: 11edf0427766c26db541d46379dc3c16
     moved%20the%20card%20to%20another%20list/singular: 2e8c41bfafb42fa299ce56e4300205ff
     Name/singular: 9368b5a047572b6051f334af5aa76819
     Need%20help%3F/singular: 04e7322f2d3ffb2d73ff2f64b71637c8
     New/singular: 126d036fae5fb6b629728ecb97e6195b
+    New%20API%20key/singular: db3088aedba6e4a99b46451c5b3d36ed
     New%20board/singular: 63f4e979e29a7fc2f5c09ff91fa75966
     New%20card/singular: a33f6219a756127f91c2523cfe845a19
     New%20checklist/singular: 58252b71e9693ae0f4d2d0b72108a569
@@ -273,6 +297,7 @@ checksums:
     Password%20Changed/singular: 1fcebe9ddb46f722a57f195efddc695d
     Password%20must%20be%20at%20least%208%20characters/singular: 4c30501d085eaccea47af34212bb26a7
     Passwords%20do%20not%20match/singular: 37ca1f4e0afc9a0b8e9617f767103c92
+    Paused/singular: edb1f7b7219e1c9b7aa67159090d6991
     Payment%20frequency/singular: 63ded0e4ffb462ca8bd33d38e4691d86
     Pending/singular: 030a6f3395d5d4efddd3cc67d6009039
     per%20user%2Fmonth/singular: 72af182c1ba6df6732640f4d8a78d360
@@ -288,6 +313,8 @@ checksums:
     Priority%20email%20support/singular: 678538c912a770b1e1416ecdb8e299b1
     Privacy%20policy/singular: 462c6a536b52873e4498785c66dd48c8
     Private/singular: d740d0660e68c61db1853489356030ae
+    Pro%20Plan/singular: 76a09fd843b496610f8cf1dced417b62
+    Pro%20Plan%20%E2%88%9E/singular: a898be9e4610706b9b8146a209e8ba16
     Profile%20image%20updated/singular: 1ba6609b50bc217a36ab659563e78dae
     Profile%20picture/singular: d9b5e595877ffe2557486a987dd28274
     Public/singular: c834f11dab0881632aded3f01d4f8fa9
@@ -309,7 +336,6 @@ checksums:
     Resolution/singular: 6d8bd9e1bd7dae5ae38c93061d32990e
     Resources/singular: ec7fb05ed963bb6781a35782b3475502
     Review/singular: 299f75db25382980b2895622d7712927
-    Revoke/singular: be57685a85b6dfeaeb6eab4e9560b520
     Roadmap/singular: c60f4a1acf30e566861bf130f13b9ae7
     Role/singular: 53743bbb6ca938f5b893552e839d067f
     Run%20on%20your%20own%20infrastructure/singular: eba804911562b8dbf9d69c3e27f1d708
@@ -324,7 +350,11 @@ checksums:
     Send%20feedback/singular: 9631cc08d49da04475b30a0d320ce97c
     Senior/singular: 3fff865dc00435f82896fc302ea45630
     Settings/singular: 8df6777277469c1fd88cc18dde2f1cc3
-    Settings%20%7C%20%7B0%7D/singular: b8fc73080bc9c8f4f1403b2a69bd1ac5
+    Settings%20%7C%20Account/singular: 050e18406849ec057edac877c297c3e1
+    Settings%20%7C%20API/singular: 85101e4b802a09ad9e3f01ff116f0894
+    Settings%20%7C%20Billing/singular: e44cba741d5414035a0b499c5766c203
+    Settings%20%7C%20Integrations/singular: d04992e28016452f6d3d7dcc0b592415
+    Settings%20%7C%20Workspace/singular: 5d0bacf7ff696da940f232df45edfd39
     Sign%20in/singular: cb8757c7450e17de1e226e82fb0fa4a2
     Sign%20up%20%7C%20kan.bn/singular: f3de2a110c90358e6eac07d0b2f663a6
     Sign%20up%20disabled/singular: 9581b1f75b404ac0ecb7e603e0d4189c
@@ -336,9 +366,11 @@ checksums:
     Software%20Development/singular: 67659097ef6bcb194839858b2c4f3a3c
     Star%20on%20Github/singular: e5cb0428f1ac6485688f120d78742875
     Success/singular: c43827becada6750f7a25890905f38b9
+    Supercharge%20your%20workspace%20for%20just%20%2429%2Fmonth.%20Here's%20what%20you'll%20get%3A/singular: 21af8119141afcce5f12da489f34db6a
     Support/singular: 55aab5fd0f31a9cb055a2edeeedfaf63
     Support%20the%20development%20of%20the%20project/singular: c63bab228ab2b1be4370c668a99cd278
     System/singular: 803281c327a02a2feba182f4a2b38311
+    Team%20Plan/singular: 3f0ae9c914f16ceb9a0d7db868f4aa20
     Teams/singular: b63448c05270497973ac4407047dae02
     Templates/singular: 8ed62f56c81fa96c0f3182acb331bf63
     Terms%20of%20service/singular: 0b8a8b23aff021a6cde79613fdb39c28
@@ -350,14 +382,18 @@ checksums:
     Theme/singular: 21fe00b7a518089576fb83c08631107a
     They%20won't%20be%20able%20to%20access%20this%20workspace./singular: 93b740350fe3430319fbca85349e41d9
     This%20action%20can't%20be%20undone./singular: cb222ff89715d8c971e8c25d121e1dbd
+    This%20API%20key%20will%20only%20be%20shown%20once.%20Please%20save%20it%20in%20a%20secure%20location./singular: 7df18d2978d317375f780822f8321c4d
     This%20board%20is%20private%20or%20does%20not%20exist/singular: a217ff3f04463b4df8c86adb6f83c6bc
     This%20board%20URL%20has%20already%20been%20taken/singular: 1d8b40332a031b5b77a3658e48dd51ca
     This%20will%20result%20in%20the%20permanent%20deletion%20of%20all%20data%20associated%20with%20this%20workspace./singular: a31141558af793635c1ddd2fa0a33499
     This%20will%20result%20in%20the%20permanent%20deletion%20of%20all%20data%20associated%20with%20your%20account./singular: b49224632bd6c3b7f5e462912aeb1081
+    This%20workspace%20URL%20has%20already%20been%20taken/singular: b455329e2a71da677acab91d3a00bad6
+    This%20workspace%20URL%20is%20reserved/singular: 7e47c892b93d4334c1606010c06e875e
     This%20workspace%20username%20has%20already%20been%20taken/singular: b7eadb89c615874f416d9658d0428c4c
     To%20Do/singular: d60813ea824f373462471e092d136eed
     Toggle%20menu/singular: 29dea3e0b6238874f8c7a27619df8e36
     Track%20all%20card%20changes%20with%20detailed%20activity%20history./singular: 0d3bac559c71ec4b8734f9f212320de5
+    Trello/singular: b5131f6488b5a439d58db3e22d6de45b
     Trello%20disconnected/singular: 54b24a3e6c9a7eedd8c8d1060ab1175d
     Trello%20imports/singular: 6827eca403faa8f89891d17827e72af9
     Triaging/singular: 1d40799fcae53a8a27688fdae2a48dee
@@ -390,6 +426,7 @@ checksums:
     Unlimited%20cards/singular: f44c1050c4d6aa39c8cdf5f4a7d12577
     Unlimited%20comments/singular: 31dbcf487c49a9997142e96bb3ab0040
     Unlimited%20lists/singular: 5c418701b27b9acbc5dd199719007362
+    Unlimited%20members/singular: f2949ca2dc18b0063af92e60779abb65
     Update/singular: 079fc039262fd31b10532929685c2d1b
     Update%20label/singular: 97880b503dfe956941c5f23025a1c102
     updated%20a%20checklist%20item/singular: 198e1d1d503f4b69b752dd84d0cc0e9d
@@ -397,6 +434,9 @@ checksums:
     updated%20the%20title/singular: 98cf8f12923ec1a58e767e3a40863b21
     updated%20the%20title%20to%20%3C0%3E%7B0%7D%3C%2F0%3E/singular: aca196d729401d8adc5c8ca9d558840e
     Upgrade/singular: 63c3b52882e0d779859307d672c178c2
+    Upgrade%20to%20Pro/singular: 972773025e763ddf53273df6d37a729a
+    Upgrade%20to%20Pro%20(%2429%2Fmonth)/singular: 9a91ea70f5eb55aac96640bf0fd7feff
+    Upgrade%20to%20Team%20Plan/singular: 40e2ef151266937f8bbe63b3d361f645
     Urgent/singular: e79afcd4398e52e10e7e8243a7eecabe
     URL%20can%20only%20contain%20letters%2C%20numbers%2C%20and%20hyphens/singular: 875d37d2d920f98ef60a314eda8a5d9a
     URL%20cannot%20exceed%2024%20characters/singular: 395c25732b84ac1f5b63ee310da08e93
@@ -420,6 +460,7 @@ checksums:
     When%20Trello%20launched%20in%202011%2C%20it%20blew%20everyone%20away%20with%20its%20carefully%20designed%20simplicity%2C%20but%20over%20time%20(and%20atlassification)%20it%20lost%20its%20magic%20and%20grew%20into%20something%20closer%20to%20%22Jira%20Lite%22.%20This%20project%20is%20our%20attempt%20to%20recapture%20the%20original%20magic%20of%20Trello's%20simplicity%2C%20in%20open%20source./singular: 60a55e9bd16c3d1beff1a6c7633c5911
     Why%20make%20an%20open%20source%20Trello%3F/singular: 090833338ba8c64ef7a75e0f2615b34b
     Workspace/singular: b63ef0e99ee6f7fef6cbe4971ca6cf0f
+    Workspace%20created%20successfully.%20You%20can%20upgrade%20later%20in%20settings./singular: 8bbaba9f82ff076a08185ada1ee7eb94
     Workspace%20deleted/singular: bc5c267ce3f04de94ff1379cf2ca48a3
     Workspace%20description/singular: 7159d620b7ef5c5afef734989a5be08b
     Workspace%20description%20cannot%20exceed%20280%20characters/singular: d0e83b9a0304d7c36cf8c85d98783ce2
@@ -428,10 +469,12 @@ checksums:
     Workspace%20members/singular: 1857292f9567c556c781a23bd7e10544
     Workspace%20name/singular: 855614bbf862fd6a9f6a3e76943f92d4
     Workspace%20name%20cannot%20exceed%2024%20characters/singular: c8b8f79fb83abf8329cc34c1f51fcfc9
+    Workspace%20name%20is%20required/singular: b8c5162dd08c4d941bc57f9d0cbee451
     Workspace%20name%20must%20be%20at%20least%203%20characters%20long/singular: e448ea97418d44b18b4c21c22b8ba779
     Workspace%20name%20updated/singular: 3206ea410ee1ea4182b27ac0d89f92a1
     Workspace%20slug%20updated/singular: 527b92711d38cb35b40741df43aef047
     Workspace%20URL/singular: f4397a838da0f3a44cbd3ebe408ed6c3
+    workspace-url/singular: 2d034732ec536f3a2667f956fa50d394
     Writing/singular: 4f5f3ee3320c252921f80c42653c5d49
     Yearly/singular: 87f43e016c19cb25860f456549a2f431
     Yes%2C%20we%20offer%20an%20forever%20free%20plan%20for%20individual%20use.%20No%20restrictions%2C%20no%20paywalls%2C%20no%20limits./singular: 963cee303d0ff13c1719f4575e774fe3
@@ -441,6 +484,7 @@ checksums:
     You%20can%20self-host%20by%20following%20the%20instructions%20in%20our%20%3C0%3Erepo%3C%2F0%3E./singular: a6152a41b2d8f64d5a657e5b8bc808a9
     You%20have%20been%20logged%20in%20successfully./singular: ef8fad1dce13ae4112f17c5258655fea
     You%20have%20been%20signed%20up%20successfully./singular: f614a6e3b45f5ffb9a3b0fb420fef84b
+    You%20have%20unlimited%20seats%20with%20your%20Pro%20Plan.%20There%20is%20no%20additional%20charge%20for%20new%20members!/singular: e3dc59a5ba7211cd3d8516b3a79d85ca
     Your%20account%20has%20been%20deleted./singular: 8c8d944e07388c5877effdb2c2803dcf
     Your%20boards%20have%20been%20imported./singular: 403972e7a25afc2415762c1c2b1ec868
     Your%20display%20name%20has%20been%20updated./singular: 15e5fff36c554c16ec5214427fae1bf4

apps/web/lingui.config.ts

@@ -1,7 +1,7 @@
 import type { LinguiConfig } from "@lingui/conf";
 
 const config: LinguiConfig = {
-  locales: ["en", "fr", "de", "es", "it", "nl"],
+  locales: ["en", "fr", "de", "es", "it", "nl", "ru"],
   sourceLocale: "en",
   catalogs: [
     {

apps/web/next.config.js

@@ -52,6 +52,15 @@ const config = {
     // instrumentationHook: true,
     swcPlugins: [["@lingui/swc-plugin", {}]],
   },
+
+  async rewrites() {
+    return [
+      {
+        source: "/settings",
+        destination: "/settings/account",
+      },
+    ];
+  },
 };
 
 // Only allow external images when OIDC is configured (for OIDC provider avatars)

apps/web/package.json

@@ -6,7 +6,7 @@
   "scripts": {
     "build": "pnpm with-env next build",
     "clean": "git clean -xdf .cache .next .turbo node_modules",
-    "dev": "pnpm with-env next dev | pino-pretty",
+    "dev": "pnpm with-env next dev",
     "format": "prettier --check . --ignore-path ../../.gitignore",
     "lint": "eslint",
     "start": "pnpm with-env next start",
@@ -59,6 +59,7 @@
     "react-dom": "catalog:react18",
     "react-hook-form": "^7.51.1",
     "react-icons": "^5.5.0",
+    "react-image-crop": "^11.0.10",
     "react-lottie-player": "^1.5.5",
     "react-markdown": "^10.1.0",
     "superjson": "2.2.1",

apps/web/src/components/Dropdown.tsx

@@ -15,7 +15,7 @@ export default function Dropdown({
       <div>
         <Menu.Button
           disabled={disabled}
-          className="flex h-7 w-7 items-center justify-center rounded-[5px] hover:bg-light-200 dark:hover:bg-dark-200"
+          className="flex h-7 w-7 items-center justify-center rounded-[5px] hover:bg-light-200 focus:outline-none dark:hover:bg-dark-200"
         >
           {children}
         </Menu.Button>
@@ -30,7 +30,7 @@ export default function Dropdown({
         leaveFrom="transform opacity-100 scale-100"
         leaveTo="transform opacity-0 scale-95"
       >
-        <Menu.Items className="absolute right-0 z-30 mt-2 w-56 origin-top-right rounded-md border border-light-200 bg-light-50 p-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:border-dark-400 dark:bg-dark-300">
+        <Menu.Items className="absolute right-0 z-50 mt-2 w-56 origin-top-right rounded-md border border-light-200 bg-light-50 p-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:border-dark-400 dark:bg-dark-300">
           <div className="flex flex-col">
             {items.map((item) => (
               <Menu.Item key={item.label}>

apps/web/src/components/LanguageSelector.tsx

@@ -13,7 +13,7 @@ export function LanguageSelector() {
         id="language-select"
         value={locale}
         onChange={(e) => setLocale(e.target.value as any)}
-        className="mt-8 block w-full max-w-[180px] rounded-lg border-0 bg-light-50 pl-10 shadow-sm ring-1 ring-inset ring-light-300 focus:ring-2 focus:ring-inset focus:ring-light-400 dark:bg-dark-50 dark:text-dark-1000 dark:ring-dark-300 dark:focus:ring-dark-500 sm:text-sm"
+        className="mt-8 block w-full max-w-[180px] rounded-lg border-0 bg-light-50 pl-10 text-sm shadow-sm ring-1 ring-inset ring-light-300 focus:ring-2 focus:ring-inset focus:ring-light-400 dark:bg-dark-50 dark:text-dark-1000 dark:ring-dark-300 dark:focus:ring-dark-500"
       >
         {availableLocales.map((loc) => (
           <option key={loc} value={loc}>

apps/web/src/components/NewWorkspaceForm.tsx

@@ -1,30 +1,106 @@
+import { zodResolver } from "@hookform/resolvers/zod";
 import { t } from "@lingui/core/macro";
-import { useEffect } from "react";
+import { env } from "next-runtime-env";
+import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
-import { HiXMark } from "react-icons/hi2";
+import {
+  HiBolt,
+  HiCheck,
+  HiCheckBadge,
+  HiInformationCircle,
+  HiXMark,
+} from "react-icons/hi2";
+import { twMerge } from "tailwind-merge";
+import { z } from "zod";
 
 import Button from "~/components/Button";
 import Input from "~/components/Input";
+import Toggle from "~/components/Toggle";
+import { useDebounce } from "~/hooks/useDebounce";
 import { useModal } from "~/providers/modal";
 import { usePopup } from "~/providers/popup";
 import { useWorkspace } from "~/providers/workspace";
 import { api } from "~/utils/api";
+import LoadingSpinner from "./LoadingSpinner";
 
-interface FormValues {
-  name: string;
-}
+const schema = z.object({
+  name: z.string().min(1, { message: t`Workspace name is required` }),
+  slug: z
+    .string()
+    .min(3, {
+      message: t`URL must be at least 3 characters long`,
+    })
+    .max(24, { message: t`URL cannot exceed 24 characters` })
+    .regex(/^(?![-]+$)[a-zA-Z0-9-]+$/, {
+      message: t`URL can only contain letters, numbers, and hyphens`,
+    })
+    .optional()
+    .or(z.literal("")),
+});
+
+type FormValues = z.infer<typeof schema>;
 
 export function NewWorkspaceForm() {
   const { closeModal } = useModal();
   const { showPopup } = usePopup();
-  const { switchWorkspace } = useWorkspace();
-  const { register, handleSubmit } = useForm<FormValues>();
+  const { switchWorkspace, availableWorkspaces } = useWorkspace();
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+    watch,
+    trigger,
+    clearErrors,
+    setValue,
+  } = useForm<FormValues>({
+    resolver: zodResolver(schema),
+    defaultValues: {
+      name: "",
+      slug: "",
+    },
+    mode: "onSubmit",
+  });
   const utils = api.useUtils();
 
+  const hasAvailableWorkspaces = availableWorkspaces.length > 0;
+
+  const isCloudEnv = env("NEXT_PUBLIC_KAN_ENV") === "cloud";
+
+  const slug = watch("slug");
+  const [debouncedSlug] = useDebounce(slug, 500);
+  const isTyping = slug !== debouncedSlug;
+
+  // Pro toggle state management
+  const [isProToggleEnabled, setIsProToggleEnabled] = useState(false);
+  const [lastAvailableSlug, setLastAvailableSlug] = useState<string>("");
+
+  // Validate slug only after debounce
+  useEffect(() => {
+    if (isTyping) {
+      // Clear errors while typing
+      clearErrors("slug");
+    } else if (debouncedSlug) {
+      // Validate after debounce
+      void trigger("slug");
+    }
+  }, [isTyping, debouncedSlug, trigger, clearErrors]);
+
+  const checkWorkspaceSlugAvailability =
+    api.workspace.checkSlugAvailability.useQuery(
+      {
+        workspaceSlug: debouncedSlug ?? "",
+      },
+      {
+        enabled: !!debouncedSlug && debouncedSlug.length >= 3 && !errors.slug,
+      },
+    );
+
+  const isWorkspaceSlugAvailable = checkWorkspaceSlugAvailability.data;
+
   const createWorkspace = api.workspace.create.useMutation({
-    onSuccess: (values) => {
+    onSuccess: async (values, variables) => {
       if (values.publicId && values.name) {
-        utils.workspace.all.invalidate();
+        void utils.workspace.all.invalidate();
         switchWorkspace({
           publicId: values.publicId,
           name: values.name,
@@ -33,6 +109,43 @@ export function NewWorkspaceForm() {
           plan: values.plan,
           role: "admin",
         });
+
+        // If in cloud and Pro toggle is enabled, create checkout session for pro
+        if (env("NEXT_PUBLIC_KAN_ENV") === "cloud" && isProToggleEnabled) {
+          try {
+            const response = await fetch(
+              "/api/stripe/create_checkout_session",
+              {
+                method: "POST",
+                headers: {
+                  "Content-Type": "application/json",
+                },
+                body: JSON.stringify({
+                  slug: slug || undefined,
+                  workspacePublicId: values.publicId,
+                  cancelUrl: "/settings/workspace?upgrade=pro",
+                  successUrl: "/boards",
+                }),
+              },
+            );
+
+            const data = await response.json();
+            const url = (data as { url: string }).url;
+
+            if (url) {
+              window.location.href = url;
+              return; // Don't close modal if redirecting to checkout
+            }
+          } catch (error) {
+            console.error("Error creating checkout session:", error);
+            showPopup({
+              header: t`Error upgrading to Pro`,
+              message: t`Workspace created successfully. You can upgrade later in settings.`,
+              icon: "warning",
+            });
+          }
+        }
+
         closeModal();
       }
     },
@@ -51,12 +164,74 @@ export function NewWorkspaceForm() {
     if (nameElement) nameElement.focus();
   }, []);
 
+  const [shouldShowBenefits, setShouldShowBenefits] = useState(false);
+
+  const isValidSlug = slug && slug.length >= 3 && !errors.slug;
+
+  useEffect(() => {
+    if (
+      isCloudEnv &&
+      !checkWorkspaceSlugAvailability.isPending &&
+      isValidSlug
+    ) {
+      const isAvailable = isWorkspaceSlugAvailable?.isAvailable === true;
+      setShouldShowBenefits(isAvailable);
+
+      // Automatically enable Pro toggle when slug is available
+      if (isAvailable) {
+        setIsProToggleEnabled(true);
+        setLastAvailableSlug(slug);
+      }
+    }
+  }, [
+    isValidSlug,
+    isWorkspaceSlugAvailable?.isAvailable,
+    checkWorkspaceSlugAvailability.isPending,
+    slug,
+    isCloudEnv,
+  ]);
+
+  // Reset benefits when slug becomes invalid
+  useEffect(() => {
+    if (!isValidSlug) {
+      setShouldShowBenefits(false);
+    }
+  }, [isValidSlug]);
+
+  // Handle Pro toggle changes
+  const handleProToggleChange = () => {
+    if (isProToggleEnabled) {
+      // Turning off: clear the slug and disable Pro
+      setValue("slug", "");
+      setIsProToggleEnabled(false);
+    } else {
+      // Turning on: restore the last available slug if we have one
+      if (lastAvailableSlug) {
+        setValue("slug", lastAvailableSlug);
+      }
+      setIsProToggleEnabled(true);
+    }
+  };
+
+  const showProBenefits = isProToggleEnabled;
+
   const onSubmit = (values: FormValues) => {
+    // Don't submit if slug is provided but not available
+    if (values.slug && isWorkspaceSlugAvailable?.isAvailable === false) {
+      return;
+    }
+
     createWorkspace.mutate({
       name: values.name,
+      slug: !isCloudEnv && values.slug ? values.slug : undefined,
     });
   };
 
+  const isSlugAvailable =
+    isValidSlug &&
+    isWorkspaceSlugAvailable?.isAvailable &&
+    !isWorkspaceSlugAvailable?.isReserved;
+
   return (
     <form onSubmit={handleSubmit(onSubmit)}>
       <div className="px-5 pt-5">
@@ -66,7 +241,10 @@ export function NewWorkspaceForm() {
           </h2>
           <button
             type="button"
-            className="rounded p-1 hover:bg-light-200 focus:outline-none dark:hover:bg-dark-300"
+            className={twMerge(
+              "rounded p-1 hover:bg-light-200 focus:outline-none dark:hover:bg-dark-300",
+              !hasAvailableWorkspaces && "invisible",
+            )}
             onClick={(e) => {
               e.preventDefault();
               closeModal();
@@ -80,6 +258,7 @@ export function NewWorkspaceForm() {
           id="workspace-name"
           placeholder={t`Workspace name`}
           {...register("name")}
+          errorMessage={errors.name?.message}
           onKeyDown={async (e) => {
             if (e.key === "Enter") {
               e.preventDefault();
@@ -87,10 +266,121 @@ export function NewWorkspaceForm() {
             }
           }}
         />
+
+        <div className="mt-4">
+          <Input
+            id="workspace-slug"
+            placeholder={t`workspace-url`}
+            {...register("slug")}
+            className={`${
+              isSlugAvailable
+                ? "focus:ring-green-500 dark:focus:ring-green-500"
+                : ""
+            }`}
+            errorMessage={
+              errors.slug?.message ??
+              (isWorkspaceSlugAvailable?.isAvailable === false &&
+              isWorkspaceSlugAvailable?.isReserved === false
+                ? t`This workspace URL has already been taken`
+                : isWorkspaceSlugAvailable?.isReserved
+                  ? t`This workspace URL is reserved`
+                  : undefined)
+            }
+            prefix={
+              env("NEXT_PUBLIC_KAN_ENV") === "cloud"
+                ? "kan.bn/"
+                : `${env("NEXT_PUBLIC_BASE_URL")}/`
+            }
+            iconRight={
+              slug && slug.length >= 3 && !errors.slug ? (
+                isWorkspaceSlugAvailable?.isAvailable ? (
+                  <HiCheck className="h-4 w-4 text-green-500" />
+                ) : checkWorkspaceSlugAvailability.isPending || isTyping ? (
+                  <LoadingSpinner />
+                ) : null
+              ) : null
+            }
+            onKeyDown={async (e) => {
+              if (e.key === "Enter") {
+                e.preventDefault();
+                await handleSubmit(onSubmit)();
+              }
+            }}
+          />
+
+          {slug && slug.length >= 3 && shouldShowBenefits && (
+            <div className="mt-2 flex items-center gap-1">
+              <HiInformationCircle className="h-4 w-4 text-dark-900" />
+              <p className="text-xs text-gray-500 dark:text-dark-900">
+                {t`Custom URLs require upgrading to a Pro plan`}
+              </p>
+            </div>
+          )}
+        </div>
+
+        {showProBenefits && (
+          <div className="mt-6">
+            <div className="rounded-md bg-light-100 p-3 text-xs text-light-900 dark:bg-dark-200 dark:text-dark-900">
+              <div className="space-y-3">
+                <div className="flex items-center space-x-3">
+                  <HiCheckBadge className="h-[18px] w-[18px] flex-shrink-0 text-light-1000 dark:text-dark-950" />
+                  <div className="flex items-center space-x-2">
+                    <span className="text-xs text-neutral-900 dark:text-dark-1000">
+                      {t`Unlimited members`}
+                    </span>
+                    <span className="inline-flex items-center rounded-full bg-emerald-500/10 px-2 py-0.5 text-[10px] font-medium text-emerald-600 ring-1 ring-inset ring-emerald-500/20 dark:text-emerald-400 sm:text-[10px]">
+                      {t`Launch offer`}
+                    </span>
+                  </div>
+                </div>
+                <div className="flex items-center space-x-3">
+                  <HiCheckBadge className="h-[18px] w-[18px] flex-shrink-0 text-light-1000 dark:text-dark-950" />
+                  <span className="text-xs text-neutral-900 dark:text-dark-1000">
+                    {t`Custom workspace URL`}
+                  </span>
+                </div>
+                <div className="flex items-center space-x-3">
+                  <HiCheckBadge className="h-[18px] w-[18px] flex-shrink-0 text-light-1000 dark:text-dark-950" />
+                  <div className="flex items-center space-x-2">
+                    <span className="text-xs text-neutral-900 dark:text-dark-1000">
+                      {t`Board analytics`}
+                    </span>
+                    <span className="inline-flex items-center rounded-full bg-gray-500/10 px-2 py-0.5 text-[10px] font-medium text-gray-600 ring-1 ring-inset ring-gray-500/20 dark:text-gray-400 sm:text-[10px]">
+                      {t`Coming soon`}
+                    </span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        )}
       </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">
+      <div
+        className={twMerge(
+          "mt-6 flex items-center justify-end border-t border-light-600 px-5 pb-5 pt-5 dark:border-dark-600",
+          !showProBenefits && "mt-12",
+        )}
+      >
+        {/* Pro Toggle - only show in cloud environment */}
+        {isCloudEnv && (
+          <Toggle
+            isChecked={isProToggleEnabled}
+            onChange={handleProToggleChange}
+            label={t`Upgrade to Pro ($29/month)`}
+          />
+        )}
         <div>
-          <Button type="submit" isLoading={createWorkspace.isPending}>
+          <Button
+            type="submit"
+            isLoading={createWorkspace.isPending}
+            disabled={
+              createWorkspace.isPending ||
+              (!!slug &&
+                (checkWorkspaceSlugAvailability.isPending ||
+                  isWorkspaceSlugAvailable?.isAvailable === false ||
+                  isTyping))
+            }
+          >
             {t`Create workspace`}
           </Button>
         </div>

apps/web/src/components/SettingsLayout.tsx

@@ -0,0 +1,148 @@
+import Link from "next/link";
+import { useRouter } from "next/router";
+import {
+  Listbox,
+  ListboxButton,
+  ListboxOption,
+  ListboxOptions,
+} from "@headlessui/react";
+import { t } from "@lingui/core/macro";
+import { env } from "next-runtime-env";
+import { useEffect, useState } from "react";
+import {
+  HiChevronDown,
+  HiOutlineBanknotes,
+  HiOutlineCodeBracketSquare,
+  HiOutlineRectangleGroup,
+  HiOutlineUser,
+} from "react-icons/hi2";
+
+interface SettingsLayoutProps {
+  children: React.ReactNode;
+  currentTab: string;
+}
+
+export function SettingsLayout({ children, currentTab }: SettingsLayoutProps) {
+  const router = useRouter();
+  const [selectedTabIndex, setSelectedTabIndex] = useState(0);
+
+  const settingsTabs = [
+    {
+      key: "account",
+      icon: <HiOutlineUser />,
+      label: t`Account`,
+      condition: true,
+    },
+    {
+      key: "workspace",
+      icon: <HiOutlineRectangleGroup />,
+      label: t`Workspace`,
+      condition: true,
+    },
+    {
+      key: "billing",
+      label: t`Billing`,
+      icon: <HiOutlineBanknotes />,
+      condition: env("NEXT_PUBLIC_KAN_ENV") === "cloud",
+    },
+    {
+      key: "api",
+      icon: <HiOutlineCodeBracketSquare />,
+      label: t`API`,
+      condition: true,
+    },
+    {
+      key: "integrations",
+      icon: <HiOutlineCodeBracketSquare />,
+      label: t`Integrations`,
+      condition: true,
+    },
+  ];
+
+  const availableTabs = settingsTabs.filter((tab) => tab.condition);
+
+  // Update selected tab when currentTab prop changes
+  useEffect(() => {
+    const tabIndex = availableTabs.findIndex((tab) => tab.key === currentTab);
+    if (tabIndex !== -1) {
+      setSelectedTabIndex(tabIndex);
+    }
+  }, [currentTab, availableTabs]);
+
+  const isTabActive = (tabKey: string) => {
+    return currentTab === tabKey;
+  };
+
+  return (
+    <div className="flex h-full w-full flex-col overflow-hidden">
+      <div className="h-full max-h-[calc(100vdh-3rem)] overflow-y-auto md:max-h-[calc(100vdh-4rem)]">
+        <div className="m-auto max-w-[1100px] px-5 py-6 md:px-28 md:py-12">
+          <div className="mb-8 flex w-full justify-between">
+            <h1 className="font-bold tracking-tight text-neutral-900 dark:text-dark-1000 sm:text-[1.2rem]">
+              {t`Settings`}
+            </h1>
+          </div>
+
+          <div className="focus:outline-none">
+            <div className="sm:hidden">
+              {/* Mobile dropdown */}
+              <Listbox
+                value={selectedTabIndex}
+                onChange={(index) => {
+                  const tabKey = availableTabs[index]?.key;
+                  if (tabKey) {
+                    void router.push(`/settings/${tabKey}`);
+                  }
+                }}
+              >
+                <div className="relative mb-4">
+                  <ListboxButton className="w-full appearance-none rounded-lg border-0 bg-light-50 py-2 pl-3 pr-10 text-left text-sm text-light-1000 shadow-sm ring-1 ring-inset ring-light-300 focus:ring-2 focus:ring-inset focus:ring-light-400 dark:bg-dark-50 dark:text-dark-1000 dark:ring-dark-300 dark:focus:ring-dark-500">
+                    {availableTabs[selectedTabIndex]?.label || "Select a tab"}
+                    <HiChevronDown
+                      aria-hidden="true"
+                      className="pointer-events-none absolute right-3 top-1/2 h-4 w-4 -translate-y-1/2 text-light-900 dark:text-dark-900"
+                    />
+                  </ListboxButton>
+                  <ListboxOptions className="absolute z-10 mt-1 w-full rounded-lg bg-light-50 py-1 text-sm shadow-lg ring-1 ring-inset ring-light-300 dark:bg-dark-50 dark:ring-dark-300">
+                    {availableTabs.map((tab) => (
+                      <ListboxOption
+                        key={tab.key}
+                        value={availableTabs.indexOf(tab)}
+                        className="relative cursor-pointer select-none py-2 pl-3 pr-9 text-light-1000 dark:text-dark-1000"
+                      >
+                        {tab.label}
+                      </ListboxOption>
+                    ))}
+                  </ListboxOptions>
+                </div>
+              </Listbox>
+            </div>
+            <div className="hidden sm:block">
+              <div className="border-b border-gray-200 dark:border-white/10">
+                <nav
+                  aria-label="Tabs"
+                  className="-mb-px flex space-x-8 focus:outline-none"
+                >
+                  {availableTabs.map((tab) => (
+                    <Link
+                      key={tab.key}
+                      href={`/settings/${tab.key}`}
+                      className={`whitespace-nowrap border-b-2 px-1 py-4 text-sm font-medium transition-colors focus:outline-none ${
+                        isTabActive(tab.key)
+                          ? "border-light-1000 text-light-1000 dark:border-dark-1000 dark:text-dark-1000"
+                          : "border-transparent text-light-900 hover:border-light-950 hover:text-light-950 dark:text-dark-900 dark:hover:border-white/20 dark:hover:text-dark-950"
+                      }`}
+                    >
+                      {tab.label}
+                    </Link>
+                  ))}
+                </nav>
+              </div>
+            </div>
+            <div className="focus:outline-none">{children}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

apps/web/src/components/WorkspaceMenu.tsx

@@ -20,12 +20,12 @@ export default function WorkspaceMenu({
     <Menu as="div" className="relative inline-block w-full pb-3 text-left">
       <div>
         {isLoading ? (
-          <div className={twMerge("mb-1", isCollapsed && "md:flex md:p-1.5")}>
+          <div className={twMerge("mb-1 flex", isCollapsed && "md:p-1.5")}>
             <div className="h-6 w-6 animate-pulse rounded-md bg-light-200 dark:bg-dark-200" />
             <div
               className={twMerge(
                 "ml-2 h-6 w-[150px] animate-pulse rounded-md bg-light-200 dark:bg-dark-200",
-                isCollapsed && "hidden md:block",
+                isCollapsed && "md:hidden",
               )}
             />
           </div>
@@ -44,7 +44,7 @@ export default function WorkspaceMenu({
             </span>
             <span
               className={twMerge(
-                "ml-2 text-sm font-bold text-neutral-900 dark:text-dark-1000",
+                "ml-2 truncate text-sm font-bold text-neutral-900 dark:text-dark-1000",
                 isCollapsed && "md:hidden",
               )}
             >
@@ -87,17 +87,17 @@ export default function WorkspaceMenu({
                     onClick={() => switchWorkspace(availableWorkspace)}
                     className="flex w-full items-center justify-between rounded-[5px] px-3 py-2 text-left text-sm text-neutral-900 hover:bg-light-200 dark:text-dark-1000 dark:hover:bg-dark-400"
                   >
-                    <div>
-                      <span className="inline-flex h-5 w-5 items-center justify-center rounded-[5px] bg-indigo-700">
+                    <div className="flex min-w-0 flex-1 items-center">
+                      <span className="inline-flex h-5 w-5 flex-shrink-0 items-center justify-center rounded-[5px] bg-indigo-700">
                         <span className="text-xs font-medium leading-none text-white">
                           {availableWorkspace.name.charAt(0).toUpperCase()}
                         </span>
                       </span>
-                      <span className="ml-2 text-xs font-medium">
+                      <span className="ml-2 truncate text-xs font-medium">
                         {availableWorkspace.name}
                       </span>
                     </div>
-                    {workspace.name === availableWorkspace.name && (
+                    {workspace.publicId === availableWorkspace.publicId && (
                       <span>
                         <HiCheck className="h-4 w-4" aria-hidden="true" />
                       </span>

apps/web/src/components/modal.tsx

@@ -34,7 +34,7 @@ const Modal: React.FC<Props> = ({
 
   return (
     <Transition.Root show={shouldShow} as={Fragment}>
-      <Dialog as="div" className="relative z-10" onClose={closeModal}>
+      <Dialog as="div" className="relative z-50" onClose={closeModal}>
         <Transition.Child
           as={Fragment}
           enter="ease-out duration-300"
@@ -47,7 +47,7 @@ const Modal: React.FC<Props> = ({
           <div className="fixed inset-0 bg-light-50 bg-opacity-40 transition-opacity dark:bg-dark-50 dark:bg-opacity-40" />
         </Transition.Child>
 
-        <div className="fixed inset-0 z-10 w-screen overflow-y-auto">
+        <div className="fixed inset-0 z-50 w-screen overflow-y-auto">
           <div className="flex min-h-full items-start justify-center p-4 text-center sm:items-start sm:p-0">
             <Transition.Child
               as={Fragment}

apps/web/src/hooks/useClipboard.tsx

@@ -0,0 +1,36 @@
+import { useState } from "react";
+
+export function useClipboard({ timeout = 500 } = {}) {
+  const [error, setError] = useState<string | Error | null | undefined>(null);
+  const [copied, setCopied] = useState<boolean>(false);
+  const [copyTimeout, setCopyTimeout] = useState<number | undefined>(undefined);
+
+  const handleCopyResult = (hasError: boolean) => {
+    clearTimeout(copyTimeout);
+
+    setCopyTimeout(
+      setTimeout(() => setCopied(false), timeout) as unknown as number,
+    );
+
+    setCopied(hasError);
+  };
+
+  const copy = (value: string) => {
+    if ("clipboard" in navigator) {
+      navigator.clipboard
+        .writeText(value)
+        .then(() => handleCopyResult(true))
+        .catch((err) => setError(err));
+    } else {
+      setError(new Error("Error: navigator.clipboard is not supported"));
+    }
+  };
+
+  const reset = () => {
+    setError(null);
+    setCopied(false);
+    clearTimeout(copyTimeout);
+  };
+
+  return { copy, reset, error, copied };
+}

apps/web/src/locales/index.ts

@@ -1,4 +1,4 @@
-export const locales = ["en", "fr", "de", "es", "it", "nl"] as const;
+export const locales = ["en", "fr", "de", "es", "it", "nl", "ru"] as const;
 
 export type Locale = (typeof locales)[number];
 
@@ -11,4 +11,5 @@ export const localeNames: Record<Locale, string> = {
   es: "Español",
   it: "Italiano",
   nl: "Nederlands",
+  ru: "Русский",
 };

apps/web/src/pages/_app.tsx

@@ -7,6 +7,7 @@ import type { ReactElement, ReactNode } from "react";
 import { Plus_Jakarta_Sans } from "next/font/google";
 import Script from "next/script";
 import { env } from "next-runtime-env";
+import { ThemeProvider } from "next-themes";
 import posthog from "posthog-js";
 import { PostHogProvider } from "posthog-js/react";
 import { useEffect } from "react";
@@ -14,7 +15,6 @@ import { useEffect } from "react";
 import { LinguiProviderWrapper } from "~/providers/lingui";
 import { ModalProvider } from "~/providers/modal";
 import { PopupProvider } from "~/providers/popup";
-import { ThemeProvider } from "next-themes";
 import { api } from "~/utils/api";
 
 const jakarta = Plus_Jakarta_Sans({
@@ -82,8 +82,8 @@ const MyApp: AppType = ({ Component, pageProps }: AppPropsWithLayout) => {
       <main className="font-sans">
         <LinguiProviderWrapper>
           <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
-              <ModalProvider>
-                <PopupProvider>
+            <ModalProvider>
+              <PopupProvider>
                 {posthogKey ? (
                   <PostHogProvider client={posthog}>
                     {getLayout(<Component {...pageProps} />)}
@@ -91,8 +91,8 @@ const MyApp: AppType = ({ Component, pageProps }: AppPropsWithLayout) => {
                 ) : (
                   getLayout(<Component {...pageProps} />)
                 )}
-                </PopupProvider>
-              </ModalProvider>
+              </PopupProvider>
+            </ModalProvider>
           </ThemeProvider>
         </LinguiProviderWrapper>
       </main>

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

@@ -3,6 +3,7 @@ import { env } from "next-runtime-env";
 import { z } from "zod";
 
 import { createNextApiContext } from "@kan/api/trpc";
+import * as subscriptionRepo from "@kan/db/repository/subscription.repo";
 import * as workspaceRepo from "@kan/db/repository/workspace.repo";
 import { createStripeClient } from "@kan/stripe";
 
@@ -40,17 +41,22 @@ export default async function handler(
     const body = req.body as CheckoutSessionRequest;
     const { successUrl, cancelUrl, slug, workspacePublicId } = body;
 
-    if (!successUrl || !cancelUrl || !slug || !workspacePublicId) {
+    if (!successUrl || !cancelUrl || !workspacePublicId) {
       return res.status(400).json({ error: "Missing required fields" });
     }
 
-    const slugResult = workspaceSlugSchema.safeParse(slug);
+    if (slug) {
+      const slugResult = workspaceSlugSchema.safeParse(slug);
 
-    if (!slugResult.success) {
-      return new Response(JSON.stringify({ error: "Invalid workspace slug" }), {
-        status: 400,
-        headers: { "Content-Type": "application/json" },
-      });
+      if (!slugResult.success) {
+        return new Response(
+          JSON.stringify({ error: "Invalid workspace slug" }),
+          {
+            status: 400,
+            headers: { "Content-Type": "application/json" },
+          },
+        );
+      }
     }
 
     const workspace = await workspaceRepo.getAllByUserId(db, user.id);
@@ -66,20 +72,37 @@ export default async function handler(
       });
     }
 
+    const subscription = await subscriptionRepo.create(db, {
+      plan: "pro",
+      referenceId: workspacePublicId,
+      userId: user.id,
+      stripeCustomerId: user.stripeCustomerId ?? "",
+      status: "incomplete",
+    });
+
+    const subscriptionId = subscription?.id;
+
+    if (!subscriptionId) {
+      return res.status(500).json({ error: "Error creating subscription" });
+    }
+
     const session = await stripe.checkout.sessions.create({
       mode: "subscription",
       line_items: [
         {
-          price: process.env.STRIPE_PRO_PLAN_PRICE_ID,
+          price: process.env.STRIPE_PRO_PLAN_MONTHLY_PRICE_ID,
           quantity: 1,
         },
       ],
       success_url: `${env("NEXT_PUBLIC_BASE_URL")}${successUrl}`,
       cancel_url: `${env("NEXT_PUBLIC_BASE_URL")}${cancelUrl}`,
+      client_reference_id: workspacePublicId,
       customer: user.stripeCustomerId ?? undefined,
       metadata: {
-        workspaceSlug: slug,
+        ...(slug && { workspaceSlug: slug }),
         workspacePublicId,
+        userId: user.id,
+        subscriptionId,
       },
     });
 

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

@@ -36,7 +36,7 @@ export default async function handler(
     const event = stripe.webhooks.constructEvent(
       rawBody,
       sig,
-      process.env.STRIPE_WEBHOOK_SECRET!,
+      process.env.STRIPE_WEBHOOK_SECRET_LEGACY!,
     );
 
     const { db } = await createNextApiContext(req);
@@ -47,9 +47,9 @@ export default async function handler(
 
         const metaData = checkoutSession.metadata;
 
-        if (metaData?.workspacePublicId && metaData.workspaceSlug) {
+        if (metaData?.workspacePublicId) {
           await workspaceRepo.update(db, metaData.workspacePublicId, {
-            slug: metaData.workspaceSlug,
+            ...(metaData.workspaceSlug && { slug: metaData.workspaceSlug }),
             plan: "pro",
           });
         }

apps/web/src/pages/settings/account.tsx

@@ -0,0 +1,16 @@
+import type { NextPageWithLayout } from "~/pages/_app";
+import { getDashboardLayout } from "~/components/Dashboard";
+import { SettingsLayout } from "~/components/SettingsLayout";
+import AccountSettings from "~/views/settings/AccountSettings";
+
+const AccountSettingsPage: NextPageWithLayout = () => {
+  return (
+    <SettingsLayout currentTab="account">
+      <AccountSettings />
+    </SettingsLayout>
+  );
+};
+
+AccountSettingsPage.getLayout = (page) => getDashboardLayout(page);
+
+export default AccountSettingsPage;

apps/web/src/pages/settings/api.tsx

@@ -0,0 +1,16 @@
+import type { NextPageWithLayout } from "~/pages/_app";
+import { getDashboardLayout } from "~/components/Dashboard";
+import { SettingsLayout } from "~/components/SettingsLayout";
+import ApiSettings from "~/views/settings/ApiSettings";
+
+const ApiSettingsPage: NextPageWithLayout = () => {
+  return (
+    <SettingsLayout currentTab="api">
+      <ApiSettings />
+    </SettingsLayout>
+  );
+};
+
+ApiSettingsPage.getLayout = (page) => getDashboardLayout(page);
+
+export default ApiSettingsPage;

apps/web/src/pages/settings/billing.tsx

@@ -0,0 +1,16 @@
+import type { NextPageWithLayout } from "~/pages/_app";
+import { getDashboardLayout } from "~/components/Dashboard";
+import { SettingsLayout } from "~/components/SettingsLayout";
+import BillingSettings from "~/views/settings/BillingSettings";
+
+const BillingSettingsPage: NextPageWithLayout = () => {
+  return (
+    <SettingsLayout currentTab="billing">
+      <BillingSettings />
+    </SettingsLayout>
+  );
+};
+
+BillingSettingsPage.getLayout = (page) => getDashboardLayout(page);
+
+export default BillingSettingsPage;

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

@@ -1,17 +0,0 @@
-import type { NextPageWithLayout } from "~/pages/_app";
-import { getDashboardLayout } from "~/components/Dashboard";
-import Popup from "~/components/Popup";
-import SettingsView from "~/views/settings";
-
-const SettingsPage: NextPageWithLayout = () => {
-  return (
-    <>
-      <SettingsView />
-      <Popup />
-    </>
-  );
-};
-
-SettingsPage.getLayout = (page) => getDashboardLayout(page);
-
-export default SettingsPage;

apps/web/src/pages/settings/integrations.tsx

@@ -0,0 +1,16 @@
+import type { NextPageWithLayout } from "~/pages/_app";
+import { getDashboardLayout } from "~/components/Dashboard";
+import { SettingsLayout } from "~/components/SettingsLayout";
+import IntegrationsSettings from "~/views/settings/IntegrationsSettings";
+
+const IntegrationsSettingsPage: NextPageWithLayout = () => {
+  return (
+    <SettingsLayout currentTab="integrations">
+      <IntegrationsSettings />
+    </SettingsLayout>
+  );
+};
+
+IntegrationsSettingsPage.getLayout = (page) => getDashboardLayout(page);
+
+export default IntegrationsSettingsPage;

apps/web/src/pages/settings/workspace.tsx

@@ -0,0 +1,16 @@
+import type { NextPageWithLayout } from "~/pages/_app";
+import { getDashboardLayout } from "~/components/Dashboard";
+import { SettingsLayout } from "~/components/SettingsLayout";
+import WorkspaceSettings from "~/views/settings/WorkspaceSettings";
+
+const WorkspaceSettingsPage: NextPageWithLayout = () => {
+  return (
+    <SettingsLayout currentTab="workspace">
+      <WorkspaceSettings />
+    </SettingsLayout>
+  );
+};
+
+WorkspaceSettingsPage.getLayout = (page) => getDashboardLayout(page);
+
+export default WorkspaceSettingsPage;

apps/web/src/providers/modal.tsx

@@ -1,4 +1,4 @@
-import { createContext, useContext, useState } from "react";
+import { createContext, useCallback, useContext, useState } from "react";
 
 interface ModalState {
   contentType: string;
@@ -42,57 +42,59 @@ export const ModalProvider: React.FC<Props> = ({ children }) => {
   const entityId = currentModal?.entityId || "";
   const entityLabel = currentModal?.entityLabel || "";
 
-  const openModal = (
-    contentType: string,
-    entityId?: string,
-    entityLabel?: string,
-  ) => {
-    const newModal: ModalState = { contentType, entityId, entityLabel };
-    setModalStack((prev) => [...prev, newModal]);
-  };
+  const openModal = useCallback(
+    (contentType: string, entityId?: string, entityLabel?: string) => {
+      const newModal: ModalState = { contentType, entityId, entityLabel };
+      setModalStack((prev) => [...prev, newModal]);
+    },
+    [],
+  );
 
-  const closeModal = () => {
+  const closeModal = useCallback(() => {
     setModalStack((prev) => {
       if (prev.length <= 1) {
         return [];
       }
       return prev.slice(0, -1);
     });
-  };
+  }, []);
 
-  const closeModals = (count: number) => {
-    setModalStack(prev => {
+  const closeModals = useCallback((count: number) => {
+    setModalStack((prev) => {
       const newLength = Math.max(0, prev.length - count);
       return prev.slice(0, newLength);
     });
-  };
+  }, []);
 
-  const clearAllModals = () => {
+  const clearAllModals = useCallback(() => {
     setModalStack([]);
-  };
+  }, []);
 
-  const setModalState = (modalType: string, state: any) => {
+  const setModalState = useCallback((modalType: string, state: any) => {
     setModalStates((prev) => ({
       ...prev,
       [modalType]: state,
     }));
-  };
+  }, []);
 
-  const getModalState = (modalType: string) => {
-    return modalStates[modalType];
-  };
+  const getModalState = useCallback(
+    (modalType: string) => {
+      return modalStates[modalType];
+    },
+    [modalStates],
+  );
 
-  const clearModalState = (modalType: string) => {
+  const clearModalState = useCallback((modalType: string) => {
     setModalStates((prev) => {
       const newStates = { ...prev };
       delete newStates[modalType];
       return newStates;
     });
-  };
+  }, []);
 
-  const clearAllModalStates = () => {
+  const clearAllModalStates = useCallback(() => {
     setModalStates({});
-  };
+  }, []);
 
   return (
     <ModalContext.Provider

apps/web/src/providers/workspace.tsx

@@ -47,12 +47,16 @@ export const WorkspaceProvider: React.FC<{ children: ReactNode }> = ({
   const [hasLoaded, setHasLoaded] = useState(false);
 
   const { data, isLoading } = api.workspace.all.useQuery();
+  const utils = api.useUtils();
 
   const switchWorkspace = (_workspace: Workspace) => {
     localStorage.setItem("workspacePublicId", _workspace.publicId);
 
     setWorkspace(_workspace);
 
+    // Refetch workspace data to ensure availableWorkspaces is up to date
+    void utils.workspace.all.refetch();
+
     router.push(`/boards`);
   };
 
@@ -66,21 +70,15 @@ export const WorkspaceProvider: React.FC<{ children: ReactNode }> = ({
       localStorage.getItem("workspacePublicId");
 
     if (data.length) {
-      const workspaces = data
-        .map(({ workspace, role }) => {
-          if (!workspace) return;
-
-          return {
-            role,
-            publicId: workspace.publicId,
-            name: workspace.name,
-            slug: workspace.slug,
-            description: workspace.description,
-            plan: workspace.plan,
-            hasLoaded: true,
-          };
-        })
-        .filter((workspace) => workspace !== null) as Workspace[];
+      const workspaces = data.map(({ workspace, role }) => ({
+        role,
+        publicId: workspace.publicId,
+        name: workspace.name,
+        slug: workspace.slug,
+        description: workspace.description,
+        plan: workspace.plan,
+        hasLoaded: true,
+      })) as Workspace[];
 
       if (workspaces.length) setAvailableWorkspaces(workspaces);
     }
@@ -116,7 +114,7 @@ export const WorkspaceProvider: React.FC<{ children: ReactNode }> = ({
         role: primaryWorkspaceRole,
       });
     }
-  }, [data]);
+  }, [data, isLoading]);
 
   return (
     <WorkspaceContext.Provider

apps/web/src/utils/i18n.ts

@@ -18,6 +18,8 @@ const loadMessages = async (locale: Locale) => {
       return (await import("~/locales/it/messages")).messages;
     case "nl":
       return (await import("~/locales/nl/messages")).messages;
+    case "ru":
+      return (await import("~/locales/ru/messages")).messages;
     default:
       return enMessages;
   }

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

@@ -155,7 +155,7 @@ export function UpdateBoardSlugForm({
         <div className="flex items-center gap-2">
           <Button
             variant="secondary"
-            href="/settings?edit=workspace_url"
+            href="/settings?tab=workspace"
             onClick={closeModal}
           >
             {t`Edit workspace URL`}

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

@@ -19,7 +19,7 @@ export function BoardsList() {
 
   if (isLoading)
     return (
-      <div className="grid h-fit w-full grid-cols-1 gap-4 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-3 2xl:grid-cols-7">
+      <div className="3xl:grid-cols-4 grid h-fit w-full grid-cols-1 gap-4 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-3">
         <div className="mr-5 flex h-[150px] w-full animate-pulse rounded-md bg-light-200 dark:bg-dark-100" />
         <div className="mr-5 flex h-[150px] w-full animate-pulse rounded-md bg-light-200 dark:bg-dark-100" />
         <div className="mr-5 flex h-[150px] w-full animate-pulse rounded-md bg-light-200 dark:bg-dark-100" />
@@ -45,7 +45,7 @@ export function BoardsList() {
     );
 
   return (
-    <div className="grid h-fit w-full grid-cols-1 gap-4 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-3 2xl:grid-cols-7">
+    <div className="3xl:grid-cols-4 grid h-fit w-full grid-cols-1 gap-4 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-3">
       {data?.map((board) => (
         <Link key={board.publicId} href={`boards/${board.publicId}`}>
           <div className="align-center relative mr-5 flex h-[150px] w-full items-center justify-center rounded-md border border-dashed border-light-400 bg-light-50 shadow-sm hover:bg-light-200 dark:border-dark-600 dark:bg-dark-50 dark:hover:bg-dark-100">

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

@@ -1,4 +1,5 @@
 import { t } from "@lingui/core/macro";
+import { useEffect } from "react";
 import { HiArrowDownTray, HiOutlinePlusSmall } from "react-icons/hi2";
 
 import Button from "~/components/Button";
@@ -14,9 +15,13 @@ import { NewBoardForm } from "./components/NewBoardForm";
 
 export default function BoardsPage() {
   const { openModal, modalContentType, isOpen } = useModal();
-  const { workspace, hasLoaded } = useWorkspace();
+  const { availableWorkspaces, workspace, hasLoaded } = useWorkspace();
 
-  if (hasLoaded && !workspace.publicId) openModal("NEW_WORKSPACE");
+  useEffect(() => {
+    if (hasLoaded && availableWorkspaces.length === 0) {
+      openModal("NEW_WORKSPACE");
+    }
+  }, [hasLoaded, availableWorkspaces.length, openModal]);
 
   return (
     <>

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

@@ -1,4 +1,3 @@
-import { Menu } from "@headlessui/react";
 import { t } from "@lingui/core/macro";
 import { HiMiniPlus } from "react-icons/hi2";
 
@@ -101,22 +100,19 @@ export default function LabelSelector({
           {selectedLabels.length ? (
             <div className="flex flex-wrap gap-x-0.5">
               {selectedLabels.map((label) => (
-                <Menu.Button key={label.key}>
-                  <Badge value={label.value} iconLeft={label.leftIcon} />
-                </Menu.Button>
-              ))}
-              <Menu.Button>
                 <Badge
-                  value={t`Add label`}
-                  iconLeft={<HiMiniPlus size={14} />}
+                  key={label.key}
+                  value={label.value}
+                  iconLeft={label.leftIcon}
                 />
-              </Menu.Button>
+              ))}
+              <Badge value={t`Add label`} iconLeft={<HiMiniPlus size={14} />} />
             </div>
           ) : (
-            <Menu.Button className="flex h-full w-full items-center rounded-[5px] border-[1px] border-light-50 pl-2 text-left text-sm text-neutral-900 hover:border-light-300 hover:bg-light-200 dark:border-dark-50 dark:text-dark-1000 dark:hover:border-dark-200 dark:hover:bg-dark-100">
+            <div className="flex h-full w-full items-center rounded-[5px] border-[1px] border-light-50 pl-2 text-left text-sm text-neutral-900 hover:border-light-300 hover:bg-light-200 dark:border-dark-50 dark:text-dark-1000 dark:hover:border-dark-200 dark:hover:bg-dark-100">
               <HiMiniPlus size={22} className="pr-2" />
               {t`Add label`}
-            </Menu.Button>
+            </div>
           )}
         </CheckboxDropdown>
       )}

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

@@ -1,4 +1,3 @@
-import { Menu } from "@headlessui/react";
 import { t } from "@lingui/core/macro";
 
 import CheckboxDropdown from "~/components/CheckboxDropdown";
@@ -79,9 +78,9 @@ export default function ListSelector({
           }}
           asChild
         >
-          <Menu.Button className="flex h-full w-full items-center rounded-[5px] border-[1px] border-light-50 py-1 pl-2 text-left text-sm text-neutral-900 hover:border-light-300 hover:bg-light-200 dark:border-dark-50 dark:text-dark-1000 dark:hover:border-dark-200 dark:hover:bg-dark-100">
+          <div className="flex h-full w-full items-center rounded-[5px] border-[1px] border-light-50 py-1 pl-2 text-left text-sm text-neutral-900 hover:border-light-300 hover:bg-light-200 dark:border-dark-50 dark:text-dark-1000 dark:hover:border-dark-200 dark:hover:bg-dark-100">
             {selectedList?.value}
-          </Menu.Button>
+          </div>
         </CheckboxDropdown>
       )}
     </>

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

@@ -1,5 +1,4 @@
 import { useRouter } from "next/router";
-import { Menu } from "@headlessui/react";
 import { t } from "@lingui/core/macro";
 import { HiMiniPlus } from "react-icons/hi2";
 
@@ -112,11 +111,12 @@ export default function MemberSelector({
           createNewItemLabel={t`Invite member`}
           asChild
         >
-          <Menu.Button className="flex h-full w-full items-center rounded-[5px] border-[1px] border-light-50 py-1 pl-2 text-left text-sm text-neutral-900 hover:border-light-300 hover:bg-light-200 dark:border-dark-50 dark:text-dark-1000 dark:hover:border-dark-200 dark:hover:bg-dark-100">
+          <div className="flex h-full w-full items-center rounded-[5px] border-[1px] border-light-50 py-1 pl-2 text-left text-sm text-neutral-900 hover:border-light-300 hover:bg-light-200 dark:border-dark-50 dark:text-dark-1000 dark:hover:border-dark-200 dark:hover:bg-dark-100">
             {selectedMembers.length ? (
               <div className="isolate flex justify-end -space-x-1 overflow-hidden">
                 {selectedMembers.map(({ value, imageUrl }) => (
                   <Avatar
+                    key={value}
                     size="sm"
                     name={value}
                     imageUrl={imageUrl}
@@ -130,7 +130,7 @@ export default function MemberSelector({
                 {t`Add member`}
               </>
             )}
-          </Menu.Button>
+          </div>
         </CheckboxDropdown>
       )}
     </>

apps/web/src/views/home/components/Layout.tsx

@@ -1,8 +1,10 @@
-import PatternedBackground from "~/components/PatternedBackground";
 import { useTheme } from "next-themes";
+
+import { authClient } from "@kan/auth/client";
+
+import PatternedBackground from "~/components/PatternedBackground";
 import Footer from "./Footer";
 import Header from "./Header";
-import { authClient } from "@kan/auth/client";
 
 export default function Layout({ children }: { children: React.ReactNode }) {
   const { theme } = useTheme();
@@ -18,6 +20,7 @@ export default function Layout({ children }: { children: React.ReactNode }) {
       <style jsx global>{`
         html {
           scroll-behavior: smooth;
+          overflow: auto;
           background-color: ${!isDarkMode ? "hsl(0deg 0% 97.3%)" : "#161616"};
         }
       `}</style>

apps/web/src/views/home/components/Pricing.tsx

@@ -2,7 +2,7 @@ import Link from "next/link";
 import { Radio, RadioGroup } from "@headlessui/react";
 import { t } from "@lingui/core/macro";
 import { useState } from "react";
-import { HiCheckCircle } from "react-icons/hi2";
+import { HiBolt, HiCheckCircle } from "react-icons/hi2";
 import { twMerge } from "tailwind-merge";
 
 type Frequency = "monthly" | "annually";
@@ -92,12 +92,13 @@ const Pricing = () => {
           {t`Get started for free, with no usage limits. For collaboration, upgrade to a plan that fits the size of your team.`}
         </p>
 
-        {/* Beta free pricing pill */}
-        <div className="mt-4 flex items-center gap-2 rounded-full bg-green-100 px-3 py-1 text-xs font-semibold text-green-800 dark:bg-green-700 dark:text-green-100">
-          {t`All seats are free during the beta until Sept 1st!`}
-        </div>
-
-        <div className="mt-16 flex justify-center">
+        <div className="mt-12 flex flex-col items-center justify-center">
+          <div className="mb-4 flex items-center gap-2 rounded-full border bg-white px-4 py-1.5 text-center text-xs font-bold text-gray-800 dark:border-dark-300 dark:bg-white dark:text-gray-800 lg:text-sm">
+            <HiBolt />
+            <p>
+              {t`Launch offer: unlimited seats for just $29/month with Pro`}
+            </p>
+          </div>
           <fieldset aria-label={t`Payment frequency`}>
             <RadioGroup
               value={frequency}
@@ -108,7 +109,12 @@ const Pricing = () => {
                 <Radio
                   key={option.value}
                   value={option}
-                  className="cursor-pointer rounded-full px-2.5 py-1 text-xs text-light-900 data-[checked]:bg-dark-50 data-[checked]:text-white dark:data-[checked]:bg-light-50 dark:data-[checked]:text-dark-50 lg:text-sm"
+                  className={twMerge(
+                    "cursor-pointer rounded-full px-2.5 py-1 text-xs transition-colors lg:text-sm",
+                    frequency?.value === option.value
+                      ? "bg-dark-50 text-white dark:bg-light-50 dark:text-dark-50"
+                      : "text-light-900 hover:bg-light-100 dark:hover:bg-dark-100",
+                  )}
                 >
                   {option.label}
                 </Radio>
@@ -165,7 +171,7 @@ const Pricing = () => {
                   !tier.showPrice && "opacity-0",
                 )}
               >
-                {tier.price[frequency?.value || "monthly"]}
+                {tier.price[frequency?.value ?? "monthly"]}
               </span>
               {tier.showPriceSuffix && (
                 <span className="text-sm/6 font-semibold text-light-50 dark:text-dark-900">

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

@@ -1,11 +1,15 @@
 import { zodResolver } from "@hookform/resolvers/zod";
 import { t } from "@lingui/core/macro";
+import { env } from "next-runtime-env";
 import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import { HiXMark } from "react-icons/hi2";
 import { z } from "zod";
 
 import type { InviteMemberInput } from "@kan/api/types";
+import type { Subscription } from "@kan/shared/utils";
+import { authClient } from "@kan/auth/client";
+import { getSubscriptionByPlan } from "@kan/shared/utils";
 
 import Button from "~/components/Button";
 import Input from "~/components/Input";
@@ -15,7 +19,17 @@ import { usePopup } from "~/providers/popup";
 import { useWorkspace } from "~/providers/workspace";
 import { api } from "~/utils/api";
 
-export function InviteMemberForm() {
+export function InviteMemberForm({
+  numberOfMembers,
+  subscriptions,
+  unlimitedSeats,
+  userId,
+}: {
+  numberOfMembers: number;
+  subscriptions: Subscription[] | undefined;
+  unlimitedSeats: boolean;
+  userId: string | undefined;
+}) {
   const utils = api.useUtils();
   const [isCreateAnotherEnabled, setIsCreateAnotherEnabled] = useState(false);
   const { closeModal } = useModal();
@@ -42,7 +56,7 @@ export function InviteMemberForm() {
 
   const refetchBoards = () => utils.board.all.refetch();
 
-  const createBoard = api.member.invite.useMutation({
+  const inviteMember = api.member.invite.useMutation({
     onSuccess: async () => {
       closeModal();
       await utils.workspace.byId.refetch();
@@ -68,8 +82,56 @@ export function InviteMemberForm() {
     },
   });
 
-  const onSubmit = (data: InviteMemberInput) => {
-    createBoard.mutate(data);
+  const teamSubscription = getSubscriptionByPlan(subscriptions, "team");
+  const proSubscription = getSubscriptionByPlan(subscriptions, "pro");
+
+  const hasTeamSubscription = !!teamSubscription;
+  const hasProSubscription = !!proSubscription;
+
+  let isYearly = false;
+  let price = t`$10/month`;
+  let billingType = t`monthly billing`;
+
+  if (teamSubscription?.periodStart && teamSubscription?.periodEnd) {
+    const periodStartDate = new Date(teamSubscription.periodStart);
+    const periodEndDate = new Date(teamSubscription.periodEnd);
+    const diffInDays = Math.round(
+      (periodEndDate.getTime() - periodStartDate.getTime()) /
+        (1000 * 60 * 60 * 24),
+    );
+
+    isYearly = diffInDays > 31;
+    price = isYearly ? t`$8/month` : t`$10/month`;
+    billingType = isYearly ? t`billed annually` : t`billed monthly`;
+  }
+
+  const onSubmit = (member: InviteMemberInput) => {
+    inviteMember.mutate(member);
+  };
+
+  const handleUpgrade = async () => {
+    const { data, error } = await authClient.subscription.upgrade({
+      plan: "team",
+      referenceId: workspace.publicId,
+      metadata: { userId },
+      seats: numberOfMembers,
+      successUrl: "/members",
+      cancelUrl: "/members",
+      returnUrl: "/members",
+      disableRedirect: true,
+    });
+
+    if (data?.url) {
+      window.location.href = data.url;
+    }
+
+    if (error) {
+      showPopup({
+        header: t`Error upgrading subscription`,
+        message: t`Please try again later, or contact customer support.`,
+        icon: "error",
+      });
+    }
   };
 
   useEffect(() => {
@@ -97,6 +159,11 @@ export function InviteMemberForm() {
         <Input
           id="email"
           placeholder={t`Email`}
+          disabled={
+            env("NEXT_PUBLIC_KAN_ENV") === "cloud" &&
+            !hasTeamSubscription &&
+            !hasProSubscription
+          }
           {...register("email", { required: true })}
           onKeyDown={async (e) => {
             if (e.key === "Enter") {
@@ -106,22 +173,66 @@ export function InviteMemberForm() {
           }}
           errorMessage={errors.email?.message}
         />
+
+        {env("NEXT_PUBLIC_KAN_ENV") === "cloud" && (
+          <div className="mt-3 rounded-md bg-light-100 p-3 text-xs text-light-900 dark:bg-dark-200 dark:text-dark-900">
+            {hasTeamSubscription || hasProSubscription ? (
+              <div>
+                <span className="font-medium text-emerald-500 dark:text-emerald-400">
+                  {hasTeamSubscription ? t`Team Plan` : t`Pro Plan ∞`}
+                </span>
+                <p className="mt-1">
+                  {unlimitedSeats
+                    ? t`You have unlimited seats with your Pro Plan. There is no additional charge for new members!`
+                    : t`Adding a new member will cost an additional ${price} (${billingType}) per seat.`}
+                </p>
+              </div>
+            ) : (
+              <div>
+                <span className="font-medium text-light-950 dark:text-dark-950">
+                  {t`Free Plan`}
+                </span>
+                <p className="mt-1">
+                  {t`Inviting members requires a Team Plan. You'll be redirected to upgrade your workspace.`}
+                </p>
+              </div>
+            )}
+          </div>
+        )}
       </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
-          label={t`Invite another`}
-          isChecked={isCreateAnotherEnabled}
-          onChange={() => setIsCreateAnotherEnabled(!isCreateAnotherEnabled)}
-        />
+        {(hasTeamSubscription || hasProSubscription) &&
+          env("NEXT_PUBLIC_KAN_ENV") === "cloud" && (
+            <Toggle
+              label={t`Invite another`}
+              isChecked={isCreateAnotherEnabled}
+              onChange={() =>
+                setIsCreateAnotherEnabled(!isCreateAnotherEnabled)
+              }
+            />
+          )}
         <div>
-          <Button
-            type="submit"
-            isLoading={createBoard.isPending}
-            className="inline-flex w-full justify-center rounded-md bg-light-1000 px-3 py-2 text-sm font-semibold text-light-50 shadow-sm focus-visible:outline-none dark:bg-dark-1000 dark:text-dark-50"
-          >
-            {t`Invite member`}
-          </Button>
+          {env("NEXT_PUBLIC_KAN_ENV") === "cloud" &&
+          !hasTeamSubscription &&
+          !hasProSubscription ? (
+            <Button
+              type="button"
+              onClick={handleUpgrade}
+              className="inline-flex w-full justify-center rounded-md bg-light-1000 px-3 py-2 text-sm font-semibold text-light-50 shadow-sm focus-visible:outline-none dark:bg-dark-1000 dark:text-dark-50"
+            >
+              {t`Upgrade to Team Plan`}
+            </Button>
+          ) : (
+            <Button
+              type="submit"
+              disabled={inviteMember.isPending}
+              isLoading={inviteMember.isPending}
+              className="inline-flex w-full justify-center rounded-md bg-light-1000 px-3 py-2 text-sm font-semibold text-light-50 shadow-sm focus-visible:outline-none dark:bg-dark-1000 dark:text-dark-50"
+            >
+              {t`Invite member`}
+            </Button>
+          )}
         </div>
       </div>
     </form>

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

@@ -1,8 +1,16 @@
+import Link from "next/link";
 import { t } from "@lingui/core/macro";
-import { HiEllipsisHorizontal, HiOutlinePlusSmall } from "react-icons/hi2";
+import { env } from "next-runtime-env";
+import {
+  HiBolt,
+  HiEllipsisHorizontal,
+  HiOutlinePlusSmall,
+} from "react-icons/hi2";
 import { twMerge } from "tailwind-merge";
 
+import type { Subscription } from "@kan/shared/utils";
 import { authClient } from "@kan/auth/client";
+import { getSubscriptionByPlan, hasUnlimitedSeats } from "@kan/shared/utils";
 
 import Avatar from "~/components/Avatar";
 import Button from "~/components/Button";
@@ -27,6 +35,15 @@ export default function MembersPage() {
     // { enabled: workspace?.publicId ? true : false },
   );
 
+  const { data: session } = authClient.useSession();
+
+  const subscriptions = data?.subscriptions as Subscription[] | undefined;
+
+  const teamSubscription = getSubscriptionByPlan(subscriptions, "team");
+  const proSubscription = getSubscriptionByPlan(subscriptions, "pro");
+
+  const unlimitedSeats = hasUnlimitedSeats(subscriptions);
+
   const TableRow = ({
     memberPublicId,
     memberId,
@@ -48,7 +65,6 @@ export default function MembersPage() {
     isLastRow?: boolean;
     showSkeleton?: boolean;
   }) => {
-    const { data: session } = authClient.useSession();
     return (
       <tr className="rounded-b-lg">
         <td
@@ -113,9 +129,9 @@ export default function MembersPage() {
                 {memberRole &&
                   memberRole.charAt(0).toUpperCase() + memberRole.slice(1)}
               </span>
-              {memberStatus === "invited" && (
+              {(memberStatus === "invited" || memberStatus === "paused") && (
                 <span className="mt-1 inline-flex items-center rounded-md bg-gray-500/10 px-1.5 py-0.5 text-[10px] font-medium text-gray-400 ring-1 ring-inset ring-gray-500/20 sm:ml-2 sm:mt-0 sm:text-[11px]">
-                  {t`Pending`}
+                  {memberStatus === "invited" ? t`Pending` : t`Paused`}
                 </span>
               )}
             </div>
@@ -157,10 +173,46 @@ export default function MembersPage() {
       <PageHead title={t`Members | ${workspace.name ?? "Workspace"}`} />
       <div className="m-auto h-full max-w-[1100px] p-6 px-5 md:px-28 md:py-12">
         <div className="mb-8 flex w-full justify-between">
-          <h1 className="font-bold tracking-tight text-neutral-900 dark:text-dark-1000 sm:text-[1.2rem]">
-            {t`Members`}
-          </h1>
-          <div className="flex">
+          <div className="flex items-center gap-3">
+            <h1 className="font-bold tracking-tight text-neutral-900 dark:text-dark-1000 sm:text-[1.2rem]">
+              {t`Members`}
+            </h1>
+          </div>
+          <div className="flex items-center gap-3">
+            {env("NEXT_PUBLIC_KAN_ENV") === "cloud" && (
+              <>
+                {!proSubscription && (
+                  <Link
+                    href="/settings/workspace?upgrade=pro"
+                    className="hidden items-center rounded-full border border-emerald-300 bg-emerald-50 px-3 py-1 text-center text-xs text-emerald-400 dark:border-emerald-700 dark:bg-emerald-950 dark:text-emerald-400 lg:flex"
+                  >
+                    <HiBolt />
+                    <span className="ml-1 font-medium">
+                      {t`Launch offer: Get unlimited members with Pro`}
+                    </span>
+                  </Link>
+                )}
+                <div
+                  className={twMerge(
+                    "flex items-center rounded-full border px-3 py-1 text-center text-xs",
+                    teamSubscription || proSubscription
+                      ? "border-emerald-300 bg-emerald-50 text-emerald-400 dark:border-emerald-700 dark:bg-emerald-950 dark:text-emerald-400"
+                      : "border-light-300 bg-light-50 text-light-1000 dark:border-dark-300 dark:bg-dark-50 dark:text-dark-900",
+                  )}
+                >
+                  <span className="font-medium">
+                    {proSubscription
+                      ? t`Pro Plan`
+                      : teamSubscription
+                        ? t`Team Plan`
+                        : t`Free Plan`}
+                    {proSubscription && unlimitedSeats && (
+                      <span className="ml-1 text-xs">∞</span>
+                    )}
+                  </span>
+                </div>
+              </>
+            )}
             <Button
               onClick={() => openModal("INVITE_MEMBER")}
               iconLeft={<HiOutlinePlusSmall className="h-4 w-4" />}
@@ -241,7 +293,12 @@ export default function MembersPage() {
             modalSize="sm"
             isVisible={isOpen && modalContentType === "INVITE_MEMBER"}
           >
-            <InviteMemberForm />
+            <InviteMemberForm
+              userId={session?.user.id}
+              numberOfMembers={data?.members.length ?? 1}
+              subscriptions={subscriptions}
+              unlimitedSeats={unlimitedSeats}
+            />
           </Modal>
 
           <Modal

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

@@ -0,0 +1,116 @@
+import { t } from "@lingui/core/macro";
+import { env } from "next-runtime-env";
+
+import Button from "~/components/Button";
+import FeedbackModal from "~/components/FeedbackModal";
+import { LanguageSelector } from "~/components/LanguageSelector";
+import Modal from "~/components/modal";
+import { NewWorkspaceForm } from "~/components/NewWorkspaceForm";
+import { PageHead } from "~/components/PageHead";
+import { useModal } from "~/providers/modal";
+import { api } from "~/utils/api";
+import Avatar from "./components/Avatar";
+import { ChangePasswordFormConfirmation } from "./components/ChangePasswordConfirmation";
+import { DeleteAccountConfirmation } from "./components/DeleteAccountConfirmation";
+import UpdateDisplayNameForm from "./components/UpdateDisplayNameForm";
+
+export default function AccountSettings() {
+  const { modalContentType, openModal, isOpen } = useModal();
+  const isCredentialsEnabled =
+    env("NEXT_PUBLIC_ALLOW_CREDENTIALS")?.toLowerCase() === "true";
+  const { data } = api.user.getUser.useQuery();
+
+  return (
+    <>
+      <PageHead title={t`Settings | Account`} />
+
+      <div className="mb-8 border-t border-light-300 dark:border-dark-300">
+        <h2 className="mb-4 mt-8 text-[14px] font-bold text-neutral-900 dark:text-dark-1000">
+          {t`Profile picture`}
+        </h2>
+        <Avatar userId={data?.id} userImage={data?.image} />
+
+        <div className="mb-4">
+          <h2 className="mb-4 mt-8 text-[14px] font-bold text-neutral-900 dark:text-dark-1000">
+            {t`Display name`}
+          </h2>
+          <UpdateDisplayNameForm displayName={data?.name ?? ""} />
+        </div>
+
+        <div className="mb-8 border-t border-light-300 dark:border-dark-300">
+          <h2 className="mb-4 mt-8 text-[14px] font-bold text-neutral-900 dark:text-dark-1000">
+            {t`Language`}
+          </h2>
+          <p className="mb-8 text-sm text-neutral-500 dark:text-dark-900">
+            {t`Change your language preferences.`}
+          </p>
+          <LanguageSelector />
+        </div>
+
+        <div className="mb-8 border-t border-light-300 dark:border-dark-300">
+          <h2 className="mb-4 mt-8 text-[14px] font-bold text-neutral-900 dark:text-dark-1000">
+            {t`Delete account`}
+          </h2>
+          <p className="mb-8 text-sm text-neutral-500 dark:text-dark-900">
+            {t`Once you delete your account, there is no going back. This action cannot be undone.`}
+          </p>
+          <div className="mt-4">
+            <Button
+              variant="secondary"
+              onClick={() => openModal("DELETE_ACCOUNT")}
+            >
+              {t`Delete account`}
+            </Button>
+          </div>
+        </div>
+
+        {isCredentialsEnabled && (
+          <div className="mb-8 border-t border-light-300 dark:border-dark-300">
+            <h2 className="mb-4 mt-8 text-[14px] font-bold text-neutral-900 dark:text-dark-1000">
+              {t`Change Password`}
+            </h2>
+            <p className="mb-8 text-sm text-neutral-500 dark:text-dark-900">
+              {t`You are about to change your password.`}
+            </p>
+            <div className="mt-4">
+              <Button
+                variant="secondary"
+                onClick={() => openModal("CHANGE_PASSWORD")}
+              >
+                {t`Change Password`}
+              </Button>
+            </div>
+          </div>
+        )}
+      </div>
+
+      {/* Account-specific modals */}
+      <Modal
+        modalSize="sm"
+        isVisible={isOpen && modalContentType === "DELETE_ACCOUNT"}
+      >
+        <DeleteAccountConfirmation />
+      </Modal>
+      <Modal
+        modalSize="sm"
+        isVisible={isOpen && modalContentType === "CHANGE_PASSWORD"}
+      >
+        <ChangePasswordFormConfirmation />
+      </Modal>
+
+      {/* Global modals */}
+      <Modal
+        modalSize="md"
+        isVisible={isOpen && modalContentType === "NEW_FEEDBACK"}
+      >
+        <FeedbackModal />
+      </Modal>
+      <Modal
+        modalSize="sm"
+        isVisible={isOpen && modalContentType === "NEW_WORKSPACE"}
+      >
+        <NewWorkspaceForm />
+      </Modal>
+    </>
+  );
+}

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

@@ -0,0 +1,66 @@
+import { t } from "@lingui/core/macro";
+
+import Button from "~/components/Button";
+import FeedbackModal from "~/components/FeedbackModal";
+import Modal from "~/components/modal";
+import { NewWorkspaceForm } from "~/components/NewWorkspaceForm";
+import { PageHead } from "~/components/PageHead";
+import { useModal } from "~/providers/modal";
+import ApiKeyList from "./components/ApiKeyList";
+import NewApiKeyModal from "./components/NewApiKeyModal";
+import { RevokeApiKeyConfirmation } from "./components/RevokeApiKeyConfirmation";
+
+export default function ApiSettings() {
+  const { modalContentType, openModal, isOpen } = useModal();
+
+  return (
+    <>
+      <PageHead title={t`Settings | API`} />
+
+      <div className="mb-8 border-t border-light-300 dark:border-dark-300">
+        <h2 className="mb-4 mt-8 text-[14px] font-bold text-neutral-900 dark:text-dark-1000">
+          {t`API keys`}
+        </h2>
+        <p className="mb-8 text-sm text-neutral-500 dark:text-dark-900">
+          {t`View and manage your API keys.`}
+        </p>
+
+        <div className="mb-4 flex items-center justify-between">
+          <Button variant="primary" onClick={() => openModal("NEW_API_KEY")}>
+            {t`Create new key`}
+          </Button>
+        </div>
+
+        <ApiKeyList />
+      </div>
+
+      {/* API-specific modals */}
+      <Modal
+        modalSize="sm"
+        isVisible={isOpen && modalContentType === "NEW_API_KEY"}
+      >
+        <NewApiKeyModal />
+      </Modal>
+      <Modal
+        modalSize="sm"
+        isVisible={isOpen && modalContentType === "REVOKE_API_KEY"}
+      >
+        <RevokeApiKeyConfirmation />
+      </Modal>
+
+      {/* Global modals */}
+      <Modal
+        modalSize="md"
+        isVisible={isOpen && modalContentType === "NEW_FEEDBACK"}
+      >
+        <FeedbackModal />
+      </Modal>
+      <Modal
+        modalSize="sm"
+        isVisible={isOpen && modalContentType === "NEW_WORKSPACE"}
+      >
+        <NewWorkspaceForm />
+      </Modal>
+    </>
+  );
+}

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

@@ -0,0 +1,68 @@
+import { t } from "@lingui/core/macro";
+import { HiMiniArrowTopRightOnSquare } from "react-icons/hi2";
+
+import Button from "~/components/Button";
+import FeedbackModal from "~/components/FeedbackModal";
+import Modal from "~/components/modal";
+import { NewWorkspaceForm } from "~/components/NewWorkspaceForm";
+import { PageHead } from "~/components/PageHead";
+import { useModal } from "~/providers/modal";
+
+export default function BillingSettings() {
+  const { modalContentType, isOpen } = useModal();
+
+  const handleOpenBillingPortal = async () => {
+    try {
+      const response = await fetch("/api/stripe/create_billing_session", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+      });
+
+      const { url } = (await response.json()) as { url: string };
+
+      if (url) {
+        window.location.href = url;
+      }
+    } catch (error) {
+      console.error("Error creating billing session:", error);
+    }
+  };
+
+  return (
+    <>
+      <PageHead title={t`Settings | Billing`} />
+
+      <div className="mb-8 border-t border-light-300 dark:border-dark-300">
+        <h2 className="mb-4 mt-8 text-[14px] font-bold text-neutral-900 dark:text-dark-1000">
+          {t`Billing`}
+        </h2>
+        <p className="mb-8 text-sm text-neutral-500 dark:text-dark-900">
+          {t`View and manage your billing and subscription.`}
+        </p>
+        <Button
+          variant="primary"
+          iconRight={<HiMiniArrowTopRightOnSquare />}
+          onClick={handleOpenBillingPortal}
+        >
+          {t`Billing portal`}
+        </Button>
+      </div>
+
+      {/* Global modals */}
+      <Modal
+        modalSize="md"
+        isVisible={isOpen && modalContentType === "NEW_FEEDBACK"}
+      >
+        <FeedbackModal />
+      </Modal>
+      <Modal
+        modalSize="sm"
+        isVisible={isOpen && modalContentType === "NEW_WORKSPACE"}
+      >
+        <NewWorkspaceForm />
+      </Modal>
+    </>
+  );
+}

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

@@ -0,0 +1,130 @@
+import { t } from "@lingui/core/macro";
+import { useEffect } from "react";
+import { HiMiniArrowTopRightOnSquare } from "react-icons/hi2";
+
+import Button from "~/components/Button";
+import FeedbackModal from "~/components/FeedbackModal";
+import Modal from "~/components/modal";
+import { NewWorkspaceForm } from "~/components/NewWorkspaceForm";
+import { PageHead } from "~/components/PageHead";
+import { useModal } from "~/providers/modal";
+import { usePopup } from "~/providers/popup";
+import { api } from "~/utils/api";
+
+export default function IntegrationsSettings() {
+  const { modalContentType, isOpen } = useModal();
+  const { showPopup } = usePopup();
+
+  const {
+    data: integrations,
+    refetch: refetchIntegrations,
+    isLoading: integrationsLoading,
+  } = api.integration.providers.useQuery();
+
+  const { data: trelloUrl, refetch: refetchTrelloUrl } =
+    api.integration.getAuthorizationUrl.useQuery(
+      { provider: "trello" },
+      {
+        enabled:
+          !integrationsLoading &&
+          !integrations?.some(
+            (integration) => integration.provider === "trello",
+          ),
+        refetchOnWindowFocus: true,
+      },
+    );
+
+  useEffect(() => {
+    const handleFocus = () => {
+      refetchIntegrations();
+    };
+    window.addEventListener("focus", handleFocus);
+    return () => {
+      window.removeEventListener("focus", handleFocus);
+    };
+  }, [refetchIntegrations]);
+
+  const { mutateAsync: disconnectTrello } =
+    api.integration.disconnect.useMutation({
+      onSuccess: () => {
+        refetchIntegrations();
+        refetchTrelloUrl();
+        showPopup({
+          header: t`Trello disconnected`,
+          message: t`Your Trello account has been disconnected.`,
+          icon: "success",
+        });
+      },
+      onError: () => {
+        showPopup({
+          header: t`Error disconnecting Trello`,
+          message: t`An error occurred while disconnecting your Trello account.`,
+          icon: "error",
+        });
+      },
+    });
+
+  return (
+    <>
+      <PageHead title={t`Settings | Integrations`} />
+
+      <div className="mb-8 border-t border-light-300 dark:border-dark-300">
+        <h2 className="mb-4 mt-8 text-[14px] font-bold text-neutral-900 dark:text-dark-1000">
+          {t`Trello`}
+        </h2>
+        {!integrations?.some(
+          (integration) => integration.provider === "trello",
+        ) && trelloUrl ? (
+          <>
+            <p className="mb-8 text-sm text-neutral-500 dark:text-dark-900">
+              {t`Connect your Trello account to import boards.`}
+            </p>
+            <Button
+              variant="primary"
+              iconRight={<HiMiniArrowTopRightOnSquare />}
+              onClick={() =>
+                window.open(
+                  trelloUrl.url,
+                  "trello_auth",
+                  "height=800,width=600",
+                )
+              }
+            >
+              {t`Connect Trello`}
+            </Button>
+          </>
+        ) : (
+          integrations?.some(
+            (integration) => integration.provider === "trello",
+          ) && (
+            <>
+              <p className="mb-8 text-sm text-neutral-500 dark:text-dark-900">
+                {t`Your Trello account is connected.`}
+              </p>
+              <Button
+                variant="secondary"
+                onClick={() => disconnectTrello({ provider: "trello" })}
+              >
+                {t`Disconnect Trello`}
+              </Button>
+            </>
+          )
+        )}
+      </div>
+
+      {/* Global modals */}
+      <Modal
+        modalSize="md"
+        isVisible={isOpen && modalContentType === "NEW_FEEDBACK"}
+      >
+        <FeedbackModal />
+      </Modal>
+      <Modal
+        modalSize="sm"
+        isVisible={isOpen && modalContentType === "NEW_WORKSPACE"}
+      >
+        <NewWorkspaceForm />
+      </Modal>
+    </>
+  );
+}

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

@@ -0,0 +1,145 @@
+import { useRouter } from "next/router";
+import { t } from "@lingui/core/macro";
+import { env } from "next-runtime-env";
+import { useEffect, useState } from "react";
+import { HiBolt } from "react-icons/hi2";
+
+import type { Subscription } from "@kan/shared/utils";
+import { hasActiveSubscription } from "@kan/shared/utils";
+
+import Button from "~/components/Button";
+import FeedbackModal from "~/components/FeedbackModal";
+import Modal from "~/components/modal";
+import { NewWorkspaceForm } from "~/components/NewWorkspaceForm";
+import { PageHead } from "~/components/PageHead";
+import { useModal } from "~/providers/modal";
+import { useWorkspace } from "~/providers/workspace";
+import { api } from "~/utils/api";
+import { DeleteWorkspaceConfirmation } from "./components/DeleteWorkspaceConfirmation";
+import UpdateWorkspaceDescriptionForm from "./components/UpdateWorkspaceDescriptionForm";
+import UpdateWorkspaceNameForm from "./components/UpdateWorkspaceNameForm";
+import UpdateWorkspaceUrlForm from "./components/UpdateWorkspaceUrlForm";
+import { UpgradeToProConfirmation } from "./components/UpgradeToProConfirmation";
+
+export default function WorkspaceSettings() {
+  const { modalContentType, openModal, isOpen } = useModal();
+  const { workspace } = useWorkspace();
+  const router = useRouter();
+  const { data } = api.user.getUser.useQuery();
+  const [hasOpenedUpgradeModal, setHasOpenedUpgradeModal] = useState(false);
+
+  const { data: workspaceData } = api.workspace.byId.useQuery({
+    workspacePublicId: workspace.publicId,
+  });
+
+  const subscriptions = workspaceData?.subscriptions as
+    | Subscription[]
+    | undefined;
+
+  // Open upgrade modal if upgrade=pro is in URL params
+  useEffect(() => {
+    if (
+      router.query.upgrade === "pro" &&
+      env("NEXT_PUBLIC_KAN_ENV") === "cloud" &&
+      !hasActiveSubscription(subscriptions, "pro") &&
+      !hasOpenedUpgradeModal
+    ) {
+      openModal("UPGRADE_TO_PRO");
+      setHasOpenedUpgradeModal(true);
+    }
+  }, [router.query.upgrade, subscriptions, openModal, hasOpenedUpgradeModal]);
+
+  return (
+    <>
+      <PageHead title={t`Settings | Workspace`} />
+
+      <div className="mb-8 border-t border-light-300 dark:border-dark-300">
+        <h2 className="mb-4 mt-8 text-[14px] font-bold text-neutral-900 dark:text-dark-1000">
+          {t`Workspace name`}
+        </h2>
+        <UpdateWorkspaceNameForm
+          workspacePublicId={workspace.publicId}
+          workspaceName={workspace.name}
+        />
+
+        <h2 className="mb-4 mt-8 text-[14px] font-bold text-neutral-900 dark:text-dark-1000">
+          {t`Workspace URL`}
+        </h2>
+        <UpdateWorkspaceUrlForm
+          workspacePublicId={workspace.publicId}
+          workspaceUrl={workspace.slug ?? ""}
+          workspacePlan={workspace.plan ?? "free"}
+        />
+
+        <h2 className="mb-4 mt-8 text-[14px] font-bold text-neutral-900 dark:text-dark-1000">
+          {t`Workspace description`}
+        </h2>
+        <UpdateWorkspaceDescriptionForm
+          workspacePublicId={workspace.publicId}
+          workspaceDescription={workspace.description ?? ""}
+        />
+
+        {env("NEXT_PUBLIC_KAN_ENV") === "cloud" &&
+          !hasActiveSubscription(subscriptions, "pro") && (
+            <div className="my-8">
+              <Button
+                onClick={() => openModal("UPGRADE_TO_PRO")}
+                iconRight={<HiBolt />}
+              >
+                {t`Upgrade to Pro`}
+              </Button>
+            </div>
+          )}
+
+        <div className="border-t border-light-300 dark:border-dark-300">
+          <h2 className="mb-4 mt-8 text-[14px] font-bold text-neutral-900 dark:text-dark-1000">
+            {t`Delete workspace`}
+          </h2>
+          <p className="mb-8 text-sm text-neutral-500 dark:text-dark-900">
+            {t`Once you delete your workspace, there is no going back. This action cannot be undone.`}
+          </p>
+          <div className="mt-4">
+            <Button
+              variant="secondary"
+              onClick={() => openModal("DELETE_WORKSPACE")}
+              disabled={workspace.role !== "admin"}
+            >
+              {t`Delete workspace`}
+            </Button>
+          </div>
+        </div>
+      </div>
+
+      {/* Workspace-specific modals */}
+      <Modal
+        modalSize="sm"
+        isVisible={isOpen && modalContentType === "DELETE_WORKSPACE"}
+      >
+        <DeleteWorkspaceConfirmation />
+      </Modal>
+      <Modal
+        modalSize="sm"
+        isVisible={isOpen && modalContentType === "UPGRADE_TO_PRO"}
+      >
+        <UpgradeToProConfirmation
+          userId={data?.id ?? ""}
+          workspacePublicId={workspace.publicId}
+        />
+      </Modal>
+
+      {/* Global modals */}
+      <Modal
+        modalSize="md"
+        isVisible={isOpen && modalContentType === "NEW_FEEDBACK"}
+      >
+        <FeedbackModal />
+      </Modal>
+      <Modal
+        modalSize="sm"
+        isVisible={isOpen && modalContentType === "NEW_WORKSPACE"}
+      >
+        <NewWorkspaceForm />
+      </Modal>
+    </>
+  );
+}

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

@@ -0,0 +1,202 @@
+import { useQuery } from "@tanstack/react-query";
+import { HiEllipsisHorizontal } from "react-icons/hi2";
+import { twMerge } from "tailwind-merge";
+
+import { authClient } from "@kan/auth/client";
+
+import Dropdown from "~/components/Dropdown";
+import { useModal } from "~/providers/modal";
+
+export default function ApiKeyList() {
+  const { openModal } = useModal();
+
+  const { data, isLoading } = useQuery({
+    queryKey: ["apiKeys"],
+    queryFn: () => authClient.apiKey.list(),
+  });
+
+  const TableRow = ({
+    keyId,
+    keyName,
+    keyStart,
+    createdAt,
+    lastRequest,
+    isLastRow,
+    showSkeleton,
+  }: {
+    keyId?: string;
+    keyName?: string | null | undefined;
+    keyStart?: string | null | undefined;
+    createdAt?: Date | null;
+    lastRequest?: Date | null;
+    isLastRow?: boolean | undefined;
+    showSkeleton?: boolean | undefined;
+  }) => {
+    const formatDate = (date?: Date | string | null) => {
+      if (!date) return "Never";
+      const dateObj = date instanceof Date ? date : new Date(date);
+      return dateObj.toLocaleDateString("en-US", {
+        year: "numeric",
+        month: "short",
+        day: "numeric",
+      });
+    };
+
+    return (
+      <tr className="rounded-b-lg">
+        <td className={twMerge("w-[30%]", isLastRow ? "rounded-bl-lg" : "")}>
+          <div className="flex items-center p-4">
+            <div className="ml-2 min-w-0 flex-1">
+              <div>
+                <div className="flex items-center">
+                  <p
+                    className={twMerge(
+                      "mr-2 text-sm font-medium text-light-900 dark:text-dark-900",
+                      showSkeleton &&
+                        "md mb-2 h-3 w-[125px] animate-pulse rounded-sm bg-light-200 dark:bg-dark-200",
+                    )}
+                  >
+                    {keyName}
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </td>
+        <td className="w-[20%] px-3 py-4">
+          <p
+            className={twMerge(
+              "text-sm text-light-900 dark:text-dark-900",
+              showSkeleton &&
+                "h-3 w-[80px] animate-pulse rounded-sm bg-light-200 dark:bg-dark-200",
+            )}
+          >
+            {formatDate(createdAt)}
+          </p>
+        </td>
+        <td className="w-[20%] px-3 py-4">
+          <p
+            className={twMerge(
+              "text-sm text-light-900 dark:text-dark-900",
+              showSkeleton &&
+                "h-3 w-[80px] animate-pulse rounded-sm bg-light-200 dark:bg-dark-200",
+            )}
+          >
+            {formatDate(lastRequest)}
+          </p>
+        </td>
+        <td className="w-[25%] px-3 py-4">
+          <div>
+            <span
+              className={twMerge(
+                "inline-flex items-center rounded-md bg-emerald-500/10 px-1.5 py-0.5 text-[11px] font-medium text-emerald-400 ring-1 ring-inset ring-emerald-500/20",
+                showSkeleton &&
+                  "h-5 w-[50px] animate-pulse bg-light-200 ring-0 dark:bg-dark-200",
+              )}
+            >
+              {keyStart}...
+            </span>
+          </div>
+        </td>
+        <td
+          className={twMerge(
+            "w-[5%] min-w-[50px]",
+            isLastRow && "rounded-br-lg",
+          )}
+        >
+          <div className="flex w-full items-center justify-center px-3">
+            <div className="relative z-50">
+              <Dropdown
+                items={[
+                  {
+                    label: "Revoke",
+                    action: () =>
+                      openModal("REVOKE_API_KEY", keyId, keyName ?? ""),
+                  },
+                ]}
+              >
+                <HiEllipsisHorizontal
+                  size={25}
+                  className="text-light-900 dark:text-dark-900"
+                />
+              </Dropdown>
+            </div>
+          </div>
+        </td>
+      </tr>
+    );
+  };
+
+  if (!isLoading && (!data?.data || data.data.length === 0)) {
+    return null;
+  }
+
+  return (
+    <div className="mt-8 flow-root">
+      <div className="overflow-x-auto overflow-y-visible">
+        <div className="inline-block min-w-full py-2 pb-12 align-middle">
+          <div className="relative h-full shadow ring-1 ring-black ring-opacity-5 sm:rounded-lg">
+            <table className="min-w-[600px] divide-y divide-light-600 dark:divide-dark-600">
+              <thead className="rounded-t-lg bg-light-300 dark:bg-dark-200">
+                <tr>
+                  <th
+                    scope="col"
+                    className="w-[30%] rounded-tl-lg py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-light-900 dark:text-dark-900 sm:pl-6"
+                  >
+                    Name
+                  </th>
+                  <th
+                    scope="col"
+                    className="w-[20%] px-3 py-3.5 text-left text-sm font-semibold text-light-900 dark:text-dark-900"
+                  >
+                    Created
+                  </th>
+                  <th
+                    scope="col"
+                    className="w-[20%] px-3 py-3.5 text-left text-sm font-semibold text-light-900 dark:text-dark-900"
+                  >
+                    Last Used
+                  </th>
+                  <th
+                    scope="col"
+                    className="w-[25%] px-3 py-3.5 text-left text-sm font-semibold text-light-900 dark:text-dark-900"
+                  >
+                    Key
+                  </th>
+                  <th
+                    scope="col"
+                    className="w-[5%] rounded-tr-lg px-3 py-3.5 text-center text-sm font-semibold text-light-900 dark:text-dark-900"
+                  >
+                    {/* Actions column */}
+                  </th>
+                </tr>
+              </thead>
+              <tbody className="divide-y divide-light-600 bg-light-50 dark:divide-dark-600 dark:bg-dark-100">
+                {!isLoading &&
+                  data?.data?.map((apiKey, index) => (
+                    <TableRow
+                      key={apiKey.id}
+                      keyId={apiKey.id}
+                      keyName={apiKey.name}
+                      keyStart={apiKey.start}
+                      createdAt={apiKey.createdAt}
+                      lastRequest={apiKey.lastRequest}
+                      isLastRow={index === data.data.length - 1}
+                    />
+                  ))}
+
+                {isLoading && (
+                  <>
+                    <TableRow showSkeleton />
+                    <TableRow showSkeleton />
+                    <TableRow showSkeleton isLastRow />
+                  </>
+                )}
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -1,14 +1,45 @@
 import Image from "next/image";
 import { t } from "@lingui/core/macro";
 import { env } from "next-runtime-env";
-import { useState } from "react";
+import { useCallback, useRef, useState } from "react";
+import ReactCrop from "react-image-crop";
+
+import "react-image-crop/dist/ReactCrop.css";
 
 import { generateUID } from "@kan/shared/utils";
 
+import Button from "~/components/Button";
+import Modal from "~/components/modal";
 import { usePopup } from "~/providers/popup";
 import { api } from "~/utils/api";
 import { getAvatarUrl } from "~/utils/helpers";
 
+interface PercentCrop {
+  unit: "%";
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
+
+interface LocalPixelCrop {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
+
+interface ReactCropProps {
+  crop: PercentCrop | undefined;
+  onChange: (crop: LocalPixelCrop, percentCrop: PercentCrop) => void;
+  aspect?: number;
+  className?: string;
+  circularCrop?: boolean;
+  children: React.ReactNode;
+}
+
+const AnyReactCrop = ReactCrop as unknown as React.FC<ReactCropProps>;
+
 export default function Avatar({
   userId,
   userImage,
@@ -19,6 +50,13 @@ export default function Avatar({
   const utils = api.useUtils();
   const { showPopup } = usePopup();
   const [uploading, setUploading] = useState(false);
+  const [cropDialogOpen, setCropDialogOpen] = useState(false);
+  const [selectedFile, setSelectedFile] = useState<File | null>(null);
+  const [selectedPreviewUrl, setSelectedPreviewUrl] = useState<string | null>(
+    null,
+  );
+  const [crop, setCrop] = useState<PercentCrop>();
+  const imgRef = useRef<HTMLImageElement | null>(null);
 
   const updateUser = api.user.update.useMutation({
     onSuccess: async () => {
@@ -45,24 +83,109 @@ export default function Avatar({
 
   const avatarUrl = userImage ? getAvatarUrl(userImage) : undefined;
 
-  const uploadAvatar = async (event: React.ChangeEvent<HTMLInputElement>) => {
-    try {
-      event.preventDefault();
+  const onFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    event.preventDefault();
+    const file = event.target.files?.[0] ?? null;
+    if (!file || !userId) {
+      return showPopup({
+        header: t`Error uploading profile image`,
+        message: t`Please select a file to upload.`,
+        icon: "error",
+      });
+    }
+    // Open crop dialog with preview
+    setSelectedFile(file);
+    const objUrl = URL.createObjectURL(file);
+    setSelectedPreviewUrl(objUrl);
+    setCropDialogOpen(true);
+  };
 
-      const file = event.target.files?.[0];
-
-      if (!file || !userId) {
-        return showPopup({
-          header: t`Error uploading profile image`,
-          message: t`Please select a file to upload.`,
-          icon: "error",
-        });
+  const onImageLoad = useCallback(
+    (e: React.SyntheticEvent<HTMLImageElement>) => {
+      const { naturalWidth, naturalHeight } = e.currentTarget;
+      // Create a centered square crop at ~90% of the smaller dimension
+      // Compute width% so that the square fits within the image
+      let widthPercent: number;
+      let heightPercent: number;
+      if (naturalWidth >= naturalHeight) {
+        // landscape: height is limiting
+        heightPercent = 90;
+        widthPercent = (naturalHeight / naturalWidth) * heightPercent;
+      } else {
+        // portrait: width is limiting
+        widthPercent = 90;
+        heightPercent = (naturalWidth / naturalHeight) * widthPercent;
       }
+      const x = (100 - widthPercent) / 2;
+      const y = (100 - heightPercent) / 2;
+      setCrop({ unit: "%", x, y, width: widthPercent, height: heightPercent });
+    },
+    [],
+  );
 
-      const fileExt = file.name.split(".").pop();
-      const fileName = `${userId}/avatar-${generateUID()}.${fileExt}`;
+  const getCroppedBlob = useCallback(async (): Promise<Blob> => {
+    if (!imgRef.current || !crop) throw new Error("No crop to save");
+    const image = imgRef.current;
 
+    const canvas = document.createElement("canvas");
+    const cropXpx = (crop.x / 100) * image.naturalWidth;
+    const cropYpx = (crop.y / 100) * image.naturalHeight;
+    const cropWpx = (crop.width / 100) * image.naturalWidth;
+    const cropHpx = (crop.height / 100) * image.naturalHeight;
+    canvas.width = Math.max(1, Math.floor(cropWpx));
+    canvas.height = Math.max(1, Math.floor(cropHpx));
+    const ctx = canvas.getContext("2d");
+    if (!ctx) throw new Error("Canvas not supported");
+
+    // For better quality on HiDPI screens
+    const pixelRatio = window.devicePixelRatio || 1;
+    canvas.width = canvas.width * pixelRatio;
+    canvas.height = canvas.height * pixelRatio;
+    ctx.setTransform(pixelRatio, 0, 0, pixelRatio, 0, 0);
+    ctx.imageSmoothingQuality = "high";
+
+    ctx.drawImage(
+      image,
+      cropXpx,
+      cropYpx,
+      cropWpx,
+      cropHpx,
+      0,
+      0,
+      canvas.width / pixelRatio,
+      canvas.height / pixelRatio,
+    );
+
+    const mime = selectedFile?.type ?? "image/jpeg";
+    const blob: Blob = await new Promise((resolve, reject) => {
+      canvas.toBlob(
+        (b) => (b ? resolve(b) : reject(new Error("toBlob failed"))),
+        mime,
+      );
+    });
+    return blob;
+  }, [crop, selectedFile]);
+
+  const resetCropState = useCallback(() => {
+    setCrop(undefined);
+    setSelectedFile(null);
+    if (selectedPreviewUrl) URL.revokeObjectURL(selectedPreviewUrl);
+    setSelectedPreviewUrl(null);
+  }, [selectedPreviewUrl]);
+
+  const handleCancelCrop = useCallback(() => {
+    setCropDialogOpen(false);
+    resetCropState();
+  }, [resetCropState]);
+
+  const handleSaveCrop = useCallback(async () => {
+    try {
+      if (!userId || !selectedFile) return;
       setUploading(true);
+      const blob = await getCroppedBlob();
+
+      const originalExt = selectedFile.name.split(".").pop() ?? "jpg";
+      const fileName = `${userId}/avatar-${generateUID()}.${originalExt}`;
 
       const response = await fetch(
         env("NEXT_PUBLIC_BASE_URL") + "/api/upload/image",
@@ -71,26 +194,24 @@ export default function Avatar({
           headers: {
             "Content-Type": "application/json",
           },
-          body: JSON.stringify({ filename: fileName, contentType: file.type }),
+          body: JSON.stringify({ filename: fileName, contentType: blob.type }),
         },
       );
 
       if (!response.ok) throw new Error("Failed to get pre-signed URL");
 
-      const { url } = (await response.json()) as {
-        url: string;
-      };
+      const { url } = (await response.json()) as { url: string };
 
       const uploadResponse = await fetch(url, {
         method: "PUT",
-        body: file,
+        body: blob,
       });
 
       if (!uploadResponse.ok) throw new Error("Failed to upload profile image");
 
-      updateUser.mutate({
-        image: fileName,
-      });
+      updateUser.mutate({ image: fileName });
+      setCropDialogOpen(false);
+      resetCropState();
     } catch (error) {
       console.error(error);
       showPopup({
@@ -101,7 +222,14 @@ export default function Avatar({
     } finally {
       setUploading(false);
     }
-  };
+  }, [
+    getCroppedBlob,
+    resetCropState,
+    selectedFile,
+    showPopup,
+    updateUser,
+    userId,
+  ]);
 
   return (
     <div>
@@ -111,7 +239,7 @@ export default function Avatar({
           type="file"
           id="single"
           accept="image/*"
-          onChange={uploadAvatar}
+          onChange={onFileChange}
           disabled={uploading}
         />
         {avatarUrl ? (
@@ -134,6 +262,56 @@ export default function Avatar({
           </span>
         )}
       </div>
+
+      {/* Crop Dialog */}
+      {cropDialogOpen && (
+        <Modal modalSize="md" positionFromTop="sm" isVisible>
+          <div className="p-4 sm:p-6">
+            <div className="mb-4">
+              <h3 className="text-base font-semibold text-light-1000 dark:text-dark-1000">
+                {t`Crop your avatar`}
+              </h3>
+              <p className="mt-1 text-sm text-light-800 dark:text-dark-800">
+                {t`Adjust the square crop to fit your avatar.`}
+              </p>
+            </div>
+            <div className="max-h-[80vh]">
+              <div className="rounded-md border border-light-600 p-2 dark:border-dark-600">
+                <AnyReactCrop
+                  crop={crop}
+                  onChange={(_crop: LocalPixelCrop, percentCrop: PercentCrop) =>
+                    setCrop(percentCrop)
+                  }
+                  aspect={1}
+                  circularCrop
+                  className="w-full"
+                >
+                  {/* eslint-disable-next-line @next/next/no-img-element */}
+                  <img
+                    ref={imgRef}
+                    src={selectedPreviewUrl ?? undefined}
+                    alt="Avatar to crop"
+                    onLoad={onImageLoad}
+                    className="h-auto max-h-[50vh] w-full object-contain"
+                  />
+                </AnyReactCrop>
+              </div>
+            </div>
+            <div className="mt-6 flex items-center justify-end gap-2">
+              <Button
+                variant="ghost"
+                onClick={handleCancelCrop}
+                disabled={uploading}
+              >
+                {t`Cancel`}
+              </Button>
+              <Button onClick={handleSaveCrop} isLoading={uploading}>
+                {t`Save`}
+              </Button>
+            </div>
+          </div>
+        </Modal>
+      )}
     </div>
   );
 }

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

@@ -1,60 +0,0 @@
-import { t } from "@lingui/core/macro";
-
-import { authClient } from "@kan/auth/client";
-
-import Button from "~/components/Button";
-import Input from "~/components/Input";
-
-const CreateAPIKeyForm = ({
-  apiKey,
-  refetchUser,
-}: {
-  apiKey:
-    | {
-        id: number;
-        prefix: string | null;
-        key: string;
-      }
-    | null
-    | undefined;
-  refetchUser: () => void;
-}) => {
-  const handleCreateAPIKey = async () => {
-    await authClient.apiKey.create({
-      name: "Kan API Key",
-      prefix: "kan_",
-    });
-
-    refetchUser();
-  };
-
-  const handleRevokeAPIKey = async () => {
-    if (!apiKey) return;
-    await authClient.apiKey.delete({
-      keyId: apiKey.id.toString(),
-    });
-
-    refetchUser();
-  };
-
-  return (
-    <div>
-      {apiKey ? (
-        <div className="flex gap-2">
-          <div className="mb-4 flex w-full max-w-[325px] items-center gap-2">
-            <Input value={apiKey.key} readOnly type="password" />
-          </div>
-          <div>
-            <Button variant="danger" onClick={handleRevokeAPIKey}>
-              {t`Revoke`}
-            </Button>
-          </div>
-        </div>
-      ) : (
-        <Button onClick={handleCreateAPIKey}>{t`Create new key`}</Button>
-      )}
-    </div>
-  );
-};
-
-export default CreateAPIKeyForm;

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

@@ -1,56 +0,0 @@
-import { t } from "@lingui/core/macro";
-
-import Button from "~/components/Button";
-import { useModal } from "~/providers/modal";
-
-export function CustomURLConfirmation({
-  workspacePublicId,
-}: {
-  workspacePublicId: string;
-}) {
-  const { closeModal, entityId } = useModal();
-
-  const handleUpgrade = async () => {
-    try {
-      const response = await fetch("/api/stripe/create_checkout_session", {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-        },
-        body: JSON.stringify({
-          slug: entityId,
-          workspacePublicId: workspacePublicId,
-          cancelUrl: "/settings",
-          successUrl: "/settings",
-        }),
-      });
-
-      const { url } = (await response.json()) as { url: string };
-
-      if (url) {
-        window.location.href = url;
-      }
-    } catch (error) {
-      console.error("Error creating checkout session:", error);
-    }
-  };
-
-  return (
-    <div className="p-5">
-      <div className="flex w-full flex-col justify-between pb-4">
-        <h2 className="text-md pb-4 font-medium text-neutral-900 dark:text-dark-1000">
-          {t`Confirm URL change`}
-        </h2>
-        <p className="text-sm font-medium text-light-900 dark:text-dark-900">
-          {t`Custom URLs are a premium feature. You'll be directed to upgrade your account.`}
-        </p>
-      </div>
-      <div className="mt-5 flex justify-end space-x-2 sm:mt-6">
-        <Button onClick={() => closeModal()} variant="secondary">
-          {t`Cancel`}
-        </Button>
-        <Button onClick={handleUpgrade}>{t`Upgrade`}</Button>
-      </div>
-    </div>
-  );
-}

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

@@ -0,0 +1,69 @@
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+
+import { authClient } from "@kan/auth/client";
+
+import Button from "~/components/Button";
+import Input from "~/components/Input";
+import { useModal } from "~/providers/modal";
+
+const newApiKeySchema = z.object({
+  name: z.string().min(1),
+});
+
+export default function NewApiKeyForm() {
+  const { openModal } = useModal();
+  const form = useForm({
+    resolver: zodResolver(newApiKeySchema),
+    defaultValues: {
+      name: "",
+    },
+  });
+
+  const qc = useQueryClient();
+
+  const createApiKeyMutation = useMutation({
+    mutationFn: ({ name }: { name: string }) =>
+      authClient.apiKey.create({ name, prefix: "kan_" }),
+    onSuccess: ({ data: apiKey }) => {
+      qc.invalidateQueries({
+        queryKey: ["apiKeys"],
+      });
+      openModal("API_KEY_CREATED", apiKey?.key, apiKey?.name ?? "");
+    },
+    onError: () => {
+      form.setError("name", {
+        type: "manual",
+        message: "Failed to create API key",
+      });
+    },
+  });
+
+  const handleSubmit = (data: z.infer<typeof newApiKeySchema>) => {
+    createApiKeyMutation.mutate({ name: data.name });
+  };
+
+  return (
+    <div className="px-2 py-2">
+      <form
+        onSubmit={form.handleSubmit(handleSubmit)}
+        className="flex flex-col gap-2"
+      >
+        <h2 className="text-sm font-bold text-neutral-900 dark:text-dark-1000">
+          New API key
+        </h2>
+        <Input
+          {...form.register("name")}
+          placeholder="Name"
+          className="w-full"
+          errorMessage={form.formState.errors.name?.message}
+        />
+        <Button type="submit" isLoading={createApiKeyMutation.isPending}>
+          Create
+        </Button>
+      </form>
+    </div>
+  );
+}

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

@@ -0,0 +1,181 @@
+import { zodResolver } from "@hookform/resolvers/zod";
+import { t } from "@lingui/core/macro";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { useEffect, useState } from "react";
+import { useForm } from "react-hook-form";
+import {
+  HiInformationCircle,
+  HiMiniCheck,
+  HiOutlineDocumentDuplicate,
+  HiXMark,
+} from "react-icons/hi2";
+import { z } from "zod";
+
+import { authClient } from "@kan/auth/client";
+
+import Button from "~/components/Button";
+import Input from "~/components/Input";
+import { useClipboard } from "~/hooks/useClipboard";
+import { useModal } from "~/providers/modal";
+
+const newApiKeySchema = z.object({
+  name: z
+    .string()
+    .min(1, { message: t`API key name is required` })
+    .max(30, { message: t`API key name cannot exceed 30 characters` }),
+});
+
+export default function NewApiKeyModal() {
+  const { closeModal } = useModal();
+  const { copied, copy } = useClipboard({ timeout: 2000 });
+  const [createdApiKey, setCreatedApiKey] = useState<{
+    key: string;
+    name: string;
+  } | null>(null);
+
+  const {
+    register,
+    handleSubmit,
+    reset,
+    formState: { errors },
+  } = useForm<z.infer<typeof newApiKeySchema>>({
+    resolver: zodResolver(newApiKeySchema),
+    defaultValues: {
+      name: "",
+    },
+  });
+
+  const qc = useQueryClient();
+
+  const createApiKeyMutation = useMutation({
+    mutationFn: ({ name }: { name: string }) =>
+      authClient.apiKey.create({ name, prefix: "kan_" }),
+    onSuccess: ({ data: apiKey }) => {
+      void qc.invalidateQueries({
+        queryKey: ["apiKeys"],
+      });
+      if (apiKey && apiKey.key && apiKey.name) {
+        setCreatedApiKey({
+          key: apiKey.key,
+          name: apiKey.name,
+        });
+      }
+    },
+    onError: () => {
+      // Handle error if needed
+    },
+  });
+
+  const onSubmit = (data: z.infer<typeof newApiKeySchema>) => {
+    createApiKeyMutation.mutate({ name: data.name });
+  };
+
+  useEffect(() => {
+    // Reset state and form when modal opens
+    setCreatedApiKey(null);
+    reset();
+  }, [reset]);
+
+  useEffect(() => {
+    if (!createdApiKey) {
+      const nameElement = document.querySelector<HTMLElement>("#name");
+      if (nameElement) nameElement.focus();
+    }
+  }, [createdApiKey]);
+
+  if (createdApiKey) {
+    return (
+      <div>
+        <div className="px-5 pt-5">
+          <div className="flex w-full items-center justify-between pb-4 text-neutral-900 dark:text-dark-1000">
+            <h2 className="text-sm font-bold">{t`API key created`}</h2>
+            <button
+              type="button"
+              className="rounded p-1 hover:bg-light-300 focus:outline-none dark:hover:bg-dark-300"
+              onClick={(e) => {
+                e.preventDefault();
+                closeModal();
+              }}
+            >
+              <HiXMark
+                size={18}
+                className="text-light-900 dark:text-dark-900"
+              />
+            </button>
+          </div>
+
+          <div className="mb-4">
+            <div className="relative">
+              <Input
+                value={createdApiKey.key}
+                className="pr-10 text-sm text-light-900 dark:text-dark-900"
+                readOnly
+              />
+              <button
+                type="button"
+                className="absolute inset-y-0 right-0 flex items-center pr-3 text-light-900 hover:text-light-950 dark:text-dark-900 dark:hover:text-dark-950"
+                onClick={() => copy(createdApiKey.key)}
+              >
+                {copied ? (
+                  <HiMiniCheck className="h-5 w-5 text-green-600" />
+                ) : (
+                  <HiOutlineDocumentDuplicate className="h-5 w-5" />
+                )}
+              </button>
+            </div>
+            <div className="mt-2 flex items-start gap-1">
+              <HiInformationCircle className="mt-0.5 h-4 w-4 text-dark-900" />
+              <p className="text-xs text-gray-500 dark:text-dark-900">
+                {t`This API key will only be shown once. Please save it in a secure location.`}
+              </p>
+            </div>
+          </div>
+        </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">
+          <div>
+            <Button onClick={() => closeModal()}>{t`Close`}</Button>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)}>
+      <div className="px-5 pt-5">
+        <div className="flex w-full items-center justify-between pb-4 text-neutral-900 dark:text-dark-1000">
+          <h2 className="text-sm font-bold">{t`New API key`}</h2>
+          <button
+            type="button"
+            className="rounded p-1 hover:bg-light-300 focus:outline-none dark:hover:bg-dark-300"
+            onClick={(e) => {
+              e.preventDefault();
+              closeModal();
+            }}
+          >
+            <HiXMark size={18} className="text-light-900 dark:text-dark-900" />
+          </button>
+        </div>
+        <Input
+          id="name"
+          placeholder={t`API key name`}
+          {...register("name", { required: true })}
+          errorMessage={errors.name?.message}
+          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">
+        <div>
+          <Button type="submit" isLoading={createApiKeyMutation.isPending}>
+            {t`Create API key`}
+          </Button>
+        </div>
+      </div>
+    </form>
+  );
+}

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

@@ -0,0 +1,96 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { useState } from "react";
+
+import { authClient } from "@kan/auth/client";
+
+import Button from "~/components/Button";
+import { useModal } from "~/providers/modal";
+import { usePopup } from "~/providers/popup";
+
+export function RevokeApiKeyConfirmation() {
+  const { closeModal, entityId, entityLabel } = useModal();
+  const { showPopup } = usePopup();
+  const qc = useQueryClient();
+
+  const [isAcknowledgmentChecked, setIsAcknowledgmentChecked] = useState(false);
+
+  const deleteApiKeyMutation = useMutation({
+    mutationFn: () => authClient.apiKey.delete({ keyId: entityId }),
+    onSuccess: async () => {
+      closeModal();
+      showPopup({
+        header: "API key revoked",
+        message: `Your API key: ${entityLabel} has been revoked.`,
+        icon: "success",
+      });
+      qc.invalidateQueries({
+        queryKey: ["apiKeys"],
+      });
+    },
+    onError: () => {
+      closeModal();
+      showPopup({
+        header: "Error revoking API key",
+        message: "Please try again later, or contact customer support.",
+        icon: "error",
+      });
+    },
+  });
+
+  const handleRevokeApiKey = () => {
+    deleteApiKeyMutation.mutate();
+  };
+
+  return (
+    <div className="p-5">
+      <div className="flex w-full flex-col justify-between pb-4">
+        <h2 className="text-md pb-4 font-medium text-neutral-900 dark:text-dark-1000">
+          {`Are you sure you want to revoke this API key: ${entityLabel}?`}
+        </h2>
+        <p className="mb-4 text-sm text-light-900 dark:text-dark-900">
+          Keep in mind that this action is irreversible.
+        </p>
+        <p className="text-sm text-light-900 dark:text-dark-900">
+          This will result in the permanent revocation of this API key.
+        </p>
+      </div>
+      <div className="relative flex items-start">
+        <div className="flex h-6 items-center">
+          <input
+            id="acknowledgment"
+            name="acknowledgment"
+            type="checkbox"
+            aria-describedby="acknowledgment-description"
+            className="mt-2 h-[14px] w-[14px] rounded border-gray-300 bg-transparent text-indigo-600 focus:shadow-none focus:ring-0 focus:ring-offset-0"
+            checked={isAcknowledgmentChecked}
+            onChange={() =>
+              setIsAcknowledgmentChecked(!isAcknowledgmentChecked)
+            }
+          />
+        </div>
+        <div className="ml-3 text-sm leading-6">
+          <p
+            id="comments-description"
+            className="text-light-900 dark:text-dark-1000"
+          >
+            I acknowledge that this API key will be permanently revoked and want
+            to proceed.
+          </p>
+        </div>
+      </div>
+      <div className="mt-5 flex justify-end space-x-2 sm:mt-6">
+        <Button variant="secondary" onClick={() => closeModal()}>
+          Cancel
+        </Button>
+        <Button
+          variant="danger"
+          onClick={handleRevokeApiKey}
+          disabled={!isAcknowledgmentChecked}
+          isLoading={deleteApiKeyMutation.isPending}
+        >
+          Revoke API key
+        </Button>
+      </div>
+    </div>
+  );
+}

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

@@ -69,16 +69,18 @@ const UpdateDisplayNameForm = ({ displayName }: { displayName: string }) => {
       <div className="mb-4 flex w-full max-w-[325px] items-center gap-2">
         <Input {...register("name")} errorMessage={errors.name?.message} />
       </div>
-      <div>
-        <Button
-          onClick={handleSubmit(onSubmit)}
-          variant="primary"
-          disabled={!isDirty || updateDisplayName.isPending}
-          isLoading={updateDisplayName.isPending}
-        >
-          {t`Update`}
-        </Button>
-      </div>
+      {isDirty && (
+        <div>
+          <Button
+            onClick={handleSubmit(onSubmit)}
+            variant="primary"
+            disabled={updateDisplayName.isPending}
+            isLoading={updateDisplayName.isPending}
+          >
+            {t`Update`}
+          </Button>
+        </div>
+      )}
     </div>
   );
 };

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

@@ -80,16 +80,18 @@ const UpdateWorkspaceDescriptionForm = ({
           errorMessage={errors.description?.message}
         />
       </div>
-      <div>
-        <Button
-          onClick={handleSubmit(onSubmit)}
-          variant="primary"
-          disabled={!isDirty || updateWorkspaceDescription.isPending}
-          isLoading={updateWorkspaceDescription.isPending}
-        >
-          {t`Update`}
-        </Button>
-      </div>
+      {isDirty && (
+        <div>
+          <Button
+            onClick={handleSubmit(onSubmit)}
+            variant="primary"
+            disabled={updateWorkspaceDescription.isPending}
+            isLoading={updateWorkspaceDescription.isPending}
+          >
+            {t`Update`}
+          </Button>
+        </div>
+      )}
     </div>
   );
 };

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

@@ -72,16 +72,18 @@ const UpdateWorkspaceNameForm = ({
       <div className="mb-4 flex w-full max-w-[325px] items-center gap-2">
         <Input {...register("name")} errorMessage={errors.name?.message} />
       </div>
-      <div>
-        <Button
-          onClick={handleSubmit(onSubmit)}
-          variant="primary"
-          disabled={!isDirty || updateWorkspaceName.isPending}
-          isLoading={updateWorkspaceName.isPending}
-        >
-          {t`Update`}
-        </Button>
-      </div>
+      {isDirty && (
+        <div>
+          <Button
+            onClick={handleSubmit(onSubmit)}
+            variant="primary"
+            disabled={updateWorkspaceName.isPending}
+            isLoading={updateWorkspaceName.isPending}
+          >
+            {t`Update`}
+          </Button>
+        </div>
+      )}
     </div>
   );
 };

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

@@ -98,7 +98,7 @@ const UpdateWorkspaceUrlForm = ({
     if (!isWorkspaceSlugAvailable?.isAvailable) return;
 
     if (workspacePlan !== "pro" && env("NEXT_PUBLIC_KAN_ENV") === "cloud")
-      return openModal("UPDATE_WORKSPACE_URL", data.slug);
+      return openModal("UPGRADE_TO_PRO", data.slug);
 
     updateWorkspaceSlug.mutate({
       workspacePublicId,
@@ -138,22 +138,23 @@ const UpdateWorkspaceUrlForm = ({
           }
         />
       </div>
-      <div>
-        <Button
-          onClick={handleSubmit(onSubmit)}
-          variant="primary"
-          disabled={
-            !isDirty ||
-            updateWorkspaceSlug.isPending ||
-            checkWorkspaceSlugAvailability.isPending ||
-            isWorkspaceSlugAvailable?.isAvailable === false ||
-            isTyping
-          }
-          isLoading={updateWorkspaceSlug.isPending}
-        >
-          {t`Update`}
-        </Button>
-      </div>
+      {isDirty && (
+        <div>
+          <Button
+            onClick={handleSubmit(onSubmit)}
+            variant="primary"
+            disabled={
+              updateWorkspaceSlug.isPending ||
+              checkWorkspaceSlugAvailability.isPending ||
+              isWorkspaceSlugAvailable?.isAvailable === false ||
+              isTyping
+            }
+            isLoading={updateWorkspaceSlug.isPending}
+          >
+            {t`Update`}
+          </Button>
+        </div>
+      )}
     </div>
   );
 };

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

@@ -0,0 +1,113 @@
+import { t } from "@lingui/core/macro";
+import { HiBolt, HiCheckBadge } from "react-icons/hi2";
+
+import Button from "~/components/Button";
+import { useModal } from "~/providers/modal";
+import { usePopup } from "~/providers/popup";
+
+export function UpgradeToProConfirmation({
+  workspacePublicId,
+}: {
+  userId: string;
+  workspacePublicId: string;
+}) {
+  const { closeModal, entityId } = useModal();
+  const { showPopup } = usePopup();
+
+  const handleUpgrade = async () => {
+    try {
+      const response = await fetch("/api/stripe/create_checkout_session", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+          ...(entityId && { slug: entityId }),
+          workspacePublicId: workspacePublicId,
+          cancelUrl: "/settings",
+          successUrl: "/settings",
+        }),
+      });
+
+      const { url } = (await response.json()) as { url: string };
+
+      if (url) {
+        window.location.href = url;
+      }
+    } catch (error) {
+      console.error("Error creating checkout session:", error);
+
+      showPopup({
+        header: t`Error upgrading subscription`,
+        message: t`Please try again later, or contact customer support.`,
+        icon: "error",
+      });
+    }
+  };
+
+  return (
+    <div className="p-5">
+      <div className="flex w-full flex-col justify-between pb-4">
+        <h2 className="text-md pb-4 font-bold text-neutral-900 dark:text-dark-1000">
+          {t`Upgrade to Pro`}
+        </h2>
+        <p className="mb-4 text-sm font-medium text-light-900 dark:text-dark-900">
+          {t`Supercharge your workspace for just $29/month. Here's what you'll get:`}
+        </p>
+
+        <div className="rounded-md bg-light-100 p-3 text-xs text-light-900 dark:bg-dark-200 dark:text-dark-900">
+          <div className="space-y-3">
+            <div className="flex items-center space-x-3">
+              <HiCheckBadge className="h-5 w-5 flex-shrink-0 text-light-1000 dark:text-dark-950" />
+              <div className="flex items-center space-x-2">
+                <span className="text-sm text-neutral-900 dark:text-dark-1000">
+                  {t`Unlimited members`}
+                </span>
+                <span className="inline-flex items-center rounded-full bg-emerald-500/10 px-2 py-0.5 text-[10px] font-medium text-emerald-600 ring-1 ring-inset ring-emerald-500/20 dark:text-emerald-400 sm:text-[10px]">
+                  {t`Launch offer`}
+                </span>
+              </div>
+            </div>
+            <div className="flex items-center space-x-3">
+              <HiCheckBadge className="h-5 w-5 flex-shrink-0 text-light-1000 dark:text-dark-950" />
+              <span className="text-sm text-neutral-900 dark:text-dark-1000">
+                {t`Custom workspace URL`}
+              </span>
+            </div>
+            <div className="flex items-center space-x-3">
+              <HiCheckBadge className="h-5 w-5 flex-shrink-0 text-light-1000 dark:text-dark-950" />
+              <div className="flex items-center space-x-2">
+                <span className="text-xs text-neutral-900 dark:text-dark-1000">
+                  {t`Board analytics`}
+                </span>
+                <span className="inline-flex items-center rounded-full bg-gray-500/10 px-2 py-0.5 text-[10px] font-medium text-gray-600 ring-1 ring-inset ring-gray-500/20 dark:text-gray-400 sm:text-[10px]">
+                  {t`Coming soon`}
+                </span>
+              </div>
+            </div>
+            <div className="flex items-center space-x-3">
+              <HiCheckBadge className="h-5 w-5 flex-shrink-0 text-light-1000 dark:text-dark-950" />
+              <span className="text-sm text-neutral-900 dark:text-dark-1000">
+                {t`Priority email support`}
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className="mt-5 flex justify-end space-x-2 sm:mt-6">
+        <Button
+          onClick={() => {
+            closeModal();
+          }}
+          variant="secondary"
+        >
+          {t`Cancel`}
+        </Button>
+        <Button
+          onClick={handleUpgrade}
+          iconRight={<HiBolt />}
+        >{t`Upgrade`}</Button>
+      </div>
+    </div>
+  );
+}

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

@@ -1,372 +0,0 @@
-import { useRouter } from "next/router";
-import { t } from "@lingui/core/macro";
-import { env } from "next-runtime-env";
-import { useEffect, useRef } from "react";
-import { HiMiniArrowTopRightOnSquare } from "react-icons/hi2";
-
-import Button from "~/components/Button";
-import FeedbackModal from "~/components/FeedbackModal";
-import { LanguageSelector } from "~/components/LanguageSelector";
-import Modal from "~/components/modal";
-import { NewWorkspaceForm } from "~/components/NewWorkspaceForm";
-import { PageHead } from "~/components/PageHead";
-import { useModal } from "~/providers/modal";
-import { usePopup } from "~/providers/popup";
-import { useWorkspace } from "~/providers/workspace";
-import { api } from "~/utils/api";
-import Avatar from "./components/Avatar";
-import { ChangePasswordFormConfirmation } from "./components/ChangePasswordConfirmation";
-import CreateAPIKeyForm from "./components/CreateAPIKeyForm";
-import { CustomURLConfirmation } from "./components/CustomURLConfirmation";
-import { DeleteAccountConfirmation } from "./components/DeleteAccountConfirmation";
-import { DeleteWorkspaceConfirmation } from "./components/DeleteWorkspaceConfirmation";
-import UpdateDisplayNameForm from "./components/UpdateDisplayNameForm";
-import UpdateWorkspaceDescriptionForm from "./components/UpdateWorkspaceDescriptionForm";
-import UpdateWorkspaceNameForm from "./components/UpdateWorkspaceNameForm";
-import UpdateWorkspaceUrlForm from "./components/UpdateWorkspaceUrlForm";
-
-export default function SettingsPage() {
-  const { modalContentType, openModal, isOpen } = useModal();
-  const { workspace } = useWorkspace();
-  const utils = api.useUtils();
-  const { showPopup } = usePopup();
-  const router = useRouter();
-  const workspaceUrlSectionRef = useRef<HTMLDivElement>(null);
-  const scrollContainerRef = useRef<HTMLDivElement>(null);
-  const isCredentialsEnabled =
-    env("NEXT_PUBLIC_ALLOW_CREDENTIALS")?.toLowerCase() === "true";
-  const { data } = api.user.getUser.useQuery();
-
-  const {
-    data: integrations,
-    refetch: refetchIntegrations,
-    isLoading: integrationsLoading,
-  } = api.integration.providers.useQuery();
-
-  const { data: trelloUrl, refetch: refetchTrelloUrl } =
-    api.integration.getAuthorizationUrl.useQuery(
-      { provider: "trello" },
-      {
-        enabled:
-          !integrationsLoading &&
-          !integrations?.some(
-            (integration) => integration.provider === "trello",
-          ),
-        refetchOnWindowFocus: true,
-      },
-    );
-
-  useEffect(() => {
-    const handleFocus = () => {
-      refetchIntegrations();
-    };
-    window.addEventListener("focus", handleFocus);
-    return () => {
-      window.removeEventListener("focus", handleFocus);
-    };
-  }, [refetchIntegrations]);
-
-  useEffect(() => {
-    if (
-      router.query.edit === "workspace_url" &&
-      workspaceUrlSectionRef.current &&
-      scrollContainerRef.current
-    ) {
-      const element = workspaceUrlSectionRef.current;
-      const container = scrollContainerRef.current;
-
-      container.scrollTop = element.offsetTop - 40;
-
-      const input = element.querySelector('input[type="text"]');
-      if (input instanceof HTMLInputElement) {
-        input.focus();
-      }
-    }
-  }, [router.query.edit]);
-
-  const { mutateAsync: disconnectTrello } =
-    api.integration.disconnect.useMutation({
-      onSuccess: () => {
-        refetchUser();
-        refetchIntegrations();
-        refetchTrelloUrl();
-        showPopup({
-          header: t`Trello disconnected`,
-          message: t`Your Trello account has been disconnected.`,
-          icon: "success",
-        });
-      },
-      onError: () => {
-        showPopup({
-          header: t`Error disconnecting Trello`,
-          message: t`An error occurred while disconnecting your Trello account.`,
-          icon: "error",
-        });
-      },
-    });
-
-  const refetchUser = () => utils.user.getUser.refetch();
-
-  const handleOpenBillingPortal = async () => {
-    try {
-      const response = await fetch("/api/stripe/create_billing_session", {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-        },
-      });
-
-      const { url } = (await response.json()) as { url: string };
-
-      if (url) {
-        window.location.href = url;
-      }
-    } catch (error) {
-      console.error("Error creating billing session:", error);
-    }
-  };
-
-  return (
-    <>
-      <div className="flex h-full w-full flex-col overflow-hidden">
-        <div
-          ref={scrollContainerRef}
-          className="h-full max-h-[calc(100vdh-3rem)] overflow-y-auto md:max-h-[calc(100vdh-4rem)]"
-        >
-          <PageHead title={t`Settings | ${workspace.name ?? "Workspace"}`} />
-          <div className="m-auto max-w-[1100px] px-5 py-6 md:px-28 md:py-12">
-            <div className="mb-8 flex w-full justify-between">
-              <h1 className="font-bold tracking-tight text-neutral-900 dark:text-dark-1000 sm:text-[1.2rem]">
-                {t`Settings`}
-              </h1>
-            </div>
-
-            <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">
-                {t`Profile picture`}
-              </h2>
-              <Avatar userId={data?.id} userImage={data?.image} />
-
-              <h2 className="mb-4 mt-8 text-[14px] text-neutral-900 dark:text-dark-1000">
-                {t`Display name`}
-              </h2>
-              <UpdateDisplayNameForm displayName={data?.name ?? ""} />
-            </div>
-
-            <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">
-                {t`Workspace name`}
-              </h2>
-              <UpdateWorkspaceNameForm
-                workspacePublicId={workspace.publicId}
-                workspaceName={workspace.name}
-              />
-
-              <div ref={workspaceUrlSectionRef}>
-                <h2 className="mb-4 mt-8 text-[14px] text-neutral-900 dark:text-dark-1000">
-                  {t`Workspace URL`}
-                </h2>
-                <UpdateWorkspaceUrlForm
-                  workspacePublicId={workspace.publicId}
-                  workspaceUrl={workspace.slug ?? ""}
-                  workspacePlan={workspace.plan ?? "free"}
-                />
-              </div>
-
-              <h2 className="mb-4 mt-8 text-[14px] text-neutral-900 dark:text-dark-1000">
-                {t`Workspace description`}
-              </h2>
-              <UpdateWorkspaceDescriptionForm
-                workspacePublicId={workspace.publicId}
-                workspaceDescription={workspace.description ?? ""}
-              />
-            </div>
-
-            <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">
-                {t`Language`}
-              </h2>
-              <p className="mb-8 text-sm text-neutral-500 dark:text-dark-900">
-                {t`Change the language of the app.`}
-              </p>
-              <LanguageSelector />
-            </div>
-
-            {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">
-                  {t`Billing`}
-                </h2>
-                <p className="mb-8 text-sm text-neutral-500 dark:text-dark-900">
-                  {t`View and manage your billing and subscription.`}
-                </p>
-                <Button
-                  variant="primary"
-                  iconRight={<HiMiniArrowTopRightOnSquare />}
-                  onClick={handleOpenBillingPortal}
-                >
-                  {t`Billing portal`}
-                </Button>
-              </div>
-            )}
-
-            <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">
-                Trello
-              </h2>
-              {!integrations?.some(
-                (integration) => integration.provider === "trello",
-              ) && trelloUrl ? (
-                <>
-                  <p className="mb-8 text-sm text-neutral-500 dark:text-dark-900">
-                    {t`Connect your Trello account to import boards.`}
-                  </p>
-                  <Button
-                    variant="primary"
-                    iconRight={<HiMiniArrowTopRightOnSquare />}
-                    onClick={() =>
-                      window.open(
-                        trelloUrl.url,
-                        "trello_auth",
-                        "height=800,width=600",
-                      )
-                    }
-                  >
-                    {t`Connect Trello`}
-                  </Button>
-                </>
-              ) : (
-                integrations?.some(
-                  (integration) => integration.provider === "trello",
-                ) && (
-                  <>
-                    <p className="mb-8 text-sm text-neutral-500 dark:text-dark-900">
-                      {t`Your Trello account is connected.`}
-                    </p>
-                    <Button
-                      variant="secondary"
-                      onClick={() => disconnectTrello({ provider: "trello" })}
-                    >
-                      {t`Disconnect Trello`}
-                    </Button>
-                  </>
-                )
-              )}
-            </div>
-
-            <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">
-                {t`API keys`}
-              </h2>
-              <p className="mb-8 text-sm text-neutral-500 dark:text-dark-900">
-                {t`View and manage your API keys.`}
-              </p>
-              <CreateAPIKeyForm
-                apiKey={data?.apiKey}
-                refetchUser={refetchUser}
-              />
-            </div>
-
-            <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">
-                {t`Delete workspace`}
-              </h2>
-              <p className="mb-8 text-sm text-neutral-500 dark:text-dark-900">
-                {t`Once you delete your workspace, there is no going back. This action cannot be undone.`}
-              </p>
-              <div className="mt-4">
-                <Button
-                  variant="secondary"
-                  onClick={() => openModal("DELETE_WORKSPACE")}
-                  disabled={workspace.role !== "admin"}
-                >
-                  {t`Delete workspace`}
-                </Button>
-              </div>
-            </div>
-
-            {isCredentialsEnabled && (
-              <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">
-                  {t`Change Password`}
-                </h2>
-                <p className="mb-8 text-sm text-neutral-500 dark:text-dark-900">
-                  {t`You are about to change your password.`}
-                </p>
-                <div className="mt-4">
-                  <Button
-                    variant="secondary"
-                    onClick={() => openModal("CHANGE_PASSWORD")}
-                  >
-                    {t`Change Password`}
-                  </Button>
-                </div>
-              </div>
-            )}
-
-            <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">
-                {t`Delete account`}
-              </h2>
-              <p className="mb-8 text-sm text-neutral-500 dark:text-dark-900">
-                {t`Once you delete your account, there is no going back. This action cannot be undone.`}
-              </p>
-              <div className="mt-4">
-                <Button
-                  variant="secondary"
-                  onClick={() => openModal("DELETE_ACCOUNT")}
-                >
-                  {t`Delete account`}
-                </Button>
-              </div>
-            </div>
-          </div>
-
-          <>
-            <Modal
-              modalSize="md"
-              isVisible={isOpen && modalContentType === "NEW_FEEDBACK"}
-            >
-              <FeedbackModal />
-            </Modal>
-
-            <Modal
-              modalSize="sm"
-              isVisible={isOpen && modalContentType === "NEW_WORKSPACE"}
-            >
-              <NewWorkspaceForm />
-            </Modal>
-
-            <Modal
-              modalSize="sm"
-              isVisible={isOpen && modalContentType === "DELETE_WORKSPACE"}
-            >
-              <DeleteWorkspaceConfirmation />
-            </Modal>
-
-            <Modal
-              modalSize="sm"
-              isVisible={isOpen && modalContentType === "UPDATE_WORKSPACE_URL"}
-            >
-              <CustomURLConfirmation workspacePublicId={workspace.publicId} />
-            </Modal>
-
-            <Modal
-              modalSize="sm"
-              isVisible={isOpen && modalContentType === "DELETE_ACCOUNT"}
-            >
-              <DeleteAccountConfirmation />
-            </Modal>
-
-            <Modal
-              modalSize="sm"
-              isVisible={isOpen && modalContentType === "CHANGE_PASSWORD"}
-            >
-              <ChangePasswordFormConfirmation />
-            </Modal>
-          </>
-        </div>
-      </div>
-    </>
-  );
-}

cloud/docker-compose.yml

@@ -22,6 +22,11 @@ services:
       # Stripe
       - STRIPE_SECRET_KEY=${STRIPE_SECRET_KEY}
       - STRIPE_WEBHOOK_SECRET=${STRIPE_WEBHOOK_SECRET}
+      - STRIPE_WEBHOOK_SECRET_LEGACY=${STRIPE_WEBHOOK_SECRET_LEGACY}
+      - STRIPE_TEAM_PLAN_MONTHLY_PRICE_ID=${STRIPE_TEAM_PLAN_MONTHLY_PRICE_ID}
+      - STRIPE_TEAM_PLAN_YEARLY_PRICE_ID=${STRIPE_TEAM_PLAN_YEARLY_PRICE_ID}
+      - STRIPE_PRO_PLAN_MONTHLY_PRICE_ID=${STRIPE_PRO_PLAN_MONTHLY_PRICE_ID}
+      - STRIPE_PRO_PLAN_YEARLY_PRICE_ID=${STRIPE_PRO_PLAN_YEARLY_PRICE_ID}
 
       # Email
       - SMTP_HOST=${SMTP_HOST}

package.json

@@ -31,5 +31,11 @@
     "turbo": "^2.3.1",
     "typescript": "catalog:"
   },
-  "prettier": "@kan/prettier-config"
+  "prettier": "@kan/prettier-config",
+  "pnpm": {
+    "overrides": {
+      "@types/minimatch": "npm:minimatch@*",
+      "@types/glob": "npm:@types/glob@^8.1.0"
+    }
+  }
 }

packages/api/src/routers/feedback.ts

@@ -7,7 +7,10 @@ import { createTRPCRouter, protectedProcedure } from "../trpc";
 
 export const feedbackRouter = createTRPCRouter({
   create: protectedProcedure
-    .meta({ enabled: false, openApi: false })
+    .meta({
+      enabled: false,
+      openapi: { enabled: false, method: "POST", path: "/feedback" },
+    })
     .input(
       z.object({
         feedback: z.string().min(1),

packages/api/src/routers/member.ts

@@ -2,8 +2,11 @@ import { TRPCError } from "@trpc/server";
 import { z } from "zod";
 
 import * as memberRepo from "@kan/db/repository/member.repo";
+import * as subscriptionRepo from "@kan/db/repository/subscription.repo";
 import * as userRepo from "@kan/db/repository/user.repo";
 import * as workspaceRepo from "@kan/db/repository/workspace.repo";
+import { getSubscriptionByPlan, hasUnlimitedSeats } from "@kan/shared/utils";
+import { updateSubscriptionSeats } from "@kan/stripe";
 
 import { createTRPCRouter, protectedProcedure } from "../trpc";
 import { assertUserInWorkspace } from "../utils/auth";
@@ -60,6 +63,47 @@ export const memberRouter = createTRPCRouter({
         });
       }
 
+      if (process.env.NEXT_PUBLIC_KAN_ENV === "cloud") {
+        const subscriptions = await subscriptionRepo.getByReferenceId(
+          ctx.db,
+          workspace.publicId,
+        );
+
+        // get the active subscriptions
+        const activeTeamSubscription = getSubscriptionByPlan(
+          subscriptions,
+          "team",
+        );
+        const activeProSubscription = getSubscriptionByPlan(
+          subscriptions,
+          "pro",
+        );
+        const unlimitedSeats = hasUnlimitedSeats(subscriptions);
+
+        if (!activeTeamSubscription && !activeProSubscription) {
+          throw new TRPCError({
+            message: `Workspace with public ID ${workspace.publicId} does not have an active subscription`,
+            code: "NOT_FOUND",
+          });
+        }
+
+        // Update the Stripe subscription
+        if (activeTeamSubscription?.stripeSubscriptionId && !unlimitedSeats) {
+          try {
+            await updateSubscriptionSeats(
+              activeTeamSubscription.stripeSubscriptionId,
+              1,
+            );
+          } catch (error) {
+            console.error("Failed to update Stripe subscription seats:", error);
+            throw new TRPCError({
+              message: `Failed to update subscription for the new member.`,
+              code: "INTERNAL_SERVER_ERROR",
+            });
+          }
+        }
+      }
+
       const existingUser = await userRepo.getByEmail(ctx.db, input.email);
 
       const invite = await memberRepo.create(ctx.db, {
@@ -165,6 +209,36 @@ export const memberRouter = createTRPCRouter({
           code: "INTERNAL_SERVER_ERROR",
         });
 
+      // Handle subscription seat decrement for cloud environment
+      if (process.env.NEXT_PUBLIC_KAN_ENV === "cloud") {
+        const subscriptions = await subscriptionRepo.getByReferenceId(
+          ctx.db,
+          workspace.publicId,
+        );
+
+        // get the active subscriptions
+        const activeTeamSubscription = getSubscriptionByPlan(
+          subscriptions,
+          "team",
+        );
+        const unlimitedSeats = hasUnlimitedSeats(subscriptions);
+
+        // Only decrease seats if there's an active subscription and stripeSubscriptionId
+        if (activeTeamSubscription?.stripeSubscriptionId && !unlimitedSeats) {
+          try {
+            await updateSubscriptionSeats(
+              activeTeamSubscription.stripeSubscriptionId,
+              -1,
+            );
+          } catch (error) {
+            console.error(
+              "Failed to decrease Stripe subscription seats:",
+              error,
+            );
+          }
+        }
+      }
+
       return { success: true };
     }),
 });

packages/api/src/routers/workspace.ts

@@ -140,6 +140,12 @@ export const workspaceRouter = createTRPCRouter({
     .input(
       z.object({
         name: z.string().min(1),
+        slug: z
+          .string()
+          .min(3)
+          .max(24)
+          .regex(/^(?![-]+$)[a-zA-Z0-9-]+$/)
+          .optional(),
       }),
     )
     .output(z.custom<Awaited<ReturnType<typeof workspaceRepo.create>>>())
@@ -153,12 +159,43 @@ export const workspaceRouter = createTRPCRouter({
           code: "UNAUTHORIZED",
         });
 
+      // Check if slug is provided in cloud environment
+      if (input.slug && env("NEXT_PUBLIC_KAN_ENV") === "cloud") {
+        throw new TRPCError({
+          message: "Custom URLs are only available for Pro workspaces",
+          code: "BAD_REQUEST",
+        });
+      }
+
       const workspacePublicId = generateUID();
+      const workspaceSlug = input.slug ?? workspacePublicId;
+
+      if (input.slug) {
+        const reservedOrPremiumWorkspaceSlug =
+          await workspaceSlugRepo.getWorkspaceSlug(ctx.db, input.slug);
+
+        const isWorkspaceSlugAvailable =
+          await workspaceRepo.isWorkspaceSlugAvailable(ctx.db, input.slug);
+
+        if (reservedOrPremiumWorkspaceSlug) {
+          throw new TRPCError({
+            message: `Workspace slug '${input.slug}' is reserved or premium`,
+            code: "BAD_REQUEST",
+          });
+        }
+
+        if (!isWorkspaceSlugAvailable) {
+          throw new TRPCError({
+            message: `Workspace slug '${input.slug}' is already taken`,
+            code: "BAD_REQUEST",
+          });
+        }
+      }
 
       const result = await workspaceRepo.create(ctx.db, {
         publicId: workspacePublicId,
         name: input.name,
-        slug: workspacePublicId,
+        slug: workspaceSlug,
         createdBy: userId,
         createdByEmail: userEmail,
       });
@@ -334,6 +371,14 @@ export const workspaceRouter = createTRPCRouter({
       }),
     )
     .query(async ({ ctx, input }) => {
+      const userId = ctx.user?.id;
+
+      if (!userId)
+        throw new TRPCError({
+          message: `User not authenticated`,
+          code: "UNAUTHORIZED",
+        });
+
       const slug = input.workspaceSlug.toLowerCase();
       // check slug is not reserved
       const workspaceSlug = await workspaceSlugRepo.getWorkspaceSlug(
@@ -345,6 +390,19 @@ export const workspaceRouter = createTRPCRouter({
       const isWorkspaceSlugAvailable =
         await workspaceRepo.isWorkspaceSlugAvailable(ctx.db, slug);
 
+      const isAvailable =
+        isWorkspaceSlugAvailable && workspaceSlug?.type !== "reserved";
+      const isReserved = workspaceSlug?.type === "reserved";
+
+      if (env("NEXT_PUBLIC_KAN_ENV") === "cloud") {
+        await workspaceSlugRepo.createWorkspaceSlugCheck(ctx.db, {
+          slug,
+          userId,
+          available: isAvailable,
+          reserved: isReserved,
+        });
+      }
+
       return {
         isAvailable:
           isWorkspaceSlugAvailable && workspaceSlug?.type !== "reserved",

packages/api/src/trpc.ts

@@ -32,6 +32,11 @@ const createAuthWithHeaders = (
           headers,
           body: { email: input.email, callbackURL: input.callbackURL },
         }),
+      listActiveSubscriptions: (input: { workspacePublicId: string }) =>
+        auth.api.listActiveSubscriptions({
+          headers,
+          query: { referenceId: input.workspacePublicId },
+        }),
     },
   };
 };

packages/auth/package.json

@@ -37,6 +37,7 @@
   },
   "prettier": "@kan/prettier-config",
   "dependencies": {
-    "better-auth": "^1.2.8"
+    "@better-auth/stripe": "^1.3.7",
+    "better-auth": "^1.3.7"
   }
 }

packages/auth/src/auth.ts

@@ -1,4 +1,5 @@
 import { PutObjectCommand, S3Client } from "@aws-sdk/client-s3";
+import { stripe } from "@better-auth/stripe";
 import { betterAuth } from "better-auth";
 import { drizzleAdapter } from "better-auth/adapters/drizzle";
 import { createAuthEndpoint, createAuthMiddleware } from "better-auth/api";
@@ -9,7 +10,9 @@ import { env } from "next-runtime-env";
 
 import type { dbClient } from "@kan/db/client";
 import * as memberRepo from "@kan/db/repository/member.repo";
+import * as subscriptionRepo from "@kan/db/repository/subscription.repo";
 import * as userRepo from "@kan/db/repository/user.repo";
+import * as workspaceRepo from "@kan/db/repository/workspace.repo";
 import * as schema from "@kan/db/schema";
 import { cloudMailerClient, sendEmail } from "@kan/email";
 import { createStripeClient } from "@kan/stripe";
@@ -112,13 +115,13 @@ async function downloadImage(url: string): Promise<Buffer> {
 export const initAuth = (db: dbClient) => {
   return betterAuth({
     secret: process.env.BETTER_AUTH_SECRET!,
-    baseURL: process.env.NEXT_PUBLIC_BASE_URL!,
+    baseURL: env("NEXT_PUBLIC_BASE_URL"),
     trustedOrigins: process.env.BETTER_AUTH_TRUSTED_ORIGINS
       ? [
-          process.env.NEXT_PUBLIC_BASE_URL!,
+          env("NEXT_PUBLIC_BASE_URL") ?? "",
           ...process.env.BETTER_AUTH_TRUSTED_ORIGINS.split(","),
         ]
-      : [process.env.NEXT_PUBLIC_BASE_URL!],
+      : [env("NEXT_PUBLIC_BASE_URL") ?? ""],
     database: drizzleAdapter(db, {
       provider: "pg",
       schema: {
@@ -153,6 +156,89 @@ export const initAuth = (db: dbClient) => {
     },
     plugins: [
       socialProvidersPlugin(),
+      ...(process.env.NEXT_PUBLIC_KAN_ENV === "cloud"
+        ? [
+            stripe({
+              stripeClient: createStripeClient(),
+              stripeWebhookSecret: process.env.STRIPE_WEBHOOK_SECRET!,
+              createCustomerOnSignUp: true,
+              subscription: {
+                enabled: true,
+                plans: [
+                  {
+                    name: "team",
+                    priceId: process.env.STRIPE_TEAM_PLAN_MONTHLY_PRICE_ID!,
+                    annualDiscountPriceId:
+                      process.env.STRIPE_TEAM_PLAN_YEARLY_PRICE_ID!,
+                  },
+                  {
+                    name: "pro",
+                    priceId: process.env.STRIPE_PRO_PLAN_MONTHLY_PRICE_ID!,
+                    annualDiscountPriceId:
+                      process.env.STRIPE_PRO_PLAN_YEARLY_PRICE_ID!,
+                  },
+                ],
+                authorizeReference: async (data) => {
+                  const workspace = await workspaceRepo.getByPublicId(
+                    db,
+                    data.referenceId,
+                  );
+
+                  if (!workspace) {
+                    return Promise.resolve(false);
+                  }
+
+                  const isUserInWorkspace =
+                    await workspaceRepo.isUserInWorkspace(
+                      db,
+                      data.user.id,
+                      workspace.id,
+                    );
+
+                  return isUserInWorkspace;
+                },
+                getCheckoutSessionParams: () => {
+                  return {
+                    params: {
+                      allow_promotion_codes: true,
+                    },
+                  };
+                },
+                onSubscriptionComplete: async ({
+                  subscription,
+                  stripeSubscription,
+                }) => {
+                  // Set unlimited seats to true for pro plans
+                  if (subscription.plan === "pro") {
+                    await subscriptionRepo.updateByStripeSubscriptionId(
+                      db,
+                      stripeSubscription.id,
+                      {
+                        unlimitedSeats: true,
+                      },
+                    );
+                    console.log(
+                      `Pro subscription ${stripeSubscription.id} activated with unlimited seats`,
+                    );
+
+                    const workspace = await workspaceRepo.getByPublicId(
+                      db,
+                      subscription.referenceId,
+                    );
+
+                    if (workspace?.id) {
+                      await memberRepo.unpauseAllMembers(db, workspace.id);
+
+                      console.log(
+                        `Unpausing all members for workspace ${workspace.id}`,
+                      );
+                    }
+                  }
+                },
+              },
+            }),
+          ]
+        : []),
       // @todo: hasing is disabled due to a bug in the api key plugin
       apiKey({ disableKeyHashing: true }),
       magicLink({
@@ -270,37 +356,17 @@ export const initAuth = (db: dbClient) => {
     },
     hooks: {
       after: createAuthMiddleware(async (ctx) => {
-        if (ctx.path.startsWith("/get-session")) {
-          const user = ctx.context.session?.user;
-
-          if (
-            env("NEXT_PUBLIC_KAN_ENV") === "cloud" &&
-            user &&
-            !user.stripeCustomerId
-          ) {
-            const stripe = createStripeClient();
-            const stripeCustomer = await stripe.customers.create({
-              email: user.email,
-              metadata: {
-                userId: user.id,
-              },
-            });
-
-            await userRepo.update(db, user.id, {
-              stripeCustomerId: stripeCustomer.id,
-            });
-          }
-        } else if (
+        if (
           ctx.path === "/magic-link/verify" &&
           (ctx.query?.callbackURL as string | undefined)?.includes(
             "type=invite",
-          ) &&
-          ctx.query?.memberPublicId
+          )
         ) {
           const userId = ctx.context.newSession?.session.userId;
-          const memberPublicId = ctx.query.memberPublicId as string;
+          const callbackURL = ctx.query?.callbackURL as string | undefined;
+          const memberPublicId = callbackURL?.split("memberPublicId=")[1];
 
-          if (userId) {
+          if (userId && memberPublicId) {
             const member = await memberRepo.getByPublicId(db, memberPublicId);
 
             if (member?.id) {

packages/auth/src/client.ts

@@ -1,5 +1,6 @@
 import type { BetterAuthClientPlugin } from "better-auth";
 import type { BetterFetchOption } from "better-auth/react";
+import { stripeClient } from "@better-auth/stripe/client";
 import {
   apiKeyClient,
   genericOAuthClient,
@@ -27,6 +28,9 @@ const socialProvidersPluginClient = {
 
 export const authClient = createAuthClient({
   plugins: [
+    stripeClient({
+      subscription: true,
+    }),
     magicLinkClient(),
     apiKeyClient(),
     genericOAuthClient(),

packages/db/migrations/20250902085406_AddSubscriptions.sql

@@ -0,0 +1,23 @@
+CREATE TABLE IF NOT EXISTS "subscription" (
+	"id" bigserial PRIMARY KEY NOT NULL,
+	"plan" varchar(255) NOT NULL,
+	"referenceId" varchar(12) NOT NULL,
+	"stripeCustomerId" varchar(255),
+	"stripeSubscriptionId" varchar(255),
+	"status" varchar(255) NOT NULL,
+	"periodStart" timestamp,
+	"periodEnd" timestamp,
+	"cancelAtPeriodEnd" boolean,
+	"seats" integer,
+	"trialStart" timestamp,
+	"trialEnd" timestamp,
+	"createdAt" timestamp DEFAULT now() NOT NULL,
+	"updatedAt" timestamp DEFAULT now() NOT NULL
+);
+--> statement-breakpoint
+ALTER TABLE "subscription" ENABLE ROW LEVEL SECURITY;--> statement-breakpoint
+DO $$ BEGIN
+ ALTER TABLE "subscription" ADD CONSTRAINT "subscription_referenceId_workspace_publicId_fk" FOREIGN KEY ("referenceId") REFERENCES "public"."workspace"("publicId") ON DELETE no action ON UPDATE no action;
+EXCEPTION
+ WHEN duplicate_object THEN null;
+END $$;

packages/db/migrations/20250907185512_AddUnlimitedSeatsToSubscription.sql

@@ -0,0 +1 @@
+ALTER TABLE "subscription" ADD COLUMN "unlimitedSeats" boolean DEFAULT false NOT NULL;

packages/db/migrations/20250910195058_RemoveNotNullConstraintFromReferenceIdOnSubsriptions.sql

@@ -0,0 +1 @@
+ALTER TABLE "subscription" ALTER COLUMN "referenceId" DROP NOT NULL;

packages/db/migrations/20250910200416_AddWorkspaceSlugChecks.sql

@@ -0,0 +1,22 @@
+CREATE TABLE IF NOT EXISTS "workspace_slug_checks" (
+	"id" bigserial PRIMARY KEY NOT NULL,
+	"slug" varchar(255) NOT NULL,
+	"available" boolean NOT NULL,
+	"reserved" boolean NOT NULL,
+	"workspaceId" bigint,
+	"createdBy" uuid,
+	"createdAt" timestamp DEFAULT now() NOT NULL
+);
+--> statement-breakpoint
+ALTER TABLE "workspace_slug_checks" ENABLE ROW LEVEL SECURITY;--> statement-breakpoint
+DO $$ BEGIN
+ ALTER TABLE "workspace_slug_checks" ADD CONSTRAINT "workspace_slug_checks_workspaceId_workspace_id_fk" FOREIGN KEY ("workspaceId") REFERENCES "public"."workspace"("id") ON DELETE no action ON UPDATE no action;
+EXCEPTION
+ WHEN duplicate_object THEN null;
+END $$;
+--> statement-breakpoint
+DO $$ BEGIN
+ ALTER TABLE "workspace_slug_checks" ADD CONSTRAINT "workspace_slug_checks_createdBy_user_id_fk" FOREIGN KEY ("createdBy") REFERENCES "public"."user"("id") ON DELETE set null ON UPDATE no action;
+EXCEPTION
+ WHEN duplicate_object THEN null;
+END $$;

packages/db/migrations/20250910202358_AddCascadeSetNullToReferenceIdOnSubsriptions.sql

@@ -0,0 +1,7 @@
+ALTER TABLE "subscription" DROP CONSTRAINT "subscription_referenceId_workspace_publicId_fk";
+--> statement-breakpoint
+DO $$ BEGIN
+ ALTER TABLE "subscription" ADD CONSTRAINT "subscription_referenceId_workspace_publicId_fk" FOREIGN KEY ("referenceId") REFERENCES "public"."workspace"("publicId") ON DELETE set null ON UPDATE no action;
+EXCEPTION
+ WHEN duplicate_object THEN null;
+END $$;

packages/db/migrations/20250918201751_AddPausedMemberStatus.sql

@@ -0,0 +1 @@
+ALTER TYPE "public"."member_status" ADD VALUE 'paused';

packages/db/migrations/meta/_journal.json

@@ -64,6 +64,48 @@
       "when": 1755094668761,
       "tag": "20250813141748_AddChecklistActivityTypes",
       "breakpoints": true
+    },
+    {
+      "idx": 9,
+      "version": "7",
+      "when": 1756803246096,
+      "tag": "20250902085406_AddSubscriptions",
+      "breakpoints": true
+    },
+    {
+      "idx": 10,
+      "version": "7",
+      "when": 1757271312974,
+      "tag": "20250907185512_AddUnlimitedSeatsToSubscription",
+      "breakpoints": true
+    },
+    {
+      "idx": 11,
+      "version": "7",
+      "when": 1757533858687,
+      "tag": "20250910195058_RemoveNotNullConstraintFromReferenceIdOnSubsriptions",
+      "breakpoints": true
+    },
+    {
+      "idx": 12,
+      "version": "7",
+      "when": 1757534656098,
+      "tag": "20250910200416_AddWorkspaceSlugChecks",
+      "breakpoints": true
+    },
+    {
+      "idx": 13,
+      "version": "7",
+      "when": 1757535838766,
+      "tag": "20250910202358_AddCascadeSetNullToReferenceIdOnSubsriptions",
+      "breakpoints": true
+    },
+    {
+      "idx": 14,
+      "version": "7",
+      "when": 1758226671081,
+      "tag": "20250918201751_AddPausedMemberStatus",
+      "breakpoints": true
     }
   ]
 }

packages/db/src/client.ts

@@ -1,12 +1,12 @@
 import type { NodePgDatabase } from "drizzle-orm/node-postgres";
-import { drizzle as drizzlePgLite } from "drizzle-orm/pglite"; 
+import { PGlite } from "@electric-sql/pglite";
 import { uuid_ossp } from "@electric-sql/pglite/contrib/uuid_ossp";
 import { drizzle as drizzlePg } from "drizzle-orm/node-postgres";
+import { drizzle as drizzlePgLite } from "drizzle-orm/pglite";
+import { migrate } from "drizzle-orm/pglite/migrator";
 import { Pool } from "pg";
 
 import * as schema from "./schema";
-import { PGlite } from "@electric-sql/pglite";
-import { migrate } from "drizzle-orm/pglite/migrator";
 
 export type dbClient = NodePgDatabase<typeof schema> & {
   $client: Pool;
@@ -18,7 +18,10 @@ export const createDrizzleClient = (): dbClient => {
   if (!connectionString) {
     console.log("POSTGRES_URL environment variable is not set, using PGLite");
 
-    const client = new PGlite({ dataDir: "./pgdata", extensions: { uuid_ossp }});
+    const client = new PGlite({
+      dataDir: "./pgdata",
+      extensions: { uuid_ossp },
+    });
     const db = drizzlePgLite(client, { schema });
 
     migrate(db, { migrationsFolder: "../../packages/db/migrations" });

packages/db/src/repository/list.repo.ts

@@ -59,9 +59,32 @@ export const create = async (
       .having(gt(countExpr, 1));
 
     if (duplicateIndices.length > 0) {
-      throw new Error(
-        `Duplicate indices found after reordering in board ${result.boardId}`,
-      );
+      // Compact indices to sequential values (0..n-1) to resolve duplicates while preserving order
+      await tx.execute(sql`
+        WITH ordered AS (
+          SELECT id, ROW_NUMBER() OVER (ORDER BY "index", id) - 1 AS new_index
+          FROM "list"
+          WHERE "boardId" = ${result.boardId} AND "deletedAt" IS NULL
+        )
+        UPDATE "list" l
+        SET "index" = o.new_index
+        FROM ordered o
+        WHERE l.id = o.id;
+      `);
+
+      // Last resort: verify fix; if duplicates persist (e.g., due to race conditions), rollback
+      const postFixDupes = await tx
+        .select({ index: lists.index, count: countExpr })
+        .from(lists)
+        .where(and(eq(lists.boardId, result.boardId), isNull(lists.deletedAt)))
+        .groupBy(lists.index)
+        .having(gt(countExpr, 1));
+
+      if (postFixDupes.length > 0) {
+        throw new Error(
+          `Invariant violation: duplicate indices remain after compaction in board ${result.boardId}`,
+        );
+      }
     }
 
     return result;
@@ -79,7 +102,98 @@ export const bulkCreate = async (
     importId?: number;
   }[],
 ) => {
-  return db.insert(lists).values(listInput).returning();
+  if (listInput.length === 0) return [];
+
+  return db.transaction(async (tx) => {
+    // Group incoming rows by board to compute safe, sequential indices per board
+    const byBoard = new Map<number, typeof listInput>();
+    for (const item of listInput) {
+      const arr = byBoard.get(item.boardId) ?? [];
+      arr.push(item);
+      byBoard.set(item.boardId, arr);
+    }
+
+    const allValuesToInsert: {
+      publicId: string;
+      name: string;
+      createdBy: string;
+      boardId: number;
+      index: number;
+      importId?: number;
+    }[] = [];
+
+    // For each board, append incoming lists after the current max index, preserving their relative order
+    for (const [boardId, items] of byBoard.entries()) {
+      // Find current max index for non-deleted lists in this board
+      const last = await tx.query.lists.findFirst({
+        columns: { index: true },
+        where: and(eq(lists.boardId, boardId), isNull(lists.deletedAt)),
+        orderBy: [desc(lists.index)],
+      });
+
+      let nextIndex = last ? last.index + 1 : 0;
+
+      // Sort incoming by their provided index to preserve Trello order, then reassign sequential indices
+      const sorted = [...items].sort((a, b) => a.index - b.index);
+      for (const it of sorted) {
+        allValuesToInsert.push({
+          publicId: it.publicId,
+          name: it.name,
+          createdBy: it.createdBy,
+          boardId: it.boardId,
+          index: nextIndex++,
+          importId: it.importId,
+        });
+      }
+    }
+
+    // Insert all rows in one go
+    const inserted = await tx
+      .insert(lists)
+      .values(allValuesToInsert)
+      .returning();
+
+    // Post-insert check: if duplicates exist, compact indices per board instead of failing
+    const countExpr = sql<number>`COUNT(*)`.mapWith(Number);
+    for (const boardId of byBoard.keys()) {
+      const duplicateIndices = await tx
+        .select({ index: lists.index, count: countExpr })
+        .from(lists)
+        .where(and(eq(lists.boardId, boardId), isNull(lists.deletedAt)))
+        .groupBy(lists.index)
+        .having(gt(countExpr, 1));
+
+      if (duplicateIndices.length > 0) {
+        await tx.execute(sql`
+          WITH ordered AS (
+            SELECT id, ROW_NUMBER() OVER (ORDER BY "index", id) - 1 AS new_index
+            FROM "list"
+            WHERE "boardId" = ${boardId} AND "deletedAt" IS NULL
+          )
+          UPDATE "list" l
+          SET "index" = o.new_index
+          FROM ordered o
+          WHERE l.id = o.id;
+        `);
+
+        // Last resort: verify fix; if duplicates persist (e.g., due to race conditions), rollback
+        const postFixDupes = await tx
+          .select({ index: lists.index, count: countExpr })
+          .from(lists)
+          .where(and(eq(lists.boardId, boardId), isNull(lists.deletedAt)))
+          .groupBy(lists.index)
+          .having(gt(countExpr, 1));
+
+        if (postFixDupes.length > 0) {
+          throw new Error(
+            `Invariant violation: duplicate indices remain after compaction in board ${boardId}`,
+          );
+        }
+      }
+    }
+
+    return inserted;
+  });
 };
 
 export const getByPublicId = async (db: dbClient, listPublicId: string) => {
@@ -180,9 +294,32 @@ export const reorder = async (
       .having(gt(countExpr, 1));
 
     if (duplicateIndices.length > 0) {
-      throw new Error(
-        `Duplicate indices found after reordering in board ${list.boardId}`,
-      );
+      // Attempt to auto-heal by compacting indices to sequential values (0..n-1) while preserving order
+      await tx.execute(sql`
+        WITH ordered AS (
+          SELECT id, ROW_NUMBER() OVER (ORDER BY "index", id) - 1 AS new_index
+          FROM "list"
+          WHERE "boardId" = ${list.boardId} AND "deletedAt" IS NULL
+        )
+        UPDATE "list" l
+        SET "index" = o.new_index
+        FROM ordered o
+        WHERE l.id = o.id;
+      `);
+
+      // Last resort verification: if duplicates persist, rollback
+      const postFixDupes = await tx
+        .select({ index: lists.index, count: countExpr })
+        .from(lists)
+        .where(and(eq(lists.boardId, list.boardId), isNull(lists.deletedAt)))
+        .groupBy(lists.index)
+        .having(gt(countExpr, 1));
+
+      if (postFixDupes.length > 0) {
+        throw new Error(
+          `Invariant violation: duplicate indices remain after compaction in board ${list.boardId}`,
+        );
+      }
     }
 
     const updatedList = await tx.query.lists.findFirst({

packages/db/src/repository/member.repo.ts

@@ -95,3 +95,15 @@ export const softDelete = async (
 
   return result;
 };
+
+export const unpauseAllMembers = async (db: dbClient, workspaceId: number) => {
+  await db
+    .update(workspaceMembers)
+    .set({ status: "active" })
+    .where(
+      and(
+        eq(workspaceMembers.workspaceId, workspaceId),
+        eq(workspaceMembers.status, "paused"),
+      ),
+    );
+};

packages/db/src/repository/subscription.repo.ts

@@ -0,0 +1,91 @@
+import { eq } from "drizzle-orm";
+
+import type { dbClient } from "@kan/db/client";
+import { subscription } from "@kan/db/schema";
+
+export const updateById = async (
+  db: dbClient,
+  subscriptionId: number,
+  updates: {
+    unlimitedSeats?: boolean;
+    status?: string;
+    seats?: number | null;
+    periodStart?: Date | null;
+    periodEnd?: Date | null;
+    cancelAtPeriodEnd?: boolean | null;
+  },
+) => {
+  const [result] = await db
+    .update(subscription)
+    .set({
+      ...updates,
+      updatedAt: new Date(),
+    })
+    .where(eq(subscription.id, subscriptionId))
+    .returning({
+      id: subscription.id,
+      plan: subscription.plan,
+      status: subscription.status,
+      unlimitedSeats: subscription.unlimitedSeats,
+    });
+
+  return result;
+};
+
+export const updateByStripeSubscriptionId = async (
+  db: dbClient,
+  stripeSubscriptionId: string,
+  updates: {
+    unlimitedSeats?: boolean;
+    status?: string;
+    seats?: number | null;
+    periodStart?: Date | null;
+    periodEnd?: Date | null;
+    cancelAtPeriodEnd?: boolean | null;
+  },
+) => {
+  const [result] = await db
+    .update(subscription)
+    .set({
+      ...updates,
+      updatedAt: new Date(),
+    })
+    .where(eq(subscription.stripeSubscriptionId, stripeSubscriptionId))
+    .returning({
+      id: subscription.id,
+      plan: subscription.plan,
+      status: subscription.status,
+      unlimitedSeats: subscription.unlimitedSeats,
+    });
+
+  return result;
+};
+
+export const getByStripeSubscriptionId = async (
+  db: dbClient,
+  stripeSubscriptionId: string,
+) => {
+  return await db.query.subscription.findFirst({
+    where: eq(subscription.stripeSubscriptionId, stripeSubscriptionId),
+  });
+};
+
+export const getByReferenceId = async (db: dbClient, referenceId: string) => {
+  return await db.query.subscription.findMany({
+    where: eq(subscription.referenceId, referenceId),
+  });
+};
+
+export const create = async (
+  db: dbClient,
+  data: {
+    plan: string;
+    referenceId: string;
+    userId: string;
+    stripeCustomerId: string;
+    status: string;
+  },
+) => {
+  const [result] = await db.insert(subscription).values(data).returning();
+  return result;
+};

packages/db/src/repository/workspace.repo.ts

@@ -121,6 +121,17 @@ export const getByPublicIdWithMembers = (
           },
         },
       },
+      subscriptions: {
+        columns: {
+          id: true,
+          plan: true,
+          status: true,
+          seats: true,
+          unlimitedSeats: true,
+          periodStart: true,
+          periodEnd: true,
+        },
+      },
     },
     where: and(
       eq(workspaces.publicId, workspacePublicId),

packages/db/src/repository/workspaceSlug.repo.ts

@@ -1,7 +1,7 @@
 import { eq } from "drizzle-orm";
 
 import type { dbClient } from "@kan/db/client";
-import { slugs } from "@kan/db/schema";
+import { slugChecks, slugs } from "@kan/db/schema";
 
 export const getWorkspaceSlug = (db: dbClient, slug: string) => {
   return db.query.slugs.findFirst({
@@ -12,3 +12,20 @@ export const getWorkspaceSlug = (db: dbClient, slug: string) => {
     where: eq(slugs.slug, slug),
   });
 };
+
+export const createWorkspaceSlugCheck = (
+  db: dbClient,
+  input: {
+    slug: string;
+    userId: string;
+    available: boolean;
+    reserved: boolean;
+  },
+) => {
+  return db.insert(slugChecks).values({
+    slug: input.slug,
+    available: input.available,
+    reserved: input.reserved,
+    createdBy: input.userId,
+  });
+};

packages/db/src/schema/index.ts

@@ -10,3 +10,4 @@ export * from "./lists";
 export * from "./users";
 export * from "./integrations";
 export * from "./workspaces";
+export * from "./subscriptions";