chore: update translations

* fix: update page titles to show board name

* chore: update translations

* chore: update translations

.dockerignore

@@ -0,0 +1,18 @@
+.env
+
+docker-compose.override.yml
+
+Dockerfile
+./**/*/Dockerfile
+
+.dockerignore
+
+node_modules
+./**/*/node_modules
+
+pnpm-debug.log
+./**/*/pnpm-debug.log
+
+README.md
+.next
+.git

.env.example

@@ -1,26 +1,81 @@
-# Since the ".env" file is gitignored, you can use the ".env.example" file to
-# build a new ".env" file when you clone the repo. Keep this file up-to-date
-# when you add new variables to `.env`.
+# https://github.com/kanbn/kan?tab=readme-ov-file#environment-variables-)
 
-# This file will be committed to version control, so make sure not to have any
-# secrets in it. If you are cloning this repo, create a copy of this file named
-# ".env" and populate it with your secrets.
+# 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)
 
-# When adding additional environment variables, the schema in "/src/env.mjs"
-# should be updated accordingly.
+# Fill if you want to use an external database
+POSTGRES_URL= # e.g. postgresql://kan:your_password@your_host:5432/kan
 
-# Drizzle
-# Get the Database URL from the "prisma" dropdown selector in PlanetScale. 
-# Change the query params at the end of the URL to "?ssl={"rejectUnauthorized":true}"
-DATABASE_URL='mysql://YOUR_MYSQL_URL_HERE?ssl={"rejectUnauthorized":true}'
+# Only required if deploying from compose
+POSTGRES_PASSWORD=
 
-# Next Auth
-# You can generate a new secret on the command line with:
-# openssl rand -base64 32
-# https://next-auth.js.org/configuration/options#secret
-# NEXTAUTH_SECRET=""
-NEXTAUTH_URL="http://localhost:3000"
+# SMTP (optional)
+SMTP_HOST=
+SMTP_PORT=465
+SMTP_USER=
+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=
+S3_ACCESS_KEY_ID=
+S3_SECRET_ACCESS_KEY=
+S3_FORCE_PATH_STYLE=
+NEXT_PUBLIC_STORAGE_URL=
+NEXT_PUBLIC_AVATAR_BUCKET_NAME=
+NEXT_PUBLIC_STORAGE_DOMAIN=
+
+# Auth config (optional)
+NEXT_PUBLIC_ALLOW_CREDENTIALS=
+NEXT_PUBLIC_DISABLE_SIGN_UP=
+
+# Integration providers (optional)
+TRELLO_APP_API_KEY=
+TRELLO_APP_SECRET=
+
+# OAuth providers (optional)
+BETTER_AUTH_TRUSTED_ORIGINS=
+GOOGLE_CLIENT_ID=
+GOOGLE_CLIENT_SECRET=
+DISCORD_CLIENT_ID=
+DISCORD_CLIENT_SECRET=
+GITHUB_CLIENT_ID=
+GITHUB_CLIENT_SECRET=
+GITLAB_CLIENT_ID=
+GITLAB_CLIENT_SECRET=
+GITLAB_ISSUER=
+MICROSOFT_CLIENT_ID=
+MICROSOFT_CLIENT_SECRET=
+TWITTER_CLIENT_ID=
+TWITTER_CLIENT_SECRET=
+KICK_CLIENT_ID=
+KICK_CLIENT_SECRET=
+ZOOM_CLIENT_ID=
+ZOOM_CLIENT_SECRET=
+DROPBOX_CLIENT_ID=
+DROPBOX_CLIENT_SECRET=
+VK_CLIENT_ID=
+VK_CLIENT_SECRET=
+LINKEDIN_CLIENT_ID=
+LINKEDIN_CLIENT_SECRET=
+REDDIT_CLIENT_ID=
+REDDIT_CLIENT_SECRET=
+ROBLOX_CLIENT_ID=
+ROBLOX_CLIENT_SECRET=
+SPOTIFY_CLIENT_ID=
+SPOTIFY_CLIENT_SECRET=
+TIKTOK_CLIENT_ID=
+TIKTOK_CLIENT_SECRET=
+TIKTOK_CLIENT_KEY=
+TWITCH_CLIENT_ID=
+TWITCH_CLIENT_SECRET=
+APPLE_CLIENT_ID=
+APPLE_CLIENT_SECRET=
+APPLE_APP_BUNDLE_IDENTIFIER=
 
-# Next Auth Discord Provider
-DISCORD_CLIENT_ID=""
-DISCORD_CLIENT_SECRET=""

.eslintrc.cjs

@@ -1,36 +0,0 @@
-/** @type {import("eslint").Linter.Config} */
-const config = {
-  parser: "@typescript-eslint/parser",
-  parserOptions: {
-    project: true,
-  },
-  plugins: ["@typescript-eslint"],
-  extends: [
-    "next/core-web-vitals",
-    "plugin:@typescript-eslint/recommended-type-checked",
-    "plugin:@typescript-eslint/stylistic-type-checked",
-  ],
-  rules: {
-    // These opinionated rules are enabled in stylistic-type-checked above.
-    // Feel free to reconfigure them to your own preference.
-    "@typescript-eslint/array-type": "off",
-    "@typescript-eslint/consistent-type-definitions": "off",
-
-    "@typescript-eslint/consistent-type-imports": [
-      "warn",
-      {
-        prefer: "type-imports",
-        fixStyle: "inline-type-imports",
-      },
-    ],
-    "@typescript-eslint/no-unused-vars": ["warn", { argsIgnorePattern: "^_" }],
-    "@typescript-eslint/no-misused-promises": [
-      2,
-      {
-        checksVoidReturn: { attributes: false },
-      },
-    ],
-  },
-};
-
-module.exports = config;

.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,37 @@
+---
+name: "\U0001F41B Bug Report"
+about: Create a report to help us improve
+title: ''
+labels: bug
+assignees: ''
+
+---
+
+## 🐛 Bug Report
+
+**Describe the bug**
+A clear and concise description of what the bug is.
+
+**To Reproduce**
+Steps to reproduce the behavior:
+
+1. Go to '...'
+2. Click on '...'
+3. Scroll down to '...'
+4. See error
+
+**Expected behavior**
+A clear and concise description of what you expected to happen.
+
+**Screenshots**
+If applicable, add screenshots to help explain your problem.
+
+**Environment (please complete the following information):**
+
+- OS: [e.g. macOS, Windows, Linux]
+- Browser [e.g. chrome, safari]
+- Node version [e.g. 20]
+- App version/commit [if applicable]
+
+**Additional context**
+Add any other context about the problem here.

.github/ISSUE_TEMPLATE/feature_request.md

@@ -0,0 +1,30 @@
+---
+name: "✨ Feature Request"
+about: Suggest an idea for this project
+title: ''
+labels: feature
+assignees: ''
+
+---
+
+## ✨ Feature Request
+
+**Is your feature request related to a problem? Please describe.**
+A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
+
+**Describe the solution you'd like**
+A clear and concise description of what you want to happen.
+
+**Describe alternatives you've considered**
+A clear and concise description of any alternative solutions or features you've considered.
+
+**Additional context**
+Add any other context or screenshots about the feature request here.
+
+**Implementation ideas (optional)**
+If you have any ideas about how this feature could be implemented, please share them here.
+
+**Would you like to work on this feature?**
+
+- [ ] Yes, I'd like to help implement this feature
+- [ ] No, I'm just suggesting the feature

.github/funding.yml

@@ -0,0 +1 @@
+github: [kanbn]

.github/workflows/docker-publish.yml

@@ -0,0 +1,105 @@
+name: Docker
+
+# This workflow uses actions that are not certified by GitHub.
+# They are provided by a third-party and are governed by
+# separate terms of service, privacy policy, and support
+# documentation.
+
+on:
+  schedule:
+    - cron: "21 21 * * *"
+  push:
+    branches: ["main"]
+    # Publish semver tags as releases.
+    tags: ["v*.*.*"]
+  pull_request:
+    branches: ["main"]
+
+env:
+  # Use docker.io for Docker Hub if empty
+  REGISTRY: ghcr.io
+  # github.repository as <account>/<repo>
+  IMAGE_NAME: ${{ github.repository }}
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      packages: write
+      # This is used to complete the identity challenge
+      # with sigstore/fulcio when running outside of PRs.
+      id-token: write
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      # Install the cosign tool except on PR
+      # https://github.com/sigstore/cosign-installer
+      - name: Install cosign
+        if: github.event_name != 'pull_request'
+        uses: sigstore/cosign-installer@59acb6260d9c0ba8f4a2f9d9b48431a222b68e20 #v3.5.0
+        with:
+          cosign-release: "v2.2.4"
+
+      # Set up BuildKit Docker container builder to be able to build
+      # multi-platform images and export cache
+      # https://github.com/docker/setup-buildx-action
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@f95db51fddba0c2d1ec667646a06c2ce06100226 # v3.0.0
+
+      # Login against a Docker registry except on PR
+      # https://github.com/docker/login-action
+      - name: Log into registry ${{ env.REGISTRY }}
+        if: github.event_name != 'pull_request'
+        uses: docker/login-action@343f7c4344506bcbf9b4de18042ae17996df046d # v3.0.0
+        with:
+          registry: ${{ env.REGISTRY }}
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+
+      # Extract metadata (tags, labels) for Docker
+      # https://github.com/docker/metadata-action
+      - name: Extract Docker metadata
+        id: meta
+        uses: docker/metadata-action@96383f45573cb7f253c731d3b3ab81c87ef81934 # v5.0.0
+        with:
+          images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}
+          tags: |
+            type=ref,event=branch
+            type=ref,event=pr
+            type=semver,pattern={{version}}
+            type=semver,pattern={{major}}.{{minor}}
+            type=semver,pattern={{major}}
+            type=raw,value=latest,enable={{is_default_branch}}
+
+      # Build and push Docker image with Buildx (don't push on PR)
+      # https://github.com/docker/build-push-action
+      - name: Build and push Docker image
+        id: build-and-push
+        uses: docker/build-push-action@0565240e2d4ab88bba5387d719585280857ece09 # v5.0.0
+        with:
+          context: .
+          file: apps/web/Dockerfile
+          push: ${{ github.event_name != 'pull_request' }}
+          platforms: linux/amd64,linux/arm64
+          tags: ${{ steps.meta.outputs.tags }}
+          labels: ${{ steps.meta.outputs.labels }}
+          cache-from: type=gha
+          cache-to: type=gha,mode=max
+
+      # Sign the resulting Docker image digest except on PRs.
+      # This will only write to the public Rekor transparency log when the Docker
+      # repository is public to avoid leaking data.  If you would like to publish
+      # transparency data even for private images, pass --force to cosign below.
+      # https://github.com/sigstore/cosign
+      - name: Sign the published Docker image
+        if: ${{ github.event_name != 'pull_request' }}
+        env:
+          # https://docs.github.com/en/actions/security-guides/security-hardening-for-github-actions#using-an-intermediate-environment-variable
+          TAGS: ${{ steps.meta.outputs.tags }}
+          DIGEST: ${{ steps.build-and-push.outputs.digest }}
+        # This step uses the identity token to provision an ephemeral certificate
+        # against the sigstore community Fulcio instance.
+        run: echo "${TAGS}" | xargs -I {} cosign sign --yes {}@${DIGEST}

.gitignore

@@ -1,24 +1,24 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
 # dependencies
-**/node_modules/
-/.pnp
+node_modules
+.pnp
 .pnp.js
 
 # testing
-/coverage
-
-# database
-/prisma/db.sqlite
-/prisma/db.sqlite-journal
+coverage
 
 # next.js
-/.next/
-/out/
+.next/
+out/
 next-env.d.ts
 
+# nitro
+.nitro/
+.output/
+
 # production
-/build
+build
 
 # misc
 .DS_Store
@@ -31,7 +31,6 @@ yarn-error.log*
 .pnpm-debug.log*
 
 # local env files
-# do not commit any .env files to git, except for the .env.example file. https://create.t3.gg/en/usage/env-variables#using-environment-variables
 .env
 .env*.local
 
@@ -39,4 +38,18 @@ yarn-error.log*
 .vercel
 
 # typescript
-*.tsbuildinfo
+dist/
+.cache
+
+# turbo
+.turbo
+
+# docker
+docker-compose.override.yml
+
+# runtime env
+__ENV.js
+i18n.cache
+
+# pgdata
+/apps/web/pgdata

.npmrc

@@ -0,0 +1,4 @@
+node-linker=hoisted
+link-workspace-packages=true
+shamefully-hoist=true
+hoist=true

.nvmrc

@@ -0,0 +1 @@
+20.18

.vscode/extensions.json

@@ -0,0 +1,8 @@
+{
+  "recommendations": [
+    "dbaeumer.vscode-eslint",
+    "esbenp.prettier-vscode",
+    "yoavbls.pretty-ts-errors",
+    "bradlc.vscode-tailwindcss"
+  ]
+}

.vscode/launch.json

@@ -0,0 +1,17 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "Next.js",
+      "type": "node-terminal",
+      "request": "launch",
+      "command": "pnpm dev",
+      "cwd": "${workspaceFolder}/apps/web",
+      "skipFiles": ["<node_internals>/**"],
+      "sourceMaps": true,
+      "sourceMapPathOverrides": {
+        "/turbopack/[project]/*": "${webRoot}/*"
+      }
+    }
+  ]
+}

.vscode/settings.json

@@ -1,3 +1,29 @@
 {
-  "spellright.addToSystemDictionary": true
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": "explicit"
+  },
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "[typescript,typescriptreact]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "editor.formatOnSave": true,
+  "eslint.rules.customizations": [{ "rule": "*", "severity": "warn" }],
+  "eslint.runtime": "node",
+  "eslint.workingDirectories": [
+    { "pattern": "apps/*/" },
+    { "pattern": "packages/*/" },
+    { "pattern": "tooling/*/" }
+  ],
+  "prettier.ignorePath": ".gitignore",
+  "tailwindCSS.experimental.classRegex": [
+    ["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"],
+    ["cx\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"]
+  ],
+  "tailwindCSS.experimental.configFile": "./tooling/tailwind/web.ts",
+  "typescript.enablePromptUseWorkspaceTsdk": true,
+  "typescript.preferences.autoImportFileExcludePatterns": [
+    "next/router.d.ts",
+    "next/dist/client/router.d.ts"
+  ],
+  "typescript.tsdk": "node_modules/typescript/lib"
 }

CHANGELOG.md

@@ -0,0 +1,121 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [Unreleased](https://github.com/kanbn/kan/compare/v0.2.4...HEAD)
+
+## [0.2.4](https://github.com/kanbn/kan/compare/v0.2.3...v0.2.4) - 2025-01-14
+
+### Added
+
+- Button to view and update board public URL directly from board page
+- Redirect from root to login page for self-hosted instances
+
+### Changed
+
+- Updated all label router endpoints to return consistent structure
+- Added verbose error logging to magic link invitation process
+
+### Fixed
+
+- Updated tRPC dependencies and added OpenAPI meta to providers endpoint
+
+## [0.2.3](https://github.com/kanbn/kan/compare/v0.2.2...v0.2.3) - 2025-07-07
+
+### Added
+
+- Mobile support with responsive navigation and layout
+- Template selection when creating new boards with predefined lists and labels
+- S3_FORCE_PATH_STYLE configuration for MinIO compatibility
+
+### Changed
+
+- Improved mobile UI styling and layout containers
+- Enhanced iOS mobile support with viewport fixes and zoom prevention
+- Improved card view layout for mobile devices
+
+### Fixed
+
+- Mobile dashboard min-width issues
+- Dynamic viewport height on mobile devices
+- Scroll functionality on card pages
+
+## [0.2.2](https://github.com/kanbn/kan/compare/v0.2.1...v0.2.2) - 2025-06-28
+
+### Added
+
+- Localization and multi-language support
+- URLs are now rendered as clickable links in card descriptions
+
+### Changed
+
+- Improved email configuration with optional SMTP authentication
+
+## [0.2.1](https://github.com/kanbn/kan/compare/v0.2.0...v0.2.1) - 2025-06-19
+
+### Added
+
+- PostHog analytics integration
+- Debug logging for email functionality
+- Standalone mode support for Next.js
+- Environment variable for configuring web port
+- Docker Compose setup with PostgreSQL
+
+### Changed
+
+- SMTP authentication is now optional
+- Added `SMTP_SECURE` configuration option
+- Improved Docker build process with better context handling
+
+### Fixed
+
+- Default output mode for Next.js builds
+- Container environment variable configuration
+- Docker Compose volume naming
+- Build context and static file copying in Docker
+- Comment rendering inside contenteditable elements
+
+## [0.2.0](https://github.com/kanbn/kan/compare/v0.1.0...v0.2.0) - 2025-06-10
+
+### Added
+
+- Trello integration with OAuth authentication and user field mapping
+- Board visibility controls with dropdown menu and success notifications
+- Markdown editor for card descriptions
+- Email/password authentication for self-hosters
+- Account deletion functionality with cascade delete for workspaces
+- Enhanced scrollbar styles for dark mode
+
+### Changed
+
+- Simplified auth configuration to use `NEXT_PUBLIC_BASE_URL` instead of `BETTER_AUTH_URL`
+- Updated self-hosting documentation
+- Improved database schema with relation names
+
+### Fixed
+
+- List buttons stacking issue
+- Editor onChange prop is now optional
+- Renamed markdown prop to content in Editor component
+- Router navigation for disabled signup redirects
+
+## [0.1.0](https://github.com/kanbn/kan/releases/tag/v0.1.0) - 2025-06-02
+
+### Added
+
+- Initial release of Kan
+- Core project management features
+- Board, list, and card management
+- User authentication system
+- Workspace collaboration
+- Comment system
+- Activity logging
+- Docker deployment support
+- Self-hosting capabilities
+
+### Changed
+
+- Updated license link in footer

CONTRIBUTING.md

@@ -0,0 +1,52 @@
+# Contributing to Kan
+
+Thank you for your interest in contributing to Kan! This document provides guidelines and instructions for contributing to the project.
+
+## Getting Started
+
+1. Fork the repository
+2. Clone your fork: `git clone https://github.com/YOUR-USERNAME/kan.git`
+3. Create a new branch: `git checkout -b feat/your-feature-name`
+4. Install dependencies: `pnpm install`
+5. Copy `.env.example` to `.env` and configure your environment variables
+6. Make your changes
+7. Commit your changes: `git commit -m "feat: description of changes"`
+8. Push to your fork: `git push origin feat/your-feature-name`
+9. Open a Pull Request
+
+## Development Guidelines
+
+### Code Style
+
+- Follow the existing code style
+- Use meaningful variable and function names
+- Add comments for complex logic
+- Keep functions focused and concise
+
+### Commits
+
+- Use clear and descriptive commit messages
+- Reference issue numbers when applicable
+- Keep commits focused on single changes
+
+### Pull Requests
+
+- Provide a clear description of the changes
+- Include screenshots for UI changes
+- Keep PRs focused on a single feature/fix
+
+## Need Help?
+
+- Join our [Discord server](https://discord.gg/e6ejRb6CmT) for questions
+- Check existing issues and pull requests
+- Email [henry@kan.bn](mailto:henry@kan.bn) for major concerns
+
+## Code of Conduct
+
+Please note that this project is released with a Contributor Code of Conduct. By participating in this project you agree to abide by its terms.
+
+We aim to foster an inclusive and welcoming community. Harassment and abusive behavior will not be tolerated.
+
+## License
+
+By contributing to Kan, you agree that your contributions will be licensed under the AGPLv3 License.

LICENSE

@@ -1,5 +1,5 @@
-                    GNU GENERAL PUBLIC LICENSE
-                       Version 3, 29 June 2007
+                    GNU AFFERO GENERAL PUBLIC LICENSE
+                       Version 3, 19 November 2007
 
  Copyright (C) 2007 Free Software Foundation, Inc. <https://fsf.org/>
  Everyone is permitted to copy and distribute verbatim copies
@@ -7,17 +7,15 @@
 
                             Preamble
 
-  The GNU General Public License is a free, copyleft license for
-software and other kinds of works.
+  The GNU Affero General Public License is a free, copyleft license for
+software and other kinds of works, specifically designed to ensure
+cooperation with the community in the case of network server software.
 
   The licenses for most software and other practical works are designed
 to take away your freedom to share and change the works.  By contrast,
-the GNU General Public License is intended to guarantee your freedom to
+our General Public Licenses are intended to guarantee your freedom to
 share and change all versions of a program--to make sure it remains free
-software for all its users.  We, the Free Software Foundation, use the
-GNU General Public License for most of our software; it applies also to
-any other work released this way by its authors.  You can apply it to
-your programs, too.
+software for all its users.
 
   When we speak of free software, we are referring to freedom, not
 price.  Our General Public Licenses are designed to make sure that you
@@ -26,44 +24,34 @@ them if you wish), that you receive source code or can get it if you
 want it, that you can change the software or use pieces of it in new
 free programs, and that you know you can do these things.
 
-  To protect your rights, we need to prevent others from denying you
-these rights or asking you to surrender the rights.  Therefore, you have
-certain responsibilities if you distribute copies of the software, or if
-you modify it: responsibilities to respect the freedom of others.
+  Developers that use our General Public Licenses protect your rights
+with two steps: (1) assert copyright on the software, and (2) offer
+you this License which gives you legal permission to copy, distribute
+and/or modify the software.
 
-  For example, if you distribute copies of such a program, whether
-gratis or for a fee, you must pass on to the recipients the same
-freedoms that you received.  You must make sure that they, too, receive
-or can get the source code.  And you must show them these terms so they
-know their rights.
+  A secondary benefit of defending all users' freedom is that
+improvements made in alternate versions of the program, if they
+receive widespread use, become available for other developers to
+incorporate.  Many developers of free software are heartened and
+encouraged by the resulting cooperation.  However, in the case of
+software used on network servers, this result may fail to come about.
+The GNU General Public License permits making a modified version and
+letting the public access it on a server without ever releasing its
+source code to the public.
 
-  Developers that use the GNU GPL protect your rights with two steps:
-(1) assert copyright on the software, and (2) offer you this License
-giving you legal permission to copy, distribute and/or modify it.
+  The GNU Affero General Public License is designed specifically to
+ensure that, in such cases, the modified source code becomes available
+to the community.  It requires the operator of a network server to
+provide the source code of the modified version running there to the
+users of that server.  Therefore, public use of a modified version, on
+a publicly accessible server, gives the public access to the source
+code of the modified version.
 
-  For the developers' and authors' protection, the GPL clearly explains
-that there is no warranty for this free software.  For both users' and
-authors' sake, the GPL requires that modified versions be marked as
-changed, so that their problems will not be attributed erroneously to
-authors of previous versions.
-
-  Some devices are designed to deny users access to install or run
-modified versions of the software inside them, although the manufacturer
-can do so.  This is fundamentally incompatible with the aim of
-protecting users' freedom to change the software.  The systematic
-pattern of such abuse occurs in the area of products for individuals to
-use, which is precisely where it is most unacceptable.  Therefore, we
-have designed this version of the GPL to prohibit the practice for those
-products.  If such problems arise substantially in other domains, we
-stand ready to extend this provision to those domains in future versions
-of the GPL, as needed to protect the freedom of users.
-
-  Finally, every program is threatened constantly by software patents.
-States should not allow patents to restrict development and use of
-software on general-purpose computers, but in those that do, we wish to
-avoid the special danger that patents applied to a free program could
-make it effectively proprietary.  To prevent this, the GPL assures that
-patents cannot be used to render the program non-free.
+  An older license, called the Affero General Public License and
+published by Affero, was designed to accomplish similar goals.  This is
+a different license, not a version of the Affero GPL, but Affero has
+released a new version of the Affero GPL which permits relicensing under
+this license.
 
   The precise terms and conditions for copying, distribution and
 modification follow.
@@ -72,7 +60,7 @@ modification follow.
 
   0. Definitions.
 
-  "This License" refers to version 3 of the GNU General Public License.
+  "This License" refers to version 3 of the GNU Affero General Public License.
 
   "Copyright" also means copyright-like laws that apply to other kinds of
 works, such as semiconductor masks.
@@ -549,35 +537,45 @@ to collect a royalty for further conveying from those to whom you convey
 the Program, the only way you could satisfy both those terms and this
 License would be to refrain entirely from conveying the Program.
 
-  13. Use with the GNU Affero General Public License.
+  13. Remote Network Interaction; Use with the GNU General Public License.
+
+  Notwithstanding any other provision of this License, if you modify the
+Program, your modified version must prominently offer all users
+interacting with it remotely through a computer network (if your version
+supports such interaction) an opportunity to receive the Corresponding
+Source of your version by providing access to the Corresponding Source
+from a network server at no charge, through some standard or customary
+means of facilitating copying of software.  This Corresponding Source
+shall include the Corresponding Source for any work covered by version 3
+of the GNU General Public License that is incorporated pursuant to the
+following paragraph.
 
   Notwithstanding any other provision of this License, you have
 permission to link or combine any covered work with a work licensed
-under version 3 of the GNU Affero General Public License into a single
+under version 3 of the GNU General Public License into a single
 combined work, and to convey the resulting work.  The terms of this
 License will continue to apply to the part which is the covered work,
-but the special requirements of the GNU Affero General Public License,
-section 13, concerning interaction through a network will apply to the
-combination as such.
+but the work with which it is combined will remain governed by version
+3 of the GNU General Public License.
 
   14. Revised Versions of this License.
 
   The Free Software Foundation may publish revised and/or new versions of
-the GNU General Public License from time to time.  Such new versions will
-be similar in spirit to the present version, but may differ in detail to
+the GNU Affero General Public License from time to time.  Such new versions
+will be similar in spirit to the present version, but may differ in detail to
 address new problems or concerns.
 
   Each version is given a distinguishing version number.  If the
-Program specifies that a certain numbered version of the GNU General
+Program specifies that a certain numbered version of the GNU Affero General
 Public License "or any later version" applies to it, you have the
 option of following the terms and conditions either of that numbered
 version or of any later version published by the Free Software
 Foundation.  If the Program does not specify a version number of the
-GNU General Public License, you may choose any version ever published
+GNU Affero General Public License, you may choose any version ever published
 by the Free Software Foundation.
 
   If the Program specifies that a proxy can decide which future
-versions of the GNU General Public License can be used, that proxy's
+versions of the GNU Affero General Public License can be used, that proxy's
 public statement of acceptance of a version permanently authorizes you
 to choose that version for the Program.
 
@@ -635,40 +633,29 @@ the "copyright" line and a pointer to where the full notice is found.
     Copyright (C) <year>  <name of author>
 
     This program is free software: you can redistribute it and/or modify
-    it under the terms of the GNU General Public License as published by
-    the Free Software Foundation, either version 3 of the License, or
+    it under the terms of the GNU Affero General Public License as published
+    by the Free Software Foundation, either version 3 of the License, or
     (at your option) any later version.
 
     This program is distributed in the hope that it will be useful,
     but WITHOUT ANY WARRANTY; without even the implied warranty of
     MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-    GNU General Public License for more details.
+    GNU Affero General Public License for more details.
 
-    You should have received a copy of the GNU General Public License
+    You should have received a copy of the GNU Affero General Public License
     along with this program.  If not, see <https://www.gnu.org/licenses/>.
 
 Also add information on how to contact you by electronic and paper mail.
 
-  If the program does terminal interaction, make it output a short
-notice like this when it starts in an interactive mode:
-
-    <program>  Copyright (C) <year>  <name of author>
-    This program comes with ABSOLUTELY NO WARRANTY; for details type `show w'.
-    This is free software, and you are welcome to redistribute it
-    under certain conditions; type `show c' for details.
-
-The hypothetical commands `show w' and `show c' should show the appropriate
-parts of the General Public License.  Of course, your program's commands
-might be different; for a GUI interface, you would use an "about box".
+  If your software can interact with users remotely through a computer
+network, you should also make sure that it provides a way for users to
+get its source.  For example, if your program is a web application, its
+interface could display a "Source" link that leads users to an archive
+of the code.  There are many ways you could offer source, and different
+solutions will be better for different programs; see section 13 for the
+specific requirements.
 
   You should also get your employer (if you work as a programmer) or school,
 if any, to sign a "copyright disclaimer" for the program, if necessary.
-For more information on this, and how to apply and follow the GNU GPL, see
+For more information on this, and how to apply and follow the GNU AGPL, see
 <https://www.gnu.org/licenses/>.
-
-  The GNU General Public License does not permit incorporating your program
-into proprietary programs.  If your program is a subroutine library, you
-may consider it more useful to permit linking proprietary applications with
-the library.  If this is what you want to do, use the GNU Lesser General
-Public License instead of this License.  But first, please read
-<https://www.gnu.org/licenses/why-not-lgpl.html>.

README.md

@@ -1,3 +1,195 @@
-# Kan
+![github-background](https://github.com/user-attachments/assets/f728f52e-bf67-4357-9ba2-c24c437488e3)
 
-The open source Trello alternative.
+<div align="center">
+  <h3 align="center">Kan</h3>
+  <p>The open-source project management alternative to Trello.</p>
+</div>
+
+<p align="center">
+  <a href="https://kan.bn/kan/roadmap">Roadmap</a>
+  ·
+  <a href="https://kan.bn">Website</a>
+  ·
+  <a href="https://docs.kan.bn">Docs</a>
+  ·
+  <a href="https://discord.gg/e6ejRb6CmT">Discord</a>
+</p>
+
+<div align="center">
+  <a href="https://github.com/kanbn/kan/blob/main/LICENSE"><img alt="License" src="https://img.shields.io/badge/license-AGPLv3-purple"></a>
+</div>
+
+## Features 💫
+
+- 👁️ **Board Visibility**: Control who can view and edit your boards
+- 🤝 **Workspace Members**: Invite members and collaborate with your team
+- 🚀 **Trello Imports**: Easily import your Trello boards
+- 🔍 **Labels & Filters**: Organise and find cards quickly
+- 💬 **Comments**: Discuss and collaborate with your team
+- 📝 **Activity Log**: Track all card changes with detailed activity history
+- 🎨 **Templates** : Save time with reusable custom board templates
+- ⚡️ **Integrations (coming soon)** : Connect your favourite tools
+
+See our [roadmap](https://kan.bn/kan/roadmap) for upcoming features.
+
+## Screenshot 👁️
+
+<img width="1507" alt="hero-dark" src="https://github.com/user-attachments/assets/5f7b6ad3-f31d-4b45-93dc-0132b3f2afd4" />
+
+## Made With 🛠️
+
+- [Next.js](https://nextjs.org/?ref=kan.bn)
+- [tRPC](https://trpc.io/?ref=kan.bn)
+- [Better Auth](https://better-auth.com/?ref=kan.bn)
+- [Tailwind CSS](https://tailwindcss.com/?ref=kan.bn)
+- [Drizzle ORM](https://orm.drizzle.team/?ref=kan.bn)
+- [React Email](https://react.email/?ref=kan.bn)
+
+## Self Hosting 🐳
+
+The easiest way to self-host Kan is with Docker Compose. This will set up everything for you including your postgres database.
+
+1. Create a new file called `docker-compose.yml` and paste the following configuration:
+
+```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:
+```
+
+2. Start the containers in detached mode:
+
+```bash
+docker compose up -d
+```
+
+3. Access Kan at http://localhost:3000
+
+The application will be running in the background. You can manage the containers using these commands:
+
+- To stop the containers: `docker compose down`
+- To view logs: `docker compose logs -f`
+- To restart the containers: `docker compose restart`
+
+For the complete Docker Compose configuration, see [docker-compose.yml](./docker-compose.yml) in the repository.
+
+> **Note**: The Docker Compose configuration shown above is a minimal example. For a complete setup with all features (email, OAuth, file uploads, etc.), you'll need to create a `.env` file with the required environment variables. See the Environment Variables section below for the full list of available options.
+
+## Local Development 🧑‍💻
+
+1. Clone the repository (or fork)
+
+```bash
+git clone https://github.com/kanbn/kan.git
+```
+
+2. Install dependencies
+
+```bash
+pnpm install
+```
+
+3. Copy `.env.example` to `.env` and configure your environment variables
+4. Migrate database
+
+```bash
+pnpm db:migrate
+```
+
+5. Start the development server
+
+```bash
+pnpm dev
+```
+
+## Environment Variables 🔐
+
+| Variable                                  | Description                                              | Required                 | Example                                                     |
+| ----------------------------------------- | -------------------------------------------------------- | ------------------------ | ----------------------------------------------------------- |
+| `POSTGRES_URL`                            | PostgreSQL connection URL                                | To use external database | `postgres://user:pass@localhost:5432/db`                    |
+| `EMAIL_FROM`                              | Sender email address                                     | For Email                | `"Kan <hello@mail.kan.bn>"`                                 |
+| `SMTP_HOST`                               | SMTP server hostname                                     | For Email                | `smtp.resend.com`                                           |
+| `SMTP_PORT`                               | SMTP server port                                         | For Email                | `465`                                                       |
+| `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`               |
+| `GOOGLE_CLIENT_ID`                        | Google OAuth client ID                                   | For Google login         | `xxx.apps.googleusercontent.com`                            |
+| `GOOGLE_CLIENT_SECRET`                    | Google OAuth client secret                               | For Google login         | `xxx`                                                       |
+| `DISCORD_CLIENT_ID`                       | Discord OAuth client ID                                  | For Discord login        | `xxx`                                                       |
+| `DISCORD_CLIENT_SECRET`                   | Discord OAuth client secret                              | For Discord login        | `xxx`                                                       |
+| `GITHUB_CLIENT_ID`                        | GitHub OAuth client ID                                   | For GitHub login         | `xxx`                                                       |
+| `GITHUB_CLIENT_SECRET`                    | GitHub OAuth client secret                               | For GitHub login         | `xxx`                                                       |
+| `OIDC_CLIENT_ID`                          | Generic OIDC client ID                                   | For OIDC login           | `xxx`                                                       |
+| `OIDC_CLIENT_SECRET`                      | Generic OIDC client secret                               | For OIDC login           | `xxx`                                                       |
+| `OIDC_DISCOVERY_URL`                      | OIDC discovery URL                                       | For OIDC login           | `https://auth.example.com/.well-known/openid-configuration` |
+| `TRELLO_APP_API_KEY`                      | Trello app API key                                       | For Trello import        | `xxx`                                                       |
+| `TRELLO_APP_API_SECRET`                   | Trello app API secret                                    | For Trello import        | `xxx`                                                       |
+| `S3_REGION`                               | S3 storage region                                        | For file uploads         | `WEUR`                                                      |
+| `S3_ENDPOINT`                             | S3 endpoint URL                                          | For file uploads         | `https://xxx.r2.cloudflarestorage.com`                      |
+| `S3_ACCESS_KEY_ID`                        | S3 access key                                            | For file uploads         | `xxx`                                                       |
+| `S3_SECRET_ACCESS_KEY`                    | S3 secret key                                            | For file uploads         | `xxx`                                                       |
+| `S3_FORCE_PATH_STYLE`                     | Use path-style URLs for S3                               | For file uploads         | `true`                                                      |
+| `NEXT_PUBLIC_STORAGE_URL`                 | Storage service URL                                      | For file uploads         | `https://storage.kanbn.com`                                 |
+| `NEXT_PUBLIC_STORAGE_DOMAIN`              | Storage domain name                                      | For file uploads         | `kanbn.com`                                                 |
+| `NEXT_PUBLIC_AVATAR_BUCKET_NAME`          | S3 bucket name for avatars                               | For file uploads         | `avatars`                                                   |
+| `NEXT_PUBLIC_ALLOW_CREDENTIALS`           | Allow email & password login                             | For authentication       | `true`                                                      |
+| `NEXT_PUBLIC_DISABLE_SIGN_UP`             | Disable sign up                                          | For authentication       | `false`                                                     |
+| `NEXT_PUBLIC_WHITE_LABEL_HIDE_POWERED_BY` | Hide “Powered by kan.bn” on public boards (self-host)    | For white labelling      | `true`                                                      |
+
+See `.env.example` for a complete list of supported environment variables.
+
+## Contributing 🤝
+
+We welcome contributions! Please read our [contribution guidelines](CONTRIBUTING.md) before submitting a pull request.
+
+## Contributors 👥
+
+<a href="https://github.com/kanbn/kan/graphs/contributors">
+  <img src="https://contrib.rocks/image?repo=kanbn/kan" />
+</a>
+
+## License 📝
+
+Kan is licensed under the [AGPLv3 license](LICENSE).
+
+## Contact 📧
+
+For support or to get in touch, please email [henry@kan.bn](mailto:henry@kan.bn) or join our [Discord server](https://discord.gg/e6ejRb6CmT).

apps/docs/README.md

@@ -0,0 +1,34 @@
+# Mintlify Starter Kit
+
+Click on `Use this template` to copy the Mintlify starter kit. The starter kit contains examples including
+
+- Guide pages
+- Navigation
+- Customizations
+- API Reference pages
+- Use of popular components
+
+### Development
+
+Install the [Mintlify CLI](https://www.npmjs.com/package/mintlify) to preview the documentation changes locally. To install, use the following command
+
+```
+npm i -g mintlify
+```
+
+Run the following command at the root of your documentation (where mint.json is)
+
+```
+mintlify dev
+```
+
+### Publishing Changes
+
+Install our Github App to auto propagate changes from your repo to your deployment. Changes will be deployed to production automatically after pushing to the default branch. Find the link to install on your dashboard.
+
+#### Troubleshooting
+
+- Mintlify dev isn't running - Run `mintlify install` it'll re-install dependencies.
+- Page loads as a 404 - Make sure you are running in a folder with `mint.json`
+
+#BUMP

apps/docs/api-reference/introduction.mdx

@@ -0,0 +1,33 @@
+---
+title: "Introduction"
+description: "Learn how to integrate with Kan's REST API."
+---
+
+## Base URL
+
+```
+https://kan.bn/api/v1
+```
+
+## Authentication
+
+Most endpoints require authentication using your API key. You can create one in the [settings page](https://kan.bn/settings) of your account. Include this key in the `x-api-key` header of each request.
+
+```
+'x-api-key': kan_123456789
+```
+
+## Response codes
+
+Kan uses standard HTTP codes to indicate the success or failure of your requests.
+
+In general, `2xx` HTTP codes correspond to success, `4xx` codes are for user-related failures, and `5xx` codes are for infrastructure issues.
+
+| Status | Description                     |
+| ------ | ------------------------------- |
+| `200`  | Success                         |
+| `400`  | Invalid parameters              |
+| `401`  | Missing token                   |
+| `403`  | Invalid token                   |
+| `404`  | Resource not found              |
+| `500`  | Error with Kan's infrastructure |

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

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

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

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

apps/docs/imports/trello.mdx

@@ -0,0 +1,33 @@
+---
+title: Trello
+description: "Import your Trello boards to Kan."
+---
+
+## Authorizing Kan.bn for Trello
+
+Before you can import your Trello boards, you need to authorize Kan.bn for Trello. Follow these steps (only takes a couple of minutes):
+
+1. **Authorize Kan.bn for Trello**
+   Go to [https://kan.bn/settings](https://kan.bn/settings) and click **Connect Trello**.
+
+2. **Log in to your Trello account**
+   You will be redirected to Trello to log in to your Trello account.
+
+3. **Authorize Kan.bn for Trello**
+   Approve the permissions and you will be redirected back to Kan.bn.
+
+4. **Verify the connection**
+   You should see a **Disconnect Trello** button.
+
+## Importing your Trello boards
+
+Once you have authorized Kan.bn for Trello, importing your Trello boards is easy. Follow these steps:
+
+1. **Create a new import in Kan**  
+   Navigate to **[https://kan.bn/boards](https://kan.dev/boards)** and click **Import**.
+
+2. **Select Trello as the Import Source**  
+   Choose **Trello** from the list of import options and click **Select source**.
+
+3. **Start the Import**  
+   Select the board you want to import and click **Import boards**. Once the import is complete, you'll see your boards in Kan.

apps/docs/introduction.mdx

@@ -0,0 +1,36 @@
+---
+title: Introduction
+description: "Kan is the open source alternative to Trello."
+---
+
+<Frame>
+  <img
+    className="block rounded-lg border border-gray-200 dark:hidden"
+    src="/images/hero-light.png"
+    alt="Hero Light"
+  />
+  <img
+    className="hidden rounded-lg dark:block"
+    src="/images/hero-dark.png"
+    alt="Hero Dark"
+  />
+</Frame>
+
+## Getting Started
+
+Get started with Kan by choosing your preferred deployment option below.
+
+<CardGroup cols={2}>
+  <Card title="Cloud" icon="cloud" href="https://kan.bn/signup">
+    Get started instantly with our hosted solution - we'll handle all the
+    hosting, scaling, and maintenance for you.
+  </Card>
+  <Card
+    title="Self-host"
+    icon="code"
+    href="https://github.com/kanbn/kan?tab=readme-ov-file#self-hosting-"
+  >
+    For full data ownership and control, you can self-host Kan on your
+    infrastructure.
+  </Card>
+</CardGroup>

apps/docs/logo/dark.svg

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Generated by Pixelmator Pro 3.6.14 -->
+<svg width="2400" height="900" viewBox="0 0 2400 900" xmlns="http://www.w3.org/2000/svg">
+    <text id="kanbn" xml:space="preserve" x="239" y="681" font-family="Plus Jakarta Sans" font-size="598" font-weight="800" fill="#ededed" letter-spacing="-29.9">kan.bn</text>
+</svg>

apps/docs/logo/light.svg

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Generated by Pixelmator Pro 3.6.14 -->
+<svg width="2400" height="900" viewBox="0 0 2400 900" xmlns="http://www.w3.org/2000/svg">
+    <text id="kanbn" xml:space="preserve" x="239" y="681" font-family="Plus Jakarta Sans" font-size="598" font-weight="800" fill="#161616" letter-spacing="-29.9">kan.bn</text>
+</svg>

apps/docs/mint.json

@@ -0,0 +1,72 @@
+{
+  "$schema": "https://mintlify.com/schema.json",
+  "name": "kan.bn",
+  "logo": {
+    "dark": "/logo/dark.svg",
+    "light": "/logo/light.svg",
+    "href": "https://kan.bn"
+  },
+  "favicon": "./favicon.png",
+  "colors": {
+    "primary": "#000000",
+    "light": "#EDEDED",
+    "dark": "#161616",
+    "anchors": {
+      "from": "#000000",
+      "to": "#161616"
+    }
+  },
+  "topbarLinks": [
+    {
+      "name": "Sign in",
+      "url": "https://kan.bn/login"
+    }
+  ],
+  "topbarCtaButton": {
+    "name": "Go to app",
+    "url": "https://kan.bn/boards"
+  },
+  "anchors": [
+    {
+      "name": "API Reference",
+      "openapi": "https://kan.bn/api/v1/openapi.json",
+      "url": "api-reference",
+      "icon": "square-terminal"
+    },
+    {
+      "name": "GitHub",
+      "icon": "github",
+      "url": "https://github.com/kanbn"
+    }
+  ],
+  "navigation": [
+    {
+      "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"]
+    },
+    {
+      "group": "API Documentation",
+      "pages": ["api-reference/introduction"]
+    }
+  ],
+  "footerSocials": {
+    "discord": "https://discord.gg/e6ejRb6CmT",
+    "github": "https://github.com/kanbn"
+  }
+}

apps/docs/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "@kan/docs",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "pnpm with-env mint build",
+    "clean": "git clean -xdf .cache .turbo node_modules",
+    "dev": "pnpm with-env mintlify dev --port 3001",
+    "format": "prettier --check . --ignore-path ../../.gitignore",
+    "lint": "eslint",
+    "typecheck": "tsc --noEmit",
+    "with-env": "dotenv -e ../../.env --"
+  },
+  "dependencies": {
+    "mintlify": "^3.0.0"
+  },
+  "prettier": "@kan/prettier-config"
+}

apps/web/Dockerfile

@@ -0,0 +1,84 @@
+ARG NODE_VERSION=20
+ARG APP_DIRNAME=web
+ARG PROJECT=@kan/web
+
+# 1. Alpine image
+FROM node:${NODE_VERSION}-alpine AS alpine
+RUN apk update
+RUN apk add --no-cache libc6-compat python3 make g++
+
+# Setup pnpm and turbo on the alpine base
+FROM alpine AS base
+RUN corepack enable
+# Replace <your-major-version> with the major version installed in your repository. For example:
+# RUN npm install turbo@2.1.3 --global
+RUN npm install turbo@2.3.1 --global
+
+RUN pnpm config set store-dir ~/.pnpm-store
+
+# 2. Prune projects
+FROM base AS pruner
+# https://stackoverflow.com/questions/49681984/how-to-get-version-value-of-package-json-inside-of-dockerfile
+# RUN export VERSION=$(npm run version)
+
+ARG PROJECT
+
+# Set working directory
+WORKDIR /app
+
+# It might be the path to <ROOT> turborepo
+COPY . .
+ 
+# Generate a partial monorepo with a pruned lockfile for a target workspace.
+# Assuming "@acme/nextjs" is the name entered in the project's package.json: { name: "@acme/nextjs" }
+RUN turbo prune --scope=${PROJECT} --scope=@kan/db --docker
+ 
+# 3. Build the project
+FROM base AS builder
+ARG PROJECT
+
+# Environment to skip .env validation on build
+ENV CI=true
+
+WORKDIR /app
+
+# Copy lockfile and package.json's of isolated subworkspace
+COPY --from=pruner /app/out/pnpm-lock.yaml ./pnpm-lock.yaml
+COPY --from=pruner /app/out/pnpm-workspace.yaml ./pnpm-workspace.yaml
+COPY --from=pruner /app/out/json/ .
+
+# First install the dependencies (as they change less often)
+RUN --mount=type=cache,id=pnpm,target=~/.pnpm-store pnpm install --frozen-lockfile
+ 
+# Copy source code of isolated subworkspace
+COPY --from=pruner /app/out/full/ .
+
+
+RUN pnpm build --filter=${PROJECT}
+
+# # Copy static files to standalone directory
+# RUN mkdir -p apps/web/.next/standalone/.next && \
+# mv apps/web/public apps/web/.next/standalone/ && \
+# mv apps/web/.next/static apps/web/.next/standalone/.next/
+
+# 4. Final image - runner stage to run the application
+FROM base AS runner
+ARG APP_DIRNAME
+ 
+# Don't run production as root
+RUN addgroup --system --gid 1001 nodejs
+RUN adduser --system --uid 1001 nextjs
+USER nextjs
+
+WORKDIR /app
+
+ENV NODE_ENV=production
+
+COPY --chown=nextjs:nodejs --from=builder /app/ ./
+WORKDIR /app/apps/${APP_DIRNAME}
+
+ARG PORT=3000
+ENV PORT=${PORT}
+EXPOSE ${PORT}
+
+CMD ["sh", "-c", "if [ -n \"$POSTGRES_URL\" ]; then cd /app && pnpm db:migrate && cd /app/apps/web; fi && pnpm start"]

apps/web/entrypoint.sh

@@ -0,0 +1,23 @@
+#!/bin/sh
+
+# Run migrations from the Turborepo root context
+echo "Running database migrations..."
+# Navigate to the Turborepo root to run the db:migrate command
+pnpm --prefix /app db:migrate
+
+# Check if migration was successful
+if [ $? -ne 0 ]; then
+  echo "\nDatabase migration failed! Exiting."
+  exit 1
+fi
+
+echo "\nStarting Next.js application..."
+
+# Check if we should use standalone mode
+if [ "$NEXT_PUBLIC_USE_STANDALONE_OUTPUT" = "true" ]; then
+  echo "Starting in standalone mode..."
+  exec node .next/standalone/apps/web/server.js
+else
+  echo "Starting in standard mode..."
+  exec pnpm start
+fi

apps/web/eslint.config.js

@@ -0,0 +1,14 @@
+import baseConfig, { restrictEnvAccess } from "@kan/eslint-config/base";
+import nextjsConfig from "@kan/eslint-config/nextjs";
+import reactConfig from "@kan/eslint-config/react";
+
+/** @type {import('typescript-eslint').Config} */
+export default [
+  {
+    ignores: [".next/**"],
+  },
+  ...baseConfig,
+  ...reactConfig,
+  ...nextjsConfig,
+  ...restrictEnvAccess,
+];

apps/web/i18n.json

@@ -0,0 +1,13 @@
+{
+  "version": 0,
+  "locale": {
+    "source": "en",
+    "targets": ["fr", "de", "es", "it", "nl", "ru", "pl"]
+  },
+  "buckets": {
+    "po": {
+      "include": ["src/locales/[locale]/messages.po"]
+    }
+  },
+  "$schema": "https://lingo.dev/schema/i18n.json"
+}

apps/web/i18n.lock

@@ -0,0 +1,566 @@
+version: 1
+checksums:
+  8033ed03a24d7c4898c90a5365297c20:
+    "%20(edited)/singular": 666ee7e6d86957a87c23fa12b21b773f
+    "%2C%20or%20see%20our/singular": e8a8f2a078fcaea03481710dcaccce5d
+    "%7B0%7D/singular": 18782768c8a0b3c2078747b34fbbcd24
+    "%7B0%7D%20%7C%20%7B1%7D/singular": 4628f9c6ec13c2dc2984a6ab80e19f8b
+    "%7B0%7D%20labels/singular": 785f92bedf786ff3e285adfc07c69d18
+    "%7B0%7D%20not%20found/singular": a2665fc66f128fee1a80ffec61c9f1a1
+    "%7BboardCount%2C%20plural%2C%20one%20%7BImport%20board%20(1)%7D%20other%20%7BImport%20boards%20(%7BboardCount%7D)%7D%7D/singular": 72358c550bd1a99fcb6e8952f0f947ef
+    "%2410%2Fmonth/singular": cab5e752ed83096e34fca780d90e1fb9
+    "%248%2Fmonth/singular": 4667034934bb2bc3d569c70b94205b51
+    1%20user/singular: 3b547431ab12f0fba84307e6a81109d8
+    A%20powerful%2C%20flexible%20kanban%20app%20that%20helps%20you%20organise%20work%2C%20track%20progress%2C%20and%20deliver%20results%E2%80%94all%20in%20one%20place./singular: d405b83b0d631cb72f4347c10bcbb643
+    Account/singular: 01215c12fb1cdb93bd0c84c1382bef56
+    Account%20deleted/singular: a25da96a1579c4491be0a95669ef18a4
+    Activity/singular: 1948763de8e531483a798b68195e297e
+    Activity%20log/singular: 3ec6755040306fdc9ce801bcf6ab28e1
+    Activity%20logs/singular: 8b1f0bb96a905646ecfad1cfdfa42168
+    Add%20a%20card/singular: 9d80becc4fe65a74e0004e4fd290735d
+    Add%20a%20comment.../singular: c28cfccc0cc69a2a2487e37eb9988028
+    Add%20an%20item.../singular: f8e7993980420698700b07f56b3a38af
+    Add%20checklist/singular: 05d73200b56cfea75fb3a0f94c9bfb74
+    Add%20description...%20(type%20'%2F'%20to%20open%20commands%20or%20'%40'%20to%20mention)/singular: c6eb35a796dd7ac0e3dbc66244b71248
+    Add%20details.../singular: 2f42547fd5d199f173aa7a88c8a9b19a
+    Add%20label/singular: 0be732d46df263265935fda342097a08
+    Add%20member/singular: 11979625770516ca287e929381778e02
+    added%20a%20checklist/singular: 44304f4a5ef3a46378eea243b5d2df79
+    added%20a%20checklist%20item/singular: 20bc0330dba5a9ec978e04bec174365a
+    added%20a%20label%20to%20the%20card/singular: 04c5e4ee9b7b7e77ef089d2ac473d235
+    added%20a%20member%20to%20the%20card/singular: 95495e770062e2fd590333d56e6308d2
+    added%20checklist%20%3C0%3E%7B0%7D%3C%2F0%3E/singular: fb6a852c50c1629f47c6f155fc93fdee
+    added%20checklist%20item%20%3C0%3E%7B0%7D%3C%2F0%3E/singular: bdd202da20b1fffbec21792c5453f90c
+    added%20label%20%3C0%3E%7B0%7D%3C%2F0%3E/singular: b32be052b3d57de0c9120fa7f9fc86ee
+    Adding%20a%20new%20member%20will%20cost%20an%20additional%20%7Bprice%7D%20(%7BbillingType%7D)%20per%20seat./singular: 12e88573028306110fbc15ef1e714892
+    Adjust%20the%20square%20crop%20to%20fit%20your%20avatar./singular: a4df26bbce6f14c6962fac1324db00a8
+    Admin%20roles/singular: 32a5d78073b9bb9a246773afba8831df
+    All%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
+    Approval/singular: 2f5426445800ecd5a3102aac940d459c
+    Are%20you%20sure%20want%20to%20remove%20%7BentityLabel%7D%3F/singular: f9b67026c5ef86ac4d5944380d571961
+    Are%20you%20sure%20you%20want%20to%20delete%20the%20workspace%20%7B0%7D%3F/singular: 27ba2854202dd77c51e78c64e5c93946
+    Are%20you%20sure%20you%20want%20to%20delete%20this%20%7B0%7D%3F/singular: e980ce9469e329ddfed14c7da2cb5e52
+    Are%20you%20sure%20you%20want%20to%20delete%20this%20card%3F/singular: 131a5a7cccca7be8b32c987d9fa0b0c0
+    Are%20you%20sure%20you%20want%20to%20delete%20this%20checklist%3F/singular: 7c0f540603474b1a30462dda087fd2f0
+    Are%20you%20sure%20you%20want%20to%20delete%20this%20comment%3F/singular: 55fe6f1b52b71b91b2a079cfda3cc7fe
+    Are%20you%20sure%20you%20want%20to%20delete%20this%20label%3F/singular: 037fbaf1d04356937e6afb574714f51f
+    Are%20you%20sure%20you%20want%20to%20delete%20your%20account%3F/singular: 428b74d781063224c3e63980e1094ec3
+    assigned%20%3C0%3E%7B0%7D%3C%2F0%3E%20to%20the%20card/singular: 9df6d89fa83706123dedd8cba2243d04
+    Assignees/singular: 96fc0e28a783d80decfd4716a440ac08
+    Awaiting%20Customer/singular: 122c108794f321c10e05a08f09b11457
+    Backlog/singular: 35919fd5b10ad212839a75e72829fe4e
+    Basic%20Kanban/singular: e46ebc406749486f3907436970d4d6c7
+    billed%20annually/singular: c782a8085ffee456bfc56c34ccc5e71c
+    billed%20monthly/singular: 793f2728acf06e9f06d6cdc26dfcf0cd
+    Billing/singular: b01dbdd049ebbd4a349fa64d6ce65a3b
+    Billing%20portal/singular: dc3afa14ffe19f5920992a0c9d49d525
+    Blog%20Post/singular: 38e027f212be445dc530e427fc642a20
+    Board/singular: 101ff39aab674c033c15ab978d0d8bac
+    Board%20analytics/singular: 336a8c70a91adc49c15266167ee84cc0
+    Board%20name%20cannot%20exceed%20100%20characters/singular: 985c0177744ec56d8dac84f66ec284ca
+    Board%20name%20is%20required/singular: dbd0c6cc945ab19e702fc27f970a023b
+    Board%20not%20found/singular: 5af9844595fa8aed5985066620435515
+    Board%20sharing%20%26%20invites/singular: c9222fbcfac4e99dcaa859b46c163e55
+    Board%20URL%20can%20only%20contain%20letters%2C%20numbers%2C%20and%20hyphens/singular: ba018946ffdf85e55d701a9c27595b4d
+    Board%20URL%20cannot%20exceed%2060%20characters/singular: 8fd3417559a56aa42d297b14d480c382
+    Board%20URL%20copied%20to%20clipboard/singular: 5ef04fee9c8e5299a2fd1ad223eb95c9
+    Board%20URL%20must%20be%20at%20least%203%20characters%20long/singular: 105f5b4f3b606baf7b5302117022bd68
+    Board%20visibility/singular: b4205f3058297833a626156057c24b26
+    Board%20visibility%20updated/singular: 8e2f5d622fa9c94481e7c1629a154ecf
+    Boards/singular: 8fff51c5872e051beb9b718336665e80
+    Brainstorming/singular: 736332f2e4488609e42d2be8547d296e
+    Bug/singular: 4509fffdb5931f8905063c80cf802d71
+    Bug%20Report/singular: e558d1f100e21230c2f495a8913ac5ec
+    Cancel/singular: 2e2a849c2223911717de8caa2c71bade
+    Card/singular: bba0beaced7ea954ceb980f2b022ffee
+    Card%20not%20found/singular: 91509e2f92b0b3b11330b6983139fdbf
+    Card%20title/singular: 7c34f59f4005e6cb3a6ff546ea0b96e3
+    Change%20Password/singular: a552fc5c4189ebc3e2e6018edda7d18f
+    Change%20your%20language%20preferences./singular: 293d49fc3c75e9c425b64bd7126e6b46
+    Check%20your%20inbox/singular: e9a430fcd298def74212238df0f680d6
+    Checklist%20name/singular: 5eb5de823f7ca5a4d97bb41e6a3f675a
+    Checklists/singular: 6f79129c8f08ee54d858a2af57d16dd9
+    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
+    Comments/singular: 502237cd1044491c48494aa60967a985
+    Comments%20%26%20mentions/singular: 1f3a822f4f97a9b07db82d24c4204f75
+    Company/singular: 9e36d11fa82d1bd4563eef2abc4fcfba
+    Compare%20our%20features%20to%20see%20why%20Kan%20is%20the%20best%20choice./singular: c186ed37ff27cfc2a1ac11e66b2b30f1
+    Complete/singular: d3e36d723de0cfdea51c5b4171d30b4d
+    Complete%20control%20and%20ownership%3A/singular: 0d8b682ba873272217425ccfc96aa9cd
+    completed%20a%20checklist%20item/singular: 757b04c6c80cc927e1c597c0ad4fda33
+    completed%20checklist%20item%20%3C0%3E%7B0%7D%3C%2F0%3E/singular: 71ec18acf051fc909a48a07ca3578673
+    Confirm%20your%20new%20password/singular: a0d2935d7b63f8dd19d7c0de47524416
+    Connect%20Trello/singular: 4440a0b9e387ef7136e3958e7a089213
+    Connect%20your%20favorite%20tools%20to%20streamline%20your%20workflow./singular: 033c5dcdb059ccb634aef7fe63f2f45d
+    Connect%20your%20Trello%20account%20to%20import%20boards./singular: 84a510a7485f43e43f2191bd161171d7
+    Contact/singular: 9afa39bc47019ee6dec6c74b6273967c
+    Contact%20us/singular: 694a45bc5c96f6f3a27873c1cf5a7707
+    Content%20Creation/singular: 4e6be22ade0188f408471325fe363575
+    Continue%20with%20/singular: 8ed03cf7c5e60a6edf3470a4558ff058
+    Continue%20with%20%7B0%7D/singular: 2eaf6e1da91e208f7c5fb6bf862fe8a6
+    Control%20who%20can%20view%20and%20edit%20your%20boards./singular: 2a7e0bec29bac26280de707e2fe8bce5
+    Core%20features/singular: da95932e7a1465a5d21aa3b855a46dc2
+    Create%20%7B0%7D/singular: d37c29be6ccc0eb6062237f8508c3178
+    Create%20another/singular: 2de8a82a416eb78c0462aa36278edc9a
+    Create%20API%20key/singular: 70ed8431c6ed5f7fdef122cc34f75b41
+    Create%20card/singular: 32792935dd5837a9433909b04021c22b
+    Create%20checklist/singular: 5cbca15a7004558c4e6d381f83a34da2
+    Create%20invite%20link/singular: bef23fe786978f7abf78dece49a35a26
+    Create%20label/singular: c64e8180fa956f005edc1fd9b8e65abb
+    Create%20list/singular: 858c3d514aa95765ec82114393199144
+    Create%20new%20%7B0%7D/singular: 163dbd5cf86d512fadd4c3eaf9709a11
+    Create%20new%20key/singular: 236bdf75e42b42ec7fb25639bdc035af
+    Create%20new%20label/singular: 6be30980847b577847baa01bb5f29711
+    Create%20new%20list/singular: ce61ca8be7b3f6c26c32b684a42a2c26
+    Create%20template/singular: 57bfe6b58c42958a90f67d605a69ecdc
+    Create%20workspace/singular: 2e6718e79964ea5ce22d76c2189c77ca
+    created%20the%20card/singular: 605475f5aaeb4dbccbf7c4eb9107b43d
+    Critical/singular: eb327cd411b50aee954f8d1d215d003a
+    Crop%20your%20avatar/singular: eb25e2d5972ec36a0b40481c8136ab15
+    Current%20password%20is%20required/singular: 72536bca9598680027f2be8ce80ac280
+    Custom%20board%20templates/singular: c2966b352d76bc53421c01e9c99474bb
+    Custom%20domain/singular: b09e7a9c187b7163b4a6cfc78042fe42
+    Custom%20templates/singular: f8caaad67e168f106a298c8e0a66240c
+    Custom%20URLs%20require%20upgrading%20to%20a%20Pro%20plan/singular: f7275e3b473b8f7b39dab6b37eb26fea
+    Custom%20workspace%20link/singular: 8a19ae46ccea9c54b65ae183cea70b44
+    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
+    Delete%20card/singular: 18811ccf76fbb7a2772d648f7c5f0ea7
+    Delete%20comment/singular: a3dae0c9ddbc73677aad9812e3dffd69
+    Delete%20list/singular: b694f58e4c973d8797a78e746b550b1f
+    Delete%20template/singular: bdf3e8342f581d498b7238cdd4897a4b
+    Delete%20workspace/singular: 9017c821209528d9b20d40a488854cdf
+    deleted%20a%20checklist/singular: c54f922dc6c238c9141c700cb3180baf
+    deleted%20a%20checklist%20item/singular: 2b7a861600102ac5c271dd25c1df261a
+    deleted%20checklist%20%3C0%3E%7B0%7D%3C%2F0%3E/singular: 60f9107197e756487d3f95a1083846b5
+    deleted%20checklist%20item%20%3C0%3E%7B0%7D%3C%2F0%3E/singular: 8b7e270f612f9e91bda7f5cfb853d843
+    Design/singular: 991b75727b6784c1a063a7462b76186d
+    Disconnect%20Trello/singular: a2dd737d133887d34504728c7e7f05e3
+    Discuss%20and%20collaborate%20on%20cards./singular: f2e87816709f602130831ead50bba457
+    Display%20name/singular: 725f331065e9d594d720d07b1ae51a90
+    Display%20name%20cannot%20exceed%20280%20characters/singular: 426ddbcc87590e9d028bdca4e585c549
+    Display%20name%20must%20be%20at%20least%203%20characters%20long/singular: 84178b79845a70937af5e26020403052
+    Display%20name%20updated/singular: 4e27503ca24ef5f009713951ca9e5b97
+    Do%20you%20offer%20a%20free%20plan%3F/singular: 3ef16b0994f0d9ae17067782ca9bed1b
+    docs/singular: 307bff5678ada918da1f1ec3edc76cac
+    Docs/singular: 55fea190a0c0fb32acd3dc986cd3cc91
+    Documentation/singular: 1563fcb5ddb5037b0709ccd3dd384a92
+    Don't%20have%20an%20account%3F%20%3C0%3E%3C1%3ESign%20up%3C%2F1%3E%3C%2F0%3E/singular: 6ae8282ab8b4a01b4ce87b119e13714b
+    Done/singular: ffd408fa29d5bc9039ef8ea1b9b699bb
+    Edit%20board%20URL/singular: d8276dfc0189f371ec7d80a2047c07aa
+    Edit%20comment/singular: 7e4b46525fcb6b47b71798e31c46e374
+    Edit%20label/singular: 0309e0be1512b1e0b0ceb87c69a53d03
+    Edit%20workspace%20URL/singular: bbae5f2f8a442947d33099979bbbe899
+    Editing/singular: 3449a7988cd69207b7c6929af1f4abf1
+    email/singular: f31eb214738e037d58e26149797739df
+    Email/singular: e7f34943a0c2fb849db1839ff6ef5cb5
+    Enhancement/singular: 785fe23c0eef0a5b60b5b2a88151de31
+    Enter%20your%20current%20password/singular: bfceabde4c0b6f2cb439015b76549651
+    Enter%20your%20current%20password%20and%20choose%20a%20new%20secure%20password./singular: 9bb88155b18e98ea799c0e939d16af64
+    Enter%20your%20email%20address/singular: 9bc008365ebe3e404e241c8ca876f56e
+    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
+    Error%20disconnecting%20Trello/singular: a8766853864eddc480113778a708871b
+    Error%20inviting%20member/singular: 91553b606a6ebed3534cd2e5635ce004
+    Error%20updating%20display%20name/singular: 0d7979a25d290123ed8b8906bf468f1a
+    Error%20updating%20profile%20image/singular: 462a56a6e574abc9e13cb48f1266adad
+    Error%20updating%20workspace%20description/singular: 7a9fd7c69b90ab848ee1f1d4a4995381
+    Error%20updating%20workspace%20name/singular: 46025f42a7d5eff689e9cb8bed14a1e4
+    Error%20updating%20workspace%20URL/singular: 9da6c012e1b512d8c7fbd812626c4675
+    Error%20upgrading%20subscription/singular: 57cc47581c7faaffb3b1721b6352b576
+    Error%20upgrading%20to%20Pro/singular: 934c6867d9bdbe6099b2c0f5a3107f78
+    Error%20uploading%20profile%20image/singular: 0ba02753a797a74c6ea7b622c9f69c71
+    Everything%20in%20the%20free%20plan%2C%20plus%3A/singular: 62b44c4973b92b806c69a4b15e0256dc
+    Everything%20you%20need%2C%20free%20forever.%20Unlimited%20boards%2C%20unlimited%20lists%2C%20unlimited%20cards.%20Upgrade%20any%20time./singular: fa21632ab1468edf10acda2fe7b71323
+    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%20create%20board/singular: a746e2afe881c3bf0a8e82a931ca3495
+    Failed%20to%20login%20with%20%7B0%7D.%20Please%20try%20again./singular: 669a4b4247a73f53fb9b8b16e42d166f
+    FAQ/singular: 47e0ee2eb40b4e7e732e05e2233fc71c
+    FAQs/singular: dc36d7992372ccd419b39ef51cf5b16c
+    Fast%20%26%20lightweight/singular: 4f2a80c555a5427b94eef5124aa10775
+    Feature/singular: 58f5f3f37862b6312a2f20ec1a1fd0e8
+    Feature%20breakdown/singular: cae23c2a3fbb21735289571f2e1f60db
+    Feature%20Request/singular: c9de91b9a7020213381977f7d147064f
+    Features/singular: 341ff316a339b106a178f0b8d362951b
+    Feedback/singular: 6fac88806e0c269a30777b283988c61c
+    Feedback%20sent/singular: 38a490c7ad5f1aa6013dfa879d2c7818
+    Filter/singular: 626325a05e4c8800f7ede7012b0cadaf
+    Find%20answers%20to%20common%20questions%20about%20the%20project.%20Can't%20find%20what%20you're%20looking%20for%3F%20Feel%20free%20to%20%3C0%3Econtact%20us%3C%2F0%3E./singular: 4d99230dad703bf2d71ba670c2f79d3d
+    For%20long-term%20sustainability%2C%20we%20recognise%20all%20good%20open%20source%20projects%20need%20a%20source%20of%20revenue.%20Ours%20comes%20from%20the%20paid%20cloud%20offering%20for%20workspaces%20with%20multiple%20users%20(free%20during%20the%20beta)%20and%20for%20custom%20workspace%20slugs.%20There's%20no%20obligation%20to%20use%20it%2C%20and%20you%20can%20self-host%20the%20software%20on%20your%20own%20infrastructure%20free%20of%20charge./singular: 4eedacd4311ff69bf0fd87083c90a268
+    Free/singular: 0326365539c004f6088656f692602078
+    Free%20Plan/singular: c995acccc1e3cba379786892a5b4d4e5
+    Free%2C%20forever/singular: ae4f2f81e88a50b5f250ef8e8e77e74b
+    Full-time/singular: fe6e201f6676ae354111435cf6c76910
+    Fun/singular: 395bdc48e943762b6cde649f4a96771d
+    Get%20started/singular: 5c783951b0100a168bdd2161ff294833
+    Get%20Started/singular: 1d5f030c4ec9c869e647ae060518b948
+    Get%20started%20by%20creating%20a%20new%20%7B0%7D/singular: 4ca5ef637c08104e9dbb5ff9f49f0680
+    Get%20started%20by%20creating%20a%20new%20list/singular: bd6bf0806c95788a15ab438e2b09f885
+    Get%20started%20for%20free%20today/singular: 41e129eba0f6411337b54a7a08ea1709
+    Get%20started%20for%20free%2C%20with%20no%20usage%20limits.%20For%20collaboration%2C%20upgrade%20to%20a%20plan%20that%20fits%20the%20size%20of%20your%20team./singular: ddea69fa5d7b4023724296e1287872b6
+    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
+    Host%20Kan%20on%20your%20own%20infrastructure.%20Ideal%20for%20organisations%20that%20need%20complete%20control%20over%20their%20data./singular: 8e7ae0783d60ef4624d3caf9bfc3747f
+    How%20do%20I%20get%20a%20custom%20URL%3F/singular: 5b28fb95969c0dd19e1b9c9ab8a5fb29
+    How%20do%20I%20import%20my%20Trello%20boards%3F/singular: 44b30a727150cb93364af0a10346012a
+    How%20do%20I%20invite%20team%20members%3F/singular: e620622060a06288e86ccda35395db87
+    How%20do%20I%20self-host%3F/singular: ec0b6afc8ad2f581b512c0fd82926b75
+    How%20is%20the%20project%20funded%3F/singular: ba7e936f7b1b5faa47df59a0ef990092
+    I%20acknowledge%20that%20all%20of%20my%20account%20data%20will%20be%20permanently%20deleted%20and%20want%20to%20proceed./singular: 2ffc824d0b1f9e883c2e87ed4b8b40b6
+    I%20acknowledge%20that%20all%20of%20the%20workspace%20data%20will%20be%20permanently%20deleted%20and%20want%20to%20proceed./singular: fe1183a7439299210d8ab7379b8f4d01
+    Ideas/singular: 27c24b56895defecd10b0171b39bc93f
+    Ideas%20to%20improve%20this%20page.../singular: 285decc2cc28403fae043d9b4de97a00
+    Import/singular: 348b8ab981de5b7f1fca6d7302263bbd
+    Import%20complete/singular: 7e749df6f068b9cdf1055ea38c9a80af
+    Import%20failed/singular: bcec1f271c82ddffc91ebc22021b03cb
+    Import%20from%20Trello/singular: 9cce591a63763174952ffc11ae829f0c
+    Import%20your%20Trello%20boards%20and%20hit%20the%20ground%20running./singular: d66d13649f81342f8b3a4f3b54370c20
+    Important/singular: 4cf0e8fc8e4e7c5c9b9458059a172a2b
+    Importing%20from%20Trello/singular: 1e3a46fb9bd8ce8c7d632f9555b5bd7c
+    Importing%20your%20Trello%20boards%20into%20Kan%20is%20easy.%20You%20can%20follow%20our%20step-by-step%20guide%20%3C0%3Ehere%3C%2F0%3E./singular: ca88dc22801fef08fee1ecfb1bf6914e
+    in/singular: 1f06ad6763244d5e9927853e65cc6274
+    In%20Progress/singular: 3de9afebcb9d4ce8ac42e14995f79ffd
+    Individuals/singular: 83bfc81f20e60556c44ec80c7d0603ec
+    Integrations/singular: 0ccce343287704cd90150c32e2fcad36
+    Intelligent%20search/singular: da688e7cfb2775f719a12df6dd606f6e
+    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%20links/singular: 36ea61a3193245fa1b57d3392f342aaa
+    Invite%20links%20require%20a%20Team%20or%20Pro%20subscription.%20Please%20upgrade%20your%20workspace./singular: 18db646fc55f99789572c8df0539ee69
+    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
+    Kan/singular: dd1232a5a28bf47e939d3b8a199bc229
+    Kan%20is%20better%20with%20a%20team.%20Perfect%20for%20small%20and%20growing%20teams%20looking%20to%20collaborate./singular: d13f4467d3dc0a0786c3843a9b50785d
+    Kanban%20is%20better%20with%20a%20team.%20Perfect%20for%20small%20and%20growing%20teams%20looking%20to%20collaborate./singular: a77bee43046b260797c8936ad23e9223
+    Kanban%20reimagined/singular: 613ccfdd9f54c66cbf68cfa313498766
+    Keep%20in%20mind%20that%20this%20action%20is%20irreversible./singular: 79702b2ad3be71cb8b87f1122a60c199
+    Labels/singular: 6f15627a90002323eac018274b6922d6
+    Labels%20%26%20filters/singular: e1ceda0c6cc32fb04cb9423582ad8fe4
+    Labels%20%26%20Filters/singular: 8f0bdd6084516f8241cb613178114390
+    Language/singular: 277fd1a41cc237a437cd1d5e4a80463b
+    Launch%20offer/singular: 624592ba2ecf647a3fe60d493c1ee71a
+    Launch%20offer%3A%20Get%20unlimited%20members%20with%20Pro/singular: 8c1be80f5b2fcc112922282afbe30287
+    Launch%20offer%3A%20unlimited%20seats%20for%20just%20%2429%2Fmonth%20with%20Pro/singular: 235d1cda21811c296afdc0dcc438cc24
+    Learning/singular: 90e91da3f870f065f2da9aa9adf53514
+    Legal/singular: 00d3f08da61a21887009819cf93fb414
+    License/singular: ac2bcac75151e2fcd9eb768cea275a77
+    Light/singular: bb78ea2c6edd8662676c81a8a13ecb93
+    Link%20copied/singular: 4a4805700b31ec65bcb3ca962bccfd1b
+    List/singular: 94f13e7ef909a4de9db7abaa1f9f0b61
+    List%20name/singular: e925e2e6ccaf0eb4064a888aaea8d3c2
+    Login%20%7C%20kan.bn/singular: 42a6c8dcd73e0d46e652646dc86871eb
+    Logout/singular: 07948fdf20705e04a7bf68ab197512bf
+    Long-term/singular: 51cb6f0b112250c5a091ca5f0866904b
+    Low%20Priority/singular: 509b5cb7c1e8a185e0aa6d38c64c90e8
+    magic%20link/singular: db9d17a5bd98bba8aa0d8068c68579f3
+    Make%20template/singular: 7a1c63b75cea690b3fda6c3f203e31ff
+    marked%20a%20checklist%20item%20as%20incomplete/singular: 35d0822f65971b97774b962561b02649
+    marked%20checklist%20item%20%3C0%3E%7B0%7D%3C%2F0%3E%20as%20incomplete/singular: 4c38799ff25321ea25017bf4cd8e2e4f
+    Medium%20Priority/singular: 1f527cd6d1ed602930bcaa303f503b51
+    Members/singular: 0932e80cba1e3e0a7f52bb67ff31da32
+    Members%20%7C%20%7B0%7D/singular: a29e3e9f1076acd178c417d047584e88
+    Monthly/singular: 818f1192e32bb855597f930d3e78806e
+    monthly%20billing/singular: e228107df80015377112d41f4f155cb3
+    moved%20the%20card%20from%20%3C0%3E%7B0%7D%3C%2F0%3E%20to%3C1%3E%7B1%7D%3C%2F1%3E/singular: 11edf0427766c26db541d46379dc3c16
+    moved%20the%20card%20to%20another%20list/singular: 2e8c41bfafb42fa299ce56e4300205ff
+    Name/singular: 9368b5a047572b6051f334af5aa76819
+    Need%20help%3F/singular: 04e7322f2d3ffb2d73ff2f64b71637c8
+    New/singular: 126d036fae5fb6b629728ecb97e6195b
+    New%20%7B0%7D/singular: 67b6a22a65e0956f2091d00e6966652b
+    New%20API%20key/singular: db3088aedba6e4a99b46451c5b3d36ed
+    New%20card/singular: a33f6219a756127f91c2523cfe845a19
+    New%20checklist/singular: 58252b71e9693ae0f4d2d0b72108a569
+    New%20import/singular: e8fddfe15dd170277df919e5d37efd47
+    New%20label/singular: 890040da52a88c16c249a4ac78980f81
+    New%20list/singular: 146c2e642b11056a0b07ed65733e4178
+    New%20password%20is%20required/singular: f88427a4cca058631199a4384cb5622e
+    New%20password%20must%20be%20different%20from%20current%20password/singular: db33013fcc6c40995cf8a37deb3d5667
+    New%20template/singular: 10dca64383235d1596a010e559b2e35a
+    New%20Ticket/singular: 665ff16ec736cba20e8a1b3beb3baa09
+    New%20workspace/singular: 8eecf05b4ce29aa880adfed2e11476af
+    Newsletter/singular: dcfb9666301924431ac8ae88e5b6f9d7
+    Next%20Steps/singular: 12392fe73ae60b6e5a9d851256b8477e
+    No%20%7B0%7D/singular: a7a95e1dfdb4396da9e2be0e27f42323
+    No%20boards%20found/singular: e044088d2c51b6bdf660fafa86ee1e17
+    No%20credit%20card%20required/singular: 2090aa4171dc0b60735069f89b592883
+    No%20lists/singular: cedf633d99c77ff4356e089f2d98c0a6
+    No%20results%20found%20for%20%22%7BdebouncedQuery%7D%22./singular: 5db6294712528cd897b15ae36f4fd834
+    Offer/singular: 82b4e0c9a3f5b4bd93590847de7c32a1
+    Onboarding/singular: 52b23f9c62ff199d4c09920e7641829e
+    Once%20you%20delete%20your%20account%2C%20there%20is%20no%20going%20back.%20This%20action%20cannot%20be%20undone./singular: 9cf7aa6ef30890e5124e266c081bae1c
+    Once%20you%20delete%20your%20workspace%2C%20there%20is%20no%20going%20back.%20This%20action%20cannot%20be%20undone./singular: c9ce6a516ed1f361653e8f8db3dd5ffd
+    Open%20source/singular: 81a747dc664de1a3389b495c8f84843b
+    or/singular: 7b133c38bec0d5ee23cc6bcf9a8de50b
+    Organize%20and%20find%20cards%20quickly%20with%20powerful%20filtering%20tools./singular: 1b9898c4b21e9dff413b4f76dc59db56
+    Own%20your%20data/singular: cc2178dac4bdf6b07f030cfc2a7510e6
+    Owned%20by%20Atlassian/singular: ace4ed076a5318ad48c296fa09afed69
+    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
+    Personal%20Project/singular: d7820b1bf4efecc61ed89234567aaa9c
+    Planning/singular: 353f58c75248275fe091740607501610
+    Platform/singular: c68862170146325333c7f25af11a3fa2
+    Please%20confirm%20your%20new%20password/singular: 43d0307b9307238cc6c199cfa66caff2
+    Please%20enter%20a%20valid%20email%20address/singular: 8de4bc8832b11b380bc4cbcedc16e48b
+    Please%20enter%20a%20valid%20name/singular: f2d741f1b5cae722e35cb5206786f932
+    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
+    Price%20per%20user%2Fmonth/singular: ae4b93ad0f9fad454b40f82010372fc2
+    Pricing/singular: ce27f1aeacccc542a174c4b2bce022b0
+    Priority%20email%20support/singular: 678538c912a770b1e1416ecdb8e299b1
+    Privacy%20policy/singular: 462c6a536b52873e4498785c66dd48c8
+    Private/singular: d740d0660e68c61db1853489356030ae
+    Pro%20Plan/singular: 76a09fd843b496610f8cf1dced417b62
+    Pro%20Plan%20%E2%88%9E/singular: a898be9e4610706b9b8146a209e8ba16
+    Profile%20image%20updated/singular: 1ba6609b50bc217a36ab659563e78dae
+    Profile%20picture/singular: d9b5e595877ffe2557486a987dd28274
+    Public/singular: c834f11dab0881632aded3f01d4f8fa9
+    Publishing/singular: d9c8862c0180d9b7bd1272d5dc0d3ac3
+    Question/singular: 0576462ce60d4263d7c482463fcc9547
+    Questions%3F/singular: c7c3a47f8b230ce7a43f3c090f21d683
+    Quick%20Win/singular: a03ff4c0896f14b87455510bab203511
+    Recruitment/singular: 78084ee4954aa22efe9ad7463d2a0c72
+    Remote/singular: dc3e4280dfe5c455b38ba6c8884999cf
+    Remove/singular: dba2fe5fe9f83f8078c687f28cba4b52
+    Remove%20member/singular: 1d77c2ca3768e486fd1fb5df30cb60d9
+    removed%20a%20label%20from%20the%20card/singular: f83ec18850a2a8a3f8242a740a04df06
+    removed%20a%20member%20from%20the%20card/singular: 0bd7561bb79358fde3d595c3e60a315a
+    removed%20label%20%3C0%3E%7B0%7D%3C%2F0%3E/singular: 7e0936b15831e65754588b8512f62fcb
+    renamed%20a%20checklist/singular: 4d208de1857740e63469007c5b8b491a
+    renamed%20checklist%20%3C0%3E%7B0%7D%3C%2F0%3E/singular: e95d119ef65b0af6c0a96bef182be671
+    renamed%20checklist%20item%20to%20%3C0%3E%7B0%7D%3C%2F0%3E/singular: 50f55f71f9245890afee434d7adc2140
+    Research/singular: 3368e9638d1619babd6df9fad592274f
+    Resolution/singular: 6d8bd9e1bd7dae5ae38c93061d32990e
+    Resources/singular: ec7fb05ed963bb6781a35782b3475502
+    REST%20API/singular: 54c9f8d98f45f50399b6b93ba70af0d6
+    Review/singular: 299f75db25382980b2895622d7712927
+    Roadmap/singular: c60f4a1acf30e566861bf130f13b9ae7
+    Role/singular: 53743bbb6ca938f5b893552e839d067f
+    Run%20on%20your%20own%20infrastructure/singular: eba804911562b8dbf9d69c3e27f1d708
+    Save/singular: f7a2929f33bc420195e59ac5a8bcd454
+    Save%20time%20with%20reusable%20board%20templates./singular: d0f2d7d0fd682ceaf4ca12c6353fd75a
+    Screening/singular: 0327bfb25db87bdacf00d4dc297f8b26
+    Search%20boards%20and%20cards.../singular: 137017b2b3e885c4894ca8c899af5bc2
+    Select%20all/singular: eedc7cdb02de467c15dc418a066a77f2
+    Select%20source/singular: c7b0ec447415ff62856803a4d7838bd6
+    Self%20Host/singular: 43fbce2027548b712002e489a20a621a
+    Self%20host%20with%20Github/singular: 972155419bcc9f8f9bad9f5ad3538774
+    self-assigned%20the%20card/singular: 24a8d97bcd747643772ebe883be69698
+    Self-hostable/singular: 3e3597145cc17f03b8b5646b80d59592
+    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
+    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
+    Sign%20up%20with%20/singular: 103e5d75506e6835b471695d799ff580
+    Simple%20pricing/singular: 5aa2bece93a71947b268498a58062937
+    Simple%2C%20visual%20task%20management%20that%20just%20works.%20Drag%20and%20drop%20cards%2C%20collaborate%20with%20your%20team%2C%20and%20get%20more%20done./singular: f4f138f83017d43dab2882cc08e07bdb
+    Social%20Media/singular: 2227508afb0d38a027e323207e47d4a2
+    Software%20Development/singular: 67659097ef6bcb194839858b2c4f3a3c
+    Star%20on%20Github/singular: e5cb0428f1ac6485688f120d78742875
+    Subscription%20Required/singular: 05f2b4abfc36def17756a6969983cf86
+    Success/singular: c43827becada6750f7a25890905f38b9
+    Supercharge%20your%20workspace%20for%20just%20%2429%2Fmonth.%20Here's%20what%20you'll%20get%3A/singular: 21af8119141afcce5f12da489f34db6a
+    Support/singular: 55aab5fd0f31a9cb055a2edeeedfaf63
+    Support%20the%20development%20of%20the%20project/singular: c63bab228ab2b1be4370c668a99cd278
+    System/singular: 803281c327a02a2feba182f4a2b38311
+    Team%20Plan/singular: 3f0ae9c914f16ceb9a0d7db868f4aa20
+    Teams/singular: b63448c05270497973ac4407047dae02
+    Template/singular: 87c2704ff2033e3c76bc97a45ae57d5c
+    Template%20created/singular: 2c7a515a5d8a9afb26de6365cdaa0c92
+    Template%20created%20successfully/singular: 2750600da57c5cd3c3c072810c8c9604
+    Template%20name%20cannot%20exceed%20100%20characters/singular: 14527c9246e558a085ceee2e8d4e6560
+    Template%20name%20is%20required/singular: 34d674d59c414c2051ef5bc0a62e3c00
+    Templates/singular: 8ed62f56c81fa96c0f3182acb331bf63
+    Terms%20of%20service/singular: 0b8a8b23aff021a6cde79613fdb39c28
+    Thank%20you%20for%20your%20feedback!/singular: 07edd8c50685a52c0969d711df26d768
+    The%20current%20password%20you%20entered%20is%20incorrect./singular: 67a76bf346ab4b48563269e9d941a64a
+    The%20main%20difference%20between%20Kan%20and%20Trello%20is%20that%20Kan%20is%20open%20source%2C%20allowing%20anyone%20to%20view%2C%20modify%2C%20and%20contribute%20to%20our%20code.%20Our%20cloud%20offering%20also%20offers%20no%20restrictions%20on%20features%20for%20individual%20use%2C%20whereas%20Trello%20locks%20basic%20features%20such%20as%20the%20number%20of%20boards%20you%20can%20create%20behind%20a%20paywall./singular: db6e22cc955c5fbe547feedeb48f8719
+    The%20open%20source%20%3C0%2F%3E%20alternative%20to%20Trello/singular: 692cb2e8a8e610953c996826beed45a2
+    The%20visibility%20of%20your%20board%20has%20been%20set%20to%20%7B0%7D./singular: 970e17a115f7374e60e0a8ded425db8f
+    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
+    This%20workspace%20URL%20is%20reserved/singular: 7e47c892b93d4334c1606010c06e875e
+    This%20workspace%20username%20has%20already%20been%20taken/singular: b7eadb89c615874f416d9658d0428c4c
+    To%20Do/singular: d60813ea824f373462471e092d136eed
+    Toggle%20menu/singular: 29dea3e0b6238874f8c7a27619df8e36
+    Track%20all%20card%20changes%20with%20detailed%20activity%20history./singular: 0d3bac559c71ec4b8734f9f212320de5
+    Trello/singular: b5131f6488b5a439d58db3e22d6de45b
+    Trello%20disconnected/singular: 54b24a3e6c9a7eedd8c8d1060ab1175d
+    Trello%20imports/singular: 6827eca403faa8f89891d17827e72af9
+    Triaging/singular: 1d40799fcae53a8a27688fdae2a48dee
+    Trusted%20by%20fast-moving%20teams%3C0%2F%3Earound%20the%20world/singular: b065575df380536df9541a91ca9b37bf
+    Unable%20to%20add%20checklist%20item/singular: 4c4c3eaaf10b348b39ae97eb5dc455df
+    Unable%20to%20add%20comment/singular: 49bb435880817434698f31a6069564d6
+    Unable%20to%20create%20card/singular: 90112ea12ec6fa42097a6e022ae048a4
+    Unable%20to%20create%20checklist/singular: 94eed122e42e0951cd08b9ec62f5eeb6
+    Unable%20to%20create%20list/singular: 7fbbf8314f8d08a4123c7daef09fed05
+    Unable%20to%20create%20template/singular: 7495f1434c9188849bffd015811d5337
+    Unable%20to%20create%20workspace/singular: c1c949477e121d73ed6683eddf9cd874
+    Unable%20to%20delete%20card/singular: 50ff06aa1265fe464f776aba33f1bef9
+    Unable%20to%20delete%20checklist/singular: d7067e2c009f4919f0cca77df3c228ee
+    Unable%20to%20delete%20checklist%20item/singular: a74144593b625e4d8d7ecf734462c60d
+    Unable%20to%20delete%20comment/singular: 550198b2c87f06726a843c79c1026ed9
+    Unable%20to%20remove%20member/singular: 39025a0c53818438829603d213baef06
+    Unable%20to%20send%20feedback/singular: 656c93265d7e2bef1245b17d85f85ae5
+    Unable%20to%20update%20board%20URL/singular: 080746884059142358b58d9a44ff7d93
+    Unable%20to%20update%20board%20visibility/singular: a76a21d561b8943e9276e027a1e3f70d
+    Unable%20to%20update%20card/singular: eca6002e57af8ec97324eae64e3b5731
+    Unable%20to%20update%20checklist/singular: 44c10f49f448909ceca481ed9b4b07e7
+    Unable%20to%20update%20checklist%20item/singular: 5c86b3523531c30d58856e3ecde0cb55
+    Unable%20to%20update%20comment/singular: 05e798ed6b0f3fee41f3e8832eb699ea
+    Unable%20to%20update%20labels/singular: dca2bdc3dcf74bc9d95e05156039a291
+    Unable%20to%20update%20list/singular: 14aa802f91b9b4c05236c8c75afb33da
+    Unable%20to%20update%20members/singular: 9a851a6b0c75ee16d25cf2ff4b67b255
+    unassigned%20%3C0%3E%7B0%7D%3C%2F0%3E%20from%20the%20card/singular: b683cc07092348c1e75dba40b1262b85
+    unassigned%20themselves%20from%20the%20card/singular: 27c6f293c562af6a44348d7f00036d30
+    Unlimited%20activity%20log/singular: 8c993de94cda0deac19ba14ecafce6a5
+    Unlimited%20boards/singular: cb4fd858137ce825c2f1904d142d8042
+    Unlimited%20boards%2C%20unlimited%20lists%2C%20unlimited%20cards.%20No%20credit%20card%20required./singular: 8d9733137deb26664d76b55ad561c42c
+    Unlimited%20cards/singular: f44c1050c4d6aa39c8cdf5f4a7d12577
+    Unlimited%20comments/singular: 31dbcf487c49a9997142e96bb3ab0040
+    Unlimited%20lists/singular: 5c418701b27b9acbc5dd199719007362
+    Unlimited%20members/singular: f2949ca2dc18b0063af92e60779abb65
+    Unlimited%20workspaces/singular: b504d01997bf908af1d486d9942fed36
+    Update/singular: 079fc039262fd31b10532929685c2d1b
+    Update%20label/singular: 97880b503dfe956941c5f23025a1c102
+    updated%20a%20checklist%20item/singular: 198e1d1d503f4b69b752dd84d0cc0e9d
+    updated%20the%20description/singular: 70fd604b6dc957a75be90ea77572d76d
+    updated%20the%20title/singular: 98cf8f12923ec1a58e767e3a40863b21
+    updated%20the%20title%20to%20%3C0%3E%7B0%7D%3C%2F0%3E/singular: aca196d729401d8adc5c8ca9d558840e
+    Upgrade/singular: 63c3b52882e0d779859307d672c178c2
+    Upgrade%20to%20Pro/singular: 972773025e763ddf53273df6d37a729a
+    Upgrade%20to%20Pro%20(%2429%2Fmonth)/singular: 9a91ea70f5eb55aac96640bf0fd7feff
+    Upgrade%20to%20Team%20Plan/singular: 40e2ef151266937f8bbe63b3d361f645
+    Urgent/singular: e79afcd4398e52e10e7e8243a7eecabe
+    URL%20can%20only%20contain%20letters%2C%20numbers%2C%20and%20hyphens/singular: 875d37d2d920f98ef60a314eda8a5d9a
+    URL%20cannot%20exceed%2024%20characters/singular: 395c25732b84ac1f5b63ee310da08e93
+    URL%20must%20be%20at%20least%203%20characters%20long/singular: 1b74ac9ec61fd34b16530ed599009ed1
+    Use%20template/singular: 33f0ca0aa8f4b0de99aad267a61a094d
+    User/singular: 61073457a5c3901084b557d065f876be
+    User%20is%20already%20a%20member%20of%20this%20workspace/singular: bc246386f0975f750f2133222bb4735e
+    Video/singular: 8050c90e4289b105a0780f0fdda6ff66
+    View%20and%20manage%20your%20API%20keys./singular: 88e23ee79056846dd9ce63ceee690549
+    View%20and%20manage%20your%20billing%20and%20subscription./singular: 7469502543aac6f02149813546d1cb38
+    View%20docs/singular: 43ce54f27bb1e3f1880b56e03ab38871
+    View%20only/singular: 21f5f7ba3b49050c4f406113479d6a7a
+    View%20our%20roadmap./singular: 1dd7ec80e1635951b1c90d592d1d07dc
+    View%20workspace/singular: c9e4b789330b08c18ca8db7044409e5f
+    Visibility/singular: 1ff412f8fcde0f460acbf11153649646
+    We%20are%20using%20the%20%3C0%3EAGPL-3.0%20license%3C%2F0%3E./singular: 08c5ddd938a2a70f61d684e41e18697a
+    We're%20just%20getting%20started.%20/singular: 2dfa121e0ff1914e08068308a81973c0
+    Welcome%20back/singular: 4928884739ba559e6e4b960e80fe1452
+    What%20license%20are%20you%20using%3F/singular: 59d00e1bf28edc21b77fec94875f57ca
+    What's%20the%20difference%20between%20Kan%20and%20Trello%3F/singular: 7a02f507dd6abbfab1fdae0b172d31b7
+    When%20Trello%20launched%20in%202011%2C%20it%20blew%20everyone%20away%20with%20its%20carefully%20designed%20simplicity%2C%20but%20over%20time%20(and%20atlassification)%20it%20lost%20its%20magic%20and%20grew%20into%20something%20closer%20to%20%22Jira%20Lite%22.%20This%20project%20is%20our%20attempt%20to%20recapture%20the%20original%20magic%20of%20Trello's%20simplicity%2C%20in%20open%20source./singular: 60a55e9bd16c3d1beff1a6c7633c5911
+    White%20label/singular: 2570386f73a010b07219e7658aaf9d9b
+    Why%20make%20an%20open%20source%20Trello%3F/singular: 090833338ba8c64ef7a75e0f2615b34b
+    Workspace/singular: b63ef0e99ee6f7fef6cbe4971ca6cf0f
+    Workspace%20created%20successfully.%20You%20can%20upgrade%20later%20in%20settings./singular: 8bbaba9f82ff076a08185ada1ee7eb94
+    Workspace%20deleted/singular: bc5c267ce3f04de94ff1379cf2ca48a3
+    Workspace%20description/singular: 7159d620b7ef5c5afef734989a5be08b
+    Workspace%20description%20cannot%20exceed%20280%20characters/singular: d0e83b9a0304d7c36cf8c85d98783ce2
+    Workspace%20description%20must%20be%20at%20least%203%20characters%20long/singular: 5ebac407715e6569adc381ebbb4f32d4
+    Workspace%20description%20updated/singular: 19ddb6ee9ead26982a90dee426f3ee1f
+    Workspace%20members/singular: 1857292f9567c556c781a23bd7e10544
+    Workspace%20name/singular: 855614bbf862fd6a9f6a3e76943f92d4
+    Workspace%20name%20cannot%20exceed%2024%20characters/singular: c8b8f79fb83abf8329cc34c1f51fcfc9
+    Workspace%20name%20is%20required/singular: b8c5162dd08c4d941bc57f9d0cbee451
+    Workspace%20name%20must%20be%20at%20least%203%20characters%20long/singular: e448ea97418d44b18b4c21c22b8ba779
+    Workspace%20name%20updated/singular: 3206ea410ee1ea4182b27ac0d89f92a1
+    Workspace%20slug%20updated/singular: 527b92711d38cb35b40741df43aef047
+    Workspace%20URL/singular: f4397a838da0f3a44cbd3ebe408ed6c3
+    workspace-url/singular: 2d034732ec536f3a2667f956fa50d394
+    Writing/singular: 4f5f3ee3320c252921f80c42653c5d49
+    Yearly/singular: 87f43e016c19cb25860f456549a2f431
+    Yes%2C%20we%20offer%20an%20forever%20free%20plan%20for%20individual%20use.%20No%20restrictions%2C%20no%20paywalls%2C%20no%20limits./singular: 963cee303d0ff13c1719f4575e774fe3
+    You%20are%20about%20to%20change%20your%20password./singular: df4783d593505766d78c5bc08d3d48ac
+    You%20can%20get%20a%20custom%20workspace%20URL%2C%20like%20%3C0%3Ekan.bn%2Fkan%3C%2F0%3E%2C%20by%20going%20into%20your%20%3C1%3Eworkspace%20settings%3C%2F1%3E%20and%20purchasing%20a%20pro%20workspace%20subscription.%20All%20subscriptions%20help%20fund%20the%20development%20of%20the%20project!/singular: 41dd145ef56f539e12dc064a9807c660
+    You%20can%20invite%20team%20members%20by%20clicking%20the%20%22Invite%22%20button%20in%20the%20top%20right%20corner%20of%20the%20%3C0%3Emembers%20page%3C%2F0%3E%20and%20entering%20their%20email%20address.%20They%20will%20receive%20an%20email%20with%20a%20link%20to%20join%20the%20workspace./singular: 47e125eb9b4c11cab5a2f4b3ab08e883
+    You%20can%20self-host%20by%20following%20the%20instructions%20in%20our%20%3C0%3Erepo%3C%2F0%3E./singular: a6152a41b2d8f64d5a657e5b8bc808a9
+    You%20have%20been%20logged%20in%20successfully./singular: ef8fad1dce13ae4112f17c5258655fea
+    You%20have%20been%20signed%20up%20successfully./singular: f614a6e3b45f5ffb9a3b0fb420fef84b
+    You%20have%20unlimited%20seats%20with%20your%20Pro%20Plan.%20There%20is%20no%20additional%20charge%20for%20new%20members!/singular: e3dc59a5ba7211cd3d8516b3a79d85ca
+    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
+    Your%20password%20has%20been%20changed./singular: 8f730f68d52b7efa727aa0784282ebcb
+    Your%20profile%20image%20has%20been%20updated./singular: 099e1780348cd7bf617721344371a430
+    Your%20Trello%20account%20has%20been%20disconnected./singular: 126aeeb73f7e4cad338056e4c933f39b
+    Your%20Trello%20account%20is%20connected./singular: 0499d193001fce2fbec445ae034ce512
+    Your%20workspace%20description%20has%20been%20updated./singular: 98de6f65c567c6654cc0adce3c9d5656
+    Your%20workspace%20has%20been%20deleted./singular: e7a3efcfc7dd18cb3e917acb67498292
+    Your%20workspace%20name%20has%20been%20updated./singular: a87ea3b0d71e6dc5dd525d77114a9322
+    Your%20workspace%20slug%20has%20been%20updated./singular: c808949b9b2b4a9aba2472f5d1050167

apps/web/lingui.config.ts

@@ -0,0 +1,15 @@
+import type { LinguiConfig } from "@lingui/conf";
+
+const config: LinguiConfig = {
+  locales: ["en", "fr", "de", "es", "it", "nl", "ru", "pl"],
+  sourceLocale: "en",
+  catalogs: [
+    {
+      path: "src/locales/{locale}/messages",
+      include: ["src"],
+      exclude: ["**/node_modules/**"],
+    },
+  ],
+};
+
+export default config;

apps/web/next.config.js

@@ -0,0 +1,85 @@
+import { fileURLToPath } from "url";
+import createJiti from "jiti";
+import { env } from "next-runtime-env";
+import { configureRuntimeEnv } from "next-runtime-env/build/configure.js";
+
+// Import env files to validate at build time. Use jiti so we can load .ts files in here.
+createJiti(fileURLToPath(import.meta.url))("./src/env");
+
+configureRuntimeEnv();
+
+/** @type {import("next").NextConfig} */
+const config = {
+  output:
+    env("NEXT_PUBLIC_USE_STANDALONE_OUTPUT") === "true"
+      ? "standalone"
+      : undefined,
+  reactStrictMode: true,
+
+  /** Enables hot reloading for local packages without a build step */
+  transpilePackages: [
+    "@kan/api",
+    "@kan/db",
+    "@kan/shared",
+    "@kan/auth",
+    "@kan/stripe",
+  ],
+
+  /** We already do linting and typechecking as separate tasks in CI */
+  eslint: { ignoreDuringBuilds: true },
+  typescript: { ignoreBuildErrors: true },
+
+  images: {
+    remotePatterns: [
+      {
+        protocol: "https",
+        hostname:
+          env("S3_FORCE_PATH_STYLE") === "true"
+            ? `${env("NEXT_PUBLIC_STORAGE_DOMAIN")}`
+            : `*.${env("NEXT_PUBLIC_STORAGE_DOMAIN")}`,
+      },
+      {
+        protocol: "http",
+        hostname: "localhost",
+      },
+      {
+        protocol: "https",
+        hostname: "*.googleusercontent.com",
+      },
+    ],
+  },
+  webpack(config) {
+    config.module.rules.push({
+      test: /\.svg$/,
+      use: ["@svgr/webpack"],
+    });
+    return config;
+  },
+  experimental: {
+    // 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)
+if (
+  env("OIDC_CLIENT_ID") &&
+  env("OIDC_CLIENT_SECRET") &&
+  env("OIDC_DISCOVERY_URL")
+) {
+  config.images?.remotePatterns?.push({
+    protocol: "https",
+    hostname: "**",
+  });
+}
+
+export default config;

apps/web/package.json

@@ -0,0 +1,93 @@
+{
+  "name": "@kan/web",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "pnpm with-env next build",
+    "clean": "git clean -xdf .cache .next .turbo node_modules",
+    "dev": "pnpm with-env next dev",
+    "format": "prettier --check . --ignore-path ../../.gitignore",
+    "lint": "eslint",
+    "start": "pnpm with-env next start",
+    "typecheck": "tsc --noEmit",
+    "with-env": "dotenv -e ../../.env --",
+    "lingui:extract": "lingui extract",
+    "lingui:compile": "lingui compile --typescript",
+    "lingui:extract:watch": "lingui extract --watch"
+  },
+  "dependencies": {
+    "@aws-sdk/client-s3": "^3.802.0",
+    "@aws-sdk/s3-request-presigner": "^3.812.0",
+    "@headlessui/react": "^2.2.0",
+    "@hookform/resolvers": "^3.3.4",
+    "@kan/api": "workspace:*",
+    "@kan/auth": "workspace:*",
+    "@kan/db": "workspace:^",
+    "@kan/shared": "workspace:^",
+    "@lingui/babel-preset-react": "^2.9.2",
+    "@lingui/conf": "^5.3.2",
+    "@lingui/macro": "^5.3.2",
+    "@lingui/react": "^5.3.2",
+    "@t3-oss/env-nextjs": "^0.11.1",
+    "@tailwindcss/typography": "^0.5.16",
+    "@tanstack/react-query": "catalog:",
+    "@tiptap/extension-link": "^2.22.2",
+    "@tiptap/extension-mention": "^3.0.9",
+    "@tiptap/extension-placeholder": "^2.14.0",
+    "@tiptap/pm": "^2.14.0",
+    "@tiptap/react": "^2.14.0",
+    "@tiptap/starter-kit": "^2.14.0",
+    "@tiptap/suggestion": "^2.14.0",
+    "@trpc/client": "catalog:",
+    "@trpc/next": "^11.0.0-rc.660",
+    "@trpc/react-query": "catalog:",
+    "@trpc/server": "catalog:",
+    "aws-sdk": "^2.1692.0",
+    "date-fns": "^4.1.0",
+    "geist": "^1.3.1",
+    "next": "^15.3.4",
+    "next-logger": "^5.0.1",
+    "next-runtime-env": "^1.7.2",
+    "next-themes": "^0.4.6",
+    "nextjs-cors": "^2.2.0",
+    "pino": "^9.6.0",
+    "posthog-js": "^1.254.0",
+    "react": "catalog:react18",
+    "react-beautiful-dnd": "^13.1.1",
+    "react-contenteditable": "^3.3.7",
+    "react-dom": "catalog:react18",
+    "react-hook-form": "^7.51.1",
+    "react-icons": "^5.5.0",
+    "react-image-crop": "^11.0.10",
+    "react-lottie-player": "^1.5.5",
+    "react-markdown": "^10.1.0",
+    "superjson": "2.2.1",
+    "tailwind-merge": "^2.5.2",
+    "tippy.js": "^6.3.7",
+    "zod": "catalog:"
+  },
+  "devDependencies": {
+    "@kan/eslint-config": "workspace:*",
+    "@kan/prettier-config": "workspace:*",
+    "@kan/stripe": "workspace:*",
+    "@kan/tailwind-config": "workspace:*",
+    "@kan/tsconfig": "workspace:*",
+    "@lingui/cli": "^5.3.2",
+    "@lingui/loader": "^5.3.2",
+    "@lingui/swc-plugin": "^5.5.2",
+    "@svgr/webpack": "^8.1.0",
+    "@types/node": "^20.17.7",
+    "@types/react": "catalog:react18",
+    "@types/react-beautiful-dnd": "^13.1.7",
+    "@types/react-dom": "catalog:react18",
+    "dotenv-cli": "^7.4.4",
+    "eslint": "catalog:",
+    "jiti": "^1.21.6",
+    "pino-pretty": "^13.0.0",
+    "prettier": "catalog:",
+    "tailwindcss": "catalog:",
+    "typescript": "catalog:"
+  },
+  "prettier": "@kan/prettier-config"
+}

apps/web/postcss.config.cjs

@@ -0,0 +1,5 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+  },
+};

apps/web/public/logos/airbus.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="2500" height="2500" viewBox="0 0 192.756 192.756"><g fill-rule="evenodd" clip-rule="evenodd"><path fill="none" d="M0 0h192.756v192.756H0z"/><path fill="#313f94" d="M33.272 96.299c-.159-7.649-6.374-13.864-14.023-13.864S5.544 88.809 5.544 96.458h-2.71c0-8.446 6.693-15.298 15.139-15.458 8.446 0 15.458 6.853 15.458 15.299z" style="fill:currentColor"/><path fill="#313f94" d="M33.113 96.458c0-6.215-4.94-11.155-11.155-11.155s-10.677 4.94-10.677 11.155H8.253c0-7.012 5.737-12.589 12.749-12.749 6.853 0 12.43 6.374 12.589 12.589z" style="fill:currentColor"/><path fill="#313f94" d="M33.272 96.299c0-4.462-3.824-8.127-8.446-8.127s-7.968 3.665-7.968 8.287H13.99c0-5.418 4.144-9.88 9.562-9.88s9.721 4.462 9.88 9.721h-.16z" style="fill:currentColor"/><path fill="#313f94" d="M3.153 96.458c0 7.649 6.215 13.864 13.864 13.864 7.809 0 13.864-6.375 13.864-14.023h2.709c0 8.445-6.853 15.457-15.298 15.457S2.994 104.904 2.834 96.458z" style="fill:currentColor"/><path fill="#313f94" d="M3.153 96.299c0 6.215 4.94 11.154 11.155 11.154s10.836-4.939 10.677-11.154h3.028c0 7.012-5.737 12.748-12.589 12.748-7.012 0-12.589-6.373-12.589-12.589z" style="fill:currentColor"/><path fill="#313f94" d="M2.994 96.458c.159 4.462 3.984 8.128 8.446 8.128 4.622 0 7.968-3.666 7.968-8.287h2.868c0 5.418-4.143 9.881-9.562 9.881-5.417 0-9.72-4.303-9.72-9.722m54.341 3.507h-5.1l4.144-8.925zm-8.924 8.285 1.434-3.188h7.968l.479 3.188h7.968l-4.462-24.7H53.67l-13.227 24.7zm21.513 0 4.303-24.7h8.127l-4.302 24.7zm24.064-18.645h3.985c1.273 0 2.07.16 2.549.638.318.318.479.956.318 1.593-.158.797-.479 1.435-1.115 1.753-.479.479-1.434.638-2.709.638h-3.825zM90.8 108.25l1.435-8.605h3.187c.956 0 1.754.16 2.23.32.479.318.797.637.957 1.115q.237.716 0 1.912l-.16 1.912c-.318 1.594-.318 2.709-.318 3.346h8.287v-.797c-.16 0-.479 0-.479-.158-.158-.16-.158-.479 0-1.115l.639-3.826c.158-1.752.158-3.027-.32-3.664-.477-.797-1.434-1.436-2.867-2.072.797-.159 1.434-.479 2.07-.796.797-.638 1.436-1.275 1.912-2.072.639-.957.957-1.913 1.275-3.188q.24-1.434 0-2.39a5.3 5.3 0 0 0-.797-1.912 7.5 7.5 0 0 0-1.594-1.594c-.797-.319-1.594-.638-2.709-.797s-2.548-.319-4.302-.319H87.294l-4.303 24.7zm33.147-19.123c1.115 0 1.912.159 2.23.159.479.16.797.479.957.797.318.319.318.797.318 1.275-.16.638-.479 1.116-1.115 1.594-.479.319-1.436.637-2.709.637H120.6l.797-4.462zm-1.275 19.123c1.912 0 3.188-.158 3.984-.318s1.752-.479 2.549-.797c.957-.479 1.594-.797 2.072-1.275.797-.477 1.275-1.273 1.754-2.07a7.2 7.2 0 0 0 1.115-2.869c.158-1.434 0-2.709-.479-3.666-.637-1.115-1.434-1.752-2.709-2.071 2.391-1.434 3.824-3.187 4.143-5.259.479-2.231-.158-3.825-1.912-4.94-1.275-.957-3.346-1.435-6.533-1.435h-12.111l-4.303 24.7zm.478-10.357c1.594 0 2.549.318 3.027.637.479.479.637.957.479 1.754-.16.637-.479 1.273-1.115 1.752-.639.318-1.594.639-3.188.639h-3.346l.797-4.781zm18.645-14.343h7.969l-2.709 15.298c-.16.957-.16 1.754 0 2.232.158.477.477.955 1.115 1.273.637.32 1.275.479 2.07.479 1.117 0 2.232-.318 2.869-.955.797-.639 1.275-1.754 1.594-3.029l2.709-15.298h7.969l-2.551 14.501c-.318 1.754-.637 3.188-1.115 4.303-.479.957-1.115 1.912-1.912 2.709s-1.754 1.594-2.709 2.072c-1.115.637-2.23 1.115-3.506 1.434-1.434.16-2.869.32-4.303.32-1.754 0-3.188-.16-4.463-.32-1.273-.318-2.23-.797-3.027-1.434-.955-.637-1.594-1.275-2.072-2.072-.477-.797-.797-1.912-.797-3.186-.158-.797 0-2.232.32-3.984zm48.127 7.171h-7.809c0-.638-.318-1.275-.639-1.594-.477-.319-1.115-.478-2.07-.478-.957 0-1.754.159-2.23.478-.479.319-.639.638-.797 1.116 0 .478 0 .637.318.956s1.115.637 2.549.956l3.027.797c2.709.797 4.623 1.753 5.578 3.028.957 1.274 1.275 2.709.957 4.461-.32 1.436-.797 2.551-1.594 3.666s-1.754 2.072-2.709 2.709c-.957.637-2.232 1.115-3.666 1.594-1.434.318-3.027.479-4.621.479s-3.188-.16-4.621-.639q-2.153-.717-3.348-1.912c-1.195-1.195-1.434-1.752-1.752-2.867-.16-.797-.16-1.754-.16-2.869h7.809c0 .797.318 1.434.797 1.752.479.479 1.436.639 2.709.639q1.673 0 2.391-.479c.718-.479.639-.637.797-1.115 0-.479 0-.957-.318-1.275s-1.115-.637-2.551-.955l-2.709-.639c-1.273-.318-2.709-.797-3.824-1.434-1.115-.638-2.07-1.435-2.549-2.55-.479-.956-.479-2.071-.318-3.506.318-1.434.797-2.549 1.592-3.665.797-1.115 1.754-1.912 2.869-2.55.957-.797 2.23-1.115 3.506-1.434s2.551-.478 3.824-.478c1.594 0 2.869.159 4.145.478 1.273.319 2.07.797 2.867 1.275.639.478 1.115 1.115 1.436 1.753.477.637.637 1.275.797 1.912.157.637.317 1.434.317 2.39" style="fill:currentColor"/></g></svg>

apps/web/public/logos/couchbase.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 2000 456.5"><path d="M380.5 268.5c0 13.6-8 26-23.6 28.4-26.8 4.8-82.8 7.6-130 7.6s-103.2-2.8-130-7.6c-15.6-2.8-23.2-15.2-23.2-28.4v-89.2c0-13.6 10.4-26.4 23.2-28.4 8-1.6 26.4-2.8 40.8-2.8 5.6 0 9.6 4.4 10 10.8v62c27.6 0 51.6-1.6 79.6-1.6s51.6 1.6 79.6 1.6v-62c0-6.4 4.4-10.8 9.6-10.8 14.4 0 32.8 1.2 40.8 2.8 12.8 2.4 23.6 15.2 23.6 28.4zM226.4 0C101.6 0 0 102.4 0 228.4s101.6 228 226.4 228 226.4-102.4 226.4-228S352.1 0 226.4 0" class="st0" style="fill:currentColor"/><path d="M543.6 309.9c-70.4 0-105.6-51.2-105.6-108 0-56.4 36.8-107.2 106.4-107.2 26.8 0 46 5.6 61.6 16.4l-20 33.2c-11.2-7.2-24-12-42.4-12-38 0-58 30.4-58 68.4 0 38.8 19.2 71.6 58.8 71.6 22 0 35.6-7.6 46.4-16l18.4 32c-10.8 9.6-35.6 21.6-65.6 21.6M694 309.9c-52.4 0-75.6-40-75.6-79.6s22.8-80.4 75.2-80.4 76.4 39.6 76.4 79.2c0 38.8-23.2 80.8-76 80.8m-1.2-128c-22.8 0-29.6 19.2-29.6 47.2s8.8 48.4 31.2 48.4c22.8 0 30.4-18.8 30.4-47.2s-8.8-48.4-32-48.4M836.9 153.9v97.6c0 15.2 5.2 22.4 19.6 22.4 15.2 0 26.8-14.8 29.6-18.4V153.9h42.4v107.6c0 20 2.4 35.6 4.4 44.8h-41.6c-1.2-4.4-2.8-14-3.2-20-8 10.4-23.6 24-48.4 24-33.2 0-45.2-21.6-45.2-49.6V153.9zM1032.5 309.9c-48.8 0-78.4-32-78.4-80 0-51.2 33.6-80.4 80-80.4 24.4 0 38.8 7.2 46 12l-13.6 29.2c-6.4-4.4-16.4-8.8-31.2-8.8-23.6 0-36.4 18.4-36.4 46.4s12 48 37.2 48c16.8 0 27.6-6 32-8.8l12.8 28.4c-7.2 4.8-20.8 14-48.4 14M1194.5 306.3v-97.6c0-15.2-5.2-22.4-19.2-22.4-15.6 0-27.2 14.4-30 18.4v102h-42.4V81.1h42.4v90.8c7.6-8.4 22-22 46.8-22 33.2 0 45.2 21.2 45.2 49.6v106.4zM1314.1 81.1v84.4c6.8-6.8 20-16 36.8-16 37.6 0 63.6 26 63.6 78.8 0 52.4-34.8 81.2-80.4 81.2-34.4 0-55.2-8.4-62.4-12.4v-216zm0 192c2.8.8 9.2 3.2 20 3.2 22 0 35.2-16.4 35.2-47.6 0-28-9.2-44.8-30.8-44.8-12.8 0-22 8-24.8 11.2zM1519.8 306.3c-1.2-4-2.4-11.6-2.8-16.4-6.4 8-20.8 20-42 20-25.6 0-45.6-15.6-45.6-42.8 0-39.6 40-54 80.4-54h5.2v-8.8c0-12.8-5.2-20.4-24-20.4-19.2 0-32.4 10-38.4 14.4l-18-26.4c9.2-8 28.8-22 61.2-22 41.6 0 61.2 16.4 61.2 56.8v53.6c0 20.8 2.4 36 4.4 46zm-4.8-67.2h-5.2c-23.2 0-39.2 6.8-39.2 24.4 0 10.8 8.4 15.6 17.6 15.6 14.4 0 22.4-8 26.8-12.8zM1633.8 309.9c-27.2 0-44.4-8-53.6-14.4l14.4-30c5.6 4 20.4 12.4 37.2 12.4 15.6 0 24.4-4.4 24.4-13.2 0-10-16.8-12.8-38.4-23.2-20.8-10-32.8-22-32.8-44.8 0-28.8 22.4-47.2 56.8-47.2 26 0 41.6 8 48.8 12l-14.8 29.2c-5.6-4-17.6-9.6-32-9.6s-20.4 5.2-20.4 12.8c0 10 14 12.4 30.8 19.2 23.6 9.6 40.4 20.8 40.4 46.8-.8 33.2-23.6 50-60.8 50M1792.2 277.9c20.4 0 31.6-6.4 38.8-10.4l13.6 27.6c-10 5.6-25.6 14.8-56.4 14.8-50.4 0-79.2-32-79.2-80.8 0-48.4 33.2-79.2 74.8-79.2 47.6 0 70.4 33.2 65.2 90.4h-94c1.6 22.8 12.8 37.6 37.2 37.6m16-66.8c-.4-16.8-6.8-30.4-25.2-30.4-16.8 0-26.4 10.8-28.8 30.4z" class="st1" style="fill:currentColor" transform="translate(150.22 27.826)"/></svg>

apps/web/public/logos/deloitte.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="892.4" height="170.507" viewBox="-86.2 14.747 1092.4 170.507"><path d="M3054.827 974.386a4.32 4.32 0 1 1 8.637 0 4.32 4.32 0 0 1-8.637 0M2917.055 962.946q0-4.106-1.587-6.09-1.586-1.98-4.818-1.98h-2.294v16.732h1.755q3.592.001 5.267-2.135 1.676-2.134 1.677-6.527m8.18-.285q0 7.478-4.02 11.522-4.02 4.047-11.304 4.046h-9.436v-29.87h10.095q7.023 0 10.845 3.677 3.82 3.677 3.82 10.625M2951.373 978.229h7.509v-29.996h-7.509zM2969.43 967.04q0 2.87.749 4.374.749 1.505 2.515 1.505 1.748 0 2.469-1.505.719-1.505.718-4.374 0-2.853-.728-4.306-.731-1.457-2.498-1.458-1.727.001-2.476 1.447-.749 1.444-.749 4.317m14.094 0q.001 5.466-2.87 8.524-2.871 3.059-8.036 3.059-4.955 0-7.883-3.128-2.93-3.126-2.93-8.455 0-5.448 2.871-8.467t8.058-3.02q3.206 0 5.664 1.398t3.792 4.003q1.334 2.603 1.334 6.086M2986.506 978.23h7.51v-22.282h-7.51zM2986.506 953.253h7.51v-5.022h-7.51zM3009.23 972.546c1.015 0 2.222-.258 3.63-.769v5.606q-1.517.669-2.89.953-1.372.286-3.217.286-3.781 0-5.455-1.899-1.667-1.897-1.668-5.828v-9.185H2997v-5.76h2.63v-5.69l7.567-1.317v7.007h4.791v5.76h-4.791v8.672q0 2.164 2.034 2.164M3026.612 972.546c1.013 0 2.22-.258 3.63-.769v5.606q-1.518.669-2.89.953-1.374.286-3.218.286-3.782 0-5.452-1.899-1.671-1.897-1.672-5.828v-9.185h-2.63v-5.76h2.63v-5.777l7.567-1.23v7.007h4.793v5.76h-4.793v8.672q0 2.164 2.035 2.164M3039.717 964.326q.155-1.83 1.047-2.685.895-.855 2.217-.855 1.445-.001 2.295.965.857.962.893 2.575zm10.59-6.145q-2.678-2.626-7.593-2.626-5.166 0-7.952 3.018-2.784 3.019-2.785 8.663.001 5.467 3.007 8.426 3.005 2.96 8.44 2.96 2.61 0 4.493-.355a13 13 0 0 0 3.627-1.266l-1.154-5.021c-.851.347-1.661.615-2.426.79q-1.658.386-3.638.386-2.171 0-3.427-1.061-1.258-1.065-1.335-2.932h13.422v-3.42q0-4.938-2.679-7.562M2935.2 964.326q.155-1.83 1.047-2.685.894-.855 2.219-.855 1.44-.001 2.294.965.855.962.893 2.575zm10.592-6.145q-2.68-2.626-7.595-2.626-5.167 0-7.95 3.018-2.785 3.019-2.786 8.663 0 5.467 3.007 8.426 3.004 2.96 8.44 2.96 2.61 0 4.493-.355a13 13 0 0 0 3.627-1.266l-1.155-5.021c-.851.347-1.661.615-2.425.79q-1.66.386-3.639.386-2.17 0-3.427-1.061-1.258-1.065-1.335-2.932h13.422v-3.42q0-4.938-2.677-7.562" style="fill:currentColor" transform="translate(-15746.429 -5136.262)scale(5.4348)"/></svg>

apps/web/public/logos/fast_company.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 295 42"><rect width="100%" height="100%" fill="none"/><path d="M259.5 5.5c0-2.9.9-3.9 2.4-3.9s2.7.6 4.1 3.9l8.5 19.3V37c0 2.9-1.2 3.7-4.5 4.1v.8h15.7v-.8c-3.4-.4-4.5-1.3-4.5-4.1V24.8l8.2-18.6c1.6-3.6 3.2-4.4 5.6-4.8V.6h-11.5v.8c3.9.4 5.3 1.5 4.2 4.1L280.5 22l-7.4-16.9c-1-2.3-.4-3 3.9-3.6V.7h-24.7v.8c3.9.6 5.1 1.3 5.1 4.1v22.6L239.3.7h-8.9v.8c2.9.4 3.8 1.3 3.8 4.1v31.5c0 2.9-.8 3.9-1.8 3.9-.9 0-1.4-.4-2.7-3.9L216.3.5h-.8l-12.9 35c-1.4 3.9-3.6 5.2-5.8 5.7v.8h11.8v-.8c-4.1-.4-5.4-2-4.5-4.6l2.9-8h12.2l2.8 7.5c1.2 3.4.5 4.4-3 5v.8h22.4v-.8c-3.9-.6-5.1-1.3-5.1-4.1V8.8L258.2 42h1.3zM101.6 21.2c0-12.8 6.1-19.5 13.2-19.5 4.2 0 6.9.9 8.5 2.6 1.2 1.2 2.1 2.9 3.1 5.6h.8V1.3C123.1.5 119.4 0 115.7 0 105 0 93.9 6.9 93.9 21.2S105 42.4 115 42.4c4.4 0 8.3-.7 12-1.8l1.2-8.1-.7-.2c-.9 1.7-2 3.2-3.2 4.5-2.6 2.6-6.1 4-9.6 4-6.8-.1-13.1-6.6-13.1-19.6m88.7 1.2c-.9 0-2.1-.1-3.3-.3v-20h3.3c5.5 0 7.9 2.9 7.9 10.1 0 7.3-2.5 10.2-7.9 10.2M61.8.6v9.9h.8c1.2-6.3 3.7-8.3 7.9-8.3h2V37c0 2.9-1.2 3.7-4.5 4.1v.8h15.7v-.8c-3.4-.4-4.5-1.3-4.5-4.1V2.1h2c4.2 0 6.7 2 7.9 8.3h.8V.5H61.8zM49.3 42.4c6.8 0 14-3.9 14-11.9 0-4.7-2.5-8.6-6.9-11l-7.8-4.3c-4.1-2.3-5.3-4.4-5.3-7.4 0-3.4 2.5-6.1 7.2-6.1 2.3 0 4 .6 5.4 1.9 1.2 1.2 2.4 3.2 3.5 6.8h.7V1.3C57.3.5 54.4 0 51 0c-6.7 0-11.7 4.2-11.7 11.3 0 4.5 2.5 8.6 6.6 11l7.2 4c4.1 2.3 5.4 4.5 5.4 7.8 0 3.9-4 6.7-8.4 6.7-2.9 0-5.3-1-7-2.7-1.1-1.1-2.3-2.8-3.1-5h4.7v-.8c-1.3-.3-2.1-.5-3.2-3.1L32.3 7.3h-.8l-9 21.4c-1.2 2.9-2 3.4-3.4 3.6v.8h8v-.8c-2.9-.3-3.7-1.7-3-3.5l1.4-3.4h8.1l1.8 4.2c.8 1.9-.4 2.4-3.3 2.6v.8h6.4v7.9c3.2.9 7.3 1.5 10.8 1.5m101.6-.4 11.9-33.1.9 28.2c.1 2.8-1 3.6-4.4 4v.8h32.8v-.8c-3.9-.6-5.1-1.3-5.1-4.1V23.7c1.3.2 2.6.3 3.6.3 7.9 0 14.7-2.9 14.7-11.7S198.5.6 190.6.6h-14.1v.8c2.9.4 3.8 1.3 3.8 4.1V37c0 2.9-1.2 4.1-4.5 4.1h-.1c-3.5 0-5-1.3-5.1-4l-1.2-31.5c-.1-2.9.9-3.8 4-4.2V.6h-9.7l-10.6 29.7L142.5.6h-10.4v.8c3.1.4 4.1 1.4 4 4.2L135 35.8c-.1 3-1.7 4.8-4.6 5.3v.8h11v-.8c-2.8-.4-4.4-2.2-4.3-5.3l.9-27.5 12.1 33.6zM119 33.3c5.3 0 12.1-4.7 12.1-12.1 0-7.3-6.7-12.1-12.1-12.1-5.3 0-12.1 4.7-12.1 12.1 0 7.3 6.7 12.1 12.1 12.1m0-22.5c3.4 0 5.7 2.8 5.7 10.4 0 7.7-2.4 10.4-5.7 10.4-3.4 0-5.7-2.8-5.7-10.4 0-7.7 2.3-10.4 5.7-10.4m99.7 16.1h-11.1l5.5-15.2zM33.1 23.8h-6.8l3.4-8.3zm-13 2.1h.8V13.5h-.8c-1.3 4.4-2.6 5.4-5 5.4h-4.6V2.1h7.3c4.2 0 6.7 2 7.9 8.3h.8V.5H0v.8c2.9.4 3.8 1.3 3.8 4.1v31.5c0 2.9-.9 3.7-3.8 4.1v.8h15.6V41c-3.9-.6-5.1-1.3-5.1-4.1V20.4h4.6c2.3.1 3.7 1.1 5 5.5" class="currentLayer" style="fill:currentColor"/></svg>

apps/web/public/logos/lego.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" viewBox="-5 0 24 14"><path d="M11.48 4.37c-.714 0-1.207.284-1.54.678a.9.9 0 0 0-.16-.238c-.273-.308-.712-.452-1.3-.452-.576 0-1.056.18-1.39.462-.172-.28-.585-.467-1.082-.467-.65 0-1.358.092-1.778.769-.01-.244-.032-.373-.169-.518-.166-.176-.436-.222-.698-.222-.478 0-.838.209-1.097.634C1.89 5.616.98 7.59 1 8.546c.014.618.428 1.063 1.17 1.08.579.015 1.034-.14 1.323-.432.26.282.655.447 1.128.447.528 0 1.059-.158 1.372-.504.264.324.68.513 1.214.51a2.19 2.19 0 0 0 1.713-.842c.22.598.777.836 1.386.836 1.335 0 1.92-.918 2.41-2.369.11-.327.256-.873.28-1.33.041-.764-.282-1.571-1.517-1.571M2.598 8.02c.69-.12.864.129.842.36-.065.692-.7.847-1.251.834-.4-.009-.76-.193-.77-.657-.017-.812.811-2.69 1.201-3.314.18-.295.4-.441.75-.441.331 0 .413.17.408.374-.013.544-.892 2.197-1.18 2.843m2.249-.639a7 7 0 0 0-.203.657c.227-.056.397-.096.688-.089.332.008.544.146.544.42 0 .666-.735.86-1.245.86-.56 0-1.052-.318-1.052-.93 0-.718.39-1.807.755-2.532.448-.89.906-1.008 1.695-1.008.347 0 .747.148.747.475 0 .454-.385.627-.766.65a5 5 0 0 1-.563.006s-.127.194-.262.538c.706-.1 1.005.06.886.47-.161.551-.639.587-1.224.483zM8.32 5.665c-.19 0-.316.12-.409.251-.204.288-.648 1.44-.717 1.912-.047.324.093.39.246.39.245 0 .52-.26.614-.688 0 0-.467-.01-.338-.425.125-.402.362-.489.756-.505.775-.032.698.54.636.846-.201.99-.907 1.787-1.904 1.787-.683 0-1.107-.378-1.107-1.075 0-.496.246-1.275.44-1.731.416-.97.852-1.65 1.962-1.65.666 0 1.191.24 1.114.864-.056.457-.286.726-.702.759-.116.009-.593-.003-.435-.454.056-.157.078-.281-.156-.281m4.192.819a6.7 6.7 0 0 1-.668 1.79c-.467.84-1.035.959-1.53.953s-1.055-.19-1.06-.954c-.002-.549.235-1.324.436-1.832.35-.92.708-1.671 1.84-1.658 1.32.016 1.085 1.19.982 1.7m-1.12-.8c-.113-.001-.212.02-.3.158-.2.258-.784 1.854-.774 2.172.004.114.067.214.208.214.161 0 .25-.111.33-.246.184-.311.7-1.721.715-2.074.004-.102-.013-.222-.179-.224" style="fill:currentColor"/></svg>

apps/web/public/logos/linkedin.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="-48.214 -18.217 387.865 116.248"><path d="M1.785 65.652h31.62V55.27H13.23V15.665H1.785zm47.629 0v-34.43H37.97v34.43zm-5.721-39.13c3.99 0 6.474-2.644 6.474-5.95-.074-3.378-2.484-5.947-6.398-5.947-3.915 0-6.475 2.57-6.475 5.947 0 3.306 2.484 5.95 6.324 5.95zm11.034 39.13h11.444V46.424c0-1.029.074-2.058.377-2.791.826-2.056 2.709-4.186 5.871-4.186 4.142 0 5.799 3.158 5.799 7.784v18.42H89.66V45.91c0-10.576-5.646-15.497-13.176-15.497-6.173 0-8.884 3.451-10.39 5.802h.077v-4.993H54.727c.151 3.231 0 34.43 0 34.43m51.078-49.987H94.361v49.987h11.444V54.489l2.86-3.601 8.96 14.764h14.078l-15.056-21.373 13.174-14.54h-13.776s-9.411 13.008-10.24 14.552zm56.501 35.625c.151-.884.377-2.58.377-4.498 0-8.9-4.518-17.936-16.413-17.936-12.724 0-18.597 10.063-18.597 19.19 0 11.288 7.153 18.337 19.65 18.337 4.97 0 9.561-.732 13.327-2.275l-1.506-7.558c-3.088 1.024-6.25 1.537-10.164 1.537-5.345 0-10.012-2.195-10.389-6.871l23.715.072zm-23.79-7.742c.301-2.938 2.26-7.273 7.153-7.273 5.194 0 6.4 4.628 6.4 7.273h-13.552zm52.414-27.883v17.304h-.151c-1.657-2.422-5.12-4.038-9.71-4.038-8.81 0-16.564 7.05-16.49 19.094 0 11.164 7.003 18.435 15.735 18.435 4.744 0 9.26-2.058 11.52-6.024h.225l.453 5.216h10.163c-.15-2.424-.302-6.61-.302-10.723V15.664h-11.444zm0 34.05c0 .88-.075 1.763-.227 2.495-.675 3.16-3.386 5.361-6.699 5.361-4.742 0-7.83-3.818-7.83-9.84 0-5.654 2.637-10.208 7.906-10.208 3.538 0 6.022 2.423 6.7 5.433.15.663.15 1.398.15 2.058v4.7z" style="fill:currentColor"/><mask id="a"><rect width="100%" height="100%" fill="#fff"/><path d="M236.85 65.61V31.18h-11.444v34.43h11.445zm-5.72-39.13c3.99 0 6.474-2.644 6.474-5.948-.075-3.379-2.484-5.949-6.398-5.949-3.917 0-6.475 2.57-6.475 5.949 0 3.304 2.483 5.948 6.324 5.948zm12.054 39.13h11.443V46.385c0-1.028.075-2.058.377-2.792.827-2.057 2.71-4.186 5.872-4.186 4.14 0 5.797 3.157 5.797 7.786V65.61h11.443V45.869c0-10.575-5.645-15.496-13.174-15.496-6.173 0-8.884 3.45-10.39 5.8h.076v-4.992h-11.443c.149 3.23-.001 34.43-.001 34.43z"/></mask><path d="M213.882 7.245c0-3.015 2.508-5.462 5.6-5.462h64.568c3.093 0 5.6 2.447 5.6 5.462V72.57c0 3.016-2.507 5.461-5.6 5.461h-64.568c-3.092 0-5.6-2.445-5.6-5.46V7.244z" mask="url(#a)" style="fill:currentColor"/></svg>

apps/web/public/logos/sana.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="66" height="24" class="wordmark" viewBox="0 0 66 24"><path d="M0 17.198h3.045c.356 3.077 3.045 4.664 5.927 4.664 3.045 0 5.409-1.814 5.409-4.632 0-2.883-2.332-3.595-6.186-4.47C2.559 11.53.777 9.587.777 6.283.777 2.623 3.984 0 8.486 0c4.178 0 7.806 2.332 8.032 6.057h-3.012c-.227-2.462-2.429-3.919-5.15-3.919-2.947 0-4.761 1.879-4.761 3.951 0 2.462 2.073 3.206 6.121 4.049 5.441 1.134 7.514 3.271 7.514 6.931 0 4.243-3.498 6.931-8.356 6.931C4.081 24 .291 21.636 0 17.198M18.267 19.304c0-3.336 2.818-5.344 10.3-5.538v-.972c0-2.494-1.36-3.725-3.563-3.725-2.267 0-3.401 1.49-3.563 3.077h-2.785c.324-2.721 2.559-4.988 6.348-4.988 4.049 0 6.316 2.202 6.316 5.636v10.721h-2.623v-2.073C27.757 23.093 26.008 24 23.709 24c-2.915 0-5.442-1.717-5.442-4.696m10.3-1.458v-2.3c-5.538.162-7.547 1.458-7.547 3.66 0 1.684 1.36 2.883 3.271 2.883 2.43 0 4.276-1.652 4.276-4.243M33.684 7.676h2.656v2.332c.907-1.684 2.623-2.785 4.923-2.785 3.595 0 5.506 2.364 5.506 5.862v10.429h-2.85v-9.911c0-2.915-1.296-4.275-3.498-4.275s-3.887 1.879-3.887 4.308v9.879h-2.85zM48.389 19.304c0-3.336 2.818-5.344 10.3-5.538v-.972c0-2.494-1.36-3.725-3.563-3.725-2.267 0-3.401 1.49-3.563 3.077h-2.785c.324-2.721 2.559-4.988 6.348-4.988 4.049 0 6.316 2.202 6.316 5.636v10.721h-2.623v-2.073C57.879 23.093 56.13 24 53.83 24c-2.915 0-5.441-1.717-5.441-4.696m10.299-1.458v-2.3c-5.538.162-7.547 1.458-7.547 3.66 0 1.684 1.36 2.883 3.271 2.883 2.43 0 4.276-1.652 4.276-4.243M61.043 1.018h-1.017v3.014h-.602V1.018h-1.017v-.5h2.636zM63.251 3.263l.873-2.745h.917V4.03h-.596V1.137l-.908 2.893h-.581l-.928-2.889V4.03h-.587V.518h.933z" style="fill:currentColor"/></svg>

apps/web/public/logos/wakam.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="-50 -20 288.624 78.268"><g data-name="Calque 2"><g data-name="Groupe 1909" opacity=".35"><path fill="#0540ff" d="M68.234 103.2a4.226 4.226 0 0 1-3.767-6.125L73.8 78.55a4.226 4.226 0 0 1 7.548 3.8l-9.335 18.522a4.23 4.23 0 0 1-3.781 2.323Z" data-name="Tracé 10091" style="fill:currentColor" transform="translate(-54.53 -64.931)"/></g><g data-name="Groupe 1910" opacity=".35"><path fill="#0540ff" d="M1093.234 103.213a4.226 4.226 0 0 1-3.766-6.125l9.335-18.522a4.223 4.223 0 0 1 7.542 3.8l-9.335 18.522a4.23 4.23 0 0 1-3.776 2.325" data-name="Tracé 10092" style="fill:currentColor" transform="translate(-927.653 -64.946)"/></g><path fill="#0540ff" d="M140.7 103.184a4.22 4.22 0 0 1-3.759-2.3l-9.483-18.521a4.223 4.223 0 0 1 7.517-3.853l5.7 11.122 5.594-11.1a4.226 4.226 0 0 1 7.548 3.805l-9.335 18.522a4.22 4.22 0 0 1-3.758 2.322Z" data-name="Tracé 10093" style="fill:currentColor" transform="translate(-108.179 -64.918)"/><path fill="#0540ff" d="M13.708 103.2a4.22 4.22 0 0 1-3.762-2.3L.462 82.382a4.223 4.223 0 0 1 7.517-3.852l9.483 18.522a4.226 4.226 0 0 1-3.755 6.149Z" data-name="Tracé 10094" style="fill:currentColor" transform="translate(.003 -64.936)"/><path fill="#0540ff" d="M966.234 103.219a4.226 4.226 0 0 1-3.766-6.125l9.332-18.522a4.22 4.22 0 0 1 3.758-2.322h.013a4.22 4.22 0 0 1 3.758 2.3l9.483 18.522a4.223 4.223 0 0 1-7.517 3.852L975.6 89.8l-5.588 11.1a4.23 4.23 0 0 1-3.778 2.319" data-name="Tracé 10095" style="fill:currentColor" transform="translate(-819.471 -64.952)"/><path fill="#0540ff" d="M1165.708 103.2a4.22 4.22 0 0 1-3.762-2.3l-9.483-18.522a4.223 4.223 0 1 1 7.517-3.852l9.483 18.522a4.226 4.226 0 0 1-3.755 6.149Z" data-name="Tracé 10096" style="fill:currentColor" transform="translate(-981.302 -64.936)"/><path fill="#0540ff" d="m578.369 30.891-8.541-6.677 8.446-5.666a4 4 0 0 0-4.456-6.647l-11.737 7.869V4.186a4.186 4.186 0 1 0-8.372 0v29.783a4.186 4.186 0 0 0 8.372 0V28.32l11.36 8.871a4 4 0 1 0 4.927-6.3Z" data-name="Tracé 10097" style="fill:currentColor" transform="translate(-471.665)"/><path fill="#0540ff" d="M356.4 90.163a13.4 13.4 0 1 0-7 11.854 3.852 3.852 0 0 0 7-2.223zM343 96.09a5.853 5.853 0 1 1 5.853-5.853A5.853 5.853 0 0 1 343 96.09" data-name="Tracé 10098" style="fill:currentColor" transform="translate(-280.762 -65.455)"/><path fill="#0540ff" d="M782.4 90.163a13.4 13.4 0 1 0-7 11.854 3.853 3.853 0 0 0 7-2.223zM769 96.09a5.853 5.853 0 1 1 5.853-5.853A5.853 5.853 0 0 1 769 96.09" data-name="Tracé 10099" style="fill:currentColor" transform="translate(-643.64 -65.455)"/></g></svg>

apps/web/src/components/AuthForm.tsx

@@ -0,0 +1,427 @@
+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 { useForm } from "react-hook-form";
+import {
+  FaApple,
+  FaDiscord,
+  FaDropbox,
+  FaFacebook,
+  FaGithub,
+  FaGitlab,
+  FaGoogle,
+  FaLinkedin,
+  FaMicrosoft,
+  FaOpenid,
+  FaReddit,
+  FaSpotify,
+  FaTiktok,
+  FaTwitch,
+  FaTwitter,
+  FaVk,
+} from "react-icons/fa";
+import { SiRoblox, SiZoom } from "react-icons/si";
+import { TbBrandKick } from "react-icons/tb";
+import { z } from "zod";
+
+import { authClient } from "@kan/auth/client";
+
+import Button from "~/components/Button";
+import Input from "~/components/Input";
+import { usePopup } from "~/providers/popup";
+
+type AuthProvider = SocialProvider | "oidc";
+
+interface FormValues {
+  name?: string;
+  email: string;
+  password?: string;
+}
+
+interface AuthProps {
+  setIsMagicLinkSent: (value: boolean, recipient: string) => void;
+  isSignUp?: boolean;
+}
+
+const EmailSchema = z.object({
+  name: z.string().optional(),
+  email: z.string().email(),
+  password: z.string().optional(),
+});
+
+const availableSocialProviders = {
+  google: {
+    id: "google",
+    name: "Google",
+    icon: FaGoogle,
+  },
+  github: {
+    id: "github",
+    name: "GitHub",
+    icon: FaGithub,
+  },
+  discord: {
+    id: "discord",
+    name: "Discord",
+    icon: FaDiscord,
+  },
+  apple: {
+    id: "apple",
+    name: "Apple",
+    icon: FaApple,
+  },
+  microsoft: {
+    id: "microsoft",
+    name: "Microsoft",
+    icon: FaMicrosoft,
+  },
+  facebook: {
+    id: "facebook",
+    name: "Facebook",
+    icon: FaFacebook,
+  },
+  spotify: {
+    id: "spotify",
+    name: "Spotify",
+    icon: FaSpotify,
+  },
+  twitch: {
+    id: "twitch",
+    name: "Twitch",
+    icon: FaTwitch,
+  },
+  twitter: {
+    id: "twitter",
+    name: "Twitter",
+    icon: FaTwitter,
+  },
+  dropbox: {
+    id: "dropbox",
+    name: "Dropbox",
+    icon: FaDropbox,
+  },
+  linkedin: {
+    id: "linkedin",
+    name: "LinkedIn",
+    icon: FaLinkedin,
+  },
+  gitlab: {
+    id: "gitlab",
+    name: "GitLab",
+    icon: FaGitlab,
+  },
+  tiktok: {
+    id: "tiktok",
+    name: "TikTok",
+    icon: FaTiktok,
+  },
+  reddit: {
+    id: "reddit",
+    name: "Reddit",
+    icon: FaReddit,
+  },
+  roblox: {
+    id: "roblox",
+    name: "Roblox",
+    icon: SiRoblox,
+  },
+  vk: {
+    id: "vk",
+    name: "VK",
+    icon: FaVk,
+  },
+  kick: {
+    id: "kick",
+    name: "Kick",
+    icon: TbBrandKick,
+  },
+  zoom: {
+    id: "zoom",
+    name: "Zoom",
+    icon: SiZoom,
+  },
+  oidc: {
+    id: "oidc",
+    name: "OIDC",
+    icon: FaOpenid,
+  },
+};
+
+export function Auth({ setIsMagicLinkSent, isSignUp }: AuthProps) {
+  const [isCloudEnv, setIsCloudEnv] = useState(false);
+  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";
+    const isCloudEnv = env("NEXT_PUBLIC_KAN_ENV") === "cloud";
+    setIsCloudEnv(isCloudEnv);
+    setIsEmailSendingEnabled(emailSendingEnabled);
+    setIsCredentialsEnabled(credentialsAllowed);
+  }, []);
+
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+    watch,
+  } = useForm<FormValues>({
+    resolver: zodResolver(EmailSchema),
+  });
+
+  const { data: socialProviders } = useQuery({
+    queryKey: ["social_providers"],
+    queryFn: () => authClient.getSocialProviders(),
+  });
+
+  const handleLoginWithEmail = async (
+    email: string,
+    password?: string | null,
+    name?: string,
+  ) => {
+    setIsLoginWithEmailPending(true);
+    setLoginError(null);
+    if (password) {
+      if (isSignUp && name) {
+        await authClient.signUp.email(
+          {
+            name,
+            email,
+            password,
+            callbackURL,
+          },
+          {
+            onSuccess: () =>
+              showPopup({
+                header: t`Success`,
+                message: t`You have been signed up successfully.`,
+                icon: "success",
+              }),
+            onError: ({ error }) => setLoginError(error.message),
+          },
+        );
+      } else {
+        await authClient.signIn.email(
+          {
+            email,
+            password,
+            callbackURL,
+          },
+          {
+            onSuccess: () =>
+              showPopup({
+                header: t`Success`,
+                message: t`You have been logged in successfully.`,
+                icon: "success",
+              }),
+            onError: ({ error }) => setLoginError(error.message),
+          },
+        );
+      }
+    } else {
+      // Only allow magic link if email sending is enabled and not in sign up mode
+      if (isCloudEnv || (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.`,
+        );
+      }
+    }
+
+    setIsLoginWithEmailPending(false);
+  };
+
+  const handleLoginWithProvider = async (provider: AuthProvider) => {
+    setIsLoginWithProviderPending(provider);
+    setLoginError(null);
+
+    let error;
+    if (provider === "oidc") {
+      // Use oauth2 signin for OIDC provider
+      const result = await authClient.signIn.oauth2({
+        providerId: "oidc",
+        callbackURL,
+      });
+      error = result.error;
+    } else {
+      // Use social signin for traditional social providers
+      const result = await authClient.signIn.social({
+        provider,
+        callbackURL,
+      });
+      error = result.error;
+    }
+
+    setIsLoginWithProviderPending(null);
+
+    if (error) {
+      setLoginError(
+        t`Failed to login with ${provider.at(0)?.toUpperCase() + provider.slice(1)}. Please try again.`,
+      );
+    }
+  };
+
+  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);
+  };
+
+  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 && (
+        <div className="space-y-2">
+          {Object.entries(availableSocialProviders).map(([key, provider]) => {
+            if (!socialProviders?.includes(key)) {
+              return null;
+            }
+            return (
+              <Button
+                key={key}
+                onClick={() => handleLoginWithProvider(key as AuthProvider)}
+                isLoading={isLoginWithProviderPending === key}
+                iconLeft={<provider.icon />}
+                fullWidth
+                size="lg"
+              >
+                <Trans>
+                  Continue with{" "}
+                  {key === "oidc" ? oidcProviderName : provider.name}
+                </Trans>
+              </Button>
+            );
+          })}
+        </div>
+      )}
+      <form onSubmit={handleSubmit(onSubmit)}>
+        {socialProviders?.length !== 0 && (
+          <div className="mb-[1.5rem] flex w-full items-center gap-4">
+            <div className="h-[1px] w-full bg-light-600 dark:bg-dark-600" />
+            <span className="text-sm text-light-900 dark:text-dark-900">
+              {t`or`}
+            </span>
+            <div className="h-[1px] w-full bg-light-600 dark:bg-dark-600" />
+          </div>
+        )}
+        <div className="space-y-2">
+          {isSignUp && isCredentialsEnabled && (
+            <div>
+              <Input
+                {...register("name", { required: true })}
+                placeholder={t`Enter your name`}
+              />
+              {errors.name && (
+                <p className="mt-2 text-xs text-red-400">
+                  {t`Please enter a valid name`}
+                </p>
+              )}
+            </div>
+          )}
+          <div>
+            <Input
+              {...register("email", { required: true })}
+              placeholder={t`Enter your email address`}
+            />
+            {errors.email && (
+              <p className="mt-2 text-xs text-red-400">
+                {t`Please enter a valid email address`}
+              </p>
+            )}
+          </div>
+          {isCredentialsEnabled && (
+            <div>
+              <Input
+                type="password"
+                {...register("password", { required: true })}
+                placeholder={t`Enter your password`}
+              />
+              {errors.password && (
+                <p className="mt-2 text-xs text-red-400">
+                  {errors.password.message ?? t`Please enter a valid password`}
+                </p>
+              )}
+            </div>
+          )}
+          {loginError && (
+            <p className="mt-2 text-xs text-red-400">{loginError}</p>
+          )}
+        </div>
+        <div className="mt-[1.5rem] flex items-center gap-4">
+          <Button
+            isLoading={isLoginWithEmailPending}
+            fullWidth
+            size="lg"
+            variant="secondary"
+          >
+            {isSignUp ? t`Sign up with ` : t`Continue with `}
+            {isMagicLinkMode ? t`magic link` : t`email`}
+          </Button>
+        </div>
+      </form>
+    </div>
+  );
+}

apps/web/src/components/Avatar.tsx

@@ -0,0 +1,72 @@
+import Image from "next/image";
+import { twMerge } from "tailwind-merge";
+
+import { getInitialsFromName, inferInitialsFromEmail } from "~/utils/helpers";
+
+const sizeMap = {
+  xs: 20,
+  sm: 24,
+  md: 36,
+  lg: 48,
+} as const;
+
+const Avatar = ({
+  size = "md",
+  name,
+  email,
+  icon,
+  imageUrl,
+  isLoading,
+}: {
+  size?: "xs" | "sm" | "md" | "lg";
+  name: string;
+  email: string;
+  imageUrl?: string;
+  icon?: React.ReactNode;
+  isLoading?: boolean;
+}) => {
+  const initials = name
+    ? getInitialsFromName(name)
+    : inferInitialsFromEmail(email);
+
+  return (
+    <>
+      {imageUrl ? (
+        <Image
+          src={imageUrl}
+          className="rounded-full bg-gray-50"
+          width={sizeMap[size]}
+          height={sizeMap[size]}
+          alt=""
+        />
+      ) : (
+        <span
+          className={twMerge(
+            "inline-flex h-9 w-9 items-center justify-center rounded-full bg-light-1000 dark:bg-dark-400",
+            isLoading && "animate-pulse bg-light-200 dark:bg-dark-200",
+            size === "xs" && "h-5 w-5",
+            size === "sm" && "h-6 w-6",
+            size === "lg" && "h-12 w-12",
+          )}
+        >
+          {icon ? (
+            <span className="text-[12px] text-white">{icon}</span>
+          ) : (
+            <span
+              className={twMerge(
+                "text-sm font-medium leading-none text-white",
+                size === "xs" && "text-[8px]",
+                size === "sm" && "text-[10px]",
+                size === "lg" && "text-md",
+              )}
+            >
+              {initials}
+            </span>
+          )}
+        </span>
+      )}
+    </>
+  );
+};
+
+export default Avatar;

apps/web/src/components/Badge.tsx

@@ -0,0 +1,10 @@
+import type { ReactNode } from "react";
+
+const Badge = ({ value, iconLeft }: { value: string; iconLeft: ReactNode }) => (
+  <span className="mt-1 inline-flex w-fit items-center gap-x-1.5 rounded-full px-2 py-1 text-[10px] font-medium text-neutral-600 ring-1 ring-inset ring-light-600 dark:text-dark-1000 dark:ring-dark-800">
+    {iconLeft}
+    <div>{value}</div>
+  </span>
+);
+
+export default Badge;

apps/web/src/components/Button.tsx

@@ -0,0 +1,91 @@
+import Link from "next/link";
+import { twMerge } from "tailwind-merge";
+
+import LoadingSpinner from "./LoadingSpinner";
+
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: "primary" | "secondary" | "danger" | "ghost";
+  size?: "xs" | "sm" | "md" | "lg";
+  isLoading?: boolean;
+  iconLeft?: React.ReactNode;
+  iconRight?: React.ReactNode;
+  href?: string;
+  fullWidth?: boolean;
+  openInNewTab?: boolean;
+}
+
+const Button = ({
+  children,
+  size = "md",
+  iconLeft,
+  iconRight,
+  isLoading,
+  variant = "primary",
+  href,
+  fullWidth,
+  openInNewTab,
+  ...props
+}: ButtonProps) => {
+  const classes = twMerge(
+    "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-2 text-sm font-semibold text-light-50 shadow-sm focus-visible:outline-none",
+    size === "xs" && "text-xs px-2 py-1",
+    size === "sm" && "text-xs",
+    size === "lg" && "py-[0.65rem]",
+    fullWidth && "w-full",
+    variant === "primary" &&
+      "bg-light-1000 dark:bg-dark-1000 dark:text-dark-50",
+    variant === "secondary" &&
+      "border-[1px] border-light-600 bg-light-50 text-light-1000 dark:border-dark-600 dark:bg-dark-300 dark:text-dark-1000",
+    variant === "danger" &&
+      "dark:text-red-1000 border-[1px] border-red-600 bg-red-500 dark:border-red-600 dark:bg-red-500",
+    variant === "ghost" &&
+      "bg-none text-light-1000 shadow-none hover:bg-light-300 dark:text-dark-1000 dark:hover:bg-dark-200",
+    props.disabled && "opacity-60",
+  );
+
+  const content = (
+    <span className="relative flex items-center justify-center">
+      {isLoading && (
+        <span className="absolute">
+          <LoadingSpinner size={size} />
+        </span>
+      )}
+      <div
+        className={twMerge(
+          "flex items-center",
+          isLoading ? "invisible" : "visible",
+        )}
+      >
+        {iconLeft && <span className="mr-2">{iconLeft}</span>}
+        {children}
+        {iconRight && <span className="ml-1">{iconRight}</span>}
+      </div>
+    </span>
+  );
+
+  if (href) {
+    return (
+      <Link
+        href={href}
+        className={classes}
+        target={openInNewTab ? "_blank" : undefined}
+        rel={openInNewTab ? "noopener noreferrer" : undefined}
+        {...(props as React.AnchorHTMLAttributes<HTMLAnchorElement>)}
+      >
+        {content}
+      </Link>
+    );
+  }
+
+  return (
+    <button
+      className={classes}
+      disabled={isLoading ?? props.disabled}
+      {...props}
+    >
+      {content}
+    </button>
+  );
+};
+
+export default Button;

apps/web/src/components/CheckboxDropdown.tsx

@@ -0,0 +1,194 @@
+import { Menu, Transition } from "@headlessui/react";
+import { Fragment, useState } from "react";
+import { HiEllipsisHorizontal, HiMiniPlus } from "react-icons/hi2";
+import { twMerge } from "tailwind-merge";
+
+interface Item {
+  key: string;
+  value: string;
+  selected: boolean;
+  leftIcon?: React.ReactNode;
+}
+
+interface Group {
+  key: string;
+  label: string;
+  icon: React.ReactNode;
+  items: Item[];
+}
+
+interface CheckboxDropdownProps {
+  children: React.ReactNode;
+  items?: Item[];
+  groups?: Group[];
+  createNewItemLabel?: string;
+  menuSpacing?: "sm" | "md" | "lg";
+  position?: "left" | "right";
+  handleSelect: (
+    groupKey: string | null,
+    item: { key: string; value: string },
+  ) => void;
+  handleEdit?: (key: string) => void;
+  handleCreate?: () => void;
+  asChild?: boolean;
+}
+
+export default function CheckboxDropdown({
+  children,
+  items,
+  groups,
+  createNewItemLabel = "Create new",
+  menuSpacing = "sm",
+  position = "left",
+  handleSelect,
+  handleEdit,
+  handleCreate,
+  asChild = true,
+}: CheckboxDropdownProps) {
+  const [selectedGroup, setSelectedGroup] = useState<string | null>(null);
+
+  const menuSpacingClass = {
+    sm: "top-[26px]",
+    md: "top-[32px]",
+    lg: "top-[38px]",
+  };
+
+  const renderMenuItems = (items: Item[], groupKey: string | null) => (
+    <>
+      {items.length > 0 ? (
+        items.map((item) => (
+          <Menu.Item key={item.key}>
+            <div
+              className="group flex items-center rounded-[5px] p-2 hover:bg-light-200 dark:hover:bg-dark-300"
+              onClick={(e) => {
+                e.preventDefault();
+                handleSelect(groupKey, { key: item.key, value: item.value });
+              }}
+            >
+              <input
+                id={item.key}
+                name={item.key}
+                type="checkbox"
+                className="h-[14px] w-[14px] rounded bg-transparent"
+                onClick={(event) => event.stopPropagation()}
+                onChange={() =>
+                  handleSelect(groupKey, { key: item.key, value: item.value })
+                }
+                checked={item.selected}
+              />
+              {item.leftIcon && (
+                <span className="ml-3 flex items-center">{item.leftIcon}</span>
+              )}
+              <label
+                htmlFor={item.key}
+                className="ml-3 text-[12px] text-dark-900"
+              >
+                {item.value}
+              </label>
+              {handleEdit && (
+                <button
+                  type="button"
+                  className="invisible ml-auto group-hover:visible"
+                  onClick={(event) => {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    handleEdit(item.key);
+                  }}
+                >
+                  <HiEllipsisHorizontal size={20} className="text-dark-900" />
+                </button>
+              )}
+            </div>
+          </Menu.Item>
+        ))
+      ) : (
+        !handleCreate && (
+          <div className="flex items-center p-2 text-[12px] text-dark-900">
+            No items
+          </div>
+        )
+      )}
+      {handleCreate && (
+        <button
+          type="button"
+          className="flex w-full items-center rounded-[5px] p-2 px-2 text-[12px] text-dark-900 hover:bg-light-200 dark:hover:bg-dark-300"
+          onClick={(e) => {
+            e.preventDefault();
+            handleCreate();
+          }}
+        >
+          <HiMiniPlus size={20} className="pr-1.5" />
+          {createNewItemLabel}
+        </button>
+      )}
+    </>
+  );
+
+  return (
+    <Menu
+      as="div"
+      className="relative flex w-full flex-wrap items-center text-left"
+    >
+      <>
+        <Menu.Button
+          as={asChild ? "div" : undefined}
+          className="h-full w-full cursor-pointer focus-visible:outline-none"
+        >
+          {children}
+        </Menu.Button>
+
+        <Transition
+          as={Fragment}
+          enter="transition ease-out duration-100"
+          enterFrom="transform opacity-0 scale-95"
+          enterTo="transform opacity-100 scale-100"
+          leave="transition ease-in duration-75"
+          leaveFrom="transform opacity-100 scale-100"
+          leaveTo="transform opacity-0 scale-95"
+          afterLeave={() => setSelectedGroup(null)}
+        >
+          <Menu.Items
+            className={twMerge(
+              "mt-2s absolute z-50 w-56 origin-top-left rounded-md border-[1px] border-light-200 bg-light-50 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:border-dark-500 dark:bg-dark-200",
+              position === "left" ? "left-0" : "right-0",
+              menuSpacingClass[menuSpacing],
+            )}
+          >
+            <div className="max-h-[350px] overflow-y-auto p-1">
+              {!selectedGroup ? (
+                <>
+                  {items && renderMenuItems(items, null)}
+
+                  {groups?.map((group) => (
+                    <Menu.Item key={group.key}>
+                      <div
+                        className="flex items-center rounded-[5px] p-2 hover:bg-light-200 dark:hover:bg-dark-300"
+                        onClick={(e) => {
+                          e.preventDefault();
+                          setSelectedGroup(group.key);
+                        }}
+                      >
+                        <span className="mr-2 text-dark-900">{group.icon}</span>
+                        <span className="pointer-events-none text-[12px] text-dark-900">
+                          {group.label}
+                        </span>
+                      </div>
+                    </Menu.Item>
+                  ))}
+                </>
+              ) : (
+                <>
+                  {groups?.find((g) => g.key === selectedGroup)?.items &&
+                    renderMenuItems(
+                      groups.find((g) => g.key === selectedGroup)?.items || [],
+                      selectedGroup,
+                    )}
+                </>
+              )}
+            </div>
+          </Menu.Items>
+        </Transition>
+      </>
+    </Menu>
+  );
+}

apps/web/src/components/CircularProgress.tsx

@@ -0,0 +1,58 @@
+import { twMerge } from "tailwind-merge";
+
+interface CircularProgressProps {
+  progress: number; // 0-100
+  size?: "sm" | "md" | "lg";
+  className?: string;
+}
+
+const CircularProgress = ({
+  progress,
+  size = "md",
+  className,
+}: CircularProgressProps) => {
+  const radius = 40;
+  const circumference = 2 * Math.PI * radius;
+  const strokeDashoffset = circumference - (progress / 100) * circumference;
+
+  return (
+    <div className={twMerge("relative", className)}>
+      <svg
+        className={twMerge(
+          "-rotate-90 transform",
+          size === "sm" && "h-4 w-4",
+          size === "md" && "h-5 w-5",
+          size === "lg" && "h-8 w-8",
+        )}
+        viewBox="0 0 100 100"
+      >
+        <circle
+          cx="50"
+          cy="50"
+          r={radius}
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="14"
+          className="text-light-300 dark:text-dark-400"
+        />
+        <circle
+          cx="50"
+          cy="50"
+          r={radius}
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="14"
+          strokeDasharray={circumference}
+          strokeDashoffset={strokeDashoffset}
+          strokeLinecap="round"
+          className={twMerge(
+            "transition-all duration-300 ease-in-out",
+            progress === 100 ? "text-green-500" : "text-blue-500",
+          )}
+        />
+      </svg>
+    </div>
+  );
+};
+
+export default CircularProgress;

apps/web/src/components/CommandPallette.tsx

@@ -0,0 +1,193 @@
+import { useRouter } from "next/router";
+import {
+  Combobox,
+  ComboboxInput,
+  ComboboxOption,
+  ComboboxOptions,
+  Dialog,
+  DialogBackdrop,
+  DialogPanel,
+} from "@headlessui/react";
+import { t } from "@lingui/macro";
+import { useState } from "react";
+import { HiDocumentText, HiFolder, HiMagnifyingGlass } from "react-icons/hi2";
+
+import { useDebounce } from "~/hooks/useDebounce";
+import { useWorkspace } from "~/providers/workspace";
+import { api } from "~/utils/api";
+
+type SearchResult =
+  | {
+      publicId: string;
+      title: string;
+      description: string | null;
+      slug: string;
+      updatedAt: Date | null;
+      createdAt: Date;
+      type: "board";
+    }
+  | {
+      publicId: string;
+      title: string;
+      description: string | null;
+      boardPublicId: string;
+      boardName: string;
+      listName: string;
+      updatedAt: Date | null;
+      createdAt: Date;
+      type: "card";
+    };
+
+export default function CommandPallette({
+  isOpen,
+  onClose,
+}: {
+  isOpen: boolean;
+  onClose: () => void;
+}) {
+  const [query, setQuery] = useState("");
+  const { workspace } = useWorkspace();
+  const router = useRouter();
+
+  // Debounce to avoid too many reqs
+  const [debouncedQuery] = useDebounce(query, 300);
+
+  const {
+    data: searchResults,
+    isLoading,
+    isFetched,
+    isPlaceholderData,
+  } = api.workspace.search.useQuery(
+    {
+      workspacePublicId: workspace.publicId,
+      query: debouncedQuery,
+    },
+    {
+      enabled: Boolean(workspace.publicId && debouncedQuery.trim().length > 0),
+      placeholderData: (previousData) => previousData,
+    },
+  );
+
+  // Clear results when query is empty, otherwise show search results
+  const results =
+    debouncedQuery.trim().length === 0
+      ? []
+      : ((searchResults ?? []) as SearchResult[]);
+
+  const hasSearched = Boolean(debouncedQuery.trim().length > 0);
+
+  return (
+    <Dialog
+      className="relative z-50"
+      open={isOpen}
+      onClose={() => {
+        onClose();
+        setQuery("");
+      }}
+    >
+      <DialogBackdrop
+        transition
+        className="data-closed:opacity-0 data-enter:duration-300 data-enter:ease-out data-leave:duration-200 data-leave:ease-in fixed inset-0 bg-light-50 bg-opacity-40 transition-opacity dark:bg-dark-50 dark:bg-opacity-40"
+      />
+
+      <div className="fixed inset-0 z-50 w-screen overflow-y-auto">
+        <div className="flex min-h-full items-start justify-center p-4 text-center sm:items-start sm:p-0">
+          <DialogPanel
+            transition
+            className="data-closed:opacity-0 data-closed:translate-y-4 data-closed:sm:translate-y-0 data-closed:sm:scale-95 data-enter:duration-300 data-enter:ease-out data-leave:duration-200 data-leave:ease-in relative mt-[25vh] w-full max-w-[550px] transform divide-y divide-gray-100 overflow-hidden rounded-lg border border-light-600 bg-white/90 shadow-3xl-light backdrop-blur-[6px] transition-all dark:divide-white/10 dark:border-dark-600 dark:bg-dark-100/90 dark:shadow-3xl-dark"
+          >
+            <Combobox>
+              <div className="grid grid-cols-1">
+                <ComboboxInput
+                  autoFocus
+                  className="col-start-1 row-start-1 h-12 w-full border-0 bg-transparent pl-11 pr-4 text-sm text-light-900 placeholder:text-light-700 focus:outline-none focus:ring-0 dark:text-dark-900 dark:placeholder:text-dark-700"
+                  placeholder={t`Search boards and cards...`}
+                  value={query}
+                  onChange={(event) => setQuery(event.target.value)}
+                  onKeyDown={(event) => {
+                    if (event.key === "Enter" && results.length > 0) {
+                      event.preventDefault();
+
+                      // Find the active option or fallback to first option
+                      const targetOption =
+                        document.querySelector(
+                          '[data-headlessui-state*="active"][role="option"]',
+                        ) ?? document.querySelector('[role="option"]');
+
+                      if (targetOption) {
+                        (targetOption as HTMLElement).click();
+                      }
+                    }
+                  }}
+                />
+                <HiMagnifyingGlass
+                  className="pointer-events-none col-start-1 row-start-1 ml-4 size-5 self-center text-light-700 dark:text-dark-700"
+                  aria-hidden="true"
+                />
+              </div>
+
+              {results.length > 0 && (
+                <ComboboxOptions
+                  static
+                  className={`max-h-72 scroll-py-2 overflow-y-auto py-2 ${
+                    isPlaceholderData ? "opacity-75" : ""
+                  }`}
+                >
+                  {results.map((result) => {
+                    const url =
+                      result.type === "board"
+                        ? `/boards/${result.publicId}`
+                        : `/cards/${result.publicId}`;
+
+                    return (
+                      <ComboboxOption
+                        key={`${result.type}-${result.publicId}`}
+                        value={result}
+                        className="cursor-pointer select-none px-4 py-3 data-[focus]:bg-light-200 hover:bg-light-200 focus:outline-none dark:data-[focus]:bg-dark-200 dark:hover:bg-dark-200"
+                        onClick={() => {
+                          console.log("clicked", url);
+                          void router.push(url);
+                          onClose();
+                          setQuery("");
+                        }}
+                      >
+                        <div className="flex items-start gap-3">
+                          <div className="mt-0.5 flex-shrink-0">
+                            {result.type === "board" ? (
+                              <HiFolder className="h-4 w-4 text-light-600 dark:text-dark-600" />
+                            ) : (
+                              <HiDocumentText className="h-4 w-4 text-light-600 dark:text-dark-600" />
+                            )}
+                          </div>
+                          <div className="min-w-0 flex-1 text-left">
+                            <div className="truncate text-sm font-bold text-light-900 dark:text-dark-900">
+                              {result.title}
+                            </div>
+                            {result.type === "card" && (
+                              <div className="truncate text-xs text-light-700 dark:text-dark-700">
+                                {`${t`in`} ${result.boardName} → ${result.listName}`}
+                              </div>
+                            )}
+                          </div>
+                        </div>
+                      </ComboboxOption>
+                    );
+                  })}
+                </ComboboxOptions>
+              )}
+
+              {hasSearched &&
+                !isLoading &&
+                searchResults !== undefined &&
+                results.length === 0 && (
+                  <div className="p-4 text-sm text-light-950 dark:text-dark-950">
+                    {t`No results found for "${debouncedQuery}".`}
+                  </div>
+                )}
+            </Combobox>
+          </DialogPanel>
+        </div>
+      </div>
+    </Dialog>
+  );
+}

apps/web/src/components/Dashboard.tsx

@@ -0,0 +1,190 @@
+import { useTheme } from "next-themes";
+import { useEffect, useRef, useState } from "react";
+import {
+  TbLayoutSidebarLeftCollapse,
+  TbLayoutSidebarLeftExpand,
+  TbLayoutSidebarRightCollapse,
+  TbLayoutSidebarRightExpand,
+} from "react-icons/tb";
+
+import { authClient } from "@kan/auth/client";
+
+import { useClickOutside } from "~/hooks/useClickOutside";
+import { useModal } from "~/providers/modal";
+import { useWorkspace, WorkspaceProvider } from "~/providers/workspace";
+import SideNavigation from "./SideNavigation";
+
+interface DashboardProps {
+  children: React.ReactNode;
+  rightPanel?: React.ReactNode;
+  hasRightPanel?: boolean;
+}
+
+export function getDashboardLayout(
+  page: React.ReactElement,
+  rightPanel?: React.ReactNode,
+  hasRightPanel = false,
+) {
+  return (
+    <WorkspaceProvider>
+      <Dashboard rightPanel={rightPanel} hasRightPanel={hasRightPanel}>
+        {page}
+      </Dashboard>
+    </WorkspaceProvider>
+  );
+}
+
+export default function Dashboard({
+  children,
+  rightPanel,
+  hasRightPanel = false,
+}: DashboardProps) {
+  const { theme } = useTheme();
+  const { openModal } = useModal();
+  const { availableWorkspaces, hasLoaded } = useWorkspace();
+
+  const { data: session, isPending: sessionLoading } = authClient.useSession();
+
+  const [isSideNavOpen, setIsSideNavOpen] = useState(false);
+  const [isRightPanelOpen, setIsRightPanelOpen] = useState(false);
+
+  const sideNavRef = useRef<HTMLDivElement>(null);
+  const rightPanelRef = useRef<HTMLDivElement>(null);
+  const sideNavButtonRef = useRef<HTMLButtonElement>(null);
+  const rightPanelButtonRef = useRef<HTMLButtonElement>(null);
+
+  const toggleSideNav = () => {
+    setIsSideNavOpen(!isSideNavOpen);
+    if (!isSideNavOpen) {
+      setIsRightPanelOpen(false);
+    }
+  };
+
+  const closeSideNav = () => {
+    setIsSideNavOpen(false);
+  };
+
+  const toggleRightPanel = () => {
+    setIsRightPanelOpen(!isRightPanelOpen);
+    if (!isRightPanelOpen) {
+      setIsSideNavOpen(false);
+    }
+  };
+
+  useClickOutside(sideNavRef, (event) => {
+    if (sideNavButtonRef.current?.contains(event.target as Node)) {
+      return;
+    }
+    if (isSideNavOpen) {
+      setIsSideNavOpen(false);
+    }
+  });
+
+  useClickOutside(rightPanelRef, (event) => {
+    if (rightPanelButtonRef.current?.contains(event.target as Node)) {
+      return;
+    }
+    if (isRightPanelOpen) {
+      setIsRightPanelOpen(false);
+    }
+  });
+
+  useEffect(() => {
+    if (hasLoaded && availableWorkspaces.length === 0) {
+      openModal("NEW_WORKSPACE", undefined, undefined, false);
+    }
+  }, [hasLoaded, availableWorkspaces.length, openModal]);
+
+  const isDarkMode = theme === "dark";
+
+  return (
+    <>
+      <style jsx global>{`
+        html {
+          height: 100vh;
+          overflow: hidden;
+          min-width: 320px;
+          background-color: ${!isDarkMode ? "hsl(0deg 0% 97.3%)" : "#1c1c1c"};
+        }
+      `}</style>
+      <div className="relative flex h-screen flex-col bg-light-50 dark:bg-dark-50 md:bg-light-100 md:p-3 md:dark:bg-dark-100">
+        {/* Mobile Header */}
+        <div className="flex h-12 items-center justify-between border-b border-light-300 bg-light-50 px-3 dark:border-dark-300 dark:bg-dark-50 md:hidden">
+          <button
+            ref={sideNavButtonRef}
+            onClick={toggleSideNav}
+            className="rounded p-1.5 transition-all hover:bg-light-200 dark:hover:bg-dark-100"
+          >
+            {isSideNavOpen ? (
+              <TbLayoutSidebarLeftCollapse
+                size={20}
+                className="text-light-900 dark:text-dark-900"
+              />
+            ) : (
+              <TbLayoutSidebarLeftExpand
+                size={20}
+                className="text-light-900 dark:text-dark-900"
+              />
+            )}
+          </button>
+
+          {hasRightPanel && (
+            <button
+              ref={rightPanelButtonRef}
+              onClick={toggleRightPanel}
+              className="rounded p-1.5 transition-all hover:bg-light-200 dark:hover:bg-dark-100"
+            >
+              {isRightPanelOpen ? (
+                <TbLayoutSidebarRightCollapse
+                  size={20}
+                  className="text-light-900 dark:text-dark-900"
+                />
+              ) : (
+                <TbLayoutSidebarRightExpand
+                  size={20}
+                  className="text-light-900 dark:text-dark-900"
+                />
+              )}
+            </button>
+          )}
+        </div>
+
+        <div className="flex h-[calc(100dvh-4.5rem)] min-h-0 w-full md:h-[calc(100dvh-1.5rem)]">
+          <div
+            ref={sideNavRef}
+            className={`fixed top-12 z-40 h-[calc(100dvh-3rem)] w-[calc(100vw-1.5rem)] transform transition-transform duration-300 ease-in-out md:relative md:top-0 md:h-full md:w-auto md:translate-x-0 ${isSideNavOpen ? "translate-x-0" : "-translate-x-full md:translate-x-0"} `}
+          >
+            <SideNavigation
+              user={{ email: session?.user.email, image: session?.user.image }}
+              isLoading={sessionLoading}
+              onCloseSideNav={closeSideNav}
+            />
+          </div>
+
+          <div className="relative h-full min-h-0 w-full overflow-hidden md:rounded-lg md:border md:border-light-300 md:bg-light-50 md:dark:border-dark-300 md:dark:bg-dark-50">
+            <div className="relative flex h-full min-h-0 w-full overflow-hidden">
+              <div className="h-full w-full overflow-y-auto">{children}</div>
+
+              {/* Mobile Right Panel */}
+              {hasRightPanel && rightPanel && (
+                <div
+                  ref={rightPanelRef}
+                  className={`fixed right-0 top-12 z-40 h-[calc(100dvh-3rem)] w-80 transform border-l border-light-300 bg-light-200 transition-transform duration-300 ease-in-out dark:border-dark-300 dark:bg-dark-100 md:hidden ${
+                    isRightPanelOpen ? "translate-x-0" : "translate-x-full"
+                  }`}
+                >
+                  <div className="h-full">{rightPanel}</div>
+                </div>
+              )}
+
+              {/* Desktop Right Panel */}
+              {hasRightPanel && rightPanel && (
+                <div className="hidden md:block">{rightPanel}</div>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}

apps/web/src/components/DeleteLabelConfirmation.tsx

@@ -0,0 +1,55 @@
+import { t } from "@lingui/core/macro";
+
+import Button from "~/components/Button";
+import { useModal } from "~/providers/modal";
+import { usePopup } from "~/providers/popup";
+import { api } from "~/utils/api";
+
+export function DeleteLabelConfirmation({
+  labelPublicId,
+  refetch,
+}: {
+  labelPublicId: string;
+  refetch: () => void;
+}) {
+  const { closeModal, closeModals } = useModal();
+  const { showPopup } = usePopup();
+
+  const deleteLabelMutation = api.label.delete.useMutation({
+    onSuccess: () => {
+      refetch();
+      closeModals(2);
+    },
+    onError: () =>
+      showPopup({
+        header: t`Error deleting label`,
+        message: t`Please try again later, or contact customer support.`,
+        icon: "error",
+      }),
+  });
+
+  const handleDeleteLabel = () => {
+    deleteLabelMutation.mutate({
+      labelPublicId,
+    });
+  };
+
+  return (
+    <div className="p-5">
+      <div className="flex w-full flex-col justify-between pb-4">
+        <h2 className="text-md pb-4 font-medium text-neutral-900 dark:text-dark-1000">
+          {t`Are you sure you want to delete this label?`}
+        </h2>
+        <p className="text-sm font-medium text-light-900 dark:text-dark-900">
+          {t`This action can't be undone.`}
+        </p>
+      </div>
+      <div className="mt-5 flex justify-end space-x-2 sm:mt-6">
+        <Button variant="secondary" onClick={() => closeModal()}>
+          {t`Cancel`}
+        </Button>
+        <Button onClick={handleDeleteLabel}>{t`Delete`}</Button>
+      </div>
+    </div>
+  );
+}

apps/web/src/components/Dropdown.tsx

@@ -0,0 +1,51 @@
+import { Menu, Transition } from "@headlessui/react";
+import { Fragment } from "react";
+
+export default function Dropdown({
+  items,
+  children,
+  disabled,
+}: {
+  items: { label: string; action: () => void; icon?: React.ReactNode }[];
+  children: React.ReactNode;
+  disabled?: boolean;
+}) {
+  return (
+    <Menu as="div" className="relative inline-block text-left">
+      <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"
+        >
+          {children}
+        </Menu.Button>
+      </div>
+
+      <Transition
+        as={Fragment}
+        enter="transition ease-out duration-100"
+        enterFrom="transform opacity-0 scale-95"
+        enterTo="transform opacity-100 scale-100"
+        leave="transition ease-in duration-75"
+        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">
+          <div className="flex flex-col">
+            {items.map((item) => (
+              <Menu.Item key={item.label}>
+                <button
+                  onClick={item.action}
+                  className="flex w-auto items-center gap-2 rounded-[5px] px-2.5 py-1.5 text-left text-sm text-neutral-900 hover:bg-light-200 dark:text-dark-950 dark:hover:bg-dark-400"
+                >
+                  {item.icon}
+                  {item.label}
+                </button>
+              </Menu.Item>
+            ))}
+          </div>
+        </Menu.Items>
+      </Transition>
+    </Menu>
+  );
+}

apps/web/src/components/Editor.tsx

@@ -0,0 +1,620 @@
+import type { Editor as TiptapEditor } from "@tiptap/react";
+import type {
+  SuggestionKeyDownProps,
+  SuggestionOptions,
+} from "@tiptap/suggestion";
+import type { Instance as TippyInstance } from "tippy.js";
+import { Button } from "@headlessui/react";
+import { t } from "@lingui/core/macro";
+import Link from "@tiptap/extension-link";
+import Placeholder from "@tiptap/extension-placeholder";
+import {
+  BubbleMenu,
+  EditorContent,
+  Extension,
+  ReactRenderer,
+  useEditor,
+} from "@tiptap/react";
+import StarterKit from "@tiptap/starter-kit";
+import Suggestion from "@tiptap/suggestion";
+import {
+  forwardRef,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+  useState,
+} from "react";
+import {
+  HiH1,
+  HiH2,
+  HiH3,
+  HiOutlineBold,
+  HiOutlineChatBubbleLeftEllipsis,
+  HiOutlineCodeBracket,
+  HiOutlineCodeBracketSquare,
+  HiOutlineItalic,
+  HiOutlineListBullet,
+  HiOutlineNumberedList,
+  HiOutlineStrikethrough,
+} from "react-icons/hi2";
+import { twMerge } from "tailwind-merge";
+import tippy from "tippy.js";
+import Mention from "@tiptap/extension-mention";
+import Avatar from "./Avatar";
+import { getAvatarUrl } from "~/utils/helpers";
+
+declare module "@tiptap/core" {
+  interface Commands<ReturnType> {
+    slashSuggestion: {
+      setSlashSuggestion: () => ReturnType;
+    };
+  }
+}
+
+export interface SlashCommandItem {
+  title: string;
+  icon?: React.ReactNode;
+  command?: (props: { editor: TiptapEditor; range: Range }) => void;
+  disabled?: boolean;
+}
+
+export interface SlashCommandsOptions {
+  suggestion?: Partial<SuggestionOptions>;
+  commandItems?: SlashCommandItem[];
+  options?: any;
+}
+
+function filterSlashCommandItems(items: SlashCommandItem[], query: string) {
+  return items.filter((item) =>
+    item.title.toLowerCase().includes(query.toLowerCase()),
+  );
+}
+
+export interface RenderSuggestionsProps {
+  editor: TiptapEditor;
+  clientRect: () => DOMRect;
+  items: SlashCommandItem[];
+  command: (item: SlashCommandItem) => void;
+}
+
+export type WorkspaceMember = {
+  publicId: string;
+  user: {
+    id: string;
+    name: string | null;
+    image: string | null;
+  } | null;
+  email: string;
+};
+
+const CommandsList = forwardRef<
+  { onKeyDown: (props: SuggestionKeyDownProps) => boolean },
+  {
+    items: SlashCommandItem[];
+    command: (item: SlashCommandItem) => void;
+  }
+>(({ items, command }, ref) => {
+  const [selectedIndex, setSelectedIndex] = useState(0);
+
+  useImperativeHandle(ref, () => ({
+    onKeyDown: ({ event }: SuggestionKeyDownProps) => {
+      if (event.key === "ArrowUp") {
+        setSelectedIndex((selectedIndex + items.length - 1) % items.length);
+        return true;
+      }
+
+      if (event.key === "ArrowDown") {
+        setSelectedIndex((selectedIndex + 1) % items.length);
+        return true;
+      }
+
+      if (event.key === "Enter") {
+        const item = items[selectedIndex];
+        if (item) {
+          command(item);
+        }
+        return true;
+      }
+
+      return false;
+    },
+  }));
+
+  return (
+    <div className="w-56 rounded-md border-[1px] border-light-200 bg-light-50 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:border-dark-500 dark:bg-dark-200">
+      <div className="max-h-[350px] overflow-y-auto p-1">
+        {items.map((item, index) => (
+          <button
+            key={item.title}
+            onClick={() => command(item)}
+            className={twMerge(
+              "group flex w-full items-center rounded-[5px] p-2 hover:bg-light-200 dark:hover:bg-dark-300",
+              index === selectedIndex && "bg-light-200 dark:bg-dark-300",
+            )}
+          >
+            <span className="text-dark-700 dark:text-dark-800">
+              {item.icon}
+            </span>
+            <span className="ml-3 text-[12px] font-medium text-dark-900 dark:text-dark-1000">
+              {item.title}
+            </span>
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+});
+
+CommandsList.displayName = "CommandsList";
+
+const RenderSuggestions = () => {
+  let reactRenderer: ReactRenderer;
+  let popup: TippyInstance[];
+
+  return {
+    onStart: (props: RenderSuggestionsProps) => {
+      reactRenderer = new ReactRenderer(CommandsList, {
+        props,
+        editor: props.editor,
+      });
+
+      if (!props.clientRect) return;
+
+      popup = tippy("body", {
+        getReferenceClientRect: props.clientRect,
+        appendTo: () => document.body,
+        content: reactRenderer.element,
+        showOnCreate: true,
+        interactive: true,
+        trigger: "manual",
+        placement: "bottom-start",
+      });
+    },
+    onUpdate(props: RenderSuggestionsProps) {
+      reactRenderer.updateProps(props);
+
+      if (!props.clientRect) return;
+
+      popup[0]?.setProps({
+        getReferenceClientRect: props.clientRect,
+      });
+    },
+    onKeyDown(props: SuggestionKeyDownProps): boolean {
+      if (props.event.key === "Escape") {
+        popup[0]?.hide();
+        return true;
+      }
+
+      return (
+        (
+          reactRenderer.ref as {
+            onKeyDown?: (props: SuggestionKeyDownProps) => boolean;
+          }
+        ).onKeyDown?.(props) ?? false
+      );
+    },
+    onExit() {
+      popup[0]?.destroy();
+      reactRenderer.destroy();
+    },
+  };
+};
+
+type MentionItem = { id: string; label: string; image: string | null };
+
+const MentionList = forwardRef<
+  { onKeyDown: (props: SuggestionKeyDownProps) => boolean },
+  {
+    items: MentionItem[];
+    command: (item: MentionItem) => void;
+  }
+>(({ items, command }, ref) => {
+  const [selectedIndex, setSelectedIndex] = useState(0);
+
+  useImperativeHandle(ref, () => ({
+    onKeyDown: ({ event }: SuggestionKeyDownProps) => {
+      if (event.key === "ArrowUp") {
+        setSelectedIndex((selectedIndex + items.length - 1) % items.length);
+        return true;
+      }
+
+      if (event.key === "ArrowDown") {
+        setSelectedIndex((selectedIndex + 1) % items.length);
+        return true;
+      }
+
+      if (event.key === "Enter") {
+        const item = items[selectedIndex];
+        if (item) {
+          command(item);
+        }
+        return true;
+      }
+
+      return false;
+    },
+  }));
+
+  return (
+    <div className="w-56 rounded-md border-[1px] border-light-200 bg-light-50 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:border-dark-500 dark:bg-dark-200">
+      <div className="max-h-[350px] overflow-y-auto p-1 scrollbar-thin scrollbar-thumb-light-200 dark:scrollbar-thumb-dark-300">
+        {items.length > 0 ? items.map((item, index) => (
+          <button
+            key={item.id}
+            onClick={() => command(item)}
+            className={twMerge(
+              "group flex w-full items-center rounded-[5px] p-2 hover:bg-light-200 dark:hover:bg-dark-300",
+              index === selectedIndex && "bg-light-200 dark:bg-dark-300",
+            )}
+          >
+            <Avatar
+              size="xs"
+              name={item.label}
+              imageUrl={
+                item.image ? getAvatarUrl(item.image) : undefined
+              }
+              email={item.label}
+            />
+            <span className="ml-3 text-[12px] font-medium text-dark-900 dark:text-dark-1000">
+              {item.label}
+            </span>
+          </button>
+        )) : (
+          <div className="flex items-center justify-start p-2">
+            <span className="text-dark-900 text-[12px] dark:text-dark-1000">No results</span>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+});
+
+MentionList.displayName = "MentionList";
+
+const renderMentionSuggestions = () => {
+  let reactRenderer: ReactRenderer;
+  let popup: TippyInstance[];
+
+  return {
+    onStart: (props: any) => {
+      reactRenderer = new ReactRenderer(MentionList, {
+        props,
+        editor: props.editor,
+      });
+
+      if (!props.clientRect) return;
+
+      popup = tippy("body", {
+        getReferenceClientRect: props.clientRect,
+        appendTo: () => document.body,
+        content: reactRenderer.element,
+        showOnCreate: true,
+        interactive: true,
+        trigger: "manual",
+        placement: "bottom-start",
+      });
+    },
+    onUpdate(props: any) {
+      reactRenderer.updateProps(props);
+      if (!props.clientRect) return;
+      popup[0]?.setProps({ getReferenceClientRect: props.clientRect });
+    },
+    onKeyDown(props: SuggestionKeyDownProps) {
+      if (props.event.key === "Escape") {
+        popup[0]?.hide();
+        return true;
+      }
+      return (
+        (
+          reactRenderer.ref as {
+            onKeyDown?: (props: SuggestionKeyDownProps) => boolean;
+          }
+        ).onKeyDown?.(props) ?? false
+      );
+    },
+    onExit() {
+      popup[0]?.destroy();
+      reactRenderer.destroy();
+    },
+  };
+};
+
+const SlashCommands = Extension.create<SlashCommandsOptions>({
+  name: "slash-commands",
+  addOptions() {
+    return {
+      suggestion: {
+        char: "/",
+        command: ({ editor, range, props }) => {
+          editor.chain().focus().deleteRange(range).run();
+          props.command({ editor, range });
+        },
+        items: ({ query }: { query: string }) => {
+          return filterSlashCommandItems(
+            this.parent().commandItems ?? [],
+            query,
+          );
+        },
+        render: () => {
+          let component: ReturnType<typeof RenderSuggestions>;
+          return {
+            onStart: (props: any) => {
+              component = RenderSuggestions();
+              component.onStart(props);
+            },
+            onUpdate(props: any) {
+              component.onUpdate(props);
+            },
+            onKeyDown(props: any) {
+              if (props.event.key === "Escape") {
+                return true;
+              }
+              return component.onKeyDown(props) ?? false;
+            },
+            onExit: () => {
+              component.onExit();
+            },
+          };
+        },
+      },
+      commandItems: [] as SlashCommandItem[],
+    };
+  },
+  addProseMirrorPlugins() {
+    return [
+      Suggestion({
+        editor: this.editor,
+        ...this.options.suggestion,
+        render: RenderSuggestions,
+      } as SuggestionOptions),
+    ];
+  },
+});
+
+export interface SlashNodeAttrs {
+  id: string | null;
+  label?: string | null;
+}
+
+const CommandItems: SlashCommandItem[] = [
+  {
+    title: "Heading 1",
+    icon: <HiH1 />,
+    command: ({ editor }) =>
+      editor.chain().focus().setHeading({ level: 1 }).run(),
+  },
+  {
+    title: "Heading 2",
+    icon: <HiH2 />,
+    command: ({ editor }) =>
+      editor.chain().focus().setHeading({ level: 2 }).run(),
+  },
+  {
+    title: "Heading 3",
+    icon: <HiH3 />,
+    command: ({ editor }) =>
+      editor.chain().focus().setHeading({ level: 3 }).run(),
+  },
+  {
+    title: "Bullet List",
+    icon: <HiOutlineListBullet />,
+    command: ({ editor }) => editor.chain().focus().toggleBulletList().run(),
+  },
+  {
+    title: "Ordered List",
+    icon: <HiOutlineNumberedList />,
+    command: ({ editor }) => editor.chain().focus().toggleOrderedList().run(),
+  },
+  {
+    title: "Blockquote",
+    icon: <HiOutlineChatBubbleLeftEllipsis />,
+    command: ({ editor }) => editor.chain().focus().toggleBlockquote().run(),
+  },
+  {
+    title: "Code Block",
+    icon: <HiOutlineCodeBracketSquare />,
+    command: ({ editor }) => editor.chain().focus().toggleCodeBlock().run(),
+  },
+];
+
+export default function Editor({
+  content,
+  onChange,
+  onBlur,
+  readOnly = false,
+  workspaceMembers,
+}: {
+  content: string | null;
+  onChange?: (value: string) => void;
+  onBlur?: () => void;
+  readOnly?: boolean;
+  workspaceMembers: WorkspaceMember[];
+}) {
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  const editor = useEditor(
+    {
+      extensions: [
+        StarterKit,
+        Placeholder.configure({
+          placeholder: readOnly
+            ? ""
+            : t`Add description... (type '/' to open commands or '@' to mention)`,
+        }),
+        Link.configure({
+          openOnClick: true,
+          HTMLAttributes: {
+            class: "text-blue-600 hover:text-blue-800 underline cursor-pointer",
+            target: "_blank",
+            rel: "noopener noreferrer",
+          },
+          validate: (href) => /^https?:\/\//.test(href),
+          autolink: true,
+        }),
+        SlashCommands.configure({
+          commandItems: CommandItems,
+          suggestion: {
+            items: ({ query }: { query: string }) =>
+              filterSlashCommandItems(CommandItems, query),
+            startOfLine: true,
+            char: "/",
+          },
+        }),
+        Mention.configure({
+          HTMLAttributes: {
+            class: 'mention',
+          },
+          suggestion: {
+            char: "@",
+            items: ({ query }: { query: string }) => {
+              const all: MentionItem[] = workspaceMembers.map((member: WorkspaceMember) => ({
+                id: member.publicId,
+                label: member?.user?.name ?? member.email,
+                image: member?.user?.image ?? null,
+              }));
+              const q = query.toLowerCase();
+              return all.filter((u) => u.label.toLowerCase().includes(q));
+            },
+            command: ({ editor, range, props }: any) => {
+               const mentionHTML = `<span data-type="mention" data-id="${props.id}" data-label="${props.label}">@${props.label}</span>&nbsp;`;
+               
+               editor
+               .chain()
+               .focus()
+               .deleteRange(range)
+               .insertContent(mentionHTML)
+               .focus()
+               .run();
+              },
+              render: renderMentionSuggestions,
+            },
+            renderText({ options, node }) {
+              return `${options.suggestion.char}${node.attrs.label ?? node.attrs.id}`;
+            },
+        }),
+      ],
+      content,
+      onUpdate: ({ editor }) => onChange?.(editor.getHTML()),
+      onBlur: ({ event }) => {
+        if (
+          document
+            .querySelector(".tippy-box")
+            ?.contains(event.relatedTarget as Node)
+        )
+          return;
+        // Only trigger onBlur if the click was outside both the editor and menu
+        if (!containerRef.current?.contains(event.relatedTarget as Node)) {
+          onBlur?.();
+        }
+      },
+      editorProps: {
+        attributes: {
+          class: "outline-none focus:outline-none focus-visible:ring-0",
+        },
+      },
+      editable: !readOnly,
+      injectCSS: false,
+    },
+    [], // creating the editor only once
+  );
+
+  // this will sync external content changes without re-creating the editor instance
+  useEffect(() => {
+    if (!editor) return;
+    const currentHTML = editor.getHTML();
+    const safeContent = content ?? "";
+    if (safeContent !== currentHTML) {
+      editor.commands.setContent(safeContent, false);
+    }
+  }, [content, editor]);
+
+  return (
+    <div ref={containerRef}>
+      <style jsx global>{`
+        .tiptap p.is-empty::before {
+          content: attr(data-placeholder);
+          float: left;
+          height: 0;
+          pointer-events: none;
+        }
+        .tiptap p {
+          margin: 0 0 1rem 0 !important;
+        }
+        .tiptap .mention {
+          background-color: rgba(59, 130, 246, 0.1);
+          border-radius: 0.25rem;
+          padding: 0.125rem 0.25rem;
+          color: rgb(59, 130, 246);
+          text-decoration: none;
+          font-weight: 500;
+        }
+      `}</style>
+      {!readOnly && editor && <EditorBubbleMenu editor={editor} />}
+      <EditorContent
+        editor={editor}
+        className="prose dark:prose-invert prose-sm max-w-none overflow-y-auto [&_blockquote]:!text-xs [&_h1]:!text-lg [&_h2]:!text-base [&_h3]:!text-sm [&_ol]:!text-xs [&_p.is-empty::before]:text-light-900 [&_p.is-empty::before]:dark:text-dark-800 [&_p]:!text-sm [&_p]:text-light-950 [&_p]:dark:text-dark-950 [&_ul]:!text-xs"
+      />
+    </div>
+  );
+}
+
+function EditorBubbleMenu({ editor }: { editor: TiptapEditor | null }) {
+  const isMac = navigator.platform.includes("Mac");
+
+  const bubbleMenuItems = [
+    {
+      title: "Bold",
+      icon: <HiOutlineBold />,
+      keys: ["meta", "b"],
+      onClick: () => editor?.chain().focus().toggleBold().run(),
+      active: editor?.isActive("bold"),
+    },
+    {
+      title: "Italic",
+      icon: <HiOutlineItalic />,
+      keys: ["meta", "i"],
+      onClick: () => editor?.chain().focus().toggleItalic().run(),
+      active: editor?.isActive("italic"),
+    },
+    {
+      title: "Strikethrough",
+      icon: <HiOutlineStrikethrough />,
+      keys: ["meta", "shift", "s"],
+      onClick: () => editor?.chain().focus().toggleStrike().run(),
+      active: editor?.isActive("strike"),
+    },
+    {
+      title: "Code",
+      icon: <HiOutlineCodeBracket />,
+      keys: ["meta", "e"],
+      onClick: () => editor?.chain().focus().toggleCode().run(),
+      active: editor?.isActive("code"),
+    },
+  ];
+  return (
+    <BubbleMenu editor={editor}>
+      <div className="flex items-center gap-2 rounded-md border border-light-600 bg-light-50 p-1 dark:border-dark-600 dark:bg-dark-50">
+        {bubbleMenuItems.map((item) => (
+          <Button
+            key={item.title}
+            className={twMerge(
+              "rounded p-1 text-light-900 focus:ring-2 focus:ring-light-600 dark:text-dark-900 dark:focus:ring-dark-600",
+              item.active && "bg-light-100 dark:bg-dark-400",
+            )}
+            title={`${item.title} [${item.keys.join(" + ").replace("meta", isMac ? "⌘" : "ctrl")}]`}
+            onClick={item.onClick}
+            tabIndex={0}
+            onKeyDown={(e) => {
+              if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                item.onClick();
+              }
+            }}
+          >
+            {item.icon}
+          </Button>
+        ))}
+      </div>
+    </BubbleMenu>
+  );
+}

apps/web/src/components/FeedbackModal.tsx

@@ -0,0 +1,122 @@
+import Link from "next/link";
+import { t } from "@lingui/core/macro";
+import { useEffect } from "react";
+import { useForm } from "react-hook-form";
+import { HiXMark } from "react-icons/hi2";
+
+import Button from "~/components/Button";
+import Input from "~/components/Input";
+import { useModal } from "~/providers/modal";
+import { usePopup } from "~/providers/popup";
+import { api } from "~/utils/api";
+
+interface NewFeedbackFormInput {
+  feedback: string;
+}
+
+export default function FeedbackModal() {
+  const { closeModal } = useModal();
+  const { showPopup } = usePopup();
+
+  const { handleSubmit, setValue, watch, reset } =
+    useForm<NewFeedbackFormInput>({
+      defaultValues: {
+        feedback: "",
+      },
+    });
+
+  const createFeedback = api.feedback.create.useMutation({
+    onSuccess: async () => {
+      reset();
+      closeModal();
+      showPopup({
+        header: t`Feedback sent`,
+        message: t`Thank you for your feedback!`,
+        icon: "success",
+      });
+    },
+    onError: async () => {
+      showPopup({
+        header: t`Unable to send feedback`,
+        message: t`Please try again later, or contact customer support.`,
+        icon: "error",
+      });
+    },
+  });
+
+  const onSubmit = (values: NewFeedbackFormInput) => {
+    createFeedback.mutate({
+      feedback: values.feedback,
+      url: window.location.href,
+    });
+  };
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)}>
+      <div className="px-5 pt-5">
+        <div className="flex w-full items-center justify-between pb-4">
+          <h2 className="text-sm font-bold text-neutral-900 dark:text-dark-1000">
+            {t`Feedback`}
+          </h2>
+          <button
+            type="button"
+            className="rounded p-1 hover:bg-light-200 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="feedback"
+          placeholder={t`Ideas to improve this page...`}
+          onChange={(e) => setValue("feedback", e.target.value)}
+          contentEditable
+          value={watch("feedback")}
+          className="min-h-[120px]"
+          onKeyDown={async (e) => {
+            e.stopPropagation();
+            if (e.key === "Enter" && e.shiftKey) {
+              e.preventDefault();
+              await handleSubmit(onSubmit)();
+            }
+            if (e.key === "Escape") {
+              closeModal();
+            }
+          }}
+        />
+      </div>
+      <div className="mt-6 flex items-center justify-between border-t border-light-600 px-5 pb-5 pt-5 dark:border-dark-600">
+        <div className="text-xs text-neutral-600 dark:text-dark-800">
+          <p>
+            {t`Need help?`}{" "}
+            <Link
+              href="mailto:support@kan.bn"
+              className="text-blue-600 underline dark:text-blue-300"
+            >
+              {t`Contact us`}
+            </Link>
+            {t`, or see our`}{" "}
+            <Link
+              href="https://docs.kan.bn"
+              target="_blank"
+              rel="noreferrer"
+              className="text-blue-600 underline dark:text-blue-300"
+            >
+              {t`docs`}
+            </Link>
+            .
+          </p>
+        </div>
+        <div>
+          <Button type="submit" isLoading={createFeedback.isPending}>
+            {t`Send feedback`}
+          </Button>
+        </div>
+      </div>
+    </form>
+  );
+}

apps/web/src/components/Input.tsx

@@ -0,0 +1,106 @@
+import React, { forwardRef, useState } from "react";
+import ContentEditable from "react-contenteditable";
+import { HiOutlineEye, HiOutlineEyeSlash } from "react-icons/hi2";
+import { twMerge } from "tailwind-merge";
+
+interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  contentEditable?: boolean;
+  prefix?: string;
+  iconRight?: React.ReactNode;
+  minHeight?: number;
+  value?: string;
+  errorMessage?: string;
+  className?: string;
+  onChange?: (
+    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
+  ) => void;
+  onKeyDown?: (e: React.KeyboardEvent) => void;
+  type?: string;
+}
+
+const Input = forwardRef<HTMLInputElement, InputProps>(
+  (
+    {
+      contentEditable,
+      errorMessage,
+      prefix,
+      value,
+      onChange,
+      onKeyDown,
+      iconRight,
+      className,
+      type = "text",
+      ...props
+    },
+    ref,
+  ) => {
+    const [showPassword, setShowPassword] = useState(false);
+
+    if (contentEditable) {
+      return (
+        <ContentEditable
+          placeholder={props.placeholder}
+          html={value ?? ""}
+          onChange={onChange}
+          onKeyDown={onKeyDown}
+          className={twMerge(
+            "block min-h-[70px] w-full cursor-text overflow-y-auto rounded-md border-0 bg-dark-300 bg-white/5 px-3 py-1.5 text-light-900 shadow-sm ring-1 ring-inset ring-light-600 focus:ring-2 focus:ring-inset focus:ring-light-600 focus-visible:outline-none dark:text-dark-1000 dark:ring-dark-700 dark:focus:ring-dark-700 sm:text-sm sm:leading-6",
+            className && className,
+          )}
+        />
+      );
+    }
+
+    return (
+      <div className="flex w-full flex-col gap-1">
+        <div className="relative flex">
+          {prefix && (
+            <div className="flex shrink-0 items-center rounded-l-md border border-r-0 border-light-600 px-3 text-sm dark:border-dark-700 dark:text-dark-1000 sm:text-sm/6">
+              {prefix}
+            </div>
+          )}
+          <input
+            ref={ref}
+            value={value}
+            onChange={onChange}
+            type={type === "password" && showPassword ? "text" : type}
+            className={twMerge(
+              "block w-full rounded-md border-0 bg-dark-300 bg-white/5 py-1.5 text-sm shadow-sm ring-1 ring-inset ring-light-600 placeholder:text-dark-800 focus:ring-2 focus:ring-inset focus:ring-light-700 dark:text-dark-1000 dark:ring-dark-700 dark:focus:ring-dark-700 sm:leading-6",
+              prefix && "rounded-l-none",
+              type === "password" && "pr-8",
+              className && className,
+            )}
+            onKeyDown={onKeyDown}
+            {...props}
+          />
+          {type === "password" && (
+            <button
+              type="button"
+              className="absolute right-3 top-1/2 -translate-y-1/2 text-xs text-light-900 dark:text-dark-900"
+              tabIndex={-1}
+              onClick={() => setShowPassword((v) => !v)}
+            >
+              {showPassword ? (
+                <HiOutlineEyeSlash className="h-4 w-4" />
+              ) : (
+                <HiOutlineEye className="h-4 w-4" />
+              )}
+            </button>
+          )}
+          {iconRight && type !== "password" && (
+            <div className="absolute right-3 top-1/2 -translate-y-1/2">
+              {iconRight}
+            </div>
+          )}
+        </div>
+        {errorMessage && (
+          <div className="text-xs text-red-500">{errorMessage}</div>
+        )}
+      </div>
+    );
+  },
+);
+
+Input.displayName = "Input";
+
+export default Input;

apps/web/src/components/LabelForm.tsx

@@ -0,0 +1,244 @@
+import { Listbox, Transition } from "@headlessui/react";
+import { t } from "@lingui/core/macro";
+import { Fragment, useEffect } from "react";
+import { Controller, useForm } from "react-hook-form";
+import { HiChevronUpDown, HiXMark } from "react-icons/hi2";
+
+import { colours } from "@kan/shared/constants";
+
+import Button from "~/components/Button";
+import Input from "~/components/Input";
+import Toggle from "~/components/Toggle";
+import { useModal } from "~/providers/modal";
+import { api } from "~/utils/api";
+
+interface LabelFormInput {
+  name: string;
+  colour: Colour;
+  isCreateAnotherEnabled?: boolean;
+}
+
+interface Colour {
+  name: string;
+  code: string;
+}
+
+export function LabelForm({
+  boardPublicId,
+  refetch,
+  isEdit,
+}: {
+  boardPublicId: string;
+  refetch: () => void;
+  isEdit?: boolean;
+}) {
+  const { closeModal, entityId, openModal, setModalState } = useModal();
+
+  const label = api.label.byPublicId.useQuery(
+    {
+      labelPublicId: entityId,
+    },
+    {
+      enabled: isEdit && !!entityId,
+    },
+  );
+
+  const { control, register, reset, handleSubmit, setValue, watch } =
+    useForm<LabelFormInput>({
+      values: {
+        name: isEdit && label.data?.name ? label.data.name : "",
+        colour: (isEdit && label.data?.colourCode
+          ? colours.find((c) => c.code === label.data?.colourCode)
+          : colours[0]) as Colour,
+        isCreateAnotherEnabled: false,
+      },
+    });
+
+  const isCreateAnotherEnabled = watch("isCreateAnotherEnabled");
+
+  const createLabel = api.label.create.useMutation({
+    onSuccess: (newLabel) => {
+      const currentColourIndex = colours.findIndex(
+        (c) => c.code === watch("colour").code,
+      );
+      try {
+        refetch();
+        setModalState("NEW_LABEL_CREATED", newLabel.publicId);
+        if (!isCreateAnotherEnabled) {
+          closeModal();
+        } else {
+          const newFormState = {
+            name: "",
+            colour: colours[(currentColourIndex + 1) % colours.length],
+            isCreateAnotherEnabled,
+          };
+          reset(newFormState);
+        }
+      } catch (e) {
+        console.log(e);
+      }
+    },
+  });
+
+  const updateLabel = api.label.update.useMutation({
+    onSuccess: () => {
+      refetch();
+      closeModal();
+    },
+  });
+
+  const onSubmit = (values: LabelFormInput) => {
+    if (!values.colour.code) return;
+
+    if (isEdit) {
+      updateLabel.mutate({
+        labelPublicId: label.data?.publicId ?? "",
+        name: values.name,
+        colourCode: values.colour.code,
+      });
+    } else {
+      createLabel.mutate({
+        name: values.name,
+        colourCode: values.colour.code,
+        boardPublicId,
+      });
+    }
+  };
+
+  useEffect(() => {
+    const nameElement: HTMLElement | null =
+      document.querySelector<HTMLElement>("#label-name");
+    if (nameElement) nameElement.focus();
+  }, []);
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)}>
+      <div className="px-5 pt-5">
+        <div className="flex w-full items-center justify-between pb-4 text-neutral-900 dark:text-dark-1000">
+          <h2 className="text-sm font-medium">
+            {isEdit ? t`Edit label` : t`New label`}
+          </h2>
+          <button
+            type="button"
+            className="rounded p-1 hover:bg-light-300 focus:outline-none dark:hover:bg-dark-300"
+            onClick={(e) => {
+              e.preventDefault();
+              closeModal();
+            }}
+          >
+            <HiXMark size={18} className="text-light-900 dark:text-dark-900" />
+          </button>
+        </div>
+
+        <Input
+          id="label-name"
+          placeholder={t`Name`}
+          {...register("name")}
+          onKeyDown={async (e) => {
+            if (e.key === "Enter") {
+              e.preventDefault();
+              await handleSubmit(onSubmit)();
+            }
+          }}
+        />
+        <Controller
+          name="colour"
+          control={control}
+          render={({ field }) => (
+            <Listbox {...field}>
+              {({ open }) => (
+                <>
+                  <div className="relative mt-4">
+                    <Listbox.Button className="block w-full rounded-md border-0 bg-white/5 px-4 py-1.5 shadow-sm ring-1 ring-inset ring-light-600 focus:ring-2 focus:ring-inset focus:ring-light-600 dark:bg-dark-300 dark:text-dark-1000 dark:ring-dark-700 dark:focus:ring-dark-700 sm:text-sm sm:leading-6">
+                      <span className="flex items-center">
+                        <span
+                          style={{ backgroundColor: field.value.code }}
+                          className={`inline-block h-2 w-2 flex-shrink-0 rounded-full`}
+                        />
+                        <span className="ml-3 block truncate">
+                          {field.value.name}
+                        </span>
+                      </span>
+                      <span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
+                        <HiChevronUpDown
+                          className="h-5 w-5 text-gray-400"
+                          aria-hidden="true"
+                        />
+                      </span>
+                    </Listbox.Button>
+
+                    <Transition
+                      show={open}
+                      as={Fragment}
+                      leave="transition ease-in duration-100"
+                      leaveFrom="opacity-100"
+                      leaveTo="opacity-0"
+                    >
+                      <Listbox.Options className="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-light-50 py-2 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:bg-dark-300 sm:text-sm">
+                        {colours.map((colour, index) => (
+                          <Listbox.Option
+                            key={`colours_${index}`}
+                            className="relative cursor-default select-none px-2 text-neutral-900 dark:text-dark-1000"
+                            value={colour}
+                          >
+                            {() => (
+                              <>
+                                <div className="flex items-center rounded-[5px] p-2 hover:bg-light-200 dark:hover:bg-dark-400">
+                                  <span
+                                    style={{ backgroundColor: colour.code }}
+                                    className="ml-2 inline-block h-2 w-2 flex-shrink-0 rounded-full"
+                                    aria-hidden="true"
+                                  />
+                                  <span className="ml-3 block truncate font-normal">
+                                    {colour.name}
+                                  </span>
+                                </div>
+                              </>
+                            )}
+                          </Listbox.Option>
+                        ))}
+                      </Listbox.Options>
+                    </Transition>
+                  </div>
+                </>
+              )}
+            </Listbox>
+          )}
+        />
+      </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">
+        {!isEdit && (
+          <Toggle
+            label={t`Create another`}
+            isChecked={!!isCreateAnotherEnabled}
+            onChange={() =>
+              setValue("isCreateAnotherEnabled", !isCreateAnotherEnabled)
+            }
+          />
+        )}
+
+        <div className="space-x-2">
+          {isEdit && (
+            <Button
+              type="button"
+              variant="secondary"
+              onClick={() => openModal("DELETE_LABEL", entityId)}
+            >
+              {t`Delete`}
+            </Button>
+          )}
+          <Button
+            type="submit"
+            isLoading={updateLabel.isPending || createLabel.isPending}
+            disabled={
+              !watch("name")
+            }
+          >
+            {isEdit ? t`Update label` : t`Create label`}
+          </Button>
+        </div>
+      </div>
+    </form>
+  );
+}

apps/web/src/components/LabelIcon.tsx

@@ -0,0 +1,12 @@
+const LabelIcon = ({ colourCode }: { colourCode: string | null }) => (
+  <svg
+    fill={colourCode ?? "#3730a3"}
+    className="h-2 w-2"
+    viewBox="0 0 6 6"
+    aria-hidden="true"
+  >
+    <circle cx={3} cy={3} r={3} />
+  </svg>
+);
+
+export default LabelIcon;

apps/web/src/components/LanguageSelector.tsx

@@ -0,0 +1,26 @@
+import { HiLanguage } from "react-icons/hi2";
+
+import { useLocalisation } from "~/hooks/useLocalisation";
+import { localeNames } from "~/locales";
+
+export function LanguageSelector() {
+  const { locale, setLocale, availableLocales } = useLocalisation();
+
+  return (
+    <div className="relative">
+      <HiLanguage className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-gray-400" />
+      <select
+        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"
+      >
+        {availableLocales.map((loc) => (
+          <option key={loc} value={loc}>
+            {localeNames[loc]}
+          </option>
+        ))}
+      </select>
+    </div>
+  );
+}

apps/web/src/components/LoadingSpinner.tsx

@@ -0,0 +1,36 @@
+import { twMerge } from "tailwind-merge";
+
+const LoadingSpinner = ({ size = "md" }: { size?: "sm" | "md" | "lg" }) => {
+  return (
+    <svg
+      className={twMerge(
+        "animate-spin",
+        size === "sm" && "h-3 w-3",
+        size === "md" && "h-4 w-4",
+        size === "lg" && "h-5 w-5",
+      )}
+      viewBox="0 0 100 100"
+    >
+      <circle
+        fill="none"
+        stroke-width="10"
+        className="stroke-current opacity-40"
+        cx="50"
+        cy="50"
+        r="40"
+      />
+      <circle
+        fill="none"
+        stroke-width="10"
+        className="stroke-current"
+        stroke-dasharray="280"
+        stroke-dashoffset="210"
+        cx="50"
+        cy="50"
+        r="40"
+      />
+    </svg>
+  );
+};
+
+export default LoadingSpinner;

apps/web/src/components/LottieIcon.tsx

@@ -1,12 +1,12 @@
-"use client";
+import dynamic from "next/dynamic";
 
-import Lottie from "react-lottie-player";
+const Lottie = dynamic(() => import("react-lottie-player"), { ssr: false });
 
-type IconProps = {
+interface IconProps {
   isPlaying: boolean;
   index: number;
   json: object;
-};
+}
 
 const Icon: React.FC<IconProps> = ({ isPlaying, index, json }) => {
   return (
@@ -15,7 +15,7 @@ const Icon: React.FC<IconProps> = ({ isPlaying, index, json }) => {
       animationData={json}
       play={isPlaying}
       loop={false}
-      style={{ width: 20, height: 20, fill: "white" }}
+      style={{ width: 18, height: 18, fill: "white" }}
       rendererSettings={{ preserveAspectRatio: "xMidYMid slice" }}
     />
   );

apps/web/src/components/NewWorkspaceForm.tsx

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

apps/web/src/components/PageHead.tsx

@@ -0,0 +1,13 @@
+import Head from "next/head";
+
+export const PageHead = ({ title }: { title: string }) => {
+  return (
+    <Head>
+      <title>{title}</title>
+      <meta
+        name="viewport"
+        content="width=device-width, initial-scale=1, maximum-scale=1"
+      />
+    </Head>
+  );
+};

apps/web/src/components/PatternedBackground.tsx

@@ -0,0 +1,25 @@
+const PatternedBackground = () => (
+  <div className="absolute inset-0 h-full w-full">
+    <svg className="h-full w-full">
+      <pattern
+        id="pattern"
+        x="10"
+        y="10"
+        width="14.423223834988539"
+        height="14.423223834988539"
+        patternUnits="userSpaceOnUse"
+        patternTransform="translate(-0.45072574484339184,-0.45072574484339184)"
+      >
+        <circle
+          cx="0.45072574484339184"
+          cy="0.45072574484339184"
+          r="0.45072574484339184"
+          fill="#3e3e3e"
+        ></circle>
+      </pattern>
+      <rect x="0" y="0" width="100%" height="100%" fill="url(#pattern)"></rect>
+    </svg>
+  </div>
+);
+
+export default PatternedBackground;

apps/web/src/components/Popup.tsx

@@ -0,0 +1,89 @@
+import { Transition } from "@headlessui/react";
+import { useEffect } from "react";
+import {
+  HiOutlineCheckCircle,
+  HiOutlineExclamationCircle,
+  HiXMark,
+} from "react-icons/hi2";
+
+import { usePopup } from "~/providers/popup";
+
+const Popup: React.FC = () => {
+  const { isOpen, popupHeader, popupMessage, popupIcon, hidePopup } =
+    usePopup();
+
+  useEffect(() => {
+    if (isOpen) {
+      const timer = setTimeout(() => {
+        hidePopup();
+      }, 5000);
+
+      return () => clearTimeout(timer);
+    }
+  }, [isOpen, hidePopup]);
+
+  return (
+    <div
+      aria-live="assertive"
+      className="pointer-events-none fixed inset-0 z-10 flex items-end p-3 sm:items-end"
+    >
+      <div className="flex w-full flex-col items-center space-y-4 sm:items-end">
+        <Transition
+          show={isOpen}
+          enter="ease-out duration-300"
+          enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+          enterTo="opacity-100 translate-y-0 sm:scale-100"
+          leave="ease-in duration-200"
+          leaveFrom="opacity-100 translate-y-0 sm:scale-100"
+          leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+        >
+          <div className="pointer-events-auto w-full max-w-sm overflow-hidden rounded-lg border border-light-400 bg-light-50 shadow-lg ring-1 ring-black ring-opacity-5 transition data-[closed]:data-[enter]:translate-y-2 data-[enter]:transform data-[closed]:opacity-0 data-[enter]:duration-300 data-[leave]:duration-100 data-[enter]:ease-out data-[leave]:ease-in dark:border-dark-300 dark:bg-dark-200 data-[closed]:data-[enter]:sm:translate-x-2 data-[closed]:data-[enter]:sm:translate-y-0">
+            <div className="p-4">
+              <div className="flex items-start">
+                <div className="flex-shrink-0">
+                  {popupIcon === "success" && (
+                    <HiOutlineCheckCircle
+                      aria-hidden="true"
+                      className="h-6 w-6 text-green-400"
+                    />
+                  )}
+                  {popupIcon === "error" && (
+                    <HiOutlineExclamationCircle
+                      aria-hidden="true"
+                      className="h-6 w-6 text-red-400"
+                    />
+                  )}
+                </div>
+                <div className="ml-3 w-0 flex-1 pt-0.5">
+                  <p className="text-sm font-medium text-neutral-900 dark:text-dark-1000">
+                    {popupHeader}
+                  </p>
+                  <p className="mt-1 text-sm text-neutral-500 dark:text-dark-900">
+                    {popupMessage}
+                  </p>
+                </div>
+                <div className="ml-4 flex flex-shrink-0">
+                  <button
+                    type="button"
+                    onClick={() => {
+                      hidePopup();
+                    }}
+                    className="mx-1 inline-flex h-fit items-center rounded-md p-1 px-1 text-sm font-semibold text-dark-50 hover:bg-light-100 dark:hover:bg-dark-400"
+                  >
+                    <span className="sr-only">Close</span>
+                    <HiXMark
+                      aria-hidden="true"
+                      className="h-5 w-5 text-dark-900"
+                    />
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </Transition>
+      </div>
+    </div>
+  );
+};
+
+export default Popup;

apps/web/src/components/ReactiveButton.tsx

@@ -0,0 +1,53 @@
+import Link from "next/link";
+import { useState } from "react";
+import { twMerge } from "tailwind-merge";
+
+import LottieIcon from "~/components/LottieIcon";
+import { useIsMobile } from "~/hooks/useMediaQuery";
+
+const Button: React.FC<{
+  href: string;
+  current: boolean;
+  name: string;
+  json: object;
+  isCollapsed?: boolean;
+  onCloseSideNav?: () => void;
+}> = ({ href, current, name, json, isCollapsed = false, onCloseSideNav }) => {
+  const [isHovered, setIsHovered] = useState(false);
+  const [index, setIndex] = useState(0);
+  const isMobile = useIsMobile();
+
+  const handleMouseEnter = () => {
+    setIsHovered(true);
+    setIndex((index) => index + 1);
+  };
+
+  const handleClick = () => {
+    if (onCloseSideNav && isMobile) {
+      onCloseSideNav();
+    }
+  };
+
+  return (
+    <Link
+      href={href}
+      onMouseEnter={handleMouseEnter}
+      onClick={handleClick}
+      className={twMerge(
+        "group flex h-[34px] items-center rounded-md p-1.5 text-sm font-normal leading-6 hover:bg-light-200 hover:text-light-1000 dark:hover:bg-dark-200 dark:hover:text-dark-1000",
+        current
+          ? "bg-light-200 text-light-1000 dark:bg-dark-200 dark:text-dark-1000"
+          : "text-neutral-600 dark:bg-dark-100 dark:text-dark-900",
+        isCollapsed
+          ? "justify-start gap-x-3 md:justify-center md:gap-x-0"
+          : "gap-x-3",
+      )}
+      title={isCollapsed ? name : undefined}
+    >
+      <LottieIcon index={index} json={json} isPlaying={isHovered} />
+      <span className={twMerge(isCollapsed && "md:hidden")}>{name}</span>
+    </Link>
+  );
+};
+
+export default Button;

apps/web/src/components/SettingsLayout.tsx

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

apps/web/src/components/SideNavigation.tsx

@@ -0,0 +1,163 @@
+import Link from "next/link";
+import { useRouter } from "next/router";
+import { Button } from "@headlessui/react";
+import { t } from "@lingui/core/macro";
+import { useTheme } from "next-themes";
+import { useEffect, useState } from "react";
+import {
+  TbLayoutSidebarLeftCollapse,
+  TbLayoutSidebarLeftExpand,
+} from "react-icons/tb";
+import { twMerge } from "tailwind-merge";
+
+import boardsIconDark from "~/assets/boards-dark.json";
+import boardsIconLight from "~/assets/boards-light.json";
+import membersIconDark from "~/assets/members-dark.json";
+import membersIconLight from "~/assets/members-light.json";
+import settingsIconDark from "~/assets/settings-dark.json";
+import settingsIconLight from "~/assets/settings-light.json";
+import templatesIconDark from "~/assets/templates-dark.json";
+import templatesIconLight from "~/assets/templates-light.json";
+import ReactiveButton from "~/components/ReactiveButton";
+import UserMenu from "~/components/UserMenu";
+import WorkspaceMenu from "~/components/WorkspaceMenu";
+
+interface SideNavigationProps {
+  user: UserType;
+  isLoading: boolean;
+  onCloseSideNav?: () => void;
+}
+
+interface UserType {
+  email?: string | null | undefined;
+  image?: string | null | undefined;
+}
+
+export default function SideNavigation({
+  user,
+  isLoading,
+  onCloseSideNav,
+}: SideNavigationProps) {
+  const router = useRouter();
+  const [isCollapsed, setIsCollapsed] = useState(false);
+  const [isInitialised, setIsInitialised] = useState(false);
+
+  useEffect(() => {
+    const savedState = localStorage.getItem("kan_sidebar-collapsed");
+    if (savedState !== null) {
+      setIsCollapsed(JSON.parse(savedState));
+    }
+    setIsInitialised(true);
+  }, []);
+
+  useEffect(() => {
+    if (isInitialised) {
+      localStorage.setItem(
+        "kan_sidebar-collapsed",
+        JSON.stringify(isCollapsed),
+      );
+    }
+  }, [isCollapsed, isInitialised]);
+
+  const { pathname } = router;
+
+  const { theme, resolvedTheme } = useTheme();
+
+  const isDarkMode = resolvedTheme === "dark";
+
+  const navigation = [
+    {
+      name: t`Boards`,
+      href: "/boards",
+      icon: isDarkMode ? boardsIconDark : boardsIconLight,
+    },
+    {
+      name: t`Templates`,
+      href: "/templates",
+      icon: isDarkMode ? templatesIconDark : templatesIconLight,
+    },
+    {
+      name: t`Members`,
+      href: "/members",
+      icon: isDarkMode ? membersIconDark : membersIconLight,
+    },
+    {
+      name: t`Settings`,
+      href: "/settings",
+      icon: isDarkMode ? settingsIconDark : settingsIconLight,
+    },
+  ];
+
+  const toggleCollapse = () => {
+    setIsCollapsed(!isCollapsed);
+  };
+
+  return (
+    <>
+      <nav
+        className={twMerge(
+          "flex h-full w-64 flex-col justify-between border-r border-light-300 bg-light-100 p-3 dark:border-dark-300 dark:bg-dark-100 md:border-r-0 md:py-0 md:pl-0",
+          isCollapsed && "md:w-auto",
+        )}
+      >
+        <div>
+          <div className="hidden h-14 items-center justify-between pb-[18px] pt-1.5 md:flex">
+            {!isCollapsed && (
+              <Link href="/" className="block">
+                <h1 className="pl-2 text-lg font-bold tracking-tight text-neutral-900 dark:text-dark-1000">
+                  kan.bn
+                </h1>
+              </Link>
+            )}
+            <Button
+              onClick={toggleCollapse}
+              className={twMerge(
+                "flex h-8 items-center justify-center rounded-md hover:bg-light-200 dark:hover:bg-dark-200",
+                isCollapsed ? "w-full" : "w-8",
+              )}
+            >
+              {isCollapsed ? (
+                <TbLayoutSidebarLeftExpand
+                  size={18}
+                  className="text-light-900 dark:text-dark-900"
+                />
+              ) : (
+                <TbLayoutSidebarLeftCollapse
+                  size={18}
+                  className="text-light-900 dark:text-dark-900"
+                />
+              )}
+            </Button>
+          </div>
+          <div className="mx-1 mb-4 hidden w-auto border-b border-light-300 dark:border-dark-400 md:block" />
+
+          <WorkspaceMenu isCollapsed={isCollapsed} />
+          <ul role="list" className="space-y-1">
+            {navigation.map((item) => (
+              <li key={item.name}>
+                <ReactiveButton
+                  href={item.href}
+                  current={pathname.includes(item.href)}
+                  name={item.name}
+                  json={item.icon}
+                  isCollapsed={isCollapsed}
+                  onCloseSideNav={onCloseSideNav}
+                />
+              </li>
+            ))}
+          </ul>
+        </div>
+
+        <div className="space-y-3">
+          <UserMenu
+            email={user.email ?? ""}
+            imageUrl={user.image ?? undefined}
+            isLoading={isLoading}
+            isCollapsed={isCollapsed}
+            onCloseSideNav={onCloseSideNav}
+          />
+        </div>
+      </nav>
+    </>
+  );
+}

apps/web/src/components/StrictModeDroppable.tsx

@@ -0,0 +1,18 @@
+import type { DroppableProps } from "react-beautiful-dnd";
+import { useEffect, useState } from "react";
+import { Droppable } from "react-beautiful-dnd";
+
+export const StrictModeDroppable = ({ children, ...props }: DroppableProps) => {
+  const [enabled, setEnabled] = useState(false);
+  useEffect(() => {
+    const animation = requestAnimationFrame(() => setEnabled(true));
+    return () => {
+      cancelAnimationFrame(animation);
+      setEnabled(false);
+    };
+  }, []);
+  if (!enabled) {
+    return null;
+  }
+  return <Droppable {...props}>{children}</Droppable>;
+};

apps/web/src/components/ThemeToggle.tsx

@@ -0,0 +1,26 @@
+import { CgDarkMode } from "react-icons/cg";
+import { useTheme } from "next-themes";
+
+const ThemeToggle = () => {
+  const { theme, setTheme } = useTheme();
+
+  const toggleTheme = () => {
+    setTheme(theme === "light" ? "dark" : "light");
+  };
+
+  return (
+    <button
+      onClick={toggleTheme}
+      className="rounded p-1.5 transition-all hover:bg-light-200 dark:hover:bg-dark-100"
+      aria-label={`Switch to ${theme === "light" ? "dark" : "light"} theme`}
+    >
+      <CgDarkMode
+        className={`h-4 w-4 text-light-900 transition-transform duration-200 dark:text-dark-900 ${
+          theme === "dark" ? "rotate-180" : "rotate-0"
+        }`}
+      />
+    </button>
+  );
+};
+
+export default ThemeToggle;