Bump versions for v9.63

Prepare v9.63 release
Make remaining release version substitutions self-healing
2026-11-08 11:25:19 -05:00 · 2026-06-19 19:19:34 +00:00 · 2026-06-19 22:09:32 +03:00 · 2026-06-19 20:59:27 +03:00 · 2026-06-19 20:02:55 +03:00 · 2026-06-19 16:47:32 +00:00
1403 changed files with 358618 additions and 191072 deletions
@@ -126,6 +126,8 @@ ENV \
    HEADER_LOGIN_FIRSTNAME="" \
    HEADER_LOGIN_LASTNAME="" \
    HEADER_LOGIN_EMAIL="" \
+    HEADER_LOGIN_TRUSTED_IPS="" \
+    HEADER_LOGIN_TRUSTED_PROXIES="" \
    LOGOUT_WITH_TIMER=false \
    LOGOUT_IN="" \
    LOGOUT_ON_HOURS="" \
@@ -251,7 +253,7 @@ gosu wekan:wekan /home/wekan/.meteor/meteor -- help
 # Build app (Development)
 cd /home/wekan/app
 gosu wekan:wekan /home/wekan/.meteor/meteor add standard-minifier-js
-gosu wekan:wekan /home/wekan/.meteor/meteor npm install
+gosu wekan:wekan /home/wekan/.meteor/meteor npm install --no-audit

 # Put back the original tar
 mv $(which tar)~ $(which tar)
@@ -20,7 +20,10 @@
    "strict": 0,
    "no-undef": 0,
    "accessor-pairs": 2,
-    "comma-dangle": [2, "always-multiline"],
+    "comma-dangle": [
+      2,
+      "always-multiline"
+    ],
    "consistent-return": 2,
    "dot-notation": 2,
    "eqeqeq": 2,
@@ -28,15 +31,28 @@
    "no-cond-assign": 2,
    "no-constant-condition": 2,
    "no-eval": 2,
-    "no-inner-declarations": [0],
+    "no-inner-declarations": [
+      0
+    ],
    "no-unneeded-ternary": 2,
    "radix": 2,
-    "semi": [2, "always"],
-    "camelcase": [2, { "properties": "never" }],
+    "semi": [
+      2,
+      "always"
+    ],
+    "camelcase": [
+      2,
+      {
+        "properties": "never"
+      }
+    ],
    "comma-spacing": 2,
    "comma-style": 2,
    "eol-last": 2,
-    "linebreak-style": [2, "unix"],
+    "linebreak-style": [
+      2,
+      "unix"
+    ],
    "meteor/audit-argument-checks": 0,
    "new-parens": 2,
    "no-lonely-if": 2,
@@ -45,7 +61,13 @@
    "no-spaced-func": 2,
    "no-trailing-spaces": 2,
    "operator-linebreak": 2,
-    "quotes": [2, "single", { "avoidEscape": true }],
+    "quotes": [
+      2,
+      "single",
+      {
+        "avoidEscape": true
+      }
+    ],
    "semi-spacing": 2,
    "space-unary-ops": 2,
    "arrow-spacing": 2,
@@ -57,6 +79,7 @@
    "prefer-spread": 2,
    "prefer-template": 2,
    "no-unused-vars": "warn",
+    "@typescript-eslint/no-floating-promises": "error",
    "prettier/prettier": [
      "error",
      {
@@ -72,11 +95,18 @@
  "settings": {
    "import/resolver": {
      "meteor": {
-        "extensions": [".js", ".jsx"]
+        "extensions": [
+          ".js",
+          ".jsx"
+        ]
      }
    }
  },
-  "plugins": ["prettier", "meteor"],
+  "plugins": [
+    "prettier",
+    "meteor",
+    "@typescript-eslint"
+  ],
  "globals": {
    "Meteor": false,
    "Session": false,
@@ -93,11 +123,8 @@
    "Template": false,
    "$": false,
    "_": false,
-    "autosize": false,
    "Avatar": true,
    "Avatars": true,
-    "BlazeComponent": false,
-    
    "CollectionHooks": false,
    "ESSearchResults": false,
    "FastRender": false,
@@ -105,16 +132,13 @@
    "FS": false,
    "getSlug": false,
    "Migrations": false,
-    "moment": false,
    "Mousetrap": false,
    "Picker": false,
    "Presence": true,
    "presences": true,
    "Ps": true,
-    "ReactiveTabs": false,
    "Restivus": false,
    "SimpleSchema": false,
-    "SubsManager": false,
    "T9n": false,
    "TAPi18n": false,
    "AccountsTemplates": true,
@@ -132,13 +156,11 @@
    "CSSEvents": true,
    "EscapeActions": true,
    "Filter": true,
-    "Mixins": true,
    "Modal": true,
    "MultiSelection": true,
    "Popup": true,
    "Sidebar": true,
    "Utils": true,
-    "InlinedForm": true,
    "UnsavedEdits": true,
    "Notifications": true,
    "allowIsBoardAdmin": true,
@@ -151,7 +173,6 @@
    "Checklists": true,
    "Settings": true,
    "InvitationCodes": true,
-    "JsonRoutes": true,
    "Authentication": true,
    "Integrations": true,
    "HTTP": true,
@@ -13,32 +13,6 @@ body:
      description: A clear and concise description of what the bug is. Mention versions of WeKan, Node.js, database name and version, frontend webserver version like Caddy etc.
    validations:
      required: true
-  - type: dropdown
-    id: platform
-    attributes:
-      label: Platform / Installation Method
-      options:
-        - Snap Stable
-        - Snap Candidate
-        - Docker
-        - Sandstorm
-        - Source (Meteor)
-        - Windows
-        - Mac
-        - Other
-    validations:
-      required: true
-  - type: dropdown 
-    id: CPU
-    attributes:    
-      label: CPU
-      options:
-        - amd64
-        - arm64
-        - s390x
-        - Other
-    validations:
-      required: true
  - type: textarea
    id: reproduction
    attributes:
@@ -66,4 +40,3 @@ body:
    attributes: 
      label: Additional Context
      description: Add any other context, anonymized screenshots or GIF video about the bug, and screenshot mockups about how it should work.
-
@@ -4,3 +4,40 @@ updates:
  directory: "/"
  schedule:
      interval: "weekly"
+- package-ecosystem: "npm"
+  directory: "/"
+  schedule:
+      interval: "weekly"
+  ignore:
+      # Build-time-only (devDependency) Rspack toolchain. These packages compile
+      # the bundle on the developer / CI machine and are NOT shipped in the
+      # deployed WeKan server or client bundle, so their advisories do not affect
+      # a running WeKan instance. (For example webpack-dev-server / @rspack/dev-
+      # server, pulled via @rspack/cli, and the socket.io/ws chain pulled via
+      # @rsdoctor/rspack-plugin, never run in WeKan — it builds with `meteor run`,
+      # not the Rspack CLI or dev-server.)
+      #
+      # They also cannot simply be removed or bumped:
+      #   * @meteorjs/rspack re-pins and re-installs @rspack/cli and
+      #     @rsdoctor/rspack-plugin into package.json on every build, so deleting
+      #     them does not stick.
+      #   * The only upgrades Dependabot/npm offer are build-breaking: a
+      #     @meteorjs/rspack downgrade, or @rspack/cli 2.0 / Rspack 2.0, which
+      #     needs Meteor 3.6 (see https://github.com/meteor/meteor/pull/14360).
+      #     WeKan currently runs METEOR@3.5-rc.1.
+      #
+      # So pin them here until Meteor 3.6 + Rspack 2.0 land, then revisit.
+    - dependency-name: "@meteorjs/rspack"
+    - dependency-name: "@rspack/core"
+    - dependency-name: "@rspack/cli"
+    - dependency-name: "@rsdoctor/rspack-plugin"
+    - dependency-name: "css-loader"
+    - dependency-name: "style-loader"
+# Playwright end-to-end test harness — pure test-only tooling that never ships in
+# WeKan. It now depends only on @playwright/test and the official `mongodb` driver
+# (the heavy, CVE-prone `mongosh` CLI was replaced by helpers/mongo-runner.js).
+# Watch this directory so those two stay patched.
+- package-ecosystem: "npm"
+  directory: "/tests/playwright"
+  schedule:
+      interval: "weekly"
@@ -11,4 +11,4 @@ jobs:
      - name: 'Checkout Repository'
        uses: actions/checkout@v6
      - name: 'Dependency Review'
-        uses: actions/dependency-review-action@v4
+        uses: actions/dependency-review-action@v5
@@ -38,7 +38,7 @@ jobs:
      # https://github.com/docker/login-action
      - name: Log into registry ${{ env.REGISTRY }}
        if: github.event_name != 'pull_request'
-        uses: docker/login-action@5e57cd118135c172c3672efd75eb46360885c0ef
+        uses: docker/login-action@650006c6eb7dba73a995cc03b0b2d7f5ca915bee
        with:
          registry: ${{ env.REGISTRY }}
          username: ${{ github.actor }}
@@ -48,14 +48,14 @@ jobs:
      # https://github.com/docker/metadata-action
      - name: Extract Docker metadata
        id: meta
-        uses: docker/metadata-action@c299e40c65443455700f0fdfc63efafe5b349051
+        uses: docker/metadata-action@80c7e94dd9b9319bd5eb7a0e0fe9291e23a2a2e9
        with:
          images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}

      # 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
-        uses: docker/build-push-action@263435318d21b8e681c14492fe198d362a7d2c83
+        uses: docker/build-push-action@f9f3042f7e2789586610d6e8b85c8f03e5195baf
        with:
          context: .
          push: ${{ github.event_name != 'pull_request' }}
@@ -0,0 +1,259 @@
+name: Playwright E2E Tests
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+    branches: [main]
+
+concurrency:
+  group: playwright-${{ github.ref }}
+  cancel-in-progress: true
+
+permissions:
+  contents: read
+
+jobs:
+  unit-tests:
+    name: Meteor unit tests
+    runs-on: ubuntu-24.04
+    steps:
+      - uses: actions/checkout@v6
+
+      - name: Setup Node 24
+        uses: actions/setup-node@v6
+        with:
+          node-version: '24'
+          cache: 'npm'
+
+      - name: Cache Meteor installation
+        uses: actions/cache@v5
+        with:
+          path: ~/.meteor
+          key: meteor-${{ hashFiles('.meteor/release') }}-${{ hashFiles('.meteor/packages') }}
+          restore-keys: meteor-
+
+      - name: Cache Meteor build (.meteor/local)
+        uses: actions/cache@v5
+        with:
+          path: .meteor/local
+          key: meteor-local-unit-${{ hashFiles('.meteor/versions') }}
+          restore-keys: meteor-local-unit-
+
+      - name: Install Meteor
+        run: |
+          if [ ! -x ~/.meteor/meteor ]; then
+            curl https://install.meteor.com/ | sh
+          fi
+          echo "$HOME/.meteor" >> "$GITHUB_PATH"
+
+      - name: Install npm dependencies
+        run: npm ci
+
+      - name: Run Meteor unit tests
+        # First Meteor build is slow; allow time before the test driver starts.
+        timeout-minutes: 45
+        # NOTE: do not set TEST_WATCH here. meteortesting:mocha computes
+        # `testWatch: TEST_WATCH || …`, and the string '0' is truthy in JS, so
+        # TEST_WATCH=0 turns ON watch mode and the process never exits — that is
+        # what made this job hang until the 45-minute timeout. With TEST_WATCH
+        # unset, `meteor test --once` runs the server tests and exits with the
+        # correct status (matching the local rebuild-wekan.sh run).
+        run: meteor test --once --driver-package meteortesting:mocha
+
+  e2e-tests:
+    name: Playwright E2E (${{ matrix.project }})
+    runs-on: ubuntu-24.04
+    needs: unit-tests
+    strategy:
+      fail-fast: false
+      matrix:
+        # Playwright bundles Chromium, Firefox and WebKit builds that all run
+        # headless on the Linux runner (installed per-job below with --with-deps).
+        project: [chromium, firefox, webkit]
+
+    services:
+      mongodb:
+        image: mongo:7
+        ports: ['27017:27017']
+        options: >-
+          --health-cmd "mongosh --eval 'db.adminCommand(\"ping\")'"
+          --health-interval 10s
+          --health-timeout 5s
+          --health-retries 5
+
+    steps:
+      - uses: actions/checkout@v6
+
+      - name: Setup Node 24
+        uses: actions/setup-node@v6
+        with:
+          node-version: '24'
+          cache: 'npm'
+
+      - name: Cache Meteor installation
+        uses: actions/cache@v5
+        with:
+          path: ~/.meteor
+          key: meteor-${{ hashFiles('.meteor/release') }}-${{ hashFiles('.meteor/packages') }}
+          restore-keys: meteor-
+
+      - name: Cache Meteor build (.meteor/local)
+        uses: actions/cache@v5
+        with:
+          path: .meteor/local
+          key: meteor-local-e2e-${{ hashFiles('.meteor/versions') }}
+          restore-keys: meteor-local-e2e-
+
+      - name: Install Meteor
+        run: |
+          if [ ! -x ~/.meteor/meteor ]; then
+            curl https://install.meteor.com/ | sh
+          fi
+          echo "$HOME/.meteor" >> "$GITHUB_PATH"
+
+      - name: Install app npm dependencies
+        run: npm ci
+
+      - name: Install Playwright test dependencies
+        run: npm ci
+        working-directory: tests/playwright
+
+      - name: Install Playwright browsers
+        run: npx playwright install --with-deps ${{ matrix.project }}
+        working-directory: tests/playwright
+
+      - name: Start WeKan in background
+        run: |
+          MONGO_URL=mongodb://localhost:27017/wekan_test \
+          ROOT_URL=http://localhost:3000 \
+          PORT=3000 \
+          meteor run --settings settings.json > wekan-run.log 2>&1 &
+          # The first Meteor build is slow, so wait up to 20 minutes for the
+          # server to start responding before giving up.
+          for i in $(seq 1 120); do
+            if curl -sf http://localhost:3000 > /dev/null; then
+              echo "WeKan is up after $((i * 10))s"
+              break
+            fi
+            echo "Waiting for WeKan... attempt $i/120"
+            sleep 10
+          done
+          if ! curl -sf http://localhost:3000 > /dev/null; then
+            echo "WeKan failed to start. Last 200 log lines:"
+            tail -n 200 wekan-run.log
+            exit 1
+          fi
+        env:
+          DISABLE_CAPTCHA: 'true'
+
+      - name: Run Playwright tests (${{ matrix.project }})
+        run: |
+          npx playwright test \
+            --project=${{ matrix.project }} \
+            --reporter=github
+        working-directory: tests/playwright
+        env:
+          WEKAN_BASE_URL: http://localhost:3000
+          WEKAN_MONGO_URL: mongodb://localhost:27017/wekan_test
+          # Make the firefox and webkit projects available to --project
+          # (playwright.config.js only defines them when this is set).
+          WEKAN_PLAYWRIGHT_ALL: '1'
+
+      - name: Upload Playwright report
+        if: always()
+        uses: actions/upload-artifact@v7
+        with:
+          name: playwright-report-${{ matrix.project }}
+          path: tests/playwright/playwright-report/
+          retention-days: 14
+
+      - name: Upload test results (screenshots / videos)
+        if: failure()
+        uses: actions/upload-artifact@v7
+        with:
+          name: test-results-${{ matrix.project }}
+          path: tests/playwright/test-results/
+          retention-days: 7
+
+  e2e-regression:
+    name: Puppeteer regression suite
+    runs-on: ubuntu-24.04
+    needs: unit-tests
+
+    services:
+      mongodb:
+        image: mongo:7
+        ports: ['27017:27017']
+        options: >-
+          --health-cmd "mongosh --eval 'db.adminCommand(\"ping\")'"
+          --health-interval 10s
+          --health-timeout 5s
+          --health-retries 5
+
+    steps:
+      - uses: actions/checkout@v6
+
+      - name: Setup Node 24
+        uses: actions/setup-node@v6
+        with:
+          node-version: '24'
+          cache: 'npm'
+
+      - name: Cache Meteor installation
+        uses: actions/cache@v5
+        with:
+          path: ~/.meteor
+          key: meteor-${{ hashFiles('.meteor/release') }}-${{ hashFiles('.meteor/packages') }}
+          restore-keys: meteor-
+
+      - name: Cache Meteor build (.meteor/local)
+        uses: actions/cache@v5
+        with:
+          path: .meteor/local
+          key: meteor-local-regression-${{ hashFiles('.meteor/versions') }}
+          restore-keys: meteor-local-regression-
+
+      - name: Install Meteor
+        run: |
+          if [ ! -x ~/.meteor/meteor ]; then
+            curl https://install.meteor.com/ | sh
+          fi
+          echo "$HOME/.meteor" >> "$GITHUB_PATH"
+
+      - name: Install npm dependencies
+        run: npm ci
+
+      - name: Install Chromium
+        run: sudo apt-get install -y chromium-browser
+
+      - name: Start WeKan in background
+        run: |
+          MONGO_URL=mongodb://localhost:27017/wekan_regression \
+          ROOT_URL=http://localhost:3000 \
+          PORT=3000 \
+          meteor run > wekan-run.log 2>&1 &
+          # The first Meteor build is slow, so wait up to 20 minutes.
+          for i in $(seq 1 120); do
+            if curl -sf http://localhost:3000 > /dev/null; then
+              echo "WeKan is up after $((i * 10))s"
+              break
+            fi
+            echo "Waiting for WeKan... attempt $i/120"
+            sleep 10
+          done
+          if ! curl -sf http://localhost:3000 > /dev/null; then
+            echo "WeKan failed to start. Last 200 log lines:"
+            tail -n 200 wekan-run.log
+            exit 1
+          fi
+        env:
+          DISABLE_CAPTCHA: 'true'
+
+      - name: Run list-regressions e2e
+        run: node tests/e2e/list-regressions.js
+        env:
+          WEKAN_BASE_URL: http://localhost:3000
+          WEKAN_MONGO_URL: mongodb://localhost:27017/wekan_regression
+          CHROMIUM_PATH: /usr/bin/chromium-browser
+          HEADLESS: 'true'
@@ -0,0 +1,876 @@
+name: Release All Platforms
+
+# Triggered manually via GitHub CLI or the Actions UI.
+# Usage:
+#   gh workflow run release-all.yml -f old_version=9.35 -f new_version=9.36
+#
+# Or use the convenience script (bumps versions, commits, pushes, then triggers):
+#   ./releases/release-all.sh 9.35 9.36
+#
+# The Docker image and snap cover the platforms MongoDB ships server binaries for
+# (amd64, arm64; win64 + mac bundles too); MongoDB 7.x is the default database.
+# Additionally, WeKan server bundles are built for every other architecture
+# Node.js 24.x publishes binaries for — s390x and ppc64le — and attached to the
+# GitHub Release as extra downloads (run a separate MongoDB for those). These
+# extra-arch bundles are NOT part of the Docker image or snap. (armv7l/32-bit ARM
+# is not built: Node.js 24 ships no armv7l binaries.)
+#
+# This workflow does EVERYTHING for a release remotely (nothing is built or
+# pushed on the maintainer's machine), running jobs in parallel where possible:
+#   - bump:    runs releases/version.sh + releases/rebuild-docs.sh on the runner
+#              (bumps Node/MongoDB/WeKan versions, rebuilds API docs), then
+#              commits and pushes the bump to wekan/wekan main
+#   - prepare: tags the bumped main as v<new_version> and extracts release notes
+#   - website: updates the wekan/wekan.fi repo (install page + API docs) and pushes
+#   - charts:  updates and publishes the wekan/charts Helm chart and pushes
+#   - build-*: builds the amd64 bundle (full Meteor 3 build), then rebuilds native
+#              modules for arm64 from that amd64 base
+#   - release: creates the GitHub Release with the newest CHANGELOG.md notes and
+#              uploads the core wekan-<version>-{amd64,arm64}.zip bundles
+#   - build-win64 / build-mac-arm64 / build-extra-arches: built AFTER release, each
+#              rebuilds the amd64 bundle's native modules for its platform (Windows,
+#              macOS arm64, and QEMU-emulated s390x/ppc64le) and attaches its
+#              .zip to the Release as an extra download. Decoupled from `release` so
+#              a slow/flaky build never blocks it; not in the Docker image or snap
+#   - docker:  builds and pushes the multi-arch image to Docker Hub, Quay.io, GHCR
+#   - snap:    builds the snap on Launchpad (amd64 + arm64), pushes it to the Snap
+#              Store and attaches the .snap files to the GitHub Release
+#
+# Required GitHub Secrets:
+#   GHCR_AUTH        - base64("username:token") for ghcr.io
+#   DOCKERHUB_AUTH   - base64("username:token") for Docker Hub
+#   QUAY_AUTH        - base64("username:token") for Quay.io
+#   SNAP_AUTH        - Snap Store credentials (output of `snapcraft export-login`)
+#   LP_CREDENTIALS   - base64 of the Launchpad credentials file used by
+#                      `snapcraft remote-build` (see releases/snap-build.sh notes)
+#   WEKAN_REPO_TOKEN - Personal Access Token with write access to wekan/wekan.fi
+#                      and wekan/charts, used by the website + charts jobs to push
+#                      to those repos (the built-in GITHUB_TOKEN only covers
+#                      wekan/wekan). See releases/create-github-secrets.sh.
+
+on:
+  workflow_dispatch:
+    inputs:
+      old_version:
+        description: 'Previous version number (e.g. 9.35, without v prefix)'
+        required: true
+        type: string
+      new_version:
+        description: 'New version number (e.g. 9.36, without v prefix)'
+        required: true
+        type: string
+
+permissions:
+  contents: write
+  packages: write
+
+# Node.js major version that Meteor 3.5-beta bundles. Used for native module
+# rebuilds on every platform — it must match the amd64 build's Node ABI.
+env:
+  NODE_VERSION: '24'
+
+jobs:
+
+  # ─── 0. Bump versions + rebuild API docs, commit to main ────────────────────
+  # Runs releases/version.sh (probes upstream for the newest Node.js/MongoDB,
+  # bumps every version reference) and releases/rebuild-docs.sh (regenerates
+  # public/api/wekan.yml + wekan.html), then commits and pushes to main so the
+  # tag, builds, website and charts jobs all see the bumped sources.
+  bump:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write
+    steps:
+      - uses: actions/checkout@v6
+        with:
+          ref: main
+          fetch-depth: 0
+
+      - uses: actions/setup-node@v6
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+
+      - name: Install version-bump and docs build dependencies
+        run: |
+          sudo apt-get update
+          sudo apt-get install -y python3 python3-pip curl wget
+
+      - name: Bump versions and rebuild API docs
+        env:
+          # Builds fetch dependencies from upstream themselves, so skip the slow
+          # pre-download of Node/MongoDB tarballs that the local flow does.
+          RELEASE_SKIP_DEP_DOWNLOAD: '1'
+        run: |
+          git config user.name "github-actions[bot]"
+          git config user.email "41898282+github-actions[bot]@users.noreply.github.com"
+          ./releases/version.sh "${{ inputs.old_version }}" "${{ inputs.new_version }}"
+          ./releases/rebuild-docs.sh "${{ inputs.new_version }}"
+
+      - name: Commit and push version bump
+        run: |
+          git add --all
+          if git diff --cached --quiet; then
+            echo "No version changes to commit."
+          else
+            git commit -m "Bump versions for v${{ inputs.new_version }}"
+            git push origin main
+          fi
+
+  # ─── 1. Tag the release and extract release notes ───────────────────────────
+  prepare:
+    needs: bump
+    runs-on: ubuntu-latest
+    outputs:
+      version: ${{ steps.version.outputs.version }}
+      changelog: ${{ steps.changelog.outputs.content }}
+    steps:
+      - uses: actions/checkout@v6
+        with:
+          ref: main
+          fetch-depth: 0
+
+      - name: Normalise version from input
+        id: version
+        run: |
+          VERSION="${{ inputs.new_version }}"
+          VERSION="${VERSION#v}"
+          echo "version=$VERSION" >> "$GITHUB_OUTPUT"
+
+      - name: Create and push tag v${{ steps.version.outputs.version }}
+        run: |
+          VERSION="${{ steps.version.outputs.version }}"
+          git config user.name "github-actions[bot]"
+          git config user.email "41898282+github-actions[bot]@users.noreply.github.com"
+          if git rev-parse "v$VERSION" >/dev/null 2>&1; then
+            echo "Tag v$VERSION already exists, leaving it as is."
+          else
+            git tag -a "v$VERSION" -m "v$VERSION"
+            git push origin "v$VERSION"
+          fi
+
+      - name: Extract release notes from CHANGELOG.md
+        id: changelog
+        run: |
+          VERSION="${{ steps.version.outputs.version }}"
+          # Prefer a version-specific "# v<version> ..." section, otherwise fall
+          # back to the topmost "# Upcoming/Upcomig WeKan ® release" section.
+          NOTES=$(python3 - <<PYEOF
+          import re, sys
+          version = "$VERSION"
+          with open("CHANGELOG.md", encoding="utf-8") as f:
+              content = f.read()
+          patterns = [
+              rf"(# v{re.escape(version)} .*?)(?=\n# v[0-9]|\Z)",
+              r"(# Upcom\w* WeKan.*?)(?=\n# v[0-9]|\Z)",
+          ]
+          for pat in patterns:
+              m = re.search(pat, content, re.DOTALL)
+              if m:
+                  print(m.group(1).strip())
+                  sys.exit(0)
+          print(f"WeKan v{version}")
+          PYEOF
+          )
+          {
+            echo "content<<GHEOF"
+            echo "$NOTES"
+            echo "GHEOF"
+          } >> "$GITHUB_OUTPUT"
+
+  # ─── 1b. Update the wekan.fi website repo (parallel) ────────────────────────
+  # Bumps the version/Meteor/Node/MongoDB strings on the install page and copies
+  # the freshly rebuilt API docs into wekan.fi/api/v<new>, then commits + pushes
+  # to wekan/wekan.fi. Runs as soon as `bump` has pushed the bumped sources.
+  website:
+    needs: bump
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout wekan repo (bumped main, with rebuilt API docs)
+        uses: actions/checkout@v6
+        with:
+          ref: main
+          path: wekan
+
+      - name: Checkout wekan.fi website repo
+        uses: actions/checkout@v6
+        with:
+          repository: wekan/wekan.fi
+          token: ${{ secrets.WEKAN_REPO_TOKEN }}
+          path: wekan.fi
+
+      - name: Update and push website
+        env:
+          WEBDIR: ${{ github.workspace }}/wekan.fi
+          WEKANREPODIR: ${{ github.workspace }}/wekan
+          RELEASE_PUSH_WEBSITE: '1'
+        run: |
+          cd wekan.fi
+          git config user.name "github-actions[bot]"
+          git config user.email "41898282+github-actions[bot]@users.noreply.github.com"
+          cd ..
+          ./wekan/releases/release-website.sh "${{ inputs.old_version }}" "${{ inputs.new_version }}"
+
+  # ─── 1c. Update and publish the Helm chart repo (parallel) ──────────────────
+  # Bumps the WeKan version in wekan/charts, packages the chart and publishes it
+  # to the gh-pages Helm index, then pushes both branches. Runs in parallel with
+  # the platform builds; packaging the chart does not need the built artifacts.
+  charts:
+    needs: bump
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout wekan repo (for releases/release-charts.sh + version refs)
+        uses: actions/checkout@v6
+        with:
+          ref: main
+          path: wekan
+
+      - name: Checkout wekan/charts repo (main + gh-pages)
+        uses: actions/checkout@v6
+        with:
+          repository: wekan/charts
+          token: ${{ secrets.WEKAN_REPO_TOKEN }}
+          fetch-depth: 0
+          path: charts
+
+      - name: Install Helm
+        uses: azure/setup-helm@v5
+
+      - name: Fetch gh-pages branch (release-charts.sh switches to it)
+        run: |
+          cd charts
+          git config user.name "github-actions[bot]"
+          git config user.email "41898282+github-actions[bot]@users.noreply.github.com"
+          git fetch origin '+refs/heads/*:refs/remotes/origin/*'
+          git branch --track gh-pages origin/gh-pages 2>/dev/null || true
+
+      - name: Release and publish chart
+        env:
+          CHARTS_DIR: ${{ github.workspace }}/charts
+        run: |
+          ./wekan/releases/release-charts.sh "${{ inputs.new_version }}"
+
+  # ─── 2. Build amd64 bundle (full Meteor 3 build) ────────────────────────────
+  # Meteor 3.5-beta installer supports only Linux x86_64/aarch64, macOS, Windows.
+  # The full Meteor build always runs here on x86_64; every other platform then
+  # only rebuilds the native npm modules from this bundle.
+  build-amd64:
+    needs: prepare
+    runs-on: ubuntu-24.04
+    timeout-minutes: 180
+    env:
+      VERSION: ${{ needs.prepare.outputs.version }}
+    steps:
+      - uses: actions/checkout@v6
+        with:
+          ref: refs/tags/v${{ needs.prepare.outputs.version }}
+
+      - name: Cache Meteor installation
+        uses: actions/cache@v5
+        with:
+          path: ~/.meteor
+          key: meteor-${{ hashFiles('.meteor/release') }}-${{ hashFiles('.meteor/packages') }}
+          restore-keys: meteor-
+
+      - name: Cache npm packages
+        uses: actions/cache@v5
+        with:
+          path: ~/.npm
+          key: npm-${{ hashFiles('package-lock.json') }}
+
+      - name: Install system dependencies
+        run: |
+          sudo apt-get update
+          sudo apt-get install -y build-essential g++ make python3 curl wget zip unzip
+
+      - uses: actions/setup-node@v6
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+
+      - name: Install Meteor
+        run: |
+          if [ ! -f ~/.meteor/meteor ]; then
+            curl https://install.meteor.com/ | sh
+          fi
+          echo "$HOME/.meteor" >> $GITHUB_PATH
+
+      - name: Build WeKan bundle
+        run: |
+          rm -rf .build node_modules .meteor/local
+          (meteor update --npm 2>/dev/null || true) && meteor npm install
+          meteor build .build --directory
+
+      - name: Install server npm modules
+        run: |
+          cd .build/bundle/programs/server
+          npm install
+
+      - name: Create amd64 zip
+        run: |
+          cd .build
+          zip -r wekan-${VERSION}-amd64.zip bundle
+
+      - uses: actions/upload-artifact@v7
+        with:
+          name: bundle-amd64
+          path: .build/wekan-${{ needs.prepare.outputs.version }}-amd64.zip
+          retention-days: 1
+
+  # ─── 3. Build arm64 bundle (rebuild native modules natively) ─────────────────
+  build-arm64:
+    needs: [prepare, build-amd64]
+    runs-on: ubuntu-24.04-arm
+    timeout-minutes: 60
+    env:
+      VERSION: ${{ needs.prepare.outputs.version }}
+    steps:
+      - name: Install dependencies
+        run: |
+          sudo apt-get update
+          sudo apt-get install -y build-essential g++ make python3 curl unzip zip
+
+      - name: Download amd64 bundle
+        uses: actions/download-artifact@v8
+        with:
+          name: bundle-amd64
+
+      - name: Rebuild native modules for arm64 in container
+        run: |
+          unzip wekan-${VERSION}-amd64.zip
+          # Fix: bcrypt 5.0.1 (Meteor accounts-password) ships node-addon-api@3
+          # which fails to compile on Node.js 24. Replace with bcrypt 6.0.0.
+          BCRYPT_DIR="$(pwd)/bundle/programs/server/npm/node_modules/meteor/accounts-password/node_modules/bcrypt"
+          if [ -d "$BCRYPT_DIR" ]; then
+            rm -rf "$BCRYPT_DIR"
+            TMP=$(mktemp -d)
+            pushd "$TMP" > /dev/null
+            npm pack bcrypt@6.0.0
+            mkdir bcrypt && tar xzf bcrypt-*.tgz --strip-components=1 -C bcrypt
+            cd bcrypt && npm install --ignore-scripts && cd ..
+            cp -a bcrypt "$BCRYPT_DIR"
+            popd > /dev/null
+            rm -rf "$TMP"
+          fi
+          docker run --rm --platform linux/arm64 \
+            -v "$(pwd)/bundle:/bundle" \
+            -w /bundle/programs/server \
+            node:${NODE_VERSION}-slim \
+            sh -c "apt-get update -qq && apt-get install -y -q build-essential python3 && npm install"
+
+      - name: Create arm64 zip
+        run: |
+          zip -r wekan-${VERSION}-arm64.zip bundle
+
+      - uses: actions/upload-artifact@v7
+        with:
+          name: bundle-arm64
+          path: wekan-${{ needs.prepare.outputs.version }}-arm64.zip
+          retention-days: 1
+
+  # ─── 7. Create GitHub Release and upload all bundles ────────────────────────
+  release:
+    needs:
+      - prepare
+      - build-amd64
+      - build-arm64
+    runs-on: ubuntu-latest
+    env:
+      VERSION: ${{ needs.prepare.outputs.version }}
+    steps:
+      - name: Download all bundles
+        uses: actions/download-artifact@v8
+        with:
+          pattern: bundle-*
+          merge-multiple: true
+
+      - name: Create GitHub Release with all bundles
+        uses: softprops/action-gh-release@v3
+        with:
+          tag_name: v${{ needs.prepare.outputs.version }}
+          name: v${{ needs.prepare.outputs.version }}
+          body: ${{ needs.prepare.outputs.changelog }}
+          files: |
+            wekan-${{ needs.prepare.outputs.version }}-amd64.zip
+            wekan-${{ needs.prepare.outputs.version }}-arm64.zip
+
+  # ─── 7b. Extra-platform bundles (win64, mac-arm64, s390x, ppc64le) ───────────
+  # Every bundle below is built AFTER `release` and attaches its own .zip to the
+  # already-created GitHub Release with `gh release upload --clobber`, rather than
+  # being a prerequisite of `release`. This deliberately decouples the slower /
+  # different-OS builds (Windows, macOS, QEMU-emulated arches) from the core
+  # amd64/arm64 release, Docker and snap, so a slow or flaky one never blocks them.
+  # These bundles are NOT part of the Docker image or snap.
+
+  # Build win64 bundle (rebuild native modules on Windows).
+  build-win64:
+    needs: [prepare, build-amd64, release]
+    runs-on: windows-latest
+    timeout-minutes: 60
+    env:
+      VERSION: ${{ needs.prepare.outputs.version }}
+    steps:
+      # Checked out into src/ so start-wekan.bat and snapcraft.yaml (which pins
+      # the MongoDB tools/mongosh versions) are available; the downloaded bundle
+      # is extracted alongside it in the workspace root.
+      - uses: actions/checkout@v6
+        with:
+          ref: refs/tags/v${{ needs.prepare.outputs.version }}
+          path: src
+
+      - uses: actions/setup-node@v6
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+
+      - name: Install 7-zip
+        run: choco install -y 7zip
+
+      - name: Download amd64 bundle
+        uses: actions/download-artifact@v8
+        with:
+          name: bundle-amd64
+
+      - name: Fix bcrypt for Node.js 24
+        shell: bash
+        run: |
+          7z x wekan-${VERSION}-amd64.zip
+          # Fix: bcrypt 5.0.1 (Meteor accounts-password) ships node-addon-api@3
+          # which fails to compile on Node.js 24. Replace with bcrypt 6.0.0.
+          BCRYPT_DIR="$(pwd)/bundle/programs/server/npm/node_modules/meteor/accounts-password/node_modules/bcrypt"
+          if [ -d "$BCRYPT_DIR" ]; then
+            rm -rf "$BCRYPT_DIR"
+            TMP=$(mktemp -d)
+            pushd "$TMP" > /dev/null
+            npm pack bcrypt@6.0.0
+            mkdir bcrypt && tar xzf bcrypt-*.tgz --strip-components=1 -C bcrypt
+            cd bcrypt && npm install --ignore-scripts && cd ..
+            cp -r bcrypt "$BCRYPT_DIR"
+            popd > /dev/null
+            rm -rf "$TMP"
+          fi
+
+      - name: Rebuild native modules for Windows
+        shell: bash
+        run: |
+          cd bundle/programs/server
+          rm -rf node_modules
+          npm install
+
+      - name: Add MongoDB tools, mongosh and start-wekan.bat to the bundle
+        shell: bash
+        run: |
+          set -euo pipefail
+          # Use the same MongoDB tools/mongosh versions as the snap, which
+          # releases/version.sh keeps at the newest release for each bundle.
+          TOOLS_VER=$(grep -oE 'mongodb-database-tools-ubuntu2204-\$\{TOOLS_ARCH\}-[0-9]+\.[0-9]+\.[0-9]+' src/snapcraft.yaml \
+                       | grep -oE '[0-9]+\.[0-9]+\.[0-9]+' | head -1)
+          MONGOSH_VER=$(grep -oE 'mongosh-[0-9]+\.[0-9]+\.[0-9]+-linux' src/snapcraft.yaml \
+                         | grep -oE '[0-9]+\.[0-9]+\.[0-9]+' | head -1)
+          echo "MongoDB Database Tools: $TOOLS_VER   mongosh: $MONGOSH_VER"
+
+          # MongoDB Database Tools (Windows): bsondump, mongodump, mongoexport,
+          # mongofiles, mongoimport, mongorestore, mongostat, mongotop.
+          TOOLS_DIR="mongodb-database-tools-windows-x86_64-${TOOLS_VER}"
+          curl -fL -o tools.zip \
+            "https://fastdl.mongodb.org/tools/db/${TOOLS_DIR}.zip"
+          7z x -y tools.zip > /dev/null
+          cp "${TOOLS_DIR}/bin/"*.exe bundle/
+
+          # mongosh (Windows): mongosh.exe + mongosh_crypt_v1.dll.
+          MONGOSH_DIR="mongosh-${MONGOSH_VER}-win32-x64"
+          curl -fL -o mongosh.zip \
+            "https://downloads.mongodb.com/compass/${MONGOSH_DIR}.zip"
+          7z x -y mongosh.zip > /dev/null
+          cp "${MONGOSH_DIR}/bin/mongosh.exe" bundle/
+          cp "${MONGOSH_DIR}/bin/mongosh_crypt_v1.dll" bundle/
+
+          # Windows launcher from the repo root.
+          cp src/start-wekan.bat bundle/
+
+          echo "=== bundle contents ==="
+          ls -1 bundle/
+
+      - name: Create win64 zip
+        shell: cmd
+        run: 7z a wekan-%VERSION%-win64.zip bundle
+
+      - uses: actions/upload-artifact@v7
+        with:
+          name: bundle-win64
+          path: wekan-${{ needs.prepare.outputs.version }}-win64.zip
+          retention-days: 1
+
+      - name: Attach win64 bundle to the GitHub Release
+        shell: bash
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          # The repo is checked out into src/, so the workspace root is not a git
+          # repository; set GH_REPO so `gh` targets wekan/wekan without relying on
+          # git remote detection (else: "fatal: not a git repository").
+          GH_REPO: ${{ github.repository }}
+        run: gh release upload "v${VERSION}" "wekan-${VERSION}-win64.zip" --clobber
+
+  # Build mac-arm64 bundle (rebuild native modules on Apple Silicon).
+  build-mac-arm64:
+    needs: [prepare, build-amd64, release]
+    runs-on: macos-14   # macos-14 runners are Apple Silicon (arm64)
+    timeout-minutes: 60
+    env:
+      VERSION: ${{ needs.prepare.outputs.version }}
+    steps:
+      - uses: actions/setup-node@v6
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+
+      - name: Download amd64 bundle
+        uses: actions/download-artifact@v8
+        with:
+          name: bundle-amd64
+
+      - name: Rebuild native modules for macOS arm64
+        run: |
+          unzip -q wekan-${VERSION}-amd64.zip
+          # Fix: bcrypt 5.0.1 (Meteor accounts-password) ships node-addon-api@3
+          # which fails to compile on Node.js 24. Replace with bcrypt 6.0.0.
+          BCRYPT_DIR="$(pwd)/bundle/programs/server/npm/node_modules/meteor/accounts-password/node_modules/bcrypt"
+          if [ -d "$BCRYPT_DIR" ]; then
+            rm -rf "$BCRYPT_DIR"
+            TMP=$(mktemp -d)
+            pushd "$TMP" > /dev/null
+            npm pack bcrypt@6.0.0
+            mkdir bcrypt && tar xzf bcrypt-*.tgz --strip-components=1 -C bcrypt
+            cd bcrypt && npm install --ignore-scripts && cd ..
+            cp -a bcrypt "$BCRYPT_DIR"
+            popd > /dev/null
+            rm -rf "$TMP"
+          fi
+          cd bundle/programs/server
+          rm -rf node_modules
+          npm install
+          cd ../../..
+
+      - name: Create mac-arm64 zip
+        run: zip -r wekan-${VERSION}-mac-arm64.zip bundle
+
+      - uses: actions/upload-artifact@v7
+        with:
+          name: bundle-mac-arm64
+          path: wekan-${{ needs.prepare.outputs.version }}-mac-arm64.zip
+          retention-days: 1
+
+      - name: Attach mac-arm64 bundle to the GitHub Release
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          # No repo checkout in this job, so set GH_REPO so `gh` knows the target
+          # repository instead of trying (and failing) to detect a git remote.
+          GH_REPO: ${{ github.repository }}
+        run: gh release upload "v${VERSION}" "wekan-${VERSION}-mac-arm64.zip" --clobber
+
+  # Extra-architecture Linux bundles (s390x, ppc64le).
+  # armv7l (32-bit ARM) is intentionally excluded: Node.js 24 ships no armv7l
+  # binaries (official or unofficial), so there is no node:24 linux/arm/v7 image
+  # to rebuild native modules against and no Node 24 runtime to run a bundle on
+  # an armv7 device. See https://nodejs.org/dist/latest-v24.x/ (no -linux-armv7l).
+  build-extra-arches:
+    needs: [prepare, build-amd64, release]
+    runs-on: ubuntu-24.04
+    timeout-minutes: 300
+    strategy:
+      fail-fast: false
+      matrix:
+        include:
+          - arch: s390x
+            platform: linux/s390x
+          - arch: ppc64le
+            platform: linux/ppc64le
+    env:
+      VERSION: ${{ needs.prepare.outputs.version }}
+    steps:
+      - name: Install dependencies
+        run: |
+          sudo apt-get update
+          sudo apt-get install -y curl unzip zip
+
+      - name: Set up QEMU for ${{ matrix.arch }} emulation
+        uses: docker/setup-qemu-action@v3
+
+      - name: Download amd64 bundle
+        uses: actions/download-artifact@v8
+        with:
+          name: bundle-amd64
+
+      - name: Rebuild native modules for ${{ matrix.arch }} under emulation
+        run: |
+          unzip -q wekan-${VERSION}-amd64.zip
+          # Same bcrypt fix as the arm64 build: bcrypt 5.0.1 (Meteor
+          # accounts-password) ships node-addon-api@3 which fails to compile on
+          # Node.js 24. Swap in bcrypt 6.0.0 source; the emulated npm install
+          # below compiles it (and any other native module) for the target arch.
+          BCRYPT_DIR="$(pwd)/bundle/programs/server/npm/node_modules/meteor/accounts-password/node_modules/bcrypt"
+          if [ -d "$BCRYPT_DIR" ]; then
+            rm -rf "$BCRYPT_DIR"
+            TMP=$(mktemp -d)
+            pushd "$TMP" > /dev/null
+            npm pack bcrypt@6.0.0
+            mkdir bcrypt && tar xzf bcrypt-*.tgz --strip-components=1 -C bcrypt
+            cd bcrypt && npm install --ignore-scripts && cd ..
+            cp -a bcrypt "$BCRYPT_DIR"
+            popd > /dev/null
+            rm -rf "$TMP"
+          fi
+          docker run --rm --platform ${{ matrix.platform }} \
+            -v "$(pwd)/bundle:/bundle" \
+            -w /bundle/programs/server \
+            node:${NODE_VERSION}-slim \
+            sh -c "apt-get update -qq && apt-get install -y -q build-essential python3 && npm install"
+
+      - name: Create ${{ matrix.arch }} zip
+        run: zip -r wekan-${VERSION}-${{ matrix.arch }}.zip bundle
+
+      - uses: actions/upload-artifact@v7
+        with:
+          name: bundle-${{ matrix.arch }}
+          path: wekan-${{ needs.prepare.outputs.version }}-${{ matrix.arch }}.zip
+          retention-days: 1
+
+      - name: Attach ${{ matrix.arch }} bundle to the GitHub Release
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          # No repo checkout in this job, so set GH_REPO so `gh` knows the target
+          # repository instead of trying (and failing) to detect a git remote.
+          GH_REPO: ${{ github.repository }}
+        run: gh release upload "v${VERSION}" "wekan-${VERSION}-${{ matrix.arch }}.zip" --clobber
+
+  # ─── 8. Build and push the multi-arch Docker image to all registries ────────
+  # Mirrors releases/docker-build.sh step 3 (multi-arch buildx --push).
+  # Needs `release` because the Dockerfile downloads wekan-<version>-<arch>.zip
+  # from the GitHub Release; building before those assets exist 404s and (without
+  # set -e in the Dockerfile) shipped a broken image missing /build/main.js.
+  docker:
+    needs: [prepare, release]
+    runs-on: ubuntu-latest
+    env:
+      VERSION: ${{ needs.prepare.outputs.version }}
+    steps:
+      - uses: actions/checkout@v6
+        with:
+          ref: refs/tags/v${{ needs.prepare.outputs.version }}
+
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v4
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v4
+
+      - name: Log in to Docker Hub, Quay.io and GHCR
+        env:
+          DOCKERHUB_AUTH: ${{ secrets.DOCKERHUB_AUTH }}
+          QUAY_AUTH: ${{ secrets.QUAY_AUTH }}
+          GHCR_AUTH: ${{ secrets.GHCR_AUTH }}
+        run: |
+          login() {
+            # $1 = registry host, $2 = base64("user:token")
+            local host="$1" creds user token
+            creds="$(printf '%s' "$2" | base64 -d)"
+            user="${creds%%:*}"
+            token="${creds#*:}"
+            printf '%s' "$token" | docker login "$host" -u "$user" --password-stdin
+          }
+          login docker.io "$DOCKERHUB_AUTH"
+          login quay.io   "$QUAY_AUTH"
+          login ghcr.io   "$GHCR_AUTH"
+
+      - name: Wait for release bundles to be downloadable
+        # The Dockerfile downloads wekan-<version>-<arch>.zip from the GitHub
+        # Release for each built platform. Even though this job needs `release`
+        # (so the assets are uploaded), GitHub's releases/download/<tag>/<asset>
+        # URL can briefly 404 right after upload (CDN/propagation lag), which used
+        # to fail the multi-arch build mid-way. Poll here until both the amd64 and
+        # arm64 bundles return 200, so the (expensive, emulated) buildx run only
+        # starts once the assets are actually fetchable. The Dockerfile also
+        # retries per-arch as a second layer of safety.
+        run: |
+          set -euo pipefail
+          base="https://github.com/wekan/wekan/releases/download/v${VERSION}"
+          for arch in amd64 arm64; do
+            url="${base}/wekan-${VERSION}-${arch}.zip"
+            echo "Waiting for ${url} ..."
+            ok=0
+            for i in $(seq 1 30); do
+              code=$(curl -sSL -o /dev/null -w '%{http_code}' --retry 0 -I "$url" || echo 000)
+              if [ "$code" = "200" ]; then
+                echo "  available (HTTP $code) after $((i*10))s"
+                ok=1
+                break
+              fi
+              echo "  attempt $i/30: HTTP $code, retrying in 10s..."
+              sleep 10
+            done
+            if [ "$ok" -ne 1 ]; then
+              echo "::error::Release asset not downloadable after retries: $url"
+              exit 1
+            fi
+          done
+
+      - name: Verify the release bundle reports the release version
+        # Belt-and-suspenders against the "image tagged vX shows vY in the Admin
+        # Panel" bug: the image is just the unzipped wekan-<version>-<arch>.zip
+        # bundle (Dockerfile moves it to /build), and the Admin Panel shows that
+        # bundle's app package.json version (server/statistics.js reads
+        # require('/package.json').version). Assert the amd64 bundle's WeKan
+        # version equals the release version BEFORE the expensive multi-arch
+        # buildx, so a stale/mismatched bundle fails fast with a clear message
+        # instead of shipping (and pushing to three registries) a mislabeled image.
+        run: |
+          set -euo pipefail
+          url="https://github.com/wekan/wekan/releases/download/v${VERSION}/wekan-${VERSION}-amd64.zip"
+          wget -q "$url" -O bundle.zip
+          tmp="$(mktemp -d)"
+          # Extract only package.json files (not the whole multi-hundred-MB bundle).
+          unzip -o -q bundle.zip '*package.json' -d "$tmp"
+          # The WeKan app package.json is the only one whose "version" carries a
+          # leading 'v' (e.g. "v9.61.0"); every dependency uses plain semver. So a
+          # v-prefixed "version" uniquely identifies the app's own package.json.
+          found="$(grep -rhoE '"version": "v[0-9][^"]*"' "$tmp" \
+                    | grep -oE 'v[0-9][^"]*' | sort -u | head -1 || true)"
+          rm -rf "$tmp" bundle.zip
+          if [ -z "$found" ]; then
+            echo "::error::Could not find a v-prefixed WeKan version in the bundle's package.json files."
+            exit 1
+          fi
+          if [ "$found" != "v${VERSION}.0" ] && [ "$found" != "v${VERSION}" ]; then
+            echo "::error::Bundle reports app version $found but the release is v${VERSION}. The bundle baked into the image is stale/mismatched — the Admin Panel would show $found. Aborting before build."
+            exit 1
+          fi
+          echo "Bundle app version $found matches release v${VERSION}."
+
+      - name: Build and push multi-arch image
+        # Pass VERSION explicitly as a build-arg. The Dockerfile's `ARG VERSION`
+        # default is only a fallback for manual builds; the release version is the
+        # authoritative source here. Without this the image would build against the
+        # Dockerfile default (downloading that version's wekan-<v>-<arch>.zip and
+        # baking its package.json), so a v${VERSION}-tagged image could ship — and
+        # report in the Admin Panel — a stale, different version.
+        run: |
+          docker buildx build \
+            --platform linux/amd64,linux/arm64 \
+            --build-arg VERSION=${VERSION} \
+            -t wekanteam/wekan:v${VERSION} \
+            -t wekanteam/wekan:latest \
+            -t quay.io/wekan/wekan:v${VERSION} \
+            -t quay.io/wekan/wekan:latest \
+            -t ghcr.io/wekan/wekan:v${VERSION} \
+            -t ghcr.io/wekan/wekan:latest \
+            --push \
+            .
+
+  # ─── 9. Build the snap on Launchpad, push to the store, attach to release ────
+  # The snap's `wekan` part downloads wekan-<version>-<arch>.zip from the GitHub
+  # Release, so this job runs only after `release` has published those assets.
+  # `snapcraft remote-build` builds every platform listed in snapcraft.yaml
+  # (amd64 + arm64) on Launchpad.
+  snap:
+    needs: [prepare, release]
+    runs-on: ubuntu-latest
+    env:
+      VERSION: ${{ needs.prepare.outputs.version }}
+    steps:
+      - uses: actions/checkout@v6
+        with:
+          ref: refs/tags/v${{ needs.prepare.outputs.version }}
+          # remote-build (Launchpad) rejects shallow clones, so fetch full history
+          fetch-depth: 0
+
+      - name: Install snapcraft
+        run: sudo snap install snapcraft --classic
+
+      - name: Provide Launchpad credentials for remote-build
+        env:
+          LP_CREDENTIALS: ${{ secrets.LP_CREDENTIALS }}
+        run: |
+          mkdir -p ~/.local/share/snapcraft
+          printf '%s' "$LP_CREDENTIALS" | base64 -d > ~/.local/share/snapcraft/launchpad-credentials
+          chmod 600 ~/.local/share/snapcraft/launchpad-credentials
+
+      - name: Verify snapcraft.yaml version matches the release
+        # The `bump` job (releases/version.sh) is the single source of truth for
+        # the snap version and updates snapcraft.yaml before the tag is created.
+        # snapcraft.yaml's `version:` names the produced files
+        # (wekan_<version>_<arch>.snap), so if a stale tag carried the wrong
+        # version the build would produce wekan_<old>_*.snap and the upload/attach
+        # globs (wekan_${VERSION}_*.snap) would match nothing — passing the literal
+        # glob to `snapcraft upload` ("is not a valid file", exit 64). Assert it
+        # here so that mismatch fails fast (before a ~20 min Launchpad build) with
+        # a clear pointer, instead of re-bumping the version inside this build job.
+        run: |
+          set -euo pipefail
+          if ! grep -qxF "version: '${VERSION}'" snapcraft.yaml; then
+            echo "::error::snapcraft.yaml is not at version '${VERSION}' ($(grep -m1 '^version:' snapcraft.yaml)). The bump job (releases/version.sh) did not update the tagged commit."
+            exit 1
+          fi
+          echo "snapcraft.yaml is at version '${VERSION}'."
+
+      - name: Build snaps on Launchpad (amd64 + arm64)
+        # `snapcraft remote-build` is experimental and talks to Launchpad over
+        # HTTPS after pushing the whole repo; it intermittently dies with a
+        # transient TLS drop (e.g. "SSLEOFError: EOF occurred in violation of
+        # protocol", exit 70) that has nothing to do with the build itself.
+        # Retry a few times so one network hiccup doesn't fail the release.
+        run: |
+          set -uo pipefail
+          shopt -s nullglob
+          attempts=3
+          for i in $(seq 1 "$attempts"); do
+            echo "::group::Remote build attempt $i/$attempts"
+            snapcraft remote-build --launchpad-accept-public-upload && rc=0 || rc=$?
+            echo "::endgroup::"
+            # snapcraft remote-build can exit 0 even when the Launchpad build
+            # FAILED (it just downloads the build logs and produces no .snap), so
+            # don't trust the exit code alone — require that .snap files exist.
+            snaps=( wekan_${VERSION}_*.snap )
+            if [ "$rc" -eq 0 ] && [ "${#snaps[@]}" -gt 0 ]; then
+              echo "Remote build succeeded on attempt $i: ${snaps[*]}"
+              exit 0
+            fi
+            echo "Attempt $i: snapcraft exit=$rc, .snap files produced=${#snaps[@]}."
+            # Surface the Launchpad build logs so a real build failure is
+            # diagnosable here, instead of as a later cryptic upload error.
+            for log in snapcraft-wekan-*.txt; do
+              echo "::group::Launchpad build log: $log (last 150 lines)"
+              tail -n 150 "$log"
+              echo "::endgroup::"
+            done
+            if [ "$i" -lt "$attempts" ]; then
+              echo "Retrying in 60s..."
+              sleep 60
+            fi
+          done
+          echo "::error::Remote build failed after $attempts attempts (no wekan_${VERSION}_*.snap produced)." >&2
+          exit 1
+
+      - name: Push snaps to the Snap Store (edge + beta channels)
+        env:
+          SNAPCRAFT_STORE_CREDENTIALS: ${{ secrets.SNAP_AUTH }}
+        run: |
+          set -euo pipefail
+          shopt -s nullglob
+          snaps=( wekan_${VERSION}_*.snap )
+          if [ "${#snaps[@]}" -eq 0 ]; then
+            echo "::error::No wekan_${VERSION}_*.snap files to upload."
+            exit 1
+          fi
+          for f in "${snaps[@]}"; do
+            echo "Uploading $f to the Snap Store (edge,beta)..."
+            snapcraft upload --release=edge,beta "$f"
+          done
+
+      - name: Attach snaps to the GitHub Release
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        run: |
+          set -euo pipefail
+          shopt -s nullglob
+          snaps=( wekan_${VERSION}_*.snap )
+          if [ "${#snaps[@]}" -eq 0 ]; then
+            echo "::error::No wekan_${VERSION}_*.snap files to attach."
+            exit 1
+          fi
+          gh release upload "v${VERSION}" "${snaps[@]}" --clobber
@@ -1,163 +0,0 @@
-name: Test suite
-
-on:
-  push:
-    branches:
-      - main
-  pull_request:
-
-permissions:
-  contents: read # to fetch code (actions/checkout)
-
-jobs:
-# the following are optional jobs and need to be configured according
-# to this project's settings:
-#
-#  lintcode:
-#    name: Javascript lint
-#    runs-on: ubuntu-latest
-#    steps:
-#    - name: checkout
-#      uses: actions/checkout@v6
-#
-#    - name: setup node
-#      uses: actions/setup-node@v1
-#      with:
-#        node-version: '12.x'
-#
-#    - name: cache dependencies
-#      uses: actions/cache@v1
-#      with:
-#        path: ~/.npm
-#        key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
-#        restore-keys: |
-#          ${{ runner.os }}-node-
-#
-#    - run: npm install
-#    - run: npm run lint:code
-#
-#  lintstyle:
-#    name: SCSS lint
-#    runs-on: ubuntu-latest
-#    needs: [lintcode]
-#    steps:
-#    - name: checkout
-#      uses: actions/checkout@v6
-#
-#    - name: setup node
-#      uses: actions/setup-node@v1
-#      with:
-#        node-version: '12.x'
-#
-#    - name: cache dependencies
-#      uses: actions/cache@v1
-#      with:
-#        path: ~/.npm
-#        key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
-#        restore-keys: |
-#          ${{ runner.os }}-node-
-#    - run: npm install
-#    - run: npm run lint:style
-#
-#  lintdocs:
-#    name: documentation lint
-#    runs-on: ubuntu-latest
-#    needs: [lintcode,lintstyle]
-#    steps:
-#    - name: checkout
-#      uses: actions/checkout@v6
-#
-#    - name: setup node
-#      uses: actions/setup-node@v1
-#      with:
-#        node-version: '12.x'
-#
-#    - name: cache dependencies
-#      uses: actions/cache@v1
-#      with:
-#        path: ~/.npm
-#        key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
-#        restore-keys: |
-#          ${{ runner.os }}-node-
-#
-#    - run: npm install
-#    - run: npm run lint:markdown
-
-  tests:
-    name: Meteor ${{ matrix.meteor }} tests
-    runs-on: ubuntu-latest
-    steps:
-
-      # CHECKOUTS
-      - name: Checkout
-        uses: actions/checkout@v6
-
-      # CACHING
-      - name: Install Meteor
-        id: cache-meteor-install
-        uses: actions/cache@v5
-        with:
-          path: ~/.meteor
-          key: v1-meteor-${{ hashFiles('.meteor/versions') }}
-          restore-keys: |
-                v1-meteor-
-
-      - name: Cache NPM dependencies
-        id: cache-meteor-npm
-        uses: actions/cache@v5
-        with:
-          path: ~/.npm
-          key: v1-npm-${{ hashFiles('package-lock.json') }}
-          restore-keys: |
-                v1-npm-
-
-      - name: Cache Meteor build
-        id: cache-meteor-build
-        uses: actions/cache@v5
-        with:
-          path: |
-            .meteor/local/resolver-result-cache.json
-            .meteor/local/plugin-cache
-            .meteor/local/isopacks
-            .meteor/local/bundler-cache/scanner
-          key: v1-meteor_build_cache-${{ github.ref }}-${{ github.sha }}
-          restore-keys: |
-            v1-meteor_build_cache-
-
-      - name: Setup meteor
-        uses: meteorengineer/setup-meteor@v2
-        with:
-          meteor-release: '2.2'
-
-      - name: Install NPM Dependencies
-        run: meteor npm ci
-
-      - name: Run Tests
-        run: sh ./test-wekan.sh -cv
-
-      - name: Upload coverage
-        uses: actions/upload-artifact@v6
-        with:
-          name: coverage-folder
-          path: .coverage/
-
-  coverage:
-    name: Coverage report
-    runs-on: ubuntu-latest
-    needs: [tests]
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v6
-
-      - name: Download coverage
-        uses: actions/download-artifact@v7
-        with:
-          name: coverage-folder
-          path: .coverage/
-
-
-      - name: Coverage Report
-        uses: VeryGoodOpenSource/very_good_coverage@v3.0.0
-        with:
-          path: ".coverage/lcov.info"
-          min_coverage: 1 # TODO add tests and increase to 95!
@@ -1,4 +1,5 @@
 *~
+/*.log
 *.sw*
 .meteor-spk
 *.sublime-workspace
@@ -31,11 +32,41 @@ Thumbs.db
 ehthumbs.db
 .eslintcache
 .meteor/local
+.meteor/local-test
 .devcontainer/docker-compose.extend.yml
 .devcontainer/volumes*/
 .coverage

+# Rspack build artifacts
+_build/
+public/build-assets/
+public/build-chunks/
+private/build-assets/
+private/build-chunks/
+public/client-rspack.js.map
+
 # Helm chart
 # Chart dependencies
 /helm/wekan/**/*.tgz
 /helm/wekan/charts
+
+# Meteor Modern-Tools build context directories
+_build
+*/build-assets
+*/build-chunks
+.rsdoctor
+
+# Tests
+playwright-report/
+test-results/
+
+# Claude AI
+.claude/
+
+# Tools like mongosh etc so that they work inside Flatpak sandbox
+.tools/
+
+# Meteor custom local directory (METEOR_LOCAL_DIR)
+_build-local-test
+*/build-assets-local-test
+*/build-chunks-local-test
@@ -3,28 +3,29 @@
 # 'meteor add' and 'meteor remove' will edit this file for you,
 # but you can also edit it by hand.

-meteor-base@1.5.1
+meteor-base@1.5.2

 # Build system
-ecmascript@0.16.8
-standard-minifier-js@2.8.1
-mquandalle:jade
-coffeescript@2.4.1!
+ecmascript@0.18.0
+standard-minifier-js@3.2.0
+rspack@1.1.0

-# Polyfills
-es5-shim@4.8.0
+blaze@3.0.2

 # Collections
 aldeed:collection2
+aldeed:schema-index@4.0.0-beta.5
 reywood:publish-composite
-dburles:collection-helpers
-mongo@1.16.8
+mongo@2.4.0-rc350.1

 # Account system
-accounts-password@2.4.0
-useraccounts:core
-useraccounts:unstyled
-simple:rest-accounts-password
+accounts-password@3.3.0-rc350.1
+accounts-express@1.0.0-rc350.1
+communitypackages:core
+communitypackages:unstyled
+communitypackages:flow-routing
+# Routing
+ostrio:flow-router-extra
 wekan-ldap
 wekan-accounts-cas
 wekan-accounts-sandstorm
@@ -33,53 +34,32 @@ wekan-oidc
 wekan-accounts-oidc

 # Utilities
-check@1.3.2
-jquery@3.0.0!
-random@1.2.1
-reactive-dict@1.3.1
-session@1.2.1
-tracker@1.3.3
-underscore@1.0.13
-audit-argument-checks@1.0.7
-raix:handlebar-helpers
-http@2.0.0! # force new http package
-
-# Datepicker (disabled - using native HTML inputs)
-# wekan-bootstrap-datepicker
+check@1.5.0
+random@1.2.2
+reactive-dict@1.3.2
+session@1.2.3-rc350.1
+tracker@1.3.4
+audit-argument-checks@1.0.8

 # UI components
 ostrio:i18n
-reactive-var@1.0.12
-templates:tabs
-meteor-autosize
-shell-server@0.5.0
-email@2.2.5
-dynamic-import@0.7.3
-msavin:usercache
-# Keep stylus in 1.1.0, because building v2 takes extra 52 minutes.
-meteorhacks:subs-manager
-meteorhacks:aggregate@1.3.0
+reactive-var@1.0.13
+shell-server@0.7.0
+email@3.2.0-rc350.1
+dynamic-import@0.7.4
 wekan-markdown
-konecty:mongo-counter
 quave:synced-cron
 ostrio:cookies
-ostrio:files@2.3.0
-lmieulet:meteor-coverage
-meteortesting:mocha@2.0.3
-aldeed:simple-schema
+ostrio:files
+# lmieulet:meteor-coverage
+meteortesting:mocha@3.0.0
 matb33:collection-hooks
-simple:json-routes
-spacebars
-service-configuration@1.3.2
-communitypackages:picker
-minifier-css@1.6.4
-blaze
-peerlibrary:blaze-components
-ejson@1.1.3
-logging@1.3.3
+service-configuration@1.3.5
+minifier-css@2.0.2-rc350.1
+ejson@1.2.0-rc350.1
+logging@1.3.6
 wekan-fullcalendar
-momentjs:moment@2.29.3
 wekan-fontawesome
-
-useraccounts:flow-routing-extra
-ostrio:flow-router-extra
+jam:offline
+jam:method
+jam:pub-sub
@@ -1 +1 @@
-METEOR@2.16
+METEOR@3.5-rc.1
@@ -1,150 +1,121 @@
-accounts-base@2.2.11
-accounts-oauth@1.4.4
-accounts-password@2.4.0
-aldeed:collection2@2.10.0
-aldeed:collection2-core@1.2.0
-aldeed:schema-deny@1.1.0
-aldeed:schema-index@1.1.1
-aldeed:simple-schema@1.5.4
-allow-deny@1.1.1
-audit-argument-checks@1.0.7
-autoupdate@1.8.0
-babel-compiler@7.10.5
-babel-runtime@1.5.1
-base64@1.0.12
-binary-heap@1.0.11
-blaze@2.7.1
-blaze-tools@1.1.3
-boilerplate-generator@1.7.2
-caching-compiler@1.2.2
-caching-html-compiler@1.2.1
-callback-hook@1.5.1
-check@1.4.1
-coffeescript@2.7.0
-coffeescript-compiler@2.4.1
-communitypackages:picker@1.1.1
-dburles:collection-helpers@1.1.0
-ddp@1.4.1
-ddp-client@2.6.2
-ddp-common@1.4.1
-ddp-rate-limiter@1.2.1
-ddp-server@2.7.1
-deps@1.0.12
-diff-sequence@1.1.2
-dynamic-import@0.7.3
-ecmascript@0.16.8
-ecmascript-runtime@0.8.1
-ecmascript-runtime-client@0.12.1
-ecmascript-runtime-server@0.11.0
-ejson@1.1.3
-email@2.2.6
-es5-shim@4.8.0
-fetch@0.1.4
-geojson-utils@1.0.11
-hot-code-push@1.0.4
-html-tools@1.1.3
-htmljs@1.1.1
-http@2.0.0
-id-map@1.1.1
-inter-process-messaging@0.1.1
-jquery@3.0.0
-konecty:mongo-counter@0.0.5_3
-lmieulet:meteor-coverage@1.1.4
-localstorage@1.2.0
-logging@1.3.4
-matb33:collection-hooks@1.3.0
-mdg:validation-error@0.5.1
-meteor@1.11.5
-meteor-autosize@5.0.1
-meteor-base@1.5.1
-meteorhacks:aggregate@1.3.0
-meteorhacks:collection-utils@1.2.0
-meteorhacks:picker@1.0.3
-meteorhacks:subs-manager@1.6.4
-meteortesting:browser-tests@1.4.2
-meteortesting:mocha@2.1.0
-meteortesting:mocha-core@8.0.1
-minifier-css@1.6.4
-minifier-js@2.8.0
-minifiers@1.1.8-faster-rebuild.0
-minimongo@1.9.4
-modern-browsers@0.1.10
-modules@0.20.0
-modules-runtime@0.13.1
-momentjs:moment@2.29.3
-mongo@1.16.10
-mongo-decimal@0.1.3
-mongo-dev-server@1.1.0
-mongo-id@1.0.8
-mongo-livedata@1.0.12
-mquandalle:jade@0.4.9
-mquandalle:jade-compiler@0.4.5
-msavin:usercache@1.8.0
-npm-mongo@4.17.2
-oauth@2.2.1
-oauth2@1.3.2
-observe-sequence@1.0.21
-ordered-dict@1.1.0
-ostrio:cookies@2.7.2
+accounts-base@3.3.0-rc350.1
+accounts-express@1.0.0-rc350.1
+accounts-oauth@1.4.7-rc350.1
+accounts-password@3.3.0-rc350.1
+aldeed:collection2@4.2.0
+aldeed:schema-index@4.0.0
+aldeed:simple-schema@1.13.1
+allow-deny@2.1.0
+audit-argument-checks@1.0.8
+autoupdate@2.0.1
+babel-compiler@7.14.0
+babel-runtime@1.5.2
+base64@1.0.14-rc350.1
+binary-heap@1.0.13-rc350.1
+blaze@3.0.3
+blaze-tools@2.0.1
+boilerplate-generator@2.1.0
+caching-compiler@2.0.1
+caching-html-compiler@2.0.1
+callback-hook@1.8.0-rc350.1
+check@1.5.0
+communitypackages:core@2.0.3
+communitypackages:flow-routing@2.1.0
+communitypackages:unstyled@2.0.1
+core-runtime@1.0.0
+ddp@1.4.2
+ddp-client@3.3.0-rc350.1
+ddp-common@1.4.5-rc350.1
+ddp-rate-limiter@1.3.0-rc350.1
+ddp-server@3.3.0-rc350.1
+diff-sequence@1.1.3
+dynamic-import@0.7.4
+ecmascript@0.18.0
+ecmascript-runtime@0.8.3
+ecmascript-runtime-client@0.13.0
+ecmascript-runtime-server@0.11.1
+ejson@1.2.0-rc350.1
+email@3.2.0-rc350.1
+es5-shim@4.8.1
+facts-base@1.0.2
+fetch@0.2.0-rc350.1
+geojson-utils@1.0.12
+hot-code-push@1.0.5
+html-tools@2.0.1
+htmljs@2.0.2
+id-map@1.2.0
+inter-process-messaging@0.1.2
+jam:method@1.9.1
+jam:offline@0.4.1
+jam:pub-sub@0.5.1
+jquery@3.0.2
+lai:collection-extensions@1.0.0
+localstorage@1.2.1
+logging@1.3.6
+matb33:collection-hooks@2.1.0
+meteor@2.3.1-rc350.1
+meteor-base@1.5.2
+meteortesting:browser-tests@1.8.0
+meteortesting:mocha@3.3.0
+meteortesting:mocha-core@8.2.0
+minifier-css@2.0.2-rc350.1
+minifier-js@3.2.0
+minimongo@2.2.0-rc350.1
+modern-browsers@0.2.3
+modules@0.20.3
+modules-runtime@0.13.2
+mongo@2.4.0-rc350.1
+mongo-decimal@0.2.0
+mongo-dev-server@1.1.1
+mongo-id@1.0.9
+npm-mongo@6.16.1
+oauth@3.0.4-rc350.1
+oauth2@1.3.3
+observe-sequence@2.0.1
+ordered-dict@1.2.0
+ostrio:cookies@2.9.2
 ostrio:cstorage@4.0.1
-ostrio:files@2.3.3
-ostrio:flow-router-extra@3.10.1
+ostrio:files@3.0.1
+ostrio:flow-router-extra@3.15.3
 ostrio:i18n@3.2.1
-peerlibrary:assert@0.3.0
-peerlibrary:base-component@0.17.1
-peerlibrary:blaze-components@0.23.0
-peerlibrary:computed-field@0.10.0
-peerlibrary:data-lookup@0.3.0
-peerlibrary:reactive-field@0.6.0
-promise@0.12.2
-quave:synced-cron@2.2.1
-raix:eventemitter@0.1.3
-raix:handlebar-helpers@0.2.5
-random@1.2.1
-rate-limit@1.1.1
-react-fast-refresh@0.2.8
-reactive-dict@1.3.1
-reactive-var@1.0.12
-reload@1.3.1
-retry@1.1.0
+promise@1.0.0
+quave:synced-cron@2.4.0
+raix:eventemitter@1.0.0
+random@1.2.2
+rate-limit@1.2.0-rc350.1
+react-fast-refresh@0.3.0
+reactive-dict@1.3.2
+reactive-var@1.0.13
+reload@1.3.2
+retry@1.1.1
 reywood:publish-composite@1.9.0
-routepolicy@1.1.1
-service-configuration@1.3.4
-session@1.2.1
-sha@1.0.9
-shell-server@0.5.0
-simple:authenticate-user-by-token@1.2.1
-simple:json-routes@2.3.1
-simple:rest-accounts-password@1.2.2
-simple:rest-bearer-token-parser@1.1.1
-simple:rest-json-error-handler@1.1.1
-socket-stream-client@0.5.2
-spacebars@1.4.1
-spacebars-compiler@1.3.1
-standard-minifier-js@2.8.1
-templates:tabs@2.3.0
-templating@1.4.1
-templating-compiler@1.4.1
-templating-runtime@1.5.0
-templating-tools@1.2.2
-tracker@1.3.3
-typescript@4.9.5
-ui@1.0.13
-underscore@1.6.1
-url@1.3.2
-useraccounts:core@1.16.2
-useraccounts:flow-routing-extra@1.1.0
-useraccounts:unstyled@1.14.2
-webapp@1.13.8
-webapp-hashing@1.1.1
-wekan-accounts-cas@0.1.0
+routepolicy@1.1.2
+rspack@1.1.0
+service-configuration@1.3.5
+session@1.2.3-rc350.1
+sha@1.0.10
+shell-server@0.7.0
+socket-stream-client@0.7.0-rc350.1
+spacebars@2.0.1
+spacebars-compiler@2.0.1
+standard-minifier-js@3.2.0
+templating@1.4.5
+templating-compiler@2.0.1
+templating-runtime@2.0.2
+templating-tools@2.0.1
+tools-core@1.1.0
+tracker@1.3.4
+typescript@5.10.0
+url@1.3.6-rc350.1
+webapp@2.2.0-rc350.1
+webapp-hashing@1.1.2
+wekan-accounts-cas@0.2.0
 wekan-accounts-lockout@1.1.0
 wekan-accounts-oidc@1.0.10
-wekan-accounts-sandstorm@0.8.0
+wekan-accounts-sandstorm@0.9.0
 wekan-fontawesome@6.4.2
-wekan-fullcalendar@3.10.5
-wekan-ldap@0.0.2
+wekan-fullcalendar@5.11.5
+wekan-ldap@0.1.0
 wekan-markdown@1.0.9
-wekan-oidc@1.0.12
-yasaricli:slugify@0.0.7
+wekan-oidc@1.1.0
 zodern:types@1.0.13
@@ -0,0 +1,2 @@
+npm-packages/
+tests/
@@ -3,9 +3,14 @@
 For all code at WeKan GitHub Organization https://github.com/wekan

 - All code in pull requests need to have permission already to add it to WeKan with MIT license, and will become MIT license.
- All code xet7 add is MIT license.
 - For any dependencies, permissive licenses like https://copyfree.org are preferred
 - For anything currently that is non-permissive (like GPL, AGPL, SSPL), those will be replaced with permissive-licensed alternatives
+- Any intelligence allowed: Human, AI or any other. No discrimination, please have world peace. Mentioning participants optional.
+- All code is checked and validated by xet7 and many different security AI. If code is real working fix or feature, it usually will be merged.
+- All known vulnerabilities have been fixed at newest WeKan, please upgrade https://wekan.fi/upgrade/
+- There is no known backdoors. If WeKan is installed by someone else, first registered user is Admin and has Admin Panel access.
+- Maintainer of WeKan has no access to someone elses installed WeKan.
+- For someone elses installed WeKan, see [Forgot Password](https://github.com/wekan/wekan/blob/main/docs/Login/Forgot-Password.md)

 # Reporting about violations or something else

@@ -6,24 +6,25 @@ Not paid:
  - Security reports, see [SECURITY.md](SECURITY.md)
  - Pull requests
  - xet7 checking pull requests
- Public Community Support
+  - This is because full-featured WeKan FLOSS kanban with MIT license is free to use
+    also for Commercial Use without any payment, with full source code at
+    https://github.com/wekan/wekan for all platforms at https://wekan.fi/install/ .
+    There is nothing proprietary. WeKan is NOT Big Tech.
+    WeKan is maintained by https://github.com/xet7 at Finland https://wekan.fi .     
+- Public FLOSS Developer Community Support:
  - https://github.com/wekan/wekan/issues

-Paid by customers of WeKan Team:
+Paid by customers of WeKan to WeKan:

- Commercial Support at https://wekan.fi/commercial-support/
-  - Support
-  - Private Chat
-  - Features
-  - Fixes
-  - Hosting
+- Optional Private Paid Commercial Support at https://wekan.fi/commercial-support/
+  - Optional Paid Support/Features/Fixes/PrivateChat . All Paid Features and Fixes are added directly to FLOSS WeKan https://github.com/wekan/wekan
+  - Optional Paid Official SaaS Hosting https://wekan.fi/saas/ , if you need full-featured hosting, that is more than free app https://wekan.fi/app/

 ## Contributing Security related

-For responsible security disclosure, please follow this process:
-https://github.com/wekan/wekan/blob/main/SECURITY.md
+For responsible security disclosure, please follow this process: [SECURITY.md](SECURITY.md)

-CVE Hall of Fame is at https://wekan.github.io/hall-of-fame/
+CVE Hall of Fame is at https://wekan.fi/hall-of-fame/

 ## Contributing to Documentation Wiki

@@ -33,7 +34,17 @@ and click send PR.

 ## Contributing code

-[Building WeKan and sending PR](https://github.com/wekan/wekan/wiki/Emoji).
+Use rebuild-wekan.sh to run all tests to verify you don't break any features, before sending PR.
+
+Only send one feature or fix at one PR. Do not add many unrelated changes.
+
+Only send those changed code lines, that are related to your one feature or fix.
+
+Do not format unrelated code. Do not use code formatting or linting like eslist or prettier.
+
+Send your code ASAP, because there are daily releases of WeKan with major features and fixes added.
+
+[Building WeKan and sending PR](https://github.com/wekan/wekan/blob/main/docs/DeveloperDocs/Build-and-Create-Pull-Request.md).

 WeKan code contributors Hall of Fame is at ChangeLog, where
 GitHub usernames are mentioned with changes added:
@@ -44,13 +55,9 @@ Changes can be like typo fixes, bugfixes, features, or anything else
 like for example at open GitHub issues https://github.com/wekan/wekan/issues .
 Closed issues are already fixed or implemented.

-Also see other docs at wiki, for example:
+Also see other docs:

-https://github.com/wekan/wekan/wiki/Developer-Documentation
-
-Do not use code formatting or linting like eslist or prettier.
-
-Only send minimal changed code lines, that are related to feature or fix.
+https://github.com/wekan/wekan/tree/main/docs/DeveloperDocs

 WeKan code has MIT license.

@@ -64,7 +71,7 @@ so that WeKan code will still work OK.
 ## Contributing translations

 Non-English translations are contributed only at
-https://transifex.com/wekan/wekan
+https://app.transifex.com/wekan/wekan

 When adding new features, in your PR to
 https://github.com/wekan/wekan/pulls
@@ -1,25 +1,26 @@
-FROM ubuntu:24.04
+FROM ubuntu:26.04
 LABEL maintainer="wekan"
 LABEL org.opencontainers.image.ref.name="ubuntu"
-LABEL org.opencontainers.image.version="24.04"
+LABEL org.opencontainers.image.version="26.04"
 LABEL org.opencontainers.image.source="https://github.com/wekan/wekan"

-# TARGETARCH is automatically provided by Docker Buildx
+# TARGETARCH and TARGETVARIANT are automatically provided by Docker Buildx
 ARG TARGETARCH
+ARG TARGETVARIANT
+ARG VERSION=9.63
 ARG DEBIAN_FRONTEND=noninteractive

 ENV BUILD_DEPS="apt-utils gnupg wget bzip2 g++ curl libarchive-tools build-essential git ca-certificates python3 unzip"

 ENV \
    DEBUG=false \
-    NODE_VERSION=v14.21.4 \
-    METEOR_RELEASE=METEOR@2.16 \
+    NODE_VERSION=v24.17.0 \
+    METEOR_RELEASE=METEOR@3.5-beta.12 \
    USE_EDGE=false \
-    METEOR_EDGE=1.5-beta.17 \
-    NPM_VERSION=6.14.17 \
-    FIBERS_VERSION=4.0.1 \
+    NPM_VERSION=11.11.0 \
    SRC_PATH=./ \
    WITH_API=true \
+    MONGO_OPLOG_URL="" \
    RESULTS_PER_PAGE="" \
    DEFAULT_BOARD_ID="" \
    ACCOUNTS_LOCKOUT_KNOWN_USERS_FAILURES_BEFORE=3 \
@@ -41,6 +42,7 @@ ENV \
    IMAGE_COMPRESS_RATIO="" \
    NOTIFICATION_TRAY_AFTER_READ_DAYS_BEFORE_REMOVE="" \
    BIGEVENTS_PATTERN=NONE \
+    NOTIFY_ON_ASSIGN="true" \
    NOTIFY_DUE_DAYS_BEFORE_AND_AFTER="" \
    NOTIFY_DUE_AT_HOUR_OF_DAY="" \
    EMAIL_NOTIFICATION_TIMEOUT=30000 \
@@ -67,6 +69,8 @@ ENV \
    OAUTH2_TOKEN_ENDPOINT="" \
    OAUTH2_ID_MAP="" \
    OAUTH2_USERNAME_MAP="" \
+    OAUTH2_AUTO_REGISTRATION="true" \
+    OAUTH2_ADMIN_GROUPS="" \
    OAUTH2_FULLNAME_MAP="" \
    OAUTH2_ID_TOKEN_WHITELIST_FIELDS="" \
    OAUTH2_REQUEST_PERMISSIONS='openid profile email' \
@@ -92,6 +96,7 @@ ENV \
    LDAP_BACKGROUND_SYNC_INTERVAL="" \
    LDAP_BACKGROUND_SYNC_KEEP_EXISTANT_USERS_UPDATED=false \
    LDAP_BACKGROUND_SYNC_IMPORT_NEW_USERS=false \
+    LDAP_BACKGROUND_SYNC_DISABLE_NONEXISTANT_USERS=false \
    LDAP_ENCRYPTION=false \
    LDAP_CA_CERT="" \
    LDAP_REJECT_UNAUTHORIZED=false \
@@ -121,10 +126,16 @@ ENV \
    LDAP_DEFAULT_DOMAIN="" \
    LDAP_SYNC_ADMIN_STATUS="" \
    LDAP_SYNC_ADMIN_GROUPS="" \
+    LDAP_SYNC_ORGANIZATIONS=false \
+    LDAP_SYNC_ORGANIZATIONS_GROUPS="" \
+    LDAP_SYNC_TEAMS=false \
+    LDAP_SYNC_TEAMS_GROUPS="" \
    HEADER_LOGIN_ID="" \
    HEADER_LOGIN_FIRSTNAME="" \
    HEADER_LOGIN_LASTNAME="" \
    HEADER_LOGIN_EMAIL="" \
+    HEADER_LOGIN_TRUSTED_IPS="" \
+    HEADER_LOGIN_TRUSTED_PROXIES="" \
    LOGOUT_WITH_TIMER=false \
    LOGOUT_IN="" \
    LOGOUT_ON_HOURS="" \
@@ -159,34 +170,42 @@ ENV \

 RUN <<EOR
 set -o xtrace
+# Fail hard on any error so a missing release zip / failed download can never
+# produce a "successful" image with an empty /build (Cannot find /build/main.js).
+set -eo pipefail

-# Create Wekan user
-useradd --user-group --system --home-dir /home/wekan wekan
+# Create Wekan user. --create-home is required because --system users do not
+# get a home directory by default; without it /home/wekan never exists and the
+# later `chown ... /home/wekan/` aborts the build (now that set -e is active).
+useradd --user-group --system --create-home --home-dir /home/wekan wekan

 # OS Updates
 apt-get update --assume-yes
 apt-get upgrade --assume-yes
 apt-get install --assume-yes --no-install-recommends ${BUILD_DEPS}

-# Multi-arch mapping logic
+# Multi-arch mapping: Docker TARGETARCH -> Node.js arch name + WeKan bundle name
+# arm/v7 uses TARGETARCH=arm; armhf has no MongoDB Community -> uses FerretDB
 case "${TARGETARCH}" in
-    "amd64")  NODE_ARCH="x64"  WEKAN_ARCH="amd64" ;;
-    "arm64")  NODE_ARCH="arm64" WEKAN_ARCH="arm64" ;;
-    "s390x")  NODE_ARCH="s390x" WEKAN_ARCH="s390x" ;;
+    "amd64")   NODE_ARCH="x64"     WEKAN_ARCH="amd64"   ;;
+    "arm64")   NODE_ARCH="arm64"   WEKAN_ARCH="arm64"   ;;
+    "arm")     NODE_ARCH="armv7l"  WEKAN_ARCH="armhf"   ;;
+    "ppc64le") NODE_ARCH="ppc64le" WEKAN_ARCH="ppc64le" ;;
+    "s390x")   NODE_ARCH="s390x"   WEKAN_ARCH="s390x"   ;;
    *) echo "Unsupported architecture: ${TARGETARCH}"; exit 1 ;;
 esac

-# Node.js Installation
+# Node.js Installation (official nodejs.org builds for Node 22)
 cd /tmp
-wget "https://github.com/wekan/node-v14-esm/releases/download/${NODE_VERSION}/node-${NODE_VERSION}-linux-${NODE_ARCH}.tar.gz"
-wget "https://github.com/wekan/node-v14-esm/releases/download/${NODE_VERSION}/SHASUMS256.txt"
-grep "node-${NODE_VERSION}-linux-${NODE_ARCH}.tar.gz" SHASUMS256.txt | shasum -a 256 -c -
+wget "https://nodejs.org/dist/${NODE_VERSION}/node-${NODE_VERSION}-linux-${NODE_ARCH}.tar.gz"
+wget "https://nodejs.org/dist/${NODE_VERSION}/SHASUMS256.txt.asc"
+grep "node-${NODE_VERSION}-linux-${NODE_ARCH}.tar.gz" SHASUMS256.txt.asc | shasum -a 256 -c -
 tar xzf "node-${NODE_VERSION}-linux-${NODE_ARCH}.tar.gz" -C /usr/local --strip-components=1 --no-same-owner
-rm -f "node-${NODE_VERSION}-linux-${NODE_ARCH}.tar.gz" SHASUMS256.txt
+rm -f "node-${NODE_VERSION}-linux-${NODE_ARCH}.tar.gz" SHASUMS256.txt.asc
 ln -s "/usr/local/bin/node" "/usr/local/bin/nodejs"

 # NPM configuration
-npm install -g npm@${NPM_VERSION} --production
+npm install -g npm@${NPM_VERSION}
 chown --recursive wekan:wekan /home/wekan/

 # Temporary Tar swap for Meteor bundle
@@ -196,15 +215,26 @@ ln -sf $(which bsdtar) $(which tar)
 # WeKan Bundle Installation
 mkdir -p /home/wekan/app
 cd /home/wekan/app
-wget "https://github.com/wekan/wekan/releases/download/v8.26/wekan-8.26-${WEKAN_ARCH}.zip"
-unzip "wekan-8.26-${WEKAN_ARCH}.zip"
-rm "wekan-8.26-${WEKAN_ARCH}.zip"
+# Retry the release-asset download: even though the CI `docker` job needs the
+# `release` job (so the asset is already uploaded), GitHub's
+# releases/download/<tag>/<asset> URL can briefly return 404 right after upload
+# (CDN/propagation lag). A plain wget treats 404 as fatal, which failed the
+# build; retry on transient HTTP errors so propagation lag no longer breaks it.
+WEKAN_ZIP_URL="https://github.com/wekan/wekan/releases/download/v${VERSION}/wekan-${VERSION}-${WEKAN_ARCH}.zip"
+wget --tries=20 --waitretry=20 --retry-on-http-error=404,403,500,502,503 "${WEKAN_ZIP_URL}" \
+  || { echo "Failed to download ${WEKAN_ZIP_URL} after retries"; exit 8; }
+unzip "wekan-${VERSION}-${WEKAN_ARCH}.zip"
+rm "wekan-${VERSION}-${WEKAN_ARCH}.zip"
+npm install --prefix ./bundle/programs/server
 mv /home/wekan/app/bundle /build

 # Restore original tar
 mv $(which tar)~ $(which tar)

 # Cleanup
+# Remove unused Go-based pebble binary shipped by base image to reduce CVE surface.
+apt-get remove --purge --assume-yes pebble || true
+rm -f /usr/bin/pebble
 apt-get remove --purge --assume-yes ${BUILD_DEPS}
 apt-get autoremove --assume-yes
 apt-get clean --assume-yes
@@ -1,98 +0,0 @@
-FROM arm64v8/ubuntu:23.04 AS builder
-#FROM amd64/alpine:latest AS builder
-
-# Set the environment variables for builder
-ENV QEMU_VERSION=v7.2.0-1 \
-    QEMU_ARCHITECTURE=aarch64 \
-    NODE_ARCHITECTURE=linux-arm64 \
-    NODE_VERSION=v14.21.4 \
-    WEKAN_VERSION=latest  \
-    WEKAN_ARCHITECTURE=arm64
-
-    # Install dependencies
-#RUN apk update && apk add ca-certificates outils-sha1 && \
-RUN echo 'debconf debconf/frontend select Noninteractive' | debconf-set-selections
-RUN apt update && apt install ca-certificates wget unzip -y && \
-    \
-    # Download qemu static for our architecture
-    wget https://github.com/multiarch/qemu-user-static/releases/download/${QEMU_VERSION}/qemu-${QEMU_ARCHITECTURE}-static.tar.gz -O - | tar -xz && \
-    \
-    # Download wekan and shasum
-    wget https://releases.wekan.team/raspi3/wekan-${WEKAN_VERSION}-${WEKAN_ARCHITECTURE}.zip && \
-    wget https://releases.wekan.team/raspi3/SHA256SUMS.txt && \
-    # Verify wekan
-    grep wekan-${WEKAN_VERSION}-${WEKAN_ARCHITECTURE}.zip SHA256SUMS.txt | sha256sum -c - && \
-    \
-    # Unzip wekan
-    unzip wekan-${WEKAN_VERSION}-${WEKAN_ARCHITECTURE}.zip && \
-    \
-    # Download node and shasums
-    wget https://github.com/wekan/node-v14-esm/releases/download/${NODE_VERSION}/node-${NODE_VERSION}-${NODE_ARCHITECTURE}.tar.gz && \
-    wget https://github.com/wekan/node-v14-esm/releases/download/${NODE_VERSION}/SHASUMS256.txt && \
-    #wget https://nodejs.org/dist/${NODE_VERSION}/node-${NODE_VERSION}-${NODE_ARCHITECTURE}.tar.gz && \
-    #wget https://nodejs.org/dist/${NODE_VERSION}/SHASUMS256.txt.asc && \
-    #wget https://nodejs.org/dist/${NODE_VERSION}/node-${NODE_VERSION}-${NODE_ARCHITECTURE}.tar.gz && \
-    #wget https://nodejs.org/dist/${NODE_VERSION}/SHASUMS256.txt.asc && \
-    \
-    # Verify nodejs authenticity
-    grep node-${NODE_VERSION}-${NODE_ARCHITECTURE}.tar.gz SHASUMS256.txt | sha256sum -c - && \
-    \
-    # Extract node and remove tar.gz
-    tar xvzf node-${NODE_VERSION}-${NODE_ARCHITECTURE}.tar.gz
-
-# Build wekan dockerfile
-FROM --platform=linux/arm64 arm64v8/ubuntu:23.04
-LABEL maintainer="wekan"
-
-# Set the environment variables (defaults where required)
-ENV QEMU_ARCHITECTURE=aarch64 \
-    NODE_ARCHITECTURE=linux-arm64 \
-    NODE_VERSION=v14.21.4 \
-    NODE_ENV=production \
-    NPM_VERSION=latest \
-    WITH_API=true \
-    PORT=8080 \
-    ROOT_URL=http://localhost \
-    MONGO_URL=mongodb://127.0.0.1:27017/wekan \
-    LDAP_AUTHENTIFICATION_PASSWORD_FILE="" \
-    OAUTH2_SECRET_FILE="" \
-    MAIL_SERVICE_PASSWORD_FILE="" \
-    MONGO_PASSWORD_FILE="" \
-    S3_SECRET_FILE=""
-
-# Copy qemu-static to image
-COPY --from=builder qemu-${QEMU_ARCHITECTURE}-static /usr/bin
-
-# Copy the app to the image
-COPY --from=builder bundle /home/wekan/bundle
-
-# Copy
-COPY --from=builder node-${NODE_VERSION}-${NODE_ARCHITECTURE} /opt/nodejs
-
-RUN \
-    set -o xtrace && \
-    # Add non-root user wekan
-    useradd --user-group --system --home-dir /home/wekan wekan && \
-    \
-    # Install Node
-    ln -s /opt/nodejs/bin/node /usr/bin/node && \
-    ln -s /opt/nodejs/bin/npm /usr/bin/npm && \
-    mkdir -p /opt/nodejs/lib/node_modules/fibers/.node-gyp /root/.node-gyp/8.16.1 /home/wekan/.config && \
-    chown wekan --recursive /home/wekan/.config
-
-#    \
-#    # Install Node dependencies
-#    #npm install -g npm@${NPM_VERSION} && \
-#    \
-#    # Install Health Check dependencies
-#    #apk add curl
-#
-#HEALTHCHECK --start-period=30s --interval=30s --timeout=10s --retries=3 \
-#  CMD curl --fail "http://localhost:$PORT" || exit 1
-
-EXPOSE $PORT
-USER wekan
-
-# CMD ["bash", "-c", "ulimit -s 65500; exec node --stack-size=65500 --max-old-space-size=8192 /home/wekan/bundle/main.js"]
-CMD ["bash", "-c", "ulimit -s 65500; exec node /home/wekan/bundle/main.js"]
-
@@ -1,99 +0,0 @@
-FROM arm64v8/ubuntu:23.04 AS builder
-#FROM --platform=linux/amd64 amd64/ubuntu:23.04 AS builder
-#FROM --platform=linux/amd64 ghcr.io/wekan/wekan:main AS builder
-#FROM arm64v8/ubuntu:23.04 AS builder
-#FROM amd64/alpine:latest AS builder
-
-# Set the environment variables for builder
-ENV QEMU_VERSION=v7.2.0-1 \
-    QEMU_ARCHITECTURE=s390x \
-    NODE_ARCHITECTURE=linux-s390x \
-    NODE_VERSION=v14.21.4 \
-    WEKAN_VERSION=latest  \
-    WEKAN_ARCHITECTURE=s390x
-
-    # Install dependencies
-#RUN apk update && apk add ca-certificates outils-sha1 && \
-RUN echo 'debconf debconf/frontend select Noninteractive' | debconf-set-selections
-RUN apt update && apt install ca-certificates wget unzip -y && \
-    \
-    # Download qemu static for our architecture
-    wget https://github.com/multiarch/qemu-user-static/releases/download/${QEMU_VERSION}/qemu-${QEMU_ARCHITECTURE}-static.tar.gz -O - | tar -xz && \
-    \
-    # Download wekan and shasum
-    wget https://releases.wekan.team/${WEKAN_ARCHITECTURE}/wekan-${WEKAN_VERSION}-${WEKAN_ARCHITECTURE}.zip && \
-    wget https://releases.wekan.team/${WEKAN_ARCHITECTURE}/SHA256SUMS.txt && \
-    # Verify wekan
-    grep wekan-${WEKAN_VERSION}-${WEKAN_ARCHITECTURE}.zip SHA256SUMS.txt | sha256sum -c - && \
-    \
-    # Unzip wekan
-    unzip wekan-${WEKAN_VERSION}-${WEKAN_ARCHITECTURE}.zip && \
-    \
-    # Download node and shasums
-    wget https://github.com/wekan/node-v14-esm/releases/download/${NODE_VERSION}/node-${NODE_VERSION}-${NODE_ARCHITECTURE}.tar.gz && \
-    wget https://github.com/wekan/node-v14-esm/releases/download/${NODE_VERSION}/SHASUMS256.txt && \
-    #wget https://nodejs.org/dist/${NODE_VERSION}/node-${NODE_VERSION}-${NODE_ARCHITECTURE}.tar.gz && \
-    #wget https://nodejs.org/dist/${NODE_VERSION}/SHASUMS256.txt.asc && \
-    #wget https://nodejs.org/dist/${NODE_VERSION}/node-${NODE_VERSION}-${NODE_ARCHITECTURE}.tar.gz && \
-    #wget https://nodejs.org/dist/${NODE_VERSION}/SHASUMS256.txt.asc && \
-    \
-    # Verify nodejs authenticity
-    grep node-${NODE_VERSION}-${NODE_ARCHITECTURE}.tar.gz SHASUMS256.txt | sha256sum -c - && \
-    \
-    # Extract node and remove tar.gz
-    tar xvzf node-${NODE_VERSION}-${NODE_ARCHITECTURE}.tar.gz
-
-# Build wekan dockerfile
-FROM --platform=linux/s390x s390x/ubuntu:23.04
-LABEL maintainer="wekan"
-
-# Set the environment variables (defaults where required)
-ENV QEMU_ARCHITECTURE=s390x \
-    NODE_ARCHITECTURE=linux-s390x \
-    NODE_VERSION=v14.21.4 \
-    NODE_ENV=production \
-    NPM_VERSION=latest \
-    WITH_API=true \
-    PORT=8080 \
-    ROOT_URL=http://localhost \
-    MONGO_URL=mongodb://127.0.0.1:27017/wekan \
-    LDAP_AUTHENTIFICATION_PASSWORD_FILE="" \
-    OAUTH2_SECRET_FILE="" \
-    MAIL_SERVICE_PASSWORD_FILE="" \
-    MONGO_PASSWORD_FILE="" \
-    S3_SECRET_FILE=""
-
-# Copy qemu-static to image
-COPY --from=builder qemu-${QEMU_ARCHITECTURE}-static /usr/bin
-
-# Copy the app to the image
-COPY --from=builder bundle /home/wekan/bundle
-
-# Copy
-COPY --from=builder node-${NODE_VERSION}-${NODE_ARCHITECTURE} /opt/nodejs
-
-RUN \
-    set -o xtrace && \
-    # Add non-root user wekan
-    useradd --user-group --system --home-dir /home/wekan wekan && \
-    \
-    # Install Node
-    ln -s /opt/nodejs/bin/node /usr/bin/node && \
-    ln -s /opt/nodejs/bin/npm /usr/bin/npm && \
-    mkdir -p /opt/nodejs/lib/node_modules/fibers/.node-gyp /root/.node-gyp/8.16.1 /home/wekan/.config && \
-    chown wekan --recursive /home/wekan/.config
-
-#    \
-#    # Install Node dependencies
-#    #npm install -g npm@${NPM_VERSION} && \
-#    \
-#    # Install Health Check dependencies
-#    #apk add curl
-#
-#HEALTHCHECK --start-period=30s --interval=30s --timeout=10s --retries=3 \
-#  CMD curl --fail "http://localhost:$PORT" || exit 1
-
-EXPOSE $PORT
-USER wekan
-
-CMD ["bash", "-c", "ulimit -s 65500; exec node /home/wekan/bundle/main.js"]
@@ -47,12 +47,13 @@ See bottom of https://github.com/wekan/wekan/issues/3874
 ## FAQ

 **NOTE**:
+
 - Please read the [FAQ](https://github.com/wekan/wekan/blob/main/docs/FAQ/FAQ.md) first
 - Please don't feed the [trolls](https://github.com/wekan/wekan/blob/main/docs/FAQ/FAQ.md#why-am-i-called-a-troll) and [spammers](https://github.com/wekan/wekan/blob/main/docs/FAQ/FAQ.md#why-am-i-called-a-spammer) that are mentioned in the FAQ :)

 ## About WeKan ®

-WeKan ® is an completely [Open Source][open_source] and [Free software][free_software]
+WeKan ® is a completely [Open Source][open_source] and [Free software][free_software]
 collaborative kanban board application with MIT license.

 Whether you’re maintaining a personal todo list, planning your holidays with some friends,
@@ -76,15 +77,15 @@ that by providing one-click installation on various platforms.
 - 1 GB RAM minimum free for WeKan ®. Production server should have minimum total 4 GB RAM.
  For thousands of users, for example with [Docker](https://github.com/wekan/wekan/blob/main/docker-compose.yml): 3 frontend servers,
  each having 2 CPU and 2 wekan-app containers. One backend wekan-db server with many CPUs.
- Enough disk space and alerts about low disk space. If you run out disk space, MongoDB database gets corrupted.
+- Enough disk space and alerts about low disk space. If you run out of disk space, MongoDB database gets corrupted.
 - SECURITY: Updating to newest WeKan ® version very often. Please check you do not have automatic updates of Sandstorm or Snap turned off.
  Old versions have security issues because of old versions Node.js etc. Only newest WeKan ® is supported.
  WeKan ® on Sandstorm is not usually affected by any Standalone WeKan ® (Snap/Docker/Source) security issues.
 - [Reporting all new bugs immediately](https://github.com/wekan/wekan/issues).
  New features and fixes are added to WeKan ® [many times a day](https://github.com/wekan/wekan/blob/main/CHANGELOG.md).
- [Backups](https://github.com/wekan/wekan/blob/main/docs/Backup/Backup.md) of WeKan ® database once a day miminum.
+- [Backups](https://github.com/wekan/wekan/blob/main/docs/Backup/Backup.md) of WeKan ® database once a day minimum.
  Bugs, updates, users deleting list or card, harddrive full, harddrive crash etc can eat your data. There is no undo yet.
-  Some bug can cause WeKan ® board to not load at all, requiring manual fixing of database content.
+  Some bugs can cause WeKan ® board to not load at all, requiring manual fixing of database content.

 ## Roadmap and Demo

@@ -92,7 +93,7 @@ that by providing one-click installation on various platforms.

 [Developer Documentation][dev_docs]

- There is many companies and individuals contributing code to WeKan ®, to add features and bugfixes
+- There are many companies and individuals contributing code to WeKan ®, to add features and bugfixes
  [many times a day](https://github.com/wekan/wekan/blob/main/CHANGELOG.md).
 - [Please add Add new Feature Requests and Bug Reports immediately](https://github.com/wekan/wekan/issues).
 - [Commercial Support](https://wekan.fi/commercial-support/).
@@ -102,12 +103,75 @@ By working directly with WeKan ® you get the benefit of active maintenance and

 ## Getting Started with Development

-The default branch uses [Meteor 2 with Node.js 14](https://wekan.fi/install/).
+The default branch uses Meteor 3.5-beta.7 with Node.js 24.x.
+See [CHANGELOG.md](https://github.com/wekan/wekan/blob/main/CHANGELOG.md) for the latest runtime updates.

 To contribute, [create a fork](https://github.com/wekan/wekan/blob/main/docs/DeveloperDocs/Build-and-Create-Pull-Request.md#2-create-fork-of-httpsgithubcomwekanwekan-at-github-web-page) and run `./rebuild-wekan.sh` (or `./rebuild-wekan.bat` on Windows) as detailed [here](https://github.com/wekan/wekan/blob/main/docs/DeveloperDocs/Build-and-Create-Pull-Request.md#3-select-option-1-to-install-dependencies-and-then-enter). Once you're ready, please test your code and [submit a pull request (PR)](https://github.com/wekan/wekan/blob/main/docs/DeveloperDocs/Build-and-Create-Pull-Request.md#7-test).

 Please refer to the [developer documentation](https://github.com/wekan/wekan/blob/main/docs/DeveloperDocs/Developer-Documentation.md) for more information.

+## First-Time Setup for Development
+
+### Prerequisites
+
+Before building WeKan from source, ensure you have:
+
+- **Git** - for cloning the repository
+- **Node.js 24.x** - WeKan requires Node.js 24.x
+- **Meteor** - the JavaScript framework WeKan is built with
+
+### Installing Node.js 24.x
+
+```bash
+# Using nvm (recommended)
+curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash
+source ~/.zshrc  # or ~/.bashrc
+nvm install 24
+nvm use 24
+```
+
+### Installing Meteor
+
+```bash
+curl https://install.meteor.com/ | sh
+```
+
+### Building WeKan
+
+The `rebuild-wekan.sh` script guides you through a three-stage process:
+
+1. **Install dependencies (Option 1)** - Downloads all required Meteor packages and npm modules
+2. **Build WeKan (Option 2)** - Compiles the application
+3. **Run WeKan (Option 3)** - Starts the development server at http://localhost:4000
+
+```bash
+# Clone your fork
+git clone git@github.com:YOUR_USERNAME/wekan.git
+cd wekan
+
+# Make the script executable
+chmod +x rebuild-wekan.sh
+
+# Step 1: Install dependencies
+./rebuild-wekan.sh
+# Press 1 and Enter
+
+# Step 2: Build WeKan (after dependencies complete)
+./rebuild-wekan.sh
+# Press 2 and Enter
+
+# Step 3: Run WeKan in development mode
+./rebuild-wekan.sh
+# Press 3 and Enter
+```
+ 
+
+### WSL Users
+
+WSL users can use Snap Candidate. See [install docs](https://wekan.fi/install/).
+
+The development server will start at http://localhost:4000. Any changes you make to the source code will automatically trigger a rebuild and refresh your browser.
+
 ## Screenshot

 [More screenshots at Features page](https://github.com/wekan/wekan/tree/main/docs/Features)
@@ -1,22 +1,34 @@
+## About Money: No bounty

-## Responsible Security Disclosure
+There is no bounty, like described at [CONTRIBUTING.md](CONTRIBUTING.md),
+because WeKan is NOT Big Tech. WeKan is FLOSS.

- To send email, use [ProtonMail](https://proton.me) email address or use PGP key [security-at-wekan.fi.asc](security-at-wekan.fi.asc)
- Send info about security issue ONLY to security@wekan.fi (that is Protomail email address). NOT TO ANYWHERE ELSE. NO CC, NO BCC.
- Wait for new WeKan release that fixes security issue
- If you approve, we thank you by adding you to Hall of Fame: https://wekan.fi/hall-of-fame/
+## Steps for Coordinated Vulnerability Disclosure

-## Bonus Points
+### 1. Security Researcher:

- If you include code for fixing security issue
+- **Report**: Click "New draft security advisory" at [WeKan Security Advisories](https://github.com/wekan/wekan/security/advisories).
+  More info at [GitHub Docs about reporting privately](https://docs.github.com/en/code-security/how-tos/report-and-fix-vulnerabilities/report-privately).
+- **Proof of Concept (PoC)**: If possible, include a fix or a reproduction script/code.
+- **If GitHub does not work**: Please send report to **security@wekan.fi**
+- **Optional Email Encryption**: An optional PGP key is available at [security-at-wekan.fi.asc](security-at-wekan.fi.asc).

-## Losing Points
+### 2. WeKan Security Team:

- If you ask about [bounty](CONTRIBUTING.md). There is no bounty. WeKan is NOT Big Tech. WeKan is FLOSS.
- If you forget to include vulnerability details.
- If you send info about security issue to somewhere else than security@wekan.fi
+- **Remediation**: Please wait for a new WeKan release that addresses the issue.
+  Fixes are announced at the top of the [ChangeLog](https://github.com/wekan/wekan/blob/main/CHANGELOG.md).
+- **Recognition**: We will acknowledge your contribution by adding you to our
+  [Hall of Fame](https://wekan.fi/hall-of-fame/).
+- **CVE Policy**: WeKan Security requests CVE at GitHub when releasing Security Advisory.

-## How should reports be formatted?
+### 3. Post-Release and Public Disclosure:
+
+- Publicity: If you publish blog posts, give talks, or write articles about the
+  reported vulnerabilities, please send the links to us. We will link them
+  to your entry in the [Hall of Fame](https://wekan.fi/hall-of-fame/) for additional context.
+- Advisories reported at GitHub are listed at [WeKan Security Advisories](https://github.com/wekan/wekan/security/advisories).
+
+## How Should Reports Be Formatted?

 ```
 Name: %name
@@ -38,31 +50,36 @@ added to the WeKan Hall of Fame https://wekan.fi/hall-of-fame/

 ## Which domains are in scope?

-No public domains, because all those are donated to Wekan Open Source project,
+No public domains, because all those are donated to WeKan Open Source project,
 and we don't have any permissions to do security scans on those donated servers.

-Please don't perform research that could impact other users. Secondly, please keep
-the reports short and succinct. If we fail to understand the logics of your bug, we will tell you.
+Please don't perform research that could impact other users. Second, please keep
+the reports short and succinct. If we fail to understand the logic of your bug, we will tell you.

-You can [Install Wekan](https://github.com/wekan/wekan/releases) to your own computer
+You can [Install WeKan](https://wekan.fi/install/) on your own computer
 and scan it's vulnerabilities there.

-## About Wekan versions
+## About WeKan Versions

-There are only 2 versions of Wekan: Standalone Wekan, and Sandstorm Wekan.
+There are 2 versions of WeKan: Standalone WeKan, and Sandstorm WeKan.

-### Standalone Wekan Security
+## Meteor Security

-Standalone Wekan includes all non-Sandstorm platforms. Some Standalone Wekan platforms
+https://guide.meteor.com/security
+
+### Standalone WeKan Security
+
+Standalone WeKan includes all non-Sandstorm platforms. Some Standalone WeKan platforms
 like Snap and Docker have their own specific sandboxing etc features.

-Standalone Wekan by default does not load any files from Internet, like fonts, CSS, etc.
-This also means all Standalone Wekan functionality works in offline local networks.
-WeKan is used at most countries of the world https://snapcraft.io/wekan
-and by by companies that have 30k users.
+Standalone WeKan by default does not load any files from Internet, like fonts, CSS, etc.
+This also means all Standalone WeKan functionality works in offline local networks.
+WeKan is used in most countries of the world https://snapcraft.io/wekan
+and by companies that have 30k users.

- Wekan private board attachments are not accessible without logging in.
- There is feature to set board public, so that board is visible without logging in in readonly mode, with realtime updates.
+- WeKan private board attachments are not accessible without logging in.
+- There is feature to set board public, so that board is visible without logging
+  in readonly mode, with realtime updates.
 - Admin Panel has feature to disable all public boards, so all boards are private.

 ## SSL/TLS
@@ -74,24 +91,25 @@ and by by companies that have 30k users.

 ## XSS

- Dompurify https://www.npmjs.com/package/dompurify
-  - WeKan uses dompurify npm package to filter for XSS at fields like cards, as you can see from
+- DOMPurify https://www.npmjs.com/package/dompurify
+  - WeKan uses DOMPurify npm package to filter for XSS at fields like cards, as you can see from
    [package.json](https://github.com/wekan/wekan/blob/main/package.json). Other used versions can be seen from
    [Meteor versions file](https://github.com/wekan/wekan/blob/main/.meteor/versions).
-  - Forms can include markdown links, html, image tags etc like you see at https://wekan.github.io .
+  - Forms can include markdown links, html, image tags etc like you see at https://wekan.fi .
  - It's possible to add attachments to cards, and markdown/html links to files.
-  - Dompurify cleans up viewed code, so Javascript in input fields does not execute
-    - https://wekan.github.io/hall-of-fame/fieldbleed/
+  - DOMPurify cleans up viewed code, so JavaScript in input fields does not execute
+    - https://wekan.fi/hall-of-fame/fieldbleed/
 - Reaction in comment is now checked, that it does not have extra added code
-  - https://wekan.github.io/hall-of-fame/reactionbleed/
+  - https://wekan.fi/hall-of-fame/reactionbleed/
 - https://github.com/wekan/wekan/blob/main/packages/markdown/src/template-integration.js#L76

-## QA about PubSub
+## QA About PubSub

 Q:

 Hello,
-I have just seen the Meteor DevTools Evolved extension and was wondering if anyone had asked themselves the question of security.
+I have just seen the Meteor DevTools Evolved extension and was wondering if anyone
+had asked themselves the question of security.
 Insofar as all data is shown in the minimongo tab in plain text.
 How can data be hidden from this extension?

@@ -99,32 +117,36 @@ A:

 ## PubSub

- It is not security issue to show some text or image, that user has permission to see. It is a security issue, if browserside is some text or image that user should not see.
- Meteor has browserside minimongo database, made with Javascript, updated with Publish/Subscribe, PubSub.
- Publish/Subscribe means, that realtime web framework reads database changes stream, and then immediately updates webpage,
-  like like dashboards, chat, kanban. That is the point in any realtime web framework in any programming language.
- Yes, you should check with Meteor DevTools Evolved Chromium/Firefox extension that at minimongo is only text that user has permission to see.
- Do checking as logged in user, and logged out user.
+- It is not a security issue to show text or images that the user has permission to see.
+  It is a security issue, if browserside is some text or image that user should not see.
+- Meteor has browserside minimongo database, made with JavaScript, updated with Publish/Subscribe, PubSub.
+- Publish/Subscribe means, that realtime web framework reads database changes stream,
+  and then immediately updates webpage, like dashboards, chat, kanban.
+  That is the point of any realtime web framework in any programming language.
+- Yes, you should check with Meteor DevTools Evolved Chromium/Firefox extension that
+  at minimongo is only text that user has permission to see.
+- Check as a logged-in user and as a logged-out user.
 - Check permissions and sanitize before allowing some change, because someone could modify content of input field,
  PubSub/websocket data (for example with Burp Suite Community Edition), etc.
- If you have REST API, also check that only those that have login token, and have permission, can view or edit text
+- If you have a REST API, also check that only those who have a login token and permission can view or edit text.
 - You should not include any data user is not allowed to see. Not to webpage text, not to websockets/PubSub, etc.
- Minimongo should not have password hashes PubSub https://wekan.github.io/hall-of-fame/userbleed/
- PubSub uses Websockets, so you need those to be enabled at webserver like Caddy/Nginx/Apache etc, examples of settings
+- Minimongo should not have password hashes PubSub https://wekan.fi/hall-of-fame/userbleed/
+- PubSub uses WebSockets, so you need those to be enabled on the webserver like Caddy/Nginx/Apache etc, examples of settings
  at right menu of https://github.com/wekan/wekan/wiki
- Clientside https://github.com/wekan/wekan/tree/main/client/components subscribes to 
-  PubSub https://github.com/wekan/wekan/tree/main/server/publications or calls meteor methods at https://github.com/wekan/wekan/tree/main/models
+- Clientside https://github.com/wekan/wekan/tree/main/client/components subscribes to
+  PubSub https://github.com/wekan/wekan/tree/main/server/publications or calls meteor methods
+  at https://github.com/wekan/wekan/tree/main/models
 - For Admin:
  - You can have input field for password https://github.com/wekan/wekan/blob/main/client/components/cards/attachments.js#L303-L312
  - You can save password to database https://github.com/wekan/wekan/blob/main/client/components/cards/attachments.js#L303-L312
  - Check that only current user or Admin can change password https://github.com/wekan/wekan/blob/main/client/components/cards/attachments.js#L303-L312
    - Note that currentUser uses code like Meteor.user() in .js file
-  - Do not have password hashes in PubSub https://github.com/wekan/wekan/blob/main/server/publications/users.js
+  - Do not include password hashes in PubSub https://github.com/wekan/wekan/blob/main/server/publications/users.js
  - Only show Admin Panel to Admin https://github.com/wekan/wekan/blob/main/client/components/settings/settingBody.jade#L3
- If there is a lot of data, use pagination https://github.com/wekan/wekan/blob/main/client/components/settings/peopleBody.js
- Only have limited amount of data published in PubSub. Limit in MongoDB query in publications how much is published. Too much could make browser too slow.
- Use Environment variables for any email etc passwords.
- But what if you would like to remove minimongo? And only use Meteor methods for saving? In that case, you don't have realtime updates,
+- If there is a large amount of data, use pagination https://github.com/wekan/wekan/blob/main/client/components/settings/peopleBody.js
+- Only publish a limited amount of data in PubSub. Limit in MongoDB query in publications how much is published. Too much could make browser too slow.
+- Environment variables for email and other passwords.
+- But what if you would like to remove Minimongo and only use Meteor methods for saving? In that case, you don't have realtime updates,
  and you need to write much more code to load and save data yourself, handle any multi user data saving conflicts yourself,
  and many Meteor Atmospherejs.com PubSub using packages would not work anymore https://github.com/wekan/we

@@ -132,14 +154,14 @@ A:

 - With PubSub, there is checking, that someone modifying Websockets content, like permission isAdmin, can not change to Admin.
 - https://github.com/wekan/wekan/commit/cbad4cf5943d47b916f64b4582f8ca76a9dfd743
- https://wekan.github.io/hall-of-fame/adminbleed/
+- https://wekan.fi/hall-of-fame/adminbleed/

 ## Permissions and Roles

- For any user permissions, it's best to use Meteor package package https://github.com/Meteor-Community-Packages/meteor-roles .
- Currently WeKan has custom hardcoded permissions, WeKan does not yet use that meteor-roles package.
+- For any user permissions, it's best to use Meteor package https://github.com/Meteor-Community-Packages/meteor-roles .
+- Currently, WeKan has custom hardcoded permissions and does not yet use the meteor-roles package.
  - Using permissions at WeKan sidebar https://github.com/wekan/wekan/blob/main/client/components/sidebar/sidebar.js#L1854-L1875
-  - List of roles https://github.com/wekan/wekan/wiki/REST-API-Role . Change at board or Admin Panel. Also Organizations/Teams.
+  - List of roles: https://github.com/wekan/wekan/wiki/REST-API-Role . Change at board or Admin Panel. Also Organizations/Teams.
  - Worker role: https://github.com/wekan/wekan/issues/2788
  - Not implemented yet: Granular Roles https://github.com/wekan/wekan/issues/3022
 - Check is user logged in, with `if (Meteor.user()) {`
@@ -148,8 +170,8 @@ A:

 ## Environment variables

- For any passwords, use environment variables, those are serverside
- Do not copy environment variable to public variable that is visible browserside https://github.com/wekan/wekan/blob/main/server/max-size.js
+- For any passwords, use environment variables; those are serverside
+- Do not copy environment variables to public variables that are visible on the browserside https://github.com/wekan/wekan/blob/main/server/max-size.js

 ```
 Meteor.startup(() => {
@@ -160,20 +182,20 @@ Meteor.startup(() => {
 ```

 - For serverside, you can set Meteor.settings.variablename, without text public
- For WeKan kanban, there is feature for setting board public, it can be viewed by anyone, there is realtime updates. But 
+- For WeKan kanban, there is a feature for setting a board to public; it can be viewed by anyone, with realtime updates. But
 - Some of those permissions are checked at users.js models at https://github.com/wekan/wekan/tree/main/models
 - Environment variables are used for email server passwords, etc, at all platforms https://github.com/wekan/wekan/commit/a781c0e7dcfdbe34c1483ee83cec12455b7026f7

 ## Escape HTML comment tags so that HTML comments are visible

- Someone reported, that it is problem that content of HTML comments in edit mode, are not visible at at view mode, so this makes HTML comments visible.
+- Someone reported that it was a problem that the content of HTML comments in edit mode was not visible in view mode, so this change makes HTML comments visible.
 - https://github.com/wekan/wekan/commit/167863d95711249e69bb3511175d73b34acbbdb3
- https://wekan.github.io/hall-of-fame/invisiblebleed/
+- https://wekan.fi/hall-of-fame/invisiblebleed/

 ## Attachments: XSS in filename is sanitized

 - https://github.com/wekan/wekan/blob/main/client/components/cards/attachments.js#L303-L312
- https://wekan.github.io/hall-of-fame/filebleed/
+- https://wekan.fi/hall-of-fame/filebleed/

 ### Attachments: Forced download to prevent stored XSS

@@ -231,22 +253,20 @@ Meteor.startup(() => {
 - https://github.com/wekan/wekan/commit/23e5e1e3bd081699ce39ce5887db7e612616014d
 - https://github.com/wekan/wekan/tree/main/packages/wekan-accounts-lockout

-### Sandstorm Wekan Security
+### Sandstorm WeKan Security

-On Sandstorm platform using environment variable Standalone Wekan features like Admin Panel etc are
-turned off, because Sandstorm platform provides SSO for all apps running on Sandstorm. 
+On the Sandstorm platform, Standalone WeKan features like the Admin Panel are turned off using environment variables, because Sandstorm platform provides SSO for all apps running on Sandstorm.

-[Sandstorm](https://sandstorm.io) is separate Open Source platform that has been
+[Sandstorm](https://sandstorm.io) is a separate Open Source platform that has been
 [security audited](https://sandstorm.io/news/2017-03-02-security-review) and found bugs fixed.
-Sandstorm also has passwordless login, LDAP, SAML, Google etc auth options already.
-At Sandstorm code is read-only and signed by app maintainers, only grain content can be modified.
-Wekan at Sandstorm runs in sandboxed grain, it does not have access elsewhere without user-visible
-PowerBox request or opening randomly-generated API key URL.
+Sandstorm also has passwordless login, LDAP, SAML, Google, and other auth options already.
+On Sandstorm, code is read-only and signed by app maintainers; only grain content can be modified.
+WeKan on Sandstorm runs in a sandboxed grain; it does not have access elsewhere without a user-visible PowerBox request or opening a randomly-generated API key URL.
 Also read [Sandstorm Security Practices](https://docs.sandstorm.io/en/latest/using/security-practices/) and
 [Sandstorm Security non-events](https://docs.sandstorm.io/en/latest/using/security-non-events/).
-For Sandstorm specific security issues you can contact [kentonv](https://github.com/kentonv) by email. 
+For Sandstorm specific security issues you can contact [kentonv](https://github.com/kentonv) by email.

-## What Wekan bugs are eligible?
+## What WeKan bugs are eligible?

 Any typical web security bugs. If any of the previously mentioned is somehow problematic and
 a security issue, we'd like to know about it, and also how to fix it:
@@ -258,18 +278,12 @@ a security issue, we'd like to know about it, and also how to fix it:
 - Authentication bypass
 - Server-side code execution

-## What Wekan bugs are NOT eligible?
+## What WeKan bugs are NOT eligible?

-Typical already known or "no impact" bugs such as:
+Typical already-known or 'no impact' bugs such as:

- [Wekan API old tokens not replaced correctly](https://github.com/wekan/wekan/issues/1437)
- Missing Cookie flags on non-session cookies or 3rd party cookies
- Logout CSRF
 - Social engineering
 - Denial of service
- SSL BEAST/CRIME/etc. Wekan does not have SSL built-in, it uses Caddy/Nginx/Apache etc at front.
-  Integrated Caddy support is updated often.
- Email spoofing, SPF, DMARC & DKIM. Wekan does not include email server.
+- SSL BEAST/CRIME/etc. WeKan does not have SSL built-in; it uses Caddy/Nginx/Apache on the front end.

-Wekan is Open Source with MIT license, and free to use also for commercial use.
-We welcome all fixes to improve security by email to security@wekan.fi
+WeKan is Open Source with MIT license, and free to use also for commercial use.
@@ -1,5 +1,5 @@
 appId: wekan-public/apps/77b94f60-dec9-0136-304e-16ff53095928
-appVersion: "v8.26.0"
+appVersion: "v9.63.0"
 files:
  userUploads:
    - README.md
@@ -1,26 +1,92 @@
-// PWA
+// Fix dynamic-import chunk loading when Wekan runs under a sub-path (ROOT_URL includes a pathname,
+// e.g. https://example.com/wekan). Rspack uses __webpack_public_path__ to prefix chunk URLs; by
+// default it is set to /build-chunks/ (no context path). We update it here, at module evaluation
+// time, before any import() expression runs (those are deferred to Meteor.startup callbacks).
+/* global __webpack_public_path__:writable */
+try {
+  const _cfg = typeof window !== 'undefined' && window.__meteor_runtime_config__;
+  const _rootUrl = _cfg && _cfg.ROOT_URL;
+  if (_rootUrl) {
+    const _rootPath = new URL(_rootUrl).pathname.replace(/\/+$/, '');
+    if (_rootPath && _rootPath !== '/') {
+      __webpack_public_path__ = _rootPath + '/build-chunks/';
+    }
+  }
+} catch (_) {}
+
+// Expose Meteor on window. Under the Meteor 3.5 + rspack build, bare `Meteor`
+// references in app code are rewritten by rspack's ProvidePlugin into per-module
+// imports, so `Meteor` is NOT placed on the browser `window` the way the classic
+// Meteor linker did. Re-expose it so the browser console and the Playwright e2e
+// tests (which call Meteor.loginWithToken / Meteor.userId / Meteor.subscribe etc.
+// via page.evaluate in window scope) can reach it. This matches the long-standing
+// classic-Meteor behaviour where `Meteor` is a global.
+if (typeof window !== 'undefined') {
+  window.Meteor = Meteor;
+}
+
+// Fix bug in jam:offline 0.4.1: s?.message.includes() crashes when s.message is
+// undefined (e.g. during WebSocket reconnect errors that don't carry a .message).
+// Wrap _debug so the optional chain is complete: s?.message?.includes().
+(function patchJamOfflineDebug() {
+  const patched = Meteor._debug;
+  Meteor._debug = function (m, s) {
+    try {
+      return patched.call(this, m, s);
+    } catch (e) {
+      // jam:offline's override threw — fall back to the bare console log.
+      if (typeof console !== 'undefined') {
+        console.log(m, s);
+      }
+    }
+  };
+})();
+
+// PWA — use Meteor.absoluteUrl so the path is correct under sub-URL deployments
 if ('serviceWorker' in navigator) {
  window.addEventListener('load', function() {
-    navigator.serviceWorker.register('/pwa-service-worker.js');
+    const swPath = new URL('pwa-service-worker.js', Meteor.absoluteUrl()).pathname;
+    navigator.serviceWorker.register(swPath);
  });
 }

+// Import Blaze helpers (replaces removed raix:handlebar-helpers package)
+import '/client/config/blazeHelpers';
+
 // Import board converter for on-demand conversion
 import '/client/lib/boardConverter';
-import '/client/components/boardConversionProgress';
+import '/client/features/boardConversion';
+import { Utils } from '/client/lib/utils';

-// Import migration manager and progress UI
-import '/client/lib/attachmentMigrationManager';
-import '/client/components/settings/migrationProgress';
+// Import migration manager and progress UI - COMMENTED OUT
+// import '/client/lib/attachmentMigrationManager';
+// import '/client/components/settings/migrationProgress';

-// Import cron settings
-import '/client/components/settings/cronSettings';
+// Import cron settings - COMMENTED OUT
+// import '/client/components/settings/cronSettings';
+// Custom head tags

 // Mirror Meteor login token into a cookie for server-side file route auth
 // This enables cookie-based auth for /cdn/storage/* without leaking ROOT_URL
 // Token already lives in localStorage; cookie adds same-origin send-on-request semantics
 Meteor.startup(() => {
  const COOKIE_NAME = 'meteor_login_token';
+  const USER_ID_COOKIE = 'meteor_user_id';
+  const TOKEN_EXPIRES_COOKIE = 'meteor_login_token_expires';
+
+  const getCookie = (name) => {
+    try {
+      const parts = document.cookie ? document.cookie.split(';') : [];
+      for (const part of parts) {
+        const [k, ...rest] = part.trim().split('=');
+        if (decodeURIComponent(k) === name) {
+          return decodeURIComponent(rest.join('='));
+        }
+      }
+    } catch (_) {}
+    return '';
+  };
+
  const cookieAttrs = () => {
    const attrs = ['Path=/', 'SameSite=Lax'];
    try {
@@ -48,6 +114,37 @@ Meteor.startup(() => {
    }
  };

+  const bootstrapTokenFromCookie = () => {
+    try {
+      const currentToken = Accounts && typeof Accounts._storedLoginToken === 'function'
+        ? Accounts._storedLoginToken()
+        : null;
+      if (currentToken) {
+        return;
+      }
+
+      const token = getCookie(COOKIE_NAME);
+      const userId = getCookie(USER_ID_COOKIE);
+      const tokenExpiresRaw = getCookie(TOKEN_EXPIRES_COOKIE);
+      const tokenExpires = tokenExpiresRaw ? new Date(tokenExpiresRaw) : null;
+
+      if (!token || !userId || !tokenExpires || Number.isNaN(tokenExpires.getTime())) {
+        return;
+      }
+
+      if (Accounts && typeof Accounts._storeLoginToken === 'function') {
+        Accounts._storeLoginToken(userId, token, tokenExpires);
+        if (Meteor.status && !Meteor.status().connected && typeof Meteor.reconnect === 'function') {
+          Meteor.reconnect();
+        }
+      }
+    } catch (_) {
+      // ignore
+    }
+  };
+
+  bootstrapTokenFromCookie();
+
  // Initial sync on startup
  syncCookie();

@@ -61,6 +158,7 @@ Meteor.startup(() => {
      syncCookie();
    }
  });
+
 });

 // Subscribe to per-user small publications
@@ -71,7 +169,7 @@ Meteor.startup(() => {
      Meteor.subscribe('userDesktopDragHandles');
    }
  });
-  
+
  // Initialize mobile mode on startup for iOS devices
  // This ensures mobile mode is applied correctly on page load
  Tracker.afterFlush(() => {
@@ -36,7 +36,7 @@
  flex: 1;
  align-self: center;
  margin: 0;
-  margin-left: 0.4vw;
+  margin-inline-start: 0.4vw;
  overflow: hidden;
  word-break: break-word;
 }
@@ -9,11 +9,11 @@ template(name="activities")
        +cardActivities

 template(name="boardActivities")
-  each activityData in currentBoard.activities
+  each activityData in boardActivitiesList
    +activity(activity=activityData card=card mode=mode)

 template(name="cardActivities")
-  each activityData in activities
+  each activityData in cardActivitiesList
    +activity(activity=activityData card=card mode=mode)

 template(name="activity")
@@ -189,15 +189,15 @@ template(name="activity")
      if(currentData.timeKey)
        | {{_ activity.activityType }}
        = ' '
-        i(title=currentData.timeValue).activity-meta {{ moment currentData.timeValue 'LLL' }}
+        i(title=currentData.timeValue).activity-meta {{ displayDate currentData.timeValue 'LLL' }}
        if (currentData.timeOldValue)
          = ' '
            | {{{_ "previous_as" }}}
            = ' '
-            i(title=currentData.timeOldValue).activity-meta {{ moment currentData.timeOldValue 'LLL' }}
+            i(title=currentData.timeOldValue).activity-meta {{ displayDate currentData.timeOldValue 'LLL' }}
        = ' @'
      else if(currentData.timeValue)
        | {{_ activity.activityType currentData.timeValue}}

      if($neq mode 'none')
-        div(title=activity.createdAt).activity-meta {{ moment activity.createdAt }}
+        div(title=activity.createdAt).activity-meta {{ displayDate activity.createdAt }}
@@ -1,168 +1,192 @@
 import { ReactiveCache } from '/imports/reactiveCache';
+import { ReactiveVar } from 'meteor/reactive-var';
+import { Template } from 'meteor/templating';
 import DOMPurify from 'dompurify';
 import { sanitizeHTML, sanitizeText } from '/imports/lib/secureDOMPurify';
 import { TAPi18n } from '/imports/i18n';
+import { Utils } from '/client/lib/utils';
+import { getSidebarInstance } from '/client/features/sidebar/service';

 const activitiesPerPage = 500;

-BlazeComponent.extendComponent({
-  onCreated() {
-    // XXX Should we use ReactiveNumber?
-    this.page = new ReactiveVar(1);
-    this.loadNextPageLocked = false;
-    // TODO is sidebar always available? E.g. on small screens/mobile devices
-    const sidebar = Sidebar;
-    sidebar && sidebar.callFirstWith(null, 'resetNextPeak');
-    this.autorun(() => {
-      let mode = this.data()?.mode;
-      if (mode) {
-        const capitalizedMode = Utils.capitalize(mode);
-        let searchId;
-        const showActivities = this.showActivities();
-        if (mode === 'linkedcard' || mode === 'linkedboard') {
-          const currentCard = Utils.getCurrentCard();
-          searchId = currentCard.linkedId;
-          mode = mode.replace('linked', '');
-        } else if (mode === 'card') {
-          searchId = Utils.getCurrentCardId();
-        } else {
-          searchId = Session.get(`current${capitalizedMode}`);
-        }
-        const limit = this.page.get() * activitiesPerPage;
-        if (searchId === null) return;
+Template.activities.onCreated(function () {
+  // Register with sidebar so it can call loadNextPage on us
+  const Sidebar = getSidebarInstance();
+  if (Sidebar) {
+    Sidebar.activitiesInstance = this;
+  }

-        this.subscribe('activities', mode, searchId, limit, showActivities, () => {
-          this.loadNextPageLocked = false;
-
-          // TODO the guard can be removed as soon as the TODO above is resolved
-          if (!sidebar) return;
-          // If the sibear peak hasn't increased, that mean that there are no more
-          // activities, and we can stop calling new subscriptions.
-          // XXX This is hacky! We need to know excatly and reactively how many
-          // activities there are, we probably want to denormalize this number
-          // dirrectly into card and board documents.
-          const nextPeakBefore = sidebar.callFirstWith(null, 'getNextPeak');
-          sidebar.calculateNextPeak();
-          const nextPeakAfter = sidebar.callFirstWith(null, 'getNextPeak');
-          if (nextPeakBefore === nextPeakAfter) {
-            sidebar.callFirstWith(null, 'resetNextPeak');
-          }
-        });
-      }
-    });
-  },
-  loadNextPage() {
+  // XXX Should we use ReactiveNumber?
+  this.page = new ReactiveVar(1);
+  this.loadNextPageLocked = false;
+  this.loadNextPage = () => {
    if (this.loadNextPageLocked === false) {
      this.page.set(this.page.get() + 1);
      this.loadNextPageLocked = true;
    }
-  },
-  showActivities() {
-    let ret = false;
-    let mode = this.data()?.mode;
+  };
+
+  // TODO is sidebar always available? E.g. on small screens/mobile devices
+  const sidebar = getSidebarInstance();
+  if (sidebar && sidebar.infiniteScrolling) {
+    sidebar.infiniteScrolling.resetNextPeak();
+  }
+  this.autorun(() => {
+    const data = Template.currentData();
+    let mode = data?.mode;
    if (mode) {
+      const capitalizedMode = Utils.capitalize(mode);
+      let searchId;
+      const showActivities = _showActivities(data);
      if (mode === 'linkedcard' || mode === 'linkedboard') {
        const currentCard = Utils.getCurrentCard();
-        ret = currentCard.showActivities ?? false;
+        searchId = currentCard.linkedId;
+        mode = mode.replace('linked', '');
      } else if (mode === 'card') {
-        ret = this.data()?.card?.showActivities ?? false;
+        searchId = Utils.getCurrentCardId();
      } else {
-        ret = Utils.getCurrentBoard().showActivities ?? false;
+        searchId = Session.get(`current${capitalizedMode}`);
      }
-    }
-    return ret;
-  },
-  activities() {
-    const ret = this.data().card.activities();
-    return ret;
-  },
-}).register('activities');
+      const limit = this.page.get() * activitiesPerPage;
+      if (searchId === null) return;

-BlazeComponent.extendComponent({
+      this.subscribe('activities', mode, searchId, limit, showActivities, () => {
+        this.loadNextPageLocked = false;
+
+        // TODO the guard can be removed as soon as the TODO above is resolved
+        if (!sidebar || !sidebar.infiniteScrolling) return;
+        // If the sidebar peak hasn't increased, that means that there are no more
+        // activities, and we can stop calling new subscriptions.
+        const nextPeakBefore = sidebar.infiniteScrolling.getNextPeak();
+        sidebar.calculateNextPeak();
+        const nextPeakAfter = sidebar.infiniteScrolling.getNextPeak();
+        if (nextPeakBefore === nextPeakAfter) {
+          sidebar.infiniteScrolling.resetNextPeak();
+        }
+      });
+    }
+  });
+});
+
+function _showActivities(data) {
+  let ret = false;
+  let mode = data?.mode;
+  if (mode) {
+    if (mode === 'linkedcard' || mode === 'linkedboard') {
+      const currentCard = Utils.getCurrentCard();
+      ret = currentCard.showActivities ?? false;
+    } else if (mode === 'card') {
+      // For card mode, get showActivities from data context or fallback to current card
+      const card = data?.card || Utils.getCurrentCard();
+      ret = card?.showActivities ?? false;
+    } else {
+      ret = Utils.getCurrentBoard().showActivities ?? false;
+    }
+  }
+  return ret;
+}
+
+Template.activities.helpers({
+  showActivities() {
+    const data = Template.currentData();
+    return _showActivities(data);
+  },
+
+  activities() {
+    const activities = this.card?.activities?.();
+    return activities || [];
+  },
+});
+
+Template.boardActivities.helpers({
+  boardActivitiesList() {
+    const board = Utils.getCurrentBoard();
+    const activities = board?.activities?.();
+    return activities || [];
+  },
+});
+
+Template.cardActivities.helpers({
+  cardActivitiesList() {
+    const data = Template.currentData();
+    const card = data?.card;
+    const activities = card?.activities?.();
+    return activities || [];
+  },
+});
+
+Template.activity.helpers({
  checkItem() {
-    const checkItemId = this.currentData().activity.checklistItemId;
+    const checkItemId = this.activity.checklistItemId;
    const checkItem = ReactiveCache.getChecklistItem(checkItemId);
    return checkItem && checkItem.title;
  },

  boardLabelLink() {
-    const data = this.currentData();
    const currentBoardId = Session.get('currentBoard');
-    if (data.mode !== 'board') {
-      // data.mode: card, linkedcard, linkedboard
-      return createBoardLink(data.activity.board(), data.activity.listName ? data.activity.listName : null);
+    if (this.mode !== 'board') {
+      return createBoardLink(this.activity.board(), this.activity.listName ? this.activity.listName : null);
    }
-    else if (currentBoardId != data.activity.boardId) {
-      // data.mode: board
-      // current activitie is linked
-      return createBoardLink(data.activity.board(), data.activity.listName ? data.activity.listName : null);
+    else if (currentBoardId != this.activity.boardId) {
+      return createBoardLink(this.activity.board(), this.activity.listName ? this.activity.listName : null);
    }
    return TAPi18n.__('this-board');
  },

  cardLabelLink() {
-    const data = this.currentData();
    const currentBoardId = Session.get('currentBoard');
-    if (data.mode == 'card') {
-      // data.mode: card
+    if (this.mode == 'card') {
      return TAPi18n.__('this-card');
    }
-    else if (data.mode !== 'board') {
-      // data.mode: linkedcard, linkedboard
-      return createCardLink(data.activity.card(), null);
+    else if (this.mode !== 'board') {
+      return createCardLink(this.activity.card(), null);
    }
-    else if (currentBoardId != data.activity.boardId) {
-      // data.mode: board
-      // current activitie is linked
-      return createCardLink(data.activity.card(), data.activity.board().title);
+    else if (currentBoardId != this.activity.boardId) {
+      return createCardLink(this.activity.card(), this.activity.board().title);
    }
-    return createCardLink(this.currentData().activity.card(), null);
+    return createCardLink(this.activity.card(), null);
  },

  cardLink() {
-    const data = this.currentData();
    const currentBoardId = Session.get('currentBoard');
-    if (data.mode !== 'board') {
-      // data.mode: card, linkedcard, linkedboard
-      return createCardLink(data.activity.card(), null);
+    if (this.mode !== 'board') {
+      return createCardLink(this.activity.card(), null);
    }
-    else if (currentBoardId != data.activity.boardId) {
-      // data.mode: board
-      // current activitie is linked
-      return createCardLink(data.activity.card(), data.activity.board().title);
+    else if (currentBoardId != this.activity.boardId) {
+      return createCardLink(this.activity.card(), this.activity.board().title);
    }
-    return createCardLink(this.currentData().activity.card(), null);
+    return createCardLink(this.activity.card(), null);
  },

  receivedDate() {
-    const receivedDate = this.currentData().activity.card();
-    if (!receivedDate) return null;
-    return receivedDate.receivedAt;
+    const card = this.activity.card();
+    if (!card) return null;
+    return card.receivedAt;
  },

  startDate() {
-    const startDate = this.currentData().activity.card();
-    if (!startDate) return null;
-    return startDate.startAt;
+    const card = this.activity.card();
+    if (!card) return null;
+    return card.startAt;
  },

  dueDate() {
-    const dueDate = this.currentData().activity.card();
-    if (!dueDate) return null;
-    return dueDate.dueAt;
+    const card = this.activity.card();
+    if (!card) return null;
+    return card.dueAt;
  },

  endDate() {
-    const endDate = this.currentData().activity.card();
-    if (!endDate) return null;
-    return endDate.endAt;
+    const card = this.activity.card();
+    if (!card) return null;
+    return card.endAt;
  },

  lastLabel() {
-    const lastLabelId = this.currentData().activity.labelId;
+    const lastLabelId = this.activity.labelId;
    if (!lastLabelId) return null;
    const lastLabel = ReactiveCache.getBoard(
-      this.currentData().activity.boardId,
+      this.activity.boardId,
    ).getLabelById(lastLabelId);
    if (lastLabel && (lastLabel.name === undefined || lastLabel.name === '')) {
      return lastLabel.color;
@@ -175,7 +199,7 @@ BlazeComponent.extendComponent({

  lastCustomField() {
    const lastCustomField = ReactiveCache.getCustomField(
-      this.currentData().activity.customFieldId,
+      this.activity.customFieldId,
    );
    if (!lastCustomField) return null;
    return lastCustomField.name;
@@ -183,16 +207,15 @@ BlazeComponent.extendComponent({

  lastCustomFieldValue() {
    const lastCustomField = ReactiveCache.getCustomField(
-      this.currentData().activity.customFieldId,
+      this.activity.customFieldId,
    );
    if (!lastCustomField) return null;
-    const value = this.currentData().activity.value;
+    const value = this.activity.value;
    if (
      lastCustomField.settings.dropdownItems &&
      lastCustomField.settings.dropdownItems.length > 0
    ) {
-      const dropDownValue = _.find(
-        lastCustomField.settings.dropdownItems,
+      const dropDownValue = lastCustomField.settings.dropdownItems.find(
        item => {
          return item._id === value;
        },
@@ -203,13 +226,13 @@ BlazeComponent.extendComponent({
  },

  listLabel() {
-    const activity = this.currentData().activity;
+    const activity = this.activity;
    const list = activity.list();
    return (list && list.title) || activity.title;
  },

  sourceLink() {
-    const source = this.currentData().activity.source;
+    const source = this.activity.source;
    if (source) {
      if (source.url) {
        return Blaze.toHTML(
@@ -229,36 +252,39 @@ BlazeComponent.extendComponent({

  memberLink() {
    return Blaze.toHTMLWithData(Template.memberName, {
-      user: this.currentData().activity.member(),
+      user: this.activity.member(),
    });
  },

  attachmentLink() {
-    const attachment = this.currentData().activity.attachment();
+    const attachment = this.activity.attachment();
+    const attachmentUrl = attachment && typeof attachment.link === 'function'
+      ? attachment.link()
+      : '';
    // trying to display url before file is stored generates js errors
    return (
      (attachment &&
        attachment.path &&
+        attachmentUrl &&
        Blaze.toHTML(
          HTML.A(
            {
-              href: `${attachment.link()}?download=true`,
+              href: `${attachmentUrl}?download=true`,
              target: '_blank',
            },
            sanitizeText(attachment.name),
          ),
        )) ||
-      sanitizeText(this.currentData().activity.attachmentName)
+      sanitizeText(this.activity.attachmentName)
    );
  },

  customField() {
-    const customField = this.currentData().activity.customField();
+    const customField = this.activity.customField();
    if (!customField) return null;
    return customField.name;
  },
-
-}).register('activity');
+});

 Template.activity.helpers({
  sanitize(value) {
@@ -268,7 +294,8 @@ Template.activity.helpers({

 Template.commentReactions.events({
  'click .reaction'(event) {
-    if (ReactiveCache.getCurrentUser().isBoardMember()) {
+    const user = ReactiveCache.getCurrentUser();
+    if (user && user.isBoardMember()) {
      const codepoint = event.currentTarget.dataset['codepoint'];
      const commentId = Template.instance().data.commentId;
      const cardComment = ReactiveCache.getCardComment(commentId);
@@ -280,7 +307,8 @@ Template.commentReactions.events({

 Template.addReactionPopup.events({
  'click .add-comment-reaction'(event) {
-    if (ReactiveCache.getCurrentUser().isBoardMember()) {
+    const user = ReactiveCache.getCurrentUser();
+    if (user && user.isBoardMember()) {
      const codepoint = event.currentTarget.dataset['codepoint'];
      const commentId = Template.instance().data.commentId;
      const cardComment = ReactiveCache.getCardComment(commentId);
@@ -6,7 +6,7 @@
  opacity: 0.7;
  position: absolute;
  top: 1px;
-  left: -38px;
+  inset-inline-start: -38px;
 }
 .new-comment.is-open .member {
  opacity: 1;
@@ -84,7 +84,7 @@
  flex: 1;
  align-self: center;
  margin: 0;
-  margin-left: 3px;
+  margin-inline-start: 3px;
  overflow: hidden;
  word-break: break-word;
 }
@@ -113,7 +113,7 @@
  font-size: clamp(14px, 2vw, 18px);
  font-weight: 500;
  line-height: 1;
-  margin-left: 4px;
+  margin-inline-start: 4px;
 }
 .comments .comment .comment-desc .reactions .reaction {
  cursor: pointer;
@@ -32,7 +32,7 @@ template(name="comment")
          +viewer
            = text
        +commentReactions(reactions=reactions commentId=_id)
-        span(title=createdAt).comment-meta {{ moment createdAt }}
+        span(title=createdAt).comment-meta {{ displayDate createdAt }}
          if($eq currentUser._id userId)
            +editOrDeleteComment
          else if currentUser.isBoardAdmin
@@ -1,95 +1,85 @@
 import { ReactiveCache } from '/imports/reactiveCache';
+import CardComments from '/models/cardComments';
+import { UnsavedEdits } from '/client/lib/unsavedEdits';
+import { EscapeActions } from '/client/lib/escapeActions';
+import { Utils } from '/client/lib/utils';
+import autosize from 'autosize';

 const commentFormIsOpen = new ReactiveVar(false);

-BlazeComponent.extendComponent({
-  onDestroyed() {
-    commentFormIsOpen.set(false);
-    $('.note-popover').hide();
-  },
+Template.commentForm.onDestroyed(function () {
+  commentFormIsOpen.set(false);
+  $('.note-popover').hide();
+});

+Template.commentForm.helpers({
  commentFormIsOpen() {
    return commentFormIsOpen.get();
  },
+});

-  getInput() {
-    return this.$('.js-new-comment-input');
+Template.commentForm.events({
+  'submit .js-new-comment-form'(evt, tpl) {
+    const input = tpl.$('.js-new-comment-input');
+    const text = input.val().trim();
+    const card = Template.currentData();
+    let boardId = card.boardId;
+    let cardId = card._id;
+    if (card.isLinkedCard()) {
+      boardId = ReactiveCache.getCard(card.linkedId).boardId;
+      cardId = card.linkedId;
+    } else if (card.isLinkedBoard()) {
+      boardId = card.linkedId;
+    }
+    if (text) {
+      CardComments.insert({
+        text,
+        boardId,
+        cardId,
+      });
+      resetCommentInput(input);
+      Tracker.flush();
+      autosize.update(input);
+      input.trigger('submitted');
+    }
+    evt.preventDefault();
  },
-
-  events() {
-    return [
-      {
-        'submit .js-new-comment-form'(evt) {
-          const input = this.getInput();
-          const text = input.val().trim();
-          const card = this.currentData();
-          let boardId = card.boardId;
-          let cardId = card._id;
-          if (card.isLinkedCard()) {
-            boardId = ReactiveCache.getCard(card.linkedId).boardId;
-            cardId = card.linkedId;
-          } else if (card.isLinkedBoard()) {
-            boardId = card.linkedId;
-          }
-          if (text) {
-            CardComments.insert({
-              text,
-              boardId,
-              cardId,
-            });
-            resetCommentInput(input);
-            Tracker.flush();
-            autosize.update(input);
-            input.trigger('submitted');
-          }
-          evt.preventDefault();
-        },
-        // Pressing Ctrl+Enter should submit the form
-        'keydown form textarea'(evt) {
-          if (evt.keyCode === 13 && (evt.metaKey || evt.ctrlKey)) {
-            this.find('button[type=submit]').click();
-          }
-        },
-      },
-    ];
+  // Pressing Ctrl+Enter should submit the form
+  'keydown form textarea'(evt, tpl) {
+    if (evt.keyCode === 13 && (evt.metaKey || evt.ctrlKey)) {
+      tpl.find('button[type=submit]').click();
+    }
  },
-}).register('commentForm');
+});

-BlazeComponent.extendComponent({
+Template.comments.helpers({
  getComments() {
-    const data = this.data();
+    const data = Template.currentData();
    if (!data || typeof data.comments !== 'function') return [];
    return data.comments();
  },
-}).register("comments");
+});

-BlazeComponent.extendComponent({
-  events() {
-    return [
-      {
-        'click .js-delete-comment': Popup.afterConfirm('deleteComment', () => {
-          const commentId = this.data()._id;
-          CardComments.remove(commentId);
-          Popup.back();
-        }),
-        'submit .js-edit-comment'(evt) {
-          evt.preventDefault();
-          const commentText = this.currentComponent()
-            .getValue()
-            .trim();
-          const commentId = this.data()._id;
-          if (commentText) {
-            CardComments.update(commentId, {
-              $set: {
-                text: commentText,
-              },
-            });
-          }
+Template.comment.events({
+  'click .js-delete-comment': Popup.afterConfirm('deleteComment', function () {
+    const commentId = this._id;
+    CardComments.remove(commentId);
+    Popup.back();
+  }),
+  'submit .js-edit-comment'(evt, tpl) {
+    evt.preventDefault();
+    const textarea = tpl.find('.js-edit-comment textarea,input[type=text]');
+    const commentText = textarea && textarea.value ? textarea.value.trim() : '';
+    const commentId = tpl.data._id;
+    if (commentText) {
+      CardComments.update(commentId, {
+        $set: {
+          text: commentText,
        },
-      },
-    ];
+      });
+    }
  },
-}).register("comment");
+});

 // XXX This should be a static method of the `commentForm` component
 function resetCommentInput(input) {
@@ -2,7 +2,7 @@
 .board-conversion-overlay {
  position: fixed;
  top: 0;
-  left: 0;
+  inset-inline-start: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
@@ -52,7 +52,7 @@
 }

 .board-conversion-header h3 i {
-  margin-right: 8px;
+  margin-inline-end: 8px;
  color: #2196F3;
 }

@@ -91,8 +91,8 @@
  content: '';
  position: absolute;
  top: 0;
-  left: 0;
-  right: 0;
+  inset-inline-start: 0;
+  inset-inline-end: 0;
  bottom: 0;
  background: linear-gradient(
    90deg,
@@ -127,7 +127,7 @@
 }

 .conversion-status i {
-  margin-right: 8px;
+  margin-inline-end: 8px;
  color: #2196F3;
 }

@@ -142,7 +142,7 @@
 }

 .conversion-time i {
-  margin-right: 6px;
+  margin-inline-end: 6px;
  color: #FF9800;
 }

@@ -160,7 +160,7 @@
 }

 .conversion-info i {
-  margin-right: 6px;
+  margin-inline-end: 6px;
  color: #2196F3;
 }

@@ -170,14 +170,14 @@
    width: 95%;
    margin: 20px;
  }
-  
+
  .board-conversion-header,
  .board-conversion-content,
  .board-conversion-footer {
-    padding-left: 16px;
-    padding-right: 16px;
+    padding-inline-start: 16px;
+    padding-inline-end: 16px;
  }
-  
+
  .board-conversion-header h3 {
    font-size: 18px;
  }
@@ -6,21 +6,21 @@ template(name="boardConversionProgress")
          i.fa.fa-cog
          | {{_ 'converting-board'}}
        p {{_ 'converting-board-description'}}
-      
+
      .board-conversion-content
        .conversion-progress
          .progress-bar
            .progress-fill(style="width: {{conversionProgress}}%")
          .progress-text {{conversionProgress}}%
-        
+
        .conversion-status
          i.fa.fa-cog
          | {{conversionStatus}}
-        
+
        .conversion-time(style="{{#unless conversionEstimatedTime}}display: none;{{/unless}}")
          i.fa.fa-clock-o
          | {{_ 'estimated-time-remaining'}}: {{conversionEstimatedTime}}
-      
+
      .board-conversion-footer
        .conversion-info
          i.fa.fa-info-circle
@@ -1,6 +1,6 @@
 import { Template } from 'meteor/templating';
 import { ReactiveVar } from 'meteor/reactive-var';
-import { 
+import {
  boardConverter,
  isConverting,
  conversionProgress,
@@ -12,15 +12,15 @@ Template.boardConversionProgress.helpers({
  isConverting() {
    return isConverting.get();
  },
-  
+
  conversionProgress() {
    return conversionProgress.get();
  },
-  
+
  conversionStatus() {
    return conversionStatus.get();
  },
-  
+
  conversionEstimatedTime() {
    return conversionEstimatedTime.get();
  }
@@ -8,14 +8,14 @@ template(name="archivedBoards")
    each archivedBoards
      li.archived-lists-item
        div.board-header-btns
-          button.board-header-btn.js-delete-board
+          button.primary.board-header-btn.js-delete-board
            i.fa.fa-trash
            | {{_ 'delete-board'}}
-          button.board-header-btn.js-restore-board
+          button.primary.board-header-btn.js-restore-board
            i.fa.fa-undo
            | {{_ 'restore-board'}}
          = title
-        span {{ moment archivedAt 'LLL' }}
+        span {{ displayDate archivedAt 'LLL' }}
    else
      li.no-items-message {{_ 'no-archived-boards'}}

@@ -1,11 +1,13 @@
 import { ReactiveCache } from '/imports/reactiveCache';
 import { FlowRouter } from 'meteor/ostrio:flow-router-extra';
+import Boards from '/models/boards';
+import { Utils } from '/client/lib/utils';

-BlazeComponent.extendComponent({
-  onCreated() {
-    this.subscribe('archivedBoards');
-  },
+Template.archivedBoards.onCreated(function () {
+  this.subscribe('archivedBoards');
+});

+Template.archivedBoards.helpers({
  isBoardAdmin() {
    return ReactiveCache.getCurrentUser().isBoardAdmin();
  },
@@ -19,38 +21,34 @@ BlazeComponent.extendComponent({
    );
    return ret;
  },
+});

-  events() {
-    return [
-      {
-        async 'click .js-restore-board'() {
-          // TODO : Make isSandstorm variable global
-          const isSandstorm =
-            Meteor.settings &&
-            Meteor.settings.public &&
-            Meteor.settings.public.sandstorm;
-          if (isSandstorm && Utils.getCurrentBoardId()) {
-            const currentBoard = Utils.getCurrentBoard();
-            await currentBoard.archive();
-          }
-          const board = this.currentData();
-          await board.restore();
-          Utils.goBoardId(board._id);
-        },
-        'click .js-delete-board': Popup.afterConfirm('boardDelete', async function() {
-          Popup.back();
-          const isSandstorm =
-            Meteor.settings &&
-            Meteor.settings.public &&
-            Meteor.settings.public.sandstorm;
-          if (isSandstorm && Utils.getCurrentBoardId()) {
-            const currentBoard = Utils.getCurrentBoard();
-            await Boards.removeAsync(currentBoard._id);
-          }
-          await Boards.removeAsync(this._id);
-          FlowRouter.go('home');
-        }),
-      },
-    ];
+Template.archivedBoards.events({
+  async 'click .js-restore-board'() {
+    // TODO : Make isSandstorm variable global
+    const isSandstorm =
+      Meteor.settings &&
+      Meteor.settings.public &&
+      Meteor.settings.public.sandstorm;
+    if (isSandstorm && Utils.getCurrentBoardId()) {
+      const currentBoard = Utils.getCurrentBoard();
+      await currentBoard.archive();
+    }
+    const board = this;
+    await board.restore();
+    Utils.goBoardId(board._id);
  },
-}).register('archivedBoards');
+  'click .js-delete-board': Popup.afterConfirm('boardDelete', async function() {
+    Popup.back();
+    const isSandstorm =
+      Meteor.settings &&
+      Meteor.settings.public &&
+      Meteor.settings.public.sandstorm;
+    if (isSandstorm && Utils.getCurrentBoardId()) {
+      const currentBoard = Utils.getCurrentBoard();
+      await Boards.removeAsync(currentBoard._id);
+    }
+    await Boards.removeAsync(this._id);
+    FlowRouter.go('home');
+  }),
+});
@@ -1,7 +1,7 @@
 .board-wrapper {
  position: absolute;
-  left: 0;
-  right: 0;
+  inset-inline-start: 0;
+  inset-inline-end: 0;
  top: 0;
  bottom: 0;
  overflow-x: hidden;
@@ -30,8 +30,8 @@
 }
 .board-wrapper .board-canvas {
  position: absolute;
-  left: 0;
-  right: 0;
+  inset-inline-start: 0;
+  inset-inline-end: 0;
  top: 0;
  bottom: 0;
  transition: margin 0.1s;
@@ -276,12 +276,12 @@ body.mobile-mode.iphone-device .card-details .card-details-item-title {
 }
 .board-wrapper .board-canvas .board-overlay {
  position: fixed;
-  left: 0;
-  right: 0;
+  inset-inline-start: 0;
+  inset-inline-end: 0;
  top: 0;
  bottom: 0;
  top: -100px;
-  right: -400px;
+  inset-inline-end: -400px;
  background: #000;
  opacity: 0.33;
  animation: fadeIn 0.2s;
@@ -293,7 +293,7 @@ body.mobile-mode.iphone-device .card-details .card-details-item-title {
  .board-wrapper .board-canvas .board-overlay {
    z-index: 17 !important;
  }
-  
+
  /* In desktop mode on small screens, still keep overlay behind card */
  body.desktop-mode .board-wrapper .board-canvas .board-overlay {
    z-index: 17 !important;
@@ -325,8 +325,8 @@ body.desktop-mode .board-wrapper .board-canvas .board-overlay {
  width: 100vw !important;
  max-width: 100vw !important;
  min-width: 100vw !important;
-  left: 0 !important;
-  right: 0 !important;
+  inset-inline-start: 0 !important;
+  inset-inline-end: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
 }
@@ -335,8 +335,8 @@ body.desktop-mode .board-wrapper .board-canvas .board-overlay {
  width: 100vw !important;
  max-width: 100vw !important;
  min-width: 100vw !important;
-  left: 0 !important;
-  right: 0 !important;
+  inset-inline-start: 0 !important;
+  inset-inline-end: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
 }
@@ -360,8 +360,8 @@ body.desktop-mode .board-wrapper .board-canvas .board-overlay {
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 100vw !important;
-    left: 0 !important;
-    right: 0 !important;
+    inset-inline-start: 0 !important;
+    inset-inline-end: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }
@@ -370,8 +370,8 @@ body.desktop-mode .board-wrapper .board-canvas .board-overlay {
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 100vw !important;
-    left: 0 !important;
-    right: 0 !important;
+    inset-inline-start: 0 !important;
+    inset-inline-end: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }
@@ -560,7 +560,7 @@ body.desktop-mode .board-wrapper .board-canvas .board-overlay {
  align-items: center;
  position: absolute;
  top: 5px;
-  right: 5px;
+  inset-inline-end: 5px;
  font-size: 25px;
  cursor: pointer;
 }
@@ -1,8 +1,8 @@
 template(name="board")
-  
-  if isConverting.get
+
+  if isConverting
    +boardConversionProgress
-  else if isBoardReady.get
+  else if isBoardReady
    if currentBoard
      if onlyShowCurrentCard
        +cardDetails(currentCard)
@@ -21,17 +21,18 @@ template(name="boardBody")
  else
    // Debug information (remove in production)
    if debugBoardState
-      .debug-info(style="position: fixed; top: 0; left: 0; background: rgba(0,0,0,0.8); color: white; padding: 10px; z-index: 9999; font-size: 12px;")
+      .debug-info(style="position: fixed; top: 0; inset-inline-start: 0; background: rgba(0,0,0,0.8); color: white; padding: 10px; z-index: 9999; font-size: 12px;")
        | {{_ 'board'}}: {{currentBoard.title}} | {{_ 'view'}}: {{boardView}} | {{_ 'has-swimlanes'}}: {{hasSwimlanes}} | {{_ 'swimlanes'}}: {{currentBoard.swimlanes.length}}
    .board-wrapper(class=currentBoard.colorClass class="{{#if isMiniScreen}}mobile-view{{/if}}")
-      .board-canvas.js-swimlanes(
-        class="{{#if hasSwimlanes}}dragscroll{{/if}}"
+      .board-canvas.js-swimlanes.dragscroll(
        class="{{#if Sidebar.isOpen}}is-sibling-sidebar-open{{/if}}"
        class="{{#if MultiSelection.isActive}}is-multiselection-active{{/if}}"
-        class="{{#if draggingActive.get}}is-dragging-active{{/if}}"
+        class="{{#if draggingActive}}is-dragging-active{{/if}}"
        class="{{#unless isVerticalScrollbars}}no-scrollbars{{/unless}}"
        class="{{#if isMiniScreen}}mobile-view{{/if}}")
-        if showOverlay.get
+        if currentBoard.showDependencies
+          +dependencyOverlay
+        if showOverlay
          .board-overlay
        if currentBoard.isTemplatesBoard
          each currentBoard.swimlanes
@@ -49,6 +50,8 @@ template(name="boardBody")
          +calendarView
        else if isViewGantt
          +ganttView
+        else if isViewTable
+          +tableView
        else
          // Default view - show swimlanes if they exist, otherwise show lists
          if hasSwimlanes
@@ -64,7 +67,7 @@ template(name="boardBody")

 template(name="calendarView")
  if isViewCalendar
-    .calendar-view.swimlane
+    .calendar-view.swimlane.dragscroll
      if currentCard
        +cardDetails(currentCard)
      +fullcalendar(calendarOptions)
@@ -9,7 +9,7 @@ THEME - NEPHRITIS
  background-color: #27ae60;
 }
 .board-color-nephritis .is-selected .minicard {
-  border-left: 3px solid #27ae60;
+  border-inline-start: 3px solid #27ae60;
 }
 .board-color-nephritis .minicard {
  border-radius: 7px;
@@ -47,7 +47,7 @@ THEME - NEPHRITIS
 }
 .board-color-nephritis .materialCheckBox.is-checked {
  border-bottom: 2px solid #27ae60;
-  border-right: 2px solid #27ae60;
+  border-inline-end: 2px solid #27ae60;
 }
 .board-color-nephritis .checklist-progress-bar {
  background-color: #d4f1dd !important;
@@ -95,7 +95,7 @@ THEME - NEPHRITIS
 /* Remove margins in between columns/fix spacing */

 .board-color-nephritis .list {
-  border-left: none;
+  border-inline-start: none;
  padding-bottom: 8px;
 }

@@ -116,7 +116,7 @@ THEME - Pomegranate
  background-color: #c0392b;
 }
 .board-color-pomegranate .is-selected .minicard {
-  border-left: 3px solid #c0392b;
+  border-inline-start: 3px solid #c0392b;
 }
 .board-color-pomegranate .minicard {
  border-radius: 7px;
@@ -154,7 +154,7 @@ THEME - Pomegranate
 }
 .board-color-pomegranate .materialCheckBox.is-checked {
  border-bottom: 2px solid #c0392b;
-  border-right: 2px solid #c0392b;
+  border-inline-end: 2px solid #c0392b;
 }
 .board-color-pomegranate .checklist-progress-bar {
  background-color: #f5d5d2 !important;
@@ -202,7 +202,7 @@ THEME - Pomegranate
 /* Remove margins in between columns/fix spacing */

 .board-color-pomegranate .list {
-  border-left: none;
+  border-inline-start: none;
  padding-bottom: 8px;
 }

@@ -223,7 +223,7 @@ THEME - Belize
  background-color: #2980b9;
 }
 .board-color-belize .is-selected .minicard {
-  border-left: 3px solid #2980b9;
+  border-inline-start: 3px solid #2980b9;
 }
 .board-color-belize .minicard {
  border-radius: 7px;
@@ -261,7 +261,7 @@ THEME - Belize
 }
 .board-color-belize .materialCheckBox.is-checked {
  border-bottom: 2px solid #2980b9;
-  border-right: 2px solid #2980b9;
+  border-inline-end: 2px solid #2980b9;
 }
 .board-color-belize .checklist-progress-bar {
  background-color: #d1e7f5 !important;
@@ -309,7 +309,7 @@ THEME - Belize
 /* Remove margins in between columns/fix spacing */

 .board-color-belize .list {
-  border-left: none;
+  border-inline-start: none;
  padding-bottom: 8px;
 }

@@ -330,7 +330,7 @@ THEME - Wisteria
  background-color: #8e44ad;
 }
 .board-color-wisteria .is-selected .minicard {
-  border-left: 3px solid #8e44ad;
+  border-inline-start: 3px solid #8e44ad;
 }
 .board-color-wisteria .minicard {
  border-radius: 7px;
@@ -368,7 +368,7 @@ THEME - Wisteria
 }
 .board-color-wisteria .materialCheckBox.is-checked {
  border-bottom: 2px solid #8e44ad;
-  border-right: 2px solid #8e44ad;
+  border-inline-end: 2px solid #8e44ad;
 }
 .board-color-wisteria .checklist-progress-bar {
  background-color: #e8d9f0 !important;
@@ -416,7 +416,7 @@ THEME - Wisteria
 /* Remove margins in between columns/fix spacing */

 .board-color-wisteria .list {
-  border-left: none;
+  border-inline-start: none;
  padding-bottom: 8px;
 }

@@ -437,7 +437,7 @@ THEME - Midnight
  background-color: #2c3e50;
 }
 .board-color-midnight .is-selected .minicard {
-  border-left: 3px solid #2c3e50;
+  border-inline-start: 3px solid #2c3e50;
 }
 .board-color-midnight .minicard {
  border-radius: 7px;
@@ -475,7 +475,7 @@ THEME - Midnight
 }
 .board-color-midnight .materialCheckBox.is-checked {
  border-bottom: 2px solid #2c3e50;
-  border-right: 2px solid #2c3e50;
+  border-inline-end: 2px solid #2c3e50;
 }
 .board-color-midnight .checklist-progress-bar {
  background-color: #d2dae2 !important;
@@ -523,7 +523,7 @@ THEME - Midnight
 /* Remove margins in between columns/fix spacing */

 .board-color-midnight .list {
-  border-left: none;
+  border-inline-start: none;
  padding-bottom: 8px;
 }

@@ -544,7 +544,7 @@ THEME - Pumpkin
  background-color: #e67e22;
 }
 .board-color-pumpkin .is-selected .minicard {
-  border-left: 3px solid #e67e22;
+  border-inline-start: 3px solid #e67e22;
 }
 .board-color-pumpkin .minicard {
  border-radius: 7px;
@@ -582,7 +582,7 @@ THEME - Pumpkin
 }
 .board-color-pumpkin .materialCheckBox.is-checked {
  border-bottom: 2px solid #e67e22;
-  border-right: 2px solid #e67e22;
+  border-inline-end: 2px solid #e67e22;
 }
 .board-color-pumpkin .checklist-progress-bar {
  background-color: #f9e5d1 !important;
@@ -630,7 +630,7 @@ THEME - Pumpkin
 /* Remove margins in between columns/fix spacing */

 .board-color-pumpkin .list {
-  border-left: none;
+  border-inline-start: none;
  padding-bottom: 8px;
 }

@@ -651,7 +651,7 @@ THEME - Moderate Pink
  background-color: #cd5a91;
 }
 .board-color-moderatepink .is-selected .minicard {
-  border-left: 3px solid #cd5a91;
+  border-inline-start: 3px solid #cd5a91;
 }
 .board-color-moderatepink .minicard {
  border-radius: 7px;
@@ -689,7 +689,7 @@ THEME - Moderate Pink
 }
 .board-color-moderatepink .materialCheckBox.is-checked {
  border-bottom: 2px solid #cd5a91;
-  border-right: 2px solid #cd5a91;
+  border-inline-end: 2px solid #cd5a91;
 }
 .board-color-moderatepink .checklist-progress-bar {
  background-color: #f4dde8 !important;
@@ -737,7 +737,7 @@ THEME - Moderate Pink
 /* Remove margins in between columns/fix spacing */

 .board-color-moderatepink .list {
-  border-left: none;
+  border-inline-start: none;
  padding-bottom: 8px;
 }

@@ -758,7 +758,7 @@ THEME - Strong Cyan
  background-color: #00aecc;
 }
 .board-color-strongcyan .is-selected .minicard {
-  border-left: 3px solid #00aecc;
+  border-inline-start: 3px solid #00aecc;
 }
 .board-color-strongcyan .minicard {
  border-radius: 7px;
@@ -796,7 +796,7 @@ THEME - Strong Cyan
 }
 .board-color-strongcyan .materialCheckBox.is-checked {
  border-bottom: 2px solid #00aecc;
-  border-right: 2px solid #00aecc;
+  border-inline-end: 2px solid #00aecc;
 }
 .board-color-strongcyan .checklist-progress-bar {
  background-color: #ccf2f9 !important;
@@ -844,7 +844,7 @@ THEME - Strong Cyan
 /* Remove margins in between columns/fix spacing */

 .board-color-strongcyan .list {
-  border-left: none;
+  border-inline-start: none;
  padding-bottom: 8px;
 }

@@ -865,7 +865,7 @@ THEME - Lime Green
  background-color: #4bbf6b;
 }
 .board-color-limegreen .is-selected .minicard {
-  border-left: 3px solid #4bbf6b;
+  border-inline-start: 3px solid #4bbf6b;
 }
 .board-color-limegreen .minicard {
  border-radius: 7px;
@@ -903,7 +903,7 @@ THEME - Lime Green
 }
 .board-color-limegreen .materialCheckBox.is-checked {
  border-bottom: 2px solid #4bbf6b;
-  border-right: 2px solid #4bbf6b;
+  border-inline-end: 2px solid #4bbf6b;
 }
 .board-color-limegreen .checklist-progress-bar {
  background-color: #daf4de !important;
@@ -951,7 +951,7 @@ THEME - Lime Green
 /* Remove margins in between columns/fix spacing */

 .board-color-limegreen .list {
-  border-left: none;
+  border-inline-start: none;
  padding-bottom: 8px;
 }

@@ -972,7 +972,7 @@ THEME - Dark
  background-color: #2c3e51;
 }
 .board-color-dark .is-selected .minicard {
-  border-left: 3px solid #2c3e51;
+  border-inline-start: 3px solid #2c3e51;
 }
 .board-color-dark .minicard {
  border-radius: 7px;
@@ -1011,7 +1011,7 @@ THEME - Dark
 }
 .board-color-dark .materialCheckBox.is-checked {
  border-bottom: 2px solid #2c3e51;
-  border-right: 2px solid #2c3e51;
+  border-inline-end: 2px solid #2c3e51;
 }
 .board-color-dark .checklist-progress-bar {
  background-color: #d2dae2 !important;
@@ -1161,7 +1161,7 @@ THEME - Dark
 /* Remove margins in between columns/fix spacing */

 .board-color-dark .list {
-  border-left: none; /* Remove this property to bring back lines in-between columns if needed*/
+  border-inline-start: none; /* Remove this property to bring back lines in-between columns if needed*/
  padding: 0px 1px 8px 1px; /* Improves spacing between columns due to no borders, 8px padding at bottom to separate horizontal scrollbar/lists */
 }

@@ -1182,7 +1182,7 @@ THEME - Relax
  background-color: #27ae61;
 }
 .board-color-relax .is-selected .minicard {
-  border-left: 3px solid #27ae61;
+  border-inline-start: 3px solid #27ae61;
 }
 .board-color-relax .minicard {
  border-radius: 7px;
@@ -1220,7 +1220,7 @@ THEME - Relax
 }
 .board-color-relax .materialCheckBox.is-checked {
  border-bottom: 2px solid #27ae61;
-  border-right: 2px solid #27ae61;
+  border-inline-end: 2px solid #27ae61;
 }
 .board-color-relax .checklist-progress-bar {
  background-color: #d4f1dd !important;
@@ -1263,7 +1263,7 @@ THEME - Relax
  background-color: #a7e366;
 }
 .board-color-relax .list {
-  border-left: 1px dotted #000;
+  border-inline-start: 1px dotted #000;
 }
 .board-color-relax .card-details .card-details-items ~ .js-open-inlined-form .viewer {
  background-color: #fff !important;
@@ -1297,7 +1297,7 @@ THEME - Relax
 /* Remove margins in between columns/fix spacing */

 .board-color-relax .list {
-  border-left: none;
+  border-inline-start: none;
 /* padding-bottom: 8px; - Removed to get rid of grey bars for relax theme */
 }

@@ -1318,7 +1318,7 @@ THEME - Corteza
  background-color: #568ba2;
 }
 .board-color-corteza .is-selected .minicard {
-  border-left: 3px solid #568ba2;
+  border-inline-start: 3px solid #568ba2;
 }
 .board-color-corteza .minicard {
  border-radius: 7px;
@@ -1356,7 +1356,7 @@ THEME - Corteza
 }
 .board-color-corteza .materialCheckBox.is-checked {
  border-bottom: 2px solid #568ba2;
-  border-right: 2px solid #568ba2;
+  border-inline-end: 2px solid #568ba2;
 }
 .board-color-corteza .checklist-progress-bar {
  background-color: #dce6ec !important;
@@ -1404,7 +1404,7 @@ THEME - Corteza
 /* Remove margins in between columns/fix spacing */

 .board-color-corteza .list {
-  border-left: none;
+  border-inline-start: none;
  padding-bottom: 8px;
 }

@@ -1424,7 +1424,7 @@ THEME - Clear Blue
  background: linear-gradient(180deg, #499bea 0%, #00aecc 100%);
 }
 .board-color-clearblue .is-selected .minicard {
-  border-left: 3px solid #499bea;
+  border-inline-start: 3px solid #499bea;
 }
 .board-color-clearblue.pop-over .pop-over-list li a:not(.disabled):hover,
 .board-color-clearblue .sidebar .sidebar-content .sidebar-btn:hover,
@@ -1467,7 +1467,7 @@ THEME - Clear Blue
 }
 .board-color-clearblue .materialCheckBox.is-checked {
  border-bottom: 2px solid #499bea;
-  border-right: 2px solid #499bea;
+  border-inline-end: 2px solid #499bea;
 }
 .board-color-clearblue .checklist-progress-bar {
  background-color: #daeefb !important;
@@ -1495,8 +1495,8 @@ THEME - Clear Blue
 }
 .board-color-clearblue .swimlane .list:first-child {
  min-width: 20px;
-  margin-left: 10px; /* Added 10px margin left to stop lists being butted up against the edge of the screen */
-  border-left: none;
+  margin-inline-start: 10px; /* Added 10px margin left to stop lists being butted up against the edge of the screen */
+  border-inline-start: none;
 }
 .board-color-clearblue .swimlane .list:nth-child {
  flex: 0 0 265px;
@@ -1513,8 +1513,8 @@ THEME - Clear Blue
  flex: unset;
  padding-bottom: 16px;
  min-width: 20px;
-  margin-left: 0px;
-  border-left: none;
+  margin-inline-start: 0px;
+  border-inline-start: none;
 }
 .board-color-clearblue .list.list-composer .open-list-composer {
  border-radius: 7px;
@@ -1550,7 +1550,7 @@ THEME - Clear Blue
 .board-color-clearblue .card-details {
  border-radius: 0 0 14px 14px;
  box-shadow: 0 0 7px 0 rgba(0,0,0,0.5);
-  margin-left: -10px;
+  margin-inline-start: -10px;
 }
 .board-color-clearblue .list-body .open-minicard-composer {
  border-radius: 7px;
@@ -1584,7 +1584,7 @@ THEME - Clear Blue
  color: rgba(0,0,0,0.5);
  position: absolute;
  margin-top: -34px;
-  margin-left: -11px;
+  margin-inline-start: -11px;
 }
 .board-color-clearblue a.fa,
 .board-color-clearblue a i.fa {
@@ -1605,7 +1605,7 @@ THEME - Clear Blue
 }
 .board-color-clearblue .sidebar-shadow {
  box-shadow: none;
-  border-left: 9px solid #00aecc;
+  border-inline-start: 9px solid #00aecc;
 }
 .board-color-clearblue .is-open .sidebar-shadow {
  box-shadow: -10px 0 8px rgba(0,0,0,0.3);
@@ -1646,7 +1646,7 @@ THEME - Clear Blue
  vertical-align: middle;
 }
 .board-color-clearblue .swimlane-header-wrap .primary.confirm {
-  margin-right: 0;
+  margin-inline-end: 0;
 }
 .board-color-clearblue .swimlane-header-wrap .fa.fa-times-thin {
  margin-top: 2px;
@@ -1677,7 +1677,7 @@ THEME - Clear Blue
 /* Remove margins in between columns/fix spacing */

 .board-color-clearblue .list {
-  border-left: none;
+  border-inline-start: none;
  padding-bottom: 8px;
 }

@@ -1698,7 +1698,7 @@ THEME - Natural
  background-color: #596557;
 }
 .board-color-natural .is-selected .minicard {
-  border-left: 3px solid #596557;
+  border-inline-start: 3px solid #596557;
 }
 .board-color-natural .minicard {
  border-radius: 7px;
@@ -1736,7 +1736,7 @@ THEME - Natural
 }
 .board-color-natural .materialCheckBox.is-checked {
  border-bottom: 2px solid #596557;
-  border-right: 2px solid #596557;
+  border-inline-end: 2px solid #596557;
 }
 .board-color-natural .checklist-progress-bar {
  background-color: #dee0dd !important;
@@ -1793,7 +1793,7 @@ THEME - Natural
 /* Remove margins in between columns/fix spacing */

 .board-color-natural .list {
-  border-left: none;
+  border-inline-start: none;
  padding-bottom: 8px;
 }

@@ -1814,7 +1814,7 @@ THEME - Modern
  background-color: #2a80b8;
 }
 .board-color-modern .is-selected .minicard {
-  border-left: 3px solid #2a80b8;
+  border-inline-start: 3px solid #2a80b8;
 }
 .board-color-modern .minicard {
  border-radius: 7px;
@@ -1852,7 +1852,7 @@ THEME - Modern
 }
 .board-color-modern .materialCheckBox.is-checked {
  border-bottom: 2px solid #2a80b8;
-  border-right: 2px solid #2a80b8;
+  border-inline-end: 2px solid #2a80b8;
 }
 .board-color-modern .checklist-progress-bar {
  background-color: #d1e7f5 !important;
@@ -1904,7 +1904,7 @@ THEME - Modern
  display: none;
 }
 .board-color-modern#header-quick-access ul li:nth-child(3) {
-  margin-right: 10px;
+  margin-inline-end: 10px;
 }
 .board-color-modern#header-quick-access ul li a {
  padding: 5px 10px;
@@ -1952,7 +1952,7 @@ THEME - Modern
 }
 .board-color-modern .list {
  background: transparent;
-  border-left: 0;
+  border-inline-start: 0;
  margin: 10px 0;
  padding: 0px;
  border-radius: 5px;
@@ -1964,8 +1964,8 @@ THEME - Modern
 }
 .board-color-modern .swimlane .list:first-child {
  min-width: 20px;
-  margin-left: 0px;
-  border-left: none;
+  margin-inline-start: 0px;
+  border-inline-start: none;
 }
 .board-color-modern .swimlane .list:nth-child {
  flex: 0 0 265px;
@@ -2033,7 +2033,7 @@ THEME - Modern
 .board-color-modern .pop-over .header .close-btn {
  font-size: 20px;
  top: 6px;
-  right: 8px;
+  inset-inline-end: 8px;
 }
 .board-color-modern .pop-over .content-container .content {
  padding: 5px 20px 20px;
@@ -2043,7 +2043,7 @@ THEME - Modern
  border-radius: 5px;
 }
 .board-color-modern .pop-over-list li > a > i {
-  margin-right: 5px;
+  margin-inline-end: 5px;
 }
 .board-color-modern .pop-over-list li>a .sub-name {
  margin-bottom: 8px;
@@ -2086,7 +2086,7 @@ THEME - Modern
 /* Remove margins in between columns/fix spacing */

 .board-color-modern .list {
-  border-left: none;
+  border-inline-start: none;
  padding-bottom: 8px;
 }

@@ -2107,7 +2107,7 @@ THEME - Modern Dark
  background-color: #2a2a2a;
 }
 .board-color-moderndark .is-selected .minicard {
-  border-left: 3px solid #2a2a2a;
+  border-inline-start: 3px solid #2a2a2a;
 }
 .board-color-moderndark .minicard {
  border-radius: 7px;
@@ -2150,7 +2150,7 @@ THEME - Modern Dark
 }
 .board-color-moderndark .materialCheckBox.is-checked {
  border-bottom: 2px solid #2a2a2a;
-  border-right: 2px solid #2a2a2a;
+  border-inline-end: 2px solid #2a2a2a;
 }
 .board-color-moderndark .checklist-progress-bar {
  background-color: #d1d1d1 !important;
@@ -2250,7 +2250,7 @@ THEME - Modern Dark
  display: none;
 }
 .board-color-moderndark#header-quick-access ul li:nth-child(3) {
-  margin-right: 10px;
+  margin-inline-end: 10px;
 }
 .board-color-moderndark#header-quick-access ul li a {
  padding: 5px 10px;
@@ -2293,8 +2293,8 @@ THEME - Modern Dark
 .board-color-moderndark .swimlane .list:first-child {
  color: #eee;
  min-width: 20px;
-  margin-left: 0px;
-  border-left: none;
+  margin-inline-start: 0px;
+  border-inline-start: none;
 }
 .board-color-moderndark .swimlane .list-composer .list-header-add .inlined-form .edit-controls .quiet,
 .board-color-moderndark .swimlane .list-composer .list-header-add .inlined-form .edit-controls .quiet a.js-list-template {
@@ -2315,7 +2315,7 @@ THEME - Modern Dark
  background: #6a6a6a;
 }
 .board-color-moderndark .list-header .viewer {
-  padding-left: 10px;
+  padding-inline-start: 10px;
 }
 .board-color-moderndark .list-header .list-header-name,
 .board-color-moderndark .minicard {
@@ -2333,7 +2333,7 @@ THEME - Modern Dark
 }
@media screen and (min-width: 801px) {
  .board-color-moderndark .list-header .list-header-name {
-    float: left;
+    float: inline-start;
  }
  .board-color-moderndark .list-header .list-header-menu {
    padding: 0 10px 10px;
@@ -2445,7 +2445,7 @@ THEME - Modern Dark
    padding: 0px 20px;
  }
  .board-color-moderndark .card-details .card-details-header .card-details-menu-mobile-web {
-    margin-right: 0;
+    margin-inline-end: 0;
  }
  .board-color-moderndark .pop-over > .content-wrapper > .popup-container-depth-0 > .content {
    width: calc(100% - 20px);
@@ -2455,7 +2455,7 @@ THEME - Modern Dark
  .board-color-moderndark .card-details {
    position: fixed;
    top: 82px;
-    left: calc(50% - 384px);
+    inset-inline-start: calc(50% - 384px);
    width: 768px;
    max-height: calc(100% - 60px);
  }
@@ -2513,9 +2513,9 @@ THEME - Modern Dark
 }
 .board-color-moderndark .card-details .check-box.materialCheckBox.is-checked {
  border-bottom: 2px solid #fff;
-  border-right: 2px solid #fff;
+  border-inline-end: 2px solid #fff;
  border-top: 0;
-  border-left: 0;
+  border-inline-start: 0;
 }
 .board-color-moderndark .card-details .js-add-checklist-item {
  margin-top: 4px;
@@ -2530,7 +2530,7 @@ THEME - Modern Dark
 .board-color-moderndark .sidebar {
  background-color: #222;
  box-shadow: -10px 0 5px -10px #444;
-  border-left: 1px solid #333;
+  border-inline-start: 1px solid #333;
  color: #ccc;
 }
 .board-color-moderndark .activities .activity .activity-desc .activity-comment {
@@ -2581,7 +2581,7 @@ THEME - Modern Dark
 /* Remove margins in between columns/fix spacing */

 .board-color-moderndark .list {
-  border-left: none;
+  border-inline-start: none;
  padding-bottom: 8px;
 }

@@ -2603,7 +2603,7 @@ THEME - Exodark
  background-color: #222;
 }
 .board-color-exodark .is-selected .minicard {
-  border-left: 3px solid #222;
+  border-inline-start: 3px solid #222;
 }
 .board-color-exodark .minicard {
  border-radius: 7px;
@@ -2641,7 +2641,7 @@ THEME - Exodark
 }
 .board-color-exodark .materialCheckBox.is-checked {
  border-bottom: 2px solid #dbdbdb!important;/*Fix contrast of checkbox*/
-  border-right: 2px solid #dbdbdb!important;
+  border-inline-end: 2px solid #dbdbdb!important;
 }
 .board-color-exodark .checklist-progress-bar {
  background-color: #cccccc !important;
@@ -2698,8 +2698,8 @@ THEME - Exodark
 }
 .board-color-exodark .swimlane .list:first-child {
  min-width: 20px;
-  margin-left: 10px; /*Added 10px margin to prevent butting up against edge of screen */
-  border-left: none;
+  margin-inline-start: 10px; /*Added 10px margin to prevent butting up against edge of screen */
+  border-inline-start: none;
 }
 .board-color-exodark .swimlane .list:nth-child {
  flex: 0 0 265px;
@@ -2960,10 +2960,10 @@ THEME - Clean Dark
  background: #009B64;
  width: min-content;
  color: #FFFFFF;
-  padding-left: 8px;
-  padding-right: 8px;
+  padding-inline-start: 8px;
+  padding-inline-end: 8px;
  border-radius: 8px;
-  margin-left: 4px;
+  margin-inline-start: 4px;
 }

 .board-color-cleandark .card-details hr {
@@ -3203,7 +3203,7 @@ THEME - Clean Dark

 .board-color-cleandark .card-details .check-box.materialCheckBox.is-checked {
  border-bottom: 2px solid #FFFFFF;
-  border-right: 2px solid #FFFFFF;
+  border-inline-end: 2px solid #FFFFFF;
  width: 11px;
  height: 19px;
  border-radius: 0;
@@ -3234,12 +3234,12 @@ THEME - Clean Dark

 .board-color-cleandark #cards .materialCheckBox.is-checked {
  border-bottom: 2px solid #FFFFFF;
-  border-right: 2px solid #FFFFFF;
+  border-inline-end: 2px solid #FFFFFF;
  width: 5px;
  height: 13px;
  border-radius: 0;
  background: none;
-  margin-left: 3px;
+  margin-inline-start: 3px;
  margin-top: 3px;
 }
 .board-color-cleandark .checklist-progress-bar {
@@ -3258,7 +3258,7 @@ THEME - Clean Dark
  align-items: center;
  padding-bottom: 4px;
  padding-top: 4px;
-  margin-right: 10px;
+  margin-inline-end: 10px;
 }

 .board-color-cleandark#header-quick-access ul.header-quick-access-list {
@@ -3280,7 +3280,7 @@ THEME - Clean Dark
 /* Remove margins in between columns/fix spacing */

 .board-color-cleandark .list {
-  border-left: none;
+  border-inline-start: none;
  padding-bottom: 8px;
 }

@@ -3370,18 +3370,19 @@ THEME - Clean Light

 .board-color-cleanlight .list,
 .board-color-cleandark .list {
-  background: none;
-  border-left: none;
+  background: none !important;
+  border-inline-start: none !important;
 }

 .board-color-cleanlight .list .list-header,
 .board-color-cleandark .list .list-header {
-  border-bottom: none;
-  display: flex;
+  border-bottom: none !important;
+  display: flex !important;
  justify-content: space-between;
  align-items: center;
  font-size: 16px;
-  background: none;
+  background: none !important;
+  background-color: transparent !important;
 }

 .board-color-cleanlight .list .list-header div:has(.list-header-name),
@@ -3444,11 +3445,11 @@ THEME - Clean Light
  border-radius: 12px;
  margin-top: 18px;
  padding: 8px;
-  margin-right: 8px;
+  margin-inline-end: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
-  margin-left: 10px;
+  margin-inline-start: 10px;
 }

 .board-color-cleanlight .list-header-add:hover {
@@ -3478,7 +3479,7 @@ THEME - Clean Light
 .board-color-cleandark .card-label {
  border-radius: 18px;
  margin-top: 6px;
-  margin-right: 8px;
+  margin-inline-end: 8px;
  border: none;
  padding: 4px 12px;
 }
@@ -3528,14 +3529,14 @@ THEME - Clean Light

 .board-color-cleanlight .swimlane .swimlane-header-wrap .swimlane-header-plus-icon,
 .board-color-cleandark .swimlane .swimlane-header-wrap .swimlane-header-plus-icon {
-  margin-left: 14px;
+  margin-inline-start: 14px;
 }

 .board-color-cleanlight .swimlane .swimlane-header-wrap .list-composer,
 .board-color-cleandark .swimlane .swimlane-header-wrap .list-composer {
  display: flex;
  gap: 12px;
-  margin-left: 20px;
+  margin-inline-start: 20px;
 }

 .board-color-cleanlight .swimlane .swimlane-header-wrap .swimlane-header .viewer p,
@@ -3669,10 +3670,10 @@ THEME - Clean Light
  background: #009B64;
  width: min-content;
  color: #FFFFFF;
-  padding-left: 8px;
-  padding-right: 8px;
+  padding-inline-start: 8px;
+  padding-inline-end: 8px;
  border-radius: 8px;
-  margin-left: 4px;
+  margin-inline-start: 4px;
 }

 .board-color-cleanlight .card-details hr {
@@ -3961,7 +3962,7 @@ THEME - Clean Light

 .board-color-cleanlight .card-details .check-box.materialCheckBox.is-checked {
  border-bottom: 2px solid #000000;
-  border-right: 2px solid #000000;
+  border-inline-end: 2px solid #000000;
  width: 11px;
  height: 19px;
  border-radius: 0;
@@ -3992,12 +3993,12 @@ THEME - Clean Light

 .board-color-cleanlight #cards .materialCheckBox.is-checked {
  border-bottom: 2px solid #000000;
-  border-right: 2px solid #000000;
+  border-inline-end: 2px solid #000000;
  width: 5px;
  height: 13px;
  border-radius: 0;
  background: none;
-  margin-left: 3px;
+  margin-inline-start: 3px;
  margin-top: 3px;
 }
 .board-color-cleanlight .checklist-progress-bar {
@@ -4049,7 +4050,7 @@ THEME - Clean Light
  align-items: center;
  padding-bottom: 4px;
  padding-top: 4px;
-  margin-right: 10px;
+  margin-inline-end: 10px;
 }

 .board-color-cleanlight#header-quick-access ul.header-quick-access-list {
@@ -4237,12 +4238,12 @@ THEME - Clean Light

 .board-color-cleanlight .card-details-item-customfield:has(.checklist-item) div,
 .board-color-cleandark .card-details-item-customfield:has(.checklist-item) div {
-  padding-right: 0 !important;
+  padding-inline-end: 0 !important;
 }

 .board-color-cleanlight .card-details .card-details-items .card-details-item.custom-fields,
 .board-color-cleanlight .card-details .card-details-items .card-details-item.custom-fields {
-  margin-left: auto;
+  margin-inline-start: auto;
  flex-grow: 0;
  border-radius: 12px;
 }
@@ -4279,13 +4280,21 @@ THEME - Clean Light
  font-weight: 500;
 }

+.board-color-cleandark .pop-over-list li > a {
+  color: rgba(255, 255, 255, 1) !important;
+}
+
+.board-color-cleanlight .pop-over-list li > a {
+  color: rgba(10, 10, 20, 0.85) !important;
+}
+
 .board-color-cleanlight .pop-over-list li > a i,
 .board-color-cleandark .pop-over-list li > a i {
-  margin-right: 6px !important;
+  margin-inline-end: 6px !important;
 }

 .board-color-cleanlight .pop-over .quiet {
-  margin-left: 100px !important;
+  margin-inline-start: 100px !important;
 }

 .board-color-cleandark .minicard:hover:not(.minicard-composer),
@@ -4307,7 +4316,7 @@ THEME - Clean Light
 /* Remove margins in between columns/fix spacing */

 .board-color-cleanlight .list {
-  border-left: none;
+  border-inline-start: none;
  padding-bottom: 8px;
 }

@@ -208,7 +208,7 @@
  display: block !important;
  float: none !important;
  margin-bottom: 2rem !important;
-  border-left: none !important;
+  border-inline-start: none !important;
  border-bottom: 2px solid #ccc !important;
  clear: both !important;
 }
@@ -249,7 +249,7 @@

 .mobile-mode .list-header .list-header-menu-icon {
  position: static !important;
-  right: auto !important;
+  inset-inline-end: auto !important;
  top: auto !important;
  transform: none !important;
  grid-row: 1/3 !important;
@@ -264,7 +264,7 @@

 .mobile-mode .list-header .list-header-handle {
  position: static !important;
-  right: auto !important;
+  inset-inline-end: auto !important;
  top: auto !important;
  transform: none !important;
  grid-row: 1/3 !important;
@@ -325,9 +325,9 @@
  width: auto !important;
  min-width: auto !important;
  display: flex !important;
-  float: left !important;
+  float: inline-start !important;
  margin-bottom: 0 !important;
-  border-left: 1px solid #ccc !important;
+  border-inline-start: 1px solid #ccc !important;
  border-bottom: none !important;
 }

@@ -356,7 +356,7 @@

 .desktop-mode .list-header .list-header-menu-icon {
  position: absolute !important;
-  right: 60px !important;
+  inset-inline-end: 60px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  grid-row: auto !important;
@@ -367,7 +367,7 @@

 .desktop-mode .list-header .list-header-handle {
  position: absolute !important;
-  right: 10px !important;
+  inset-inline-end: 10px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  grid-row: auto !important;
@@ -463,7 +463,7 @@
  visibility: visible !important;
  opacity: 1 !important;
  position: static !important;
-  right: auto !important;
+  inset-inline-end: auto !important;
  top: auto !important;
  transform: none !important;
 }
@@ -557,8 +557,8 @@
    padding: 0 !important;
    float: none !important;
    clear: both !important;
-    border-left: none !important;
-    border-right: none !important;
+    border-inline-start: none !important;
+    border-inline-end: none !important;
    border-top: none !important;
    border-bottom: 2px solid #ccc !important;
    flex: none !important;
@@ -566,20 +566,20 @@
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
    position: static !important;
-    left: auto !important;
-    right: auto !important;
+    inset-inline-start: auto !important;
+    inset-inline-end: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
  }

 .mobile-mode .list:first-child {
-  margin-left: 0 !important;
+  margin-inline-start: 0 !important;
  margin-top: 0 !important;
 }

 .mobile-mode .list:last-child {
-  margin-right: 0 !important;
+  margin-inline-end: 0 !important;
  margin-bottom: 0 !important;
 }

@@ -594,8 +594,8 @@
  padding: 0 !important;
  float: none !important;
  clear: both !important;
-  border-left: none !important;
-  border-right: none !important;
+  border-inline-start: none !important;
+  border-inline-end: none !important;
  border-top: none !important;
  border-bottom: 2px solid #ccc !important;
  flex: none !important;
@@ -612,8 +612,8 @@
  padding: 0 !important;
  float: none !important;
  clear: both !important;
-  border-left: none !important;
-  border-right: none !important;
+  border-inline-start: none !important;
+  border-inline-end: none !important;
  border-top: none !important;
  border-bottom: 2px solid #ccc !important;
  flex: none !important;
@@ -643,8 +643,8 @@
  padding: 0 !important;
  float: none !important;
  clear: both !important;
-  border-left: none !important;
-  border-right: none !important;
+  border-inline-start: none !important;
+  border-inline-end: none !important;
  border-top: none !important;
  border-bottom: 2px solid #ccc !important;
  flex: none !important;
@@ -652,8 +652,8 @@
  flex-grow: 0 !important;
  flex-shrink: 0 !important;
  position: static !important;
-  left: auto !important;
-  right: auto !important;
+  inset-inline-start: auto !important;
+  inset-inline-end: auto !important;
  top: auto !important;
  bottom: auto !important;
  transform: none !important;
@@ -707,8 +707,8 @@
    padding: 0 !important;
    float: none !important;
    clear: both !important;
-    border-left: none !important;
-    border-right: none !important;
+    border-inline-start: none !important;
+    border-inline-end: none !important;
    border-top: none !important;
    border-bottom: 2px solid #ccc !important;
    flex: none !important;
@@ -716,8 +716,8 @@
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
    position: static !important;
-    left: auto !important;
-    right: auto !important;
+    inset-inline-start: auto !important;
+    inset-inline-end: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
@@ -1,148 +1,164 @@
 template(name="boardHeaderBar")
-  h1.header-board-menu
-    with currentBoard
-      if $eq title 'Templates'
-        | {{_ 'templates'}}
-      else
-        +viewer
-          = title
+  unless notDisplayThisBoard
+    h1.header-board-menu
+      with currentBoard
+        if $eq title 'Templates'
+          | {{_ 'templates'}}
+        else
+          +viewer
+            = title

-  .board-header-btns.left
-    unless isMiniScreen
+    .board-header-btns.left
+      unless isMiniScreen
+        if currentBoard
+          if currentUser
+            with currentBoard
+              if currentUser.isBoardAdmin
+                a.board-header-btn(class="{{#if currentUser.isBoardAdmin}}js-edit-board-title{{else}}is-disabled{{/if}}" title="{{_ 'edit'}}" value=title)
+                  i.fa.fa-pencil-square-o
+
+              a.board-header-btn(
+                class="{{#if currentUser.isBoardAdmin}}js-change-visibility{{else}}is-disabled{{/if}}"
+                title="{{_ currentBoard.permission}}")
+                i.fa(class="{{#if currentBoard.isPublic}}fa-globe{{else}}fa-lock{{/if}}")
+                span {{_ currentBoard.permission}}
+
+              a.board-header-btn.js-watch-board(
+                title="{{_ watchLevel }}")
+                if $eq watchLevel "watching"
+                  i.fa.fa-eye
+                if $eq watchLevel "tracking"
+                  i.fa.fa-bell
+                if $eq watchLevel "muted"
+                  i.fa.fa-bell-slash
+                span {{_ watchLevel}}
+              a.board-header-btn.js-star-board(class="{{#if isStarred}}is-active{{/if}}"
+                title="{{#if isStarred}}{{_ 'click-to-unstar'}}{{else}}{{_ 'click-to-star'}}{{/if}} {{_ 'starred-boards-description'}}")
+                i.fa(class="fa-star{{#unless isStarred}}-o{{/unless}}")
+                if showStarCounter
+                  span.board-star-counter {{currentBoard.stars}}
+              a.board-header-btn(title="{{_ 'sort-cards'}}" class="{{#if isSortActive }}emphasis{{else}} js-sort-cards {{/if}}")
+                i.fa.fa-sort
+                span {{#if isSortActive }}{{_ 'sort-is-on'}}{{else}}{{_ 'sort-cards'}}{{/if}}
+              if isSortActive
+                a.board-header-btn-close.js-sort-reset(title="{{_ 'remove-sort'}}")
+                  i.fa.fa-times-thin
+
+          else
+            a.board-header-btn.js-log-in(
+              title="{{_ 'log-in'}}")
+              i.fa.fa-sign-in
+              span {{_ 'log-in'}}
+
+    .board-header-btns.center
+      if currentUser
+        +boardButtons
+
+    .board-header-btns.right
      if currentBoard
-        if currentUser
-          with currentBoard
-            if currentUser.isBoardAdmin
+        if isMiniScreen
+          if currentUser
+            with currentBoard
              a.board-header-btn(class="{{#if currentUser.isBoardAdmin}}js-edit-board-title{{else}}is-disabled{{/if}}" title="{{_ 'edit'}}" value=title)
                i.fa.fa-pencil-square-o

-            a.board-header-btn(
-              class="{{#if currentUser.isBoardAdmin}}js-change-visibility{{else}}is-disabled{{/if}}"
-              title="{{_ currentBoard.permission}}")
-              i.fa(class="{{#if currentBoard.isPublic}}fa-globe{{else}}fa-lock{{/if}}")
-              span {{_ currentBoard.permission}}
+              a.board-header-btn(
+                class="{{#if currentUser.isBoardAdmin}}js-change-visibility{{else}}is-disabled{{/if}}"
+                title="{{_ currentBoard.permission}}")
+                i.fa(class="{{#if currentBoard.isPublic}}fa-globe{{else}}fa-lock{{/if}}")

-            a.board-header-btn.js-watch-board(
-              title="{{_ watchLevel }}")
-              if $eq watchLevel "watching"
-                i.fa.fa-eye
-              if $eq watchLevel "tracking"
-                i.fa.fa-bell
-              if $eq watchLevel "muted"
-                i.fa.fa-bell-slash
-              span {{_ watchLevel}}
-            a.board-header-btn.js-star-board(class="{{#if isStarred}}is-active{{/if}}"
-              title="{{#if isStarred}}{{_ 'click-to-unstar'}}{{else}}{{_ 'click-to-star'}}{{/if}} {{_ 'starred-boards-description'}}")
-              i.fa(class="fa-star{{#unless isStarred}}-o{{/unless}}")
-              if showStarCounter
-                span.board-star-counter {{currentBoard.stars}}
-            a.board-header-btn(title="{{_ 'sort-cards'}}" class="{{#if isSortActive }}emphasis{{else}} js-sort-cards {{/if}}")
-              i.fa.fa-sort
-              span {{#if isSortActive }}{{_ 'sort-is-on'}}{{else}}{{_ 'sort-cards'}}{{/if}}
-            if isSortActive
-              a.board-header-btn-close.js-sort-reset(title="{{_ 'remove-sort'}}")
-                i.fa.fa-times-thin
+              a.board-header-btn.js-watch-board(
+                title="{{_ watchLevel }}")
+                if $eq watchLevel "watching"
+                  i.fa.fa-eye
+                if $eq watchLevel "tracking"
+                  i.fa.fa-bell
+                if $eq watchLevel "muted"
+                  i.fa.fa-bell-slash
+              a.board-header-btn.js-star-board(class="{{#if isStarred}}is-active{{/if}}"
+                title="{{#if isStarred}}{{_ 'click-to-unstar'}}{{else}}{{_ 'click-to-star'}}{{/if}} {{_ 'starred-boards-description'}}")
+                i.fa(class="fa-star{{#unless isStarred}}-o{{/unless}}")
+              a.board-header-btn(title="{{_ 'sort-cards'}}" class="{{#if isSortActive }}emphasis{{else}} js-sort-cards {{/if}}")
+                i.fa.fa-sort
+                span {{#if isSortActive }}{{_ 'sort-is-on'}}{{else}}{{_ 'sort-cards'}}{{/if}}
+              if isSortActive
+                a.board-header-btn-close.js-sort-reset(title="{{_ 'remove-sort'}}")
+                  i.fa.fa-times-thin

-        else
-          a.board-header-btn.js-log-in(
-            title="{{_ 'log-in'}}")
-            i.fa.fa-sign-in
-            span {{_ 'log-in'}}
+          else
+            a.board-header-btn.js-log-in(
+              title="{{_ 'log-in'}}")
+              i.fa.fa-sign-in

-  .board-header-btns.center
+        if isSandstorm
+          if currentUser
+            a.board-header-btn.js-open-archived-board
+              i.fa.fa-archive

-  .board-header-btns.right
-    if currentBoard
-      if isMiniScreen
-        if currentUser
-          with currentBoard
-            a.board-header-btn(class="{{#if currentUser.isBoardAdmin}}js-edit-board-title{{else}}is-disabled{{/if}}" title="{{_ 'edit'}}" value=title)
-              i.fa.fa-pencil-square-o
+        //if showSort
+        //
+          a.board-header-btn.js-open-sort-view(title="{{_ 'sort-desc'}}")
+        //
+              i.fa(class="{{directionClass}}")
+        //
+              span {{_ 'sort'}}{{_ listSortShortDesc}}

-            a.board-header-btn(
-              class="{{#if currentUser.isBoardAdmin}}js-change-visibility{{else}}is-disabled{{/if}}"
-              title="{{_ currentBoard.permission}}")
-              i.fa(class="{{#if currentBoard.isPublic}}fa-globe{{else}}fa-lock{{/if}}")
-
-            a.board-header-btn.js-watch-board(
-              title="{{_ watchLevel }}")
-              if $eq watchLevel "watching"
-                i.fa.fa-eye
-              if $eq watchLevel "tracking"
-                i.fa.fa-bell
-              if $eq watchLevel "muted"
-                i.fa.fa-bell-slash
-            a.board-header-btn.js-star-board(class="{{#if isStarred}}is-active{{/if}}"
-              title="{{#if isStarred}}{{_ 'click-to-unstar'}}{{else}}{{_ 'click-to-star'}}{{/if}} {{_ 'starred-boards-description'}}")
-              i.fa(class="fa-star{{#unless isStarred}}-o{{/unless}}")
-            a.board-header-btn(title="{{_ 'sort-cards'}}" class="{{#if isSortActive }}emphasis{{else}} js-sort-cards {{/if}}")
-              i.fa.fa-sort
-              span {{#if isSortActive }}{{_ 'sort-is-on'}}{{else}}{{_ 'sort-cards'}}{{/if}}
-            if isSortActive
-              a.board-header-btn-close.js-sort-reset(title="{{_ 'remove-sort'}}")
-                i.fa.fa-times-thin
-
-        else
-          a.board-header-btn.js-log-in(
-            title="{{_ 'log-in'}}")
-            i.fa.fa-sign-in
-
-      if isSandstorm
-        if currentUser
-          a.board-header-btn.js-open-archived-board
-            i.fa.fa-archive
-
-      //if showSort
-      //  a.board-header-btn.js-open-sort-view(title="{{_ 'sort-desc'}}")
-      //    i.fa(class="{{directionClass}}")
-      //    span {{_ 'sort'}}{{_ listSortShortDesc}}
-
-      a.board-header-btn.js-open-filter-view(
-          title="{{#if Filter.isActive}}{{_ 'filter-on-desc'}}{{else}}{{_ 'filter'}}{{/if}}"
-          class="{{#if Filter.isActive}}js-filter-active{{/if}}")
-        i.fa.fa-filter
-        span {{#if Filter.isActive}}{{_ 'filter-on-desc'}}{{else}}{{_ 'filter'}}{{/if}}
-        if Filter.isActive
-          a.board-header-btn-close.js-filter-reset(title="{{_ 'filter-clear'}}")
-            i.fa.fa-times-thin
-
-      a.board-header-btn.js-open-search-view(title="{{_ 'search'}}")
-        i.fa.fa-search
-        span {{_ 'search'}}
-
-      unless currentBoard.isTemplatesBoard
-        a.board-header-btn.js-toggle-board-view
-          i.fa.fa-caret-down
-          if $eq boardView 'board-view-swimlanes'
-            i.fa.fa-th-large
-          if $eq boardView 'board-view-lists'
-            i.fa.fa-trello
-          if $eq boardView 'board-view-cal'
-            i.fa.fa-calendar
-          if $eq boardView 'board-view-gantt'
-            i.fa.fa-bar-chart
-          span
-            if $eq boardView 'board-view-swimlanes'
-              | {{_ 'swimlanes'}}
-            if $eq boardView 'board-view-lists'
-              | {{_ 'lists'}}
-            if $eq boardView 'board-view-cal'
-              | {{_ 'calendar'}}
-            if $eq boardView 'board-view-gantt'
-              | {{_ 'gantt'}}
-      if canModifyBoard
-        a.board-header-btn.js-multiselection-activate(
-            title="{{#if MultiSelection.isActive}}{{_ 'multi-selection-on'}}{{else}}{{_ 'multi-selection'}}{{/if}}"
-            class="{{#if MultiSelection.isActive}}emphasis{{/if}}")
-          i.fa.fa-check-square-o
-          span {{#if MultiSelection.isActive}}{{_ 'multi-selection-on'}}{{else}}{{_ 'multi-selection'}}{{/if}}
-          if MultiSelection.isActive
-            a.board-header-btn-close.js-multiselection-reset(title="{{_ 'filter-clear'}}")
+        a.board-header-btn.js-open-filter-view(
+            title="{{#if Filter.isActive}}{{_ 'filter-on-desc'}}{{else}}{{_ 'filter'}}{{/if}}"
+            class="{{#if Filter.isActive}}js-filter-active{{/if}}")
+          i.fa.fa-filter
+          span {{#if Filter.isActive}}{{_ 'filter-on-desc'}}{{else}}{{_ 'filter'}}{{/if}}
+          if Filter.isActive
+            a.board-header-btn-close.js-filter-reset(title="{{_ 'filter-clear'}}")
              i.fa.fa-times-thin

-      .separator
-      a.board-header-btn.js-toggle-sidebar(title="{{_ 'sidebar-open'}} {{_ 'or'}} {{_ 'sidebar-close'}}")
-        i.fa.fa-bars
+        a.board-header-btn.js-open-search-view(title="{{_ 'search'}}")
+          i.fa.fa-search
+          span {{_ 'search'}}
+
+        unless currentBoard.isTemplatesBoard
+          a.board-header-btn.js-toggle-board-view
+            i.fa.fa-caret-down
+            if $eq boardView 'board-view-swimlanes'
+              i.fa.fa-th-large
+            if $eq boardView 'board-view-lists'
+              i.fa.fa-trello
+            if $eq boardView 'board-view-cal'
+              i.fa.fa-calendar
+            if $eq boardView 'board-view-gantt'
+              i.fa.fa-bar-chart
+            if $eq boardView 'board-view-table'
+              i.fa.fa-table
+            span
+              if $eq boardView 'board-view-swimlanes'
+                | {{_ 'swimlanes'}}
+              if $eq boardView 'board-view-lists'
+                | {{_ 'lists'}}
+              if $eq boardView 'board-view-cal'
+                | {{_ 'calendar'}}
+              if $eq boardView 'board-view-gantt'
+                | {{_ 'gantt'}}
+              if $eq boardView 'board-view-table'
+                | {{_ 'board-view-table'}}
+        a.board-header-btn.js-toggle-dependencies(
+            title="{{#if currentBoard.showDependencies}}{{_ 'hide-dependencies'}}{{else}}{{_ 'show-dependencies'}}{{/if}}"
+            class="{{#if currentBoard.showDependencies}}emphasis{{/if}}")
+          i.fa.fa-link
+          span {{#if currentBoard.showDependencies}}{{_ 'hide-dependencies'}}{{else}}{{_ 'show-dependencies'}}{{/if}}
+
+        if canModifyBoard
+          a.board-header-btn.js-multiselection-activate(
+              title="{{#if MultiSelection.isActive}}{{_ 'multi-selection-on'}}{{else}}{{_ 'multi-selection'}}{{/if}}"
+              class="{{#if MultiSelection.isActive}}emphasis{{/if}}")
+            i.fa.fa-check-square-o
+            span {{#if MultiSelection.isActive}}{{_ 'multi-selection-on'}}{{else}}{{_ 'multi-selection'}}{{/if}}
+            if MultiSelection.isActive
+              a.board-header-btn-close.js-multiselection-reset(title="{{_ 'filter-clear'}}")
+                i.fa.fa-times-thin
+
+        .separator
+        a.board-header-btn.js-toggle-sidebar(title="{{_ 'sidebar-open'}} {{_ 'or'}} {{_ 'sidebar-close'}}")
+          i.fa.fa-bars

 template(name="boardVisibilityList")
  ul.pop-over-list
@@ -224,17 +240,24 @@ template(name="boardChangeViewPopup")
          | {{_ 'board-view-gantt'}}
          if $eq Utils.boardView "board-view-gantt"
            i.fa.fa-check
+    li
+      with "board-view-table"
+        a.js-open-table-view
+          i.fa.fa-table
+          | {{_ 'board-view-table'}}
+          if $eq Utils.boardView "board-view-table"
+            i.fa.fa-check

 template(name="createBoard")
  form
    label
      | {{_ 'title'}}
      input.js-new-board-title(type="text" placeholder="{{_ 'bucket-example'}}" autofocus required)
-    if visibilityMenuIsOpen.get
+    if visibilityMenuIsOpen
      +boardVisibilityList
    else
      p.quiet
-        if $eq visibility.get 'public'
+        if $eq visibility 'public'
          span.fa.fa-globe.colorful
          = " "
          | {{{_ 'board-public-info'}}}
@@ -243,9 +266,6 @@ template(name="createBoard")
          = " "
          | {{{_ 'board-private-info'}}}
        a.js-change-visibility {{_ 'change'}}.
-    a.flex.js-toggle-add-template-container
-      .materialCheckBox#add-template-container
-      span {{_ 'add-template-container'}}
    input.primary.wide(type="submit" value="{{_ 'create'}}")
    span.quiet
      | {{_ 'or'}}
@@ -259,11 +279,37 @@ template(name="createBoardPopup")
    label
      | {{_ 'title'}}
      input.js-new-board-title(type="text" placeholder="{{_ 'bucket-example'}}" autofocus required)
-    if visibilityMenuIsOpen.get
+    if visibilityMenuIsOpen
      +boardVisibilityList
    else
      p.quiet
-        if $eq visibility.get 'public'
+        if $eq visibility 'public'
+          span.fa.fa-globe.colorful
+          = " "
+          | {{{_ 'board-public-info'}}}
+        else
+          span.fa.fa-lock.colorful
+          = " "
+          | {{{_ 'board-private-info'}}}
+        a.js-change-visibility {{_ 'change'}}.
+    input.primary.wide(type="submit" value="{{_ 'create'}}")
+    span.quiet
+      | {{_ 'or'}}
+      a.js-import-board {{_ 'import'}}
+    span.quiet
+      | /
+      a.js-board-template {{_ 'template'}}
+
+template(name="headerBarCreateBoardPopup")
+  form
+    label
+      | {{_ 'title'}}
+      input.js-new-board-title(type="text" placeholder="{{_ 'bucket-example'}}" autofocus required)
+    if visibilityMenuIsOpen
+      +boardVisibilityList
+    else
+      p.quiet
+        if $eq visibility 'public'
          span.fa.fa-globe.colorful
          = " "
          | {{{_ 'board-public-info'}}}
@@ -272,9 +318,6 @@ template(name="createBoardPopup")
          = " "
          | {{{_ 'board-private-info'}}}
        a.js-change-visibility {{_ 'change'}}.
-    a.flex.js-toggle-add-template-container
-      .materialCheckBox#add-template-container
-      span {{_ 'add-template-container'}}
    input.primary.wide(type="submit" value="{{_ 'create'}}")
    span.quiet
      | {{_ 'or'}}
@@ -289,11 +332,11 @@ template(name="createTemplateContainerPopup")
    label
      | {{_ 'title'}}
      input.js-new-board-title(type="text" placeholder="{{_ 'bucket-example'}}" autofocus required)
-    if visibilityMenuIsOpen.get
+    if visibilityMenuIsOpen
      +boardVisibilityList
    else
      p.quiet
-        if $eq visibility.get 'public'
+        if $eq visibility 'public'
          span.fa.fa-globe.colorful
          = " "
          | {{{_ 'board-public-info'}}}
@@ -302,9 +345,6 @@ template(name="createTemplateContainerPopup")
          = " "
          | {{{_ 'board-private-info'}}}
        a.js-change-visibility {{_ 'change'}}.
-    a.flex.js-toggle-add-template-container
-      .materialCheckBox#add-template-container
-      span {{_ 'add-template-container'}}
    input.primary.wide(type="submit" value="{{_ 'create'}}")
    span.quiet
      | {{_ 'or'}}
@@ -314,18 +354,30 @@ template(name="createTemplateContainerPopup")
      a.js-board-template {{_ 'template'}}

 //template(name="listsortPopup")
-//  h2
-//   | {{_ 'list-sort-by'}}
-//  hr
-//  ul.pop-over-list
-//    each value in allowedSortValues
-//     li
-//      a.js-sort-by(name="{{value.name}}")
-//        if $eq sortby value.name
-//           | {{#if $eq Direction "fa-arrow-up"}}⬆️{{else}}⬇️{{/if}}
-//        | {{_ value.label }}{{_ value.shortLabel}}
-//        if $eq sortby value.name
-//           i.fa.fa-check
+//
+  h2
+//
+   | {{_ 'list-sort-by'}}
+//
+  hr
+//
+  ul.pop-over-list
+//
+    each value in allowedSortValues
+//
+     li
+//
+      a.js-sort-by(name="{{value.name}}")
+//
+        if $eq sortby value.name
+//
+           | {{#if $eq Direction "fa-arrow-up"}}⬆️{{else}}⬇️{{/if}}
+//
+        | {{_ value.label }}{{_ value.shortLabel}}
+//
+        if $eq sortby value.name
+//
+           i.fa.fa-check
 template(name="boardChangeTitlePopup")
  form
    label
@@ -2,6 +2,14 @@ import { ReactiveCache } from '/imports/reactiveCache';
 import { TAPi18n } from '/imports/i18n';
 import { FlowRouter } from 'meteor/ostrio:flow-router-extra';
 import dragscroll from '@wekanteam/dragscroll';
+import getSlug from 'limax';
+import Boards from '/models/boards';
+import Swimlanes from '/models/swimlanes';
+import TableVisibilityModeSettings from '/models/tableVisibilityModeSettings';
+import { Filter } from '/client/lib/filter';
+import { MultiSelection } from '/client/lib/multiSelection';
+import { getSidebarInstance } from '/client/features/sidebar/service';
+import { Utils } from '/client/lib/utils';

 /*
 const DOWNCLS = 'fa-sort-down';
@@ -11,6 +19,7 @@ const sortCardsBy = new ReactiveVar('');

 Template.boardChangeTitlePopup.events({
  async submit(event, templateInstance) {
+    event.preventDefault();
    const newTitle = templateInstance
      .$('.js-board-name')
      .val()
@@ -20,22 +29,37 @@ Template.boardChangeTitlePopup.events({
      .val()
      .trim();
    if (newTitle) {
-      await this.rename(newTitle);
-      await this.setDescription(newDesc);
+      const board = Utils.getCurrentBoard();
+      if (board) {
+        await board.rename(newTitle);
+        await board.setDescription(newDesc);
+      }
      Popup.back();
    }
-    event.preventDefault();
  },
 });

-BlazeComponent.extendComponent({
+Template.boardHeaderBar.onCreated(function () {
+  Meteor.subscribe('tableVisibilityModeSettings');
+});
+
+Template.boardHeaderBar.helpers({
+  notDisplayThisBoard() {
+    const allowPrivateVisibilityOnly = TableVisibilityModeSettings.findOne('tableVisibilityMode-allowPrivateOnly');
+    const currentBoard = Utils.getCurrentBoard();
+    return (
+      allowPrivateVisibilityOnly !== undefined &&
+      allowPrivateVisibilityOnly.booleanValue &&
+      currentBoard &&
+      currentBoard.permission === 'public'
+    );
+  },
+
  watchLevel() {
    const currentBoard = Utils.getCurrentBoard();
    return currentBoard && currentBoard.getWatchLevel(Meteor.userId());
  },

-
-
  isStarred() {
    const boardId = Session.get('currentBoard');
    const user = ReactiveCache.getCurrentUser();
@@ -47,130 +71,7 @@ BlazeComponent.extendComponent({
    const currentBoard = Utils.getCurrentBoard();
    return currentBoard && currentBoard.stars >= 2;
  },
-  /*
-  showSort() {
-    return ReactiveCache.getCurrentUser().hasSortBy();
-  },
-  directionClass() {
-    return this.currentDirection() === -1 ? DOWNCLS : UPCLS;
-  },
-  changeDirection() {
-    const direction = 0 - this.currentDirection() === -1 ? '-' : '';
-    Meteor.call('setListSortBy', direction + this.currentListSortBy());
-  },
-  currentDirection() {
-    return ReactiveCache.getCurrentUser().getListSortByDirection();
-  },
-  currentListSortBy() {
-    return ReactiveCache.getCurrentUser().getListSortBy();
-  },
-  listSortShortDesc() {
-    return `list-label-short-${this.currentListSortBy()}`;
-  },
-  */
-  events() {
-    return [
-      {
-        'click .js-edit-board-title': Popup.open('boardChangeTitle'),
-        'click .js-star-board'() {
-          const boardId = Session.get('currentBoard');
-          if (boardId) {
-            Meteor.call('toggleBoardStar', boardId);
-          }
-        },
-        'click .js-open-board-menu': Popup.open('boardMenu'),
-        'click .js-change-visibility': Popup.open('boardChangeVisibility'),
-        'click .js-watch-board': Popup.open('boardChangeWatch'),
-        'click .js-open-archived-board'() {
-          Modal.open('archivedBoards');
-        },
-        'click .js-toggle-board-view': Popup.open('boardChangeView'),
-        'click .js-toggle-sidebar'() {
-          if (process.env.DEBUG === 'true') {
-            console.log('Hamburger menu clicked');
-          }
-          // Use the same approach as keyboard shortcuts
-          if (typeof Sidebar !== 'undefined' && Sidebar && typeof Sidebar.toggle === 'function') {
-            if (process.env.DEBUG === 'true') {
-              console.log('Using Sidebar.toggle()');
-            }
-            Sidebar.toggle();
-          } else {
-            if (process.env.DEBUG === 'true') {
-              console.warn('Sidebar not available, trying alternative approach');
-            }
-            // Try to trigger the sidebar through the global Blaze helper
-            if (typeof Blaze !== 'undefined' && Blaze._globalHelpers && Blaze._globalHelpers.Sidebar) {
-              const sidebar = Blaze._globalHelpers.Sidebar();
-              if (sidebar && typeof sidebar.toggle === 'function') {
-                if (process.env.DEBUG === 'true') {
-                  console.log('Using Blaze helper Sidebar.toggle()');
-                }
-                sidebar.toggle();
-              }
-            }
-          }
-        },
-        'click .js-open-filter-view'() {
-          if (Sidebar) {
-            Sidebar.setView('filter');
-          } else {
-            console.warn('Sidebar not available for setView');
-          }
-        },
-        'click .js-sort-cards': Popup.open('cardsSort'),
-        /*
-        'click .js-open-sort-view'(evt) {
-          const target = evt.target;
-          if (target.tagName === 'I') {
-            // click on the text, popup choices
-            this.changeDirection();
-          } else {
-            // change the sort order
-            Popup.open('listsort')(evt);
-          }
-        },
-        */
-        'click .js-filter-reset'(event) {
-          event.stopPropagation();
-          if (Sidebar) {
-            Sidebar.setView();
-          } else {
-            console.warn('Sidebar not available for setView');
-          }
-          Filter.reset();
-        },
-        'click .js-sort-reset'() {
-          Session.set('sortBy', '');
-        },
-        'click .js-open-search-view'() {
-          if (Sidebar) {
-            Sidebar.setView('search');
-          } else {
-            console.warn('Sidebar not available for setView');
-          }
-        },
-        'click .js-multiselection-activate'() {
-          const currentCard = Utils.getCurrentCardId();
-          MultiSelection.activate();
-          if (currentCard) {
-            MultiSelection.add(currentCard);
-          }
-        },
-        'click .js-multiselection-reset'(event) {
-          event.stopPropagation();
-          MultiSelection.disable();
-        },
-        'click .js-log-in'() {
-          FlowRouter.go('atSignIn');
-        },
-      },
-    ];
-  },

-}).register('boardHeaderBar');
-
-Template.boardHeaderBar.helpers({
  boardView() {
    return Utils.boardView();
  },
@@ -182,7 +83,7 @@ Template.boardHeaderBar.helpers({
    if (!sortBy) {
      return '🃏'; // Card icon when nothing is selected
    }
-    
+
    // Determine which sort option is active based on sortBy object
    if (sortBy.dueAt) {
      return '📅'; // Due date icon
@@ -191,11 +92,117 @@ Template.boardHeaderBar.helpers({
    } else if (sortBy.createdAt) {
      return sortBy.createdAt === 1 ? '⬆️' : '⬇️'; // Up/down arrow based on direction
    }
-    
+
    return '🃏'; // Default card icon
  },
 });

+Template.boardHeaderBar.events({
+  'click .js-edit-board-title': Popup.open('boardChangeTitle'),
+  'click .js-star-board'() {
+    const boardId = Session.get('currentBoard');
+    if (boardId) {
+      Meteor.call('toggleBoardStar', boardId);
+    }
+  },
+  'click .js-open-board-menu': Popup.open('boardMenu'),
+  'click .js-change-visibility': Popup.open('boardChangeVisibility'),
+  'click .js-watch-board': Popup.open('boardChangeWatch'),
+  'click .js-open-archived-board'() {
+    Modal.open('archivedBoards');
+  },
+  'click .js-toggle-board-view': Popup.open('boardChangeView'),
+  'click .js-toggle-sidebar'() {
+    if (process.env.DEBUG === 'true') {
+      console.log('Hamburger menu clicked');
+    }
+    // Use the same approach as keyboard shortcuts
+    const sidebar = getSidebarInstance();
+    if (sidebar && typeof sidebar.toggle === 'function') {
+      if (process.env.DEBUG === 'true') {
+        console.log('Using Sidebar.toggle()');
+      }
+      sidebar.toggle();
+    } else {
+      if (process.env.DEBUG === 'true') {
+        console.warn('Sidebar not available, trying alternative approach');
+      }
+      // Try to trigger the sidebar through the global Blaze helper
+      if (typeof Blaze !== 'undefined' && Blaze._globalHelpers && Blaze._globalHelpers.Sidebar) {
+        const blazeSidebar = Blaze._globalHelpers.Sidebar();
+        if (blazeSidebar && typeof blazeSidebar.toggle === 'function') {
+          if (process.env.DEBUG === 'true') {
+            console.log('Using Blaze helper Sidebar.toggle()');
+          }
+          blazeSidebar.toggle();
+        }
+      }
+    }
+  },
+  'click .js-open-filter-view'() {
+    const sidebar = getSidebarInstance();
+    if (sidebar) {
+      sidebar.setView('filter');
+    } else {
+      console.warn('Sidebar not available for setView');
+    }
+  },
+  'click .js-sort-cards': Popup.open('cardsSort'),
+  /*
+  'click .js-open-sort-view'(evt) {
+    const target = evt.target;
+    if (target.tagName === 'I') {
+      // click on the text, popup choices
+      this.changeDirection();
+    } else {
+      // change the sort order
+      Popup.open('listsort')(evt);
+    }
+  },
+  */
+  'click .js-filter-reset'(event) {
+    event.stopPropagation();
+    const sidebar = getSidebarInstance();
+    if (sidebar) {
+      sidebar.setView();
+    } else {
+      console.warn('Sidebar not available for setView');
+    }
+    Filter.reset();
+  },
+  'click .js-sort-reset'() {
+    Session.set('sortBy', '');
+  },
+  'click .js-open-search-view'() {
+    const sidebar = getSidebarInstance();
+    if (sidebar) {
+      sidebar.setView('search');
+    } else {
+      console.warn('Sidebar not available for setView');
+    }
+  },
+  'click .js-toggle-dependencies'() {
+    const currentBoard = Utils.getCurrentBoard();
+    if (currentBoard) {
+      currentBoard.setShowDependencies(!currentBoard.showDependencies);
+    }
+  },
+  'click .js-multiselection-activate'() {
+    const currentCard = Utils.getCurrentCardId();
+    MultiSelection.activate();
+    if (currentCard) {
+      MultiSelection.add(currentCard);
+    }
+  },
+  'click .js-multiselection-reset'(event) {
+    event.stopPropagation();
+    MultiSelection.disable();
+  },
+  'click .js-log-in'() {
+    FlowRouter.go('atSignIn');
+  },
+});
+
 Template.boardChangeViewPopup.events({
  'click .js-open-lists-view'() {
    Utils.setBoardView('board-view-lists');
@@ -213,221 +220,240 @@ Template.boardChangeViewPopup.events({
    Utils.setBoardView('board-view-gantt');
    Popup.back();
  },
-});
-
-const CreateBoard = BlazeComponent.extendComponent({
-  template() {
-    return 'createBoard';
-  },
-
-  onCreated() {
-    this.visibilityMenuIsOpen = new ReactiveVar(false);
-    this.visibility = new ReactiveVar('private');
-    this.boardId = new ReactiveVar('');
-    Meteor.subscribe('tableVisibilityModeSettings');
-  },
-
-  notAllowPrivateVisibilityOnly(){
-    return !TableVisibilityModeSettings.findOne('tableVisibilityMode-allowPrivateOnly').booleanValue;
-  },
-
-  visibilityCheck() {
-    return this.currentData() === this.visibility.get();
-  },
-
-  setVisibility(visibility) {
-    this.visibility.set(visibility);
-    this.visibilityMenuIsOpen.set(false);
-  },
-
-  toggleVisibilityMenu() {
-    this.visibilityMenuIsOpen.set(!this.visibilityMenuIsOpen.get());
-  },
-
-  toggleAddTemplateContainer() {
-    $('#add-template-container').toggleClass('is-checked');
-  },
-
-  onSubmit(event) {
-    event.preventDefault();
-    const title = this.find('.js-new-board-title').value;
-
-    const addTemplateContainer = $('#add-template-container.is-checked').length > 0;
-    if (addTemplateContainer) {
-      //const templateContainerId = Meteor.call('setCreateTemplateContainer');
-      //Utils.goBoardId(templateContainerId);
-      //alert('niinku template ' + Meteor.call('setCreateTemplateContainer'));
-
-      this.boardId.set(
-        Boards.insert({
-            // title: TAPi18n.__('templates'),
-            title: title,
-            permission: 'private',
-            type: 'template-container',
-            migrationVersion: 1, // Latest version - no migration needed
-          }),
-       );
-
-      // Insert the card templates swimlane
-      Swimlanes.insert({
-          // title: TAPi18n.__('card-templates-swimlane'),
-          title: 'Card Templates',
-          boardId: this.boardId.get(),
-          sort: 1,
-          type: 'template-container',
-        }),
-
-      // Insert the list templates swimlane
-      Swimlanes.insert(
-        {
-          // title: TAPi18n.__('list-templates-swimlane'),
-          title: 'List Templates',
-          boardId: this.boardId.get(),
-          sort: 2,
-          type: 'template-container',
-        },
-      );
-
-      // Insert the board templates swimlane
-      Swimlanes.insert(
-        {
-          //title: TAPi18n.__('board-templates-swimlane'),
-          title: 'Board Templates',
-          boardId: this.boardId.get(),
-          sort: 3,
-          type: 'template-container',
-        },
-      );
-
-      // Assign to space if one was selected
-      const spaceId = Session.get('createBoardInWorkspace');
-      if (spaceId) {
-        Meteor.call('assignBoardToWorkspace', this.boardId.get(), spaceId, (err) => {
-          if (err) console.error('Error assigning board to space:', err);
-        });
-        Session.set('createBoardInWorkspace', null); // Clear after use
-      }
-
-      Utils.goBoardId(this.boardId.get());
-
-    } else {
-      const visibility = this.visibility.get();
-
-      this.boardId.set(
-        Boards.insert({
-          title,
-          permission: visibility,
-          migrationVersion: 1, // Latest version - no migration needed
-        }),
-      );
-
-      Swimlanes.insert({
-        title: 'Default',
-        boardId: this.boardId.get(),
-      });
-
-      // Assign to space if one was selected
-      const spaceId = Session.get('createBoardInWorkspace');
-      if (spaceId) {
-        Meteor.call('assignBoardToWorkspace', this.boardId.get(), spaceId, (err) => {
-          if (err) console.error('Error assigning board to space:', err);
-        });
-        Session.set('createBoardInWorkspace', null); // Clear after use
-      }
-
-      Utils.goBoardId(this.boardId.get());
-    }
-  },
-
-  events() {
-    return [
-      {
-        'click .js-select-visibility'() {
-          this.setVisibility(this.currentData());
-        },
-        'click .js-change-visibility': this.toggleVisibilityMenu,
-        'click .js-import': Popup.open('boardImportBoard'),
-        submit: this.onSubmit,
-        'click .js-import-board': Popup.open('chooseBoardSource'),
-        'click .js-board-template': Popup.open('searchElement'),
-        'click .js-toggle-add-template-container': this.toggleAddTemplateContainer,
-      },
-    ];
-  },
-}).register('createBoardPopup');
-
-(class CreateTemplateContainerPopup extends CreateBoard {
-  onRendered() {
-    // Always pre-check the template container checkbox for this popup
-    $('#add-template-container').addClass('is-checked');
-  }
-}).register('createTemplateContainerPopup');
-
-(class HeaderBarCreateBoard extends CreateBoard {
-  async onSubmit(event) {
-    super.onSubmit(event);
-    // Immediately star boards crated with the headerbar popup.
-    await ReactiveCache.getCurrentUser().toggleBoardStar(this.boardId.get());
-  }
-}.register('headerBarCreateBoardPopup'));
-
-BlazeComponent.extendComponent({
-  notAllowPrivateVisibilityOnly(){
-    return !TableVisibilityModeSettings.findOne('tableVisibilityMode-allowPrivateOnly').booleanValue;
-  },
-  visibilityCheck() {
-    const currentBoard = Utils.getCurrentBoard();
-    return this.currentData() === currentBoard.permission;
-  },
-
-  selectBoardVisibility() {
-    const currentBoard = Utils.getCurrentBoard();
-    const visibility = this.currentData();
-    currentBoard.setVisibility(visibility);
+  'click .js-open-table-view'() {
+    Utils.setBoardView('board-view-table');
    Popup.back();
  },
+});

-  events() {
-    return [
-      {
-        'click .js-select-visibility': this.selectBoardVisibility,
-      },
-    ];
+// Shared setup for all create board popups
+function setupCreateBoardState(tpl) {
+  tpl.visibilityMenuIsOpen = new ReactiveVar(false);
+  tpl.visibility = new ReactiveVar('private');
+  tpl.boardId = new ReactiveVar('');
+  // #5850: default to creating a regular board; the dedicated
+  // createTemplateContainerPopup sets this true in its onRendered.
+  Session.set('createBoardAsTemplate', false);
+  Meteor.subscribe('tableVisibilityModeSettings');
+}
+
+function createBoardHelpers() {
+  return {
+    visibilityMenuIsOpen() {
+      return Template.instance().visibilityMenuIsOpen.get();
+    },
+    visibility() {
+      return Template.instance().visibility.get();
+    },
+    notAllowPrivateVisibilityOnly() {
+      return !TableVisibilityModeSettings.findOne('tableVisibilityMode-allowPrivateOnly')?.booleanValue;
+    },
+    visibilityCheck() {
+      return Template.currentData() === Template.instance().visibility.get();
+    },
+  };
+}
+
+async function createBoardSubmit(tpl, event) {
+  event.preventDefault();
+  const title = tpl.find('.js-new-board-title').value;
+  const slug = getSlug(title) || 'board';
+
+  // #5850: template boards are created via the dedicated "Add Template Board"
+  // flow (createTemplateContainerPopup), signalled by this Session flag, rather
+  // than a checkbox on the generic Create Board popup. Consume it immediately.
+  const addTemplateContainer = Session.get('createBoardAsTemplate') === true;
+  Session.set('createBoardAsTemplate', false);
+  if (addTemplateContainer) {
+    tpl.boardId.set(
+      await Meteor.callAsync('createBoardWithInitialSwimlanes', {
+        title,
+        slug,
+        permission: 'private',
+        type: 'template-container',
+        migrationVersion: 1,
+        swimlanes: [
+          { title: 'Card Templates', sort: 1, type: 'template-container', role: 'card' },
+          { title: 'List Templates', sort: 2, type: 'template-container', role: 'list' },
+          { title: 'Board Templates', sort: 3, type: 'template-container', role: 'board' },
+        ],
+      }),
+    );
+
+    // Assign to space if one was selected
+    const spaceId = Session.get('createBoardInWorkspace');
+    if (spaceId) {
+      Meteor.call('assignBoardToWorkspace', tpl.boardId.get(), spaceId, (err) => {
+        if (err) console.error('Error assigning board to space:', err);
+      });
+      Session.set('createBoardInWorkspace', null); // Clear after use
+    }
+
+    FlowRouter.go('board', { id: tpl.boardId.get(), slug });
+
+  } else {
+    const visibility = tpl.visibility.get();
+
+    tpl.boardId.set(
+      await Meteor.callAsync('createBoardWithInitialSwimlanes', {
+        title,
+        slug,
+        permission: visibility,
+        migrationVersion: 1,
+        swimlanes: [{ title: 'Default' }],
+      }),
+    );
+
+    // Assign to space if one was selected
+    const spaceId = Session.get('createBoardInWorkspace');
+    if (spaceId) {
+      Meteor.call('assignBoardToWorkspace', tpl.boardId.get(), spaceId, (err) => {
+        if (err) console.error('Error assigning board to space:', err);
+      });
+      Session.set('createBoardInWorkspace', null); // Clear after use
+    }
+
+    FlowRouter.go('board', { id: tpl.boardId.get(), slug });
+  }
+}
+
+function createBoardEvents() {
+  return {
+    'click .js-select-visibility'(event, tpl) {
+      tpl.visibility.set(this);
+      tpl.visibilityMenuIsOpen.set(false);
+    },
+    'click .js-change-visibility'(event, tpl) {
+      tpl.visibilityMenuIsOpen.set(!tpl.visibilityMenuIsOpen.get());
+    },
+    async 'submit'(event, tpl) {
+      await createBoardSubmit(tpl, event);
+    },
+    'click .js-import-board': Popup.open('chooseBoardSource'),
+    'click .js-board-template': Popup.open('searchElement'),
+  };
+}
+
+// createBoard (non-popup version)
+Template.createBoard.onCreated(function () {
+  setupCreateBoardState(this);
+});
+
+Template.createBoard.helpers(createBoardHelpers());
+
+Template.createBoard.events(createBoardEvents());
+
+// createBoardPopup
+Template.createBoardPopup.onCreated(function () {
+  setupCreateBoardState(this);
+});
+
+Template.createBoardPopup.helpers(createBoardHelpers());
+
+Template.createBoardPopup.events(createBoardEvents());
+
+// createTemplateContainerPopup
+Template.createTemplateContainerPopup.onCreated(function () {
+  setupCreateBoardState(this);
+});
+
+Template.createTemplateContainerPopup.onRendered(function () {
+  // #5850: this dedicated popup always creates a template board.
+  Session.set('createBoardAsTemplate', true);
+});
+
+Template.createTemplateContainerPopup.helpers(createBoardHelpers());
+
+Template.createTemplateContainerPopup.events(createBoardEvents());
+
+// headerBarCreateBoardPopup
+Template.headerBarCreateBoardPopup.onCreated(function () {
+  setupCreateBoardState(this);
+});
+
+Template.headerBarCreateBoardPopup.helpers(createBoardHelpers());
+
+Template.headerBarCreateBoardPopup.events({
+  'click .js-select-visibility'(event, tpl) {
+    tpl.visibility.set(this);
+    tpl.visibilityMenuIsOpen.set(false);
  },
-}).register('boardChangeVisibilityPopup');
+  'click .js-change-visibility'(event, tpl) {
+    tpl.visibilityMenuIsOpen.set(!tpl.visibilityMenuIsOpen.get());
+  },
+  async submit(event, tpl) {
+    await createBoardSubmit(tpl, event);
+    // Immediately star boards created with the headerbar popup.
+    await ReactiveCache.getCurrentUser().toggleBoardStar(tpl.boardId.get());
+  },
+  'click .js-import-board': Popup.open('chooseBoardSource'),
+  'click .js-board-template': Popup.open('searchElement'),
+});

-BlazeComponent.extendComponent({
+Template.boardVisibilityList.helpers({
+  notAllowPrivateVisibilityOnly() {
+    return !TableVisibilityModeSettings.findOne('tableVisibilityMode-allowPrivateOnly')?.booleanValue;
+  },
+});
+
+Template.boardChangeVisibilityPopup.onCreated(function () {
+  Meteor.subscribe('tableVisibilityModeSettings');
+});
+
+Template.boardChangeVisibilityPopup.helpers({
+  notAllowPrivateVisibilityOnly(){
+    return !TableVisibilityModeSettings.findOne('tableVisibilityMode-allowPrivateOnly')?.booleanValue;
+  },
+  visibilityCheck() {
+    const currentBoard = Utils.getCurrentBoard();
+    return this === currentBoard.permission;
+  },
+});
+
+Template.boardChangeVisibilityPopup.events({
+  'click .js-select-visibility'() {
+    const currentBoard = Utils.getCurrentBoard();
+    const visibility = this;
+    if (typeof visibility === 'string') {
+      currentBoard.setVisibility(visibility);
+      Popup.back();
+    }
+  },
+});
+
+Template.boardChangeWatchPopup.helpers({
  watchLevel() {
    const currentBoard = Utils.getCurrentBoard();
    return currentBoard.getWatchLevel(Meteor.userId());
  },

  watchCheck() {
-    return this.currentData() === this.watchLevel();
+    const currentBoard = Utils.getCurrentBoard();
+    return this === currentBoard.getWatchLevel(Meteor.userId());
  },
+});

-  events() {
-    return [
-      {
-        'click .js-select-watch'() {
-          const level = this.currentData();
-          Meteor.call(
-            'watch',
-            'board',
-            Session.get('currentBoard'),
-            level,
-            (err, ret) => {
-              if (!err && ret) Popup.back();
-            },
-          );
+Template.boardChangeWatchPopup.events({
+  'click .js-select-watch'() {
+    const level = this;
+    if (typeof level === 'string') {
+      Meteor.call(
+        'watch',
+        'board',
+        Session.get('currentBoard'),
+        level,
+        (err, ret) => {
+          if (!err && ret) Popup.back();
        },
-      },
-    ];
+      );
+    }
  },
-}).register('boardChangeWatchPopup');
+});

 /*
-BlazeComponent.extendComponent({
+// BlazeComponent.extendComponent was removed - this code is unused.
+// Original listsortPopup component:
+// {
  onCreated() {
    //this.sortBy = new ReactiveVar();
    ////this.sortDirection = new ReactiveVar();
@@ -495,46 +521,40 @@ BlazeComponent.extendComponent({
      },
    ];
  },
-}).register('listsortPopup');
+// }.register('listsortPopup');
 */

-BlazeComponent.extendComponent({
-  events() {
-    return [
-      {
-        'click .js-sort-due'() {
-          const sortBy = {
-            dueAt: 1,
-          };
-          Session.set('sortBy', sortBy);
-          sortCardsBy.set(TAPi18n.__('due-date'));
-          Popup.back();
-        },
-        'click .js-sort-title'() {
-          const sortBy = {
-            title: 1,
-          };
-          Session.set('sortBy', sortBy);
-          sortCardsBy.set(TAPi18n.__('title'));
-          Popup.back();
-        },
-        'click .js-sort-created-asc'() {
-          const sortBy = {
-            createdAt: 1,
-          };
-          Session.set('sortBy', sortBy);
-          sortCardsBy.set(TAPi18n.__('date-created-newest-first'));
-          Popup.back();
-        },
-        'click .js-sort-created-desc'() {
-          const sortBy = {
-            createdAt: -1,
-          };
-          Session.set('sortBy', sortBy);
-          sortCardsBy.set(TAPi18n.__('date-created-oldest-first'));
-          Popup.back();
-        },
-      },
-    ];
+Template.cardsSortPopup.events({
+  'click .js-sort-due'() {
+    const sortBy = {
+      dueAt: 1,
+    };
+    Session.set('sortBy', sortBy);
+    sortCardsBy.set(TAPi18n.__('due-date'));
+    Popup.back();
  },
-}).register('cardsSortPopup');
+  'click .js-sort-title'() {
+    const sortBy = {
+      title: 1,
+    };
+    Session.set('sortBy', sortBy);
+    sortCardsBy.set(TAPi18n.__('title'));
+    Popup.back();
+  },
+  'click .js-sort-created-asc'() {
+    const sortBy = {
+      createdAt: 1,
+    };
+    Session.set('sortBy', sortBy);
+    sortCardsBy.set(TAPi18n.__('date-created-newest-first'));
+    Popup.back();
+  },
+  'click .js-sort-created-desc'() {
+    const sortBy = {
+      createdAt: -1,
+    };
+    Session.set('sortBy', sortBy);
+    sortCardsBy.set(TAPi18n.__('date-created-oldest-first'));
+    Popup.back();
+  },
+});
@@ -1,4 +1,4 @@
-@import url("../../../css/reset.css") print, screen;
+@import url("../../../public/css/reset.css") print, screen;

 /* Board List Header with Zoom Controls */
 .board-list-header {
@@ -16,8 +16,8 @@
 }

 .boards-left-menu {
-  border-right: 1px solid #e0e0e0;
-  padding-right: 12px;
+  border-inline-end: 1px solid #e0e0e0;
+  padding-inline-end: 12px;
 }

 .boards-left-menu ul.menu {
@@ -46,7 +46,7 @@
  border-radius: 12px;
  font-size: 12px;
  font-weight: bold;
-  margin-left: 8px;
+  margin-inline-start: 8px;
 }
 .boards-left-menu .menu-item.active a,
 .boards-left-menu .menu-item a:hover {
@@ -62,6 +62,17 @@
  border: 2px dashed #2196F3;
 }

+/* Highlight valid drop targets while a board is being dragged */
+.workspace-node.board-drag-hint > .workspace-node-content {
+  background: #e8f5e9;
+  border: 1px dashed #4CAF50;
+  border-radius: 4px;
+}
+.boards-left-menu .menu-item a.board-drag-hint {
+  background: #e8f5e9;
+  border: 1px dashed #4CAF50;
+}
+
 .workspaces-header {
  display: flex;
  align-items: center;
@@ -69,17 +80,19 @@
  font-weight: bold;
  margin-top: 12px;
 }
-.workspaces-header .js-add-space {
+.workspaces-header .js-add-space,
+.workspaces-header .js-add-workspace {
  text-decoration: none;
  font-weight: bold;
-  border: 1px solid #ccc;
+  border: none;
  padding: 2px 8px;
  border-radius: 4px;
+  margin-inline-end: 10px;
 }

 .workspace-tree {
  list-style: none;
-  padding-left: 10px;
+  padding-inline-start: 10px;
 }

 .workspace-node {
@@ -130,8 +143,23 @@
 }

 .workspace-node .workspace-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
  font-size: 16px;
  line-height: 1;
+  vertical-align: middle;
+}
+
+.workspace-node .workspace-icon .workspace-icon-value,
+.workspace-node .workspace-icon .workspace-icon-value p {
+  display: inline;
+  margin: 0;
+  margin-top: 12px;
+}
+
+.workspace-node .workspace-icon .emoji-icon {
+  margin-top: 0px;
 }

 .workspace-node .workspace-name {
@@ -165,6 +193,55 @@
  background: #e0e0e0;
 }

+.workspace-node .js-open-workspace-menu {
+  padding: 2px 6px;
+  border-radius: 3px;
+  cursor: pointer;
+  text-decoration: none;
+  font-size: 14px;
+  opacity: 0.7;
+  transition: opacity 0.2s;
+}
+
+.workspace-node .js-open-workspace-menu:hover {
+  opacity: 1;
+  background: #e0e0e0;
+}
+
+.workspace-actions-form label,
+.workspace-subspace-form label {
+  display: block;
+  font-weight: 600;
+  margin-bottom: 8px;
+}
+
+.workspace-actions-form input[type='text'],
+.workspace-subspace-form input[type='text'] {
+  width: 100%;
+  margin-top: 4px;
+}
+
+.workspace-actions-form .workspace-color-label {
+  margin-bottom: 6px;
+}
+
+.workspace-actions-form .workspace-color-list {
+  margin-bottom: 10px;
+}
+
+.workspace-delete-block {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.workspace-delete-confirm {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-weight: 600;
+}
+
 .workspace-node.active > .workspace-node-content .js-select-space,
 .workspace-node > .workspace-node-content:hover .js-select-space {
  background: #f0f0f0;
@@ -268,7 +345,7 @@
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
-  margin-left: 10px; /* Extra space between MultiSelection toggle and Remove Filter */
+  margin-inline-start: 10px; /* Extra space between MultiSelection toggle and Remove Filter */
 }

 .boards-path-header .board-header-btn-close:hover {
@@ -352,7 +429,7 @@
  margin: 0 8px;
 }
 .board-list li {
-  float: left;
+  float: inline-start;
  width: 20%;
  box-sizing: border-box;
  position: relative;
@@ -456,7 +533,7 @@
  opacity: 0;
  padding: 9px 9px;
  position: absolute;
-  right: 0;
+  inset-inline-end: 0;
  transition-duration: 0.15s;
  transition-property: color, font-size, background;
 }
@@ -467,7 +544,7 @@
  line-height: 10px;
  padding: 9px 9px;
  position: absolute;
-  right: 0;
+  inset-inline-end: 0;
  transition-duration: 0.15s;
  transition-property: color, font-size, background;
 }
@@ -487,7 +564,7 @@
  height: 18px;
  line-height: 18px;
  opacity: 0;
-  right: 0;
+  inset-inline-end: 0;
  padding: 9px 9px;
  transition-duration: 0.15s;
  transition-property: color, font-size, background;
@@ -499,7 +576,7 @@
  height: 18px;
  line-height: 18px;
  opacity: 0;
-  left: 0;
+  inset-inline-start: 0;
  padding: 9px 9px;
  transition-duration: 0.15s;
  transition-property: color, font-size, background;
@@ -565,7 +642,7 @@
 .board-list .board-list-item .multi-selection-checkbox {
  position: absolute !important;
  bottom: 4px !important;
-  left: 4px !important;
+  inset-inline-start: 4px !important;
  top: auto !important;
  width: 24px;
  height: 24px;
@@ -596,7 +673,7 @@
  width: 24px !important;
  height: 24px !important;
  top: auto !important;
-  left: 4px !important;
+  inset-inline-start: 4px !important;
  transform: none !important;
  border-radius: 4px !important;
 }
@@ -634,7 +711,7 @@ body.grey-icons-enabled .board-list.is-multiselection-active .js-board.is-checke
 .board-backgrounds-list .board-background-select {
  box-sizing: border-box;
  display: block;
-  float: left;
+  float: inline-start;
  width: 50%;
  padding-top: 12px;
  position: relative;
@@ -644,10 +721,10 @@ body.grey-icons-enabled .board-list.is-multiselection-active .js-board.is-checke
  padding-top: 0;
 }
 .board-backgrounds-list .board-background-select:nth-child(2n) {
-  padding-left: 6px;
+  padding-inline-start: 6px;
 }
 .board-backgrounds-list .board-background-select:nth-child(2n+1) {
-  padding-right: 6px;
+  padding-inline-end: 6px;
 }
 .board-backgrounds-list .board-background-select .background-box {
  color: #fff;
@@ -692,32 +769,32 @@ body.grey-icons-enabled .checkmark-no-grey {
  float: none;
  display: block;
  margin-bottom: 1rem;
-  padding-right: 50px; /* Space for drag handle */
+  padding-inline-end: 50px; /* Space for drag handle */
 }
 .board-list.mobile-view .board-list-item {
  overflow: visible;
  height: 8rem;
  width: 100%;
  margin: 0;
-  padding-right: 50px; /* Ensure content doesn't overlap with drag handle */
+  padding-inline-end: 50px; /* Ensure content doesn't overlap with drag handle */
 }

 .board-list.mobile-view .board-list-item .details {
-  padding-right: 50px; /* Extra space for drag handle */
+  padding-inline-end: 50px; /* Extra space for drag handle */
  width: 100%;
  box-sizing: border-box;
 }
 .board-list.mobile-view .board-list-item-sub-name {
  position: relative;
  top: -100px;
-  left: -100px;
+  inset-inline-start: -100px;
 }
 .board-list.mobile-view .board-handle {
  position: absolute;
  padding: 7px;
  top: 50%;
  transform: translateY(-50%);
-  right: 10px;
+  inset-inline-end: 10px;
  font-size: 24px;
  color: #fff;
  background: rgba(0,0,0,0.3);
@@ -801,32 +878,32 @@ body.grey-icons-enabled .checkmark-no-grey {
    float: none;
    display: block;
    margin-bottom: 1rem;
-    padding-right: 50px; /* Space for drag handle */
+    padding-inline-end: 50px; /* Space for drag handle */
  }
  .board-list .board-list-item {
    overflow: visible;
    height: 8rem;
    width: 100%;
    margin: 0;
-    padding-right: 50px; /* Ensure content doesn't overlap with drag handle */
+    padding-inline-end: 50px; /* Ensure content doesn't overlap with drag handle */
  }

  .board-list .board-list-item .details {
-    padding-right: 50px; /* Extra space for drag handle */
+    padding-inline-end: 50px; /* Extra space for drag handle */
    width: 100%;
    box-sizing: border-box;
  }
  .board-list .board-list-item-sub-name {
    position: relative;
    top: -100px;
-    left: -100px;
+    inset-inline-start: -100px;
  }
  .board-list .board-handle {
    position: absolute;
    padding: 7px;
    top: 50%;
    transform: translateY(-50%);
-    right: 10px;
+    inset-inline-end: 10px;
    font-size: 24px;
    color: #fff;
    background: rgba(0,0,0,0.3);
@@ -856,7 +933,7 @@ body.grey-icons-enabled .checkmark-no-grey {
    padding: 7px;
    top: 50%;
    transform: translateY(-50%);
-    right: 10px;
+    inset-inline-end: 10px;
    font-size: 24px;
    color: #fff;
    background: rgba(0,0,0,0.3);
@@ -884,6 +961,22 @@ body.grey-icons-enabled .checkmark-no-grey {
    font-size: inherit !important; /* Inherit the 2x scaling */
  }

+  /* Stack the two-column All Boards layout on small screens. The fixed
+     "260px 1fr" grid had no mobile collapse, so on narrow non-iPhone browsers
+     (Fairphone Firefox ESR / Ubuntu Touch Morph, narrow desktop) it overflowed
+     and the left menu (Starred / Templates / Remaining / Workspaces / + Add
+     board) was clipped. Width-based, so it applies to every browser. */
+  .boards-layout {
+    grid-template-columns: 1fr !important;
+  }
+
+  .boards-left-menu {
+    border-inline-end: none !important;
+    border-bottom: 1px solid #e0e0e0;
+    padding-inline-end: 0 !important;
+    padding-bottom: 12px;
+  }
+
  .wrapper .fa, .wrapper .icon {
    font-size: 2em !important; /* 2x bigger icons */
  }
@@ -1064,7 +1157,7 @@ body.grey-icons-enabled .checkmark-no-grey {
    padding: 10px !important;
    top: 50%;
    transform: translateY(-50%);
-    right: 15px !important;
+    inset-inline-end: 15px !important;
    font-size: 28px !important; /* Much larger drag handle */
    color: #fff;
    background: rgba(0,0,0,0.4) !important;
@@ -1128,13 +1221,13 @@ body.grey-icons-enabled .checkmark-no-grey {
 .AllBoardTeams,
 .AllBoardOrgs,
 .AllBoardBtns {
-  float: left;
+  float: inline-start;
 }
 .js-AllBoardOrgs {
-  margin-left: 16px;
+  margin-inline-start: 16px;
 }
 .AllBoardTeams {
-  margin-left: 16px;
+  margin-inline-start: 16px;
 }
 .AllBoardButtonsContainer {
  margin: 16px;
@@ -1203,7 +1296,7 @@ body.grey-icons-enabled .checkmark-no-grey {
  padding: 6px 0 6px 8px;
  width: 100%;
  margin-bottom: 2px;
-  margin-left: -4px;
+  margin-inline-start: -4px;
  display: inline-block;
 }
 .minicard-lists {
@@ -1219,7 +1312,7 @@ body.grey-icons-enabled .checkmark-no-grey {
 }
 .flex-wrap .item {
  margin: 2px;
-  padding-right: 6px;
+  padding-inline-end: 6px;
  text-align: center;
 }

@@ -1310,3 +1403,26 @@ body.grey-icons-enabled .checkmark-no-grey {
  }
 }

+
+/* #5157: show the board's background image on the board list tile, reusing the
+ * existing board.backgroundImageURL. A dark overlay keeps the title readable. */
+.board-list-item.has-background-image {
+  background-size: cover;
+  background-position: center;
+  position: relative;
+}
+.board-list-item.has-background-image .details,
+.board-list-item.has-background-image .board-list-item-name {
+  position: relative;
+  z-index: 1;
+  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
+  color: #fff;
+}
+.board-list-item.has-background-image::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.25);
+  border-radius: inherit;
+  z-index: 0;
+}
@@ -27,6 +27,15 @@ template(name="boardList")
                  i.fa.fa-folder
                |  {{_ 'allboards.remaining'}}
              span.menu-count {{menuItemCount 'remaining'}}
+          if isSelectedMenu 'templates'
+            if shareTargets.length
+              li.menu-section-title {{_ 'share-template-with'}}
+              each shareTargets
+                li.menu-item.js-share-target(data-share-type="{{type}}", data-share-id="{{id}}", data-share-name="{{name}}", title="{{_ 'drag-template-here-to-share'}}")
+                  span.menu-label
+                    span.emoji-icon
+                      i.fa.fa-share-alt
+                    |  {{name}}
        .workspaces-header
          span
            span.emoji-icon
@@ -95,7 +104,7 @@ template(name="boardList")
                a.board-header-btn-close.js-multiselection-reset(title="{{_ 'filter-clear'}}")
                  span.emoji-icon
                    i.fa.fa-times
-        ul.board-list.clearfix.js-boards(class="{{#if isMiniScreen}}mobile-view{{/if}} {{#if BoardMultiSelection.isActive}}is-multiselection-active{{/if}}")
+        ul.board-list.clearfix.js-boards.dragscroll(class="{{#if isMiniScreen}}mobile-view{{/if}} {{#if BoardMultiSelection.isActive}}is-multiselection-active{{/if}}")
          li.js-add-board
            if isSelectedMenu 'templates'
              a.board-list-item.label(title="{{_ 'add-template-container'}}")
@@ -130,10 +139,10 @@ template(name="boardList")
                    if BoardMultiSelection.isActive
                      .materialCheckBox.multi-selection-checkbox.js-toggle-board-multi-selection(
                        class="{{#if BoardMultiSelection.isSelected _id}}is-checked{{/if}}")
-                    span.board-handle(title="{{_ 'drag-board'}}")
+                    span.board-handle.nodragscroll(title="{{boardWorkspaceDragHint}}")
                      span.emoji-icon
                        i.fa.fa-arrows
-                    
+
                    a.js-open-board(href="{{pathFor 'board' id=_id slug=slug}}")
                      span.details
                        span.board-list-item-name(title="{{_ 'template-container'}}")
@@ -154,17 +163,19 @@ template(name="boardList")
                      span.emoji-icon
                        i.fa(class="fa-star{{#unless isStarred}}-o{{/unless}}")
                else
-                  .board-list-item
+                  //- #5157: reuse the board's existing backgroundImageURL as the
+                  //- tile background on the board list page.
+                  .board-list-item(class="{{#if backgroundImageURL}}has-background-image{{/if}}" style="{{#if backgroundImageURL}}background-image:url('{{backgroundImageURL}}');{{/if}}")
                    if BoardMultiSelection.isActive
                      .materialCheckBox.multi-selection-checkbox.js-toggle-board-multi-selection(
                        class="{{#if BoardMultiSelection.isSelected _id}}is-checked{{/if}}")
-                    span.board-handle(title="{{_ 'drag-board'}}")
+                    span.board-handle.nodragscroll(title="{{boardWorkspaceDragHint}}")
                      span.emoji-icon
                        i.fa.fa-arrows
-                    
+
                    a.js-open-board(href="{{pathFor 'board' id=_id slug=slug}}")
                      span.details
-                        span.board-list-item-name(title="{{_ 'board-drag-drop-reorder-or-click-open'}}")
+                        span.board-list-item-name(title="{{boardOpenAndMoveHint}}")
                          +viewer
                            = title
                        unless currentSetting.hideBoardMemberList
@@ -197,12 +208,18 @@ template(name="boardList")
 template(name="boardListHeaderBar")
  h1 {{_ title }}
  //.board-header-btns.right
-  //  a.board-header-btn.js-open-archived-board
-  //    i.fa.fa-archive
-  //    span {{_ 'archives'}}
-  //  a.board-header-btn(href="{{pathFor 'board' id=templatesBoardId slug=templatesBoardSlug}}")
-  //    i.fa.fa-clone
-  //    span {{_ 'templates'}}
+  //
+    a.board-header-btn.js-open-archived-board
+  //
+      i.fa.fa-archive
+  //
+      span {{_ 'archives'}}
+  //
+    a.board-header-btn(href="{{pathFor 'board' id=templatesBoardId slug=templatesBoardSlug}}")
+  //
+      i.fa.fa-clone
+  //
+      span {{_ 'templates'}}

 // Recursive template for workspaces tree
 template(name="workspaceTree")
@@ -214,20 +231,40 @@ template(name="workspaceTree")
            span.workspace-drag-handle
              span.emoji-icon
                i.fa.fa-arrows
-            
-            a.js-select-workspace(data-id="{{id}}")
+
+            a.js-select-workspace.js-select-space(data-id="{{id}}")
              span.workspace-icon
                if icon
-                  +viewer
-                    = icon
+                  span.workspace-icon-value(style="{{#if iconColor}}color: {{iconColor}};{{/if}}")
+                    +viewer
+                      = icon
                else
-                  span.emoji-icon
+                  span.emoji-icon(style="{{#if iconColor}}color: {{iconColor}};{{/if}}")
                    i.fa.fa-folder
              span.workspace-name= name
-            a.js-edit-workspace(data-id="{{id}}" title="{{_ 'allboards.edit-workspace'}}")
+            a.js-open-workspace-menu(data-id="{{id}}" title="{{_ 'allboards.workspace-menu'}}")
              span.emoji-icon
-                i.fa.fa-pencil-square-o
+                i.fa.fa-bars
            span.workspace-count {{workspaceCount id}}
-            a.js-add-subworkspace(data-id="{{id}}" title="{{_ 'allboards.add-subworkspace'}}") +
          if children
            +workspaceTree(nodes=children selectedWorkspaceId=selectedWorkspaceId)
+
+template(name="workspaceActionsPopup")
+  form.workspace-actions-form.js-workspace-actions-form(data-id="{{id}}")
+    label
+      | {{_ 'allboards.edit-workspace-name'}}
+      input.js-workspace-name(type="text" value="{{workspaceName}}" required)
+    label
+      | {{_ 'allboards.edit-workspace-icon'}}
+      input.js-workspace-icon(type="text" value="{{workspaceIcon}}")
+    input.primary.wide(type="submit" value="{{_ 'save'}}")
+  hr
+  form.workspace-subspace-form.js-workspace-subspace-form(data-id="{{id}}")
+    label
+      | {{_ 'allboards.add-subworkspace-prompt'}}
+      input.js-subworkspace-name(type="text")
+    button.primary.wide(type="submit") {{_ 'allboards.add-subworkspace'}}
+  hr
+  .workspace-delete-block
+    span.js-workspace-delete-error(style="color: #c00; display: block; margin: 4px 0;")
+    button.js-delete-workspace.negate.wide(type="button" data-id="{{id}}") {{_ 'delete'}}
@@ -0,0 +1,43 @@
+.calendar-view .fc {
+  --fc-button-text-color: #333;
+  --fc-button-bg-color: #f5f5f5;
+  --fc-button-border-color: rgba(0, 0, 0, 0.2);
+  --fc-button-hover-bg-color: #e6e6e6;
+  --fc-button-hover-border-color: rgba(0, 0, 0, 0.25);
+  --fc-button-active-bg-color: #d9d9d9;
+  --fc-button-active-border-color: rgba(0, 0, 0, 0.3);
+}
+
+.calendar-view .fc .fc-button-primary {
+  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2),
+    0 1px 2px rgba(0, 0, 0, 0.05);
+  background-image: linear-gradient(to bottom, #fff 0%, #e6e6e6 100%);
+}
+
+.calendar-view .fc .fc-button-primary:focus,
+.calendar-view .fc .fc-button-primary:not(:disabled).fc-button-active,
+.calendar-view .fc .fc-button-primary:not(:disabled):active {
+  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15),
+    0 1px 2px rgba(0, 0, 0, 0.05);
+}
+
+.calendar-create-close {
+  min-height: auto !important;
+  min-width: auto !important;
+  width: 32px;
+  height: 32px;
+  padding: 0 !important;
+  border: 0 !important;
+  background: transparent !important;
+  box-shadow: none !important;
+  color: #666 !important;
+  opacity: 0.8;
+}
+
+.calendar-create-close:hover,
+.calendar-create-close:focus {
+  background: transparent !important;
+  color: #111 !important;
+  opacity: 1;
+}
@@ -0,0 +1,129 @@
+.dependency-overlay {
+  position: absolute;
+  top: 0;
+  inset-inline-start: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  z-index: 100;
+  overflow: visible;
+}
+
+/* #3392: the overlay SVG stays click-through, but each line is clickable (to
+   open the edit/delete popup) even though its container is pointer-events:none. */
+.dependency-line {
+  pointer-events: stroke;
+  cursor: pointer;
+}
+
+.dependency-temp-line {
+  pointer-events: none;
+}
+
+/* #3392: drag-to-connect handle on the minicard (no mode — cards stay
+   clickable). Shown on hover; drag it onto another card to create a link. */
+.minicard .dependency-connect-handle {
+  position: absolute;
+  top: 50%;
+  inset-inline-end: -7px;
+  right: -7px;
+  transform: translateY(-50%);
+  width: 18px;
+  height: 18px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #eb144c;
+  background: #fff;
+  border-radius: 50%;
+  box-shadow: 0 0 2px rgba(0, 0, 0, 0.4);
+  cursor: crosshair;
+  opacity: 0;
+  z-index: 101;
+}
+
+.minicard:hover .dependency-connect-handle {
+  opacity: 1;
+}
+
+.dependency-line-popup .dependency-field {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  margin-bottom: 6px;
+}
+
+.dependency-line-popup .card-dependency-icons li a.is-selected {
+  border-color: #eb144c;
+  border-width: 2px;
+}
+
+.dependency-line-delete {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  color: #eb144c;
+}
+
+/* #3392: card detail "Dependencies" rows */
+.card-details-dependencies-list .card-dependency {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-bottom: 4px;
+}
+
+.card-details-dependencies-list .card-dependency-link {
+  flex: 1 1 auto;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.card-details-dependencies-list .js-dependency-type {
+  flex: 0 0 auto;
+  max-width: 130px;
+}
+
+.card-details-dependencies-list .js-dependency-color {
+  flex: 0 0 auto;
+  width: 28px;
+  height: 24px;
+  padding: 0;
+  border: none;
+  background: none;
+  cursor: pointer;
+}
+
+.card-dependencies-popup .dependency-field {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  margin-bottom: 6px;
+}
+
+.card-dependency-icons {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  list-style: none;
+  margin: 0;
+  padding: 4px;
+}
+
+.card-dependency-icons li a {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+}
+
+.minicard .badge.minicard-dependencies .badge-icon {
+  font-weight: bold;
+}
@@ -0,0 +1,35 @@
+template(name="dependencyOverlay")
+  svg.dependency-overlay.js-dependency-overlay(xmlns="http://www.w3.org/2000/svg")
+    defs
+      each dependencyMarkers
+        marker(id="{{markerId}}" markerWidth="8" markerHeight="8" refX="7" refY="3" orient="auto" markerUnits="userSpaceOnUse")
+          path(d="M0,0 L7,3 L0,6 Z" fill="{{color}}")
+    each dependencyLines
+      path.dependency-line(d="{{path}}" fill="none" stroke="{{color}}" stroke-width="2" marker-end="{{markerUrl}}")
+    if tempLine
+      path.dependency-temp-line(d="{{tempLine}}" fill="none" stroke="#eb144c" stroke-width="2" stroke-dasharray="6,4")
+
+template(name="dependencyLinePopup")
+  .dependency-line-popup
+    label.dependency-field
+      span {{_ 'dependency-type'}}
+      select.js-line-type
+        each typeOption
+          if selected
+            option(value="{{id}}" selected="selected") {{_ label}}
+          else
+            option(value="{{id}}") {{_ label}}
+    label.dependency-field
+      span {{_ 'dependency-color'}}
+      input.js-line-color(type="color" value="{{color}}")
+    .dependency-field
+      span {{_ 'dependency-icon'}}
+    ul.card-dependency-icons
+      each dependencyIcons
+        li
+          a.js-line-icon(data-icon="{{name}}" title="{{name}}" class="{{#if selected}}is-selected{{/if}}")
+            i.fa(class="fa-{{name}}")
+    hr
+    a.js-line-delete.dependency-line-delete
+      i.fa.fa-times
+      | {{_ 'remove-dependency'}}
@@ -0,0 +1,300 @@
+import { ReactiveCache } from '/imports/reactiveCache';
+import { ReactiveVar } from 'meteor/reactive-var';
+import { Utils } from '/client/lib/utils';
+import {
+  DEPENDENCY_ICON_CHOICES,
+  DEPENDENCY_TYPES,
+  dependencyTypeMeta,
+  normalizeDependencies,
+} from '/models/metadata/dependencies';
+
+// #3392: PI Program Board "Red Strings".
+// Draw colored, typed connection lines (SVG paths) between cards that declare
+// cardDependencies. The board stays fully usable (cards clickable) — drawing a
+// new link is initiated from a small connect handle on each minicard (drag it
+// onto another card, piplanning.io / Kendis / Miro style), and a link can be
+// edited/deleted by clicking its line. The overlay SVG itself stays
+// pointer-events:none; only the lines (and the minicard handles) capture events.
+//
+// Coordinates are computed from the live DOM (getBoundingClientRect of
+// [data-card-id] minicards) translated into the overlay SVG's own coordinate
+// space, so scrolling/resizing is handled by recomputing relative to the SVG's
+// current bounding rect.
+
+// Stable, css-safe marker id for an arrowhead of a given color.
+function markerIdForColor(color) {
+  return `dependency-arrowhead-${String(color).replace(/[^a-zA-Z0-9]/g, '')}`;
+}
+
+Template.dependencyOverlay.onCreated(function () {
+  this.lines = new ReactiveVar([]);
+  this.markers = new ReactiveVar([]);
+  this.tempLine = new ReactiveVar(null); // line being drawn while dragging
+  // Guard against deferred (rAF / setTimeout) callbacks touching the DOM after
+  // the overlay is destroyed ("Can't select in removed DomRange").
+  this._overlayDestroyed = false;
+
+  // Rect of a card relative to the overlay SVG, or null if not rendered.
+  this.rectOf = (cardId, svgRect) => {
+    const el = document.querySelector(`[data-card-id="${cardId}"]`);
+    if (!el) return null;
+    const r = el.getBoundingClientRect();
+    if (r.width === 0 && r.height === 0) return null;
+    return { x: r.left - svgRect.left, y: r.top - svgRect.top, w: r.width, h: r.height };
+  };
+
+  this.recompute = () => {
+    if (this._overlayDestroyed || !this.view || this.view.isDestroyed) {
+      return;
+    }
+    const svg = this.find('.js-dependency-overlay');
+    if (!svg) {
+      return;
+    }
+    const board = Utils.getCurrentBoard();
+    if (!board) {
+      this.lines.set([]);
+      return;
+    }
+
+    const svgRect = svg.getBoundingClientRect();
+    const centerOf = cardId => this.rectOf(cardId, svgRect);
+
+    const cards = ReactiveCache.getCards({
+      boardId: board._id,
+      archived: false,
+    });
+
+    const lines = [];
+    const markerColors = new Set();
+    cards.forEach(card => {
+      const deps = normalizeDependencies(card.cardDependencies);
+      if (deps.length === 0) {
+        return;
+      }
+      const sourceRect = centerOf(card._id);
+      if (!sourceRect) {
+        return;
+      }
+      deps.forEach(dep => {
+        const targetRect = centerOf(dep.cardId);
+        if (!targetRect) {
+          return;
+        }
+        const meta = dependencyTypeMeta(dep.type);
+        // Draw the arrow from the prerequisite card's right edge to the
+        // dependent card's left edge. For forward relations (blocks/fixes/
+        // related-to) the source card is the prerequisite; for the reverse
+        // relations (is-blocked-by/is-fixed-by) the target is.
+        const prereq = meta.forward ? sourceRect : targetRect;
+        const dependent = meta.forward ? targetRect : sourceRect;
+        const x1 = prereq.x + prereq.w;
+        const y1 = prereq.y + prereq.h / 2;
+        const x2 = dependent.x;
+        const y2 = dependent.y + dependent.h / 2;
+        const dx = Math.max(40, Math.abs(x2 - x1) / 2);
+        const path = `M ${x1} ${y1} C ${x1 + dx} ${y1}, ${x2 - dx} ${y2}, ${x2} ${y2}`;
+        const markerId = markerIdForColor(dep.color);
+        if (meta.directed) {
+          markerColors.add(dep.color);
+        }
+        lines.push({
+          path,
+          color: dep.color,
+          type: dep.type,
+          icon: dep.icon,
+          directed: meta.directed,
+          markerId: meta.directed ? markerId : '',
+          // Source card (owns the dependency) and target card.
+          fromId: card._id,
+          toId: dep.cardId,
+        });
+      });
+    });
+    this.lines.set(lines);
+    this.markers.set(
+      [...markerColors].map(color => ({
+        color,
+        markerId: markerIdForColor(color),
+      })),
+    );
+  };
+
+  this.scheduleRecompute = () => {
+    if (this._overlayDestroyed) return;
+    if (this._raf) {
+      window.cancelAnimationFrame(this._raf);
+    }
+    this._raf = window.requestAnimationFrame(() => {
+      this._raf = null;
+      this.recompute();
+    });
+  };
+});
+
+Template.dependencyOverlay.onRendered(function () {
+  const instance = this;
+  const svg = this.find('.js-dependency-overlay');
+  this.scrollEl = svg ? this.firstNode.closest('.board-canvas') : null;
+
+  this.autorun(() => {
+    const board = Utils.getCurrentBoard();
+    if (board) {
+      ReactiveCache.getCards({ boardId: board._id, archived: false });
+    }
+    instance.scheduleRecompute();
+  });
+
+  this.onScroll = () => instance.scheduleRecompute();
+  this.onResize = () => instance.scheduleRecompute();
+
+  if (this.scrollEl) {
+    this.scrollEl.addEventListener('scroll', this.onScroll, { passive: true });
+  }
+  window.addEventListener('scroll', this.onScroll, { passive: true });
+  window.addEventListener('resize', this.onResize);
+
+  // --- drag-to-connect (from a minicard's connect handle) -----------------
+  // Find the card under a viewport point. The overlay is pointer-events:none,
+  // so elementsFromPoint returns the minicards directly.
+  const cardIdAtPoint = (clientX, clientY) => {
+    const els = document.elementsFromPoint(clientX, clientY);
+    for (const el of els) {
+      if (svg && svg.contains(el)) continue;
+      const card = el.closest && el.closest('[data-card-id]');
+      if (card) return card.getAttribute('data-card-id');
+    }
+    return null;
+  };
+
+  this.onMouseDown = e => {
+    if (e.button !== 0) return;
+    const handle =
+      e.target.closest && e.target.closest('.js-dependency-connect-handle');
+    if (!handle) return;
+    const cardEl = handle.closest('[data-card-id]');
+    if (!cardEl) return;
+    // Beat the card drag-sort: capture-phase + stop propagation.
+    e.preventDefault();
+    e.stopPropagation();
+    instance.dragSourceId = cardEl.getAttribute('data-card-id');
+  };
+
+  this.onMouseMove = e => {
+    if (!instance.dragSourceId || !svg) return;
+    const svgRect = svg.getBoundingClientRect();
+    const from = instance.rectOf(instance.dragSourceId, svgRect);
+    if (!from) return;
+    const x1 = from.x + from.w;
+    const y1 = from.y + from.h / 2;
+    const x2 = e.clientX - svgRect.left;
+    const y2 = e.clientY - svgRect.top;
+    const dx = Math.max(40, Math.abs(x2 - x1) / 2);
+    instance.tempLine.set(
+      `M ${x1} ${y1} C ${x1 + dx} ${y1}, ${x2 - dx} ${y2}, ${x2} ${y2}`,
+    );
+  };
+
+  this.onMouseUp = e => {
+    if (!instance.dragSourceId) return;
+    const sourceId = instance.dragSourceId;
+    instance.dragSourceId = null;
+    instance.tempLine.set(null);
+    const targetId = cardIdAtPoint(e.clientX, e.clientY);
+    if (targetId && targetId !== sourceId) {
+      const card = ReactiveCache.getCard(sourceId);
+      if (card && typeof card.addDependency === 'function') {
+        card.addDependency(targetId);
+      }
+    }
+  };
+
+  // Capture phase so the connect drag starts before the sortable grabs the card.
+  document.addEventListener('mousedown', this.onMouseDown, true);
+  document.addEventListener('mousemove', this.onMouseMove);
+  document.addEventListener('mouseup', this.onMouseUp);
+
+  this._initTimeout = Meteor.setTimeout(() => instance.scheduleRecompute(), 300);
+});
+
+Template.dependencyOverlay.onDestroyed(function () {
+  this._overlayDestroyed = true;
+  if (this.scrollEl) {
+    this.scrollEl.removeEventListener('scroll', this.onScroll);
+  }
+  window.removeEventListener('scroll', this.onScroll);
+  window.removeEventListener('resize', this.onResize);
+  if (this.onMouseDown) document.removeEventListener('mousedown', this.onMouseDown, true);
+  if (this.onMouseMove) document.removeEventListener('mousemove', this.onMouseMove);
+  if (this.onMouseUp) document.removeEventListener('mouseup', this.onMouseUp);
+  if (this._raf) {
+    window.cancelAnimationFrame(this._raf);
+  }
+  if (this._initTimeout) {
+    Meteor.clearTimeout(this._initTimeout);
+  }
+});
+
+Template.dependencyOverlay.helpers({
+  dependencyLines() {
+    return Template.instance().lines.get();
+  },
+  dependencyMarkers() {
+    return Template.instance().markers.get();
+  },
+  tempLine() {
+    return Template.instance().tempLine.get();
+  },
+  markerUrl() {
+    return this.markerId ? `url(#${this.markerId})` : '';
+  },
+});
+
+Template.dependencyOverlay.events({
+  'click .dependency-line'(event) {
+    event.preventDefault();
+    event.stopPropagation();
+    // `this` is the line data object (fromId/toId/type/color/icon).
+    Popup.open('dependencyLine').call(this, event);
+  },
+});
+
+// #3392: popup to edit or delete an on-board dependency line. Data context is the
+// line object { fromId, toId, type, color, icon }.
+Template.dependencyLinePopup.helpers({
+  typeOption() {
+    const current = this.type;
+    return DEPENDENCY_TYPES.map(t => ({
+      id: t.id,
+      label: `dependency-type-${t.id}`,
+      selected: t.id === current,
+    }));
+  },
+  color() {
+    return this.color;
+  },
+  dependencyIcons() {
+    const current = this.icon;
+    return DEPENDENCY_ICON_CHOICES.map(name => ({ name, selected: name === current }));
+  },
+});
+
+Template.dependencyLinePopup.events({
+  'change .js-line-type'(event) {
+    const card = ReactiveCache.getCard(this.fromId);
+    if (card) card.setDependencyProps(this.toId, { type: event.currentTarget.value });
+  },
+  'change .js-line-color'(event) {
+    const card = ReactiveCache.getCard(this.fromId);
+    if (card) card.setDependencyProps(this.toId, { color: event.currentTarget.value });
+  },
+  'click .js-line-icon'(event) {
+    const card = ReactiveCache.getCard(this.fromId);
+    if (card) card.setDependencyProps(this.toId, { icon: event.currentTarget.dataset.icon });
+  },
+  'click .js-line-delete'() {
+    const card = ReactiveCache.getCard(this.fromId);
+    if (card) card.removeDependency(this.toId);
+    Popup.back();
+  },
+});
@@ -35,7 +35,7 @@
 }

 .original-positions-loading i {
-  margin-right: 8px;
+  margin-inline-end: 8px;
 }

 .original-positions-filters {
@@ -117,7 +117,7 @@
 }

 .original-position-item-details {
-  margin-left: 24px;
+  margin-inline-start: 24px;
 }

 .original-position-description {
@@ -164,34 +164,34 @@
    margin: 5px 0;
    padding: 10px;
  }
-  
+
  .original-positions-header {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
-  
+
  .original-positions-header .btn {
    justify-content: center;
  }
-  
+
  .original-positions-filters .btn-group {
    justify-content: center;
  }
-  
+
  .original-position-item-header {
    flex-wrap: wrap;
    gap: 6px;
  }
-  
+
  .entity-name {
    flex: 1;
    min-width: 0;
    word-break: break-word;
  }
-  
+
  .original-position-item-details {
-    margin-left: 0;
+    margin-inline-start: 0;
    margin-top: 8px;
  }
 }
@@ -203,60 +203,60 @@
    border-color: #4a5568;
    color: #e2e8f0;
  }
-  
+
  .original-positions-content {
    background-color: #1a202c;
    border-color: #4a5568;
  }
-  
+
  .original-position-item {
    background-color: #2d3748;
    border-color: #4a5568;
    color: #e2e8f0;
  }
-  
+
  .original-position-item:hover {
    background-color: #4a5568;
    border-color: #718096;
  }
-  
+
  .original-position-item-header {
    color: #e2e8f0;
  }
-  
+
  .original-position-item-header i {
    color: #a0aec0;
  }
-  
+
  .entity-name {
    color: #e2e8f0;
  }
-  
+
  .entity-id {
    color: #a0aec0;
  }
-  
+
  .original-position-description {
    color: #e2e8f0;
  }
-  
+
  .original-title {
    background-color: #4a5568;
    color: #a0aec0;
  }
-  
+
  .original-title strong {
    color: #e2e8f0;
  }
-  
+
  .original-position-date {
    color: #a0aec0;
  }
-  
+
  .no-original-positions {
    color: #a0aec0;
  }
-  
+
  .no-original-positions i {
    color: #718096;
  }
@@ -1,82 +0,0 @@
-<template name="originalPositionsView">
-  <div class="original-positions-view">
-    <div class="original-positions-header">
-      <button class="btn btn-sm btn-outline-secondary" onclick="{{toggleOriginalPositions}}">
-        <i class="fa fa-history"></i>
-        {{#if isShowingOriginalPositions}}Hide{{else}}Show{{/if}} Original Positions
-      </button>
-      
-      {{#if isShowingOriginalPositions}}
-        <button class="btn btn-sm btn-outline-primary" onclick="{{refreshHistory}}">
-          <i class="fa fa-refresh"></i> Refresh
-        </button>
-      {{/if}}
-    </div>
-
-    {{#if isShowingOriginalPositions}}
-      <div class="original-positions-content">
-        {{#if isLoading}}
-          <div class="original-positions-loading">
-            <i class="fa fa-spinner fa-spin"></i> Loading original positions...
-          </div>
-        {{else}}
-          <div class="original-positions-filters">
-            <div class="btn-group btn-group-sm" role="group">
-              <button type="button" 
-                      class="btn {{#if isFilterType 'all'}}btn-primary{{else}}btn-outline-secondary{{/if}}"
-                      onclick="{{setFilterType 'all'}}">
-                All
-              </button>
-              <button type="button" 
-                      class="btn {{#if isFilterType 'swimlane'}}btn-primary{{else}}btn-outline-secondary{{/if}}"
-                      onclick="{{setFilterType 'swimlane'}}">
-                <i class="fa fa-bars"></i> Swimlanes
-              </button>
-              <button type="button" 
-                      class="btn {{#if isFilterType 'list'}}btn-primary{{else}}btn-outline-secondary{{/if}}"
-                      onclick="{{setFilterType 'list'}}">
-                <i class="fa fa-columns"></i> Lists
-              </button>
-              <button type="button" 
-                      class="btn {{#if isFilterType 'card'}}btn-primary{{else}}btn-outline-secondary{{/if}}"
-                      onclick="{{setFilterType 'card'}}">
-                <i class="fa fa-sticky-note"></i> Cards
-              </button>
-            </div>
-          </div>
-
-          <div class="original-positions-list">
-            {{#each getFilteredHistory}}
-              <div class="original-position-item">
-                <div class="original-position-item-header">
-                  <i class="fa {{getEntityTypeIcon entityType}}"></i>
-                  <span class="entity-type">{{getEntityTypeLabel entityType}}</span>
-                  <span class="entity-name">{{getEntityDisplayName this}}</span>
-                  <span class="entity-id">({{entityId}})</span>
-                </div>
-                <div class="original-position-item-details">
-                  <div class="original-position-description">
-                    {{getEntityOriginalPositionDescription this}}
-                  </div>
-                  {{#if originalTitle}}
-                    <div class="original-title">
-                      <strong>Original title:</strong> {{originalTitle}}
-                    </div>
-                  {{/if}}
-                  <div class="original-position-date">
-                    <small class="text-muted">Created: {{formatDate createdAt}}</small>
-                  </div>
-                </div>
-              </div>
-            {{else}}
-              <div class="no-original-positions">
-                <i class="fa fa-info-circle"></i>
-                No original position data available for this board.
-              </div>
-            {{/each}}
-          </div>
-        {{/if}}
-      </div>
-    {{/if}}
-  </div>
-</template>
@@ -0,0 +1,57 @@
+template(name="originalPositionsView")
+  .original-positions-view
+    .original-positions-header
+      button.btn.btn-sm.btn-outline-secondary.js-toggle-original-positions
+        i.fa.fa-history
+        if isShowingOriginalPositions
+          | Hide Original Positions
+        else
+          | Show Original Positions
+
+      if isShowingOriginalPositions
+        button.btn.btn-sm.btn-outline-primary.js-refresh-history
+          i.fa.fa-refresh
+          |  Refresh
+
+    if isShowingOriginalPositions
+      .original-positions-content
+        if isLoading
+          .original-positions-loading
+            i.fa.fa-spinner.fa-spin
+            |  Loading original positions...
+        else
+          .original-positions-filters
+            .btn-group.btn-group-sm(role="group")
+              button.btn.js-filter-type(type="button" class="{{#if isFilterType 'all'}}btn-primary{{else}}btn-outline-secondary{{/if}}" data-filter-type="all")
+                | All
+              button.btn.js-filter-type(type="button" class="{{#if isFilterType 'swimlane'}}btn-primary{{else}}btn-outline-secondary{{/if}}" data-filter-type="swimlane")
+                i.fa.fa-bars
+                |  Swimlanes
+              button.btn.js-filter-type(type="button" class="{{#if isFilterType 'list'}}btn-primary{{else}}btn-outline-secondary{{/if}}" data-filter-type="list")
+                i.fa.fa-columns
+                |  Lists
+              button.btn.js-filter-type(type="button" class="{{#if isFilterType 'card'}}btn-primary{{else}}btn-outline-secondary{{/if}}" data-filter-type="card")
+                i.fa.fa-sticky-note
+                |  Cards
+
+          .original-positions-list
+            each getFilteredHistory
+              .original-position-item
+                .original-position-item-header
+                  i.fa(class="{{getEntityTypeIcon entityType}}")
+                  span.entity-type {{getEntityTypeLabel entityType}}
+                  span.entity-name {{getEntityDisplayName this}}
+                  span.entity-id ({{entityId}})
+                .original-position-item-details
+                  .original-position-description
+                    | {{getEntityOriginalPositionDescription this}}
+                  if originalTitle
+                    .original-title
+                      strong Original title:
+                      |  {{originalTitle}}
+                  .original-position-date
+                    small.text-muted Created: {{formatDate createdAt}}
+            else
+              .no-original-positions
+                i.fa.fa-info-circle
+                |  No original position data available for this board.
@@ -1,99 +1,78 @@
-import { BlazeComponent } from 'meteor/peerlibrary:blaze-components';
 import { ReactiveVar } from 'meteor/reactive-var';
 import { Meteor } from 'meteor/meteor';
-import { Template } from 'meteor/templating';
-import './originalPositionsView.html';

 /**
 * Component to display original positions for all entities on a board
 */
-class OriginalPositionsViewComponent extends BlazeComponent {
-  onCreated() {
-    super.onCreated();
-    this.showOriginalPositions = new ReactiveVar(false);
-    this.boardHistory = new ReactiveVar([]);
-    this.isLoading = new ReactiveVar(false);
-    this.filterType = new ReactiveVar('all'); // 'all', 'swimlane', 'list', 'card'
-  }

-  onRendered() {
-    super.onRendered();
-    this.loadBoardHistory();
-  }
+Template.originalPositionsView.onCreated(function () {
+  this.showOriginalPositions = new ReactiveVar(false);
+  this.boardHistory = new ReactiveVar([]);
+  this.isLoading = new ReactiveVar(false);
+  this.filterType = new ReactiveVar('all'); // 'all', 'swimlane', 'list', 'card'

-  loadBoardHistory() {
+  const tpl = this;
+
+  this.loadBoardHistory = function () {
    const boardId = Session.get('currentBoard');
    if (!boardId) return;

-    this.isLoading.set(true);
-    
+    tpl.isLoading.set(true);
+
    Meteor.call('positionHistory.getBoardHistory', boardId, (error, result) => {
-      this.isLoading.set(false);
+      tpl.isLoading.set(false);
      if (error) {
        console.error('Error loading board history:', error);
-        this.boardHistory.set([]);
+        tpl.boardHistory.set([]);
      } else {
-        this.boardHistory.set(result);
+        tpl.boardHistory.set(result);
      }
    });
-  }
+  };
+});

-  toggleOriginalPositions() {
-    this.showOriginalPositions.set(!this.showOriginalPositions.get());
-  }
+Template.originalPositionsView.onRendered(function () {
+  this.loadBoardHistory();
+});

+Template.originalPositionsView.helpers({
  isShowingOriginalPositions() {
-    return this.showOriginalPositions.get();
-  }
+    return Template.instance().showOriginalPositions.get();
+  },

  isLoading() {
-    return this.isLoading.get();
-  }
+    return Template.instance().isLoading.get();
+  },

  getBoardHistory() {
-    return this.boardHistory.get();
-  }
+    return Template.instance().boardHistory.get();
+  },

  getFilteredHistory() {
-    const history = this.getBoardHistory();
-    const filterType = this.filterType.get();
-    
+    const tpl = Template.instance();
+    const history = tpl.boardHistory.get();
+    const filterType = tpl.filterType.get();
+
    if (filterType === 'all') {
      return history;
    }
-    
+
    return history.filter(item => item.entityType === filterType);
-  }
+  },

-  getSwimlanesHistory() {
-    return this.getBoardHistory().filter(item => item.entityType === 'swimlane');
-  }
-
-  getListsHistory() {
-    return this.getBoardHistory().filter(item => item.entityType === 'list');
-  }
-
-  getCardsHistory() {
-    return this.getBoardHistory().filter(item => item.entityType === 'card');
-  }
-
-  setFilterType(type) {
-    this.filterType.set(type);
-  }
-
-  getFilterType() {
-    return this.filterType.get();
-  }
+  isFilterType(type) {
+    return Template.instance().filterType.get() === type;
+  },

  getEntityDisplayName(entity) {
    const position = entity.originalPosition || {};
    return position.title || `Entity ${entity.entityId}`;
-  }
+  },

  getEntityOriginalPositionDescription(entity) {
    const position = entity.originalPosition || {};
    let description = `Position: ${position.sort || 0}`;
-    
+
    if (entity.entityType === 'list' && entity.originalSwimlaneId) {
      description += ` in swimlane ${entity.originalSwimlaneId}`;
    } else if (entity.entityType === 'card') {
@@ -104,9 +83,9 @@ class OriginalPositionsViewComponent extends BlazeComponent {
        description += ` in list ${entity.originalListId}`;
      }
    }
-    
+
    return description;
-  }
+  },

  getEntityTypeIcon(entityType) {
    switch (entityType) {
@@ -119,7 +98,7 @@ class OriginalPositionsViewComponent extends BlazeComponent {
      default:
        return 'fa-question';
    }
-  }
+  },

  getEntityTypeLabel(entityType) {
    switch (entityType) {
@@ -132,17 +111,24 @@ class OriginalPositionsViewComponent extends BlazeComponent {
      default:
        return 'Unknown';
    }
-  }
+  },

  formatDate(date) {
    return new Date(date).toLocaleString();
-  }
+  },
+});

-  refreshHistory() {
-    this.loadBoardHistory();
-  }
-}
+Template.originalPositionsView.events({
+  'click .js-toggle-original-positions'(evt, tpl) {
+    tpl.showOriginalPositions.set(!tpl.showOriginalPositions.get());
+  },

-OriginalPositionsViewComponent.register('originalPositionsView');
+  'click .js-refresh-history'(evt, tpl) {
+    tpl.loadBoardHistory();
+  },

-export default OriginalPositionsViewComponent;
+  'click .js-filter-type'(evt, tpl) {
+    const type = evt.currentTarget.dataset.filterType;
+    tpl.filterType.set(type);
+  },
+});
@@ -0,0 +1,143 @@
+/* Board Table view: search + pagination controls, styled to match the
+   Admin Panel / People page (see client/components/settings/peopleBody.css).
+   The table itself reuses the My Cards table styling (.my-cards-board-table). */
+
+.table-view-controls {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 12px;
+  margin: 1vh 0;
+}
+
+.table-view-search-box {
+  display: flex;
+  flex-direction: row;
+  height: 34px;
+}
+
+.table-view-search-box input {
+  border: 1px solid #ccc;
+  border-radius: 0.4vw;
+  padding: 0 8px;
+}
+
+.table-view-search-box button {
+  min-width: 90px;
+  margin-inline-start: 6px;
+  background: #01628c;
+  color: #fff;
+  border: none;
+  border-radius: 0.4vw;
+  cursor: pointer;
+  padding: 0 12px;
+}
+
+.table-view-search-box button:hover {
+  background: #005377;
+}
+
+.table-view-pagination {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.table-view-pagination button {
+  min-width: 32px;
+  height: 30px;
+  border: 1px solid #bbb;
+  background: #fff;
+  border-radius: 0.4vw;
+  cursor: pointer;
+}
+
+.table-view-pagination button.disabled {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+.table-view-page-info {
+  min-width: 72px;
+  text-align: center;
+  color: #333;
+}
+
+/* Sortable column headers (Excel-like): clickable, with a sort-direction
+   arrow appended by the sortIndicator helper. */
+.my-cards-board-table th.js-table-view-sort {
+  cursor: pointer;
+  user-select: none;
+  white-space: nowrap;
+}
+
+.my-cards-board-table th.js-table-view-sort:hover {
+  color: #01628c;
+}
+
+/* Leftmost "Edit" cell: an Edit link (pencil icon + text) styled like the one
+   on the Admin Panel / People page, opening the card when clicked. */
+.my-cards-board-table td.table-view-cell-edit {
+  white-space: nowrap;
+}
+
+.my-cards-board-table td.table-view-cell-edit .edit-card {
+  cursor: pointer;
+}
+
+.my-cards-board-table td.table-view-cell-edit .edit-card i.fa {
+  margin-inline-end: 4px;
+}
+
+/* Word-wrap the Card / List / Swimlane cells so long text breaks onto the next
+   line instead of overflowing across the other columns. */
+.my-cards-board-table td.table-view-cell-wrap {
+  max-width: 250px;
+  white-space: normal;
+  overflow-wrap: break-word;
+  word-break: break-word;
+}
+
+/* The +viewer template wraps its markdown in a block-level .viewer div. Inside
+   a table cell it should not add extra vertical margins, and inside a label it
+   must stay inline so the label keeps its pill shape. */
+.my-cards-board-table .viewer {
+  margin: 0;
+}
+
+.my-cards-board-table .viewer p {
+  margin: 0;
+}
+
+.my-cards-board-table .card-label .viewer,
+.my-cards-board-table .card-label .viewer p {
+  display: inline;
+}
+
+/* Word-wrap the Labels cell so each label pill wraps onto the next line instead
+   of stretching the column or overflowing across the date columns. */
+.my-cards-board-table td.table-view-cell-labels {
+  max-width: 250px;
+}
+
+.my-cards-board-table td.table-view-cell-labels .div {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+}
+
+.my-cards-board-table td.table-view-cell-labels .card-label {
+  white-space: normal;
+  overflow-wrap: break-word;
+  word-break: break-word;
+}
+
+/* Keep each date in a single column; the clickable badge already styles itself
+   like the card detail / Gantt date badges. */
+.my-cards-board-table td.table-view-cell-date {
+  white-space: nowrap;
+}
+
+.my-cards-board-table td.table-view-cell-date .card-date {
+  cursor: pointer;
+}
@@ -0,0 +1,107 @@
+template(name="tableView")
+  if currentBoard
+    .wrapper
+      .table-view-controls
+        .table-view-search-box
+          input.js-table-view-search(type="text" placeholder="{{_ 'search'}}" aria-label="{{_ 'search'}}")
+          button.js-table-view-search-button(type="button")
+            i.fa.fa-search
+            | {{_ 'search'}}
+        .table-view-pagination
+          button.js-table-view-prev-page(type="button" class="{{#unless hasPrevPage}}disabled{{/unless}}" aria-label="{{_ 'previous'}}")
+            i.fa.fa-chevron-left
+          span.table-view-page-info {{currentPage}} / {{totalPages}}
+          button.js-table-view-next-page(type="button" class="{{#unless hasNextPage}}disabled{{/unless}}" aria-label="{{_ 'next'}}")
+            i.fa.fa-chevron-right
+      table.my-cards-board-table
+        caption.sr-only {{currentBoard.title}}
+        thead
+          tr
+            th(scope="col")
+            th.js-table-view-sort(scope="col" data-sort="card") {{_ "card"}} {{sortIndicator 'card'}}
+            th.js-table-view-sort(scope="col" data-sort="list") {{_ "list"}} {{sortIndicator 'list'}}
+            th.js-table-view-sort(scope="col" data-sort="swimlane") {{_ "swimlane"}} {{sortIndicator 'swimlane'}}
+            unless isMiniScreen
+              th(scope="col") {{_ "assignees"}}
+              th(scope="col") {{_ "members"}}
+              th(scope="col") {{_ "labels"}}
+              if showReceivedColumn
+                th.js-table-view-sort(scope="col" data-sort="received") {{_ "card-received"}} {{sortIndicator 'received'}}
+              if showStartColumn
+                th.js-table-view-sort(scope="col" data-sort="start") {{_ "card-start"}} {{sortIndicator 'start'}}
+              if showDueColumn
+                th.js-table-view-sort(scope="col" data-sort="due") {{_ "card-due"}} {{sortIndicator 'due'}}
+              if showEndColumn
+                th.js-table-view-sort(scope="col" data-sort="end") {{_ "card-end"}} {{sortIndicator 'end'}}
+        tbody
+          each row in rows
+            tr
+              td.table-view-cell-edit
+                a.edit-card.js-table-view-edit-card(href=row.card.originRelativeUrl data-card-id=row.card._id title="{{_ 'edit'}}")
+                  i.fa.fa-pencil-square-o
+                  | {{_ 'edit'}}
+              td.table-view-cell-wrap
+                unless isMiniScreen
+                  .my-cards-board-badge(class=row.colorClass)
+                .my-cards-card-title-table
+                  +viewer
+                    = row.title
+              td.table-view-cell-wrap
+                +viewer
+                  = row.listTitle
+              td.table-view-cell-wrap
+                +viewer
+                  = row.swimlaneTitle
+              unless isMiniScreen
+                td
+                  .div
+                    each assignee in row.card.getAssignees
+                      a.name
+                        +userAvatar(userId=assignee noRemove=true)
+                td
+                  .div
+                    each member in row.card.getMembers
+                      a.name
+                        +userAvatar(userId=member noRemove=true)
+                td.table-view-cell-labels
+                  .div
+                    each label in row.labels
+                      span.card-label(class="card-label-{{label.color}}" title="{{label.name}}")
+                        +viewer
+                          = label.name
+                if showReceivedColumn
+                  td.table-view-cell-date
+                    with row.card
+                      if getReceived
+                        +cardReceivedDate
+                      else
+                        if canModifyCard
+                          a.card-label.add-label.js-received-date(title="{{_ 'card-received'}}")
+                            i.fa.fa-plus
+                if showStartColumn
+                  td.table-view-cell-date
+                    with row.card
+                      if getStart
+                        +cardStartDate
+                      else
+                        if canModifyCard
+                          a.card-label.add-label.js-start-date(title="{{_ 'card-start'}}")
+                            i.fa.fa-plus
+                if showDueColumn
+                  td.table-view-cell-date
+                    with row.card
+                      if getDue
+                        +cardDueDate
+                      else
+                        if canModifyCard
+                          a.card-label.add-label.js-due-date(title="{{_ 'card-due'}}")
+                            i.fa.fa-plus
+                if showEndColumn
+                  td.table-view-cell-date
+                    with row.card
+                      if getEnd
+                        +cardEndDate
+                      else
+                        if canModifyCard
+                          a.card-label.add-label.js-end-date(title="{{_ 'card-end'}}")
+                            i.fa.fa-plus
@@ -0,0 +1,254 @@
+import { ReactiveCache } from '/imports/reactiveCache';
+import { Utils } from '/client/lib/utils';
+
+// Board "Table" view: lists every card of the current board in a table that
+// reuses the My Cards table styling (the .my-cards-board-table CSS classes in
+// client/components/main/myCards.css). It is the per-board counterpart of the
+// My Cards table view, which spans all boards.
+//
+// Search, column sorting (Excel-like) and pagination all run client-side: the
+// board's cards are already loaded reactively via board.cards(), so there is no
+// need for the server-side limit/skip publication the Admin People page uses.
+
+const rowsPerPage = 25;
+
+Template.tableView.onCreated(function () {
+  this.searchQuery = new ReactiveVar('');
+  this.sortField = new ReactiveVar('card'); // card | list | swimlane | due
+  this.sortDirection = new ReactiveVar(1); // 1 ascending, -1 descending
+  this.page = new ReactiveVar(1);
+  this.filteredRows = new ReactiveVar([]);
+
+  // Recompute the flat, filtered and sorted row list whenever the board cards,
+  // search query or sort order change. Pagination is applied separately in the
+  // rows() helper so paging does not rebuild the whole list.
+  this.autorun(() => {
+    const board = Utils.getCurrentBoard();
+    if (!board) {
+      this.filteredRows.set([]);
+      return;
+    }
+
+    const query = this.searchQuery.get().trim().toLowerCase();
+    const field = this.sortField.get();
+    const direction = this.sortDirection.get();
+
+    const rows = [];
+    board.cards().forEach(card => {
+      const swimlane = card.getSwimlane();
+      const list = card.getList();
+      if (!swimlane || swimlane.archived || !list || list.archived) return;
+
+      const labels = (card.labelIds || [])
+        .map(labelId => {
+          const label = board.getLabelById(labelId);
+          return label ? { name: label.name || '', color: label.color } : null;
+        })
+        .filter(Boolean);
+
+      rows.push({
+        card,
+        title: card.title || '',
+        listTitle: list.title || '',
+        swimlaneTitle: swimlane.title || '',
+        colorClass: board.colorClass(),
+        receivedAt: card.getReceived() || null,
+        startAt: card.getStart() || null,
+        dueAt: card.getDue() || null,
+        endAt: card.getEnd() || null,
+        labels,
+      });
+    });
+
+    let filtered = rows;
+    if (query) {
+      filtered = rows.filter(row => {
+        const haystack = [
+          row.title,
+          row.listTitle,
+          row.swimlaneTitle,
+          ...row.labels.map(label => label.name),
+        ]
+          .join(' ')
+          .toLowerCase();
+        return haystack.indexOf(query) !== -1;
+      });
+    }
+
+    // Map a date sort field to the matching row property.
+    const dateFieldProp = {
+      received: 'receivedAt',
+      start: 'startAt',
+      due: 'dueAt',
+      end: 'endAt',
+    };
+
+    filtered = filtered.slice().sort((a, b) => {
+      const dateProp = dateFieldProp[field];
+      if (dateProp) {
+        // Cards without the date sort last, regardless of direction.
+        const av = a[dateProp] ? new Date(a[dateProp]).getTime() : Infinity;
+        const bv = b[dateProp] ? new Date(b[dateProp]).getTime() : Infinity;
+        return (av - bv) * direction;
+      }
+      let av;
+      let bv;
+      if (field === 'list') {
+        av = a.listTitle;
+        bv = b.listTitle;
+      } else if (field === 'swimlane') {
+        av = a.swimlaneTitle;
+        bv = b.swimlaneTitle;
+      } else {
+        av = a.title;
+        bv = b.title;
+      }
+      return (
+        av.localeCompare(bv, undefined, { numeric: true, sensitivity: 'base' }) *
+        direction
+      );
+    });
+
+    this.filteredRows.set(filtered);
+  });
+});
+
+Template.tableView.helpers({
+  currentBoard() {
+    return Utils.getCurrentBoard();
+  },
+
+  rows() {
+    const tpl = Template.instance();
+    const all = tpl.filteredRows.get();
+    const totalPages = Math.max(1, Math.ceil(all.length / rowsPerPage));
+    // Clamp on read so a shrinking list (deleted cards) never shows an empty
+    // page; no write here, to avoid a reactive loop.
+    const page = Math.min(tpl.page.get(), totalPages);
+    const start = (page - 1) * rowsPerPage;
+    return all.slice(start, start + rowsPerPage);
+  },
+
+  currentPage() {
+    return Template.instance().page.get();
+  },
+
+  totalPages() {
+    const count = Template.instance().filteredRows.get().length;
+    return Math.max(1, Math.ceil(count / rowsPerPage));
+  },
+
+  hasPrevPage() {
+    return Template.instance().page.get() > 1;
+  },
+
+  hasNextPage() {
+    const tpl = Template.instance();
+    const totalPages = Math.max(
+      1,
+      Math.ceil(tpl.filteredRows.get().length / rowsPerPage),
+    );
+    return tpl.page.get() < totalPages;
+  },
+
+  // A date column is shown unless BOTH its "Show at Card" (allowsXxxDate) and
+  // "Show at Minicard" (allowsXxxDateOnMinicard) board settings are unchecked.
+  showReceivedColumn() {
+    const board = Utils.getCurrentBoard();
+    return !!board && (board.allowsReceivedDate || board.allowsReceivedDateOnMinicard);
+  },
+
+  showStartColumn() {
+    const board = Utils.getCurrentBoard();
+    return !!board && (board.allowsStartDate || board.allowsStartDateOnMinicard);
+  },
+
+  showDueColumn() {
+    const board = Utils.getCurrentBoard();
+    return !!board && (board.allowsDueDate || board.allowsDueDateOnMinicard);
+  },
+
+  showEndColumn() {
+    const board = Utils.getCurrentBoard();
+    return !!board && (board.allowsEndDate || board.allowsEndDateOnMinicard);
+  },
+
+  // Excel-like sort arrow shown on the active sort column header.
+  sortIndicator(field) {
+    const tpl = Template.instance();
+    if (tpl.sortField.get() !== field) return '';
+    return tpl.sortDirection.get() === 1 ? '▲' : '▼';
+  },
+});
+
+Template.tableView.events({
+  'click .js-table-view-search-button'(event, tpl) {
+    event.preventDefault();
+    tpl.searchQuery.set(tpl.$('.js-table-view-search').val() || '');
+    tpl.page.set(1);
+  },
+
+  'keydown .js-table-view-search'(event, tpl) {
+    if (event.keyCode === 13) {
+      event.preventDefault();
+      tpl.searchQuery.set(tpl.$('.js-table-view-search').val() || '');
+      tpl.page.set(1);
+    }
+  },
+
+  'click .js-table-view-prev-page'(event, tpl) {
+    event.preventDefault();
+    const current = tpl.page.get();
+    if (current > 1) tpl.page.set(current - 1);
+  },
+
+  'click .js-table-view-next-page'(event, tpl) {
+    event.preventDefault();
+    const totalPages = Math.max(
+      1,
+      Math.ceil(tpl.filteredRows.get().length / rowsPerPage),
+    );
+    const current = tpl.page.get();
+    if (current < totalPages) tpl.page.set(current + 1);
+  },
+
+  'click .js-table-view-sort'(event, tpl) {
+    event.preventDefault();
+    const field = event.currentTarget.dataset.sort;
+    if (!field) return;
+    if (tpl.sortField.get() === field) {
+      tpl.sortDirection.set(tpl.sortDirection.get() * -1);
+    } else {
+      tpl.sortField.set(field);
+      tpl.sortDirection.set(1);
+    }
+    tpl.page.set(1);
+  },
+
+  // Clicking the leftmost "Edit" link opens the Card Details popup on top of the
+  // Board Table view (same mechanism as opening a card from search results).
+  'click .js-table-view-edit-card'(event) {
+    event.preventDefault();
+    const cardId = event.currentTarget.dataset.cardId;
+    if (!cardId) return;
+    const board = Utils.getCurrentBoard();
+    Meteor.subscribe('popupCardData', cardId, {
+      onReady() {
+        Session.set('popupCardId', cardId);
+        if (board) Session.set('popupCardBoardId', board._id);
+        if (!Popup.isOpen()) {
+          Popup.open('cardDetails')(event);
+        }
+      },
+    });
+  },
+
+  // Adding a date to a card that has none. The data context of each add button
+  // is the card (set with `with row.card` in the template), so the popup edits
+  // the right card. Editing an existing date is handled by the cardXxxDate
+  // badge templates themselves (their own .js-edit-date click handlers).
+  'click .js-received-date': Popup.open('editCardReceivedDate'),
+  'click .js-start-date': Popup.open('editCardStartDate'),
+  'click .js-due-date': Popup.open('editCardDueDate'),
+  'click .js-end-date': Popup.open('editCardEndDate'),
+});
@@ -23,7 +23,7 @@
  width: 150px;
  min-width: 150px;
  max-height: 150px;
-  padding-right: 16px;
+  padding-inline-end: 16px;
 }
 .attachment-thumbnail {
  max-width: 150px;
@@ -48,7 +48,7 @@
 .attachment-details {
  display: flex;
  justify-content: space-between;
-  margin-right: 25px; /* Make sure the icons are not to far to the right */
+  margin-inline-end: 25px; /* Make sure the icons are not to far to the right */
 }
 .attachment-actions {
  display: flex;
@@ -56,10 +56,10 @@
  align-items: center;
 }
 .attachment-actions a {
-  margin-left: 16px;
+  margin-inline-start: 16px;
 }
 .attachment-actions a:first-child {
-  margin-left: 0;
+  margin-inline-start: 0;
 }
 .add-attachment {
  display: flex;
@@ -74,7 +74,7 @@
 .icon {
  font-size: 1.5em;
  cursor: pointer;
-  margin-left: 10px;
+  margin-inline-start: 10px;
 }
 .icon:hover {
  color: #666;
@@ -84,7 +84,7 @@
  height: 100vh;
  position: fixed;
  top: 0;
-  left: 0;
+  inset-inline-start: 0;
  z-index: 9999 !important;
  background: rgba(13, 13, 13, 0.95);
 }
@@ -113,7 +113,7 @@
  cursor: pointer;
  font-size: 4em;
  position: absolute;
-  right: 50px;
+  inset-inline-end: 50px;
  top: 16px;
 }

@@ -137,7 +137,7 @@
 }

 .upload-progress-header i {
-  margin-right: 8px;
+  margin-inline-end: 8px;
  color: #007bff;
 }

@@ -201,7 +201,7 @@

 .upload-progress-error i,
 .upload-progress-success i {
-  margin-right: 4px;
+  margin-inline-end: 4px;
 }

 /* Minicard specific styles */
@@ -263,14 +263,14 @@
  color: white;
  cursor: pointer;
  align-self: center;
-  margin-left: 70px;
+  margin-inline-start: 70px;
 }
 #next-attachment {
  font-size: 4em;
  color: white;
  cursor: pointer;
  align-self: center;
-  margin-right: 70px;
+  margin-inline-end: 70px;
 }
 #viewer-content {
  display: flex;
@@ -325,20 +325,20 @@
    padding: 16px;
  }
  #prev-attachment {
-    left: 0;
+    inset-inline-start: 0;
    position: absolute;
    bottom: 2.2em;
    font-size: 1.6em;
    padding: 16px;
-    margin-left: 0;
+    margin-inline-start: 0;
  }
  #next-attachment {
-    right: 0;
+    inset-inline-end: 0;
    position: absolute;
    bottom: 2.2em;
    font-size: 1.6em;
    padding: 16px;
-    margin-right: 0;
+    margin-inline-end: 0;
  }
  #pdf-viewer {
    width: 100%;
@@ -365,7 +365,7 @@
  }
  .attachment-details {
    flex-direction: column;
-    margin-right: 0px;
+    margin-inline-end: 0px;
  }
  .attachment-actions {
    flex-direction: row;
@@ -86,6 +86,10 @@ template(name="attachmentGallery")
              b
                = name
              span.file-size ({{fileSize size}})
+            if uploaderName
+              div.attachment-uploader {{uploaderName}}
+            if uploadedAt
+              div.attachment-uploaded-at {{uploadedAt}}
            .attachment-actions
              a.js-download(href="{{link}}?download=true", download="{{name}}", title="{{_ 'download'}}")
                i.fa.fa-arrow-down
@@ -121,23 +125,6 @@ template(name="attachmentActionsPopup")
            else
              | {{_ 'add-background-image'}}

-        if $neq versions.original.storage "fs"
-          a.js-move-storage-fs
-            i.fa.fa-arrow-right
-            | {{_ 'attachment-move-storage-fs'}}
-
-        if $neq versions.original.storage "gridfs"
-          if versions.original.storage
-            a.js-move-storage-gridfs
-              i.fa.fa-arrow-right
-              | {{_ 'attachment-move-storage-gridfs'}}
-
-        if $neq versions.original.storage "s3"
-          if versions.original.storage
-            a.js-move-storage-s3
-              i.fa.fa-arrow-right
-              | {{_ 'attachment-move-storage-s3'}}
-
 template(name="attachmentRenamePopup")
  input.js-edit-attachment-name(type='text' autofocus value="{{getNameWithoutExtension}}" dir="auto")
  .edit-controls.clearfix
@@ -1,12 +1,16 @@
 import { ReactiveCache } from '/imports/reactiveCache';
-import { ObjectID } from 'bson';
+import { ObjectId } from 'bson';
 import DOMPurify from 'dompurify';
 import { sanitizeHTML, sanitizeText } from '/imports/lib/secureDOMPurify';
 import uploadProgressManager from '../../lib/uploadProgressManager';
 import { attachmentMigrationManager } from '/client/lib/attachmentMigrationManager';
+import Attachments from '/models/attachments';
+import { Utils } from '/client/lib/utils';
+import { formatDateTime } from '/imports/lib/dateUtils';
+import { EscapeActions } from '/client/lib/escapeActions';

-const filesize = require('filesize');
-const prettyMilliseconds = require('pretty-ms');
+const { filesize } = require('filesize');
+import prettyMilliseconds from 'pretty-ms';

 // We store current card ID and the ID of currently opened attachment in a
 // global var. This is used so that we know what's the next attachment to open
@@ -19,7 +23,7 @@ let touchStartCoords = null;
 let touchEndCoords = null;

 // Stores link to the attachment for which attachment actions popup was opened
-attachmentActionsLink = null;
+let attachmentActionsLink = null;

 Template.attachmentGallery.events({
  'click .open-preview'(event) {
@@ -40,8 +44,12 @@ Template.attachmentGallery.events({
    attachmentActionsLink = event.currentTarget.getAttribute("data-attachment-link");
  },
  'click .js-rename': Popup.open('attachmentRename'),
-  'click .js-confirm-delete': Popup.afterConfirm('attachmentDelete', function() {
-      Attachments.remove(this._id);
+  'click .js-confirm-delete': Popup.afterConfirm('attachmentDelete', async function() {
+      const card = this.meta && this.meta.cardId ? ReactiveCache.getCard(this.meta.cardId) : null;
+      if (card && card.coverId === this._id) {
+        await card.unsetCover();
+      }
+      await Attachments.removeAsync(this._id);
      Popup.back();
  }),
 });
@@ -81,6 +89,10 @@ function attachmentCanBeOpened(attachment) {
  );
 }

+function getAttachmentUrl(attachment) {
+  return attachment && typeof attachment.link === 'function' ? attachment.link() : '';
+}
+
 function openAttachmentViewer(attachmentId) {
  const attachment = ReactiveCache.getAttachment(attachmentId);

@@ -97,18 +109,18 @@ function openAttachmentViewer(attachmentId) {
  */
  switch(true){
    case (attachment.isImage):
-      $("#image-viewer").attr("src", attachment.link());
+      $("#image-viewer").attr("src", getAttachmentUrl(attachment));
      $("#image-viewer").removeClass("hidden");
      break;
    case (attachment.isPDF):
-      $("#pdf-viewer").attr("data", attachment.link());
+      $("#pdf-viewer").attr("data", getAttachmentUrl(attachment));
      $("#pdf-viewer").removeClass("hidden");
      break;
    case (attachment.isVideo):
      // We have to create a new <source> DOM element and append it to the video
      // element, otherwise the video won't load
      let videoSource = document.createElement('source');
-      videoSource.setAttribute('src', attachment.link());
+      videoSource.setAttribute('src', getAttachmentUrl(attachment));
      $("#video-viewer").append(videoSource);

      $("#video-viewer").removeClass("hidden");
@@ -117,14 +129,14 @@ function openAttachmentViewer(attachmentId) {
      // We have to create a new <source> DOM element and append it to the audio
      // element, otherwise the audio won't load
      let audioSource = document.createElement('source');
-      audioSource.setAttribute('src', attachment.link());
+      audioSource.setAttribute('src', getAttachmentUrl(attachment));
      $("#audio-viewer").append(audioSource);

      $("#audio-viewer").removeClass("hidden");
      break;
    case (attachment.isText):
    case (attachment.isJSON):
-      $("#txt-viewer").attr("data", attachment.link());
+      $("#txt-viewer").attr("data", getAttachmentUrl(attachment));
      $("#txt-viewer").removeClass("hidden");
      break;
  }
@@ -196,8 +208,6 @@ function processTouch(){
  xDist = touchEndCoords.x - touchStartCoords.x;
  yDist = touchEndCoords.y - touchStartCoords.y;

-  console.log("xDist: " + xDist);
-
  // Left swipe
  if (Math.abs(xDist) > Math.abs(yDist) && xDist < 0) {
    openNextAttachment();
@@ -217,14 +227,12 @@ function processTouch(){

 Template.attachmentViewer.events({
  'touchstart #viewer-container'(event) {
-    console.log("touchstart")
    touchStartCoords = {
      x: event.changedTouches[0].screenX,
      y: event.changedTouches[0].screenY
    }
  },
  'touchend #viewer-container'(event) {
-    console.log("touchend")
    touchEndCoords = {
      x: event.changedTouches[0].screenX,
      y: event.changedTouches[0].screenY
@@ -263,6 +271,24 @@ Template.attachmentViewer.events({
 });

 Template.attachmentGallery.helpers({
+  attachments() {
+    const card = Template.currentData();
+    if (!card) return [];
+    const cardId = typeof card.getRealId === 'function' ? card.getRealId() : card._id;
+    if (!cardId) return [];
+    const filesCursor = Attachments.find(
+      { 'meta.cardId': cardId },
+      { sort: { uploadedAt: -1 } },
+    );
+    // Call fetch() on the underlying Mongo cursor to establish a reactive
+    // dependency directly inside this Blaze computation. Without this,
+    // .each() (which calls cursor.map()) would not register reactivity and
+    // newly-uploaded attachments would not appear until a page reload.
+    if (filesCursor && filesCursor.cursor) {
+      filesCursor.cursor.fetch();
+    }
+    return filesCursor.each();
+  },
  isBoardAdmin() {
    return ReactiveCache.getCurrentUser().isBoardAdmin();
  },
@@ -273,6 +299,26 @@ Template.attachmentGallery.helpers({
  sanitize(value) {
    return sanitizeHTML(value);
  },
+  uploaderName() {
+    const uploaderId = this.userId;
+    if (!uploaderId) return '';
+    const uploader = ReactiveCache.getUser(uploaderId);
+    if (!uploader) return '';
+    return uploader.profile && uploader.profile.fullname
+      ? uploader.profile.fullname
+      : uploader.username || '';
+  },
+  uploadedAt() {
+    if (this.uploadedAtOstrio) {
+      return formatDateTime(this.uploadedAtOstrio);
+    }
+    // Fall back to ObjectId timestamp (first 4 bytes = Unix seconds)
+    try {
+      const ts = parseInt(this._id.substring(0, 8), 16) * 1000;
+      if (!isNaN(ts)) return formatDateTime(new Date(ts));
+    } catch (_) {}
+    return '';
+  },
 });

 Template.cardAttachmentsPopup.onCreated(function() {
@@ -294,12 +340,13 @@ Template.cardAttachmentsPopup.helpers({
 });

 Template.cardAttachmentsPopup.events({
-  'change .js-attach-file'(event, templateInstance) {
+  async 'change .js-attach-file'(event, templateInstance) {
+    event.stopPropagation();
    const card = this;
    const files = event.currentTarget.files;
    if (files) {
      let uploads = [];
-      const uploaders = handleFileUpload(card, files);
+      const uploaders = await handleFileUpload(card, files);

      uploaders.forEach(uploader => {
        uploader.on('start', function() {
@@ -317,6 +364,10 @@ Template.cardAttachmentsPopup.events({
    }
  },
  'click .js-computer-upload'(event, templateInstance) {
+    // Prevent the click fired when the OS file-picker dialog closes from
+    // triggering EscapeActions and closing the popup before the upload starts.
+    // Same pattern as swimlanes.js after drag operations.
+    EscapeActions.preventNextClick();
    templateInstance.find('.js-attach-file').click();
    event.preventDefault();
  },
@@ -328,7 +379,7 @@ const COMPRESS_RATIO = Utils.IMAGE_COMPRESS_RATIO;
 let pastedResults = null;

 // Shared upload logic for drag-and-drop functionality
-export function handleFileUpload(card, files) {
+export async function handleFileUpload(card, files) {
  if (!files || files.length === 0) {
    return [];
  }
@@ -361,7 +412,7 @@ export function handleFileUpload(card, files) {
      continue;
    }

-    const fileId = new ObjectID().toString();
+    const fileId = new ObjectId().toString();
    let fileName = sanitizeText(file.name);

    // If sanitized filename is not same as original filename,
@@ -381,11 +432,16 @@ export function handleFileUpload(card, files) {
      fileName: fileName,
      meta: Utils.getCommonAttachmentMetaFrom(card),
      chunkSize: 'dynamic',
+      // Use HTTP transport instead of DDP so file chunks go over a dedicated
+      // fetch POST rather than flooding the WebSocket/DDP channel.  DDP
+      // upload causes repeated DDP reconnects in Safari, showing the
+      // "Loading, please wait" offline banner and stalling progress at ~95%.
+      transport: 'http',
    };
    config.meta.fileId = fileId;

    try {
-      const uploader = Attachments.insert(
+      const uploader = await Attachments.insertAsync(
        config,
        false,
      );
@@ -460,21 +516,22 @@ Template.previewClipboardImagePopup.onRendered(() => {
 });

 Template.previewClipboardImagePopup.events({
-  'click .js-upload-pasted-image'() {
+  async 'click .js-upload-pasted-image'() {
    const card = this;
    if (pastedResults && pastedResults.file) {
      const file = pastedResults.file;
      window.oPasted = pastedResults;
-      const fileId = new ObjectID().toString();
+      const fileId = new ObjectId().toString();
      const config = {
        file,
        fileId: fileId,
        meta: Utils.getCommonAttachmentMetaFrom(card),
        fileName: file.name || file.type.replace('image/', 'clipboard.'),
        chunkSize: 'dynamic',
+        transport: 'http',
      };
      config.meta.fileId = fileId;
-      const uploader = Attachments.insert(
+      const uploader = await Attachments.insertAsync(
        config,
        false,
      );
@@ -495,9 +552,9 @@ Template.previewClipboardImagePopup.events({
  },
 });

-BlazeComponent.extendComponent({
+Template.attachmentActionsPopup.helpers({
  isCover() {
-    const ret = ReactiveCache.getCard(this.data().meta.cardId).coverId == this.data()._id;
+    const ret = ReactiveCache.getCard(this.meta.cardId).coverId == this._id;
    return ret;
  },
  isBackgroundImage() {
@@ -505,78 +562,60 @@ BlazeComponent.extendComponent({
    //return currentBoard.backgroundImageURL === $(".attachment-thumbnail-img").attr("src");
    return false;
  },
-  events() {
-    return [
-      {
-        'click .js-add-cover'() {
-          ReactiveCache.getCard(this.data().meta.cardId).setCover(this.data()._id);
-          Popup.back();
-        },
-        'click .js-remove-cover'() {
-          ReactiveCache.getCard(this.data().meta.cardId).unsetCover();
-          Popup.back();
-        },
-        'click .js-add-background-image'() {
-          const currentBoard = Utils.getCurrentBoard();
-          currentBoard.setBackgroundImageURL(attachmentActionsLink);
-          Utils.setBackgroundImage(attachmentActionsLink);
-          Popup.back();
-          event.preventDefault();
-        },
-        'click .js-remove-background-image'() {
-          const currentBoard = Utils.getCurrentBoard();
-          currentBoard.setBackgroundImageURL("");
-          Utils.setBackgroundImage("");
-          Popup.back();
-          Utils.reload();
-          event.preventDefault();
-        },
-        'click .js-move-storage-fs'() {
-          Meteor.call('moveAttachmentToStorage', this.data()._id, "fs");
-          Popup.back();
-        },
-        'click .js-move-storage-gridfs'() {
-          Meteor.call('moveAttachmentToStorage', this.data()._id, "gridfs");
-          Popup.back();
-        },
-        'click .js-move-storage-s3'() {
-          Meteor.call('moveAttachmentToStorage', this.data()._id, "s3");
-          Popup.back();
-        },
-      }
-    ]
-  }
-}).register('attachmentActionsPopup');
+});

-BlazeComponent.extendComponent({
+Template.attachmentActionsPopup.events({
+  'click .js-add-cover'() {
+    ReactiveCache.getCard(this.meta.cardId).setCover(this._id);
+    Popup.back();
+  },
+  'click .js-remove-cover'() {
+    ReactiveCache.getCard(this.meta.cardId).unsetCover();
+    Popup.back();
+  },
+  'click .js-add-background-image'(event) {
+    const currentBoard = Utils.getCurrentBoard();
+    currentBoard.setBackgroundImageURL(attachmentActionsLink);
+    Utils.setBackgroundImage(attachmentActionsLink);
+    Popup.back();
+    event.preventDefault();
+  },
+  'click .js-remove-background-image'(event) {
+    const currentBoard = Utils.getCurrentBoard();
+    currentBoard.setBackgroundImageURL("");
+    Utils.setBackgroundImage("");
+    Popup.back();
+    Utils.reload();
+    event.preventDefault();
+  },
+});
+
+Template.attachmentRenamePopup.helpers({
  getNameWithoutExtension() {
-    const ret = this.data().name.replace(new RegExp("\." + this.data().extension + "$"), "");
+    const ret = this.name.replace(new RegExp("\\." + this.extension + "$"), "");
    return ret;
  },
-  events() {
-    return [
-      {
-        'keydown input.js-edit-attachment-name'(evt) {
-          // enter = save
-          if (evt.keyCode === 13) {
-            this.find('button[type=submit]').click();
-          }
-        },
-        'click button.js-submit-edit-attachment-name'(event) {
-          // save button pressed
-          event.preventDefault();
-          const name = this.$('.js-edit-attachment-name')[0]
-            .value
-            .trim() + this.data().extensionWithDot;
-          if (name === sanitizeText(name)) {
-            Meteor.call('renameAttachment', this.data()._id, name);
-          }
-          Popup.back();
-        },
-      }
-    ]
-  }
-}).register('attachmentRenamePopup');
+});
+
+Template.attachmentRenamePopup.events({
+  'keydown input.js-edit-attachment-name'(evt, tpl) {
+    // enter = save
+    if (evt.keyCode === 13) {
+      tpl.find('button[type=submit]').click();
+    }
+  },
+  'click button.js-submit-edit-attachment-name'(event, tpl) {
+    // save button pressed
+    event.preventDefault();
+    const name = tpl.$('.js-edit-attachment-name')[0]
+      .value
+      .trim() + this.extensionWithDot;
+    if (name === sanitizeText(name)) {
+      Meteor.call('renameAttachment', this._id, name);
+    }
+    Popup.back();
+  },
+});

 // Template helpers for attachment migration status
 Template.registerHelper('attachmentMigrationStatus', function(attachmentId) {
@@ -55,11 +55,10 @@ template(name="cardCustomField-number")
 template(name="cardCustomField-checkbox")
  .js-checklist-item.checklist-item(class="{{#if data.value }}is-checked{{/if}}")
    if canModifyCard
-      span.check-box-unicode
-        i.fa(class="{{#if data.value}}fa-check-square{{else}}fa-square-o{{/if}}")
+      .check-box-container
+        .check-box.materialCheckBox(class="{{#if data.value}}is-checked{{/if}}")
    else
-      span.check-box-unicode
-        i.fa(class="{{#if data.value}}fa-check-square{{else}}fa-square-o{{/if}}")
+      .materialCheckBox(class="{{#if data.value}}is-checked{{/if}}")

 template(name="cardCustomField-currency")
    if canModifyCard
@@ -99,6 +98,21 @@ template(name="cardCustomField-date")
                b
                | {{showWeek}}

+template(name="cardCustomField-datePopup")
+  .datepicker-container
+    form.edit-date
+      .fields
+        .left
+          label(for="date") {{_ 'date'}}
+          input.js-date-field#date(type="date" name="date" value=showDate autofocus)
+        .right
+          label(for="time") {{_ 'time'}}
+          input.js-time-field#time(type="time" name="time" value=showTime)
+      if error.get
+        .warning {{_ error.get}}
+      button.primary.wide.left.js-submit-date(type="submit") {{_ 'save'}}
+      button.js-delete-date.negate.wide.right.js-delete-date {{_ 'delete'}}
+
 template(name="cardCustomField-dropdown")
    if canModifyCard
        +inlinedForm(classNames="js-card-customfield-dropdown")
@@ -1,33 +1,41 @@
 import { TAPi18n } from '/imports/i18n';
-import { DatePicker } from '/client/lib/datepicker';
+import {
+  setupDatePicker,
+  datePickerRendered,
+  datePickerHelpers,
+  datePickerEvents,
+} from '/client/lib/datepicker';
 import { ReactiveCache } from '/imports/reactiveCache';
-import { 
-  formatDateTime, 
-  formatDate, 
+import {
+  formatDateTime,
+  formatDate,
  formatDateByUserPreference,
-  formatTime, 
-  getISOWeek, 
-  isValidDate, 
-  isBefore, 
-  isAfter, 
-  isSame, 
-  add, 
-  subtract, 
-  startOf, 
-  endOf, 
-  format, 
-  parseDate, 
-  now, 
-  createDate, 
-  fromNow, 
-  calendar 
+  formatTime,
+  getISOWeek,
+  isValidDate,
+  isBefore,
+  isAfter,
+  isSame,
+  add,
+  subtract,
+  startOf,
+  endOf,
+  format,
+  parseDate,
+  now,
+  createDate,
+  fromNow,
+  calendar
 } from '/imports/lib/dateUtils';
-import Cards from '/models/cards';
 import { CustomFieldStringTemplate } from '/client/lib/customFields'
+import { getCurrentCardFromContext } from '/client/lib/currentCard';
+import { EscapeActions } from '/client/lib/escapeActions';
+import { getSidebarInstance } from '/client/features/sidebar/service';

 Template.cardCustomFieldsPopup.helpers({
  hasCustomField() {
-    const card = Utils.getCurrentCard();
+    const card = getCurrentCardFromContext();
+    if (!card) return false;
    const customFieldId = this._id;
    return card.customFieldIndex(customFieldId) > -1;
  },
@@ -35,318 +43,294 @@ Template.cardCustomFieldsPopup.helpers({

 Template.cardCustomFieldsPopup.events({
  'click .js-select-field'(event) {
-    const card = Utils.getCurrentCard();
+    const card = getCurrentCardFromContext();
+    if (!card) return;
    const customFieldId = this._id;
    card.toggleCustomField(customFieldId);
    event.preventDefault();
  },
  'click .js-settings'(event) {
    EscapeActions.executeUpTo('detailsPane');
-    Sidebar.setView('customFields');
+    const sidebar = getSidebarInstance();
+    if (sidebar) {
+      sidebar.setView('customFields');
+    }
    event.preventDefault();
  },
 });

 // cardCustomField
-const CardCustomField = BlazeComponent.extendComponent({
+Template.cardCustomField.helpers({
  getTemplate() {
-    return `cardCustomField-${this.data().definition.type}`;
-  },
-
-  onCreated() {
-    const self = this;
-    self.card = Utils.getCurrentCard();
-    self.customFieldId = this.data()._id;
+    return `cardCustomField-${this.definition.type}`;
  },
 });
-CardCustomField.register('cardCustomField');
+
+Template.cardCustomField.onCreated(function () {
+  this.card = getCurrentCardFromContext();
+  this.customFieldId = Template.currentData()._id;
+});

 // cardCustomField-text
-(class extends CardCustomField {
-  onCreated() {
-    super.onCreated();
-  }
+Template['cardCustomField-text'].onCreated(function () {
+  this.card = getCurrentCardFromContext();
+  this.customFieldId = Template.currentData()._id;
+});

-  events() {
-    return [
-      {
-        'submit .js-card-customfield-text'(event) {
-          event.preventDefault();
-          const value = this.currentComponent().getValue();
-          this.card.setCustomField(this.customFieldId, value);
-        },
-      },
-    ];
-  }
-}.register('cardCustomField-text'));
+Template['cardCustomField-text'].events({
+  'submit .js-card-customfield-text'(event, tpl) {
+    event.preventDefault();
+    const value = tpl.currentComponent ? tpl.currentComponent().getValue() : tpl.$('textarea').val();
+    tpl.card.setCustomField(tpl.customFieldId, value);
+  },
+});

 // cardCustomField-number
-(class extends CardCustomField {
-  onCreated() {
-    super.onCreated();
-  }
+Template['cardCustomField-number'].onCreated(function () {
+  this.card = getCurrentCardFromContext();
+  this.customFieldId = Template.currentData()._id;
+});

-  events() {
-    return [
-      {
-        'submit .js-card-customfield-number'(event) {
-          event.preventDefault();
-          const value = parseInt(this.find('input').value, 10);
-          this.card.setCustomField(this.customFieldId, value);
-        },
-      },
-    ];
-  }
-}.register('cardCustomField-number'));
+Template['cardCustomField-number'].events({
+  'submit .js-card-customfield-number'(event, tpl) {
+    event.preventDefault();
+    const value = parseInt(tpl.find('input').value, 10);
+    tpl.card.setCustomField(tpl.customFieldId, value);
+  },
+});

 // cardCustomField-checkbox
-(class extends CardCustomField {
-  onCreated() {
-    super.onCreated();
-  }
+Template['cardCustomField-checkbox'].onCreated(function () {
+  this.card = getCurrentCardFromContext();
+  this.customFieldId = Template.currentData()._id;
+});

-  toggleItem() {
-    this.card.setCustomField(this.customFieldId, !this.data().value);
-  }
-
-  events() {
-    return [
-      {
-        'click .js-checklist-item .check-box-unicode': this.toggleItem,
-        'click .js-checklist-item .check-box-container': this.toggleItem,
-      },
-    ];
-  }
-}.register('cardCustomField-checkbox'));
+Template['cardCustomField-checkbox'].events({
+  'click .js-checklist-item .check-box-container'(event, tpl) {
+    tpl.card.setCustomField(tpl.customFieldId, !Template.currentData().value);
+  },
+});

 // cardCustomField-currency
-(class extends CardCustomField {
-  onCreated() {
-    super.onCreated();
-
-    this.currencyCode = this.data().definition.settings.currencyCode;
-  }
+Template['cardCustomField-currency'].onCreated(function () {
+  this.card = getCurrentCardFromContext();
+  this.customFieldId = Template.currentData()._id;
+  this.currencyCode = Template.currentData().definition.settings.currencyCode;
+});

+Template['cardCustomField-currency'].helpers({
  formattedValue() {
    const locale = TAPi18n.getLanguage();
-
+    const tpl = Template.instance();
    return new Intl.NumberFormat(locale, {
      style: 'currency',
-      currency: this.currencyCode,
-    }).format(this.data().value);
-  }
+      currency: tpl.currencyCode,
+    }).format(this.value);
+  },
+});

-  events() {
-    return [
-      {
-        'submit .js-card-customfield-currency'(event) {
-          event.preventDefault();
-          // To allow input separated by comma, the comma is replaced by a period.
-          const value = Number(this.find('input').value.replace(/,/i, '.'), 10);
-          this.card.setCustomField(this.customFieldId, value);
-        },
-      },
-    ];
-  }
-}.register('cardCustomField-currency'));
+Template['cardCustomField-currency'].events({
+  'submit .js-card-customfield-currency'(event, tpl) {
+    event.preventDefault();
+    // To allow input separated by comma, the comma is replaced by a period.
+    const value = Number(tpl.find('input').value.replace(/,/i, '.'), 10);
+    tpl.card.setCustomField(tpl.customFieldId, value);
+  },
+});

 // cardCustomField-date
-(class extends CardCustomField {
-  onCreated() {
-    super.onCreated();
-    const self = this;
-    self.date = ReactiveVar();
-    self.now = ReactiveVar(now());
-    window.setInterval(() => {
-      self.now.set(now());
-    }, 60000);
+Template['cardCustomField-date'].onCreated(function () {
+  this.card = getCurrentCardFromContext();
+  this.customFieldId = Template.currentData()._id;
+  const self = this;
+  self.date = ReactiveVar();
+  self.now = ReactiveVar(now());
+  window.setInterval(() => {
+    self.now.set(now());
+  }, 60000);

-    self.autorun(() => {
-      self.date.set(new Date(self.data().value));
-    });
-  }
+  self.autorun(() => {
+    self.date.set(new Date(Template.currentData().value));
+  });
+});

+Template['cardCustomField-date'].helpers({
  showWeek() {
-    return getISOWeek(this.date.get()).toString();
-  }
-
+    return getISOWeek(Template.instance().date.get()).toString();
+  },
  showWeekOfYear() {
    const user = ReactiveCache.getCurrentUser();
    if (!user) {
-      // For non-logged-in users, week of year is not shown
      return false;
    }
    return user.isShowWeekOfYear();
-  }
-
+  },
  showDate() {
    const currentUser = ReactiveCache.getCurrentUser();
-    const dateFormat = currentUser ? currentUser.getDateFormat() : 'YYYY-MM-DD';
-    return formatDateByUserPreference(this.date.get(), dateFormat, true);
-  }
-
+    const dateFormat = currentUser ? currentUser.getDateFormat() : (window.localStorage.getItem('dateFormat') || 'YYYY-MM-DD');
+    return formatDateByUserPreference(Template.instance().date.get(), dateFormat, true);
+  },
  showISODate() {
-    return this.date.get().toISOString();
-  }
-
+    return Template.instance().date.get().toISOString();
+  },
  classes() {
+    const tpl = Template.instance();
    if (
-      isBefore(this.date.get(), this.now.get(), 'minute') &&
-      isBefore(this.now.get(), this.data().value, 'minute')
+      isBefore(tpl.date.get(), tpl.now.get(), 'minute') &&
+      isBefore(tpl.now.get(), this.value, 'minute')
    ) {
      return 'current';
    }
    return '';
-  }
-
+  },
  showTitle() {
-    return `${TAPi18n.__('card-start-on')} ${this.date.get().toLocaleString()}`;
-  }
+    return `${TAPi18n.__('card-start-on')} ${Template.instance().date.get().toLocaleString()}`;
+  },
+});

-  events() {
-    return [
-      {
-        'click .js-edit-date': Popup.open('cardCustomField-date'),
-      },
-    ];
-  }
-}.register('cardCustomField-date'));
+Template['cardCustomField-date'].events({
+  'click .js-edit-date': Popup.open('cardCustomField-date'),
+});

 // cardCustomField-datePopup
-(class extends DatePicker {
-  onCreated() {
-    super.onCreated();
-    const self = this;
-    self.card = Utils.getCurrentCard();
-    self.customFieldId = this.data()._id;
-    this.data().value && this.date.set(new Date(this.data().value));
-  }
+Template['cardCustomField-datePopup'].onCreated(function () {
+  const data = Template.currentData();
+  setupDatePicker(this, {
+    initialDate: data.value ? data.value : undefined,
+  });
+  // Override card and store customFieldId for store/delete callbacks
+  this.datePicker.card = getCurrentCardFromContext();
+  this.customFieldId = data._id;
+});

-  _storeDate(date) {
-    this.card.setCustomField(this.customFieldId, date);
-  }
+Template['cardCustomField-datePopup'].onRendered(function () {
+  datePickerRendered(this);
+});

-  _deleteDate() {
-    this.card.setCustomField(this.customFieldId, '');
-  }
-}.register('cardCustomField-datePopup'));
+Template['cardCustomField-datePopup'].helpers(datePickerHelpers());
+
+Template['cardCustomField-datePopup'].events(datePickerEvents({
+  storeDate(date) {
+    this.datePicker.card.setCustomField(this.customFieldId, date);
+  },
+  deleteDate() {
+    this.datePicker.card.setCustomField(this.customFieldId, '');
+  },
+}));

 // cardCustomField-dropdown
-(class extends CardCustomField {
-  onCreated() {
-    super.onCreated();
-    this._items = this.data().definition.settings.dropdownItems;
-    this.items = this._items.slice(0);
-    this.items.unshift({
-      _id: '',
-      name: TAPi18n.__('custom-field-dropdown-none'),
-    });
-  }
+Template['cardCustomField-dropdown'].onCreated(function () {
+  this.card = getCurrentCardFromContext();
+  this.customFieldId = Template.currentData()._id;
+  this._items = Template.currentData().definition.settings.dropdownItems;
+  this.items = this._items.slice(0);
+  this.items.unshift({
+    _id: '',
+    name: TAPi18n.__('custom-field-dropdown-none'),
+  });
+});

+Template['cardCustomField-dropdown'].helpers({
+  items() {
+    return Template.instance().items;
+  },
  selectedItem() {
-    const selected = this._items.find(item => {
-      return item._id === this.data().value;
+    const tpl = Template.instance();
+    const selected = tpl._items.find(item => {
+      return item._id === this.value;
    });
    return selected
      ? selected.name
      : TAPi18n.__('custom-field-dropdown-unknown');
-  }
+  },
+});

-  events() {
-    return [
-      {
-        'submit .js-card-customfield-dropdown'(event) {
-          event.preventDefault();
-          const value = this.find('select').value;
-          this.card.setCustomField(this.customFieldId, value);
-        },
-      },
-    ];
-  }
-}.register('cardCustomField-dropdown'));
+Template['cardCustomField-dropdown'].events({
+  'submit .js-card-customfield-dropdown'(event, tpl) {
+    event.preventDefault();
+    const value = tpl.find('select').value;
+    tpl.card.setCustomField(tpl.customFieldId, value);
+  },
+});

 // cardCustomField-stringtemplate
-class CardCustomFieldStringTemplate extends CardCustomField {
-  onCreated() {
-    super.onCreated();
-
-    this.customField = new CustomFieldStringTemplate(this.data().definition);
-
-    this.stringtemplateItems = new ReactiveVar(this.data().value ?? []);
-  }
+Template['cardCustomField-stringtemplate'].onCreated(function () {
+  this.card = getCurrentCardFromContext();
+  this.customFieldId = Template.currentData()._id;
+  this.customField = new CustomFieldStringTemplate(Template.currentData().definition);
+  this.stringtemplateItems = new ReactiveVar(Template.currentData().value ?? []);
+});

+Template['cardCustomField-stringtemplate'].helpers({
  formattedValue() {
-    const ret = this.customField.getFormattedValue(this.data().value);
+    const tpl = Template.instance();
+    const ret = tpl.customField.getFormattedValue(this.value);
    return ret;
-  }
+  },
+  stringtemplateItems() {
+    return Template.instance().stringtemplateItems.get();
+  },
+});

-  getItems() {
-    return Array.from(this.findAll('input'))
-      .map(input => input.value)
-      .filter(value => !!value.trim());
-  }
+Template['cardCustomField-stringtemplate'].events({
+  'submit .js-card-customfield-stringtemplate'(event, tpl) {
+    event.preventDefault();
+    const items = tpl.stringtemplateItems.get();
+    tpl.card.setCustomField(tpl.customFieldId, items);
+  },

-  events() {
-    return [
-      {
-        'submit .js-card-customfield-stringtemplate'(event) {
-          event.preventDefault();
-          const items = this.stringtemplateItems.get();
-          this.card.setCustomField(this.customFieldId, items);
-        },
+  'keydown .js-card-customfield-stringtemplate-item'(event, tpl) {
+    if (event.keyCode === 13) {
+      event.preventDefault();

-        'keydown .js-card-customfield-stringtemplate-item'(event) {
-          if (event.keyCode === 13) {
-            event.preventDefault();
+      if (event.target.value.trim() || event.metaKey || event.ctrlKey) {
+        const inputLast = tpl.find('input.last');

-            if (event.target.value.trim() || event.metaKey || event.ctrlKey) {
-              const inputLast = this.find('input.last');
+        let items = Array.from(tpl.findAll('input'))
+          .map(input => input.value)
+          .filter(value => !!value.trim());

-              let items = this.getItems();
+        if (event.target === inputLast) {
+          inputLast.value = '';
+        } else if (event.target.nextSibling === inputLast) {
+          inputLast.focus();
+        } else {
+          event.target.blur();

-              if (event.target === inputLast) {
-                inputLast.value = '';
-              } else if (event.target.nextSibling === inputLast) {
-                inputLast.focus();
-              } else {
-                event.target.blur();
+          const idx = Array.from(tpl.findAll('input')).indexOf(
+            event.target,
+          );
+          items.splice(idx + 1, 0, '');

-                const idx = Array.from(this.findAll('input')).indexOf(
-                  event.target,
-                );
-                items.splice(idx + 1, 0, '');
+          Tracker.afterFlush(() => {
+            const element = tpl.findAll('input')[idx + 1];
+            element.focus();
+            element.value = '';
+          });
+        }

-                Tracker.afterFlush(() => {
-                  const element = this.findAll('input')[idx + 1];
-                  element.focus();
-                  element.value = '';
-                });
-              }
+        tpl.stringtemplateItems.set(items);
+      }
+      if (event.metaKey || event.ctrlKey) {
+        tpl.find('button[type=submit]').click();
+      }
+    }
+  },

-              this.stringtemplateItems.set(items);
-            }
-            if (event.metaKey || event.ctrlKey) {
-              this.find('button[type=submit]').click();
-            }
-          }
-        },
+  'blur .js-card-customfield-stringtemplate-item'(event, tpl) {
+    if (
+      !event.target.value.trim() ||
+      event.target === tpl.find('input.last')
+    ) {
+      const items = Array.from(tpl.findAll('input'))
+        .map(input => input.value)
+        .filter(value => !!value.trim());
+      tpl.stringtemplateItems.set(items);
+      tpl.find('input.last').value = '';
+    }
+  },

-        'blur .js-card-customfield-stringtemplate-item'(event) {
-          if (
-            !event.target.value.trim() ||
-            event.target === this.find('input.last')
-          ) {
-            const items = this.getItems();
-            this.stringtemplateItems.set(items);
-            this.find('input.last').value = '';
-          }
-        },
-
-        'click .js-close-inlined-form'(event) {
-          this.stringtemplateItems.set(this.data().value ?? []);
-        },
-      },
-    ];
-  }
-}
-CardCustomFieldStringTemplate.register('cardCustomField-stringtemplate');
+  'click .js-close-inlined-form'(event, tpl) {
+    tpl.stringtemplateItems.set(Template.currentData().value ?? []);
+  },
+});
@@ -134,7 +134,7 @@
 }
 .card-date time::before {
  font-size: inherit;
-  margin-right: 0.3em;
+  margin-inline-end: 0.3em;
  display: inline-block;
 }
 .customfield-date {
@@ -14,6 +14,70 @@ template(name="dateBadge")
          b
            | {{showWeek}}

+template(name="cardReceivedDate")
+  if canModifyCard
+    a.js-edit-date.card-date(title="{{showTitle}} {{_ 'predicate-week'}} {{#if showWeekOfYear}}{{showWeek}}{{/if}}" class="{{classes}}")
+      time(datetime="{{showISODate}}")
+        | {{showDate}}
+        if showWeekOfYear
+          b
+            | {{showWeek}}
+  else
+    a.card-date(title="{{showTitle}} {{_ 'predicate-week'}} {{#if showWeekOfYear}}{{showWeek}}{{/if}}" class="{{classes}}")
+      time(datetime="{{showISODate}}")
+        | {{showDate}}
+        if showWeekOfYear
+          b
+            | {{showWeek}}
+
+template(name="cardStartDate")
+  if canModifyCard
+    a.js-edit-date.card-date(title="{{showTitle}} {{_ 'predicate-week'}} {{#if showWeekOfYear}}{{showWeek}}{{/if}}" class="{{classes}}")
+      time(datetime="{{showISODate}}")
+        | {{showDate}}
+        if showWeekOfYear
+          b
+            | {{showWeek}}
+  else
+    a.card-date(title="{{showTitle}} {{_ 'predicate-week'}} {{#if showWeekOfYear}}{{showWeek}}{{/if}}" class="{{classes}}")
+      time(datetime="{{showISODate}}")
+        | {{showDate}}
+        if showWeekOfYear
+          b
+            | {{showWeek}}
+
+template(name="cardDueDate")
+  if canModifyCard
+    a.js-edit-date.card-date(title="{{showTitle}} {{_ 'predicate-week'}} {{#if showWeekOfYear}}{{showWeek}}{{/if}}" class="{{classes}}")
+      time(datetime="{{showISODate}}")
+        | {{showDate}}
+        if showWeekOfYear
+          b
+            | {{showWeek}}
+  else
+    a.card-date(title="{{showTitle}} {{_ 'predicate-week'}} {{#if showWeekOfYear}}{{showWeek}}{{/if}}" class="{{classes}}")
+      time(datetime="{{showISODate}}")
+        | {{showDate}}
+        if showWeekOfYear
+          b
+            | {{showWeek}}
+
+template(name="cardEndDate")
+  if canModifyCard
+    a.js-edit-date.card-date(title="{{showTitle}} {{_ 'predicate-week'}} {{#if showWeekOfYear}}{{showWeek}}{{/if}}" class="{{classes}}")
+      time(datetime="{{showISODate}}")
+        | {{showDate}}
+        if showWeekOfYear
+          b
+            | {{showWeek}}
+  else
+    a.card-date(title="{{showTitle}} {{_ 'predicate-week'}} {{#if showWeekOfYear}}{{showWeek}}{{/if}}" class="{{classes}}")
+      time(datetime="{{showISODate}}")
+        | {{showDate}}
+        if showWeekOfYear
+          b
+            | {{showWeek}}
+
 template(name="dateCustomField")
  a(title="{{showTitle}} {{_ 'predicate-week'}} {{#if showWeekOfYear}}{{showWeek}}{{/if}}" class="{{classes}}")
    time(datetime="{{showISODate}}")
@@ -22,6 +86,46 @@ template(name="dateCustomField")
        b
          | {{showWeek}}

+template(name="cardCustomFieldDate")
+  a(title="{{showTitle}} {{_ 'predicate-week'}} {{#if showWeekOfYear}}{{showWeek}}{{/if}}" class="{{classes}}")
+    time(datetime="{{showISODate}}")
+      | {{showDate}}
+      if showWeekOfYear
+        b
+          | {{showWeek}}
+
+template(name="voteEndDate")
+  if canModifyCard
+    a.js-edit-date.card-date(title="{{showTitle}} {{_ 'predicate-week'}} {{#if showWeekOfYear}}{{showWeek}}{{/if}}" class="{{classes}}")
+      time(datetime="{{showISODate}}")
+        | {{showDate}}
+        if showWeekOfYear
+          b
+            | {{showWeek}}
+  else
+    a.card-date(title="{{showTitle}} {{_ 'predicate-week'}} {{#if showWeekOfYear}}{{showWeek}}{{/if}}" class="{{classes}}")
+      time(datetime="{{showISODate}}")
+        | {{showDate}}
+        if showWeekOfYear
+          b
+            | {{showWeek}}
+
+template(name="pokerEndDate")
+  if canModifyCard
+    a.js-edit-date.card-date(title="{{showTitle}} {{_ 'predicate-week'}} {{#if showWeekOfYear}}{{showWeek}}{{/if}}" class="{{classes}}")
+      time(datetime="{{showISODate}}")
+        | {{showDate}}
+        if showWeekOfYear
+          b
+            | {{showWeek}}
+  else
+    a.card-date(title="{{showTitle}} {{_ 'predicate-week'}} {{#if showWeekOfYear}}{{showWeek}}{{/if}}" class="{{classes}}")
+      time(datetime="{{showISODate}}")
+        | {{showDate}}
+        if showWeekOfYear
+          b
+            | {{showWeek}}
+
 template(name="minicardReceivedDate")
  if canModifyCard
    a.js-edit-date.card-date.received-date(title="{{_ 'card-received'}} {{_ 'predicate-week'}} {{#if showWeekOfYear}}{{showWeek}}{{/if}}" class="{{classes}}")
@@ -153,3 +257,33 @@ template(name="editCardEndDatePopup")
        .warning {{_ error.get}}
      button.primary.wide.left.js-submit-date(type="submit") {{_ 'save'}}
      button.js-delete-date.negate.wide.right.js-delete-date {{_ 'delete'}}
+
+template(name="editVoteEndDatePopup")
+  .datepicker-container
+    form.edit-date
+      .fields
+        .left
+          label(for="date") {{_ 'date'}}
+          input.js-date-field#date(type="date" name="date" value=showDate autofocus)
+        .right
+          label(for="time") {{_ 'time'}}
+          input.js-time-field#time(type="time" name="time" value=showTime)
+      if error.get
+        .warning {{_ error.get}}
+      button.primary.wide.left.js-submit-date(type="submit") {{_ 'save'}}
+      button.js-delete-date.negate.wide.right.js-delete-date {{_ 'delete'}}
+
+template(name="editPokerEndDatePopup")
+  .datepicker-container
+    form.edit-date
+      .fields
+        .left
+          label(for="date") {{_ 'date'}}
+          input.js-date-field#date(type="date" name="date" value=showDate autofocus)
+        .right
+          label(for="time") {{_ 'time'}}
+          input.js-time-field#time(type="time" name="time" value=showTime)
+      if error.get
+        .warning {{_ error.get}}
+      button.primary.wide.left.js-submit-date(type="submit") {{_ 'save'}}
+      button.js-delete-date.negate.wide.right.js-delete-date {{_ 'delete'}}
@@ -1,37 +1,29 @@
 const descriptionFormIsOpen = new ReactiveVar(false);

-BlazeComponent.extendComponent({
-  onDestroyed() {
-    descriptionFormIsOpen.set(false);
-    $('.note-popover').hide();
-  },
+Template.descriptionForm.onDestroyed(function () {
+  descriptionFormIsOpen.set(false);
+  $('.note-popover').hide();
+});

+Template.descriptionForm.helpers({
  descriptionFormIsOpen() {
    return descriptionFormIsOpen.get();
  },
+});

-  getInput() {
-    return this.$('.js-new-description-input');
+Template.descriptionForm.events({
+  async 'submit .js-card-description'(event, tpl) {
+    event.preventDefault();
+    const description = tpl.currentComponent ? tpl.currentComponent().getValue() : tpl.$('textarea').val();
+    await this.setDescription(description);
  },
-
-  events() {
-    return [
-      {
-        async 'submit .js-card-description'(event) {
-          event.preventDefault();
-          const description = this.currentComponent().getValue();
-          await this.data().setDescription(description);
-        },
-        // Pressing Ctrl+Enter should submit the form
-        'keydown form textarea'(evt) {
-          if (evt.keyCode === 13 && (evt.metaKey || evt.ctrlKey)) {
-            const submitButton = this.find('button[type=submit]');
-            if (submitButton) {
-              submitButton.click();
-            }
-          }
-        },
-      },
-    ];
+  // Pressing Ctrl+Enter should submit the form
+  'keydown form textarea'(evt, tpl) {
+    if (evt.keyCode === 13 && (evt.metaKey || evt.ctrlKey)) {
+      const submitButton = tpl.find('button[type=submit]');
+      if (submitButton) {
+        submitButton.click();
+      }
+    }
  },
-}).register('descriptionForm');
+});
@@ -1,23 +1,25 @@
 /* Date Format Selector */
 .card-details-item-date-format {
-  margin-bottom: 10px;
+  margin-bottom: 12px;
 }

 .card-details-item-date-format .card-details-item-title {
-  font-size: 14px;
+  font-size: 15px;
  font-weight: bold;
-  margin-bottom: 5px;
+  margin-bottom: 6px;
  color: #333;
+  letter-spacing: 0.03em;
 }

 .card-details-item-date-format .js-date-format-selector {
  width: 100%;
-  padding: 8px;
+  padding: 9px 10px;
  border: 1px solid #ddd;
-  border-radius: 4px;
+  border-radius: 5px;
  background-color: #fff;
-  font-size: 14px;
+  font-size: 15px;
  cursor: pointer;
+  transition: border-color 0.15s, box-shadow 0.15s;
 }

 .card-details-item-date-format .js-date-format-selector:focus {
@@ -27,18 +29,18 @@
 }

 .assignee {
-  border-radius: 3px;
  display: block;
  position: relative;
-  float: left;
+  float: inline-start;
  height: clamp(24px, 3.5vw, 36px);
  width: clamp(24px, 3.5vw, 36px);
-  margin: .3vh;
+  margin: 0.3vh;
  cursor: pointer;
  user-select: none;
  z-index: 1;
  text-decoration: none;
  border-radius: 50%;
+  box-shadow: 0 1px 2px 0 rgba(0,0,0,0.04);
 }
 .assignee .avatar {
  overflow: hidden;
@@ -51,12 +53,18 @@
  background-color: #dbdbdb;
  color: #444;
  position: absolute;
+  text-align: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: bold;
 }
 .assignee .avatar.avatar-image {
  object-fit: cover;
  object-position: center;
  height: 100%;
  width: 100%;
+  display: block;
 }
 .assignee .assignee-presence-status {
  background-color: #b3b3b3;
@@ -65,9 +73,8 @@
  height: 7px;
  width: 7px;
  position: absolute;
-  right: -1px;
+  inset-inline-end: -1px;
  bottom: -1px;
-  border: 1px solid #fff;
  z-index: 15;
 }
 .assignee .assignee-presence-status.active {
@@ -91,6 +98,7 @@
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 2px #bfbfbf inset;
+  transition: box-shadow 0.12s;
 }
 .assignee.add-assignee:hover,
 .assignee.add-assignee.is-active {
@@ -102,20 +110,22 @@
  background-color: rgba(0,0,0,0.875);
  color: #fff;
  border-radius: 0.7vw;
+  font-size: 0.98em;
 }
+
 .card-details {
  padding: 0;
  flex-shrink: 0;
  flex-basis: min(600px, 80vw);
  will-change: flex-basis;
-  overflow-y: scroll;
+  overflow-y: auto;
  overflow-x: hidden;
  background: #f7f7f7;
-  border-radius: bottom 0.4vw;
+  border-radius: 0 0 0.4vw 0.4vw;
  z-index: 30;
  animation: flexGrowIn 0.1s;
  box-shadow: 0 0 0.9vh 0 #b3b3b3;
-  transition: flex-basis 0.1s;
+  transition: flex-basis 0.1s, box-shadow 0.15s;
  box-sizing: border-box;
 }

@@ -126,48 +136,48 @@ body.desktop-mode .card-details:not(.card-details-popup) {
  max-width: 800px;
  flex-basis: auto;
  border-radius: 8px;
-  z-index: 100;
+  z-index: 2001;
 }

 /* Default position for first card or when dragged */
 body.desktop-mode .card-details:not(.card-details-popup):not([style*="left"]):not([style*="top"]) {
-  top: 50px;
-  left: 20px;
-  right: 20px;
+  top: 8px;
+  inset-inline-start: 20px;
+  inset-inline-end: 20px;
  bottom: 20px;
 }

 /* Stagger positions for multiple cards using nth-of-type */
 body.desktop-mode .card-details:not(.card-details-popup):nth-of-type(1) {
-  top: 50px;
-  left: 20px;
+  top: 8px;
+  inset-inline-start: 20px;
 }
 body.desktop-mode .card-details:not(.card-details-popup):nth-of-type(2) {
-  top: 80px;
-  left: 50px;
+  top: 38px;
+  inset-inline-start: 50px;
 }
 body.desktop-mode .card-details:not(.card-details-popup):nth-of-type(3) {
-  top: 110px;
-  left: 80px;
+  top: 68px;
+  inset-inline-start: 80px;
 }
 body.desktop-mode .card-details:not(.card-details-popup):nth-of-type(4) {
-  top: 140px;
-  left: 110px;
+  top: 98px;
+  inset-inline-start: 110px;
 }
 body.desktop-mode .card-details:not(.card-details-popup):nth-of-type(5) {
-  top: 170px;
-  left: 140px;
+  top: 128px;
+  inset-inline-start: 140px;
 }

 /* For expanded cards, set dimensions */
 body.desktop-mode .card-details:not(.card-details-popup):not(.card-details-collapsed) {
-  right: 20px;
+  inset-inline-end: 20px;
  bottom: 20px;
 }

 /* Collapsed card state - hide content and set height to title row only */
 .card-details.card-details-collapsed .card-details-canvas > *:not(.card-details-header) {
-  display: none;
+  display: none !important;
 }
 .card-details.card-details-collapsed {
  height: auto !important;
@@ -178,7 +188,7 @@ body.desktop-mode .card-details.card-details-collapsed {
  bottom: auto !important;
 }
 .card-details .mCustomScrollBox {
-  padding-left: 0;
+  padding-inline-start: 0;
 }
 .card-details .card-details-canvas {
  width: auto;
@@ -186,28 +196,28 @@ body.desktop-mode .card-details.card-details-collapsed {
 }
 .card-details .card-details-header {
  margin: 0 -20px 5px;
-  padding: 7px 20px;
+  padding: 8px 20px;
  background: #ededed;
  border-bottom: 1px solid #dbdbdb;
  position: sticky;
  top: 0px;
  z-index: 500;
  display: flow-root;
-  min-height: 40px;
+  min-height: 44px;
 }
 .card-details .card-details-header .card-number {
  color: #b3b3b3;
  display: inline-block;
-  margin-right: 5px;
+  margin-inline-end: 6px;
 }

 /* Collapse toggle triangle */
 .card-details .card-details-header .card-collapse-toggle {
-  float: left;
+  float: inline-start;
  font-size: 20px;
  padding: 7px 10px;
-  margin-left: -10px;
-  margin-right: 5px;
+  margin-inline-start: -10px;
+  margin-inline-end: 5px;
  cursor: pointer;
  user-select: none;
  color: #000;
@@ -215,15 +225,14 @@ body.desktop-mode .card-details.card-details-collapsed {
  line-height: 1.2;
 }

-/* Drag handle */
 .card-details .card-details-header .card-drag-handle {
  font-size: 20px;
  padding: 8px 10px;
-  margin-right: 10px;
+  margin-inline-end: 10px;
  cursor: move;
  user-select: none;
  display: inline-block;
-  float: right;
+  float: inline-end;
  vertical-align: middle;
  line-height: 1.2;
 }
@@ -237,36 +246,37 @@ body.desktop-mode .card-details.card-details-collapsed {
 .card-details .card-details-header .close-card-details-mobile-web,
 .card-details .card-details-header .card-details-menu-mobile-web,
 .card-details .card-details-header .copied-tooltip {
-  float: right;
+  float: inline-end;
 }
 .card-details .card-details-header .close-card-details,
 .card-details .card-details-header .maximize-card-details,
 .card-details .card-details-header .minimize-card-details {
  font-size: 24px;
  padding: 5px 10px 5px 10px;
-  margin-right: -8px;
+  margin-inline-end: -8px;
  cursor: pointer;
  user-select: none;
  vertical-align: middle;
  line-height: 1.2;
+  transition: color 0.13s;
 }
 .card-details .card-details-header .close-card-details-mobile-web,
 .card-details .card-details-header .card-mobile-desktop-toggle {
  font-size: 24px;
  padding: 5px;
-  margin-right: 5px;
+  margin-inline-end: 5px;
  cursor: pointer;
  user-select: none;
 }
 .card-details .card-details-header .card-copy-button {
  font-size: 17px;
  padding: 10px;
-  margin-right: 10px;
+  margin-inline-end: 10px;
 }
 .card-details .card-details-header .card-copy-mobile-button {
  font-size: 17px;
  padding: 10px;
-  margin-right: 10px;
+  margin-inline-end: 10px;
 }
 .card-details .card-details-header .card-details-menu {
  font-size: 17px;
@@ -277,17 +287,17 @@ body.desktop-mode .card-details.card-details-collapsed {
 .card-details .card-details-header .card-details-menu-mobile-web {
  font-size: 17px;
  padding: 10px;
-  margin-right: 30px;
+  margin-inline-end: 30px;
 }
 .card-details .card-details-header .card-mobile-desktop-toggle,
 .card-details .card-details-header .card-zoom-in,
 .card-details .card-details-header .card-zoom-out {
  font-size: 24px;
  padding: 5px 10px 5px 10px;
-  margin-right: 5px;
+  margin-inline-end: 5px;
  cursor: pointer;
  user-select: none;
-  float: right;
+  float: inline-end;
 }

 /* Unify all card text to match title size */
@@ -307,21 +317,22 @@ body.desktop-mode .card-details.card-details-collapsed {
 .card-details .card-label,
 .card-details .viewer {
  font-size: inherit;
-  line-height: 1.4;
+  line-height: 1.5;
 }
 .card-details .card-details-header .card-details-watch {
  font-size: 17px;
-  padding-left: 7px;
+  padding-inline-start: 7px;
  color: #a6a6a6;
 }
 .card-details .card-details-header .card-details-title {
  font-weight: bold;
-  font-size: 1.33em;
+  font-size: 1.35em;
  margin: 7px 0 0;
  padding: 0;
  display: inline-block;
  vertical-align: middle;
  line-height: 1.3;
+  letter-spacing: 0.01em;
 }
 .card-details .card-details-header .linked-card-location {
  font-style: italic;
@@ -336,10 +347,10 @@ body.desktop-mode .card-details.card-details-collapsed {
  margin-bottom: 10px;
 }
 .card-details .card-details-header form.inlined-form .copied-tooltip {
-  padding: 0px 10px;
+  padding: 0 10px;
 }
 .card-details .card-details-header .card-details-list {
-  font-size: 0.85em;
+  font-size: 0.9em;
  margin-bottom: 3px;
 }
 .card-details .card-details-header .card-details-list a.card-details-list-title {
@@ -349,29 +360,31 @@ body.desktop-mode .card-details.card-details-collapsed {
  display: inline-block;
  background: #e6e6e6;
  border-radius: 3px;
-  padding: 0px 5px;
+  padding: 0 5px;
 }
 .card-details .card-details-header .copied-tooltip {
-  margin-right: 10px;
+  margin-inline-end: 10px;
  padding: 10px;
 }
 .card-details .card-description i.fa.fa-pencil-square-o {
-  float: right;
+  float: inline-end;
 }
 .card-details .card-description textarea {
  min-height: 100px;
+  resize: vertical;
 }
 .card-details .card-details-items {
  display: flex;
  flex-wrap: wrap;
  margin: 15px 0;
+  gap: 0.5em;
 }
 .card-details .card-details-items .card-details-item {
-  margin-right: 0.5em;
+  margin-inline-end: 0.5em;
  flex-grow: 1;
 }
 .card-details .card-details-items .card-details-item:last-child {
-  margin-right: 0;
+  margin-inline-end: 0;
 }
 .card-details .card-details-items .card-details-item.card-details-item-labels {
  display: block;
@@ -396,7 +409,7 @@ body.desktop-mode .card-details.card-details-collapsed {
  max-width: 28%;
 }
 .card-details .card-details-items .card-details-item.custom-fields {
-  padding-left: 10px;
+  padding-inline-start: 10px;
 }
 .card-details .card-details-item-title {
  font-size: 16px;
@@ -409,57 +422,57 @@ body.desktop-mode .card-details.card-details-collapsed {
@media screen and (min-width: 801px) {
  .card-details {
    top: 97px;
-    left: calc(50% - (600px / 2));
+    inset-inline-start: calc(50% - (600px / 2));
    width: 600px;
    bottom: 0;
    position: fixed;
    resize: both;
  }
-  
+
  /* Override for mobile mode even on larger screens */
  body.mobile-mode .card-details {
    width: 100vw !important;
    top: 0 !important;
-    left: 0 !important;
-    right: 0 !important;
+    inset-inline-start: 0 !important;
+    inset-inline-end: 0 !important;
    bottom: 0 !important;
    height: 100vh !important;
    max-height: 100vh !important;
    resize: none !important;
  }
-  
+
  .card-details-maximized {
    padding: 0;
    flex-shrink: 0;
    flex-basis: calc(100% - 20px);
    will-change: flex-basis;
-    overflow-y: scroll;
-    overflow-x: scroll;
+    overflow-y: auto;
+    overflow-x: auto;
    background: #f7f7f7;
-    border-radius: bottom 3px;
+    border-radius: 0 0 3px 3px;
    z-index: 100;
    animation: flexGrowIn 0.1s;
    box-shadow: 0 0 7px 0 #b3b3b3;
    transition: flex-basis 0.1s;
    box-sizing: border-box;
    top: 97px;
-    left: 0px;
+    inset-inline-start: 0px;
    height: calc(100% - 100px);
    width: calc(100% - 20px);
-    float: left;
+    float: inline-start;
  }
  .card-details-maximized .card-details-left {
-    float: left;
+    float: inline-start;
    top: 60px;
-    left: 20px;
+    inset-inline-start: 20px;
    width: 47%;
-    border-right: solid 2px #dbdbdb;
-    padding-right: 10px;
+    border-inline-end: solid 2px #dbdbdb;
+    padding-inline-end: 10px;
  }
  .card-details-maximized .card-details-right {
    position: absolute;
-    float: right;
-    left: 50%;
+    float: inline-end;
+    inset-inline-start: 50%;
    margin: 15px 0;
  }
  .card-details-maximized .card-details-header {
@@ -467,12 +480,12 @@ body.desktop-mode .card-details.card-details-collapsed {
  }
 }
 input[type="text"].attachment-add-link-input {
-  float: left;
+  float: inline-start;
  margin: 0 0 8px;
  width: 80%;
 }
 input[type="submit"].attachment-add-link-submit {
-  float: left;
+  float: inline-start;
  margin: 0 0 8px 4px;
  padding: 6px 12px;
  width: 18%;
@@ -480,17 +493,16 @@ input[type="submit"].attachment-add-link-submit {
@media screen and (max-width: 800px) {
  .card-details {
    width: 100% !important;
-    padding: 0px 0px 0px 0px !important;
-    margin: 0px !important;
+    padding: 0 !important;
+    margin: 0 !important;
    transition: none;
    overflow-y: auto;
    overflow-x: hidden;
-    /* iOS Safari specific fixes */
    -webkit-overflow-scrolling: touch;
    position: fixed !important;
    top: 0 !important;
-    left: 0 !important;
-    right: 0 !important;
+    inset-inline-start: 0 !important;
+    inset-inline-end: 0 !important;
    bottom: 0 !important;
    z-index: 100 !important;
    height: 100vh !important;
@@ -498,43 +510,43 @@ input[type="submit"].attachment-add-link-submit {
    border-radius: 0 !important;
    box-shadow: none !important;
  }
-  
+
  /* Ensure card details are above everything on mobile */
  body.mobile-mode .card-details {
    z-index: 100 !important;
    width: 100vw !important;
-    left: 0 !important;
-    right: 0 !important;
+    inset-inline-start: 0 !important;
+    inset-inline-end: 0 !important;
  }
  .card-details .card-details-canvas {
    width: 100%;
-    padding-left: 0px;
+    padding-inline-start: 0px;
    padding: 0 15px;
  }
  .card-details .card-details-header .close-card-details {
-    margin-right: 0px;
+    margin-inline-end: 0px;
    display: block !important;
  }
  .card-details .card-details-header .close-card-details-mobile-web {
    display: block !important;
-    margin-right: 5px !important;
+    margin-inline-end: 5px !important;
  }
  .card-details .card-details-header .card-mobile-desktop-toggle {
    display: block !important;
-    margin-right: 5px !important;
+    margin-inline-end: 5px !important;
  }
  .card-details .card-details-header .card-mobile-desktop-toggle {
    display: block !important;
-    margin-right: 5px !important;
+    margin-inline-end: 5px !important;
  }
  .card-details .card-details-header .card-details-menu {
-    margin-right: 40px;
+    margin-inline-end: 40px;
  }
  .card-details .card-details-header .maximize-card-details {
-    margin-right: 40px;
+    margin-inline-end: 40px;
  }
  .card-details .card-details-header .minimize-card-details {
-    margin-right: 40px;
+    margin-inline-end: 40px;
  }
  .card-details-popup {
    padding: 0px 10px;
@@ -553,7 +565,7 @@ input[type="submit"].attachment-add-link-submit {
  }
  /* iPhone mobile: enlarge header buttons and increase spacing */
  body.mobile-mode.iphone-device .card-details .card-details-header {
-    padding-right: 16px;
+    padding-inline-end: 16px;
  }
  body.mobile-mode.iphone-device .card-details .card-details-header .close-card-details,
  body.mobile-mode.iphone-device .card-details .card-details-header .maximize-card-details,
@@ -565,12 +577,12 @@ input[type="submit"].attachment-add-link-submit {
  body.mobile-mode.iphone-device .card-details .card-details-header .card-zoom-out {
    font-size: 2em !important; /* 2x bigger */
    padding: 0.3em !important;
-    margin-right: 0.75em !important; /* 2x space compared to default */
-    margin-left: 0 !important;
+    margin-inline-end: 0.75em !important; /* 2x space compared to default */
+    margin-inline-start: 0 !important;
  }
  /* Avoid clipping of the close button on the right edge */
  body.mobile-mode.iphone-device .card-details .card-details-header .close-card-details {
-    margin-right: 0.75em !important;
+    margin-inline-end: 0.75em !important;
  }
  /* Enlarge the header title too */
  body.mobile-mode.iphone-device .card-details .card-details-header .card-details-title {
@@ -586,8 +598,8 @@ body.mobile-mode .card-details {
  margin: 0px !important;
  position: fixed !important;
  top: 0 !important;
-  left: 0 !important;
-  right: 0 !important;
+  inset-inline-start: 0 !important;
+  inset-inline-end: 0 !important;
  bottom: 0 !important;
  z-index: 100 !important;
  height: 100vh !important;
@@ -715,13 +727,15 @@ body.mobile-mode .card-details .card-details-header .close-card-details-mobile-w
 .vote-title {
  display: flex;
  justify-content: space-between;
+  align-items: center;
 }
 .vote-title .js-edit-date {
-  align-self: baseline;
-  margin-left: 5px;
+  align-self: flex-start;
+  margin-inline-start: 6px;
 }
 .vote-result {
  display: flex;
+  gap: 6px;
 }
 .js-show-positive-votes {
  cursor: pointer;
@@ -732,29 +746,33 @@ body.mobile-mode .card-details .card-details-header .close-card-details-mobile-w
 .poker-title {
  display: flex;
  justify-content: space-between;
+  align-items: center;
 }
 .poker-title .js-edit-date {
-  align-self: baseline;
-  margin-left: 5px;
+  align-self: flex-start;
+  margin-inline-start: 6px;
 }
 .poker-result {
  display: flex;
-  flex-flow: row wrap;
+  flex-wrap: wrap;
+  gap: 7px;
 }
 .js-show-positive-poker-votes {
  cursor: pointer;
 }
 .poker-deck {
  display: grid;
-  flex-direction: column;
+  grid-auto-flow: row;
  text-align: center;
+  gap: 6px;
 }
 .poker-card-result {
-  width: 32px;
+  width: 34px;
  font-size: 1em;
  font-weight: bold;
-  padding: 4px 2px 4px 2px;
+  padding: 4px 2px;
  cursor: default;
+  border-radius: 3px;
 }
 .winner {
  font-weight: bold;
@@ -765,6 +783,7 @@ body.mobile-mode .card-details .card-details-header .close-card-details-mobile-w
 }
 .responsive-table {
  overflow-x: auto;
+  width: 100%;
 }
 .poker-table {
  display: table;
@@ -808,11 +827,11 @@ body.mobile-mode .card-details .card-details-header .close-card-details-mobile-w
  display: inline-block;
 }
 .poker-table-side-right {
-  padding-left: 10px;
+  padding-inline-start: 10px;
 }
@media (max-width: 400px) {
  .poker-table-side-right {
-    padding-left: 0px;
+    padding-inline-start: 0px;
  }
 }
 .estimation-add {
@@ -823,20 +842,24 @@ body.mobile-mode .card-details .card-details-header .close-card-details-mobile-w
 }
 .estimation-add input {
  display: inline-block;
-  float: right;
+  float: inline-end;
  margin: auto;
-  margin-right: 10px;
+  margin-inline-end: 10px;
  width: 100px;
+  border-radius: 2px;
+  padding: 3px 6px;
 }
 .estimation-add button {
  display: inline-block;
-  float: right;
+  float: inline-end;
  margin: auto;
+  border-radius: 2px;
+  padding: 3px 10px;
 }
 .poker-card {
  width: 48px;
  height: 72px;
-  float: left;
+  float: inline-start;
  background: #fff;
  border-radius: 5px;
  display: table;
@@ -850,6 +873,7 @@ body.mobile-mode .card-details .card-details-header .close-card-details-mobile-w
  text-align: center;
  position: relative;
  cursor: pointer;
+  transition: box-shadow 0.12s;
 }
 .poker-card .inner {
  display: table-cell;
@@ -866,3 +890,194 @@ body.mobile-mode .card-details .card-details-header .close-card-details-mobile-w
  transform: scale(1.01);
  transition: all 0.2s ease;
 }
+
+/* Sticker picker + card-detail stickers + due-complete toggle */
+.card-stickers-picker {
+  max-width: 320px;
+}
+.card-sticker-select {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  margin: 2px;
+  border-radius: 3px;
+  font-size: 18px;
+  color: #4d4d4d;
+  cursor: pointer;
+  position: relative;
+}
+.card-sticker-select:hover {
+  background: #e0e0e0;
+}
+.card-sticker-select.active {
+  background: #d6ecd2;
+  color: #3cb500;
+}
+.card-sticker-select .card-sticker-check {
+  position: absolute;
+  bottom: 1px;
+  inset-inline-end: 2px;
+  font-size: 10px;
+  color: #3cb500;
+}
+.card-stickers .card-sticker {
+  display: inline-flex;
+  align-items: center;
+  margin: 0 8px 4px 0;
+  font-size: 18px;
+}
+.card-sticker .card-sticker-remove {
+  margin-inline-start: 3px;
+  font-size: 11px;
+  color: #999;
+  cursor: pointer;
+}
+.card-sticker .card-sticker-remove:hover {
+  color: #eb4646;
+}
+.card-due-complete-toggle {
+  display: inline-flex;
+  align-items: center;
+  margin-inline-start: 8px;
+  vertical-align: middle;
+}
+
+/* Trello-style "mark complete" toggle, left of the card title */
+.card-details-complete-toggle {
+  float: inline-start;
+  display: flex;
+  align-items: center;
+  /* Title is 1.35em with 1.3 line-height (~28px box) and margin-top 7px; push
+     the 13px checkbox down so it lands at the vertical middle of the title. */
+  margin: 14px 10px 0 0;
+  cursor: pointer;
+}
+
+/* Card locations: multiple locations, each editable with a remove button */
+.card-details-item-location .card-locations {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  margin-bottom: 6px;
+}
+.card-details-item-location .card-location {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  background: #fff;
+  border: 1px solid #e3e3e3;
+  border-radius: 4px;
+  padding: 6px 8px;
+}
+.card-details-item-location .card-location-info {
+  flex: 1;
+}
+.card-details-item-location .js-edit-location {
+  cursor: pointer;
+}
+.card-details-item-location .card-location-name {
+  font-weight: bold;
+}
+.card-details-item-location .card-location-address {
+  color: #4d4d4d;
+}
+.card-details-item-location .card-location-remove {
+  margin-inline-start: 8px;
+  color: #8c8c8c;
+  cursor: pointer;
+}
+.card-details-item-location .card-location-remove:hover {
+  color: #eb4646;
+}
+
+/* Sticker icon highlight styles (used instead of colour): taco pack => underline,
+   pete pack => round (ring around the icon). Icon keeps its normal colour. */
+.card-sticker i.sticker-underline {
+  border-bottom: 2px solid currentColor;
+  padding-bottom: 1px;
+  line-height: 1;
+}
+.card-sticker i.sticker-round {
+  border: 1px solid currentColor;
+  border-radius: 50%;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.6em;
+  height: 1.6em;
+  line-height: 1;
+  box-sizing: border-box;
+}
+
+/* "Open map links at" provider selector in the location popup */
+.js-card-location-form .map-provider-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  margin-bottom: 6px;
+}
+.js-card-location-form .map-provider-row .js-map-provider {
+  flex: 0 0 auto;
+  width: auto;
+}
+
+/* Opened card (card details popup) docks to the very top of the window and
+   overlays the global + board header bars instead of opening below them. The
+   base .pop-over is position:absolute with a small margin/top offset, which left
+   the card's top behind the fixed header bars; fix it to the viewport top with a
+   z-index above every header (headers top out around z-index 1000-2000). */
+/* The card details content (.card-details) is always position:fixed (see the
+   min-width:801px and max-width:800px media queries above), so it renders as its
+   own framed, viewport-positioned box and escapes this .pop-over wrapper. That
+   leaves the generic .pop-over chrome (white background, border, shadow, header
+   and ~380px width) visible as a redundant empty second popup at the top of the
+   page. Collapse the wrapper to nothing and make it invisible; the fixed card
+   descendant still renders normally on top of the page. Closing is handled by
+   the card's own close button (.js-close-card-details), clicking outside, or
+   pressing Escape. */
+.pop-over[data-popup="cardDetailsPopup"] {
+  position: fixed !important;
+  top: 0 !important;
+  inset-inline-start: 0 !important;
+  margin: 0 !important;
+  padding: 0 !important;
+  width: 0 !important;
+  height: 0 !important;
+  min-height: 0 !important;
+  background: none !important;
+  border: none !important;
+  box-shadow: none !important;
+  overflow: visible !important;
+  z-index: 100000 !important;
+}
+
+.pop-over[data-popup="cardDetailsPopup"] > .header {
+  display: none !important;
+}
+
+.pop-over[data-popup="cardDetailsPopup"] > .content-wrapper {
+  max-height: none !important;
+  overflow: visible !important;
+}
+
+/* Sticker highlight styles inside the sticker picker (mascot = underline,
+   computer = round), matching how they render on the card. */
+.card-sticker-select i.sticker-underline {
+  border-bottom: 2px solid currentColor;
+  padding-bottom: 1px;
+  line-height: 1;
+}
+.card-sticker-select i.sticker-round {
+  border: 1px solid currentColor;
+  border-radius: 50%;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.6em;
+  height: 1.6em;
+  line-height: 1;
+  box-sizing: border-box;
+}
@@ -11,31 +11,30 @@ template(name="cardDetails")
        +editCardTitleForm
      else
        unless isMiniScreen
-          unless isPopup
-            span.card-collapse-toggle.js-card-collapse-toggle(title="{{_ 'collapse-card'}}")
-              if cardCollapsed
-                i.fa.fa-caret-right
-              else
-                i.fa.fa-caret-down
-            a.close-card-details.js-close-card-details(title="{{_ 'close-card'}}")
-              i.fa.fa-times-thin
-            if cardMaximized
-              a.fa.fa-window-minimize.minimize-card-details.js-minimize-card-details(title="{{_ 'minimize-card'}}")
+          span.card-collapse-toggle.js-card-collapse-toggle(title="{{_ 'collapse-card'}}")
+            if cardCollapsed
+              i.fa.fa-caret-right
            else
-              a.fa.fa-window-maximize.maximize-card-details.js-maximize-card-details(title="{{_ 'maximize-card'}}")
-            a.card-details-menu.js-open-card-details-menu(title="{{_ 'cardDetailsActionsPopup-title'}}")
-              i.fa.fa-bars
-            a.card-copy-button.js-copy-link(
-              id="cardURL_copy"
-              title="{{_ 'copy-card-link-to-clipboard'}}"
-              href="{{ originRelativeUrl }}"
-            )
-              span.emoji-icon
-                i.fa.fa-link
-            if canModifyCard
-              span.card-drag-handle.js-card-drag-handle(title="Drag card")
-                i.fa.fa-arrows
-            span.copied-tooltip {{_ 'copied'}}
+              i.fa.fa-caret-down
+          a.close-card-details.js-close-card-details(title="{{_ 'close-card'}}")
+            i.fa.fa-times-thin
+          if cardMaximized
+            a.fa.fa-window-minimize.minimize-card-details.js-minimize-card-details(title="{{_ 'minimize-card'}}")
+          else
+            a.fa.fa-window-maximize.maximize-card-details.js-maximize-card-details(title="{{_ 'maximize-card'}}")
+          a.card-details-menu.js-open-card-details-menu(title="{{_ 'cardDetailsActionsPopup-title'}}")
+            i.fa.fa-bars
+          a.card-copy-button.js-copy-link(
+            id="cardURL_copy"
+            title="{{_ 'copy-card-link-to-clipboard'}}"
+            href="{{ originRelativeUrl }}"
+          )
+            span.emoji-icon
+              i.fa.fa-link
+          if canModifyCard
+            span.card-drag-handle.js-card-drag-handle(title="Drag card")
+              i.fa.fa-arrows
+          span.copied-tooltip {{_ 'copied'}}
        else
          a.close-card-details.js-close-card-details(title="{{_ 'close-card'}}")
            i.fa.fa-times-thin
@@ -62,12 +61,16 @@ template(name="cardDetails")
            span.emoji-icon
              i.fa.fa-link
          span.copied-tooltip {{_ 'copied'}}
+        if canModifyCard
+          if currentBoard.allowsDueComplete
+            a.card-details-complete-toggle.js-toggle-due-complete(title="{{#if getDueComplete}}{{_ 'card-mark-incomplete'}}{{else}}{{_ 'card-mark-complete'}}{{/if}}")
+              .materialCheckBox(class="{{#if getDueComplete}}is-checked{{/if}}")
        h2.card-details-title.js-card-title(
          class="{{#if canModifyCard}}js-open-inlined-form is-editable{{else}}js-card-title-drag-handle{{/if}}")
            +viewer
              if currentBoard.allowsCardNumber
                span.card-number
-                  | ##{getCardNumber}
+                  | ##{getCardNumber} &nbsp;
              = getTitle
            if isWatching
              i.card-details-watch
@@ -127,6 +130,49 @@ template(name="cardDetails")
                a.card-label.add-label.js-add-labels(title="{{_ 'card-labels-title'}}")
                  i.fa.fa-plus

+        .card-details-item.card-details-item-stickers
+          h3.card-details-item-title
+            i.fa.fa-sticky-note-o
+            | {{_ 'stickers'}}
+          .card-details-item-content.card-stickers
+            each stickers
+              span.card-sticker(title="{{#if name}}{{name}}{{else}}{{icon}}{{/if}}")
+                i.fa(class="fa-{{icon}} {{#if highlight}}sticker-{{highlight}}{{/if}}")
+                if canModifyCard
+                  a.card-sticker-remove.js-remove-sticker(data-index="{{@index}}" title="{{_ 'remove-sticker'}}")
+                    i.fa.fa-times
+            if canModifyCard
+              unless currentUser.isWorker
+                a.card-label.add-label.js-add-stickers(title="{{_ 'add-sticker'}}")
+                  i.fa.fa-plus
+
+        .card-details-item.card-details-item-location
+          h3.card-details-item-title
+            i.fa.fa-map-marker
+            | {{_ 'location'}}
+          .card-details-item-content.card-locations
+            each getLocations
+              .card-location
+                .card-location-info(class="{{#if canModifyCard}}js-edit-location{{/if}}" data-location-id="{{_id}}")
+                  if name
+                    .card-location-name= name
+                  if address
+                    .card-location-address= address
+                  if hasCoordinates
+                    a.card-location-map(href=mapUrl target="_blank" rel="noopener noreferrer")
+                      i.fa.fa-map-o
+                      = ' '
+                      | {{_ 'location-open-map'}}
+                if canModifyCard
+                  a.card-location-remove.js-remove-location(data-location-id="{{_id}}" title="{{_ 'delete'}}")
+                    i.fa.fa-times
+          if canModifyCard
+            unless currentUser.isWorker
+              a.card-label.add-label.js-add-location(title="{{_ 'add-location'}}")
+                i.fa.fa-plus
+
+        +cardButtons(_id=_id boardId=boardId)
+
        if currentBoard.hasAnyAllowsDate
          hr

@@ -276,6 +322,36 @@ template(name="cardDetails")
              +viewer
                = getAssignedBy

+        .card-details-item.card-details-item-dependencies
+          h3.card-details-item-title
+            i.fa.fa-link
+            | {{_ 'card-dependencies'}}
+          .card-details-dependencies-list
+            each getDependencyCards
+              .card-dependency(data-target-id="{{card._id}}")
+                i.fa(class="fa-{{icon}}" style="color:{{color}}")
+                a.card-dependency-link(href="{{linkUrl}}")
+                  +viewer
+                    = card.title
+                if canModifyCard
+                  select.js-dependency-type(data-target-id="{{card._id}}")
+                    each typeOption
+                      if selected
+                        option(value="{{id}}" selected="selected") {{_ label}}
+                      else
+                        option(value="{{id}}") {{_ label}}
+                  input.js-dependency-color(type="color" value="{{color}}" data-target-id="{{card._id}}" title="{{_ 'dependency-color'}}")
+                  a.js-dependency-icon(data-target-id="{{card._id}}" title="{{_ 'dependency-icon'}}")
+                    i.fa.fa-pencil
+                  a.card-dependency-remove.js-remove-dependency(data-target-id="{{card._id}}" title="{{_ 'remove-dependency'}}")
+                    i.fa.fa-times
+                else
+                  span.card-dependency-type {{_ typeLabel}}
+          if canModifyCard
+            a.js-add-dependency(title="{{_ 'add-dependency'}}")
+              i.fa.fa-plus
+              | {{_ 'add-dependency'}}
+
        if $or currentBoard.allowsCardSortingByNumber getSpentTime
          hr

@@ -298,7 +374,7 @@ template(name="cardDetails")
              i.fa.fa-list
              | {{_ 'list'}}
            select.js-select-card-details-lists(disabled="{{#unless canModifyCard}}disabled{{/unless}}")
-              each currentBoard.lists
+              each currentSwimlaneListsSorted
                option(value="{{_id}}" selected="{{#if isCurrentListId _id}}selected{{/if}}") {{title}}

        //.card-details-items
@@ -351,7 +427,8 @@ template(name="cardDetails")
              .card-label.card-label-green {{ voteCountPositive }}
              .card-label.card-label-red {{ voteCountNegative }}
            unless ($and currentBoard.isPublic voteAllowNonBoardMembers )
-              .card-label.card-label-gray  {{ voteCount }} {{_ 'r-of' }} {{ currentBoard.activeMembers.length }}
+              .card-label.card-label-gray
+                | {{ voteCount }} {{_ 'r-of' }} {{ currentBoard.activeMembers.length }}
        +viewer
          = getVoteQuestion
        if showVotingButtons
@@ -377,7 +454,8 @@ template(name="cardDetails")
            .poker-result
              if expiredPoker
                unless ($and currentBoard.isPublic pokerAllowNonBoardMembers )
-                  .card-label.card-label-gray  {{ pokerCount }} {{_ 'r-of' }} {{ currentBoard.activeMembers.length }}
+                  .card-label.card-label-gray
+                    | {{ pokerCount }} {{_ 'r-of' }} {{ currentBoard.activeMembers.length }}
        if showPlanningPokerButtons
          .poker-result
            .poker-deck
@@ -623,19 +701,18 @@ template(name="cardDetails")
            +attachmentGallery
      hr

-      unless currentUser.isNoComments
+      if currentBoard.allowsComments
        .comment-title
          h3.card-details-item-title
            i.fa.fa-comment-o
            | {{_ 'comments'}}

-        if currentBoard.allowsComments
-          if currentUser.isBoardMember
-            unless currentUser.isNoComments
-              unless currentUser.isReadOnly
-                unless currentUser.isReadAssignedOnly
-                  +commentForm
-              +comments
+        if currentUser.isBoardMember
+          unless currentUser.isNoComments
+            unless currentUser.isReadOnly
+              unless currentUser.isReadAssignedOnly
+                +commentForm
+        +comments
      hr

    .card-details-right
@@ -690,199 +767,300 @@ template(name="editCardSortOrderForm")
    a.js-close-inlined-form

 template(name="cardDetailsActionsPopup")
-  ul.pop-over-list
-    li
-      a.js-toggle-watch-card
-        if isWatching
-          i.fa.fa-eye
-          |  {{_ 'unwatch'}}
-        else
-          i.fa.fa-eye
-          |  {{_ 'watch'}}
-  hr
-  if canModifyCard
-    unless currentUser.isWorker
-      ul.pop-over-list
-        //li: a.js-members {{_ 'card-edit-members'}}
-        //li: a.js-labels {{_ 'card-edit-labels'}}
-        //li: a.js-attachments {{_ 'card-edit-attachments'}}
-        li
-          a.js-start-voting
-            i.fa.fa-thumbs-up
-            | {{_ 'card-edit-voting'}}
-        li
-          a.js-start-planning-poker
-            i.fa.fa-thumbs-up
-            | {{_ 'card-edit-planning-poker'}}
-        if currentUser.isBoardAdmin
-          li
-            a.js-custom-fields
-              i.fa.fa-list
-              | {{_ 'card-edit-custom-fields'}}
-        //li: a.js-received-date {{_ 'editCardReceivedDatePopup-title'}}
-        //li: a.js-start-date {{_ 'editCardStartDatePopup-title'}}
-        //li: a.js-due-date {{_ 'editCardDueDatePopup-title'}}
-        //li: a.js-end-date {{_ 'editCardEndDatePopup-title'}}
-        li
-          a.js-spent-time
-            i.fa.fa-clock-o
-            | {{_ 'editCardSpentTimePopup-title'}}
-        li
-          a.js-set-card-color
-            i.fa.fa-paint-brush
-            | {{_ 'setCardColorPopup-title'}}
-        li
-          a.js-toggle-show-list-on-minicard
-            if showListOnMinicard
-              i.fa.fa-eye
-              | {{_ 'hide-list-on-minicard'}}
-            else
-              i.fa.fa-eye
-              | {{_ 'show-list-on-minicard'}}
-  if canModifyCard
+  if currentUser
+    ul.pop-over-list
+      li
+        a.js-toggle-watch-card
+          if isWatching
+            i.fa.fa-eye
+            |  {{_ 'unwatch'}}
+          else
+            i.fa.fa-eye
+            |  {{_ 'watch'}}
    hr
-  else
-    unless currentUser.isReadOnly
-      unless currentUser.isReadAssignedOnly
-        hr
+    if canModifyCard
+      unless currentUser.isWorker
+        ul.pop-over-list
+          //li: a.js-members {{_ 'card-edit-members'}}
+          //li: a.js-labels {{_ 'card-edit-labels'}}
+          //li: a.js-attachments {{_ 'card-edit-attachments'}}
+          li
+            a.js-start-voting
+              i.fa.fa-thumbs-up
+              | {{_ 'card-edit-voting'}}
+          li
+            a.js-start-planning-poker
+              i.fa.fa-thumbs-up
+              | {{_ 'card-edit-planning-poker'}}
+          if currentUser.isBoardAdmin
+            li
+              a.js-custom-fields
+                i.fa.fa-list
+                | {{_ 'card-edit-custom-fields'}}
+          //li: a.js-received-date {{_ 'editCardReceivedDatePopup-title'}}
+          //li: a.js-start-date {{_ 'editCardStartDatePopup-title'}}
+          //li: a.js-due-date {{_ 'editCardDueDatePopup-title'}}
+          //li: a.js-end-date {{_ 'editCardEndDatePopup-title'}}
+          li
+            a.js-spent-time
+              i.fa.fa-clock-o
+              | {{_ 'editCardSpentTimePopup-title'}}
+          li
+            a.js-set-card-color
+              i.fa.fa-paint-brush
+              | {{_ 'setCardColorPopup-title'}}
+          li
+            a.js-toggle-show-list-on-minicard
+              if showListOnMinicard
+                i.fa.fa-eye
+                | {{_ 'hide-list-on-minicard'}}
+              else
+                i.fa.fa-eye
+                | {{_ 'show-list-on-minicard'}}
+    if canModifyCard
+      hr
+    else
+      unless currentUser.isReadOnly
+        unless currentUser.isReadAssignedOnly
+          hr
  ul.pop-over-list
    li
      a.js-export-card
        i.fa.fa-upload
        | {{_ 'export-card'}}
-  unless canModifyCard
-    unless currentUser.isReadOnly
-      unless currentUser.isReadAssignedOnly
-        hr
-        ul.pop-over-list
-          li
-            a.js-move-card-to-top
-              i.fa.fa-arrow-up
-              | {{_ 'moveCardToTop-title'}}
-          li
-            a.js-move-card-to-bottom
-              i.fa.fa-arrow-down
-              | {{_ 'moveCardToBottom-title'}}
-        hr
-        ul.pop-over-list
-          if currentUser.isBoardAdmin
-            li
-              a.js-move-card
-                i.fa.fa-arrow-right
-                | {{_ 'moveCardPopup-title'}}
-          unless currentUser.isWorker
-            li
-              a.js-copy-card
-                i.fa.fa-clipboard
-                | {{_ 'copyCardPopup-title'}}
-        unless currentUser.isWorker
-          ul.pop-over-list
-            li
-              a.js-copy-checklist-cards
-                i.fa.fa-copy
-                | {{_ 'copyManyCardsPopup-title'}}
-          unless archived
-            hr
-            ul.pop-over-list
-              li
-                a.js-archive
-                  i.fa.fa-archive
-                  | {{_ 'archive-card'}}
+  if currentUser
+    unless canModifyCard
+      unless currentUser.isReadOnly
+        unless currentUser.isReadAssignedOnly
          hr
          ul.pop-over-list
            li
-              a.js-more
-                span.emoji-icon
-                i.fa.fa-link
-                | {{_ 'cardMorePopup-title'}}
-  if canModifyCard
-    hr
-    ul.pop-over-list
-      li
-        a.js-move-card-to-top
-          i.fa.fa-arrow-up
-          | {{_ 'moveCardToTop-title'}}
-      li
-        a.js-move-card-to-bottom
-          i.fa.fa-arrow-down
-          | {{_ 'moveCardToBottom-title'}}
-    hr
-    ul.pop-over-list
-      if currentUser.isBoardAdmin
-        li
-          a.js-move-card
-            i.fa.fa-arrow-right
-            | {{_ 'moveCardPopup-title'}}
-      unless currentUser.isWorker
-        li
-          a.js-copy-card
-            i.fa.fa-clipboard
-            | {{_ 'copyCardPopup-title'}}
-    unless currentUser.isWorker
-      ul.pop-over-list
-        li
-          a.js-copy-checklist-cards
-            i.fa.fa-copy
-            | {{_ 'copyManyCardsPopup-title'}}
-      unless archived
-        hr
-        ul.pop-over-list
-          li
-            a.js-archive
-              i.fa.fa-archive
-              | {{_ 'archive-card'}}
+              a.js-move-card-to-top
+                i.fa.fa-arrow-up
+                | {{_ 'moveCardToTop-title'}}
+            li
+              a.js-move-card-to-bottom
+                i.fa.fa-arrow-down
+                | {{_ 'moveCardToBottom-title'}}
+          hr
+          ul.pop-over-list
+            if currentUser.isBoardAdmin
+              li
+                a.js-move-card
+                  i.fa.fa-arrow-right
+                  | {{_ 'moveCardPopup-title'}}
+            unless currentUser.isWorker
+              li
+                a.js-copy-card
+                  i.fa.fa-clipboard
+                  | {{_ 'copyCardPopup-title'}}
+          unless currentUser.isWorker
+            ul.pop-over-list
+              li
+                a.js-copy-checklist-cards
+                  i.fa.fa-copy
+                  | {{_ 'copyManyCardsPopup-title'}}
+            unless archived
+              hr
+              ul.pop-over-list
+                li
+                  a.js-archive
+                    i.fa.fa-archive
+                    | {{_ 'archive-card'}}
+            hr
+            ul.pop-over-list
+              li
+                a.js-more
+                  span.emoji-icon
+                  i.fa.fa-link
+                  | {{_ 'cardMorePopup-title'}}
+    if canModifyCard
      hr
      ul.pop-over-list
        li
-          a.js-more
-            span.emoji-icon
-              i.fa.fa-link
-            | {{_ 'cardMorePopup-title'}}
+          a.js-move-card-to-top
+            i.fa.fa-arrow-up
+            | {{_ 'moveCardToTop-title'}}
+        li
+          a.js-move-card-to-bottom
+            i.fa.fa-arrow-down
+            | {{_ 'moveCardToBottom-title'}}
+      hr
+      ul.pop-over-list
+        if currentUser.isBoardAdmin
+          li
+            a.js-move-card
+              i.fa.fa-arrow-right
+              | {{_ 'moveCardPopup-title'}}
+        unless currentUser.isWorker
+          li
+            a.js-copy-card
+              i.fa.fa-clipboard
+              | {{_ 'copyCardPopup-title'}}
+      unless currentUser.isWorker
+        ul.pop-over-list
+          li
+            a.js-copy-checklist-cards
+              i.fa.fa-copy
+              | {{_ 'copyManyCardsPopup-title'}}
+        unless archived
+          hr
+          ul.pop-over-list
+            li
+              a.js-archive
+                i.fa.fa-archive
+                | {{_ 'archive-card'}}
+        hr
+        ul.pop-over-list
+          li
+            a.js-more
+              span.emoji-icon
+                i.fa.fa-link
+              | {{_ 'cardMorePopup-title'}}

 template(name="exportCardPopup")
  ul.pop-over-list
    li
-      a(href="{{exportUrlCardPDF}}",, download="{{exportFilenameCardPDF}}")
-        i.fa.fa-upload
+      a(href="{{exportUrlCardPDF}}", download="{{exportFilenameCardPDF}}")
+        i.fa.fa-file-pdf-o
        | {{_ 'export-card-pdf'}}
+  hr
+  p.quiet {{_ 'export-card-excel-fields'}}
+  ul.pop-over-list
+    each excelExportFields
+      li(class="{{#if checked}}active{{/if}}")
+        a.js-excel-field-toggle(data-field="{{field}}" href="#")
+          i.fa.fa-check
+          | {{_ label}}
+  ul.pop-over-list
+    li
+      a(href="{{exportUrlCardExcel}}", download="{{exportFilenameCardExcel}}")
+        i.fa.fa-file-excel-o
+        | {{_ 'download'}}

 template(name="moveCardPopup")
-  +copyAndMoveCard
+  label(for='move-card-title') {{_ 'title'}}:
+  input#move-card-title.full-line(type="text" value="{{getTitle}}" autofocus)
+  unless currentUser.isWorker
+    label {{_ 'boards'}}:
+    select.js-select-boards(autofocus)
+      each boards
+        option(value="{{_id}}" selected="{{#if isSelectedBoardId _id}}selected{{/if}}") {{add @index 1}}. {{title}}
+
+  label {{_ 'swimlanes'}}:
+  select.js-select-swimlanes
+    each swimlanes
+      option(value="{{_id}}" selected="{{#if isSelectedSwimlaneId _id}}selected{{/if}}") {{add @index 1}}. {{isTitleDefault title}}
+
+  label {{_ 'lists'}}:
+  select.js-select-lists
+    each lists
+      option(value="{{_id}}" selected="{{#if isSelectedListId _id}}selected{{/if}}") {{add @index 1}}. {{title}}
+
+  label {{_ 'cards'}}:
+  select.js-select-cards
+    each cards
+      option(value="{{_id}}" selected="{{#if isDialogOptionCardId _id}}selected{{/if}}") {{add @index 1}}. {{title}}
+
+  div
+    input(type="radio" name="position" value="above" checked id="position-above" style="display: inline")
+    label(for="position-above") {{_ 'above-selected-card'}}
+  div
+    input(type="radio" name="position" value="below" id="position-below" style="display: inline")
+    label(for="position-below") {{_ 'below-selected-card'}}
+
+  .edit-controls.clearfix
+    button.primary.confirm.js-done {{_ 'done'}}

 template(name="copyCardPopup")
  label(for='copy-card-title') {{_ 'title'}}:
  textarea#copy-card-title.minicard-composer-textarea.js-card-title(autofocus)
    = getTitle
-  +copyAndMoveCard
+  unless currentUser.isWorker
+    label {{_ 'boards'}}:
+    select.js-select-boards(autofocus)
+      each boards
+        option(value="{{_id}}" selected="{{#if isSelectedBoardId _id}}selected{{/if}}") {{add @index 1}}. {{title}}
+
+  label {{_ 'swimlanes'}}:
+  select.js-select-swimlanes
+    each swimlanes
+      option(value="{{_id}}" selected="{{#if isSelectedSwimlaneId _id}}selected{{/if}}") {{add @index 1}}. {{isTitleDefault title}}
+
+  label {{_ 'lists'}}:
+  select.js-select-lists
+    each lists
+      option(value="{{_id}}" selected="{{#if isSelectedListId _id}}selected{{/if}}") {{add @index 1}}. {{title}}
+
+  label {{_ 'cards'}}:
+  select.js-select-cards
+    each cards
+      option(value="{{_id}}" selected="{{#if isDialogOptionCardId _id}}selected{{/if}}") {{add @index 1}}. {{title}}
+
+  div
+    input(type="radio" name="position" value="above" checked id="position-above" style="display: inline")
+    label(for="position-above") {{_ 'above-selected-card'}}
+  div
+    input(type="radio" name="position" value="below" id="position-below" style="display: inline")
+    label(for="position-below") {{_ 'below-selected-card'}}
+
+  .edit-controls.clearfix
+    button.primary.confirm.js-done {{_ 'done'}}

 template(name="copyManyCardsPopup")
  label(for='copy-checklist-cards-title') {{_ 'copyManyCardsPopup-instructions'}}:
  textarea#copy-card-title.minicard-composer-textarea.js-card-title(autofocus)
    | {{_ 'copyManyCardsPopup-format'}}
-  +copyAndMoveCard
+  unless currentUser.isWorker
+    label {{_ 'boards'}}:
+    select.js-select-boards(autofocus)
+      each boards
+        option(value="{{_id}}" selected="{{#if isSelectedBoardId _id}}selected{{/if}}") {{add @index 1}}. {{title}}
+
+  label {{_ 'swimlanes'}}:
+  select.js-select-swimlanes
+    each swimlanes
+      option(value="{{_id}}" selected="{{#if isSelectedSwimlaneId _id}}selected{{/if}}") {{add @index 1}}. {{isTitleDefault title}}
+
+  label {{_ 'lists'}}:
+  select.js-select-lists
+    each lists
+      option(value="{{_id}}" selected="{{#if isSelectedListId _id}}selected{{/if}}") {{add @index 1}}. {{title}}
+
+  label {{_ 'cards'}}:
+  select.js-select-cards
+    each cards
+      option(value="{{_id}}" selected="{{#if isDialogOptionCardId _id}}selected{{/if}}") {{add @index 1}}. {{title}}
+
+  div
+    input(type="radio" name="position" value="above" checked id="position-above" style="display: inline")
+    label(for="position-above") {{_ 'above-selected-card'}}
+  div
+    input(type="radio" name="position" value="below" id="position-below" style="display: inline")
+    label(for="position-below") {{_ 'below-selected-card'}}
+
+  .edit-controls.clearfix
+    button.primary.confirm.js-done {{_ 'done'}}

 template(name="convertChecklistItemToCardPopup")
  label(for='convert-checklist-item-to-card-title') {{_ 'title'}}:
  textarea#copy-card-title.minicard-composer-textarea.js-card-title(autofocus)
    = item.title
-  +copyAndMoveCard
-
-template(name="copyAndMoveCard")
  unless currentUser.isWorker
    label {{_ 'boards'}}:
    select.js-select-boards(autofocus)
      each boards
-        option(value="{{_id}}" selected="{{#if isDialogOptionBoardId _id}}selected{{/if}}") {{add @index 1}}. {{title}}
+        option(value="{{_id}}" selected="{{#if isSelectedBoardId _id}}selected{{/if}}") {{add @index 1}}. {{title}}

  label {{_ 'swimlanes'}}:
  select.js-select-swimlanes
    each swimlanes
-      option(value="{{_id}}" selected="{{#if isDialogOptionSwimlaneId _id}}selected{{/if}}") {{add @index 1}}. {{isTitleDefault title}}
+      option(value="{{_id}}" selected="{{#if isSelectedSwimlaneId _id}}selected{{/if}}") {{add @index 1}}. {{isTitleDefault title}}

  label {{_ 'lists'}}:
  select.js-select-lists
    each lists
-      option(value="{{_id}}" selected="{{#if isDialogOptionListId _id}}selected{{/if}}") {{add @index 1}}. {{title}}
+      option(value="{{_id}}" selected="{{#if isSelectedListId _id}}selected{{/if}}") {{add @index 1}}. {{title}}

  label {{_ 'cards'}}:
  select.js-select-cards
@@ -925,7 +1103,8 @@ template(name="cardAssigneesPopup")
              if userData.username
                | (#{userData.username})
            if isCardAssignee
-              i.fa.fa-check  if currentUser.isWorker
+              i.fa.fa-check
+  if currentUser.isWorker
    ul.pop-over-list.js-card-assignee-list
      li.item(class="{{#if currentUser.isCardAssignee}}active{{/if}}")
        a.name.js-select-assignee(href="#")
@@ -990,7 +1169,7 @@ template(name="cardMorePopup")
              option(value="{{_id}}") {{title}}
    br
    | {{_ 'added'}}
-    span.date(title=card.createdAt) {{ moment createdAt 'LLL' }}
+    span.date(title=card.createdAt) {{ displayDate createdAt 'LLL' }}
    if currentUser.isBoardAdmin
      a.js-delete(title="{{_ 'card-delete-notice'}}") {{_ 'delete'}}

@@ -1094,3 +1273,78 @@ template(name="cardStartPlanningPokerPopup")
    if getPokerQuestion
      if currentUser.isBoardAdmin
        button.js-remove-poker.negate.wide.right {{_ 'delete'}}
+
+template(name="cardLocationsPopup")
+  form.js-card-location-form
+    label
+      | {{_ 'location-detect-from-map'}}
+      input.js-location-map-link(type="text" placeholder="https://..." autofocus)
+    button.primary.js-detect-location(type="button") {{_ 'location-detect'}}
+    if detectMessage
+      p.quiet.js-detect-message {{detectMessage}}
+    hr
+    label
+      | {{_ 'location-name'}}
+      input.js-location-name(type="text" value="{{location.name}}")
+    label
+      | {{_ 'location-address'}}
+      input.js-location-address(type="text" value="{{location.address}}")
+    label
+      | {{_ 'location-latitude'}}
+      input.js-location-latitude(type="number" step="any" value="{{location.latitude}}")
+    label
+      | {{_ 'location-longitude'}}
+      input.js-location-longitude(type="number" step="any" value="{{location.longitude}}")
+    button.primary.confirm.js-submit-location(type="submit") {{_ 'save'}}
+    if location._id
+      button.negate.wide.right.js-delete-location(type="button") {{_ 'delete'}}
+    hr
+    .map-provider-row
+      span.map-provider-label {{_ 'location-open-map-at'}}
+      select.js-map-provider
+        optgroup(label="{{_ 'map-region-usa'}}")
+          option(value="google" selected="{{#if isMapProvider 'google'}}selected{{/if}}") Google Maps
+          option(value="bing" selected="{{#if isMapProvider 'bing'}}selected{{/if}}") Bing Maps
+          option(value="apple" selected="{{#if isMapProvider 'apple'}}selected{{/if}}") Apple Maps
+          option(value="waze" selected="{{#if isMapProvider 'waze'}}selected{{/if}}") Waze
+        optgroup(label="{{_ 'map-region-europe'}}")
+          option(value="openstreetmap" selected="{{#if isMapProvider 'openstreetmap'}}selected{{/if}}") OpenStreetMap
+          option(value="here" selected="{{#if isMapProvider 'here'}}selected{{/if}}") HERE WeGo
+          option(value="yandex" selected="{{#if isMapProvider 'yandex'}}selected{{/if}}") Yandex Maps
+          option(value="mapy" selected="{{#if isMapProvider 'mapy'}}selected{{/if}}") Mapy.cz
+          option(value="2gis" selected="{{#if isMapProvider '2gis'}}selected{{/if}}") 2GIS
+        optgroup(label="{{_ 'map-region-asia'}}")
+          option(value="baidu" selected="{{#if isMapProvider 'baidu'}}selected{{/if}}") Baidu Maps
+          option(value="amap" selected="{{#if isMapProvider 'amap'}}selected{{/if}}") Amap (Gaode)
+    button.primary.js-save-map-provider(type="button") {{_ 'save'}}
+    if mapSavedMessage
+      p.quiet.js-map-saved {{mapSavedMessage}}
+
+template(name="cardDependenciesPopup")
+  .card-dependencies-popup
+    label.dependency-field
+      span {{_ 'dependency-type'}}
+      select.js-new-dependency-type
+        each typeOption
+          if selected
+            option(value="{{id}}" selected="selected") {{_ label}}
+          else
+            option(value="{{id}}") {{_ label}}
+    label.dependency-field
+      span {{_ 'dependency-color'}}
+      input.js-new-dependency-color(type="color" value="{{defaultColor}}")
+    input.js-dependency-search(type="text" placeholder="{{_ 'search'}}" autofocus)
+    ul.pop-over-list
+      each candidateCards
+        li
+          a.js-pick-dependency(data-target-id="{{_id}}")
+            +viewer
+              = title
+
+template(name="cardDependencyIconPopup")
+  .card-dependency-icon-popup
+    ul.card-dependency-icons
+      each dependencyIcons
+        li
+          a.js-pick-dependency-icon(data-icon="{{name}}" title="{{name}}")
+            i.fa(class="fa-{{name}}")
@@ -0,0 +1,7 @@
+template(name="cardStickersPopup")
+  .card-stickers-picker.clearfix
+    each stickerIcons
+      a.card-sticker-select.js-select-sticker(class="{{#if isSelected}}active{{/if}}" title="{{stickerTitle}}")
+        i.fa(class="fa-{{icon}} {{#if highlight}}sticker-{{highlight}}{{/if}}")
+        if isSelected
+          i.fa.fa-check.card-sticker-check
@@ -0,0 +1,39 @@
+import { ReactiveCache } from '/imports/reactiveCache';
+import { STICKER_PICKER } from '/models/metadata/stickers';
+
+// Picker popup that lets a user add/remove stickers on a card. Each entry is
+// { icon, highlight?, name? }: the plain Font Awesome icons plus the mascot
+// (underlined) and computer (ringed) highlighted stickers. Opened from the card
+// details stickers section with the card as the data context.
+
+Template.cardStickersPopup.onCreated(function () {
+  const data = Template.currentData();
+  this.cardId = data && data._id;
+});
+
+function pickerCard(tpl) {
+  return ReactiveCache.getCard(tpl.cardId);
+}
+
+Template.cardStickersPopup.helpers({
+  stickerIcons() {
+    return STICKER_PICKER;
+  },
+  isSelected() {
+    const card = pickerCard(Template.instance());
+    return !!(card && card.hasSticker(this.icon, this.highlight));
+  },
+  stickerTitle() {
+    return this.name || this.icon;
+  },
+});
+
+Template.cardStickersPopup.events({
+  'click .js-select-sticker'(event) {
+    event.preventDefault();
+    const card = pickerCard(Template.instance());
+    if (card) {
+      card.toggleSticker(this.icon, this.highlight, this.name);
+    }
+  },
+});
@@ -14,5 +14,5 @@
  font-size: inherit;
  -webkit-font-smoothing: antialiased;
  content: "\f017";
-  margin-right: 0.3em;
+  margin-inline-end: 0.3em;
 }
@@ -1,4 +1,4 @@
-template(name="editCardSpentTime")
+template(name="editCardSpentTimePopup")
  .edit-card-time
    form.edit-time
      .fields
@@ -13,7 +13,7 @@ template(name="editCardSpentTime")
      button.primary.wide.left.js-submit-time(type="submit") {{_ 'save'}}
      button.js-delete-time.negate.wide.right {{_ 'delete'}}

-template(name="timeBadge")
+template(name="cardSpentTime")
  if canModifyCard
    a.js-edit-time.card-time(title="{{_ 'time'}}" class="{{#if getIsOvertime}}card-label-red{{else}}card-label-green{{/if}}")
      | ⏱️ {{showTime}}
@@ -1,85 +1,91 @@
 import { TAPi18n } from '/imports/i18n';
+import Cards from '/models/cards';
+import { getCurrentCardIdFromContext } from '/client/lib/currentCard';

-BlazeComponent.extendComponent({
-  template() {
-    return 'editCardSpentTime';
+function getCardId() {
+  return getCurrentCardIdFromContext();
+}
+
+Template.editCardSpentTimePopup.onCreated(function () {
+  this.error = new ReactiveVar('');
+  this.card = Cards.findOne(getCardId());
+});
+
+Template.editCardSpentTimePopup.helpers({
+  error() {
+    return Template.instance().error;
  },
-  onCreated() {
-    this.error = new ReactiveVar('');
-    this.card = this.data();
+  card() {
+    return Cards.findOne(getCardId());
  },
-  toggleOvertime() {
-    this.card.setIsOvertime(!this.card.getIsOvertime());
+  getIsOvertime() {
+    const card = Cards.findOne(getCardId());
+    return card?.getIsOvertime ? card.getIsOvertime() : false;
+  },
+});
+
+Template.editCardSpentTimePopup.events({
+  //TODO : need checking this portion
+  'submit .edit-time'(evt, tpl) {
+    evt.preventDefault();
+    const card = Cards.findOne(getCardId());
+    if (!card) return;
+
+    const spentTime = parseFloat(evt.target.time.value);
+    let isOvertime = false;
+    if ($('#overtime').attr('class').indexOf('is-checked') >= 0) {
+      isOvertime = true;
+    }
+    if (spentTime >= 0) {
+      card.setSpentTime(spentTime);
+      card.setIsOvertime(isOvertime);
+      Popup.back();
+    } else {
+      tpl.error.set('invalid-time');
+      evt.target.time.focus();
+    }
+  },
+  'click .js-delete-time'(evt) {
+    evt.preventDefault();
+    const card = Cards.findOne(getCardId());
+    if (!card) return;
+    card.setSpentTime(null);
+    card.setIsOvertime(false);
+    Popup.back();
+  },
+  'click a.js-toggle-overtime'(evt) {
+    const card = Cards.findOne(getCardId());
+    if (!card) return;
+    card.setIsOvertime(!card.getIsOvertime());
    $('#overtime .materialCheckBox').toggleClass('is-checked');
    $('#overtime').toggleClass('is-checked');
  },
-  storeTime(spentTime, isOvertime) {
-    this.card.setSpentTime(spentTime);
-    this.card.setIsOvertime(isOvertime);
-  },
-  deleteTime() {
-    this.card.setSpentTime(null);
-    this.card.setIsOvertime(false);
-  },
-  events() {
-    return [
-      {
-        //TODO : need checking this portion
-        'submit .edit-time'(evt) {
-          evt.preventDefault();
+});

-          const spentTime = parseFloat(evt.target.time.value);
-          //const isOvertime = this.card.getIsOvertime();
-          let isOvertime = false;
-          if ($('#overtime').attr('class').indexOf('is-checked') >= 0) {
-            isOvertime = true;
-          }
-          if (spentTime >= 0) {
-            this.storeTime(spentTime, isOvertime);
-            Popup.back();
-          } else {
-            this.error.set('invalid-time');
-            evt.target.time.focus();
-          }
-        },
-        'click .js-delete-time'(evt) {
-          evt.preventDefault();
-          this.deleteTime();
-          Popup.back();
-        },
-        'click a.js-toggle-overtime': this.toggleOvertime,
-      },
-    ];
-  },
-}).register('editCardSpentTimePopup');
-
-BlazeComponent.extendComponent({
-  template() {
-    return 'timeBadge';
-  },
-  onCreated() {
-    const self = this;
-    self.time = ReactiveVar();
-  },
+Template.cardSpentTime.helpers({
  showTitle() {
-    if (this.data().getIsOvertime()) {
+    const card = Cards.findOne(this._id) || this;
+    if (card.getIsOvertime && card.getIsOvertime()) {
      return `${TAPi18n.__(
        'overtime',
-      )} ${this.data().getSpentTime()} ${TAPi18n.__('hours')}`;
-    } else {
+      )} ${card.getSpentTime()} ${TAPi18n.__('hours')}`;
+    } else if (card.getSpentTime) {
      return `${TAPi18n.__(
        'card-spent',
-      )} ${this.data().getSpentTime()} ${TAPi18n.__('hours')}`;
+      )} ${card.getSpentTime()} ${TAPi18n.__('hours')}`;
    }
+    return '';
  },
  showTime() {
-    return this.data().getSpentTime();
+    const card = Cards.findOne(this._id) || this;
+    return card.getSpentTime ? card.getSpentTime() : '';
  },
-  events() {
-    return [
-      {
-        'click .js-edit-time': Popup.open('editCardSpentTime'),
-      },
-    ];
+  getIsOvertime() {
+    const card = Cards.findOne(this._id) || this;
+    return card.getIsOvertime ? card.getIsOvertime() : false;
  },
-}).register('cardSpentTime');
+});
+
+Template.cardSpentTime.events({
+  'click .js-edit-time': Popup.open('editCardSpentTime'),
+});
@@ -14,7 +14,7 @@ textarea.js-edit-checklist-item {
  color: #8c8c8c;
  text-decoration: underline;
  word-wrap: break-word;
-  float: right;
+  float: inline-end;
  padding-top: 6px;
 }
 .delete-text:hover,
@@ -32,7 +32,7 @@ textarea.js-edit-checklist-item {
  align-items: center;
 }
 .checklist-progress-bar-container .checklist-progress-text {
-  margin-right: 10px;
+  margin-inline-end: 10px;
 }
 .checklist-progress-bar-container .checklist-progress-bar {
  width: 80%;
@@ -51,7 +51,7 @@ textarea.js-edit-checklist-item {
  padding: 10px;
 }
 .checklist-title .checkbox {
-  float: left;
+  float: inline-start;
  width: 30px;
  height: 30px;
  font-size: 18px;
@@ -63,21 +63,21 @@ textarea.js-edit-checklist-item {
 }
 .checklist-title .checklist-stat {
  margin: 0 0.5em;
-  float: right;
+  float: inline-end;
  padding-top: 6px;
 }
 .checklist-title .checklist-stat.is-finished {
  color: #3cb500;
 }
 .checklist-title span.fa.checklist-handle {
-  padding-right: 20px;
+  padding-inline-end: 20px;
  padding-top: 3px;
-  float: left;
+  float: inline-start;
 }
 #card-details-overlay {
  top: 0;
  bottom: -600px;
-  right: 0;
+  inset-inline-end: 0;
 }
 .checklist {
  background: #f7f7f7;
@@ -123,14 +123,14 @@ textarea.js-edit-checklist-item {
  background-color: #ebebeb;
 }
 .checklist-item .check-box-container {
-  padding-right: 10px;
+  padding-inline-end: 10px;
 }
 .checklist-item .check-box {
  margin: 0.1em 0 0 0;
 }
 .checklist-item .check-box.is-checked {
  border-bottom: 2px solid #3cb500;
-  border-right: 2px solid #3cb500;
+  border-inline-end: 2px solid #3cb500;
 }
 .checklist-item .item-title {
  flex: 1;
@@ -148,7 +148,7 @@ textarea.js-edit-checklist-item {
 }
 .checklist-item span.fa.checklistitem-handle {
  padding-top: 2px;
-  padding-right: 10px;
+  padding-inline-end: 10px;
 }
 .js-delete-checklist-item,
 .js-convert-checklist-item-to-card {
@@ -171,9 +171,9 @@ textarea.js-edit-checklist-item {
 }
 .add-checklist-top {
  /* more space to checklists title */
-  padding-left: 20px;
+  padding-inline-start: 20px;
  /* + is easier clickable */
-  padding-right: 20px;
+  padding-inline-end: 20px;
 }
 .add-checklist-top.js-open-inlined-form:hover {
  background: #dbdbdb;
@@ -185,9 +185,9 @@ textarea.js-edit-checklist-item {
  width: 100%;
 }
 .checklist-details-menu {
-  float: right;
+  float: inline-end;
  padding: 6px 10px 6px 10px;
 }
 .edit-controls label.toggle-label {
-  margin-left: 2px;
+  margin-inline-start: 2px;
 }
@@ -4,7 +4,8 @@ template(name="checklists")
      i.fa.fa-check
      | {{_ 'checklists'}}
      if canModifyCard
-        +inlinedForm(autoclose=false classNames="js-add-checklist" cardId = cardId  position="top")
+        +inlinedForm(autoclose=false classNames="js-add-checklist" cardId = cardId
+          position="top")
          +addChecklistItemForm
        else
          a.add-checklist-top.js-open-inlined-form(title="{{_ 'add-checklist'}}")
@@ -33,7 +34,7 @@ template(name="checklists")
 template(name="checklistDetail")
  .js-checklist.checklist.nodragscroll
    +inlinedForm(classNames="js-edit-checklist-title" checklist = checklist)
-      +editChecklistItemForm(checklist = checklist)
+      +editChecklistForm(checklist = checklist)
    else
      .checklist-title
        span
@@ -62,6 +63,10 @@ template(name="checklistDeletePopup")
  p {{_ 'confirm-checklist-delete-popup'}}
  button.js-confirm.negate.full(type="submit") {{_ 'delete'}}

+template(name="checklistItemDeletePopup")
+  p {{_ 'confirm-checklist-item-delete-popup'}}
+  button.js-confirm.negate.full(type="submit") {{_ 'delete'}}
+
 template(name="addChecklistItemForm")
  a.fa.fa-copy(title="{{_ 'copy-text-to-clipboard'}}")
  span.copied-tooltip {{_ 'copied'}}
@@ -80,6 +85,19 @@ template(name="addChecklistItemForm")
          label.toggle-label(for="toggleNewlineBecomesNewChecklistItemOriginOrder")
          | {{_ 'originOrder'}}

+template(name="editChecklistForm")
+  a.fa.fa-copy(title="{{_ 'copy-text-to-clipboard'}}")
+  span.copied-tooltip {{_ 'copied'}}
+  textarea.js-edit-checklist-item(rows='1' autofocus dir="auto")
+    if $eq type 'item'
+      = item.title
+    else
+      = checklist.title
+  .edit-controls.clearfix
+    button.primary.confirm.js-submit-edit-checklist-item-form(type="submit") {{_ 'save'}}
+    a.fa.fa-times-thin.js-close-inlined-form(title="{{_ 'close-edit-checklist-item'}}")
+    span(title=createdAt) {{ displayDate createdAt }}
+
 template(name="editChecklistItemForm")
  a.fa.fa-copy(title="{{_ 'copy-text-to-clipboard'}}")
  span.copied-tooltip {{_ 'copied'}}
@@ -91,7 +109,7 @@ template(name="editChecklistItemForm")
  .edit-controls.clearfix
    button.primary.confirm.js-submit-edit-checklist-item-form(type="submit") {{_ 'save'}}
    a.fa.fa-times-thin.js-close-inlined-form(title="{{_ 'close-edit-checklist-item'}}")
-    span(title=createdAt) {{ moment createdAt }}
+    span(title=createdAt) {{ displayDate createdAt }}
    if canModifyCard
      a.js-delete-checklist-item {{_ "delete"}}...
      a.js-convert-checklist-item-to-card
@@ -166,6 +184,15 @@ template(name="checklistActionsPopup")
          else
            input.toggle-switch(type="checkbox" id="toggleHideAllChecklistItems_{{checklist._id}}")
          label.toggle-label(for="toggleHideAllChecklistItems_{{checklist._id}}")
+      a.js-show-checklist-at-minicard
+        i.fa.fa-th-list
+        | {{_ "show-on-minicard"}} ...
+        .material-toggle-switch(title="{{_ 'show-on-minicard'}}")
+          if checklist.showChecklistAtMinicard
+            input.toggle-switch(type="checkbox" id="toggleShowChecklistAtMinicard_{{checklist._id}}" checked="checked")
+          else
+            input.toggle-switch(type="checkbox" id="toggleShowChecklistAtMinicard_{{checklist._id}}")
+          label.toggle-label(for="toggleShowChecklistAtMinicard_{{checklist._id}}")

 template(name="copyChecklistPopup")
  +copyAndMoveChecklist
@@ -2,10 +2,15 @@ import { ReactiveCache } from '/imports/reactiveCache';
 import { TAPi18n } from '/imports/i18n';
 import Cards from '/models/cards';
 import Boards from '/models/boards';
-import { DialogWithBoardSwimlaneListCard } from '/client/lib/dialogWithBoardSwimlaneListCard';
+import ChecklistItems from '/models/checklistItems';
+import Checklists from '/models/checklists';
+import { BoardSwimlaneListCardDialog } from '/client/lib/dialogWithBoardSwimlaneListCard';
+import { EscapeActions } from '/client/lib/escapeActions';
+import { Utils } from '/client/lib/utils';
+import autosize from 'autosize';

-const subManager = new SubsManager();
-const { calculateIndexData, capitalize } = Utils;
+// SubsManager removed for Meteor 3 migration
+const { calculateIndexData } = Utils;

 function initSorting(items) {
  items.sortable({
@@ -45,55 +50,66 @@ function initSorting(items) {
  });
 }

-BlazeComponent.extendComponent({
-  onRendered() {
-    const self = this;
-    self.itemsDom = this.$('.js-checklist-items');
-    initSorting(self.itemsDom);
-    self.itemsDom.mousedown(function (evt) {
-      evt.stopPropagation();
-    });
+Template.checklistDetail.onRendered(function () {
+  const tpl = this;
+  tpl.itemsDom = this.$('.js-checklist-items');
+  initSorting(tpl.itemsDom);
+  tpl.itemsDom.mousedown(function (evt) {
+    evt.stopPropagation();
+  });

-    function userIsMember() {
-      return ReactiveCache.getCurrentUser()?.isBoardMember();
-    }
+  function userIsMember() {
+    return ReactiveCache.getCurrentUser()?.isBoardMember();
+  }

-    // Disable sorting if the current user is not a board member
-    self.autorun(() => {
-      const $itemsDom = $(self.itemsDom);
-      if ($itemsDom.data('uiSortable') || $itemsDom.data('sortable')) {
-        $(self.itemsDom).sortable('option', 'disabled', !userIsMember());
-        if (Utils.isTouchScreenOrShowDesktopDragHandles()) {
-          $(self.itemsDom).sortable({
-            handle: 'span.fa.checklistitem-handle',
-          });
-        }
+  // Disable sorting if the current user is not a board member
+  tpl.autorun(() => {
+    const $itemsDom = $(tpl.itemsDom);
+    if ($itemsDom.data('uiSortable') || $itemsDom.data('sortable')) {
+      $(tpl.itemsDom).sortable('option', 'disabled', !userIsMember());
+      if (Utils.isTouchScreenOrShowDesktopDragHandles()) {
+        $(tpl.itemsDom).sortable({
+          handle: 'span.fa.checklistitem-handle',
+        });
      }
-    });
-  },
+    }
+  });
+});

+Template.checklistDetail.helpers({
  /** returns the finished percent of the checklist */
  finishedPercent() {
-    const ret = this.data().checklist.finishedPercent();
+    const ret = this.checklist.finishedPercent();
    return ret;
  },
-}).register('checklistDetail');
+});

-BlazeComponent.extendComponent({
-  addChecklist(event) {
+Template.checklists.helpers({
+  checklists() {
+    const card = ReactiveCache.getCard(this.cardId);
+    if (!card || typeof card.checklists !== 'function') {
+      return [];
+    }
+    const ret = card.checklists();
+    return ret;
+  },
+});
+
+Template.checklists.events({
+  'click .js-open-checklist-details-menu': Popup.open('checklistActions'),
+  'submit .js-add-checklist'(event, tpl) {
    event.preventDefault();
-    const textarea = this.find('textarea.js-add-checklist-item');
+    const textarea = tpl.find('textarea.js-add-checklist-item');
    const title = textarea.value.trim();
-    let cardId = this.currentData().cardId;
+    let cardId = Template.currentData().cardId;
    const card = ReactiveCache.getCard(cardId);
-    //if (card.isLinked()) cardId = card.linkedId;
    if (card.isLinkedCard()) {
      cardId = card.linkedId;
    }

    let sortIndex;
    let checklistItemIndex;
-    if (this.currentData().position === 'top') {
+    if (Template.currentData().position === 'top') {
      sortIndex = Utils.calculateIndexData(null, card.firstChecklist()).base;
      checklistItemIndex = 0;
    } else {
@@ -107,35 +123,63 @@ BlazeComponent.extendComponent({
        title,
        sort: sortIndex,
      });
-      this.closeAllInlinedForms();
+      tpl.$('.js-close-inlined-form').click();
      setTimeout(() => {
-        this.$('.add-checklist-item')
+        tpl.$('.add-checklist-item')
          .eq(checklistItemIndex)
          .click();
      }, 100);
    }
  },
-  addChecklistItem(event) {
+  'submit .js-edit-checklist-title'(event, tpl) {
    event.preventDefault();
-    const textarea = this.find('textarea.js-add-checklist-item');
-    const newlineBecomesNewChecklistItem = this.find('input#toggleNewlineBecomesNewChecklistItem');
-    const newlineBecomesNewChecklistItemOriginOrder = this.find('input#toggleNewlineBecomesNewChecklistItemOriginOrder');
+    const textarea = tpl.find('textarea.js-edit-checklist-item');
    const title = textarea.value.trim();
-    const checklist = this.currentData().checklist;
+    const formData = Blaze.getData(event.currentTarget) || Blaze.getData(event.target);
+    const checklist = formData?.checklist;
+    if (checklist) {
+      checklist.setTitle(title);
+    }
+  },
+  'submit .js-add-checklist-item'(event, tpl) {
+    event.preventDefault();
+    const textarea = tpl.find('textarea.js-add-checklist-item');
+    if (!textarea) {
+      return;
+    }
+    const newlineBecomesNewChecklistItem = tpl.find('input#toggleNewlineBecomesNewChecklistItem');
+    const newlineBecomesNewChecklistItemOriginOrder = tpl.find('input#toggleNewlineBecomesNewChecklistItemOriginOrder');
+    const title = textarea.value.trim();
+    const currentData = Template.currentData() || {};
+    let resolvedData = currentData;
+    let checklist = currentData.checklist;
+    if (!checklist) {
+      const form = event.currentTarget?.closest
+        ? event.currentTarget.closest('form')
+        : $(event.target).closest('form').get(0);
+      const formData = form ? Blaze.getData(form) : null;
+      if (formData) {
+        resolvedData = formData;
+      }
+      checklist = formData?.checklist;
+    }
+    if (!checklist) {
+      return;
+    }

    if (title) {
      let checklistItems = [title];
-      if (newlineBecomesNewChecklistItem.checked) {
+      if (newlineBecomesNewChecklistItem?.checked) {
        checklistItems = title.split('\n').map(_value => _value.trim());
-        if (this.currentData().position === 'top') {
-          if (newlineBecomesNewChecklistItemOriginOrder.checked === false) {
+        if (resolvedData.position === 'top') {
+          if (newlineBecomesNewChecklistItemOriginOrder?.checked === false) {
            checklistItems = checklistItems.reverse();
          }
        }
      }
      let addIndex;
      let sortIndex;
-      if (this.currentData().position === 'top') {
+      if (resolvedData.position === 'top') {
        sortIndex = Utils.calculateIndexData(null, checklist.firstItem()).base;
        addIndex = -1;
      } else {
@@ -156,33 +200,33 @@ BlazeComponent.extendComponent({
    textarea.value = '';
    textarea.focus();
  },
-
-  deleteItem() {
-    const checklist = this.currentData().checklist;
-    const item = this.currentData().item;
-    if (checklist && item && item._id) {
-      ChecklistItems.remove(item._id);
+  'submit .js-edit-checklist-item'(event, tpl) {
+    event.preventDefault();
+    const textarea = tpl.find('textarea.js-edit-checklist-item');
+    const title = textarea.value.trim();
+    const formData = Blaze.getData(event.currentTarget) || Blaze.getData(event.target);
+    const item = formData?.item;
+    if (item) {
+      item.setTitle(title);
    }
  },
-
-  editChecklist(event) {
-    event.preventDefault();
-    const textarea = this.find('textarea.js-edit-checklist-item');
-    const title = textarea.value.trim();
-    const checklist = this.currentData().checklist;
-    checklist.setTitle(title);
+  'click .js-convert-checklist-item-to-card': Popup.open('convertChecklistItemToCard'),
+  'click .js-delete-checklist-item': Popup.afterConfirm('checklistItemDelete', function () {
+    Popup.back();
+    const item = this?.item || this;
+    if (item && item._id) {
+      ChecklistItems.remove(item._id);
+    }
+  }),
+  // add and delete checklist / checklist-item
+  'click .js-open-inlined-form'(event, tpl) {
+    tpl.$('.js-close-inlined-form').click();
  },
-
-  editChecklistItem(event) {
+  'click #toggleHideFinishedChecklist'(event) {
    event.preventDefault();
-
-    const textarea = this.find('textarea.js-edit-checklist-item');
-    const title = textarea.value.trim();
-    const item = this.currentData().item;
-    item.setTitle(title);
+    Template.currentData().card.toggleHideFinishedChecklist();
  },
-
-  pressKey(event) {
+  'keydown textarea.js-add-checklist-item'(event) {
    //If user press enter key inside a form, submit it
    //Unless the user is also holding down the 'shift' key
    if (event.keyCode === 13 && !event.shiftKey) {
@@ -191,201 +235,206 @@ BlazeComponent.extendComponent({
      $form.find('button[type=submit]').click();
    }
  },
+});

-  focusChecklistItem(event) {
-    // If a new checklist is created, pre-fill the title and select it.
-    const checklist = this.currentData().checklist;
-    if (!checklist) {
-      const textarea = event.target;
-      textarea.value = capitalize(TAPi18n.__('r-checklist'));
-      textarea.select();
-    }
-  },
+// NOTE: boardsSwimlanesAndLists template was removed from jade but JS was left behind.
+// This is dead code — the template no longer exists in any jade file.

-  /** closes all inlined forms (checklist and checklist-item input fields) */
-  closeAllInlinedForms() {
-    this.$('.js-close-inlined-form').click();
-  },
+Template.addChecklistItemForm.onRendered(function () {
+  autosize(this.$('textarea.js-add-checklist-item'));
+});

-  events() {
-    return [
-      {
-        'click .js-open-checklist-details-menu': Popup.open('checklistActions'),
-        'submit .js-add-checklist': this.addChecklist,
-        'submit .js-edit-checklist-title': this.editChecklist,
-        'submit .js-add-checklist-item': this.addChecklistItem,
-        'submit .js-edit-checklist-item': this.editChecklistItem,
-        'click .js-convert-checklist-item-to-card': Popup.open('convertChecklistItemToCard'),
-        'click .js-delete-checklist-item': this.deleteItem,
-        'focus .js-add-checklist-item': this.focusChecklistItem,
-        // add and delete checklist / checklist-item
-        'click .js-open-inlined-form': this.closeAllInlinedForms,
-        'click #toggleHideFinishedChecklist'(event) {
-          event.preventDefault();
-          this.data().card.toggleHideFinishedChecklist();
-        },
-        keydown: this.pressKey,
-      },
-    ];
-  },
-}).register('checklists');
+Template.addChecklistItemForm.events({
+  'click a.fa.fa-copy'(event, tpl) {
+    const $editor = tpl.$('textarea');
+    const promise = Utils.copyTextToClipboard($editor[0].value);

-BlazeComponent.extendComponent({
-  onCreated() {
-    subManager.subscribe('board', Session.get('currentBoard'), false);
-    this.selectedBoardId = new ReactiveVar(Session.get('currentBoard'));
-  },
-
-  boards() {
-    const ret = ReactiveCache.getBoards(
-      {
-        archived: false,
-        'members.userId': Meteor.userId(),
-        _id: { $ne: ReactiveCache.getCurrentUser().getTemplatesBoardId() },
-      },
-      {
-        sort: { sort: 1 /* boards default sorting */ },
-      },
-    );
-    return ret;
-  },
-
-  swimlanes() {
-    const board = ReactiveCache.getBoard(this.selectedBoardId.get());
-    return board.swimlanes();
-  },
-
-  aBoardLists() {
-    const board = ReactiveCache.getBoard(this.selectedBoardId.get());
-    return board.lists();
-  },
-
-  events() {
-    return [
-      {
-        'change .js-select-boards'(event) {
-          this.selectedBoardId.set($(event.currentTarget).val());
-          subManager.subscribe('board', this.selectedBoardId.get(), false);
-        },
-      },
-    ];
-  },
-}).register('boardsSwimlanesAndLists');
-
-Template.checklists.helpers({
-  checklists() {
-    const card = ReactiveCache.getCard(this.cardId);
-    const ret = card.checklists();
-    return ret;
+    const $tooltip = tpl.$('.copied-tooltip');
+    Utils.showCopied(promise, $tooltip);
  },
 });

-BlazeComponent.extendComponent({
-  onRendered() {
-    autosize(this.$('textarea.js-add-checklist-item'));
+Template.checklistActionsPopup.events({
+  'click .js-delete-checklist': Popup.afterConfirm('checklistDelete', function () {
+    Popup.back(2);
+    const checklist = this.checklist;
+    if (checklist && checklist._id) {
+      Checklists.remove(checklist._id);
+    }
+  }),
+  'click .js-move-checklist': Popup.open('moveChecklist'),
+  'click .js-copy-checklist': Popup.open('copyChecklist'),
+  'click .js-hide-checked-checklist-items'(event) {
+    event.preventDefault();
+    Template.currentData().checklist.toggleHideCheckedChecklistItems();
+    Popup.back();
  },
-  events() {
-    return [
-      {
-        'click a.fa.fa-copy'(event) {
-          const $editor = this.$('textarea');
-          const promise = Utils.copyTextToClipboard($editor[0].value);
-
-          const $tooltip = this.$('.copied-tooltip');
-          Utils.showCopied(promise, $tooltip);
-        },
-      }
-    ];
-  }
-}).register('addChecklistItemForm');
-
-BlazeComponent.extendComponent({
-  events() {
-    return [
-      {
-        'click .js-delete-checklist': Popup.afterConfirm('checklistDelete', function () {
-          Popup.back(2);
-          const checklist = this.checklist;
-          if (checklist && checklist._id) {
-            Checklists.remove(checklist._id);
-          }
-        }),
-        'click .js-move-checklist': Popup.open('moveChecklist'),
-        'click .js-copy-checklist': Popup.open('copyChecklist'),
-        'click .js-hide-checked-checklist-items'(event) {
-          event.preventDefault();
-          this.data().checklist.toggleHideCheckedChecklistItems();
-          Popup.back();
-        },
-        'click .js-hide-all-checklist-items'(event) {
-          event.preventDefault();
-          this.data().checklist.toggleHideAllChecklistItems();
-          Popup.back();
-        },
-      }
-    ]
-  }
-}).register('checklistActionsPopup');
-
-BlazeComponent.extendComponent({
-  onRendered() {
-    autosize(this.$('textarea.js-edit-checklist-item'));
+  'click .js-hide-all-checklist-items'(event) {
+    event.preventDefault();
+    Template.currentData().checklist.toggleHideAllChecklistItems();
+    Popup.back();
  },
-  events() {
-    return [
-      {
-        'click a.fa.fa-copy'(event) {
-          const $editor = this.$('textarea');
-          const promise = Utils.copyTextToClipboard($editor[0].value);
+  'click .js-show-checklist-at-minicard'(event) {
+    event.preventDefault();
+    Template.currentData().checklist.toggleShowChecklistAtMinicard();
+    Popup.back();
+  },
+});

-          const $tooltip = this.$('.copied-tooltip');
-          Utils.showCopied(promise, $tooltip);
-        },
-      }
-    ];
-  }
-}).register('editChecklistItemForm');
+Template.editChecklistItemForm.onRendered(function () {
+  autosize(this.$('textarea.js-edit-checklist-item'));
+});
+
+Template.editChecklistItemForm.events({
+  'click a.fa.fa-copy'(event, tpl) {
+    const $editor = tpl.$('textarea');
+    const promise = Utils.copyTextToClipboard($editor[0].value);
+
+    const $tooltip = tpl.$('.copied-tooltip');
+    Utils.showCopied(promise, $tooltip);
+  },
+});

 Template.checklistItemDetail.helpers({
 });

-BlazeComponent.extendComponent({
-  toggleItem() {
-    const checklist = this.currentData().checklist;
-    const item = this.currentData().item;
+Template.checklistItemDetail.events({
+  'click .js-checklist-item .check-box-container'() {
+    const checklist = Template.currentData().checklist;
+    const item = Template.currentData().item;
    if (checklist && item && item._id) {
      item.toggleItem();
    }
  },
-  events() {
-    return [
-      {
-        'click .js-checklist-item .check-box-container': this.toggleItem,
-      },
-    ];
+});
+
+/**
+ * Helper to find the dialog instance from a parent popup template.
+ * copyAndMoveChecklist is included inside moveChecklistPopup / copyChecklistPopup,
+ * so we traverse up the view hierarchy to find the parent template's dialog.
+ */
+function getParentDialog(tpl) {
+  let view = tpl.view.parentView;
+  while (view) {
+    if (view.templateInstance && view.templateInstance() && view.templateInstance().dialog) {
+      return view.templateInstance().dialog;
+    }
+    view = view.parentView;
+  }
+  return null;
+}
+
+/** Shared helpers for copyAndMoveChecklist sub-template */
+Template.copyAndMoveChecklist.helpers({
+  boards() {
+    const dialog = getParentDialog(Template.instance());
+    return dialog ? dialog.boards() : [];
  },
-}).register('checklistItemDetail');
+  swimlanes() {
+    const dialog = getParentDialog(Template.instance());
+    return dialog ? dialog.swimlanes() : [];
+  },
+  lists() {
+    const dialog = getParentDialog(Template.instance());
+    return dialog ? dialog.lists() : [];
+  },
+  cards() {
+    const dialog = getParentDialog(Template.instance());
+    return dialog ? dialog.cards() : [];
+  },
+  isDialogOptionBoardId(boardId) {
+    const dialog = getParentDialog(Template.instance());
+    return dialog ? dialog.isDialogOptionBoardId(boardId) : false;
+  },
+  isDialogOptionSwimlaneId(swimlaneId) {
+    const dialog = getParentDialog(Template.instance());
+    return dialog ? dialog.isDialogOptionSwimlaneId(swimlaneId) : false;
+  },
+  isDialogOptionListId(listId) {
+    const dialog = getParentDialog(Template.instance());
+    return dialog ? dialog.isDialogOptionListId(listId) : false;
+  },
+  isDialogOptionCardId(cardId) {
+    const dialog = getParentDialog(Template.instance());
+    return dialog ? dialog.isDialogOptionCardId(cardId) : false;
+  },
+  isTitleDefault(title) {
+    const dialog = getParentDialog(Template.instance());
+    return dialog ? dialog.isTitleDefault(title) : title;
+  },
+});
+
+/**
+ * Helper: register standard card dialog events on a checklist popup template.
+ * Events bubble up from the copyAndMoveChecklist sub-template to the parent popup.
+ */
+function registerChecklistDialogEvents(templateName) {
+  Template[templateName].events({
+    async 'click .js-done'(event, tpl) {
+      const dialog = tpl.dialog;
+      const boardSelect = tpl.$('.js-select-boards')[0];
+      const boardId = boardSelect.options[boardSelect.selectedIndex].value;
+
+      const listSelect = tpl.$('.js-select-lists')[0];
+      const listId = listSelect.options[listSelect.selectedIndex].value;
+
+      const swimlaneSelect = tpl.$('.js-select-swimlanes')[0];
+      const swimlaneId = swimlaneSelect.options[swimlaneSelect.selectedIndex].value;
+
+      const cardSelect = tpl.$('.js-select-cards')[0];
+      const cardId = cardSelect.options.length > 0
+        ? cardSelect.options[cardSelect.selectedIndex].value
+        : null;
+
+      const options = { boardId, swimlaneId, listId, cardId };
+      try {
+        await dialog.setDone(cardId, options);
+      } catch (e) {
+        console.error('Error in card dialog operation:', e);
+      }
+      Popup.back(2);
+    },
+    'change .js-select-boards'(event, tpl) {
+      tpl.dialog.getBoardData($(event.currentTarget).val());
+    },
+    'change .js-select-swimlanes'(event, tpl) {
+      tpl.dialog.selectedSwimlaneId.set($(event.currentTarget).val());
+      tpl.dialog.setFirstListId();
+    },
+    'change .js-select-lists'(event, tpl) {
+      tpl.dialog.selectedListId.set($(event.currentTarget).val());
+      tpl.dialog.selectedCardId.set('');
+    },
+    'change .js-select-cards'(event, tpl) {
+      tpl.dialog.selectedCardId.set($(event.currentTarget).val());
+    },
+  });
+}

 /** Move Checklist Dialog */
-(class extends DialogWithBoardSwimlaneListCard {
-  getDialogOptions() {
-    const ret = ReactiveCache.getCurrentUser().getMoveChecklistDialogOptions();
-    return ret;
-  }
-  setDone(cardId, options) {
-    ReactiveCache.getCurrentUser().setMoveChecklistDialogOption(this.currentBoardId, options);
-    this.data().checklist.move(cardId);
-  }
-}).register('moveChecklistPopup');
+Template.moveChecklistPopup.onCreated(function () {
+  this.dialog = new BoardSwimlaneListCardDialog(this, {
+    getDialogOptions() {
+      return ReactiveCache.getCurrentUser().getMoveChecklistDialogOptions();
+    },
+    async setDone(cardId, options) {
+      ReactiveCache.getCurrentUser().setMoveChecklistDialogOption(this.currentBoardId, options);
+      await Template.currentData().checklist.move(cardId);
+    },
+  });
+});
+registerChecklistDialogEvents('moveChecklistPopup');

 /** Copy Checklist Dialog */
-(class extends DialogWithBoardSwimlaneListCard {
-  getDialogOptions() {
-    const ret = ReactiveCache.getCurrentUser().getCopyChecklistDialogOptions();
-    return ret;
-  }
-  setDone(cardId, options) {
-    ReactiveCache.getCurrentUser().setCopyChecklistDialogOption(this.currentBoardId, options);
-    this.data().checklist.copy(cardId);
-  }
-}).register('copyChecklistPopup');
+Template.copyChecklistPopup.onCreated(function () {
+  this.dialog = new BoardSwimlaneListCardDialog(this, {
+    getDialogOptions() {
+      return ReactiveCache.getCurrentUser().getCopyChecklistDialogOptions();
+    },
+    async setDone(cardId, options) {
+      ReactiveCache.getCurrentUser().setCopyChecklistDialogOption(this.currentBoardId, options);
+      await Template.currentData().checklist.copy(cardId);
+    },
+  });
+});
+registerChecklistDialogEvents('copyChecklistPopup');
@@ -0,0 +1,6 @@
+template(name='inlinedCardDescription')
+  if isOpen.get
+    form.inlined-form.js-inlined-form(id=id class=classNames)
+      +Template.contentBlock
+  else
+    +Template.elseBlock
@@ -5,7 +5,7 @@
  display: inline-block;
  font-weight: 700;
  font-size: 13px;
-  margin-right: 4px;
+  margin-inline-end: 4px;
  margin-bottom: 5px;
  padding: 3px 8px;
  max-width: 210px;
@@ -140,7 +140,7 @@
 }
 .edit-label .card-label,
 .create-label .card-label {
-  float: left;
+  float: inline-start;
  height: 25px;
  margin: 0px 3% 7px 0px;
  width: 10.5%;
@@ -153,7 +153,7 @@
 }
 .edit-labels .card-label {
  height: 30px;
-  left: 0;
+  inset-inline-start: 0;
  padding: 1px 5px;
  position: absolute;
  top: 0;
@@ -164,7 +164,7 @@
  margin-bottom: 4px;
  position: relative;
  top: auto;
-  left: 0;
+  inset-inline-start: 0;
  width: 260px;
 }
 .edit-labels-pop-over {
@@ -185,24 +185,24 @@
  min-height: 18px;
  padding: 8px;
  position: relative;
-  transition: margin-right 0.1s;
+  transition: margin-inline-end 0.1s;
 }
 .card-label-selectable .card-label-selectable-icon {
  position: absolute;
  top: 8px;
-  right: -20px;
+  inset-inline-end: -20px;
 }
 .card-label-selectable.active:hover,
 .card-label-selectable.active,
 .card-label-selectable.active.selected:hover,
 .card-label-selectable.active.selected {
-  padding-right: 32px;
+  padding-inline-end: 32px;
 }
 .card-label-selectable.active:hover .card-label-selectable-icon,
 .card-label-selectable.active .card-label-selectable-icon,
 .card-label-selectable.active.selected:hover .card-label-selectable-icon,
 .card-label-selectable.active.selected .card-label-selectable-icon {
-  right: 6px;
+  inset-inline-end: 6px;
 }
 .card-label-selectable.selected,
 .card-label-selectable:hover {
@@ -210,21 +210,21 @@
 }
 .active .card-label-selectable,
 .active .card-label-selectable:hover {
-  margin-right: 0;
+  margin-inline-end: 0;
 }
 .active .card-label-selectable .card-label-selectable-icon {
-  right: 8px;
+  inset-inline-end: 8px;
 }
 .card-label-edit-button {
  border-radius: 3px;
-  float: right;
+  float: inline-end;
  padding: 8px;
 }
 .card-label-edit-button:hover {
  background: #dbdbdb;
 }
 ul.edit-labels-pop-over span.label-handle {
-  padding-right: 10px;
+  padding-inline-end: 10px;
  display: inline-block;
  width: 1.2em;
  text-align: center;
@@ -1,119 +1,117 @@
 import { ReactiveCache } from '/imports/reactiveCache';
+import { LABEL_COLORS } from '/models/metadata/colors';
+import { EscapeActions } from '/client/lib/escapeActions';
+import { Utils } from '/client/lib/utils';

 let labelColors;
 Meteor.startup(() => {
-  labelColors = Boards.simpleSchema()._schema['labels.$.color'].allowedValues;
+  labelColors = LABEL_COLORS;
 });

-BlazeComponent.extendComponent({
-  onCreated() {
-    this.currentColor = new ReactiveVar(this.data().color);
-  },
+const getFallbackLabelColor = () => {
+  if (Array.isArray(labelColors) && labelColors.length > 0) {
+    return labelColors[0];
+  }
+  return 'green';
+};

+Template.formLabel.onCreated(function () {
+  const initialColor = this.data?.color || getFallbackLabelColor();
+  this.currentColor = new ReactiveVar(initialColor);
+});
+
+Template.formLabel.helpers({
  labels() {
-    return labelColors.map(color => ({ color, name: '' }));
+    const colors = Array.isArray(labelColors) ? labelColors : [getFallbackLabelColor()];
+    return colors.map(color => ({ color, name: '' }));
  },
-
  isSelected(color) {
-    return this.currentColor.get() === color;
+    return Template.instance().currentColor.get() === color;
  },
+});

-  events() {
-    return [
-      {
-        'click .js-palette-color'() {
-          this.currentColor.set(this.currentData().color);
-        },
-      },
-    ];
+Template.formLabel.events({
+  'click .js-palette-color'(event, tpl) {
+    const paletteData = Blaze.getData(event.currentTarget);
+    const selectedColor = paletteData?.color || Template.currentData()?.color || getFallbackLabelColor();
+    tpl.currentColor.set(selectedColor);
  },
-}).register('formLabel');
+});

 Template.createLabelPopup.helpers({
  // This is the default color for a new label. We search the first color that
  // is not already used in the board (although it's not a problem if two
  // labels have the same color).
  defaultColor() {
-    const labels = Utils.getCurrentBoard().labels;
-    const usedColors = _.pluck(labels, 'color');
-    const availableColors = _.difference(labelColors, usedColors);
-    return availableColors.length > 1 ? availableColors[0] : labelColors[0];
+    const board = Utils.getCurrentBoard();
+    const colors = Array.isArray(labelColors) ? labelColors : [getFallbackLabelColor()];
+    const labels = Array.isArray(board?.labels) ? board.labels : [];
+    const usedColors = labels.map(l => l.color);
+    const availableColors = colors.filter(c => !usedColors.includes(c));
+    return availableColors.length > 0 ? availableColors[0] : colors[0];
  },
 });

-BlazeComponent.extendComponent({
-  onRendered() {
-    const itemsSelector = 'li.js-card-label-item:not(.placeholder)';
-    const $labels = this.$('.edit-labels-pop-over');
+Template.cardLabelsPopup.onRendered(function () {
+  const tpl = this;
+  const itemsSelector = 'li.js-card-label-item:not(.placeholder)';
+  const $labels = tpl.$('.edit-labels-pop-over');

-    $labels.sortable({
-      connectWith: '.edit-labels-pop-over',
-      tolerance: 'pointer',
-      appendTo: '.edit-labels-pop-over',
-      helper(element, currentItem) {
-        let ret = currentItem.clone();
-        if (currentItem.closest('.popup-container-depth-0').length == 0)
-        { // only set css transform at every sub-popup, not at the main popup
-          const content = currentItem.closest('.content')[0]
-          const offsetLeft = content.offsetLeft;
-          const offsetTop = $('.pop-over > .header').height() * -1;
-          ret.css("transform", `translate(${offsetLeft}px, ${offsetTop}px)`);
-        }
-        return ret;
-      },
-      distance: 7,
-      items: itemsSelector,
-      placeholder: 'card-label-wrapper placeholder',
-      start(evt, ui) {
-        ui.helper.css('z-index', 1000);
-        ui.placeholder.height(ui.helper.height());
-        EscapeActions.clickExecute(evt.target, 'inlinedForm');
-      },
-      stop(evt, ui) {
-        const newLabelOrderOnlyIds = ui.item.parent().children().toArray().map(_element => Blaze.getData(_element)._id)
-        const card = Blaze.getData(this);
-        card.board().setNewLabelOrder(newLabelOrderOnlyIds);
-      },
-    });
-
-    // Disable drag-dropping if the current user is not a board member or is comment only
-    this.autorun(() => {
-      if (Utils.isTouchScreenOrShowDesktopDragHandles()) {
-        $labels.sortable({
-          handle: '.label-handle',
-        });
+  $labels.sortable({
+    connectWith: '.edit-labels-pop-over',
+    tolerance: 'pointer',
+    appendTo: '.edit-labels-pop-over',
+    helper(element, currentItem) {
+      let ret = currentItem.clone();
+      if (currentItem.closest('.popup-container-depth-0').length == 0)
+      { // only set css transform at every sub-popup, not at the main popup
+        const content = currentItem.closest('.content')[0]
+        const offsetLeft = content.offsetLeft;
+        const offsetTop = $('.pop-over > .header').height() * -1;
+        ret.css("transform", `translate(${offsetLeft}px, ${offsetTop}px)`);
      }
-    });
+      return ret;
+    },
+    distance: 7,
+    items: itemsSelector,
+    placeholder: 'card-label-wrapper placeholder',
+    start(evt, ui) {
+      ui.helper.css('z-index', 1000);
+      ui.placeholder.height(ui.helper.height());
+      EscapeActions.clickExecute(evt.target, 'inlinedForm');
+    },
+    stop(evt, ui) {
+      const newLabelOrderOnlyIds = ui.item.parent().children().toArray().map(_element => Blaze.getData(_element)._id)
+      const card = Blaze.getData(this);
+      card.board().setNewLabelOrder(newLabelOrderOnlyIds);
+    },
+  });
+
+  // Disable drag-dropping if the current user is not a board member or is comment only
+  tpl.autorun(() => {
+    if (Utils.isTouchScreenOrShowDesktopDragHandles()) {
+      $labels.sortable({
+        handle: '.label-handle',
+      });
+    }
+  });
+});
+
+Template.cardLabelsPopup.helpers({
+  isLabelSelected(cardId) {
+    return (ReactiveCache.getCard(cardId).labelIds || []).includes(this._id);
  },
-  events() {
-    return [
-      {
-        'click .js-select-label'(event) {
-          const card = this.data();
-          const labelId = this.currentData()._id;
-          card.toggleLabel(labelId);
-          event.preventDefault();
-        },
-        'click .js-edit-label': Popup.open('editLabel'),
-        'click .js-add-label': Popup.open('createLabel'),
-      }
-    ];
-  }
-}).register('cardLabelsPopup');
+});

 Template.cardLabelsPopup.events({
-});
-
-Template.formLabel.events({
-  'click .js-palette-color'(event) {
-    const $this = $(event.currentTarget);
-
-    // hide selected ll colors
-    $('.js-palette-select').addClass('hide');
-
-    // show select color
-    $this.find('.js-palette-select').removeClass('hide');
+  'click .js-select-label'(event) {
+    const card = Template.currentData();
+    const labelId = this._id;
+    card.toggleLabel(labelId);
+    event.preventDefault();
  },
+  'click .js-edit-label': Popup.open('editLabel'),
+  'click .js-add-label': Popup.open('createLabel'),
 });

 Template.createLabelPopup.events({
@@ -121,11 +119,19 @@ Template.createLabelPopup.events({
  'submit .create-label'(event, templateInstance) {
    event.preventDefault();
    const board = Utils.getCurrentBoard();
+    if (!board) {
+      return;
+    }
    const name = templateInstance
      .$('#labelName')
      .val()
      .trim();
-    const color = Blaze.getData(templateInstance.find('.fa-check')).color;
+    const selectedColorIcon = templateInstance.find('.js-palette-color .fa-check');
+    const selectedPaletteNode = selectedColorIcon?.closest
+      ? selectedColorIcon.closest('.js-palette-color')
+      : null;
+    const selectedColorData = selectedPaletteNode && Blaze.getData(selectedPaletteNode);
+    const color = selectedColorData?.color || getFallbackLabelColor();
    board.addLabel(name, color);
    Popup.back();
  },
@@ -140,18 +146,20 @@ Template.editLabelPopup.events({
  'submit .edit-label'(event, templateInstance) {
    event.preventDefault();
    const board = Utils.getCurrentBoard();
+    if (!board) {
+      return;
+    }
    const name = templateInstance
      .$('#labelName')
      .val()
      .trim();
-    const color = Blaze.getData(templateInstance.find('.fa-check')).color;
+    const selectedColorIcon = templateInstance.find('.js-palette-color .fa-check');
+    const selectedPaletteNode = selectedColorIcon?.closest
+      ? selectedColorIcon.closest('.js-palette-color')
+      : null;
+    const selectedColorData = selectedPaletteNode && Blaze.getData(selectedPaletteNode);
+    const color = selectedColorData?.color || getFallbackLabelColor();
    board.editLabel(this._id, name, color);
    Popup.back();
  },
 });
-
-Template.cardLabelsPopup.helpers({
-  isLabelSelected(cardId) {
-    return _.contains(ReactiveCache.getCard(cardId).labelIds, this._id);
-  },
-});
@@ -3,7 +3,7 @@
  position: relative;
  display: flex;
  align-items: center;
-  margin-bottom: 1.2vh;
+  margin-bottom: 8px;
 }
 .minicard-wrapper.placeholder {
  background: #ccc;
@@ -16,8 +16,8 @@
 }
 .minicard-wrapper.ui-sortable-helper .and-n-other {
  width: 100%;
-  height: 2.5vh;
-  padding: 0.5vh;
+  height: 25px;
+  padding: 5px;
  background-color: #f2f2f2;
  text-align: center;
  border-radius: 0.4vw;
@@ -26,17 +26,29 @@
  display: none;
 }
 .minicard-wrapper .multi-selection-checkbox + .minicard {
-  margin-left: 1vw;
+  margin-inline-start: 1vw;
+}
+/* Enlarge the clickable area of the small selection checkbox so it can be
+   reliably clicked at the left side of the minicard. The visible 13px box (and
+   its rotated is-checked checkmark) keep their size; an invisible overlay only
+   extends the hit target. */
+.minicard-wrapper .multi-selection-checkbox::before {
+  content: "";
+  position: absolute;
+  top: -8px;
+  inset-inline-start: -8px;
+  inset-inline-end: -8px;
+  bottom: -8px;
 }
@media only screen {
  .minicard {
-    padding: 0.8vh 1vw 0.3vh;
+    padding: 8px 1vw 3px;
    position: relative;
    flex: 1;
    flex-wrap: wrap;
    background-color: #fff;
-    min-height: 2.5vh;
-    box-shadow: 0 0.2vh 0.3vh rgba(0,0,0,0.15);
+    min-height: 25px;
+    box-shadow: 0 2px 3px rgba(0,0,0,0.15);
    border-radius: 0.3vw;
    color: #4d4d4d;
    overflow: hidden;
@@ -44,17 +56,16 @@
  }
 }
 .minicard-details-menu-with-handle {
-  position: absolute;
-  right: 0.7vw;
-  top: 0.7vh;
+  float: inline-end;
+  padding-inline-start: 0.7vw;
  font-size: clamp(14px, 3vw, 18px);
  padding: 0;
  z-index: 1;
 }
 .minicard-details-menu {
-  float: right;
+  float: inline-end;
  font-size: clamp(14px, 3vw, 18px);
-  padding-left: 0.7vw;
+  padding-inline-start: 0.7vw;
 }
@media print {
  .minicard-details-menu,
@@ -65,7 +76,7 @@
 .minicard.linked-board .linked-icon,
 .minicard.linked-card .linked-icon {
  display: inline-block;
-  margin-right: 1.5vw;
+  margin-inline-end: 1.5vw;
  vertical-align: baseline;
  font-size: 0.9em;
 }
@@ -78,7 +89,7 @@
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
  z-index: 25;
-  box-shadow: -0.3vw 0.2vh 0.3vh rgba(0,0,0,0.2);
+  box-shadow: -0.3vw 2px 3px rgba(0,0,0,0.2);
 }
 .minicard:hover:not(.minicard-composer),
 .is-selected .minicard,
@@ -92,21 +103,21 @@
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
-  height: 20vh;
+  height: 150px;
  user-select: none;
-  margin: 0.8vh -1vw 0.8vh -1vw;
+  margin: 8px -1vw 8px -1vw;
  border-radius: top 0.3vw;
 }
 .minicard .minicard-labels {
  float: none;
-  margin-right: 6vw;
+  margin-inline-end: 6vw;
 }
 .minicard .minicard-labels .minicard-label {
  width: clamp(12px, 1.5vw, 16px);
  height: clamp(12px, 1.5vw, 16px);
  border-radius: 0.3vw;
-  margin-right: 0.4vw;
-  margin-bottom: 0.4vh;
+  margin-inline-end: 0.4vw;
+  margin-bottom: 4px;
 }
 .minicard .minicard-labels-no-text {
  display: flex;
@@ -114,7 +125,7 @@
 }
 .minicard .minicard-custom-fields {
  display: block;
-  margin-right: 6vw;
+  margin-inline-end: 6vw;
 }
 .minicard .minicard-custom-field {
  display: flex;
@@ -124,21 +135,21 @@
  display: block;
  word-wrap: break-word;
  max-width: 13vw;
-  margin-right: 0.5vw;
+  margin-inline-end: 0.5vw;
 }
 .minicard .minicard-custom-field-item-fullwidth {
  flex-grow: 1;
  display: block;
  word-wrap: break-word;
  max-width: 100%;
-  margin-right: 0.5vw;
+  margin-inline-end: 0.5vw;
 }
 .minicard .handle {
  width: clamp(20px, 2.5vw, 28px);
  height: clamp(20px, 2.5vw, 28px);
  position: absolute;
-  right: 3vw;
-  top: 0.7vh;
+  inset-inline-end: 0vw;
+  top: 28px;
  display: none;
  z-index: 1;
 }
@@ -155,12 +166,12 @@
  text-align: center;
 }
 .minicard .minicard-title {
-  margin-right: 6vw;
+  margin-inline-end: 1.5vw;
 }
 .minicard .minicard-title .card-number {
  color: #b3b3b3;
  display: inline-block;
-  margin-right: 0.7vw;
+  margin-inline-end: 0.7vw;
 }
@media only screen {
  .minicard .minicard-title p:last-child {
@@ -177,11 +188,11 @@
  flex-wrap: wrap;
  position: relative;
  z-index: 5;
-  margin-right: 6vw;
+  margin-inline-end: 6vw;
  clear: both;
 }
 .minicard .date {
-  margin-right: 0.4vw;
+  margin-inline-end: 0.4vw;
 }

 /* Unicode icons for minicard dates - matching cardDate.css */
@@ -200,7 +211,7 @@

 .minicard .card-date time::before {
  font-size: inherit;
-  margin-right: 0.3em;
+  margin-inline-end: 0.3em;
  display: inline-block;
 }

@@ -313,17 +324,17 @@
 }

 .minicard .badges {
-  float: left;
-  margin-top: 1vh;
+  float: inline-start;
+  margin-top: 8px;
  color: #808080;
 }
 .minicard .badges:empty {
  display: none;
 }
 .minicard .badges .badge {
-  float: left;
-  margin-right: 1.5vw;
-  margin-bottom: 0.4vh;
+  float: inline-start;
+  margin-inline-end: 1.5vw;
+  margin-bottom: 4px;
  font-size: 0.9em;
 }
 .minicard .badges .badge.is-finished {
@@ -333,7 +344,7 @@
  color: #fff;
 }
 .minicard .badges .badge:last-of-type {
-  margin-right: 0;
+  margin-inline-end: 0;
 }
 .minicard .badges .badge .badge-icon,
 .minicard .badges .badge .badge-text {
@@ -345,33 +356,33 @@
 }
 .minicard .badges .badge .badge-text {
  font-size: 0.9em;
-  padding-left: 0.3vw;
+  padding-inline-start: 0.3vw;
  line-height: 1.2;
 }
 .minicard .badges .badge .check-list-text {
-  padding-left: 0px;
+  padding-inline-start: 0px;
  line-height: 1.1;
 }
 .minicard .minicard-members,
 .minicard .minicard-assignees,
 .minicard .minicard-creator {
-  float: right;
-  margin-left: 0.7vw;
-  margin-bottom: 0.5vh;
+  float: inline-end;
+  margin-inline-start: 0.7vw;
+  margin-bottom: 4px;
 }
 .minicard .minicard-members .member,
 .minicard .minicard-assignees .member,
 .minicard .minicard-creator .member {
-  float: right;
+  float: inline-end;
  border-radius: 50%;
  height: clamp(24px, 3.5vw, 32px);
  width: clamp(24px, 3.5vw, 32px);
-  margin-bottom: 0.5vh;
+  margin-bottom: 4px;
 }
 .minicard .minicard-members .assignee,
 .minicard .minicard-assignees .assignee,
 .minicard .minicard-creator .assignee {
-  float: right;
+  float: inline-end;
  border-radius: 50%;
  height: clamp(24px, 3.5vw, 32px);
  width: clamp(24px, 3.5vw, 32px);
@@ -379,7 +390,7 @@
 .minicard .minicard-members + .badges,
 .minicard .minicard-assignees + .badges,
 .minicard .minicard-creator + .badges {
-  margin-top: 0.7vh;
+  margin-top: 6px;
 }
 .minicard .minicard-assignees {
  border-bottom: 1px solid #f00;
@@ -392,12 +403,12 @@
  display: none;
 }
 .minicard .minicard-description {
-  padding: 0.8vh 0 0 1vw;
+  padding: 8px 0 0 1vw;
  color: #000;
  background-color: #eee;
  width: 100%;
-  margin-bottom: 0.3vh;
-  margin-left: -0.5vw;
+  margin-bottom: 3px;
+  margin-inline-start: -0.5vw;
  border-radius: 0.4vw;
  overflow: hidden;
  text-overflow: ellipsis;
@@ -406,7 +417,7 @@
  -webkit-box-orient: vertical;
 }
 .minicard.minicard-composer {
-  margin-bottom: 1.3vh;
+  margin-bottom: 12px;
 }
 .minicard.minicard-composer textarea.minicard-composer-textarea,
 .minicard.minicard-composer textarea.minicard-composer-textarea:focus {
@@ -417,9 +428,9 @@
  height: auto;
  margin: 0;
  padding: 0;
-  max-height: 22vh;
-  min-height: 5vh;
-  margin-bottom: 2.5vh;
+  max-height: 200px;
+  min-height: 50px;
+  margin-bottom: 20px;
  overflow-y: auto;
 }
 .parent-prefix {
@@ -737,7 +748,7 @@
 .minicard-list-name {
  font-size: 0.75em;
  color: #8c8c8c;
-  margin-top: 0.2vh;
+  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: 0.3vw;
@@ -746,9 +757,11 @@
 /* Checklist display on minicard */
 .minicard-checklist {
  width: 100%;
-  margin-top: 0.5vh;
-  margin-bottom: 0.5vh;
-  padding: 0.3vh 0.5vw;
+  box-sizing: border-box;
+  clear: both;
+  margin-top: 2px;
+  margin-bottom: 5px;
+  padding: 3px 0.5vw;
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 0.3vw;
  border: 1px solid #e0e0e0;
@@ -758,7 +771,7 @@
  display: flex;
  justify-content: space-between;
  align-items: center;
-  margin-bottom: 0.3vh;
+  margin-bottom: 3px;
 }

 .minicard-checklist .checklist-title {
@@ -766,6 +779,7 @@
  font-weight: bold;
  color: #4d4d4d;
  flex: 1;
+  margin: 0;
 }

 .minicard-checklist .checklist-menu {
@@ -784,13 +798,13 @@
 .minicard-checklist .checklist-item {
  font-size: 0.75em;
  color: #666;
-  margin-bottom: 0.2vh;
+  margin-bottom: 2px;
  display: flex;
  align-items: flex-start;
  gap: 0.3vw;
  line-height: 1.2;
  cursor: pointer;
-  padding: 0.2vh 0;
+  padding: 2px 0;
  border-radius: 0.2vw;
  transition: background-color 0.2s;
 }
@@ -807,7 +821,7 @@
 .minicard-checklist .checklist-item .check-box-unicode {
  flex-shrink: 0;
  font-size: 0.8em;
-  margin-top: 0.1vh;
+  margin-top: 1px;
  transition: transform 0.2s;
 }

@@ -820,3 +834,52 @@
  word-wrap: break-word;
  overflow-wrap: break-word;
 }
+
+/* Trello-style "mark complete" toggle, left of the minicard title */
+.minicard-title .minicard-complete-toggle {
+  display: inline-flex;
+  align-items: center;
+  vertical-align: middle;
+  /* Nudge down so the checkmark sits at the vertical middle of the title text
+     (the checked materialCheckBox is shifted up 4px by its own positioning). */
+  position: relative;
+  top: 4px;
+  margin-inline-end: 6px;
+  cursor: pointer;
+}
+
+/* Sticker icon highlight styles (used instead of colour): taco pack => underline,
+   pete pack => round (ring around the icon). Icon keeps its normal colour. */
+.minicard-sticker i.sticker-underline {
+  border-bottom: 2px solid currentColor;
+  padding-bottom: 1px;
+  line-height: 1;
+}
+.minicard-sticker i.sticker-round {
+  border: 1px solid currentColor;
+  border-radius: 50%;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.6em;
+  height: 1.6em;
+  line-height: 1;
+  box-sizing: border-box;
+}
+
+/* #3984: Visual card aging — progressively fade cards that have not been
+ * touched recently, when card aging is enabled for the board. */
+.minicard.minicard-aging-1 {
+  opacity: 0.85;
+}
+.minicard.minicard-aging-2 {
+  opacity: 0.6;
+}
+.minicard.minicard-aging-3 {
+  opacity: 0.4;
+}
+.minicard.minicard-aging-1:hover,
+.minicard.minicard-aging-2:hover,
+.minicard.minicard-aging-3:hover {
+  opacity: 1;
+}
@@ -2,26 +2,38 @@ template(name="minicard")
  .minicard.nodragscroll(
    class="{{#if isLinkedCard}}linked-card{{/if}}"
    class="{{#if isLinkedBoard}}linked-board{{/if}}"
+    class="{{agingClass}}"
    class="{{#if colorClass}}minicard-{{colorClass}}{{/if}}")
    if canMoveCard
      if isTouchScreenOrShowDesktopDragHandles
        .handle
          i.fa.fa-arrows
+      //- #459: keyboard/screen-reader reordering (visually hidden, focusable).
+      .minicard-move-buttons.sr-only
+        a.js-card-move-up(href="#" role="button" aria-label="{{_ 'move-card-up'}}") {{_ 'move-card-up'}}
+        a.js-card-move-down(href="#" role="button" aria-label="{{_ 'move-card-down'}}") {{_ 'move-card-down'}}
    if canModifyCard
      a.minicard-details-menu-with-handle.js-open-minicard-details-menu(title="{{_ 'cardDetailsActionsPopup-title'}}")
        i.fa.fa-bars
+    if showDependencyConnectHandle
+      a.dependency-connect-handle.js-dependency-connect-handle(title="{{_ 'drag-to-connect'}}")
+        i.fa.fa-dot-circle-o
    .dates
-      if getReceived
-        .date
-          +minicardReceivedDate
-      if getStart
-        .date
-          +minicardStartDate
-      if getDue
-        .date
-          +minicardDueDate
-      if getEnd
-         +minicardEndDate
+      if showReceived
+        if getReceived
+          .date
+            +minicardReceivedDate
+      if showStart
+        if getStart
+          .date
+            +minicardStartDate
+      if showDue
+        if getDue
+          .date(class="{{#if getDueComplete}}due-complete{{/if}}")
+            +minicardDueDate
+      if showEnd
+        if getEnd
+           +minicardEndDate
      if getSpentTime
        .date
          +cardSpentTime
@@ -46,9 +58,14 @@ template(name="minicard")
                span {{_ 'upload-failed'}}
            else if $eq status 'completed'
              .upload-progress-success
-                i.fa.fa-check                span {{_ 'upload-completed'}}
+                i.fa.fa-check
+                span {{_ 'upload-completed'}}

    .minicard-title
+      if showDueComplete
+        if canModifyCard
+          a.minicard-complete-toggle.js-toggle-card-complete(title="{{#if getDueComplete}}{{_ 'card-mark-incomplete'}}{{else}}{{_ 'card-mark-complete'}}{{/if}}")
+            .materialCheckBox(class="{{#if getDueComplete}}is-checked{{/if}}")
      if $eq 'prefix-with-full-path' currentBoard.presentParentTask
        .parent-prefix
          | {{ parentString ' > ' }}
@@ -67,19 +84,20 @@ template(name="minicard")
        span.linked-icon.linked-archived
          i.fa.fa-archive
      +viewer
-        if currentBoard.allowsCardNumber
+        if showCardNumber
          span.card-number
-            | ##{getCardNumber}
+            | ##{getCardNumber} &nbsp;
        = getTitle
-    if labels
-      .minicard-labels(class="{{#if hiddenMinicardLabelText}}minicard-labels-no-text{{/if}}")
-        each labels
-          unless hiddenMinicardLabelText
-            span.js-card-label.card-label(class="card-label-{{color}}" title=name)
-              +viewer
-                = name
-          if hiddenMinicardLabelText
-            .minicard-label(class="card-label-{{color}}" title="{{name}}")
+    if showLabels
+      if labels
+        .minicard-labels(class="{{#if hiddenMinicardLabelText}}minicard-labels-no-text{{/if}}")
+          each labels
+            unless hiddenMinicardLabelText
+              span.js-card-label.card-label(class="card-label-{{color}}" title=name)
+                +viewer
+                  = name
+            if hiddenMinicardLabelText
+              .minicard-label(class="card-label-{{color}}" title="{{name}}")

    .minicard-custom-fields
      each customFieldsWD
@@ -142,16 +160,29 @@ template(name="minicard")
      .minicard-creator
        +userAvatar(userId=this.userId noRemove=true)

+    if shouldShowChecklistAtMinicard
+      each shouldShowChecklistAtMinicard
+        +minicardChecklist(checklist=. card=..)
    .badges
-      if canModifyCard
-        if comments.length
-          .badge(title="{{_ 'card-comments-title' comments.length }}")
-            span.badge-icon.badge-comment.badge-text
-              i.fa.fa-comment-o
-              = ' '
-              = comments.length
+      if dependencyBadge
+        .badge.badge-state-image-only.minicard-dependencies(title="{{_ 'card-dependencies'}}")
+          span.badge-icon(style="color:{{dependencyBadge.color}}")
+            i.fa(class="fa-{{dependencyBadge.icon}}")
+          span.badge-text {{ dependencyBadge.count }}
+      if stickers.length
+        .badge.badge-state-image-only.minicard-stickers
+          each stickers
+            span.badge-icon.minicard-sticker(title="{{#if name}}{{name}}{{else}}{{icon}}{{/if}}")
+              i.fa(class="fa-{{icon}} {{#if highlight}}sticker-{{highlight}}{{/if}}")
+      if comments.length
+        .badge(title="{{_ 'card-comments-title' comments.length }}")
+          span.badge-icon.badge-comment.badge-text
+            i.fa.fa-comment-o
+            = ' '
+            = comments.length
            //span.badge-comment.badge-text
-            //|  {{_ 'comment'}}
+            //|
+              {{_ 'comment'}}
      if getDescription
        unless currentBoard.allowsDescriptionTextOnMinicard
          .badge.badge-state-image-only(title=getDescription)
@@ -177,21 +208,19 @@ template(name="minicard")
            span.badge-icon
              i.fa.fa-paperclip
            span.badge-text= attachments.length
-      if allSubtasks.count
-        .badge
-          span.badge-icon
-            i.fa.fa-globe
-          span.badge-text.check-list-text {{subtasksFinishedCount}}/{{allSubtasksCount}}
-          //{{subtasksFinishedCount}}/{{subtasksCount}} does not work because when a subtaks is archived, the count goes down
+      if showSubtasks
+        if allSubtasks.count
+          .badge
+            span.badge-icon
+              i.fa.fa-globe
+            span.badge-text.check-list-text {{subtasksFinishedCount}}/{{allSubtasksCount}}
+            //{{subtasksFinishedCount}}/{{subtasksCount}} does not work because when a subtaks is archived, the count goes down
      if currentBoard.allowsCardSortingByNumber
        if currentBoard.allowsCardSortingByNumberOnMinicard
          .badge
            span.badge-icon
              i.fa.fa-sort-numeric-asc
            span.badge-text.check-list-sort {{ sort }}
-    if shouldShowChecklistAtMinicard
-      each shouldShowChecklistAtMinicard
-        +minicardChecklist(checklist=. card=..)
    if currentBoard.allowsDescriptionTextOnMinicard
      if getDescription
        .minicard-description
@@ -216,10 +245,26 @@ template(name="editCardSortOrderPopup")
 template(name="minicardChecklist")
  .minicard-checklist
    .checklist-header
-      .checklist-title= checklist.title
+      if canModifyCard
+        +inlinedForm(classNames="js-edit-checklist-title" checklist=checklist)
+          +editChecklistForm(checklist=checklist)
+        else
+          h4.checklist-title.js-open-inlined-form.is-editable= checklist.title
+      else
+        h4.checklist-title= checklist.title
      if canModifyCard
        a.checklist-menu.js-open-checklist-menu(title="{{_ 'checklistActionsPopup-title'}}")
          i.fa.fa-bars
-    each visibleItems
-      +checklistItemDetail(item = . checklist = checklist card = card)
+    .checklist-items.js-checklist-items
+      each visibleItems
+        +inlinedForm(classNames="js-edit-checklist-item" item=. checklist=checklist)
+          +editChecklistItemForm(type='item' item=. checklist=checklist)
+        else
+          +checklistItemDetail(item=. checklist=checklist card=card)
+    if canModifyCard
+      +inlinedForm(autoclose=false classNames="js-add-checklist-item" checklist=checklist)
+        +addChecklistItemForm(checklist=checklist showNewlineBecomesNewChecklistItem=false)
+      else
+        a.add-checklist-item.js-open-inlined-form(title="{{_ 'add-checklist-item'}}")
+          i.fa.fa-plus

@@ -3,18 +3,66 @@ import { TAPi18n } from '/imports/i18n';
 import { CustomFieldStringTemplate } from '/client/lib/customFields';
 import { handleFileUpload } from './attachments';
 import uploadProgressManager from '../../lib/uploadProgressManager';
+import { Utils } from '/client/lib/utils';
+import ChecklistItems from '/models/checklistItems';
+import Cards from '/models/cards';
+import { normalizeDependencies } from '/models/metadata/dependencies';
+
+function getMinicardFlag(board, onMinicardField, legacyField, defaultValue) {
+  if (!board) return false;
+  if (board[onMinicardField] !== null && board[onMinicardField] !== undefined) {
+    return board[onMinicardField];
+  }
+  if (legacyField && board[legacyField] !== null && board[legacyField] !== undefined) {
+    return board[legacyField];
+  }
+  return defaultValue;
+}

 // Template.cards.events({
 //   'click .member': Popup.open('cardMember')
 // });

-BlazeComponent.extendComponent({
-  template() {
-    return 'minicard';
+Template.minicard.helpers({
+  // #3392: show a drag-to-connect handle on the minicard when the board's
+  // dependency overlay is on and the user can edit the board. Dragging it onto
+  // another card creates a dependency (handled in dependencyOverlay.js).
+  showDependencyConnectHandle() {
+    const board = ReactiveCache.getBoard(this.boardId);
+    return !!(board && board.showDependencies && Utils.canModifyBoard());
+  },
+  // #3392: PI Program Board "Red Strings". Show a small badge on the minicard
+  // when a card has dependencies: the first dependency's icon and color plus the
+  // total count.
+  dependencyBadge() {
+    const deps = normalizeDependencies(this.cardDependencies);
+    if (deps.length === 0) return null;
+    return {
+      icon: deps[0].icon,
+      color: deps[0].color,
+      count: deps.length,
+    };
+  },
+  // #3984: visual card aging — fade cards that have not been touched recently,
+  // based on dateLastActivity, when the board has card aging enabled.
+  agingClass() {
+    const board = ReactiveCache.getBoard(this.boardId);
+    if (!board || !board.cardAging) return '';
+    const last = this.dateLastActivity || this.modifiedAt || this.createdAt;
+    if (!last) return '';
+    const days = (Date.now() - new Date(last).getTime()) / 86400000;
+    // #3984: thresholds are board-configurable (board settings / cardSettings API),
+    // defaulting to 7 / 14 / 28 days.
+    const d1 = board.cardAgingDays1 != null ? board.cardAgingDays1 : 7;
+    const d2 = board.cardAgingDays2 != null ? board.cardAgingDays2 : 14;
+    const d3 = board.cardAgingDays3 != null ? board.cardAgingDays3 : 28;
+    if (days >= d3) return 'minicard-aging-3';
+    if (days >= d2) return 'minicard-aging-2';
+    if (days >= d1) return 'minicard-aging-1';
+    return '';
  },
-
  formattedCurrencyCustomFieldValue(definition) {
-    const customField = this.data()
+    const customField = this
      .customFieldsWD()
      .find(f => f._id === definition._id);
    const customFieldTrueValue =
@@ -28,7 +76,7 @@ BlazeComponent.extendComponent({
  },

  formattedStringtemplateCustomFieldValue(definition) {
-    const customField = this.data()
+    const customField = this
      .customFieldsWD()
      .find(f => f._id === definition._id);

@@ -41,7 +89,7 @@ BlazeComponent.extendComponent({

  showCreatorOnMinicard() {
    // cache "board" to reduce the mini-mongodb access
-    const board = this.data().board();
+    const board = this.board();
    let ret = false;
    if (board) {
      ret = board.allowsCreatorOnMinicard ?? false;
@@ -49,172 +97,54 @@ BlazeComponent.extendComponent({
    return ret;
  },
  isWatching() {
-    const card = this.currentData();
-    return card.findWatcher(Meteor.userId());
+    return this.findWatcher(Meteor.userId());
  },

  showMembers() {
-    // cache "board" to reduce the mini-mongodb access
-    const board = this.data().board();
-    let ret = false;
-    if (board) {
-      ret =
-        board.allowsMembers === null ||
-        board.allowsMembers === undefined ||
-        board.allowsMembers
-      ;
-    }
-    return ret;
+    const board = this.board();
+    return getMinicardFlag(board, 'allowsMembersOnMinicard', 'allowsMembers', true);
  },

  showAssignee() {
-    // cache "board" to reduce the mini-mongodb access
-    const board = this.data().board();
-    let ret = false;
-    if (board) {
-      ret =
-        board.allowsAssignee === null ||
-        board.allowsAssignee === undefined ||
-        board.allowsAssignee
-      ;
-    }
-    return ret;
+    const board = this.board();
+    return getMinicardFlag(board, 'allowsAssigneeOnMinicard', 'allowsAssignee', true);
+  },
+  showReceived() {
+    const board = this.board();
+    return getMinicardFlag(board, 'allowsReceivedDateOnMinicard', 'allowsReceivedDate', true);
+  },
+  showStart() {
+    const board = this.board();
+    return getMinicardFlag(board, 'allowsStartDateOnMinicard', 'allowsStartDate', true);
+  },
+  showDue() {
+    const board = this.board();
+    return getMinicardFlag(board, 'allowsDueDateOnMinicard', 'allowsDueDate', true);
+  },
+  showEnd() {
+    const board = this.board();
+    return getMinicardFlag(board, 'allowsEndDateOnMinicard', 'allowsEndDate', true);
+  },
+  showLabels() {
+    const board = this.board();
+    return getMinicardFlag(board, 'allowsLabelsOnMinicard', 'allowsLabels', true);
+  },
+  showCardNumber() {
+    const board = this.board();
+    return getMinicardFlag(board, 'allowsCardNumberOnMinicard', 'allowsCardNumber', false);
+  },
+  // "Mark as complete" toggle on the minicard. No legacy fallback to the
+  // card-details setting (allowsDueComplete): hidden by default so it only
+  // appears when explicitly enabled in Card Settings > Show at Minicard.
+  showDueComplete() {
+    const board = this.board();
+    return getMinicardFlag(board, 'allowsDueCompleteOnMinicard', null, false);
+  },
+  showSubtasks() {
+    const board = this.board();
+    return getMinicardFlag(board, 'allowsSubtasksOnMinicard', 'allowsSubtasks', true);
  },

-  /** opens the card label popup only if clicked onto a label
-   * <li> this is necessary to have the data context of the minicard.
-   *      if .js-card-label is used at click event, then only the data context of the label itself is available at this.currentData()
-   */
-  cardLabelsPopup(event) {
-    if (this.find('.js-card-label:hover')) {
-      Popup.open("cardLabels")(event, {dataContextIfCurrentDataIsUndefined: this.currentData()});
-    }
-  },
-
-  async toggleChecklistItem() {
-    const item = this.currentData();
-    if (item && item._id) {
-      await item.toggleItem();
-    }
-  },
-
-  events() {
-    return [
-      {
-        'click .js-linked-link'() {
-          if (this.data().isLinkedCard()) Utils.goCardId(this.data().linkedId);
-          else if (this.data().isLinkedBoard())
-            Utils.goBoardId(this.data().linkedId);
-        },
-        'click .js-toggle-minicard-label-text'() {
-          if (window.localStorage.getItem('hiddenMinicardLabelText')) {
-            window.localStorage.removeItem('hiddenMinicardLabelText'); //true
-          } else {
-            window.localStorage.setItem('hiddenMinicardLabelText', 'true'); //true
-          }
-        },
-        'click span.badge-icon.fa.fa-sort, click span.badge-text.check-list-sort' : Popup.open("editCardSortOrder"),
-        'click .minicard-labels' : this.cardLabelsPopup,
-        'click .js-open-minicard-details-menu': Popup.open('cardDetailsActions'),
-        // Drag and drop file upload handlers
-        'dragover .minicard'(event) {
-          // Only prevent default for file drags to avoid interfering with sortable
-          const dataTransfer = event.originalEvent.dataTransfer;
-          if (dataTransfer && dataTransfer.types && dataTransfer.types.includes('Files')) {
-            event.preventDefault();
-            event.stopPropagation();
-          }
-        },
-        'dragenter .minicard'(event) {
-          const dataTransfer = event.originalEvent.dataTransfer;
-          if (dataTransfer && dataTransfer.types && dataTransfer.types.includes('Files')) {
-            event.preventDefault();
-            event.stopPropagation();
-            const card = this.data();
-            const board = card.board();
-            // Only allow drag-and-drop if user can modify card and board allows attachments
-            if (Utils.canModifyCard() && board && board.allowsAttachments) {
-              $(event.currentTarget).addClass('is-dragging-over');
-            }
-          }
-        },
-        'dragleave .minicard'(event) {
-          const dataTransfer = event.originalEvent.dataTransfer;
-          if (dataTransfer && dataTransfer.types && dataTransfer.types.includes('Files')) {
-            event.preventDefault();
-            event.stopPropagation();
-            $(event.currentTarget).removeClass('is-dragging-over');
-          }
-        },
-        'drop .minicard'(event) {
-          const dataTransfer = event.originalEvent.dataTransfer;
-          if (dataTransfer && dataTransfer.types && dataTransfer.types.includes('Files')) {
-            event.preventDefault();
-            event.stopPropagation();
-            $(event.currentTarget).removeClass('is-dragging-over');
-
-            const card = this.data();
-            const board = card.board();
-
-            // Check permissions
-            if (!Utils.canModifyCard() || !board || !board.allowsAttachments) {
-              return;
-            }
-
-            // Check if this is a file drop (not a card reorder)
-            if (!dataTransfer.files || dataTransfer.files.length === 0) {
-              return;
-            }
-
-            const files = dataTransfer.files;
-            if (files && files.length > 0) {
-              handleFileUpload(card, files);
-            }
-          }
-        },
-      }
-    ];
-  },
-}).register('minicard');
-
-BlazeComponent.extendComponent({
-  template() {
-    return 'minicardChecklist';
-  },
-
-  events() {
-    return [
-      {
-        'click .js-open-checklist-menu'(event) {
-          const data = this.currentData();
-          const checklist = data.checklist || data;
-          const card = data.card || this.data();
-          const context = { currentData: () => ({ checklist, card }) };
-          Popup.open('checklistActions').call(context, event);
-        },
-      },
-    ];
-  },
-
-  visibleItems() {
-    const checklist = this.currentData().checklist || this.currentData();
-    const items = checklist.items();
-    
-    return items.filter(item => {
-      // Hide finished items if hideCheckedChecklistItems is true
-      if (item.isFinished && checklist.hideCheckedChecklistItems) {
-        return false;
-      }
-      // Hide all items if hideAllChecklistItems is true
-      if (checklist.hideAllChecklistItems) {
-        return false;
-      }
-      return true;
-    });
-  },
-}).register('minicardChecklist');
-
-Template.minicard.helpers({
  hiddenMinicardLabelText() {
    const currentUser = ReactiveCache.getCurrentUser();
    if (currentUser) {
@@ -225,15 +155,24 @@ Template.minicard.helpers({
      return false;
    }
  },
+  cover() {
+    if (!this.coverId) return null;
+    const attachment = ReactiveCache.getAttachment(this.coverId);
+    if (!attachment) return null;
+    const coverLink = typeof attachment.link === 'function' ? attachment.link() : '';
+    if (!coverLink) return null;
+    return {
+      link() {
+        return coverLink;
+      },
+    };
+  },
  // XXX resolve this nasty hack for https://github.com/veliovgroup/Meteor-Files/issues/763
  sess() {
    return Meteor.connection && Meteor.connection._lastSessionId
      ? Meteor.connection._lastSessionId
      : null;
  },
-  isWatching() {
-    return this.findWatcher(Meteor.userId());
-  },
  // Upload progress helpers
  hasActiveUploads() {
    return uploadProgressManager.hasActiveUploads(this._id);
@@ -279,62 +218,246 @@ Template.minicard.helpers({
  }
 });

-BlazeComponent.extendComponent({
-  events() {
-    return [
-      {
-        'keydown input.js-edit-card-sort-popup'(evt) {
-          // enter = save
-          if (evt.keyCode === 13) {
-            this.find('button[type=submit]').click();
-          }
-        },
-        'click button.js-submit-edit-card-sort-popup'(event) {
-          // save button pressed
-          event.preventDefault();
-          const sort = this.$('.js-edit-card-sort-popup')[0]
-            .value
-            .trim();
-          if (!Number.isNaN(sort)) {
-            let card = this.data();
-            card.move(card.boardId, card.swimlaneId, card.listId, sort);
-            Popup.back();
-          }
-        },
-      }
-    ]
-  }
-}).register('editCardSortOrderPopup');
+// #459: accessible reordering — keyboard/screen-reader users can move a card up
+// or down within its list via sr-only buttons (no drag-and-drop required). The
+// move swaps the card's sort value with its neighbour in the same list+swimlane.
+function moveCardBy(card, delta) {
+  const siblings = ReactiveCache.getCards(
+    { listId: card.listId, swimlaneId: card.swimlaneId, archived: false },
+    { sort: { sort: 1 } },
+  );
+  const idx = siblings.findIndex(c => c._id === card._id);
+  const target = siblings[idx + delta];
+  if (idx < 0 || !target) return;
+  // Capture both sort values before either update; the docs are reactive and
+  // card.sort would otherwise change after the first move.
+  const cardSort = card.sort;
+  const targetSort = target.sort;
+  // Persist through the card model's move() mutation — the canonical client
+  // path (e.g. editCardSortOrderPopup). A raw Cards.update of `sort` is the
+  // wrong path here and would be reverted.
+  card.move(card.boardId, card.swimlaneId, card.listId, targetSort);
+  target.move(target.boardId, target.swimlaneId, target.listId, cardSort);
+}

-Template.cardDetailsActionsPopup.events({
-  'click .js-due-date': Popup.open('editCardDueDate'),
-  'click .js-move-card': Popup.open('moveCard'),
-  'click .js-copy-card': Popup.open('copyCard'),
-  'click .js-set-card-color': Popup.open('setCardColor'),
-  'click .js-add-labels': Popup.open('cardLabels'),
-  'click .js-link': Popup.open('linkCard'),
-  'click .js-move-card-to-top'(event) {
-    event.preventDefault();
-    const minOrder = this.getMinSort();
-    this.move(this.boardId, this.swimlaneId, this.listId, minOrder - 1);
-    Popup.back();
+Template.minicard.events({
+  'click .js-linked-link'() {
+    if (this.isLinkedCard()) Utils.goCardId(this.linkedId);
+    else if (this.isLinkedBoard())
+      Utils.goBoardId(this.linkedId);
  },
-  async 'click .js-move-card-to-bottom'(event) {
+  'click .js-card-move-up'(event) {
+    // The move buttons sit inside the minicard anchor; don't let the click
+    // bubble up and open the card detail view.
    event.preventDefault();
-    const maxOrder = this.getMaxSort();
-    await this.move(this.boardId, this.swimlaneId, this.listId, maxOrder + 1);
-    Popup.back();
+    event.stopPropagation();
+    moveCardBy(this, -1);
  },
-  'click .js-archive': Popup.afterConfirm('cardArchive', async function () {
-    Popup.close();
-    await this.archive();
-    Utils.goBoardId(this.boardId);
-  }),
-  'click .js-toggle-watch-card'() {
-    const currentCard = this;
-    const level = currentCard.findWatcher(Meteor.userId()) ? null : 'watching';
-    Meteor.call('watch', 'card', currentCard._id, level, (err, ret) => {
-      if (!err && ret) Popup.back();
+  'click .js-card-move-down'(event) {
+    event.preventDefault();
+    event.stopPropagation();
+    moveCardBy(this, 1);
+  },
+  'click .js-toggle-card-complete'(event) {
+    // Trello-style "mark complete" toggle (left of the title). Don't let the
+    // click open the card.
+    event.preventDefault();
+    event.stopPropagation();
+    if (!Utils.canModifyCard()) {
+      return;
+    }
+    this.setDueComplete(!this.getDueComplete());
+  },
+  'click .js-toggle-minicard-label-text'() {
+    if (window.localStorage.getItem('hiddenMinicardLabelText')) {
+      window.localStorage.removeItem('hiddenMinicardLabelText'); //true
+    } else {
+      window.localStorage.setItem('hiddenMinicardLabelText', 'true'); //true
+    }
+  },
+  'click span.badge-icon.fa.fa-sort, click span.badge-text.check-list-sort' : Popup.open("editCardSortOrder"),
+  'click .minicard-labels'(event, tpl) {
+    if (tpl.find('.js-card-label:hover')) {
+      Popup.open("cardLabels")(event, {dataContextIfCurrentDataIsUndefined: Template.currentData()});
+    }
+  },
+  'click .js-open-minicard-details-menu'(event, tpl) {
+    event.preventDefault();
+    event.stopPropagation();
+    const card = Template.currentData();
+    Popup.open('cardDetailsActions').call({currentData: () => card}, event);
+  },
+  // Drag and drop file upload handlers
+  'dragover .minicard'(event) {
+    // Only prevent default for file drags to avoid interfering with sortable
+    const dataTransfer = event.originalEvent.dataTransfer;
+    if (dataTransfer && dataTransfer.types && dataTransfer.types.includes('Files')) {
+      event.preventDefault();
+      event.stopPropagation();
+    }
+  },
+  'dragenter .minicard'(event) {
+    const dataTransfer = event.originalEvent.dataTransfer;
+    if (dataTransfer && dataTransfer.types && dataTransfer.types.includes('Files')) {
+      event.preventDefault();
+      event.stopPropagation();
+      const card = this;
+      const board = card.board();
+      // Only allow drag-and-drop if user can modify card and board allows attachments
+      if (Utils.canModifyCard() && board && board.allowsAttachments) {
+        $(event.currentTarget).addClass('is-dragging-over');
+      }
+    }
+  },
+  'dragleave .minicard'(event) {
+    const dataTransfer = event.originalEvent.dataTransfer;
+    if (dataTransfer && dataTransfer.types && dataTransfer.types.includes('Files')) {
+      event.preventDefault();
+      event.stopPropagation();
+      $(event.currentTarget).removeClass('is-dragging-over');
+    }
+  },
+  'drop .minicard'(event) {
+    const dataTransfer = event.originalEvent.dataTransfer;
+    if (dataTransfer && dataTransfer.types && dataTransfer.types.includes('Files')) {
+      event.preventDefault();
+      event.stopPropagation();
+      $(event.currentTarget).removeClass('is-dragging-over');
+
+      const card = this;
+      const board = card.board();
+
+      // Check permissions
+      if (!Utils.canModifyCard() || !board || !board.allowsAttachments) {
+        return;
+      }
+
+      // Check if this is a file drop (not a card reorder)
+      if (!dataTransfer.files || dataTransfer.files.length === 0) {
+        return;
+      }
+
+      const files = dataTransfer.files;
+      if (files && files.length > 0) {
+        handleFileUpload(card, files);
+      }
+    }
+  },
+});
+
+Template.minicardChecklist.helpers({
+  visibleItems() {
+    const checklist = this.checklist || this;
+    const items = checklist.items();
+
+    return items.filter(item => {
+      // Hide finished items if hideCheckedChecklistItems is true
+      if (item.isFinished && checklist.hideCheckedChecklistItems) {
+        return false;
+      }
+      // Hide all items if hideAllChecklistItems is true
+      if (checklist.hideAllChecklistItems) {
+        return false;
+      }
+      return true;
    });
  },
 });
+
+Template.minicardChecklist.events({
+  'click .js-convert-checklist-item-to-card'(event) {
+    event.stopPropagation();
+    const formData = Blaze.getData(event.currentTarget);
+    if (!formData) return;
+    const context = { currentData: () => formData };
+    Popup.open('convertChecklistItemToCard').call(context, event);
+  },
+  'click .js-open-checklist-menu'(event) {
+    const data = Template.currentData();
+    const checklist = data.checklist || data;
+    const card = data.card || this;
+    const context = { currentData: () => ({ checklist, card }) };
+    Popup.open('checklistActions').call(context, event);
+  },
+  'click .js-checklist-item .check-box-container'(event) {
+    event.stopPropagation();
+    event.preventDefault();
+    const data = Blaze.getData(event.target) || Blaze.getData(event.currentTarget);
+    const item = data && data.item;
+    if (item && item._id) {
+      item.toggleItem();
+    }
+  },
+  'click .js-submit-edit-checklist-item-form'(event) {
+    event.preventDefault();
+    event.stopPropagation();
+    const $btn = $(event.currentTarget);
+    const $form = $btn.closest('form');
+    const textarea = $form.find('textarea.js-edit-checklist-item')[0];
+    if (!textarea) return;
+    const title = textarea.value.trim();
+    if (!title) return;
+    const formData = Blaze.getData($form[0]);
+    if (formData && formData.item && formData.item._id) {
+      formData.item.setTitle(title);
+    } else if (formData && formData.checklist && formData.checklist._id) {
+      formData.checklist.setTitle(title);
+    }
+    $form.find('.js-close-inlined-form').trigger('click');
+  },
+  'submit .js-add-checklist-item'(event, tpl) {
+    event.preventDefault();
+    const textarea = tpl.find('textarea.js-add-checklist-item');
+    if (!textarea) return;
+    const title = textarea.value.trim();
+    const data = Template.currentData() || {};
+    const checklist = data.checklist;
+    if (!checklist || !title) return;
+    const items = checklist.items();
+    const lastItem = items[items.length - 1] || null;
+    const sortIndex = Utils.calculateIndexData(lastItem, null).base;
+    ChecklistItems.insert({
+      title,
+      checklistId: checklist._id,
+      cardId: checklist.cardId,
+      sort: sortIndex,
+    });
+    textarea.value = '';
+    textarea.focus();
+  },
+  'click .js-delete-checklist-item': Popup.afterConfirm('checklistItemDelete', function () {
+    Popup.back();
+    const item = this && this.item ? this.item : this;
+    if (item && item._id) {
+      ChecklistItems.remove(item._id);
+    }
+  }),
+  'keydown textarea.js-add-checklist-item'(event) {
+    if (event.keyCode === 13 && !event.shiftKey) {
+      event.preventDefault();
+      const $form = $(event.currentTarget).closest('form');
+      $form.find('button[type=submit]').click();
+    }
+  },
+});
+
+Template.editCardSortOrderPopup.events({
+  'keydown input.js-edit-card-sort-popup'(evt, tpl) {
+    // enter = save
+    if (evt.keyCode === 13) {
+      tpl.find('button[type=submit]').click();
+    }
+  },
+  'click button.js-submit-edit-card-sort-popup'(event, tpl) {
+    // save button pressed
+    event.preventDefault();
+    const sort = tpl.$('.js-edit-card-sort-popup')[0]
+      .value
+      .trim();
+    if (!Number.isNaN(sort)) {
+      let card = this;
+      card.move(card.boardId, card.swimlaneId, card.listId, sort);
+      Popup.back();
+    }
+  },
+});
@@ -1,35 +1,67 @@
+import { ReactiveCache } from '/imports/reactiveCache';
+
 Template.resultCard.helpers({
  userId() {
    return Meteor.userId();
  },
+  getBoard() {
+    const card = Template.currentData();
+    try {
+      if (card && card.boardId) {
+        const board = ReactiveCache.getBoard(card.boardId);
+        return board || null;
+      }
+    } catch (err) {
+      // Silently handle errors
+    }
+    return null;
+  },
+  getSwimlane() {
+    const card = Template.currentData();
+    try {
+      if (card && card.swimlaneId) {
+        const swimlane = ReactiveCache.getSwimlane(card.swimlaneId);
+        return swimlane || null;
+      }
+    } catch (err) {
+      // Silently handle errors
+    }
+    return null;
+  },
+  getList() {
+    const card = Template.currentData();
+    try {
+      if (card && card.listId) {
+        const list = ReactiveCache.getList(card.listId);
+        return list || null;
+      }
+    } catch (err) {
+      // Silently handle errors
+    }
+    return null;
+  },
+  originRelativeUrl() {
+    const card = Template.currentData();
+    if (card && card.boardId && card._id) {
+      return `/board/${card.boardId}?cardId=${card._id}`;
+    }
+    return '#';
+  },
 });

-BlazeComponent.extendComponent({
-  clickOnMiniCard(evt) {
-    evt.preventDefault();
-    const this_ = this;
-    const cardId = this.currentData()._id;
-    const boardId = this.currentData().boardId;
+Template.resultCard.events({
+  'click .js-minicard'(event) {
+    event.preventDefault();
+    const cardId = Template.currentData()._id;
+    const boardId = Template.currentData().boardId;
    Meteor.subscribe('popupCardData', cardId, {
      onReady() {
        Session.set('popupCardId', cardId);
        Session.set('popupCardBoardId', boardId);
-        this_.cardDetailsPopup(evt);
+        if (!Popup.isOpen()) {
+          Popup.open("cardDetails")(event);
+        }
      },
    });
  },
-
-  cardDetailsPopup(event) {
-    if (!Popup.isOpen()) {
-      Popup.open("cardDetails")(event);
-    }
-  },
-
-  events() {
-    return [
-      {
-        'click .js-minicard': this.clickOnMiniCard,
-      },
-    ];
-  },
-}).register('resultCard');
+});
@@ -15,7 +15,7 @@ textarea.js-edit-subtask-item {
  color: #8c8c8c;
  text-decoration: underline;
  word-wrap: break-word;
-  float: right;
+  flex-shrink: 0;
  padding-top: 6px;
 }
 .delete-text:hover,
@@ -24,8 +24,13 @@ textarea.js-edit-subtask-item {
 .js-delete-subtask-item:hover {
  color: inherit;
 }
+.subtask-title {
+  display: flex;
+  align-items: center;
+  width: 100%;
+}
 .subtask-title .checkbox {
-  float: left;
+  flex-shrink: 0;
  width: 30px;
  height: 30px;
  font-size: 18px;
@@ -34,10 +39,12 @@ textarea.js-edit-subtask-item {
 .subtask-title .title {
  font-size: 18px;
  line-height: 25px;
+  flex: 1;
+  order: 1;
 }
 .subtask-title .subtasks-stat {
  margin: 0 0.5em;
-  float: right;
+  flex-shrink: 0;
  padding-top: 6px;
 }
 .subtask-title .subtasks-stat.is-finished {
@@ -46,16 +53,19 @@ textarea.js-edit-subtask-item {
 .subtask-title .js-delete-subtask {
  margin: 0 0.5em;
 }
+.subtask-title .js-view-subtask {
+  margin: 0 0.5em;
+}
 .js-confirm-subtask-delete {
  background-color: #f7f7f7;
  position: absolute;
-  float: left;
+  float: inline-start;
  width: 60%;
  margin-top: 0;
-  margin-left: 13%;
+  margin-inline-start: 13%;
  padding-bottom: 2%;
-  padding-left: 3%;
-  padding-right: 3%;
+  padding-inline-start: 3%;
+  padding-inline-end: 3%;
  z-index: 17;
  border-radius: 3px;
 }
@@ -76,17 +86,17 @@ textarea.js-edit-subtask-item {
  padding: left 2% right 2%;
 }
 .js-confirm-subtask-delete .js-subtask-delete-buttons .confirm-subtask-delete {
-  margin-left: 12%;
-  float: left;
+  margin-inline-start: 12%;
+  float: inline-start;
 }
 .js-confirm-subtask-delete .js-subtask-delete-buttons .toggle-delete-subtask-dialog {
-  margin-right: 12%;
-  float: right;
+  margin-inline-end: 12%;
+  float: inline-end;
 }
 #card-details-overlay {
  top: 0;
  bottom: -600px;
-  right: 0;
+  inset-inline-end: 0;
  z-index: 15;
 }

@@ -129,17 +139,20 @@ textarea.js-edit-subtask-item {
 .subtasks-item:hover {
  background-color: #ebebeb;
 }
+.subtasks-item .check-box-container {
+  padding-inline-end: 10px;
+}
 .subtasks-item .check-box {
  margin: 0.1em 0 0 0;
 }
 .subtasks-item .check-box.is-checked {
  border-bottom: 2px solid #3cb500;
-  border-right: 2px solid #3cb500;
+  border-inline-end: 2px solid #3cb500;
 }
 /* Unicode checkbox icons styling */
 .subtasks-item .check-box-unicode {
  font-size: 1.3em;
-  margin-right: 8px;
+  margin-inline-end: 8px;
  cursor: pointer;
  display: inline-block;
  vertical-align: middle;
@@ -148,7 +161,7 @@ textarea.js-edit-subtask-item {
 /* Grey checkmarks when grey icons setting is enabled */
 body.grey-icons-enabled .subtasks-item .check-box.is-checked {
  border-bottom: 2px solid #7a7a7a;
-  border-right: 2px solid #7a7a7a;
+  border-inline-end: 2px solid #7a7a7a;
 }
 body.grey-icons-enabled .subtasks-item .check-box-unicode {
  filter: grayscale(100%);
@@ -157,7 +170,7 @@ body.grey-icons-enabled .subtasks-item .check-box-unicode {
 }
 .subtasks-item .item-title {
  flex: 1;
-  padding-left: 10px;
+  padding-inline-start: 10px;
 }
 .subtasks-item .item-title.is-checked {
  color: #8c8c8c;
@@ -175,6 +188,7 @@ body.grey-icons-enabled .subtasks-item .check-box-unicode {
  display: inline-block;
 }
 .subtask-details-menu {
-  float: right;
+  flex-shrink: 0;
  padding: 6px 10px 6px 10px;
+  order: 2;
 }
@@ -26,7 +26,7 @@ template(name="subtaskDetail")
      .subtask-title
        span
        if canModifyCard
-          a.subtask-details-menu.js-open-subtask-details-menu(title="{{_ 'subtaskActionsPopup-title'}}")
+          a.fa.fa-navicon.subtask-details-menu.js-open-subtask-details-menu(title="{{_ 'subtaskActionsPopup-title'}}")
        if canModifyCard
          h2.title.js-open-inlined-form.is-editable
            +viewer
@@ -40,7 +40,7 @@ template(name="addSubtaskItemForm")
  textarea.js-add-subtask-item(rows='1' autofocus dir="auto")
  .edit-controls.clearfix
    button.primary.confirm.js-submit-add-subtask-item-form(type="submit") {{_ 'save'}}
-    a.js-close-inlined-form
+    a.fa.fa-times-thin.js-close-inlined-form(title="{{_ 'close-add-checklist-item'}}")

 template(name="editSubtaskItemForm")
  textarea.js-edit-subtask-item(rows='1' autofocus dir="auto")
@@ -50,8 +50,8 @@ template(name="editSubtaskItemForm")
      = subtask.title
  .edit-controls.clearfix
    button.primary.confirm.js-submit-edit-subtask-item-form(type="submit") {{_ 'save'}}
-    a.js-close-inlined-form
-    span(title=createdAt) {{ moment createdAt }}
+    a.fa.fa-times-thin.js-close-inlined-form(title="{{_ 'close-edit-checklist-item'}}")
+    span(title=createdAt) {{ displayDate createdAt }}
    if canModifyCard
      if currentUser.isBoardAdmin
        a.js-delete-subtask-item {{_ "delete"}}...
@@ -74,14 +74,13 @@ template(name="subtasksItems")
 template(name='subtaskItemDetail')
  .js-subtasks-item.subtasks-item
    if canModifyCard
-      span.check-box-unicode
-        i.fa(class="{{#if item.isFinished}}fa-check-square{{else}}fa-square-o{{/if}}")
+      .check-box-container
+        .check-box.materialCheckBox(class="{{#if item.isFinished}}is-checked{{/if}}")
      .item-title.js-open-inlined-form.is-editable(class="{{#if item.isFinished }}is-checked{{/if}}")
        +viewer
          = item.title
    else
-      span.check-box-unicode
-        i.fa(class="{{#if item.isFinished}}fa-check-square{{else}}fa-square-o{{/if}}")
+      .materialCheckBox(class="{{#if item.isFinished}}is-checked{{/if}}")
      .item-title(class="{{#if item.isFinished }}is-checked{{/if}}")
        +viewer
          = item.title
@@ -96,6 +95,10 @@ template(name="subtaskActionsPopup")
      a.js-view-subtask(title="{{ subtask.title }}")
        i.fa.fa-eye
        | {{_ "view-it"}}
+    li
+      a.js-go-to-subtask-board
+        i.fa.fa-folder
+        | {{_ "go-to-board"}}
      if currentUser.isBoardAdmin
        a.js-delete-subtask.delete-subtask
          i.fa.fa-trash
@@ -1,17 +1,35 @@
 import { ReactiveCache } from '/imports/reactiveCache';
 import { FlowRouter } from 'meteor/ostrio:flow-router-extra';
+import Cards from '/models/cards';
+import { Filter } from '/client/lib/filter';

-BlazeComponent.extendComponent({
-  addSubtask(event) {
+Template.subtasks.events({
+  'click .js-open-subtask-details-menu'(event) {
+    // Close any existing popup first to avoid accumulating content
+    if (Popup.isOpen()) {
+      Popup.close();
+    }
+    // Now open the popup for this specific subtask
+    Popup.open('subtaskActions').call(this, event);
+  },
+  async 'submit .js-add-subtask'(event, tpl) {
    event.preventDefault();
-    const textarea = this.find('textarea.js-add-subtask-item');
+    const textarea = tpl.find('textarea.js-add-subtask-item');
    const title = textarea.value.trim();
-    const cardId = this.currentData().cardId;
+    const cardId = Template.currentData().cardId;
    const card = ReactiveCache.getCard(cardId);
    const sortIndex = -1;
    const crtBoard = ReactiveCache.getBoard(card.boardId);
-    const targetBoard = crtBoard.getDefaultSubtasksBoard();
-    const listId = targetBoard.getDefaultSubtasksListId();
+    const targetBoard = await crtBoard.getDefaultSubtasksBoardAsync();
+    if (!targetBoard) {
+      return;
+    }
+
+    const targetList = await targetBoard.getDefaultSubtasksListAsync();
+    if (!targetList) {
+      return;
+    }
+    const listId = targetList._id;

    //Get the full swimlane data for the parent task.
    const parentSwimlane = ReactiveCache.getSwimlane({
@@ -19,20 +37,22 @@ BlazeComponent.extendComponent({
      _id: card.swimlaneId,
    });
    //find the swimlane of the same name in the target board.
-    const targetSwimlane = ReactiveCache.getSwimlane({
-      boardId: targetBoard._id,
-      title: parentSwimlane.title,
-    });
+    const targetSwimlane = parentSwimlane
+      ? ReactiveCache.getSwimlane({
+          boardId: targetBoard._id,
+          title: parentSwimlane.title,
+        })
+      : undefined;
    //If no swimlane with a matching title exists in the target board, fall back to the default swimlane.
    const swimlaneId =
      targetSwimlane === undefined
        ? targetBoard.getDefaultSwimline()._id
        : targetSwimlane._id;

-    const nextCardNumber = targetBoard.getNextCardNumber();
+    const nextCardNumber = await targetBoard.getNextCardNumber();

    if (title) {
-      const _id = Cards.insert({
+      const _id = await Cards.insertAsync({
        title,
        parentId: cardId,
        members: [],
@@ -43,7 +63,7 @@ BlazeComponent.extendComponent({
        sort: sortIndex,
        swimlaneId,
        type: 'cardType-card',
-        cardNumber: nextCardNumber
+        cardNumber: nextCardNumber,
      });

      // In case the filter is active we need to add the newly inserted card in
@@ -53,7 +73,7 @@ BlazeComponent.extendComponent({
      Filter.addException(_id);

      setTimeout(() => {
-        this.$('.add-subtask-item')
+        tpl.$('.add-subtask-item')
          .last()
          .click();
      }, 100);
@@ -61,27 +81,20 @@ BlazeComponent.extendComponent({
    textarea.value = '';
    textarea.focus();
  },
-
-  async deleteSubtask() {
-    const subtask = this.currentData().subtask;
+  'submit .js-edit-subtask-title'(event, tpl) {
+    event.preventDefault();
+    const textarea = tpl.find('textarea.js-edit-subtask-item');
+    const title = textarea.value.trim();
+    const subtask = Template.currentData().subtask;
+    subtask.setTitle(title);
+  },
+  async 'click .js-delete-subtask-item'() {
+    const subtask = Template.currentData().subtask;
    if (subtask && subtask._id) {
      await subtask.archive();
    }
  },
-
-  isBoardAdmin() {
-    return ReactiveCache.getCurrentUser().isBoardAdmin();
-  },
-
-  async editSubtask(event) {
-    event.preventDefault();
-    const textarea = this.find('textarea.js-edit-subtask-item');
-    const title = textarea.value.trim();
-    const subtask = this.currentData().subtask;
-    await subtask.setTitle(title);
-  },
-
-  pressKey(event) {
+  keydown(event) {
    //If user press enter key inside a form, submit it
    //Unless the user is also holding down the 'shift' key
    if (event.keyCode === 13 && !event.shiftKey) {
@@ -90,65 +103,66 @@ BlazeComponent.extendComponent({
      $form.find('button[type=submit]').click();
    }
  },
+});

-  events() {
-    return [
-      {
-        'click .js-open-subtask-details-menu': Popup.open('subtaskActions'),
-        'submit .js-add-subtask': this.addSubtask,
-        'submit .js-edit-subtask-title': this.editSubtask,
-        'click .js-delete-subtask-item': this.deleteSubtask,
-        keydown: this.pressKey,
-      },
-    ];
+Template.subtasks.onCreated(function () {
+  this.toggleDeleteDialog = new ReactiveVar(false);
+});
+
+Template.subtasks.helpers({
+  isBoardAdmin() {
+    return ReactiveCache.getCurrentUser().isBoardAdmin();
  },
-}).register('subtasks');
+  toggleDeleteDialog() {
+    return Template.instance().toggleDeleteDialog;
+  },
+});

-BlazeComponent.extendComponent({
-  async toggleItem() {
-    const item = this.currentData().item;
+Template.subtaskItemDetail.events({
+  async 'click .js-subtasks-item .check-box-container'() {
+    const item = Template.currentData().item;
    if (item && item._id) {
      await item.toggleItem();
    }
  },
-  events() {
-    return [
-      {
-        'click .js-subtasks-item .check-box-unicode': this.toggleItem,
-      },
-    ];
-  },
-}).register('subtaskItemDetail');
+});

-BlazeComponent.extendComponent({
+Template.subtaskActionsPopup.helpers({
  isBoardAdmin() {
    return ReactiveCache.getCurrentUser().isBoardAdmin();
  },
-  events() {
-    return [
-      {
-        'click .js-view-subtask'(event) {
-          if ($(event.target).hasClass('js-view-subtask')) {
-            const subtask = this.currentData().subtask;
-            const board = subtask.board();
-            FlowRouter.go('card', {
-              boardId: board._id,
-              slug: board.slug,
-              cardId: subtask._id,
-            });
-          }
-        },
-        'click .js-delete-subtask' : Popup.afterConfirm('subtaskDelete', async function () {
-          Popup.back(2);
-          const subtask = this.subtask;
-          if (subtask && subtask._id) {
-            await subtask.archive();
-          }
-        }),
-      }
-    ]
-  }
-}).register('subtaskActionsPopup');
+});
+
+Template.subtaskActionsPopup.events({
+  'click .js-view-subtask'(event) {
+    if ($(event.target).hasClass('js-view-subtask')) {
+      const subtask = Template.currentData().subtask;
+      const board = subtask.board();
+      FlowRouter.go('card', {
+        boardId: board._id,
+        slug: board.slug,
+        cardId: subtask._id,
+        swimlaneId: subtask.swimlaneId,
+        listId: subtask.listId,
+      });
+    }
+  },
+  'click .js-go-to-subtask-board'() {
+    const subtask = Template.currentData().subtask;
+    const board = subtask.board();
+    if (board) {
+      Popup.close();
+      FlowRouter.go('board', { id: board._id, slug: board.slug });
+    }
+  },
+  'click .js-delete-subtask' : Popup.afterConfirm('subtaskDelete', async function () {
+    Popup.back(2);
+    const subtask = this.subtask;
+    if (subtask && subtask._id) {
+      await subtask.archive();
+    }
+  }),
+});

 Template.editSubtaskItemForm.helpers({
  user() {
@@ -158,5 +172,3 @@ Template.editSubtaskItemForm.helpers({
    return ReactiveCache.getCurrentUser().isBoardAdmin();
  },
 });
-
-
@@ -13,7 +13,7 @@
 }

 .original-position-loading i {
-  margin-right: 5px;
+  margin-inline-end: 5px;
 }

 .original-position-details {
@@ -34,7 +34,7 @@

 .original-position-moved i {
  color: #f39c12;
-  margin-right: 5px;
+  margin-inline-end: 5px;
 }

 .original-position-unchanged {
@@ -48,7 +48,7 @@

 .original-position-unchanged i {
  color: #28a745;
-  margin-right: 5px;
+  margin-inline-end: 5px;
 }

 .original-position-text {
@@ -81,11 +81,11 @@
    font-size: 11px;
    padding: 6px;
  }
-  
+
  .original-position-details {
    padding: 4px 6px;
  }
-  
+
  .original-position-moved,
  .original-position-unchanged {
    padding: 3px 5px;
@@ -99,24 +99,24 @@
    border-color: #4a5568;
    color: #e2e8f0;
  }
-  
+
  .original-position-moved {
    background-color: #744210;
    border-color: #b7791f;
    color: #fbd38d;
  }
-  
+
  .original-position-unchanged {
    background-color: #22543d;
    border-color: #38a169;
    color: #9ae6b4;
  }
-  
+
  .original-title {
    color: #a0aec0;
    border-color: #4a5568;
  }
-  
+
  .original-title strong {
    color: #e2e8f0;
  }
@@ -1,27 +0,0 @@
-<template name="originalPosition">
-  <div class="original-position-info">
-    {{#if isLoading}}
-      <div class="original-position-loading">
-        ⏳ Loading original position...
-      </div>
-    {{else if showOriginalPosition}}
-      <div class="original-position-details">
-        {{#if hasMovedFromOriginal}}
-          <div class="original-position-moved">
-            <span class="original-position-text">ℹ️ {{getOriginalPositionDescription}}</span>
-          </div>
-        {{else}}
-          <div class="original-position-unchanged">
-            <span class="original-position-text">✅ In original position</span>
-          </div>
-        {{/if}}
-        
-        {{#if getOriginalTitle}}
-          <div class="original-title">
-            <strong>Original title:</strong> {{getOriginalTitle}}
-          </div>
-        {{/if}}
-      </div>
-    {{/if}}
-  </div>
-</template>
@@ -0,0 +1,19 @@
+template(name="originalPosition")
+  .original-position-info
+    if isLoading
+      .original-position-loading
+        | ⏳ Loading original position...
+    else
+      if showOriginalPosition
+        .original-position-details
+          if hasMovedFromOriginal
+            .original-position-moved
+              span.original-position-text ℹ️ {{getOriginalPositionDescription}}
+          else
+            .original-position-unchanged
+              span.original-position-text ✅ In original position
+
+          if getOriginalTitle
+            .original-title
+              strong Original title:
+              |  {{getOriginalTitle}}
@@ -1,71 +1,71 @@
-import { BlazeComponent } from 'meteor/peerlibrary:blaze-components';
 import { ReactiveVar } from 'meteor/reactive-var';
 import { Meteor } from 'meteor/meteor';
-import { Template } from 'meteor/templating';
-import './originalPosition.html';

 /**
 * Component to display original position information for swimlanes, lists, and cards
 */
-class OriginalPositionComponent extends BlazeComponent {
-  onCreated() {
-    super.onCreated();
-    this.originalPosition = new ReactiveVar(null);
-    this.isLoading = new ReactiveVar(false);
-    this.hasMoved = new ReactiveVar(false);
-    
-    this.autorun(() => {
-      const data = this.data();
-      if (data && data.entityId && data.entityType) {
-        this.loadOriginalPosition(data.entityId, data.entityType);
-      }
-    });
-  }

-  loadOriginalPosition(entityId, entityType) {
-    this.isLoading.set(true);
-    
+Template.originalPosition.onCreated(function () {
+  this.originalPosition = new ReactiveVar(null);
+  this.isLoading = new ReactiveVar(false);
+  this.hasMoved = new ReactiveVar(false);
+
+  const tpl = this;
+
+  function loadOriginalPosition(entityId, entityType) {
+    tpl.isLoading.set(true);
+
    const methodName = `positionHistory.get${entityType.charAt(0).toUpperCase() + entityType.slice(1)}OriginalPosition`;
-    
+
    Meteor.call(methodName, entityId, (error, result) => {
-      this.isLoading.set(false);
+      tpl.isLoading.set(false);
      if (error) {
        console.error('Error loading original position:', error);
-        this.originalPosition.set(null);
+        tpl.originalPosition.set(null);
      } else {
-        this.originalPosition.set(result);
-        
+        tpl.originalPosition.set(result);
+
        // Check if the entity has moved
        const movedMethodName = `positionHistory.has${entityType.charAt(0).toUpperCase() + entityType.slice(1)}Moved`;
        Meteor.call(movedMethodName, entityId, (movedError, movedResult) => {
          if (!movedError) {
-            this.hasMoved.set(movedResult);
+            tpl.hasMoved.set(movedResult);
          }
        });
      }
    });
  }

+  this.autorun(() => {
+    const data = Template.currentData();
+    if (data && data.entityId && data.entityType) {
+      loadOriginalPosition(data.entityId, data.entityType);
+    }
+  });
+});
+
+Template.originalPosition.helpers({
  getOriginalPosition() {
-    return this.originalPosition.get();
-  }
+    return Template.instance().originalPosition.get();
+  },

  isLoading() {
-    return this.isLoading.get();
-  }
+    return Template.instance().isLoading.get();
+  },

  hasMovedFromOriginal() {
-    return this.hasMoved.get();
-  }
+    return Template.instance().hasMoved.get();
+  },

  getOriginalPositionDescription() {
-    const position = this.getOriginalPosition();
+    const position = Template.instance().originalPosition.get();
    if (!position) return 'No original position data';
-    
+
    if (position.originalPosition) {
-      const entityType = this.data().entityType;
+      const data = Template.currentData();
+      const entityType = data.entityType;
      let description = `Original position: ${position.originalPosition.sort || 0}`;
-      
+
      if (entityType === 'list' && position.originalSwimlaneId) {
        description += ` in swimlane ${position.originalSwimlaneId}`;
      } else if (entityType === 'card') {
@@ -76,23 +76,19 @@ class OriginalPositionComponent extends BlazeComponent {
          description += ` in list ${position.originalListId}`;
        }
      }
-      
+
      return description;
    }
-    
+
    return 'No original position data';
-  }
+  },

  getOriginalTitle() {
-    const position = this.getOriginalPosition();
+    const position = Template.instance().originalPosition.get();
    return position ? position.originalTitle : '';
-  }
+  },

  showOriginalPosition() {
-    return this.getOriginalPosition() !== null;
-  }
-}
-
-OriginalPositionComponent.register('originalPosition');
-
-export default OriginalPositionComponent;
+    return Template.instance().originalPosition.get() !== null;
+  },
+});
@@ -0,0 +1,16 @@
+import {
+  setupDatePicker,
+  datePickerRendered,
+  datePickerHelpers,
+  datePickerEvents,
+} from '/client/lib/datepicker';
+
+Template.datepicker.onCreated(function () {
+  setupDatePicker(this);
+});
+
+Template.datepicker.onRendered(function () {
+  datePickerRendered(this);
+});
+
+Template.datepicker.helpers(datePickerHelpers());
@@ -143,8 +143,8 @@ button {
 }
 input[type="submit"] .wide,
 button .wide {
-  padding-left: 4vw;
-  padding-right: 4vw;
+  padding-inline-start: 4vw;
+  padding-inline-end: 4vw;
 }
 input[type="submit"]:hover,
 button:hover,
@@ -209,7 +209,7 @@ button.negate:active {
 }
 input[type="submit"] i.fa,
 button i.fa {
-  margin-right: 10px;
+  margin-inline-end: 10px;
 }
 input[type="submit"].disabled,
 input[type="submit"]:disabled,
@@ -248,7 +248,7 @@ input[type="hidden"] {
 }
 .radio-div input,
 .check-div input {
-  left: -2.5vw;
+  inset-inline-start: -2.5vw;
  min-height: 0;
  margin: 0;
  padding: 0;
@@ -289,7 +289,7 @@ textarea::-moz-placeholder {
 .add-controls button[type=submit],
 .edit-controls input[type=button],
 .add-controls input[type=button] {
-  float: left;
+  float: inline-start;
  height: 4.5vh;
  margin-bottom: 0px;
 }
@@ -301,7 +301,7 @@ textarea::-moz-placeholder {
 [type="checkbox"]:not(:checked),
 [type="checkbox"]:checked {
  position: absolute;
-  left: -9999px;
+  inset-inline-start: -9999px;
  visibility: hidden;
  display: none;
 }
@@ -318,14 +318,14 @@ textarea::-moz-placeholder {
 }
 .materialCheckBox.is-checked {
  top: -4px;
-  left: -3px;
+  inset-inline-start: -3px;
  width: 7px;
  height: 15px;
-  margin-right: 6px;
+  margin-inline-end: 6px;
  border-top: 2px solid transparent;
-  border-left: 2px solid transparent;
+  border-inline-start: 2px solid transparent;
  border-bottom: 2px solid #3cb500;
-  border-right: 2px solid #3cb500;
+  border-inline-end: 2px solid #3cb500;
  transform: rotate(40deg);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
@@ -334,7 +334,7 @@ textarea::-moz-placeholder {
 /* Grey checkmarks when grey icons setting is enabled */
 body.grey-icons-enabled .materialCheckBox.is-checked {
  border-bottom: 2px solid #7a7a7a;
-  border-right: 2px solid #7a7a7a;
+  border-inline-end: 2px solid #7a7a7a;
 }
 .button-link {
  background: #fff;
@@ -369,12 +369,12 @@ body.grey-icons-enabled .materialCheckBox.is-checked {
  margin: 0;
  padding: 2px 4px;
  position: absolute;
-  right: 5px;
+  inset-inline-end: 5px;
  top: 5px;
  text-align: center;
 }
 .button-link.is-on {
-  padding-right: 30px;
+  padding-inline-end: 30px;
  max-width: 196px;
 }
 .button-link.is-on .on {
@@ -383,11 +383,11 @@ body.grey-icons-enabled .materialCheckBox.is-checked {
 .button-link.inline {
  color: #666;
  padding: 2px 14px;
-  margin-left: 4px;
+  margin-inline-start: 4px;
 }
 .button-link.setting {
  height: 52px;
-  float: left;
+  float: inline-start;
  position: relative;
  margin-top: 0;
 }
@@ -440,7 +440,7 @@ body.grey-icons-enabled .materialCheckBox.is-checked {
  border: none;
  cursor: pointer;
  height: 50px;
-  left: 0;
+  inset-inline-start: 0;
  margin: 0;
  opacity: 0;
  position: absolute;
@@ -501,7 +501,7 @@ body.grey-icons-enabled .materialCheckBox.is-checked {
 button.quiet-button,
 button.loud-text-button {
  background: none;
-  text-align: left;
+  text-align: start;
  line-height: normal;
  border: none;
  box-shadow: none;
@@ -535,7 +535,7 @@ button.loud-text-button:hover {
 }
 .emphasis-button.w-img,
 .quiet-button.w-img {
-  padding-left: 28px;
+  padding-inline-start: 28px;
 }
 .emphasis-button:hover,
 .quiet-button:hover {
@@ -582,13 +582,13 @@ button.loud-text-button:hover {
  background: #dcdcdc;
 }
 .big-link.options {
-  padding-right: 41px;
+  padding-inline-end: 41px;
 }
 .big-link .option {
  height: 30px;
  width: 30px;
  position: absolute;
-  right: 6px;
+  inset-inline-end: 6px;
  top: 6px;
 }
 .big-link.none {
@@ -599,7 +599,7 @@ button.loud-text-button:hover {
  background: transparent;
 }
 .big-link.avatar-changer {
-  padding-right: 51px;
+  padding-inline-end: 51px;
 }
 .big-link.avatar-changer .member {
  border: 1px solid #ccc;
@@ -607,7 +607,7 @@ button.loud-text-button:hover {
  height: 40px;
  width: 40px;
  position: absolute;
-  right: 0;
+  inset-inline-end: 0;
  top: 0;
 }
 .big-link.avatar-changer .member .member-avatar {
@@ -652,7 +652,7 @@ button.loud-text-button:hover {
  line-height: 34px;
  position: absolute;
  top: 0;
-  left: 0;
+  inset-inline-start: 0;
  width: 100%;
  z-index: 2;
  font-size: 23px;
@@ -687,7 +687,7 @@ button.loud-text-button:hover {
 .dropdown-menu li a img {
  width: 18px;
  height: 18px;
-  margin-right: 5px;
+  margin-inline-end: 5px;
  vertical-align: middle;
 }
 .dropdown-menu li a .minicard-label {
@@ -719,7 +719,7 @@ button.loud-text-button:hover {
 }
 .toggle-label:after {
  position: absolute;
-  left: -2px;
+  inset-inline-start: -2px;
  top: -3px;
  display: block;
  width: 26px;
@@ -737,7 +737,7 @@ button.loud-text-button:hover {
  background-color: #6fbeb5;
 }
 .toggle-switch:checked ~ .toggle-label:after {
-  left: 20px;
+  inset-inline-start: 20px;
  background-color: #179588;
 }
 .toggle-switch:checked:disabled ~ .toggle-label {
@@ -1,6 +1,7 @@
 template(name='inlinedForm')
-  if isOpen.get
-    form.inlined-form.js-inlined-form(id=id class=classNames)
-      +Template.contentBlock
-  else
-    +Template.elseBlock
+  .js-inlined-form-wrapper(style='display: contents;' data-position=position)
+    if isOpen.get
+      form.inlined-form.js-inlined-form(id=id class=classNames)
+        +Template.contentBlock
+    else
+      +Template.elseBlock
@@ -67,17 +67,17 @@

 .gantt-container thead th,
 .gantt-container thead tr > td:first-child {
-  border-right: 2px solid #666;
+  border-inline-end: 2px solid #666;
  padding: 4px; /* half of 8px */
  width: 100px; /* half of 200px */
-  text-align: left;
+  text-align: start;
  font-weight: bold;
  background-color: #e8e8e8;
  min-width: 100px; /* half of 200px */
 }

 .gantt-container thead td {
-  border-right: 1px solid #999;
+  border-inline-end: 1px solid #999;
  padding: 2px 1px; /* half */
  text-align: center;
  background-color: #f5f5f5;
@@ -104,7 +104,7 @@
 }

 .gantt-container tbody td {
-  border-right: 1px solid #ccc;
+  border-inline-end: 1px solid #ccc;
  padding: 1px; /* half */
  text-align: center;
  min-width: 15px; /* half of 30px */
@@ -121,12 +121,12 @@
 }

 .gantt-container tbody td:first-child {
-  border-right: 2px solid #666;
+  border-inline-end: 2px solid #666;
  padding: 4px; /* half of 8px */
  font-weight: 500;
  cursor: pointer;
  background-color: #fafafa !important;
-  text-align: left;
+  text-align: start;
  width: 100px; /* half of 200px */
  min-width: 100px; /* half of 200px */
  white-space: nowrap;
@@ -155,7 +155,7 @@

 .gantt-container .ganttview-today {
  background-color: #fcf8e3;
-  border-right: 2px solid #ffb347;
+  border-inline-end: 2px solid #ffb347;
 }

 /* Task bar styling - VERY VISIBLE */
@@ -1,4 +1,5 @@
 import { FlowRouter } from 'meteor/ostrio:flow-router-extra';
+import Cards from '/models/cards';

 // Add click handler to ganttView for card titles
 Template.ganttView.events({
@@ -14,6 +15,7 @@ Template.ganttView.events({
  },
 });
 import { Template } from 'meteor/templating';
+import { Utils } from '/client/lib/utils';

 // Blaze template helpers for ganttView
 function getISOWeekInfo(d) {
@@ -1,34 +1,30 @@
-BlazeComponent.extendComponent({
-  onCreated() {
-    // Provide the expected parent component properties for cardDetails
-    this.showOverlay = new ReactiveVar(false);
-    this.mouseHasEnterCardDetails = false;
-  },
+Template.ganttCard.onCreated(function () {
+  // Provide the expected parent component properties for cardDetails
+  this.showOverlay = new ReactiveVar(false);
+  this.mouseHasEnterCardDetails = false;
+});

+Template.ganttCard.helpers({
  selectedCard() {
    // The selected card is now passed as a parameter to the component
-    return this.currentData();
+    return Template.currentData();
  },
+});

-  events() {
-    return [
-      {
-        'click .js-close-card-details'(event) {
-          event.preventDefault();
-          // Find the ganttView template instance and clear selectedCardId
-          let view = Blaze.currentView;
-          while (view) {
-            if (view.templateInstance && view.templateInstance().selectedCardId) {
-              view.templateInstance().selectedCardId.set(null);
-              break;
-            }
-            view = view.parentView;
-          }
-        },
-      },
-    ];
+Template.ganttCard.events({
+  'click .js-close-card-details'(event) {
+    event.preventDefault();
+    // Find the ganttView template instance and clear selectedCardId
+    let view = Blaze.currentView;
+    while (view) {
+      if (view.templateInstance && view.templateInstance().selectedCardId) {
+        view.templateInstance().selectedCardId.set(null);
+        break;
+      }
+      view = view.parentView;
+    }
  },
-}).register('ganttCard');
+});

 // Add click handler to ganttView for card titles
 Template.ganttView.events({
@@ -49,3 +49,119 @@ a.show-mapping {
  font-size: 90%;
  font-weight: bold;
 }
+
+/* Trello API import: file rows, workspace tree, job progress and errors */
+/* The shared page spinners are centered with a large top margin (e.g. bounce
+   uses margin:100px auto), which leaves a big empty gap above the spinner in
+   this compact panel. Make spinners here small and inline instead. */
+.trello-api-import .sk-spinner {
+  margin: 0 8px 0 0;
+  display: inline-block;
+  vertical-align: middle;
+  width: auto;
+}
+.trello-api-import .import-file-row label {
+  display: block;
+  font-weight: bold;
+}
+.trello-api-import .import-file-row input,
+.trello-api-import .import-file-row select {
+  width: 100%;
+}
+.trello-workspaces {
+  max-height: 40vh;
+  overflow-y: auto;
+  border: 1px solid #ddd;
+  padding: 8px;
+  margin: 8px 0;
+}
+.trello-workspace {
+  margin-bottom: 8px;
+}
+.trello-workspace .trello-boards {
+  margin-inline-start: 22px;
+}
+.trello-workspace-title,
+.trello-board {
+  align-items: center;
+  padding: 3px 0;
+  cursor: pointer;
+  text-decoration: none;
+  color: inherit;
+}
+.trello-workspace-title .materialCheckBox,
+.trello-board .materialCheckBox {
+  flex: 0 0 auto;
+  margin-inline-end: 12px;
+}
+.trello-select-controls button {
+  margin-inline-end: 6px;
+}
+.trello-job-controls button {
+  margin-inline-end: 6px;
+}
+/* Import progress meter, styled like Admin Panel / Attachments / Move Attachments */
+.trello-progress-label {
+  margin: 8px 0 6px;
+}
+.trello-progress-bar {
+  background: #e9ecef;
+  border-radius: 8px;
+  height: 12px;
+  overflow: hidden;
+  margin-bottom: 4px;
+}
+.trello-progress-fill {
+  background: linear-gradient(90deg, #28a745, #20c997);
+  height: 100%;
+  border-radius: 8px;
+  transition: width 0.3s ease;
+  position: relative;
+}
+.trello-progress-fill.is-running::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  inset-inline-start: 0;
+  inset-inline-end: 0;
+  bottom: 0;
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
+  animation: trelloProgressShimmer 2s infinite;
+}
+@keyframes trelloProgressShimmer {
+  0% { transform: translateX(-100%); }
+  100% { transform: translateX(100%); }
+}
+.trello-progress-percent {
+  text-align: end;
+  font-size: 12px;
+  color: #666;
+  font-weight: 600;
+  margin-bottom: 8px;
+}
+.trello-import-result.is-ok {
+  color: #3cb500;
+}
+.trello-import-result.is-error {
+  color: #eb4646;
+}
+.js-trello-errors-text {
+  width: 100%;
+  font-family: monospace;
+  white-space: pre;
+}
+
+/* Trello API credential Save/Delete buttons */
+.trello-api-creds-buttons button {
+  margin-inline-end: 6px;
+}
+.trello-creds-saved {
+  color: #3cb500;
+}
+
+/* Simplified per-field hint text under the Trello file upload labels */
+.import-file-row .import-file-hint {
+  display: block;
+  font-size: 0.85em;
+  margin: 2px 0 4px;
+}
@@ -2,20 +2,136 @@ template(name="importHeaderBar")
  h1
    a.back-btn(href="{{pathFor 'home'}}")
      i.fa-arrow-left
-    | {{_ title}}
+    | {{title}}

 template(name="import")
  .wrapper
    if error.get
      .warning {{_ error.get}}
+    if zipImporting
+      .warning {{_ 'import-trello-zip-progress'}}
    +Template.dynamic(template=currentTemplate)

 template(name="importTextarea")
  form
-    p: label(for='import-textarea') {{_ instruction}} {{_ 'import-board-instruction-about-errors'}}
-    textarea.js-import-json(id='import-textarea' placeholder="{{_ importPlaceHolder}}" autofocus)
-      | {{jsonText}}
+    p: label(for='import-textarea') {{instruction}} {{_ 'import-board-instruction-about-errors'}}
+    if isExcelImport
+      p.import-file-row
+        label(for='import-excel-file') {{_ 'import-excel-file'}}
+        input.js-import-excel-file(id='import-excel-file' type="file" accept=".xlsx,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet")
+    else
+      textarea.js-import-json(id='import-textarea' placeholder="{{_ importPlaceHolder}}" autofocus)
+        | {{jsonText}}
+    if isTrelloImport
+      p.import-file-row
+        label(for='import-json-file') {{_ 'import-trello-json-file'}}
+        span.quiet.import-file-hint {{_ 'import-trello-json-file-hint'}}
+        input.js-import-json-file(id='import-json-file' type="file" accept=".json,application/json")
+      p.import-file-row
+        label(for='import-zip-file') {{_ 'import-trello-zip-file'}}
+        span.quiet.import-file-hint {{_ 'import-trello-zip-file-hint'}}
+        input.js-import-zip-file(id='import-zip-file' type="file" accept=".zip,application/zip")
+      p.import-file-row
+        label(for='import-workspace-name') {{_ 'import-trello-workspace'}}
+        input.js-import-workspace-name(id='import-workspace-name' type="text" placeholder="{{_ 'import-trello-workspace-placeholder'}}")
    input.primary.wide(type="submit" value="{{_ 'import'}}")
+    button.wide.js-import-without-mapping(type="button") {{_ 'import-without-mapping-members'}}
+  if isTrelloImport
+    hr
+    +importTrelloApi
+
+template(name="importTrelloApi")
+  .trello-api-import
+    h2 {{_ 'trello-api-import'}}
+    p.quiet {{_ 'trello-api-import-desc'}}
+    p.import-file-row
+      label(for='trello-api-key') {{_ 'trello-api-key'}}
+      input.js-trello-key(id='trello-api-key' type="text" autocomplete="off")
+    p.import-file-row
+      label(for='trello-api-token') {{_ 'trello-api-token'}}
+      input.js-trello-token(id='trello-api-token' type="password" autocomplete="off")
+    p.trello-api-creds-buttons
+      button.primary.js-trello-save-creds(type="button") {{_ 'save'}}
+      button.negate.js-trello-delete-creds(type="button") {{_ 'delete'}}
+    if credsSaved
+      p.quiet.trello-creds-saved
+        i.fa.fa-check
+        span  {{_ 'trello-api-credentials-saved'}}
+    p
+      button.primary.js-trello-list-workspaces(type="button") {{_ 'trello-list-workspaces'}}
+    if error.get
+      .warning {{_ error.get}}
+    if loading.get
+      +spinner
+    if hasWorkspaces
+      p.import-file-row
+        label(for='trello-parent-workspace') {{_ 'import-trello-parent-workspace'}}
+        select.js-trello-parent-workspace(id='trello-parent-workspace')
+          option(value="") {{_ 'trello-parent-workspace-top'}}
+          each flatWorkspaceNodes
+            option(value=id)= label
+      p.trello-select-controls
+        button.primary.js-trello-select-all(type="button") {{_ 'select-all'}}
+        button.primary.js-trello-unselect-all(type="button") {{_ 'unselect-all'}}
+      .trello-workspaces
+        each workspaceList
+          .trello-workspace
+            a.flex.trello-workspace-title.js-toggle-workspace
+              .materialCheckBox(class="{{#if workspaceSelected}}is-checked{{/if}}")
+              b  {{name}}
+            .trello-boards
+              each boards
+                a.flex.trello-board.js-toggle-board(data-board-id="{{id}}")
+                  .materialCheckBox(class="{{#if boardSelected}}is-checked{{/if}}")
+                  span  {{name}}
+                  if closed
+                    span.quiet  ({{_ 'archived'}})
+      if canStartImport
+        p
+          button.primary.wide.js-trello-import-selected(type="button") {{_ 'trello-import-selected'}}
+    if currentJob
+      hr
+      .trello-import-job
+        h3 {{_ 'trello-import-progress'}}
+        with currentJob
+          p.trello-progress-label
+            b {{_ 'status'}}:
+            span  {{_ status}} ({{jobProgressText}})
+          .trello-progress-bar
+            .trello-progress-fill(class="{{#if $eq status 'running'}}is-running{{/if}}" style="width: {{jobProgressPercent}}%")
+          .trello-progress-percent {{jobProgressPercent}}%
+          if lastError
+            .warning {{lastError}}
+        p.trello-job-controls
+          if jobIsRunning
+            button.primary.js-trello-cancel(type="button") {{_ 'trello-cancel'}}
+            button.negate.js-trello-cancel-delete(type="button") {{_ 'trello-cancel-delete'}}
+          if jobCanResume
+            button.primary.js-trello-resume(type="button") {{_ 'trello-resume'}}
+            button.negate.js-trello-cancel-delete(type="button") {{_ 'trello-cancel-delete'}}
+          if jobIsFinished
+            button.negate.js-trello-cancel-delete(type="button") {{_ 'trello-delete-imported'}}
+            button.primary.js-trello-clear(type="button") {{_ 'trello-clear-job'}}
+
+        if jobResults.length
+          .trello-import-results
+            each jobResults
+              p.trello-import-result(class="{{#if success}}is-ok{{else}}is-error{{/if}}")
+                if success
+                  i.fa.fa-check
+                  span  {{title}} — {{attachmentsImported}} {{_ 'attachments'}}
+                else
+                  i.fa.fa-warning
+                  span  {{trelloBoardId}}: {{this.error}}
+
+        if jobHasErrors
+          .trello-import-errors
+            p
+              b {{_ 'trello-import-errors'}}
+              button.primary.js-trello-copy-errors(type="button") {{_ 'copy-to-clipboard'}}
+              if copied.get
+                span.quiet  {{_ 'copied'}}
+            textarea.js-trello-errors-text(readonly rows="8" wrap="off")= jobErrorText

 template(name="importMapMembers")
  h2 {{_ 'import-map-members'}}
@@ -48,6 +164,7 @@ template(name="importMapMembers")
        .mapping-item.ghost-item
      form
        input.primary.wide(type="submit" value="{{_ 'done'}}")
+        button.wide.js-import-skip-mapping(type="button") {{_ 'import-without-mapping-members'}}
  else
    +spinner