fix: show correct active workspace and truncate name

.env.example

@@ -1,6 +1,6 @@
 # https://github.com/kanbn/kan?tab=readme-ov-file#environment-variables-)
 
-# Required environment variables
+# Required environment variables 
 NEXT_PUBLIC_BASE_URL= # e.g. https://kan.bn
 BETTER_AUTH_SECRET= # Random 32+ char string (can gen with: openssl rand -base64 24 | tr -dc 'a-zA-Z0-9' | head -c 32)
 
@@ -18,9 +18,6 @@ SMTP_PASSWORD=
 EMAIL_FROM= # e.g. "Kan <hello@mail.kan.bn>"
 SMTP_SECURE= # set to "false" to use port 587
 
-# Switch email features off entirely (optional)
-NEXT_PUBLIC_DISABLE_EMAIL=
-
 # S3 storage (optional)
 S3_REGION=
 S3_ENDPOINT=

README.md

@@ -147,7 +147,6 @@ pnpm dev
 | `SMTP_USER`                               | SMTP username/email                                      | No                       | `resend`                                                    |
 | `SMTP_PASSWORD`                           | SMTP password/token                                      | No                       | `re_xxxx`                                                   |
 | `SMTP_SECURE`                             | Use secure SMTP connection (defaults to true if not set) | For Email                | `true`                                                      |
-| `NEXT_PUBLIC_DISABLE_EMAIL`               | To disable all email features                            | For Email                | `true`                                                      |
 | `NEXT_PUBLIC_BASE_URL`                    | Base URL of your installation                            | Yes                      | `http://localhost:3000`                                     |
 | `BETTER_AUTH_SECRET`                      | Auth encryption secret                                   | Yes                      | Random 32+ char string                                      |
 | `BETTER_AUTH_TRUSTED_ORIGINS`             | Allowed callback origins                                 | No                       | `http://localhost:3000,http://localhost:3001`               |

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

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

@@ -1,397 +0,0 @@
----
-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,18 +44,6 @@
       "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", "ru"]
+    "targets": ["fr", "de", "es", "it", "nl"]
   },
   "buckets": {
     "po": {

apps/web/i18n.lock

@@ -10,7 +10,6 @@ checksums:
     "%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
@@ -30,18 +29,11 @@ checksums:
     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%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
-    Anyone%20with%20this%20link%20can%20join%20your%20workspace/singular: 2366ed295eb2c03c425559c24cb31606
-    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
@@ -82,12 +74,11 @@ checksums:
     Card%20not%20found/singular: 91509e2f92b0b3b11330b6983139fdbf
     Card%20title/singular: 7c34f59f4005e6cb3a6ff546ea0b96e3
     Change%20Password/singular: a552fc5c4189ebc3e2e6018edda7d18f
-    Change%20your%20language%20preferences./singular: 293d49fc3c75e9c425b64bd7126e6b46
+    Change%20the%20language%20of%20the%20app./singular: fb20db145e28ed44aba89c146ded7bfc
     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
@@ -108,11 +99,9 @@ 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
-    Create%20invite%20link/singular: bef23fe786978f7abf78dece49a35a26
     Create%20label/singular: c64e8180fa956f005edc1fd9b8e65abb
     Create%20list/singular: 858c3d514aa95765ec82114393199144
     Create%20new%20board/singular: cbb87b1f4cc46b336ad9510c9f19407c
@@ -122,14 +111,12 @@ 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%20require%20upgrading%20to%20a%20Pro%20plan/singular: f7275e3b473b8f7b39dab6b37eb26fea
     Custom%20workspace%20URL/singular: 7ba841d0946eb04fa3d17d74365be37b
     Customer%20Support/singular: 50e3c77e22e41061ca85ea2f02625a2e
     Dark/singular: 73e6e208ba628b26e90fcf6dce15e1b2
-    Deactivate%20invite%20link/singular: 8cf4bf82e153e4dc82d026448cb4dd10
     Delete/singular: 8bcf303dd10a645b5baacb02b47d72c9
     Delete%20account/singular: a9d11113f1a1d7e20582bdcc9633bcef
     Delete%20board/singular: e915cd160651ad4b61a67e8da0737c23
@@ -168,10 +155,7 @@ checksums:
     Enter%20your%20name/singular: cd95fbdd0533f2c2e8edf9d9bd9aa8df
     Enter%20your%20new%20password/singular: c67251e3002b68bc20a7cf5de23e43ac
     Enter%20your%20password/singular: ea4fdd034522dead21bae0c0abb52eae
-    Error/singular: 3c95bcb32c2104b99a46f5b3dd015248
     Error%20Changing%20Password/singular: ebecb5c1b72ba4b063117241f5ba4f2d
-    Error%20creating%20invite%20link/singular: cbedc3f3213dfc4fdc8b7503ae1a5cd6
-    Error%20deactivating%20invite%20link/singular: ccf42cd5aa8481692003e87e836de66c
     Error%20deleting%20account/singular: d42965a9bc9e5ec4ed57890268924643
     Error%20deleting%20label/singular: 94387e3a45ec768ae7715701ae00136e
     Error%20deleting%20workspace/singular: 0aec9bd8170bc84f5ea5c9a47c52ed26
@@ -188,8 +172,6 @@ checksums:
     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
     Execution/singular: cbac4a3c721123cbc6a883560bf29800
-    Failed%20to%20accept%20invitation.%20Please%20try%20again%20later%2C%20or%20contact%20customer%20support./singular: e4505a9df3a81e93a8a8b103c6e3ebc4
-    Failed%20to%20copy%20invite%20link/singular: 635884d5ed8d6ee20b85a003939b4ae7
     Failed%20to%20login%20with%20%7B0%7D.%20Please%20try%20again./singular: 669a4b4247a73f53fb9b8b16e42d166f
     FAQs/singular: dc36d7992372ccd419b39ef51cf5b16c
     Feature/singular: 58f5f3f37862b6312a2f20ec1a1fd0e8
@@ -214,7 +196,6 @@ checksums:
     Get%20started%20on%20Cloud/singular: ed926f526266ad2063283c58e6f4284a
     Getting%20started/singular: 8e5e7bd026b5bec46bbfdce02ab9e0b8
     GitHub/singular: 6e1cf3c00fa6fbe24afcc78ea3b5f3e4
-    Go%20Home/singular: 6251589da1964d55afabdfd64c84c335
     Go%20to%20app/singular: 896d0441384dcd2bfb3b23d61ff1944d
     High%20Priority/singular: 5d231ff8254aabc875f194c4b4f49c97
     Hired/singular: e5a9b1bd409b007141fe3d7890022f9a
@@ -240,14 +221,10 @@ checksums:
     Integrations/singular: 0ccce343287704cd90150c32e2fcad36
     Interviewing/singular: 4ccdcdc784547e925077c3297bddee95
     Invalid%20email%20address/singular: b2d9f25626f2d15c7c63e0281bccc247
-    Invalid%20invitation/singular: 4b936a8811a2295a5f58b41473c608f3
     Invite/singular: 181884cea804cbde665f160811ee7ad0
-    Invite%20link%20copied/singular: 4046f23a78e1cd5166671c3fb8a7ea6e
-    Invite%20link%20copied%20to%20clipboard/singular: 6fc055a0ea0ed1aa58c5e0c502efe17f
+    Invite%20another/singular: acb543563dab7edbcf46060a53ade3a3
     Invite%20member/singular: ade922db1be6b26bc979565ce5de2bc7
     Inviting%20members%20requires%20a%20Team%20Plan.%20You'll%20be%20redirected%20to%20upgrade%20your%20workspace./singular: 03eeed2d715e770259f722ba48a61ab3
-    Join%20workspace/singular: f5d035df672b05abd760bd022309c719
-    Join%20workspace%20%7C%20kan.bn/singular: 97855216a0e00214b2dcf917e93164f2
     Junior/singular: ed1bd2c59a824fdcdd56fc8a0660fe9f
     Kanban%20is%20better%20with%20a%20team.%20Perfect%20for%20small%20and%20growing%20teams%20looking%20to%20collaborate./singular: a77bee43046b260797c8936ad23e9223
     Kanban%20reimagined/singular: 613ccfdd9f54c66cbf68cfa313498766
@@ -282,7 +259,6 @@ checksums:
     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
@@ -308,11 +284,8 @@ checksums:
     Own%20your%20data/singular: cc2178dac4bdf6b07f030cfc2a7510e6
     Part-time/singular: 213d63da450f35dabb3ab0e35e29feed
     Password%20Changed/singular: 1fcebe9ddb46f722a57f195efddc695d
-    Password%20is%20required%20to%20login./singular: a09c76294ca7b27b38658b34618a7119
-    Password%20is%20required%20to%20sign%20up./singular: 3fa1abbf2e6ac8ac4d18c215191bdbcc
     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
@@ -324,7 +297,6 @@ checksums:
     Please%20enter%20a%20valid%20password/singular: 4b32c17e19b79bcbf0bb092c06ba310f
     Please%20select%20a%20file%20to%20upload./singular: de315bf594047f8ef9307a7fa9285844
     Please%20try%20again%20later%2C%20or%20contact%20customer%20support./singular: 21ffcf0b00e7cd7b64f7454a95762e1d
-    Please%20try%20again%20later./singular: 325dea6dd0348a27a6818db2c1340c98
     Pricing/singular: ce27f1aeacccc542a174c4b2bce022b0
     Priority%20email%20support/singular: 678538c912a770b1e1416ecdb8e299b1
     Privacy%20policy/singular: 462c6a536b52873e4498785c66dd48c8
@@ -352,6 +324,7 @@ 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
@@ -366,14 +339,8 @@ checksums:
     Send%20feedback/singular: 9631cc08d49da04475b30a0d320ce97c
     Senior/singular: 3fff865dc00435f82896fc302ea45630
     Settings/singular: 8df6777277469c1fd88cc18dde2f1cc3
-    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
+    Settings%20%7C%20%7B0%7D/singular: b8fc73080bc9c8f4f1403b2a69bd1ac5
     Sign%20in/singular: cb8757c7450e17de1e226e82fb0fa4a2
-    Sign%20In/singular: ec7b8f314fe9bc6591006707484ede61
-    Sign%20Up/singular: 0dd2ae69be4618c1f9e615774a4509ca
     Sign%20up%20%7C%20kan.bn/singular: f3de2a110c90358e6eac07d0b2f663a6
     Sign%20up%20disabled/singular: 9581b1f75b404ac0ecb7e603e0d4189c
     Sign%20up%20is%20currently%20disabled.%20Please%20try%20again%20later./singular: c6cb7c455ec053b351a27029158ff166
@@ -400,10 +367,8 @@ 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%20invitation%20link%20is%20invalid%20or%20has%20expired./singular: 11cc7ef8f1512e7e058e1fbbe5644001
     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
@@ -412,7 +377,6 @@ checksums:
     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
@@ -504,8 +468,6 @@ checksums:
     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
-    You've%20been%20invited%20to%20join%20a%20workspace%20on%20kan.bn./singular: 257b840726f972f384243a72767f880f
-    You've%20been%20invited%20to%20join%20a%20workspace./singular: 24fc6cdc8740f37a83df85f582f03293
     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", "ru"],
+  locales: ["en", "fr", "de", "es", "it", "nl"],
   sourceLocale: "en",
   catalogs: [
     {

apps/web/next.config.js

@@ -52,15 +52,6 @@ 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

@@ -59,7 +59,6 @@
     "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/AuthForm.tsx

@@ -1,11 +1,10 @@
 import type { SocialProvider } from "better-auth/social-providers";
-import { useSearchParams } from "next/navigation";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { t } from "@lingui/core/macro";
 import { Trans } from "@lingui/react/macro";
 import { useQuery } from "@tanstack/react-query";
 import { env } from "next-runtime-env";
-import { useEffect, useMemo, useRef, useState } from "react";
+import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import {
   FaApple,
@@ -156,23 +155,15 @@ export function Auth({ setIsMagicLinkSent, isSignUp }: AuthProps) {
   const [isLoginWithProviderPending, setIsLoginWithProviderPending] =
     useState<null | AuthProvider>(null);
   const [isCredentialsEnabled, setIsCredentialsEnabled] = useState(false);
-  const [isEmailSendingEnabled, setIsEmailSendingEnabled] = useState(false);
   const [isLoginWithEmailPending, setIsLoginWithEmailPending] = useState(false);
   const [loginError, setLoginError] = useState<string | null>(null);
   const { showPopup } = usePopup();
   const oidcProviderName = "OIDC";
-  const passwordRef = useRef<HTMLInputElement | null>(null);
-
-  const redirect = useSearchParams().get("next");
-  const callbackURL = redirect ?? "/boards";
 
   // Safely get environment variables on client side to avoid hydration mismatch
   useEffect(() => {
     const credentialsAllowed =
       env("NEXT_PUBLIC_ALLOW_CREDENTIALS")?.toLowerCase() === "true";
-    const emailSendingEnabled =
-      env("NEXT_PUBLIC_DISABLE_EMAIL")?.toLowerCase() !== "true";
-    setIsEmailSendingEnabled(emailSendingEnabled);
     setIsCredentialsEnabled(credentialsAllowed);
   }, []);
 
@@ -192,7 +183,7 @@ export function Auth({ setIsMagicLinkSent, isSignUp }: AuthProps) {
 
   const handleLoginWithEmail = async (
     email: string,
-    password?: string | null,
+    password?: string,
     name?: string,
   ) => {
     setIsLoginWithEmailPending(true);
@@ -204,7 +195,7 @@ export function Auth({ setIsMagicLinkSent, isSignUp }: AuthProps) {
             name,
             email,
             password,
-            callbackURL,
+            callbackURL: "/boards",
           },
           {
             onSuccess: () =>
@@ -221,7 +212,7 @@ export function Auth({ setIsMagicLinkSent, isSignUp }: AuthProps) {
           {
             email,
             password,
-            callbackURL,
+            callbackURL: "/boards",
           },
           {
             onSuccess: () =>
@@ -235,26 +226,16 @@ export function Auth({ setIsMagicLinkSent, isSignUp }: AuthProps) {
         );
       }
     } else {
-      // Only allow magic link if email sending is enabled and not in sign up mode
-      if (isEmailSendingEnabled && !isSignUp) {
-        await authClient.signIn.magicLink(
-          {
-            email,
-            callbackURL,
-          },
-          {
-            onSuccess: () => setIsMagicLinkSent(true, email),
-            onError: ({ error }) => setLoginError(error.message),
-          },
-        );
-      } else {
-        // Provide a clear error feedback when password omitted but magic link unavailable
-        setLoginError(
-          isSignUp
-            ? t`Password is required to sign up.`
-            : t`Password is required to login.`,
-        );
-      }
+      await authClient.signIn.magicLink(
+        {
+          email,
+          callbackURL: "/boards",
+        },
+        {
+          onSuccess: () => setIsMagicLinkSent(true, email),
+          onError: ({ error }) => setLoginError(error.message),
+        },
+      );
     }
 
     setIsLoginWithEmailPending(false);
@@ -269,14 +250,14 @@ export function Auth({ setIsMagicLinkSent, isSignUp }: AuthProps) {
       // Use oauth2 signin for OIDC provider
       const result = await authClient.signIn.oauth2({
         providerId: "oidc",
-        callbackURL,
+        callbackURL: "/boards",
       });
       error = result.error;
     } else {
       // Use social signin for traditional social providers
       const result = await authClient.signIn.social({
         provider,
-        callbackURL,
+        callbackURL: "/boards",
       });
       error = result.error;
     }
@@ -291,43 +272,11 @@ export function Auth({ setIsMagicLinkSent, isSignUp }: AuthProps) {
   };
 
   const onSubmit = async (values: FormValues) => {
-    // Treat empty password string as undefined to trigger magic link path
-    const sanitizedPassword = values.password?.trim()
-      ? values.password
-      : undefined;
-    await handleLoginWithEmail(values.email, sanitizedPassword, values.name);
+    await handleLoginWithEmail(values.email, values.password, values.name);
   };
 
   const password = watch("password");
 
-  // Determine if we should operate in magic link mode for current form state (login only)
-  const isMagicLinkMode = useMemo(() => {
-    // Magic link only viable when email sending enabled AND not sign up.
-    if (!isEmailSendingEnabled || isSignUp) return false;
-    // If credentials disabled we always default to magic link.
-    if (!isCredentialsEnabled) return true;
-    // Credentials enabled: user chooses magic link by leaving password blank.
-    return !password;
-  }, [isEmailSendingEnabled, isSignUp, isCredentialsEnabled, password]);
-
-  // Auto-focus password field when an error indicates it's required
-  useEffect(() => {
-    if (!isCredentialsEnabled) return;
-    // Focus when: sign up and missing password; login error requiring password; validation error on password.
-    const pwdEmpty = (password ?? "").length === 0;
-    let needsPassword = false;
-    if (isSignUp && pwdEmpty) {
-      needsPassword = true;
-    } else if (loginError?.toLowerCase().includes("password")) {
-      needsPassword = true;
-    } else if (errors.password) {
-      needsPassword = true;
-    }
-    if (needsPassword && passwordRef.current) {
-      passwordRef.current.focus();
-    }
-  }, [isSignUp, password, loginError, errors.password, isCredentialsEnabled]);
-
   return (
     <div className="space-y-6">
       {socialProviders?.length !== 0 && (
@@ -398,7 +347,7 @@ export function Auth({ setIsMagicLinkSent, isSignUp }: AuthProps) {
               />
               {errors.password && (
                 <p className="mt-2 text-xs text-red-400">
-                  {errors.password.message ?? t`Please enter a valid password`}
+                  {t`Please enter a valid password`}
                 </p>
               )}
             </div>
@@ -415,7 +364,9 @@ export function Auth({ setIsMagicLinkSent, isSignUp }: AuthProps) {
             variant="secondary"
           >
             {isSignUp ? t`Sign up with ` : t`Continue with `}
-            {isMagicLinkMode ? t`magic link` : t`email`}
+            {!isCredentialsEnabled || (password && password.length !== 0)
+              ? t`email`
+              : t`magic link`}
           </Button>
         </div>
       </form>

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 focus:outline-none dark:hover:bg-dark-200"
+          className="flex h-7 w-7 items-center justify-center rounded-[5px] hover:bg-light-200 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-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">
+        <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">
           <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 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"
+        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"
       >
         {availableLocales.map((loc) => (
           <option key={loc} value={loc}>

apps/web/src/components/NewWorkspaceForm.tsx

@@ -123,7 +123,7 @@ export function NewWorkspaceForm() {
                 body: JSON.stringify({
                   slug: slug || undefined,
                   workspacePublicId: values.publicId,
-                  cancelUrl: "/settings/workspace?upgrade=pro",
+                  cancelUrl: "/settings?upgrade=pro",
                   successUrl: "/boards",
                 }),
               },

apps/web/src/components/SettingsLayout.tsx

@@ -1,148 +0,0 @@
-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/modal.tsx

@@ -34,7 +34,7 @@ const Modal: React.FC<Props> = ({
 
   return (
     <Transition.Root show={shouldShow} as={Fragment}>
-      <Dialog as="div" className="relative z-50" onClose={closeModal}>
+      <Dialog as="div" className="relative z-10" 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-50 w-screen overflow-y-auto">
+        <div className="fixed inset-0 z-10 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

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

apps/web/src/pages/_app.tsx

@@ -7,7 +7,6 @@ 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";
@@ -15,6 +14,7 @@ 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/invite/[code].tsx

@@ -1,5 +0,0 @@
-import InviteView from "~/views/invite";
-
-export default function InvitePage() {
-  return <InviteView />;
-}

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

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

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

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

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

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

@@ -1,16 +0,0 @@
-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/workspace.tsx

@@ -1,5 +1,5 @@
 import type { ReactNode } from "react";
-import { useRouter, useSearchParams } from "next/navigation";
+import { useRouter } from "next/navigation";
 import React, { createContext, useContext, useEffect, useState } from "react";
 
 import { api } from "~/utils/api";
@@ -46,8 +46,6 @@ export const WorkspaceProvider: React.FC<{ children: ReactNode }> = ({
   );
   const [hasLoaded, setHasLoaded] = useState(false);
 
-  const workspacePublicId = useSearchParams().get("workspacePublicId");
-
   const { data, isLoading } = api.workspace.all.useQuery();
   const utils = api.useUtils();
 
@@ -69,7 +67,7 @@ export const WorkspaceProvider: React.FC<{ children: ReactNode }> = ({
     }
 
     const storedWorkspaceId: string | null =
-      workspacePublicId ?? localStorage.getItem("workspacePublicId");
+      localStorage.getItem("workspacePublicId");
 
     if (data.length) {
       const workspaces = data.map(({ workspace, role }) => ({
@@ -101,11 +99,6 @@ export const WorkspaceProvider: React.FC<{ children: ReactNode }> = ({
         description: selectedWorkspace.workspace.description,
         role: selectedWorkspace.role,
       });
-
-      if (workspacePublicId) {
-        router.push(`/boards`);
-        localStorage.setItem("workspacePublicId", workspacePublicId);
-      }
     } else {
       const primaryWorkspace = data[0]?.workspace;
       const primaryWorkspaceRole = data[0]?.role;
@@ -121,7 +114,7 @@ export const WorkspaceProvider: React.FC<{ children: ReactNode }> = ({
         role: primaryWorkspaceRole,
       });
     }
-  }, [data, isLoading, workspacePublicId, router]);
+  }, [data, isLoading]);
 
   return (
     <WorkspaceContext.Provider

apps/web/src/utils/i18n.ts

@@ -18,8 +18,6 @@ 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/auth/login/index.tsx

@@ -1,5 +1,5 @@
 import Link from "next/link";
-import { useRouter, useSearchParams } from "next/navigation";
+import { useRouter } from "next/navigation";
 import { t } from "@lingui/core/macro";
 import { Trans } from "@lingui/react/macro";
 import { env } from "next-runtime-env";
@@ -17,8 +17,6 @@ export default function LoginPage() {
   const [isMagicLinkSent, setIsMagicLinkSent] = useState<boolean>(false);
   const [magicLinkRecipient, setMagicLinkRecipient] = useState<string>("");
 
-  const redirect = useSearchParams().get("next");
-
   const handleMagicLinkSent = (value: boolean, recipient: string) => {
     setIsMagicLinkSent(value);
     setMagicLinkRecipient(recipient);
@@ -63,11 +61,7 @@ export default function LoginPage() {
                 <Trans>
                   Don't have an account?{" "}
                   <span className="underline">
-                    <Link
-                      href={redirect ? `/signup?next=${redirect}` : "/signup"}
-                    >
-                      Sign up
-                    </Link>
+                    <Link href="/signup">Sign up</Link>
                   </span>
                 </Trans>
               </p>

apps/web/src/views/auth/signup/index.tsx

@@ -1,5 +1,5 @@
 import Link from "next/link";
-import { useRouter, useSearchParams } from "next/navigation";
+import { useRouter } from "next/navigation";
 import { t } from "@lingui/core/macro";
 import { Trans } from "@lingui/react/macro";
 import { env } from "next-runtime-env";
@@ -17,8 +17,6 @@ export default function SignUpPage() {
   const [isMagicLinkSent, setIsMagicLinkSent] = useState<boolean>(false);
   const [magicLinkRecipient, setMagicLinkRecipient] = useState<string>("");
 
-  const redirect = useSearchParams().get("next");
-
   const { data } = authClient.useSession();
 
   if (data?.user.id) router.push("/boards");
@@ -88,9 +86,7 @@ export default function SignUpPage() {
               <Trans>
                 Already have an account?{" "}
                 <span className="underline">
-                  <Link href={redirect ? `/login?next=${redirect}` : "/login"}>
-                    Sign in
-                  </Link>
+                  <Link href="/login">Sign in</Link>
                 </span>
               </Trans>
             </p>

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?tab=workspace"
+            href="/settings?edit=workspace_url"
             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="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="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="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="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="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">
       {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/invite/index.tsx

@@ -1,171 +0,0 @@
-import { useRouter } from "next/router";
-import { t } from "@lingui/core/macro";
-import { env } from "next-runtime-env";
-import { useEffect, useState } from "react";
-
-import { authClient } from "@kan/auth/client";
-
-import Button from "~/components/Button";
-import LoadingSpinner from "~/components/LoadingSpinner";
-import { PageHead } from "~/components/PageHead";
-import PatternedBackground from "~/components/PatternedBackground";
-import { api } from "~/utils/api";
-
-export default function InvitePage() {
-  const router = useRouter();
-  const { code } = router.query;
-  const [isProcessing, setIsProcessing] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-  const { data: session, isPending: isSessionLoading } =
-    authClient.useSession();
-
-  const isCloudEnv = env("NEXT_PUBLIC_KAN_ENV") === "cloud";
-
-  const inviteCode = Array.isArray(code) ? code[0] : code;
-
-  const acceptInviteMutation = api.member.acceptInviteLink.useMutation({
-    onSuccess: (result) => {
-      if (result.success) {
-        return router.push(
-          `/boards?workspacePublicId=${result.workspacePublicId}`,
-        );
-      }
-    },
-    onError: (error) => {
-      if (error.data?.code === "CONFLICT") {
-        return router.push(`/boards`);
-      }
-
-      setError(
-        error.message ||
-          t`Failed to accept invitation. Please try again later, or contact customer support.`,
-      );
-      setIsProcessing(false);
-    },
-  });
-
-  const {
-    data: inviteInfo,
-    isLoading: isInviteInfoLoading,
-    isError: isInviteInfoError,
-  } = api.member.getInviteByCode.useQuery(
-    { inviteCode: inviteCode ?? "" },
-    {
-      enabled: !!inviteCode,
-      retry: false,
-    },
-  );
-
-  // Auto accept invite if user is logged in
-  useEffect(() => {
-    if (session?.user.id && inviteCode && inviteInfo && !error) {
-      setIsProcessing(true);
-      setError(null);
-
-      acceptInviteMutation.mutate({
-        inviteCode,
-      });
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [session?.user.id, inviteCode, inviteInfo, error]);
-
-  if (
-    !isInviteInfoError &&
-    !error &&
-    (session?.user.id || isInviteInfoLoading || isSessionLoading)
-  ) {
-    return (
-      <>
-        <PageHead title={t`Join workspace`} />
-        <PatternedBackground />
-        <div className="flex min-h-screen items-center justify-center">
-          <LoadingSpinner size="lg" />
-        </div>
-      </>
-    );
-  }
-
-  const PageWrapper = ({ children }: { children: React.ReactNode }) => {
-    return (
-      <>
-        <PageHead title={t`Join workspace | kan.bn`} />
-        {children}
-      </>
-    );
-  };
-
-  if (isInviteInfoError || (!isInviteInfoLoading && !inviteInfo)) {
-    return (
-      <PageWrapper>
-        <div className="relative flex min-h-screen items-center justify-center px-4 py-12 sm:px-6 lg:px-8">
-          <PatternedBackground />
-          <div className="z-10 w-full max-w-md space-y-8">
-            <div>
-              <h2 className="mt-6 text-center text-3xl font-bold tracking-tight text-light-1000 dark:text-dark-1000">
-                {t`Invalid invitation`}
-              </h2>
-              <p className="mt-4 text-center text-sm text-light-900 dark:text-dark-800">
-                {t`This invitation link is invalid or has expired.`}
-              </p>
-            </div>
-            <div className="text-center">
-              <Button href="/" variant="primary">
-                {t`Go Home`}
-              </Button>
-            </div>
-          </div>
-        </div>
-      </PageWrapper>
-    );
-  }
-
-  return (
-    <PageWrapper>
-      <div className="relative flex min-h-screen items-center justify-center px-4 py-12 sm:px-6 lg:px-8">
-        <PatternedBackground />
-        <div className="z-10 w-full max-w-[400px] space-y-8">
-          <div>
-            <h2 className="mt-6 text-center text-3xl font-bold tracking-tight text-light-1000 dark:text-dark-1000">
-              {t`Join workspace`}
-            </h2>
-            {!error ? (
-              <p className="mt-4 text-center text-sm text-light-900 dark:text-dark-800">
-                {isCloudEnv
-                  ? t`You've been invited to join a workspace on kan.bn.`
-                  : t`You've been invited to join a workspace.`}
-              </p>
-            ) : (
-              <p className="mt-4 text-center text-sm text-red-500">{error}</p>
-            )}
-          </div>
-          <div className="flex justify-center gap-2">
-            {session?.user.id ? (
-              <Button href={`/boards`} variant="primary" size="md">
-                {t`Go to app`}
-              </Button>
-            ) : (
-              <>
-                <Button
-                  href={`/login?next=/invite/${inviteCode}`}
-                  disabled={isProcessing}
-                  variant="primary"
-                  size="md"
-                >
-                  {t`Sign In`}
-                </Button>
-                <Button
-                  href={`/signup?next=/invite/${inviteCode}`}
-                  disabled={isProcessing}
-                  variant="primary"
-                  size="md"
-                >
-                  {t`Sign Up`}
-                </Button>
-              </>
-            )}
-          </div>
-        </div>
-      </div>
-    </PageWrapper>
-  );
-}

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

@@ -3,12 +3,7 @@ import { t } from "@lingui/core/macro";
 import { env } from "next-runtime-env";
 import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
-import {
-  HiInformationCircle,
-  HiMiniCheck,
-  HiOutlineDocumentDuplicate,
-  HiXMark,
-} from "react-icons/hi2";
+import { HiXMark } from "react-icons/hi2";
 import { z } from "zod";
 
 import type { InviteMemberInput } from "@kan/api/types";
@@ -36,17 +31,11 @@ export function InviteMemberForm({
   userId: string | undefined;
 }) {
   const utils = api.useUtils();
-  const [isShareInviteLinkEnabled, setIsShareInviteLinkEnabled] =
-    useState(false);
-  const [inviteLink, setInviteLink] = useState<string>("");
-  const [isLoadingInviteLink, setIsLoadingInviteLink] = useState(false);
-  const [copied, setCopied] = useState(false);
+  const [isCreateAnotherEnabled, setIsCreateAnotherEnabled] = useState(false);
   const { closeModal } = useModal();
   const { workspace } = useWorkspace();
   const { showPopup } = usePopup();
 
-  const isEmailEnabled = env("NEXT_PUBLIC_DISABLE_EMAIL") !== "true";
-
   const InviteMemberSchema = z.object({
     email: z.string().email({ message: t`Invalid email address` }),
     workspacePublicId: z.string(),
@@ -67,21 +56,6 @@ export function InviteMemberForm({
 
   const refetchBoards = () => utils.board.all.refetch();
 
-  // Fetch active invite link on component mount
-  const { data: activeInviteLink, refetch: refetchInviteLink } =
-    api.member.getActiveInviteLink.useQuery(
-      { workspacePublicId: workspace.publicId || "" },
-      { enabled: !!workspace.publicId },
-    );
-
-  // Set initial state based on active invite link
-  useEffect(() => {
-    if (activeInviteLink) {
-      setIsShareInviteLinkEnabled(activeInviteLink.isActive);
-      setInviteLink(activeInviteLink.inviteLink || "");
-    }
-  }, [activeInviteLink]);
-
   const inviteMember = api.member.invite.useMutation({
     onSuccess: async () => {
       closeModal();
@@ -90,7 +64,7 @@ export function InviteMemberForm({
     },
     onError: (error) => {
       reset();
-      if (!isShareInviteLinkEnabled) closeModal();
+      if (!isCreateAnotherEnabled) closeModal();
 
       if (error.data?.code === "CONFLICT") {
         showPopup({
@@ -108,36 +82,6 @@ export function InviteMemberForm({
     },
   });
 
-  const createInviteLink = api.member.createInviteLink.useMutation({
-    onSuccess: (data) => {
-      setInviteLink(data.inviteLink);
-      setIsLoadingInviteLink(false);
-    },
-    onError: () => {
-      setIsLoadingInviteLink(false);
-      showPopup({
-        header: t`Error creating invite link`,
-        message: t`Please try again later.`,
-        icon: "error",
-      });
-    },
-  });
-
-  const deactivateInviteLink = api.member.deactivateInviteLink.useMutation({
-    onSuccess: () => {
-      setInviteLink("");
-      setIsLoadingInviteLink(false);
-    },
-    onError: () => {
-      setIsLoadingInviteLink(false);
-      showPopup({
-        header: t`Error deactivating invite link`,
-        message: t`Please try again later.`,
-        icon: "error",
-      });
-    },
-  });
-
   const teamSubscription = getSubscriptionByPlan(subscriptions, "team");
   const proSubscription = getSubscriptionByPlan(subscriptions, "pro");
 
@@ -165,43 +109,6 @@ export function InviteMemberForm({
     inviteMember.mutate(member);
   };
 
-  const handleInviteLinkToggle = async () => {
-    setIsLoadingInviteLink(true);
-
-    if (isShareInviteLinkEnabled && workspace.publicId) {
-      // Deactivate invite link
-      await deactivateInviteLink.mutateAsync({
-        workspacePublicId: workspace.publicId,
-      });
-      setIsShareInviteLinkEnabled(false);
-    } else {
-      // Create new invite link
-      await createInviteLink.mutateAsync({
-        workspacePublicId: workspace.publicId,
-      });
-      setIsShareInviteLinkEnabled(true);
-    }
-  };
-
-  const copyToClipboard = async () => {
-    try {
-      await navigator.clipboard.writeText(inviteLink);
-      setCopied(true);
-      setTimeout(() => setCopied(false), 2000);
-      showPopup({
-        header: t`Invite link copied`,
-        message: t`Invite link copied to clipboard`,
-        icon: "success",
-      });
-    } catch (error) {
-      showPopup({
-        header: t`Error`,
-        message: t`Failed to copy invite link`,
-        icon: "error",
-      });
-    }
-  };
-
   const handleUpgrade = async () => {
     const { data, error } = await authClient.subscription.upgrade({
       plan: "team",
@@ -249,53 +156,23 @@ export function InviteMemberForm({
             <HiXMark size={18} className="dark:text-dark-9000 text-light-900" />
           </button>
         </div>
-        {isEmailEnabled && (
-          <Input
-            id="email"
-            placeholder={t`Email`}
-            disabled={
-              env("NEXT_PUBLIC_KAN_ENV") === "cloud" &&
-              !hasTeamSubscription &&
-              !hasProSubscription
+        <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") {
+              e.preventDefault();
+              await handleSubmit(onSubmit)();
             }
-            {...register("email", { required: true })}
-            onKeyDown={async (e) => {
-              if (e.key === "Enter") {
-                e.preventDefault();
-                await handleSubmit(onSubmit)();
-              }
-            }}
-            errorMessage={errors.email?.message}
-          />
-        )}
-        {(!isEmailEnabled || (isShareInviteLinkEnabled && inviteLink)) && (
-          <div className="my-4">
-            <div className="relative">
-              <Input
-                value={inviteLink}
-                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={copyToClipboard}
-              >
-                {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`Anyone with this link can join your workspace`}
-              </p>
-            </div>
-          </div>
-        )}
+          }}
+          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">
@@ -328,27 +205,30 @@ export function InviteMemberForm({
         {(hasTeamSubscription || hasProSubscription) &&
           env("NEXT_PUBLIC_KAN_ENV") === "cloud" && (
             <Toggle
-              label={
-                isShareInviteLinkEnabled
-                  ? t`Deactivate invite link`
-                  : t`Create invite link`
+              label={t`Invite another`}
+              isChecked={isCreateAnotherEnabled}
+              onChange={() =>
+                setIsCreateAnotherEnabled(!isCreateAnotherEnabled)
               }
-              isChecked={isShareInviteLinkEnabled}
-              onChange={handleInviteLinkToggle}
             />
           )}
         <div>
           {env("NEXT_PUBLIC_KAN_ENV") === "cloud" &&
           !hasTeamSubscription &&
           !hasProSubscription ? (
-            <Button type="button" onClick={handleUpgrade}>
+            <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 || !isEmailEnabled}
+              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>

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

@@ -1,7 +1,6 @@
 import Link from "next/link";
 import { t } from "@lingui/core/macro";
 import { env } from "next-runtime-env";
-import { useEffect, useState } from "react";
 import {
   HiBolt,
   HiEllipsisHorizontal,
@@ -130,9 +129,9 @@ export default function MembersPage() {
                 {memberRole &&
                   memberRole.charAt(0).toUpperCase() + memberRole.slice(1)}
               </span>
-              {(memberStatus === "invited" || memberStatus === "paused") && (
+              {memberStatus === "invited" && (
                 <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]">
-                  {memberStatus === "invited" ? t`Pending` : t`Paused`}
+                  {t`Pending`}
                 </span>
               )}
             </div>
@@ -184,7 +183,7 @@ export default function MembersPage() {
               <>
                 {!proSubscription && (
                   <Link
-                    href="/settings/workspace?upgrade=pro"
+                    href="/settings?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 />

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

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

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

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

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

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

@@ -1,202 +0,0 @@
-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,45 +1,14 @@
 import Image from "next/image";
 import { t } from "@lingui/core/macro";
 import { env } from "next-runtime-env";
-import { useCallback, useRef, useState } from "react";
-import ReactCrop from "react-image-crop";
-
-import "react-image-crop/dist/ReactCrop.css";
+import { useState } from "react";
 
 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,
@@ -50,13 +19,6 @@ 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 () => {
@@ -83,109 +45,24 @@ export default function Avatar({
 
   const avatarUrl = userImage ? getAvatarUrl(userImage) : undefined;
 
-  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 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 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 () => {
+  const uploadAvatar = async (event: React.ChangeEvent<HTMLInputElement>) => {
     try {
-      if (!userId || !selectedFile) return;
-      setUploading(true);
-      const blob = await getCroppedBlob();
+      event.preventDefault();
 
-      const originalExt = selectedFile.name.split(".").pop() ?? "jpg";
-      const fileName = `${userId}/avatar-${generateUID()}.${originalExt}`;
+      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 fileExt = file.name.split(".").pop();
+      const fileName = `${userId}/avatar-${generateUID()}.${fileExt}`;
+
+      setUploading(true);
 
       const response = await fetch(
         env("NEXT_PUBLIC_BASE_URL") + "/api/upload/image",
@@ -194,24 +71,26 @@ export default function Avatar({
           headers: {
             "Content-Type": "application/json",
           },
-          body: JSON.stringify({ filename: fileName, contentType: blob.type }),
+          body: JSON.stringify({ filename: fileName, contentType: file.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: blob,
+        body: file,
       });
 
       if (!uploadResponse.ok) throw new Error("Failed to upload profile image");
 
-      updateUser.mutate({ image: fileName });
-      setCropDialogOpen(false);
-      resetCropState();
+      updateUser.mutate({
+        image: fileName,
+      });
     } catch (error) {
       console.error(error);
       showPopup({
@@ -222,14 +101,7 @@ export default function Avatar({
     } finally {
       setUploading(false);
     }
-  }, [
-    getCroppedBlob,
-    resetCropState,
-    selectedFile,
-    showPopup,
-    updateUser,
-    userId,
-  ]);
+  };
 
   return (
     <div>
@@ -239,7 +111,7 @@ export default function Avatar({
           type="file"
           id="single"
           accept="image/*"
-          onChange={onFileChange}
+          onChange={uploadAvatar}
           disabled={uploading}
         />
         {avatarUrl ? (
@@ -262,56 +134,6 @@ 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

@@ -0,0 +1,60 @@
+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/NewApiKeyForm.tsx

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

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

@@ -1,96 +0,0 @@
-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,18 +69,16 @@ 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>
-      {isDirty && (
-        <div>
-          <Button
-            onClick={handleSubmit(onSubmit)}
-            variant="primary"
-            disabled={updateDisplayName.isPending}
-            isLoading={updateDisplayName.isPending}
-          >
-            {t`Update`}
-          </Button>
-        </div>
-      )}
+      <div>
+        <Button
+          onClick={handleSubmit(onSubmit)}
+          variant="primary"
+          disabled={!isDirty || updateDisplayName.isPending}
+          isLoading={updateDisplayName.isPending}
+        >
+          {t`Update`}
+        </Button>
+      </div>
     </div>
   );
 };

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

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

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

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

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

@@ -138,23 +138,22 @@ const UpdateWorkspaceUrlForm = ({
           }
         />
       </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>
+        <Button
+          onClick={handleSubmit(onSubmit)}
+          variant="primary"
+          disabled={
+            !isDirty ||
+            updateWorkspaceSlug.isPending ||
+            checkWorkspaceSlugAvailability.isPending ||
+            isWorkspaceSlugAvailable?.isAvailable === false ||
+            isTyping
+          }
+          isLoading={updateWorkspaceSlug.isPending}
+        >
+          {t`Update`}
+        </Button>
+      </div>
     </div>
   );
 };

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

@@ -0,0 +1,412 @@
+import { useRouter } from "next/router";
+import { t } from "@lingui/core/macro";
+import { env } from "next-runtime-env";
+import { useEffect, useRef, useState } from "react";
+import { HiBolt, HiMiniArrowTopRightOnSquare } 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 { 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 { 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";
+import { UpgradeToProConfirmation } from "./components/UpgradeToProConfirmation";
+
+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 [hasOpenedUpgradeModal, setHasOpenedUpgradeModal] = useState(false);
+  const isCredentialsEnabled =
+    env("NEXT_PUBLIC_ALLOW_CREDENTIALS")?.toLowerCase() === "true";
+  const { data } = api.user.getUser.useQuery();
+
+  const { data: workspaceData } = api.workspace.byId.useQuery({
+    workspacePublicId: workspace.publicId,
+  });
+
+  const subscriptions = workspaceData?.subscriptions as
+    | Subscription[]
+    | undefined;
+
+  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]);
+
+  // 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]);
+
+  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 ?? ""}
+              />
+
+              {env("NEXT_PUBLIC_KAN_ENV") === "cloud" &&
+                !hasActiveSubscription(subscriptions, "pro") && (
+                  <div className="mt-8">
+                    <Button
+                      onClick={() => openModal("UPGRADE_TO_PRO")}
+                      iconRight={<HiBolt />}
+                    >
+                      {t`Upgrade to Pro`}
+                    </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`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 === "UPGRADE_TO_PRO"}
+            >
+              <UpgradeToProConfirmation
+                userId={data?.id ?? ""}
+                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>
+    </>
+  );
+}

docker-compose.yml

@@ -25,9 +25,6 @@ services:
       - SMTP_PASSWORD=${SMTP_PASSWORD}
       - EMAIL_FROM=${EMAIL_FROM}
 
-      # Disable email features entirely (optional)
-      - NEXT_PUBLIC_DISABLE_EMAIL=${NEXT_PUBLIC_DISABLE_EMAIL}
-
       # S3 storage (optional)
       - S3_ACCESS_KEY_ID=${S3_ACCESS_KEY_ID}
       - S3_SECRET_ACCESS_KEY=${S3_SECRET_ACCESS_KEY}

packages/api/src/routers/member.ts

@@ -1,19 +1,14 @@
 import { TRPCError } from "@trpc/server";
 import { z } from "zod";
 
-import * as inviteLinkRepo from "@kan/db/repository/inviteLink.repo";
 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 {
-  generateUID,
-  getSubscriptionByPlan,
-  hasUnlimitedSeats,
-} from "@kan/shared/utils";
+import { getSubscriptionByPlan, hasUnlimitedSeats } from "@kan/shared/utils";
 import { updateSubscriptionSeats } from "@kan/stripe";
 
-import { createTRPCRouter, protectedProcedure, publicProcedure } from "../trpc";
+import { createTRPCRouter, protectedProcedure } from "../trpc";
 import { assertUserInWorkspace } from "../utils/auth";
 
 export const memberRouter = createTRPCRouter({
@@ -246,379 +241,4 @@ export const memberRouter = createTRPCRouter({
 
       return { success: true };
     }),
-  getActiveInviteLink: protectedProcedure
-    .meta({
-      openapi: {
-        summary: "Get active invite link for workspace",
-        method: "GET",
-        path: "/workspaces/{workspacePublicId}/invite",
-        description: "Gets the active invite link for a workspace",
-        tags: ["Invites"],
-        protect: true,
-      },
-    })
-    .input(
-      z.object({
-        workspacePublicId: z.string().min(12),
-      }),
-    )
-    .output(
-      z.object({
-        id: z.number().optional(),
-        inviteCode: z.string().optional(),
-        inviteLink: z.string().optional(),
-        isActive: z.boolean(),
-        expiresAt: z.date().optional(),
-      }),
-    )
-    .query(async ({ ctx, input }) => {
-      const userId = ctx.user?.id;
-
-      if (!userId)
-        throw new TRPCError({
-          message: `User not authenticated`,
-          code: "UNAUTHORIZED",
-        });
-
-      const workspace = await workspaceRepo.getByPublicId(
-        ctx.db,
-        input.workspacePublicId,
-      );
-
-      if (!workspace)
-        throw new TRPCError({
-          message: `Workspace not found`,
-          code: "NOT_FOUND",
-        });
-
-      // Check if user is in workspace
-      await assertUserInWorkspace(ctx.db, userId, workspace.id);
-
-      // Get active invite link for this workspace
-      const activeInviteLink = await inviteLinkRepo.getActiveForWorkspace(
-        ctx.db,
-        workspace.id,
-      );
-
-      if (
-        activeInviteLink &&
-        (!activeInviteLink.expiresAt || new Date() < activeInviteLink.expiresAt)
-      ) {
-        return {
-          id: activeInviteLink.id,
-          inviteCode: activeInviteLink.code,
-          inviteLink: `${process.env.NEXT_PUBLIC_BASE_URL}/invite/${activeInviteLink.code}`,
-          isActive: true,
-          expiresAt: activeInviteLink.expiresAt ?? undefined,
-        };
-      }
-
-      return { isActive: false };
-    }),
-  createInviteLink: protectedProcedure
-    .meta({
-      openapi: {
-        summary: "Create invite link for workspace",
-        method: "POST",
-        path: "/workspaces/{workspacePublicId}/invites",
-        description: "Create invite link for a workspace",
-        tags: ["Invites"],
-        protect: true,
-      },
-    })
-    .input(
-      z.object({
-        workspacePublicId: z.string().min(12),
-      }),
-    )
-    .output(
-      z.object({
-        publicId: z.string().min(12),
-        inviteCode: z.string(),
-        inviteLink: z.string(),
-        expiresAt: z.date().nullable(),
-      }),
-    )
-    .mutation(async ({ ctx, input }) => {
-      const userId = ctx.user?.id;
-
-      if (!userId)
-        throw new TRPCError({
-          message: `User not authenticated`,
-          code: "UNAUTHORIZED",
-        });
-
-      const workspace = await workspaceRepo.getByPublicId(
-        ctx.db,
-        input.workspacePublicId,
-      );
-
-      if (!workspace)
-        throw new TRPCError({
-          message: `Workspace not found`,
-          code: "NOT_FOUND",
-        });
-
-      // Check if user is in workspace
-      await assertUserInWorkspace(ctx.db, userId, workspace.id, "admin");
-
-      // Deactivate any existing active invite links
-      await inviteLinkRepo.deactivateAllActiveForWorkspace(ctx.db, {
-        workspaceId: workspace.id,
-        updatedBy: userId,
-      });
-
-      // Generate new invite code
-      const inviteCode = generateUID();
-      const expiresAt = new Date();
-      expiresAt.setDate(expiresAt.getDate() + 7);
-
-      // Create new invite link
-      const inviteLink = await inviteLinkRepo.createInviteLink(ctx.db, {
-        workspaceId: workspace.id,
-        code: inviteCode,
-        expiresAt,
-        createdBy: userId,
-      });
-
-      if (!inviteLink) {
-        throw new TRPCError({
-          message: `Failed to create invite link`,
-          code: "INTERNAL_SERVER_ERROR",
-        });
-      }
-
-      return {
-        publicId: inviteLink.publicId,
-        inviteCode: inviteLink.code,
-        inviteLink: `${process.env.NEXT_PUBLIC_BASE_URL}/invite/${inviteLink.code}`,
-        expiresAt: inviteLink.expiresAt,
-      };
-    }),
-  deactivateInviteLink: protectedProcedure
-    .meta({
-      openapi: {
-        summary: "Deactivate invite link for workspace",
-        method: "DELETE",
-        path: "/workspaces/{workspacePublicId}/invites",
-        description: "Deactivates the invite link for a workspace",
-        tags: ["Invites"],
-        protect: true,
-      },
-    })
-    .input(
-      z.object({
-        workspacePublicId: z.string().min(12),
-      }),
-    )
-    .output(
-      z.object({
-        success: z.boolean(),
-      }),
-    )
-    .mutation(async ({ ctx, input }) => {
-      const userId = ctx.user?.id;
-
-      if (!userId)
-        throw new TRPCError({
-          message: `User not authenticated`,
-          code: "UNAUTHORIZED",
-        });
-
-      const workspace = await workspaceRepo.getByPublicId(
-        ctx.db,
-        input.workspacePublicId,
-      );
-
-      if (!workspace)
-        throw new TRPCError({
-          message: `Workspace not found`,
-          code: "NOT_FOUND",
-        });
-
-      // Check if user is in workspace
-      await assertUserInWorkspace(ctx.db, userId, workspace.id, "admin");
-
-      // Deactivate all active invite links
-      await inviteLinkRepo.deactivateAllActiveForWorkspace(ctx.db, {
-        workspaceId: workspace.id,
-        updatedBy: userId,
-      });
-
-      return { success: true };
-    }),
-  getInviteByCode: publicProcedure
-    .meta({
-      openapi: {
-        summary: "Get invite information by code",
-        method: "GET",
-        path: "/workspaces/{workspacePublicId}/invites/{inviteCode}",
-        description: "Get invite information by invite code",
-        tags: ["Invites"],
-        protect: false,
-      },
-    })
-    .input(
-      z.object({
-        inviteCode: z.string().min(12),
-      }),
-    )
-    .output(
-      z
-        .object({
-          publicId: z.string().min(12),
-          status: z.string(),
-          expiresAt: z.date().nullable(),
-        })
-        .optional(),
-    )
-    .query(async ({ ctx, input }) => {
-      const invite = await inviteLinkRepo.getByCode(ctx.db, input.inviteCode);
-
-      if (
-        !invite ||
-        invite.status !== "active" ||
-        (invite.expiresAt && new Date() > invite.expiresAt)
-      ) {
-        throw new TRPCError({
-          message: `Invalid or expired invite link`,
-          code: "BAD_REQUEST",
-        });
-      }
-
-      return {
-        publicId: invite.publicId,
-        status: invite.status,
-        expiresAt: invite.expiresAt ?? null,
-      };
-    }),
-  acceptInviteLink: publicProcedure
-    .meta({
-      openapi: {
-        summary: "Accept an invite link",
-        method: "POST",
-        path: "/workspaces/{workspacePublicId}/invites/accept",
-        description: "Accepts an invitation via invite link",
-        tags: ["Invites"],
-        protect: false,
-      },
-    })
-    .input(
-      z.object({
-        inviteCode: z.string().min(12),
-      }),
-    )
-    .output(
-      z.object({
-        success: z.boolean(),
-        workspacePublicId: z.string().optional(),
-        workspaceSlug: z.string().optional(),
-      }),
-    )
-    .mutation(async ({ ctx, input }) => {
-      const userId = ctx.user?.id;
-
-      if (!userId)
-        throw new TRPCError({
-          message: `User not authenticated`,
-          code: "UNAUTHORIZED",
-        });
-
-      const invite = await inviteLinkRepo.getByCode(ctx.db, input.inviteCode);
-
-      if (
-        !invite ||
-        invite.status !== "active" ||
-        (invite.expiresAt && new Date() > invite.expiresAt)
-      )
-        throw new TRPCError({
-          message: `Invalid or expired invite link`,
-          code: "BAD_REQUEST",
-        });
-
-      const workspace = await workspaceRepo.getById(ctx.db, invite.workspaceId);
-
-      if (!workspace)
-        throw new TRPCError({
-          message: `Workspace not found`,
-          code: "NOT_FOUND",
-        });
-
-      const isMember = await workspaceRepo.isUserInWorkspace(
-        ctx.db,
-        userId,
-        invite.workspaceId,
-      );
-
-      if (isMember) {
-        throw new TRPCError({
-          message: `User is already a member of this workspace`,
-          code: "CONFLICT",
-        });
-      }
-
-      const user = await userRepo.getById(ctx.db, userId);
-
-      if (!user)
-        throw new TRPCError({
-          message: `User not found`,
-          code: "NOT_FOUND",
-        });
-
-      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",
-            });
-          }
-        }
-      }
-
-      await memberRepo.create(ctx.db, {
-        workspaceId: invite.workspaceId,
-        email: user.email,
-        userId: user.id,
-        createdBy: user.id,
-        role: "member",
-        status: "active",
-      });
-
-      return {
-        success: true,
-        workspacePublicId: workspace.publicId,
-        workspaceSlug: workspace.slug,
-      };
-    }),
 });

packages/auth/src/auth.ts

@@ -220,19 +220,6 @@ export const initAuth = (db: dbClient) => {
                     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}`,
-                      );
-                    }
                   }
                 },
               },

packages/db/migrations/20250918201751_AddPausedMemberStatus.sql

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

packages/db/migrations/20250923211958_AddWorkspaceInviteLinks.sql

@@ -1,34 +0,0 @@
-CREATE TYPE "public"."invite_link_status" AS ENUM('active', 'inactive');--> statement-breakpoint
-CREATE TABLE IF NOT EXISTS "workspace_invite_links" (
-	"id" bigserial PRIMARY KEY NOT NULL,
-	"publicId" varchar(12) NOT NULL,
-	"workspaceId" bigint NOT NULL,
-	"code" varchar(12) NOT NULL,
-	"status" "invite_link_status" DEFAULT 'active' NOT NULL,
-	"expiresAt" timestamp,
-	"createdAt" timestamp DEFAULT now() NOT NULL,
-	"createdBy" uuid,
-	"updatedAt" timestamp,
-	"updatedBy" uuid,
-	CONSTRAINT "workspace_invite_links_publicId_unique" UNIQUE("publicId"),
-	CONSTRAINT "workspace_invite_links_code_unique" UNIQUE("code")
-);
---> statement-breakpoint
-ALTER TABLE "workspace_invite_links" ENABLE ROW LEVEL SECURITY;--> statement-breakpoint
-DO $$ BEGIN
- ALTER TABLE "workspace_invite_links" ADD CONSTRAINT "workspace_invite_links_workspaceId_workspace_id_fk" FOREIGN KEY ("workspaceId") REFERENCES "public"."workspace"("id") ON DELETE cascade ON UPDATE no action;
-EXCEPTION
- WHEN duplicate_object THEN null;
-END $$;
---> statement-breakpoint
-DO $$ BEGIN
- ALTER TABLE "workspace_invite_links" ADD CONSTRAINT "workspace_invite_links_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 $$;
---> statement-breakpoint
-DO $$ BEGIN
- ALTER TABLE "workspace_invite_links" ADD CONSTRAINT "workspace_invite_links_updatedBy_user_id_fk" FOREIGN KEY ("updatedBy") REFERENCES "public"."user"("id") ON DELETE set null ON UPDATE no action;
-EXCEPTION
- WHEN duplicate_object THEN null;
-END $$;

packages/db/migrations/meta/_journal.json

@@ -99,20 +99,6 @@
       "when": 1757535838766,
       "tag": "20250910202358_AddCascadeSetNullToReferenceIdOnSubsriptions",
       "breakpoints": true
-    },
-    {
-      "idx": 14,
-      "version": "7",
-      "when": 1758226671081,
-      "tag": "20250918201751_AddPausedMemberStatus",
-      "breakpoints": true
-    },
-    {
-      "idx": 15,
-      "version": "7",
-      "when": 1758662398166,
-      "tag": "20250923211958_AddWorkspaceInviteLinks",
-      "breakpoints": true
     }
   ]
 }

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

@@ -95,32 +95,9 @@ export const create = async (
       .having(gt(countExpr, 1));
 
     if (duplicateIndices.length > 0) {
-      // Compact indices for this list to sequential values (0..n-1) preserving order
-      await tx.execute(sql`
-        WITH ordered AS (
-          SELECT id, ROW_NUMBER() OVER (ORDER BY "index", id) - 1 AS new_index
-          FROM "card"
-          WHERE "listId" = ${result[0].listId} AND "deletedAt" IS NULL
-        )
-        UPDATE "card" c
-        SET "index" = o.new_index
-        FROM ordered o
-        WHERE c.id = o.id;
-      `);
-
-      // Last resort: verify fix; rollback if duplicates persist
-      const postFixDupes = await tx
-        .select({ index: cards.index, count: countExpr })
-        .from(cards)
-        .where(and(eq(cards.listId, result[0].listId), isNull(cards.deletedAt)))
-        .groupBy(cards.listId, cards.index)
-        .having(gt(countExpr, 1));
-
-      if (postFixDupes.length > 0) {
-        throw new Error(
-          `Invariant violation: duplicate card indices remain after compaction in list ${result[0].listId}`,
-        );
-      }
+      throw new Error(
+        `Duplicate indices found after creating card ${result[0].id}`,
+      );
     }
 
     return result[0];
@@ -242,95 +219,11 @@ export const bulkCreate = async (
     importId?: number;
   }[],
 ) => {
-  if (cardInput.length === 0) return [];
-
-  return db.transaction(async (tx) => {
-    // Group incoming cards by list to compute safe, sequential indices per list
-    const byList = new Map<number, typeof cardInput>();
-    for (const item of cardInput) {
-      const arr = byList.get(item.listId) ?? [];
-      arr.push(item);
-      byList.set(item.listId, arr);
-    }
-
-    const allValuesToInsert: {
-      publicId: string;
-      title: string;
-      description: string;
-      createdBy: string;
-      listId: number;
-      index: number;
-      importId?: number;
-    }[] = [];
-
-    // For each list, append incoming cards after current max index, preserving incoming order
-    for (const [listId, items] of byList.entries()) {
-      const last = await tx.query.cards.findFirst({
-        columns: { index: true },
-        where: and(eq(cards.listId, listId), isNull(cards.deletedAt)),
-        orderBy: [desc(cards.index)],
-      });
-
-      let nextIndex = last ? last.index + 1 : 0;
-      const sorted = [...items].sort((a, b) => a.index - b.index);
-      for (const it of sorted) {
-        allValuesToInsert.push({
-          publicId: it.publicId,
-          title: it.title,
-          description: it.description,
-          createdBy: it.createdBy,
-          listId: it.listId,
-          index: nextIndex++,
-          importId: it.importId,
-        });
-      }
-    }
-
-    const inserted = await tx
-      .insert(cards)
-      .values(allValuesToInsert)
-      .returning({ id: cards.id });
-
-    // Post-insert: compact per list if duplicates exist; then verify
-    const countExpr = sql<number>`COUNT(*)`.mapWith(Number);
-    for (const listId of byList.keys()) {
-      const duplicateIndices = await tx
-        .select({ index: cards.index, count: countExpr })
-        .from(cards)
-        .where(and(eq(cards.listId, listId), isNull(cards.deletedAt)))
-        .groupBy(cards.listId, cards.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 "card"
-            WHERE "listId" = ${listId} AND "deletedAt" IS NULL
-          )
-          UPDATE "card" c
-          SET "index" = o.new_index
-          FROM ordered o
-          WHERE c.id = o.id;
-        `);
-
-        const postFixDupes = await tx
-          .select({ index: cards.index, count: countExpr })
-          .from(cards)
-          .where(and(eq(cards.listId, listId), isNull(cards.deletedAt)))
-          .groupBy(cards.listId, cards.index)
-          .having(gt(countExpr, 1));
-
-        if (postFixDupes.length > 0) {
-          throw new Error(
-            `Invariant violation: duplicate card indices remain after compaction in list ${listId}`,
-          );
-        }
-      }
-    }
-
-    return inserted;
+  const result = await db.insert(cards).values(cardInput).returning({
+    id: cards.id,
   });
+
+  return result;
 };
 
 export const createCardLabelRelationship = async (
@@ -713,53 +606,9 @@ export const reorder = async (
       .having(gt(countExpr, 1));
 
     if (duplicateIndices.length > 0) {
-      // Auto-heal by compacting indices for the affected list(s)
-      const affectedListIds = [currentList.id, newList?.id].filter(
-        (id): id is number => id !== undefined,
+      throw new Error(
+        `Duplicate indices found after reordering card ${card.id}`,
       );
-
-      if (affectedListIds.length === 1) {
-        await tx.execute(sql`
-          WITH ordered AS (
-            SELECT id, ROW_NUMBER() OVER (ORDER BY "index", id) - 1 AS new_index
-            FROM "card"
-            WHERE "listId" = ${affectedListIds[0]} AND "deletedAt" IS NULL
-          )
-          UPDATE "card" c
-          SET "index" = o.new_index
-          FROM ordered o
-          WHERE c.id = o.id;
-        `);
-      } else if (affectedListIds.length === 2) {
-        await tx.execute(sql`
-          WITH ordered AS (
-            SELECT id,
-                   ROW_NUMBER() OVER (PARTITION BY "listId" ORDER BY "index", id) - 1 AS new_index
-            FROM "card"
-            WHERE "listId" IN (${sql.join(affectedListIds, sql`,`)}) AND "deletedAt" IS NULL
-          )
-          UPDATE "card" c
-          SET "index" = o.new_index
-          FROM ordered o
-          WHERE c.id = o.id;
-        `);
-      }
-
-      // Verify fix and rollback if necessary
-      const postFixDupes = await tx
-        .select({ index: cards.index, count: countExpr })
-        .from(cards)
-        .where(
-          and(inArray(cards.listId, affectedListIds), isNull(cards.deletedAt)),
-        )
-        .groupBy(cards.listId, cards.index)
-        .having(gt(countExpr, 1));
-
-      if (postFixDupes.length > 0) {
-        throw new Error(
-          `Invariant violation: duplicate card indices remain after compaction for card ${card.id}`,
-        );
-      }
     }
 
     const updatedCard = await tx.query.cards.findFirst({

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

@@ -1,71 +0,0 @@
-import { and, eq, gt } from "drizzle-orm";
-
-import type { dbClient } from "@kan/db/client";
-import { workspaceInviteLinks } from "@kan/db/schema";
-import { generateUID } from "@kan/shared/utils";
-
-export const createInviteLink = async (
-  db: dbClient,
-  args: {
-    workspaceId: number;
-    code: string;
-    expiresAt: Date | null;
-    createdBy: string;
-  },
-) => {
-  const [result] = await db
-    .insert(workspaceInviteLinks)
-    .values({
-      publicId: generateUID(),
-      workspaceId: args.workspaceId,
-      code: args.code,
-      expiresAt: args.expiresAt ?? null,
-      status: "active",
-      createdBy: args.createdBy,
-    })
-    .returning({
-      publicId: workspaceInviteLinks.publicId,
-      code: workspaceInviteLinks.code,
-      status: workspaceInviteLinks.status,
-      expiresAt: workspaceInviteLinks.expiresAt,
-    });
-  return result;
-};
-
-export const deactivateAllActiveForWorkspace = async (
-  db: dbClient,
-  args: { workspaceId: number; updatedBy: string },
-) => {
-  await db
-    .update(workspaceInviteLinks)
-    .set({
-      status: "inactive",
-      updatedBy: args.updatedBy,
-      updatedAt: new Date(),
-    })
-    .where(
-      and(
-        eq(workspaceInviteLinks.workspaceId, args.workspaceId),
-        eq(workspaceInviteLinks.status, "active"),
-      ),
-    );
-};
-
-export const getActiveForWorkspace = async (
-  db: dbClient,
-  workspaceId: number,
-) => {
-  return db.query.workspaceInviteLinks.findFirst({
-    where: and(
-      eq(workspaceInviteLinks.workspaceId, workspaceId),
-      eq(workspaceInviteLinks.status, "active"),
-    ),
-    orderBy: (links, { desc }) => [desc(links.createdAt)],
-  });
-};
-
-export const getByCode = async (db: dbClient, code: string) => {
-  return db.query.workspaceInviteLinks.findFirst({
-    where: eq(workspaceInviteLinks.code, code),
-  });
-};

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

@@ -59,32 +59,9 @@ export const create = async (
       .having(gt(countExpr, 1));
 
     if (duplicateIndices.length > 0) {
-      // 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}`,
-        );
-      }
+      throw new Error(
+        `Duplicate indices found after reordering in board ${result.boardId}`,
+      );
     }
 
     return result;
@@ -102,98 +79,7 @@ export const bulkCreate = async (
     importId?: number;
   }[],
 ) => {
-  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;
-  });
+  return db.insert(lists).values(listInput).returning();
 };
 
 export const getByPublicId = async (db: dbClient, listPublicId: string) => {
@@ -294,32 +180,9 @@ export const reorder = async (
       .having(gt(countExpr, 1));
 
     if (duplicateIndices.length > 0) {
-      // 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}`,
-        );
-      }
+      throw new Error(
+        `Duplicate indices found after reordering in board ${list.boardId}`,
+      );
     }
 
     const updatedList = await tx.query.lists.findFirst({

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

@@ -95,15 +95,3 @@ 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/workspace.repo.ts

@@ -87,25 +87,11 @@ export const getByPublicId = (db: dbClient, workspacePublicId: string) => {
       publicId: true,
       name: true,
       plan: true,
-      slug: true,
     },
     where: eq(workspaces.publicId, workspacePublicId),
   });
 };
 
-export const getById = (db: dbClient, workspaceId: number) => {
-  return db.query.workspaces.findFirst({
-    columns: {
-      id: true,
-      publicId: true,
-      name: true,
-      plan: true,
-      slug: true,
-    },
-    where: eq(workspaces.id, workspaceId),
-  });
-};
-
 export const getByPublicIdWithMembers = (
   db: dbClient,
   workspacePublicId: string,

packages/db/src/schema/index.ts

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

packages/db/src/schema/workspaceInviteLinks.ts

@@ -1,38 +0,0 @@
-import {
-  bigint,
-  bigserial,
-  pgEnum,
-  pgTable,
-  timestamp,
-  uuid,
-  varchar,
-} from "drizzle-orm/pg-core";
-
-import { users } from "./users";
-import { workspaces } from "./workspaces";
-
-export const inviteLinkStatuses = ["active", "inactive"] as const;
-export type InviteLinkStatus = (typeof inviteLinkStatuses)[number];
-export const inviteLinkStatusEnum = pgEnum(
-  "invite_link_status",
-  inviteLinkStatuses,
-);
-
-export const workspaceInviteLinks = pgTable("workspace_invite_links", {
-  id: bigserial("id", { mode: "number" }).primaryKey(),
-  publicId: varchar("publicId", { length: 12 }).notNull().unique(),
-  workspaceId: bigint("workspaceId", { mode: "number" })
-    .notNull()
-    .references(() => workspaces.id, { onDelete: "cascade" }),
-  code: varchar("code", { length: 12 }).notNull().unique(),
-  status: inviteLinkStatusEnum("status").notNull().default("active"),
-  expiresAt: timestamp("expiresAt"),
-  createdAt: timestamp("createdAt").defaultNow().notNull(),
-  createdBy: uuid("createdBy").references(() => users.id, {
-    onDelete: "set null",
-  }),
-  updatedAt: timestamp("updatedAt"),
-  updatedBy: uuid("updatedBy").references(() => users.id, {
-    onDelete: "set null",
-  }),
-}).enableRLS();

packages/db/src/schema/workspaces.ts

@@ -19,12 +19,7 @@ export const memberRoles = ["admin", "member", "guest"] as const;
 export type MemberRole = (typeof memberRoles)[number];
 export const memberRoleEnum = pgEnum("role", memberRoles);
 
-export const memberStatuses = [
-  "invited",
-  "active",
-  "removed",
-  "paused",
-] as const;
+export const memberStatuses = ["invited", "active", "removed"] as const;
 export type MemberStatus = (typeof memberStatuses)[number];
 export const memberStatusEnum = pgEnum("member_status", memberStatuses);
 

pnpm-lock.yaml

@@ -205,9 +205,6 @@ importers:
       react-icons:
         specifier: ^5.5.0
         version: 5.5.0(react@18.3.1)
-      react-image-crop:
-        specifier: ^11.0.10
-        version: 11.0.10(react@18.3.1)
       react-lottie-player:
         specifier: ^1.5.5
         version: 1.5.6(react@18.3.1)
@@ -6119,11 +6116,6 @@ packages:
     peerDependencies:
       react: '*'
 
-  react-image-crop@11.0.10:
-    resolution: {integrity: sha512-+5FfDXUgYLLqBh1Y/uQhIycpHCbXkI50a+nbfkB1C0xXXUTwkisHDo2QCB1SQJyHCqIuia4FeyReqXuMDKWQTQ==}
-    peerDependencies:
-      react: '>=16.13.1'
-
   react-is@16.13.1:
     resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
 
@@ -13704,10 +13696,6 @@ snapshots:
     dependencies:
       react: 18.3.1
 
-  react-image-crop@11.0.10(react@18.3.1):
-    dependencies:
-      react: 18.3.1
-
   react-is@16.13.1: {}
 
   react-is@17.0.2: {}

turbo.json

@@ -89,7 +89,6 @@
     "APPLE_CLIENT_ID",
     "APPLE_CLIENT_SECRET",
     "APPLE_APP_BUNDLE_IDENTIFIER",
-    "NEXT_PUBLIC_DISABLE_EMAIL",
     "EMAIL_FROM",
     "SMTP_HOST",
     "SMTP_PORT",