Bump versions for v11.09

A rebase rewrote the commits these entries link to, so the links named commits
that no longer exist and would have 404ed on GitHub. Repointed by
releases/fix-changelog-hashes.sh, which only touches a link no ref in this clone
can reach.

Thanks to xet7 !

.github/workflows/AppImage.yml

@@ -178,7 +178,7 @@ jobs:
         run: |
           set -euo pipefail
           zip="wekan-${{ needs.release.outputs.version }}-${{ matrix.bundle_arch }}.zip"
-          if gh release view '${{ needs.release.outputs.tag }}' --repo "${{ github.repository }}" \
+          if gh release view --repo "${GITHUB_REPOSITORY:-wekan/wekan}" '${{ needs.release.outputs.tag }}' --repo "${{ github.repository }}" \
                --json assets --jq '.assets[].name' 2>/dev/null | grep -qx "$zip"; then
             echo "OK: $zip is on ${{ needs.release.outputs.tag }}; building its AppImage."
           else
@@ -355,7 +355,7 @@ jobs:
   publish:
     name: attach to the release
     needs: [release, build]
-    if: ${{ always() && inputs.publish != false }}
+    if: ${{ !cancelled() && inputs.publish != false }}
     runs-on: ubuntu-24.04
     steps:
       - uses: actions/download-artifact@v8
@@ -383,7 +383,7 @@ jobs:
             # No AppImage was produced. That is only a FAILURE if there was a base
             # bundle to wrap: an AppImage cannot be built without one, and the
             # build jobs skip (not fail) when the base bundle is not published yet.
-            published="$(gh release view '${{ needs.release.outputs.tag }}' --repo "${{ github.repository }}" --json assets --jq '.assets[].name' 2>/dev/null || true)"
+            published="$(gh release view --repo "${GITHUB_REPOSITORY:-wekan/wekan}" '${{ needs.release.outputs.tag }}' --repo "${{ github.repository }}" --json assets --jq '.assets[].name' 2>/dev/null || true)"
             base_present=false
             for arch in amd64 arm64 i386 armhf; do
               printf '%s\n' "$published" | grep -qx "wekan-${{ needs.release.outputs.version }}-${arch}.zip" && base_present=true
@@ -411,7 +411,7 @@ jobs:
           # call in this workflow already passes it; these two did not, so the
           # AppImages were built, smoke-tested and uploaded as artifacts, and
           # then nothing was attached to the release.
-          gh release upload '${{ needs.release.outputs.tag }}' assets/* \
+          gh release upload --repo "${GITHUB_REPOSITORY:-wekan/wekan}" '${{ needs.release.outputs.tag }}' assets/* \
             --repo "${{ github.repository }}" --clobber
-          echo "Uploaded to $(gh release view '${{ needs.release.outputs.tag }}' \
+          echo "Uploaded to $(gh release view --repo "${GITHUB_REPOSITORY:-wekan/wekan}" '${{ needs.release.outputs.tag }}' \
             --repo "${{ github.repository }}" --json url --jq .url)"

.github/workflows/Flatpak.yml

@@ -153,8 +153,7 @@ jobs:
         if: ${{ env.BUILD_THIS == 'true' }}
         run: |
           set -euo pipefail
-          sudo apt-get update
-          sudo apt-get install -y --no-install-recommends flatpak ostree zip
+          bash "$GITHUB_WORKSPACE/releases/apt-install.sh" --no-install-recommends flatpak ostree zip
           flatpak remote-add --if-not-exists --user flathub \
             https://flathub.org/repo/flathub.flatpakrepo
           flatpak install --user -y --noninteractive flathub \
@@ -304,9 +303,15 @@ jobs:
   publish:
     name: attach to the release, and build the repository
     needs: [release, build]
-    if: ${{ always() }}
+    if: ${{ !cancelled() }}
     runs-on: ubuntu-24.04
     steps:
+      # FIRST: this job runs releases/apt-install.sh, and actions/checkout cleans
+      # the workspace - so it has to happen before the artifacts are downloaded
+      # into it. Without the checkout the step fails with "No such file or
+      # directory", which is how the v10.88 run ended.
+      - uses: actions/checkout@v7
+
       - uses: actions/download-artifact@v8
         with:
           pattern: flatpak-[0-9a-z]*
@@ -342,10 +347,10 @@ jobs:
           # objects/, refs/, summaries/, summary, summary.idx - which is build
           # scaffolding, not something to attach to a release. TSC hit this
           # exact thing ("upload only the bundle files, not the ostree repo").
-          gh release upload '${{ needs.release.outputs.tag }}' \
+          gh release upload --repo "${GITHUB_REPOSITORY:-wekan/wekan}" '${{ needs.release.outputs.tag }}' \
             assets/*.flatpak assets/*.flatpak.md5sum assets/*.flatpak.sha256sum \
             --repo "${{ github.repository }}" --clobber
-          echo "Uploaded to $(gh release view '${{ needs.release.outputs.tag }}' \
+          echo "Uploaded to $(gh release view --repo "${GITHUB_REPOSITORY:-wekan/wekan}" '${{ needs.release.outputs.tag }}' \
             --repo "${{ github.repository }}" --json url --jq .url)"
 
       # ---- the repository -------------------------------------------------
@@ -359,8 +364,7 @@ jobs:
         if: ${{ inputs.publish_repo != false }}
         run: |
           set -euo pipefail
-          sudo apt-get update
-          sudo apt-get install -y --no-install-recommends flatpak ostree
+          bash "$GITHUB_WORKSPACE/releases/apt-install.sh" --no-install-recommends flatpak ostree
           shopt -s nullglob
           parts=(repos/flatpak-repo-*)
           if [ ${#parts[@]} -eq 0 ]; then

.github/workflows/docker-variant.yml

@@ -10,10 +10,15 @@
 # half-hour emulated build, and no way for the variant image to drift from the
 # release it claims to be.
 #
-# `workflow_dispatch` ONLY, on purpose. release-all.yml publishes wekanteam/wekan
-# to Docker Hub, Quay and GHCR on every release; the variant images are published
-# when the maintainer decides to, which is what this file exists for. Nothing
-# here runs on a push, a tag or a schedule.
+# A RELEASE NO LONGER NEEDS THIS. release-all.yml's docker job tags both variants
+# on all three registries in its own `docker buildx build --push`, so every
+# release publishes them with the release's own digests. What this file is for now
+# is everything outside a release: publishing a variant for a version whose
+# release predates that change, repairing a tag, or pointing a variant at a
+# different version deliberately.
+#
+# `workflow_dispatch` ONLY, on purpose: nothing here runs on a push, a tag or a
+# schedule.
 #
 # If a variant repository ever stops being identical to wekan/wekan, this
 # retag becomes wrong: build that repository's own Dockerfile instead.

.github/workflows/meteor-spk.yml

@@ -50,8 +50,7 @@ jobs:
 
       - name: Install system dependencies
         run: |
-          sudo apt-get update
-          sudo apt-get install -y p7zip-full wget curl build-essential g++ make python3 unzip xz-utils git zip
+          bash "$GITHUB_WORKSPACE/releases/apt-install.sh" p7zip-full wget curl build-essential g++ make python3 unzip xz-utils git zip
 
       - name: Install Sandstorm (dev, unattended)
         # build-deps.sh's [bridge] step copies the modern
@@ -104,4 +103,4 @@ jobs:
             exit 0
           fi
           echo "Uploading ${{ steps.zip.outputs.zip }} to the newest release: $TAG"
-          gh release upload "$TAG" "${{ steps.zip.outputs.zip }}" --clobber
+          gh release upload --repo "${GITHUB_REPOSITORY:-wekan/wekan}" "$TAG" "${{ steps.zip.outputs.zip }}" --clobber

.github/workflows/release-all-missing.yml

@@ -10,7 +10,13 @@ name: Release all missing
 # those six without running the whole thing again, version bump and all.
 #
 # This finishes a release that already exists. It never bumps a version, never
-# tags, never touches Docker, snap, the website or the charts.
+# tags, and never touches Docker, snap or the website.
+#
+# It DOES publish the Helm chart, because that is a thing a release can be
+# missing like any other: the chart entry is written once, during the release it
+# belongs to, so a release whose charts job did not run leaves a hole that the
+# next release never goes back for - v10.80 is one of those, and it was not
+# alone. See the charts job at the end.
 #
 # WHAT IT CAN BUILD, and why that is not everything. Only build-amd64 runs
 # Meteor; every other bundle WeKan ships is that same bundle repacked. This job
@@ -79,14 +85,14 @@ jobs:
           V='${{ inputs.version }}'
           V="${V#v}"
           if [ -z "$V" ]; then
-            V="$(gh release view --json tagName --jq .tagName)"
+            V="$(gh release view --repo "${GITHUB_REPOSITORY:-wekan/wekan}" --json tagName --jq .tagName)"
             V="${V#v}"
             echo "No version given; the newest release is v$V."
           fi
           echo "version=$V" >> "$GITHUB_OUTPUT"
 
-          if gh release view "v$V" >/dev/null 2>&1; then
-            gh release view "v$V" --json assets --jq '.assets[].name' | sort > existing.txt
+          if gh release view --repo "${GITHUB_REPOSITORY:-wekan/wekan}" "v$V" >/dev/null 2>&1; then
+            gh release view --repo "${GITHUB_REPOSITORY:-wekan/wekan}" "v$V" --json assets --jq '.assets[].name' | sort > existing.txt
           else
             echo "::error::There is no release v$V to complete. This workflow FINISHES a release; release-all.yml makes one."
             exit 1
@@ -188,19 +194,18 @@ jobs:
             echo "v${VERSION} already has ${{ matrix.arch }}; nothing to do."
           fi
 
+      - uses: actions/checkout@v7
+
       - name: Install dependencies
         if: ${{ steps.want.outputs.build == 'yes' }}
         run: |
-          sudo apt-get update
-          sudo apt-get install -y curl unzip zip
+          bash "$GITHUB_WORKSPACE/releases/apt-install.sh" curl unzip zip
 
       - name: Set up QEMU for ${{ matrix.arch }} emulation
         if: ${{ steps.want.outputs.build == 'yes' }}
         uses: docker/setup-qemu-action@v4
 
-      # Before the download, because actions/checkout cleans the workspace.
-      - uses: actions/checkout@v7
-        if: ${{ steps.want.outputs.build == 'yes' }}
+      # Before the download, because actions/checkout cleans the workspace.        if: ${{ steps.want.outputs.build == 'yes' }}
 
       # THE DIFFERENCE from release-all.yml, and the whole point of this
       # workflow: the amd64 bundle comes from the RELEASE, not from an artifact
@@ -244,11 +249,11 @@ jobs:
           asset="wekan-${VERSION}-${{ matrix.arch }}.zip"
           # No --clobber: this architecture was absent, so an upload that would
           # overwrite something means the release changed under this run.
-          gh release upload "v${VERSION}" "$asset" "${asset}.sha256sum"
+          gh release upload --repo "${GITHUB_REPOSITORY:-wekan/wekan}" "v${VERSION}" "$asset" "${asset}.sha256sum"
           # Confirm from the other side. An upload that reports success and
           # leaves no asset behind is the failure nobody notices until a
           # download 404s.
-          gh release view "v${VERSION}" --json assets --jq '.assets[].name' > release-assets.txt
+          gh release view --repo "${GITHUB_REPOSITORY:-wekan/wekan}" "v${VERSION}" --json assets --jq '.assets[].name' > release-assets.txt
           grep -qxF "$asset" release-assets.txt || {
             echo "::error::$asset is not on release v${VERSION} although the upload reported success."
             exit 1
@@ -279,10 +284,109 @@ jobs:
       publish: true
       only: ${{ needs.plan.outputs.flatpak }}
 
+
+  # ─── The Helm chart, for a release that never got one ───────────────────────
+  #
+  # Everything else here rebuilds a missing BUNDLE; this publishes a missing
+  # CHART, which goes missing the same way and for the same reason. A chart is
+  # written once, by release-charts.sh, during the release it belongs to, so a
+  # release whose charts job did not run has no chart and nothing ever goes back
+  # for it. That is not rare - 146 of the packages already on gh-pages had no
+  # index entry, and v10.80 has no package at all, because a cancelled
+  # build-mac-x64 cancelled its run before the charts job started.
+  #
+  # It is the one part of this workflow that PUSHES to another repository, so it
+  # is guarded twice: it does nothing unless a token that can push to
+  # wekan/charts is configured, and nothing if the chart for this version is
+  # already published. Re-publishing an existing version would re-tar the package
+  # and change the digest of a chart people have already pulled.
+  charts:
+    name: Helm chart
+    needs: plan
+    if: ${{ !cancelled() && needs.plan.outputs.version != '' }}
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout wekan (for releases/release-charts.sh)
+        if: steps.check.outputs.skip != 'true'
+        uses: actions/checkout@v7
+        with:
+          path: wekan
+
+      - name: Is a chart already published for this version?
+        id: check
+        env:
+          V: ${{ needs.plan.outputs.version }}
+          REPO_TOKEN: ${{ secrets.WEKAN_REPO_TOKEN }}
+        run: |
+          set -uo pipefail
+          if [ -z "${REPO_TOKEN:-}" ]; then
+            echo "::warning::No WEKAN_REPO_TOKEN, so the Helm chart cannot be published. Add a token that can push to wekan/charts to have this finish the chart too."
+            echo "skip=true" >> "$GITHUB_OUTPUT"
+            exit 0
+          fi
+          # The published index is the authority on what exists, not this
+          # checkout. An entry's own version is at EXACTLY four spaces; the
+          # mongodb subchart's version sits deeper and would match a loose grep.
+          bash wekan/releases/fetch.sh -o index.yaml https://wekan.github.io/charts/index.yaml || {
+            echo "::warning::Could not read the published chart index; not touching the charts repo."
+            echo "skip=true" >> "$GITHUB_OUTPUT"; exit 0; }
+          # -F, a FIXED string: the dots in a version are regex wildcards
+          # otherwise, so "10.80" would also match a line reading 10x80. -x so it
+          # is the whole line, and the four-space indent is what makes it an
+          # entry's own version rather than the mongodb subchart's, which sits
+          # deeper.
+          if grep -qxF "    version: ${V}.0" index.yaml; then
+            echo "::notice::v$V already has a published Helm chart (${V}.0); nothing to do."
+            echo "skip=true" >> "$GITHUB_OUTPUT"
+          else
+            echo "v$V has no published chart; publishing ${V}.0."
+            echo "skip=false" >> "$GITHUB_OUTPUT"
+          fi
+
+
+      - name: Checkout wekan/charts (main + gh-pages)
+        if: steps.check.outputs.skip != 'true'
+        uses: actions/checkout@v7
+        with:
+          repository: wekan/charts
+          token: ${{ secrets.WEKAN_REPO_TOKEN }}
+          fetch-depth: 0
+          path: charts
+
+      - name: Install Helm
+        if: steps.check.outputs.skip != 'true'
+        uses: azure/setup-helm@v5
+
+      - name: Publish the chart for this release
+        if: steps.check.outputs.skip != 'true'
+        env:
+          CHARTS_DIR: ${{ github.workspace }}/charts
+        run: |
+          set -euo pipefail
+          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
+          git checkout main
+          cd ..
+          ./wekan/releases/release-charts.sh "${{ needs.plan.outputs.version }}"
+
+      - name: Job result
+        if: always()
+        run: |
+          case "${{ job.status }}" in
+            success)   mark='OK       ' ;;
+            failure)   mark='FAILED   ' ;;
+            cancelled) mark='CANCELLED' ;;
+            *)         mark='${{ job.status }}' ;;
+          esac
+          echo "$mark charts" >> "$GITHUB_STEP_SUMMARY"
+
   done:
     name: what is still missing
-    needs: [plan, extra-arches, appimage, flatpak]
-    if: ${{ always() }}
+    needs: [plan, extra-arches, appimage, flatpak, charts]
+    if: ${{ !cancelled() }}
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v7
@@ -296,7 +400,7 @@ jobs:
             echo "::notice::v$V was already complete - nothing was built."
             exit 0
           fi
-          gh release view "v$V" --json assets --jq '.assets[].name' | sort > now.txt
+          gh release view --repo "${GITHUB_REPOSITORY:-wekan/wekan}" "v$V" --json assets --jq '.assets[].name' | sort > now.txt
           bash releases/expected-assets.sh "$V" > expected.txt
           still=""
           while read -r kind selector asset sums; do

.github/workflows/sandstorm-store.yml

@@ -51,8 +51,7 @@ jobs:
 
       - name: Install system dependencies
         run: |
-          sudo apt-get update
-          sudo apt-get install -y p7zip-full wget curl build-essential g++ make python3 unzip xz-utils git
+          bash "$GITHUB_WORKSPACE/releases/apt-install.sh" p7zip-full wget curl build-essential g++ make python3 unzip xz-utils git
 
       - name: Install Sandstorm (dev, unattended)
         # Provides the `spk` command used to publish, and the sandstorm-http-bridge that
@@ -110,7 +109,7 @@ jobs:
           # 3) Download the newest .spk asset on that release. sandstorm.yml attaches it
           #    as wekan-sandstorm-YYYY_MM_DD-HH_MM_SS.spk; if several exist, take the
           #    lexicographically-newest (the timestamp sorts chronologically).
-          ASSET="$(gh release view "$TAG" --json assets \
+          ASSET="$(gh release view --repo "${GITHUB_REPOSITORY:-wekan/wekan}" "$TAG" --json assets \
             --jq '[.assets[].name | select(endswith(".spk"))] | sort | last' 2>/dev/null || true)"
           if [ -z "${ASSET:-}" ] || [ "$ASSET" = "null" ]; then
             echo "::error::Release $TAG has no .spk asset. Run sandstorm.yml first to build and attach one."

.github/workflows/sandstorm.yml

@@ -54,8 +54,7 @@ jobs:
 
       - name: Install system dependencies and Meteor
         run: |
-          sudo apt-get update
-          sudo apt-get install -y p7zip-full wget curl build-essential g++ make python3 unzip xz-utils git qemu-user-static
+          bash "$GITHUB_WORKSPACE/releases/apt-install.sh" p7zip-full wget curl build-essential g++ make python3 unzip xz-utils git qemu-user-static
           if [ ! -f "$HOME/.meteor/meteor" ]; then curl https://install.meteor.com/ | sh; fi
           echo "$HOME/.meteor" >> "$GITHUB_PATH"
 
@@ -141,4 +140,4 @@ jobs:
             exit 1
           fi
           echo "Uploading ${{ steps.build.outputs.spk }} to the newest release: $TAG"
-          gh release upload "$TAG" "${{ steps.build.outputs.spk }}" --clobber
+          gh release upload --repo "${GITHUB_REPOSITORY:-wekan/wekan}" "$TAG" "${{ steps.build.outputs.spk }}" --clobber

.gitignore

@@ -115,3 +115,11 @@ node-patches/
 # MongoDB Database Tools that WeKan's bundled bsondump/mongodump/... are built
 # from, replacing the wekan/mongo-tools source fork.
 mongo-tools-patches/
+
+# Meteor Modern-Tools build context directories
+*/build-assets*
+*/build-chunks*
+
+# Meteor custom local directory (METEOR_LOCAL_DIR)
+*/build-assets-local-test*
+*/build-chunks-local-test*

.meteor/packages

@@ -6,9 +6,9 @@
 meteor-base@1.5.2
 
 # Build system
-ecmascript@0.19.0
+ecmascript@0.19.1-beta352.0
 standard-minifier-js@3.2.0
-rspack@1.2.0
+rspack@1.3.0-beta352.0
 # Declared explicitly because server/modernBrowsers.js imports it, to say that
 # Yandex Browser is modern and must not be served the legacy bundle (#6557).
 modern-browsers@0.2.3

.meteor/release

@@ -1 +1 @@
-METEOR@3.5.1
+METEOR@3.5.2-beta.0

.meteor/versions

@@ -1,14 +1,14 @@
-accounts-base@3.3.0
+accounts-base@3.3.1-beta352.0
 accounts-express@1.0.0
 accounts-oauth@1.4.7
 accounts-password@3.3.1
-aldeed:collection2@4.2.1
+aldeed:collection2@4.2.2
 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.15.0
+babel-compiler@7.15.1-beta352.0
 babel-runtime@1.5.2
 base64@1.0.14
 binary-heap@1.0.13
@@ -24,13 +24,13 @@ communitypackages:flow-routing@2.1.0
 communitypackages:unstyled@2.0.1
 core-runtime@1.0.0
 ddp@1.4.2
-ddp-client@3.4.0
+ddp-client@3.4.1-beta352.0
 ddp-common@1.4.5
 ddp-rate-limiter@1.3.0
 ddp-server@3.4.0
 diff-sequence@1.1.3
 dynamic-import@0.7.4
-ecmascript@0.19.0
+ecmascript@0.19.1-beta352.0
 ecmascript-runtime@0.8.3
 ecmascript-runtime-client@0.13.0
 ecmascript-runtime-server@0.11.1
@@ -56,7 +56,7 @@ meteortesting:browser-tests@1.8.0
 meteortesting:mocha@3.3.0
 meteortesting:mocha-core@8.2.0
 minifier-css@2.0.2
-minifier-js@3.3.0
+minifier-js@3.3.1-beta352.0
 minimongo@2.2.0
 modern-browsers@0.2.3
 modules@0.20.3
@@ -65,7 +65,7 @@ mongo@2.5.0
 mongo-decimal@0.2.0
 mongo-dev-server@1.1.1
 mongo-id@1.0.9
-npm-mongo@6.16.2
+npm-mongo@6.16.3-beta352.0
 oauth@3.0.4
 oauth2@1.3.3
 observe-sequence@2.0.1
@@ -87,7 +87,7 @@ reload@1.3.2
 retry@1.1.1
 reywood:publish-composite@1.9.0
 routepolicy@1.1.2
-rspack@1.2.0
+rspack@1.3.0-beta352.0
 service-configuration@1.3.5
 session@1.2.3
 sha@1.0.10
@@ -100,9 +100,9 @@ templating@1.4.5
 templating-compiler@2.0.1
 templating-runtime@2.0.2
 templating-tools@2.0.1
-tools-core@1.2.0
+tools-core@1.3.0-beta352.0
 tracker@1.3.4
-typescript@5.11.0
+typescript@5.11.1-beta352.0
 url@1.3.6
 webapp@2.3.0
 webapp-hashing@1.1.2

AGENTS.md

@@ -133,6 +133,38 @@ translations** and general **kanban terminology** for the language as the refere
 earlier `machine-translate.mjs` that called LibreTranslate/DeepL is removed on purpose
 (it did not work and needed a password). There is **no `WEKAN_MT*` env var** anymore.
 
+- **EVERY language gets translated — including the ones nobody has volunteered for.**
+  Klingon, Volapük, Wolof, Venda, Tamazight, Acehnese and the rest are not exceptions:
+  WeKan cannot find a speaker for every language, and a file left in English stays in
+  English for years. **Look the words up.** Any dictionary, word list, grammar or
+  Wiktionary page on the Internet is a legitimate source — read it, take the terms it
+  gives, and write the translation from them. Where a file is already written in ANOTHER
+  language (several are seeded from French, German, Malay or Zulu), complete it in the
+  language that file is actually in rather than leaving half of it English.
+- **Add the languages WeKan does not have yet.** The 154 files under
+  `imports/i18n/data/` are not the list of languages worth supporting - they are the
+  list somebody happened to start. When a language has a dictionary, a word list or a
+  Wiktionary anywhere on the Internet, it can have a WeKan. Adding one is three edits,
+  and all three are needed or the language is invisible:
+  1. `imports/i18n/data/<tag>.i18n.json` — the strings, in `en.i18n.json`'s key ORDER
+     (`tests/boardItemLinks.test.cjs` checks that), 2-space indent.
+  2. `imports/i18n/languages.js` — `{ code, tag, name, load, rtl }`. The **name is
+     written in that language itself** ("Suomi", "tlhIngan Hol"), the way every entry
+     there already is, because it is read by somebody who does not read English. `rtl:
+     true` for Arabic, Hebrew, Persian, Uyghur and the rest that are written
+     right-to-left.
+  3. `client/components/users/userHeader.js` — the `flagMap` in `languageFlag()`, so the
+     picker shows a **flag** beside the name. A language without a country of its own
+     takes the flag of where it is spoken, and a constructed one (Esperanto, Klingon,
+     Volapük) keeps the `🌐` fallback rather than being given somebody's country.
+- **A bad translation beats no translation.** An imperfect string is readable, it is
+  obviously improvable, and it is an *invitation*: somebody who speaks the language sees
+  it is wrong and fixes it, which an English placeholder never provokes. So: do not skip
+  a language because the result would be imperfect. Translate it, say in the commit which
+  ones were done with low confidence, and let a human correct it — the merge rules below
+  guarantee that when that human translation arrives on Transifex, it REPLACES the filled
+  one and is never overwritten by it.
+
 - `node releases/translations/fill-translations.mjs --missing` — per-language count of
   strings still needing translation (English + `en-*` variants are skipped: English by
   design). Also printed at the end of `pull-translations.sh`.
@@ -152,7 +184,7 @@ as human there. So: **only missing strings are ever filled, only when missing
 everywhere, human strings are always preferred and merged**, and nothing you fill is
 pushed to Transifex as if it were human.
 
-## General practices (from ../log/v10/Claude.txt)
+## General practices (from .tools/log/v10/Claude.txt)
 
 - **[maintainer only]** Commit as `Lauri Ojansivu <x@xet7.org>`, with **no**
   "Co-Authored-By" or any other AI trailer, directly to the `main` branch of WeKan and
@@ -165,7 +197,7 @@ pushed to Transifex as if it were human.
 - Directory structure:
   - `wekan` — this repo (https://github.com/wekan/wekan); see
     `docs/DeveloperDocs/Directory-Structure.md`; `CHANGELOG.md` at root.
-  - `../w/wekan.fi` — the WeKan website.
+  - `.tools/wekan.fi` — the WeKan website companion repository.
   - `.tools/` — everything that is NOT part of this repository but is needed to
     build, test and release it, in ONE directory that `.gitignore` and
     `.meteorignore` already exclude (each used to need its own ignore entry at
@@ -228,11 +260,45 @@ pushed to Transifex as if it were human.
   the newest release (FerretDB uses `## Upcoming FerretDB release`; the patch repos use
   `# Upcoming <repo> release`). Do **not** hand-edit
   `package.json` or any other version reference — the release workflow bumps those.
+- **Whenever `# Upcoming WeKan ® release` is updated, audit every feature, bug fix
+  and security fix in that section for regression coverage.** If coverage does not
+  exist yet, add a positive test, a negative test and a UI test wherever that kind
+  of test is possible and relevant. Run the tests that can run in the current
+  environment; when a UI stack or another required service is unavailable, still
+  add and syntax-check/register the test and state clearly what could not be run.
+  Do not duplicate an existing test merely to satisfy the audit — extend it when
+  that keeps one behavior in one suite.
+- **CHANGELOG.md holds the CURRENT MONTH only.** It reached 2.6 MB and 51,365
+  lines over 1,100 releases back to 2015 (#6580), which is slow to open and
+  slower to read. Moving whole years out left 1.9 MB, still too large, because
+  releases here are frequent: 2026 alone is 272 releases over eight months and
+  July was 80 on its own. So:
+
+  | | |
+  | --- | --- |
+  | `CHANGELOG.md` | the current month, plus `# Platforms`, `# TODO Later`, `# Upcoming` |
+  | `old-CHANGELOG/<year>/<MM>.md` | earlier months of the current year |
+  | `old-CHANGELOG/<year>.md` | years that are over, whole |
+
+  Past years stay one file each because they are already small (30–107 KB);
+  splitting them further would trade a size problem nobody has for a hundred
+  more files. Each archive opens with a **release count** — per month in a year
+  file, per day in a month file — and a bullet in `# Platforms` links every one.
+  That `git blame` is less useful on the split file is accepted: the history is
+  still in git (`gitk`, `git-gui`, `git log --follow`), and being small enough
+  to open is worth more.
+
+  Run `node releases/changelog-archive.mjs` at the start of a month. It is
+  idempotent — a run with nothing to move only refreshes the tables — and it
+  takes the month to keep from the FILE rather than the clock, so two people
+  running it on the same day agree. An archived section is never edited, for the
+  same reason a released one is not.
 - **The file's shape, top to bottom** — keep it exactly as it is now:
   1. `# Platforms` — the line `Newest WeKan at these platforms:` and the Install /
-     Upgrade / Docs / Mac ChangeLog bullets, then a `<details>` whose `<summary>` is
-     `Version` holding "which WeKan version uses what". There is no `# Version`
-     heading of its own.
+     Upgrade / Docs / Mac ChangeLog bullets, the `Older releases:` bullet linking
+     the per-year archives, then a `<details>` whose `<summary>` is `Version`
+     holding "which WeKan version uses what". There is no `# Version` heading of
+     its own.
   2. `# TODO Later` — a `<details>` whose `<summary>` is `Carried to a future
      release.` explaining the list, then one `<details>` per category (below).
   3. The releases, newest first, each `# v<MAJOR>.<MINOR> YYYY-MM-DD WeKan ® release`.
@@ -422,17 +488,84 @@ Fixes #1234,
 Fixes #1235.
 ```
 
+- **A commit that fixes a GitHub issue ENDS with `Fixes #NNNN`** — last lines of
+  the message, one per issue, comma after each and a full stop on the last. That
+  trailer is what closes the issue when the commit is pushed; a fix that only
+  *mentions* the number in prose leaves the issue open, and somebody has to close
+  it by hand later or it stays open forever. Several issues in one commit get
+  several lines. The same applies to an issue that turns out to be **already
+  fixed**: commit the test or the note that proves it and end with `Fixes #NNNN,`
+  so the issue closes with a reference to where it was fixed.
+- **Only when the commit really fixes it.** A commit that improves the
+  diagnostics, narrows the cause, or fixes one of several reported problems
+  references the issue in the body (`#6585 comment 5276581923`) and does NOT
+  carry the trailer — closing an issue whose reporter is still stuck is worse
+  than leaving it open. If an issue was closed and then REOPENED for follow-up
+  items (as #6586 was), it is fixed again only when those items are done.
+- **A commit with no issue behind it has no trailer** — the email reports, the
+  release-tooling fixes found in build logs, refactors. `Thanks to ... and xet7 !`
+  still names whoever reported it.
+
 ### Making a release — no version number needed  **[maintainer only]**
 
 All publishing / release steps below are maintainer-only. Contributors never run them.
 
+**Releases are FREQUENT, and that is the normal state of this repository — not an
+interruption to it.** The maintenance loop is:
+
+1. `./build.sh` (or `build.bat` on Windows) → **option 1, "git pull and git
+   push"**. Both directions do the whole job: a pull rebases and then repairs the
+   CHANGELOG commit links the rebase made stale, and a push repairs them again
+   BEFORE publishing, because a stale link that reaches GitHub 404s for everyone
+   who reads the release notes.
+2. `./releases/release-all.sh`, **with no arguments**, whenever there is something
+   worth shipping — which is often, several times a day when a fault is being
+   chased. It takes the version from the CHANGELOG and needs nothing typed.
+
+So a release happening "in the middle" of a piece of work is not a special case
+to reason about; it is what always happens, and anything that only works when
+releases are rare is broken here. Two consequences worth stating, because both
+have cost a released section its accuracy:
+
+- **Work continues immediately after a release**, so `release-all.sh` renames
+  `# Upcoming WeKan ® release` to `# v<NEW> …` and then OPENS A NEW EMPTY
+  `# Upcoming` (`releases/changelog-open-next.mjs`), so the next entry has
+  somewhere correct to go. Without it an entry appended above the closing
+  `Thanks to above GitHub users …` line lands INSIDE the release just published.
+  The new section carries an `**In short:** nothing here yet.` placeholder and
+  the binaries table, so the file stays valid; replace the placeholder as entries
+  are added. `tests/changelogEntriesBelongToTheirRelease.test.cjs` checks the
+  newest few releases against git and fails when a section links a commit that
+  release does not contain.
+- **A released section is a RECORD, not a draft.** When a release turns out to be
+  broken, its section keeps saying what it shipped — including the part that was
+  wrong — and the fix goes in a new `# Upcoming` above it. Do NOT edit a
+  published entry to describe the smaller, tidier change you wish had shipped;
+  add to it that it was wrong and where the fix is. Somebody reading v10.97's
+  notes is most likely somebody whose v10.97 just died.
+
 - WeKan: run `./releases/release-all.sh` (no arguments). It renames
   `# Upcoming WeKan ® release` to the next version (same increment as the last release;
   9.99 → 10.00) dated today, commits + pushes, and triggers
-  `.github/workflows/release-all.yml` (its `bump` job bumps `package.json` and every
-  version reference, then the release jobs tag `v<new>` and publish the GitHub Release).
-  An explicit `oldversion newversion` pair still overrides. Adding entries under Upcoming
-  is the only hand step.
+  `.github/workflows/release-all.yml` — whose `bump` job bumps `package.json` and every
+  version reference and rebuilds the API docs, whose `prepare` job then pushes the tag
+  `v<new>` and checks the notes exist, and whose `release` job publishes the GitHub
+  Release the bundle jobs attach to. An explicit `oldversion newversion` pair still
+  overrides. Adding entries under Upcoming is the only hand step.
+- **A release that FAILED and one that shipped BROKEN are handled differently, and
+  the difference is whether anything was PUBLISHED.** Both happened with v10.92, so
+  neither is hypothetical:
+  - **Nothing published** (the workflow died before the GitHub Release existed): there
+    is no release for that number, so `# v<new> …` must not claim there is one. Rename
+    the heading back to `# Upcoming WeKan ® release`, add the fix under it, and run
+    `release-all.sh` again — it will take the same number, since the newest release is
+    still the previous one.
+  - **It published, and something in it is broken**: the release exists and people can
+    download it, so its section STAYS as it is — a released section is a record, not a
+    draft. Add a NEW `# Upcoming WeKan ® release` above it with the fix, exactly as
+    during ordinary development, and the next run takes the next number.
+  What decides it is the GitHub Release, not the tag: `prepare` pushes the tag early,
+  so a tag can exist for a release that never published.
 - FerretDB: run `./build.sh release-ferretdb` from `.tools/FerretDB` (no
   version). It renames `## Upcoming FerretDB release` to the next version with the
   correct git-tag link, commits + tags + pushes, then triggers `release-all.yml` (which
@@ -442,8 +575,85 @@ All publishing / release steps below are maintainer-only. Contributors never run
 ### Security issues
 
 - Fix the vulnerability, add a CRITICAL section to the WeKan CHANGELOG like previous
-  entries, and update `../w/wekan.fi/hall-of-fame/index.html` and the vuln-name
+  entries, and update `.tools/wekan.fi/hall-of-fame/index.html` and the vuln-name
   subdirectory `index.html` like previous security issues.
+- **Every security fix gets a TEST and a NEGATIVE TEST, and they are written so the
+  fault cannot exist ANYWHERE in the codebase — not just at the place it was
+  reported.** A test that pins one call site leaves the same mistake free to live in
+  the other five, and that is how most of these arrive: SignupBleed's guard read an
+  option nothing sets, and the same shape sat in a second endpoint; the source-map
+  trim was safe on the client and fatal on the server. So:
+  - the **test** proves the fix does what it claims, driving the decision itself
+    where that is possible. A pure module — `loginFailureDecision.js`,
+    `lockoutDecision.js` — can be tested as arithmetic, without a server or a
+    database, and reproduces the reporter's attack exactly rather than approximately;
+  - the **negative test** proves the fault is gone rather than moved. Search the
+    whole tree for the SHAPE of it and assert nothing matches: no other endpoint
+    reads the dead option, no other counter is global, no other caller skips the
+    check. When the shape is a pattern, pin the pattern.
+  - and a test that reads the source is a real test here. `tests/*.test.cjs` may
+    parse a file and fail on a construct — that is what makes "and nowhere else"
+    checkable at all.
+- **If somebody ATTEMPTS the attack, and the secure default DENIES it, that denial
+  has to be visible in Admin Panel → Problems** — in every case where the denial can
+  be attributed. This applies to every security fix added to Upcoming. That is the
+  difference between a hole that is closed and a hole that is closed and watched:
+  an administrator should be able to see that somebody tried.
+  - Add a key to the catalog in `models/lib/securityCategories.js` (category, the
+    hall-of-fame `bleed` name, severity, CWE), and call
+    `require('/server/lib/securityLog').record({ key, action: 'blocked', source, detail })`
+    on the refusal path. `action` is `'blocked'` when the fix stopped it and
+    `'detected'` when it was only noticed.
+  - **Wrap the call so logging can never break the guard**:
+    `try { ... } catch (e) { /* logging must never break the guard */ }`. The refusal
+    matters more than the record of it.
+  - **Only log an ATTEMPT, never ordinary use.** The test to apply is whether a
+    legitimate user can reach that line. Registration refused while registration is
+    off has no legitimate caller, so it is logged; an admin endpoint whose fault was
+    in what its answer CARRIED fires on every normal call, so it is NOT — that is why
+    HashBleed (GHSA-6qpx-x7vr-p9w6) deliberately has no key. A log that fills with
+    normal traffic hides the one line that mattered.
+  - Where the denial cannot be attributed to an attempt — a fix that changes what a
+    response contains, or one that only takes effect at build time — there is nothing
+    to record, and that is a decision to state in the entry rather than an omission.
+- **Admin Panel → Problems is a SUMMARY, never a row per event.** A guard on a path
+  an attacker controls fires as fast as they can send, so a document per occurrence
+  grows the database with the attack, turns the page into a scroll of near-identical
+  lines, and buries the one event that mattered under ten thousand that did not. The
+  admin's question is never *list every attempt* — it is *what is happening, how
+  much, since when, and who*. So each problem is ONE row that accumulates
+  (`models/lib/eventLogSummary.js`, written through `server/lib/eventLogFold.js`,
+  shared by the security, speed and test loggers):
+
+  | field | what it holds |
+  | --- | --- |
+  | `count` | how many times this problem has happened |
+  | `firstAt` … `at` | the window it happened in |
+  | `actors` | who, each with their own count — `username1 25, 100.100.100.100 30` |
+  | `username` / `ip` / `detail` | the MOST RECENT occurrence |
+
+  - **Identity is the KIND of thing that happened** — stream, `bleed`, category,
+    action, source, severity, CWE (and `type`/`db`/`kind` for the database stream).
+    The actor is NOT part of it: putting a username or an address in the key gives a
+    row per attacker per attempt, which is the cost being removed.
+  - **A username and an address are tallied SEPARATELY**, not as a pair. They answer
+    different questions — which account, and where from — and an unauthenticated
+    attempt has an address and no name.
+  - **The tally is CAPPED** (`MAX_ACTORS`), with the remainder counted in
+    `actorsOverflow`. Otherwise an attacker rotating addresses grows the row with the
+    attack and reintroduces the same bug one level down — and *"and 9,412 others"* is
+    itself the signal that the source is spread rather than single.
+  - **A logger that writes per event is a bug to fix, not a style.** If one is added
+    or found, route it through the shared fold and migrate what it already wrote
+    (`server/lib/eventLogSummaryMigration.js` folds legacy rows in place, in batches,
+    idempotently).
+- **Every hall-of-fame vulnerability that CAN be detected at runtime should have a
+  catalog key**, so Admin Panel → Problems groups attempts under the same name the
+  Hall of Fame uses and an admin can go from one to the other.
+  `tests/hallOfFameProblemsCoverage.test.cjs` lists the names that have no key and
+  requires each to be accounted for — a *Bleed with nothing to detect (a fix that
+  changed what a response carried, or one that only applies at build time) is
+  recorded there as a deliberate omission with its reason, not left silent.
 - **A Hall of Fame row has EIGHT cells**, in this order: CVE, Icon, Vulnerability
   name, Date, Responsible Security Disclosure by, Stars, Process, Vulnerabilities.
   One thing per cell — the name without its icons, the Font Awesome icons alone in
@@ -498,19 +708,17 @@ All publishing / release steps below are maintainer-only. Contributors never run
 - Add tests, negative tests and UI tests for all new features and fixes that do not yet
   have tests. When adding a test, run or validate it and fix it until it works.
 - **"Check newest test logs":** test logs go into a `log/<datetime>/` directory,
-  one per run (e.g. `2026-07-21_20-58-09/`). That is **`../log/`**, one level up
-  from the repo, so a run does not show up in `git status` - **unless the parent
-  is not writable**, as in a Flatpak sandbox that shares only the repository;
-  there it is **`./log/`** inside the repo (gitignored). `build.sh` prints which
-  one when a run starts. The
+  one per run (e.g. `2026-07-21_20-58-09/`). That is **`.tools/log/`** inside the
+  repository's ignored tool area, so a run does not show up in `git status` and
+  does not depend on the parent directory being writable. The
   newest datetime directory is the latest run. Each holds the Playwright per-browser
   logs (`wekan-alltests-chromium.log`, `-firefox.log`, `-webkit.log`), the mocha/unit
   log (`wekan-alltests-mocha.log`), the e2e/import logs, and `wekan-test-server.log`
   (the WeKan test server + database output). A whole-run directory also holds the
   database-conformance logs (`db-conformance-*.log`, `-report.md`, `-summary.txt`)
   and FerretDB's own (`ferretdb-unit.log`, `-vet.log`, `-integration.log`). "Check
-  the newest test logs" means: open the most recent `log/<datetime>/` - look in
-  `../log/` first, then `./log/` - and read those.
+  the newest test logs" means: open the most recent
+  `.tools/log/<datetime>/` and read those.
 - **Check and fix WHILE the tests are still running.** A full run takes a long time
   (three browsers, then every database with an image for this CPU, then FerretDB's
   own suites), and its stages finish one at a time. Do not wait for the end: read
@@ -539,6 +747,46 @@ All publishing / release steps below are maintainer-only. Contributors never run
   same directory — read it when something behaves differently than a normal host (file
   access, network, running services).
 
+### Flatpak sandbox: install task tools under `.tools/`
+
+- In the Flatpak sandbox launched by
+  `docs/Security/Sandboxes/vscode/vscodium-sandbox.sh` (or the VSCode variant),
+  the repository may be the only writable/shared host directory. When a command
+  needs a tool that is missing, install its binary, virtual environment, models
+  and caches under the repository-local `.tools/` directory. Do not install it
+  into the read-only Flatpak image or scatter generated tool files through the
+  source tree. `.tools/` is excluded by both `.gitignore` and `.meteorignore`, so
+  local toolchains neither enter commits nor consume Meteor file-watcher slots.
+- Use the version selected by the repository, resolved from the current files at
+  install time; never copy a version number from an old log or hard-code the
+  example currently shown in the sandbox README. In particular: Node.js and npm
+  come from `NODE_VERSION` and `NPM_VERSION` in `Dockerfile`; Meteor comes from
+  `.meteor/release`; companion repositories use the versions in their own build
+  scripts or module files. Use the architecture reported by `uname -m`. Reuse an
+  existing matching `.tools` installation before downloading another copy.
+- Follow the complete, tested bootstrap commands and environment variables in
+  `docs/Security/Sandboxes/vscode/README.md`, especially its "From-scratch
+  toolchain in `.tools/`" section. Prefer repository setup helpers such as
+  `build.sh` and `releases/ensure-tools.sh` when they already install the needed
+  pinned tool. Keep `HOME`, `PATH`, `GOROOT`, `GOPATH`, `GOCACHE`, `GOMODCACHE`
+  and similar overrides scoped to the command or sandbox terminal; do not change
+  the real host home or a system installation.
+- For screenshot or image text that cannot be read by the normal image viewer
+  because Flatpak/bubblewrap cannot create a user namespace, install RapidOCR
+  locally instead of guessing from filenames or logs:
+
+  ```bash
+  python3 -m venv .tools/ocr-venv
+  .tools/ocr-venv/bin/pip install rapidocr_onnxruntime pillow
+  .tools/ocr-venv/bin/python -c 'from rapidocr_onnxruntime import RapidOCR; import sys; result, _ = RapidOCR()(sys.argv[1]); print("\n".join(row[1] for row in (result or [])))' path/to/screenshot.png
+  ```
+
+  Process a timestamped screenshot series in chronological order and correlate
+  OCR output with the matching `.tools/log/<datetime>/` files. OCR is evidence
+  with recognition errors: retain timestamps and coordinates when needed, verify
+  suspicious numbers against adjacent frames, and do not claim visual details
+  that neither OCR nor another available viewer confirmed.
+
 ### Always validate from the actual code
 
 - When doing anything, check how it actually works in the code first.

CLAUDE.md

@@ -133,6 +133,38 @@ translations** and general **kanban terminology** for the language as the refere
 earlier `machine-translate.mjs` that called LibreTranslate/DeepL is removed on purpose
 (it did not work and needed a password). There is **no `WEKAN_MT*` env var** anymore.
 
+- **EVERY language gets translated — including the ones nobody has volunteered for.**
+  Klingon, Volapük, Wolof, Venda, Tamazight, Acehnese and the rest are not exceptions:
+  WeKan cannot find a speaker for every language, and a file left in English stays in
+  English for years. **Look the words up.** Any dictionary, word list, grammar or
+  Wiktionary page on the Internet is a legitimate source — read it, take the terms it
+  gives, and write the translation from them. Where a file is already written in ANOTHER
+  language (several are seeded from French, German, Malay or Zulu), complete it in the
+  language that file is actually in rather than leaving half of it English.
+- **Add the languages WeKan does not have yet.** The 154 files under
+  `imports/i18n/data/` are not the list of languages worth supporting - they are the
+  list somebody happened to start. When a language has a dictionary, a word list or a
+  Wiktionary anywhere on the Internet, it can have a WeKan. Adding one is three edits,
+  and all three are needed or the language is invisible:
+  1. `imports/i18n/data/<tag>.i18n.json` — the strings, in `en.i18n.json`'s key ORDER
+     (`tests/boardItemLinks.test.cjs` checks that), 2-space indent.
+  2. `imports/i18n/languages.js` — `{ code, tag, name, load, rtl }`. The **name is
+     written in that language itself** ("Suomi", "tlhIngan Hol"), the way every entry
+     there already is, because it is read by somebody who does not read English. `rtl:
+     true` for Arabic, Hebrew, Persian, Uyghur and the rest that are written
+     right-to-left.
+  3. `client/components/users/userHeader.js` — the `flagMap` in `languageFlag()`, so the
+     picker shows a **flag** beside the name. A language without a country of its own
+     takes the flag of where it is spoken, and a constructed one (Esperanto, Klingon,
+     Volapük) keeps the `🌐` fallback rather than being given somebody's country.
+- **A bad translation beats no translation.** An imperfect string is readable, it is
+  obviously improvable, and it is an *invitation*: somebody who speaks the language sees
+  it is wrong and fixes it, which an English placeholder never provokes. So: do not skip
+  a language because the result would be imperfect. Translate it, say in the commit which
+  ones were done with low confidence, and let a human correct it — the merge rules below
+  guarantee that when that human translation arrives on Transifex, it REPLACES the filled
+  one and is never overwritten by it.
+
 - `node releases/translations/fill-translations.mjs --missing` — per-language count of
   strings still needing translation (English + `en-*` variants are skipped: English by
   design). Also printed at the end of `pull-translations.sh`.
@@ -152,7 +184,7 @@ as human there. So: **only missing strings are ever filled, only when missing
 everywhere, human strings are always preferred and merged**, and nothing you fill is
 pushed to Transifex as if it were human.
 
-## General practices (from ../log/v10/Claude.txt)
+## General practices (from .tools/log/v10/Claude.txt)
 
 - **[maintainer only]** Commit as `Lauri Ojansivu <x@xet7.org>`, with **no**
   "Co-Authored-By" or any other AI trailer, directly to the `main` branch of WeKan and
@@ -165,7 +197,7 @@ pushed to Transifex as if it were human.
 - Directory structure:
   - `wekan` — this repo (https://github.com/wekan/wekan); see
     `docs/DeveloperDocs/Directory-Structure.md`; `CHANGELOG.md` at root.
-  - `../w/wekan.fi` — the WeKan website.
+  - `.tools/wekan.fi` — the WeKan website companion repository.
   - `.tools/` — everything that is NOT part of this repository but is needed to
     build, test and release it, in ONE directory that `.gitignore` and
     `.meteorignore` already exclude (each used to need its own ignore entry at
@@ -228,11 +260,45 @@ pushed to Transifex as if it were human.
   the newest release (FerretDB uses `## Upcoming FerretDB release`; the patch repos use
   `# Upcoming <repo> release`). Do **not** hand-edit
   `package.json` or any other version reference — the release workflow bumps those.
+- **Whenever `# Upcoming WeKan ® release` is updated, audit every feature, bug fix
+  and security fix in that section for regression coverage.** If coverage does not
+  exist yet, add a positive test, a negative test and a UI test wherever that kind
+  of test is possible and relevant. Run the tests that can run in the current
+  environment; when a UI stack or another required service is unavailable, still
+  add and syntax-check/register the test and state clearly what could not be run.
+  Do not duplicate an existing test merely to satisfy the audit — extend it when
+  that keeps one behavior in one suite.
+- **CHANGELOG.md holds the CURRENT MONTH only.** It reached 2.6 MB and 51,365
+  lines over 1,100 releases back to 2015 (#6580), which is slow to open and
+  slower to read. Moving whole years out left 1.9 MB, still too large, because
+  releases here are frequent: 2026 alone is 272 releases over eight months and
+  July was 80 on its own. So:
+
+  | | |
+  | --- | --- |
+  | `CHANGELOG.md` | the current month, plus `# Platforms`, `# TODO Later`, `# Upcoming` |
+  | `old-CHANGELOG/<year>/<MM>.md` | earlier months of the current year |
+  | `old-CHANGELOG/<year>.md` | years that are over, whole |
+
+  Past years stay one file each because they are already small (30–107 KB);
+  splitting them further would trade a size problem nobody has for a hundred
+  more files. Each archive opens with a **release count** — per month in a year
+  file, per day in a month file — and a bullet in `# Platforms` links every one.
+  That `git blame` is less useful on the split file is accepted: the history is
+  still in git (`gitk`, `git-gui`, `git log --follow`), and being small enough
+  to open is worth more.
+
+  Run `node releases/changelog-archive.mjs` at the start of a month. It is
+  idempotent — a run with nothing to move only refreshes the tables — and it
+  takes the month to keep from the FILE rather than the clock, so two people
+  running it on the same day agree. An archived section is never edited, for the
+  same reason a released one is not.
 - **The file's shape, top to bottom** — keep it exactly as it is now:
   1. `# Platforms` — the line `Newest WeKan at these platforms:` and the Install /
-     Upgrade / Docs / Mac ChangeLog bullets, then a `<details>` whose `<summary>` is
-     `Version` holding "which WeKan version uses what". There is no `# Version`
-     heading of its own.
+     Upgrade / Docs / Mac ChangeLog bullets, the `Older releases:` bullet linking
+     the per-year archives, then a `<details>` whose `<summary>` is `Version`
+     holding "which WeKan version uses what". There is no `# Version` heading of
+     its own.
   2. `# TODO Later` — a `<details>` whose `<summary>` is `Carried to a future
      release.` explaining the list, then one `<details>` per category (below).
   3. The releases, newest first, each `# v<MAJOR>.<MINOR> YYYY-MM-DD WeKan ® release`.
@@ -422,17 +488,84 @@ Fixes #1234,
 Fixes #1235.
 ```
 
+- **A commit that fixes a GitHub issue ENDS with `Fixes #NNNN`** — last lines of
+  the message, one per issue, comma after each and a full stop on the last. That
+  trailer is what closes the issue when the commit is pushed; a fix that only
+  *mentions* the number in prose leaves the issue open, and somebody has to close
+  it by hand later or it stays open forever. Several issues in one commit get
+  several lines. The same applies to an issue that turns out to be **already
+  fixed**: commit the test or the note that proves it and end with `Fixes #NNNN,`
+  so the issue closes with a reference to where it was fixed.
+- **Only when the commit really fixes it.** A commit that improves the
+  diagnostics, narrows the cause, or fixes one of several reported problems
+  references the issue in the body (`#6585 comment 5276581923`) and does NOT
+  carry the trailer — closing an issue whose reporter is still stuck is worse
+  than leaving it open. If an issue was closed and then REOPENED for follow-up
+  items (as #6586 was), it is fixed again only when those items are done.
+- **A commit with no issue behind it has no trailer** — the email reports, the
+  release-tooling fixes found in build logs, refactors. `Thanks to ... and xet7 !`
+  still names whoever reported it.
+
 ### Making a release — no version number needed  **[maintainer only]**
 
 All publishing / release steps below are maintainer-only. Contributors never run them.
 
+**Releases are FREQUENT, and that is the normal state of this repository — not an
+interruption to it.** The maintenance loop is:
+
+1. `./build.sh` (or `build.bat` on Windows) → **option 1, "git pull and git
+   push"**. Both directions do the whole job: a pull rebases and then repairs the
+   CHANGELOG commit links the rebase made stale, and a push repairs them again
+   BEFORE publishing, because a stale link that reaches GitHub 404s for everyone
+   who reads the release notes.
+2. `./releases/release-all.sh`, **with no arguments**, whenever there is something
+   worth shipping — which is often, several times a day when a fault is being
+   chased. It takes the version from the CHANGELOG and needs nothing typed.
+
+So a release happening "in the middle" of a piece of work is not a special case
+to reason about; it is what always happens, and anything that only works when
+releases are rare is broken here. Two consequences worth stating, because both
+have cost a released section its accuracy:
+
+- **Work continues immediately after a release**, so `release-all.sh` renames
+  `# Upcoming WeKan ® release` to `# v<NEW> …` and then OPENS A NEW EMPTY
+  `# Upcoming` (`releases/changelog-open-next.mjs`), so the next entry has
+  somewhere correct to go. Without it an entry appended above the closing
+  `Thanks to above GitHub users …` line lands INSIDE the release just published.
+  The new section carries an `**In short:** nothing here yet.` placeholder and
+  the binaries table, so the file stays valid; replace the placeholder as entries
+  are added. `tests/changelogEntriesBelongToTheirRelease.test.cjs` checks the
+  newest few releases against git and fails when a section links a commit that
+  release does not contain.
+- **A released section is a RECORD, not a draft.** When a release turns out to be
+  broken, its section keeps saying what it shipped — including the part that was
+  wrong — and the fix goes in a new `# Upcoming` above it. Do NOT edit a
+  published entry to describe the smaller, tidier change you wish had shipped;
+  add to it that it was wrong and where the fix is. Somebody reading v10.97's
+  notes is most likely somebody whose v10.97 just died.
+
 - WeKan: run `./releases/release-all.sh` (no arguments). It renames
   `# Upcoming WeKan ® release` to the next version (same increment as the last release;
   9.99 → 10.00) dated today, commits + pushes, and triggers
-  `.github/workflows/release-all.yml` (its `bump` job bumps `package.json` and every
-  version reference, then the release jobs tag `v<new>` and publish the GitHub Release).
-  An explicit `oldversion newversion` pair still overrides. Adding entries under Upcoming
-  is the only hand step.
+  `.github/workflows/release-all.yml` — whose `bump` job bumps `package.json` and every
+  version reference and rebuilds the API docs, whose `prepare` job then pushes the tag
+  `v<new>` and checks the notes exist, and whose `release` job publishes the GitHub
+  Release the bundle jobs attach to. An explicit `oldversion newversion` pair still
+  overrides. Adding entries under Upcoming is the only hand step.
+- **A release that FAILED and one that shipped BROKEN are handled differently, and
+  the difference is whether anything was PUBLISHED.** Both happened with v10.92, so
+  neither is hypothetical:
+  - **Nothing published** (the workflow died before the GitHub Release existed): there
+    is no release for that number, so `# v<new> …` must not claim there is one. Rename
+    the heading back to `# Upcoming WeKan ® release`, add the fix under it, and run
+    `release-all.sh` again — it will take the same number, since the newest release is
+    still the previous one.
+  - **It published, and something in it is broken**: the release exists and people can
+    download it, so its section STAYS as it is — a released section is a record, not a
+    draft. Add a NEW `# Upcoming WeKan ® release` above it with the fix, exactly as
+    during ordinary development, and the next run takes the next number.
+  What decides it is the GitHub Release, not the tag: `prepare` pushes the tag early,
+  so a tag can exist for a release that never published.
 - FerretDB: run `./build.sh release-ferretdb` from `.tools/FerretDB` (no
   version). It renames `## Upcoming FerretDB release` to the next version with the
   correct git-tag link, commits + tags + pushes, then triggers `release-all.yml` (which
@@ -442,8 +575,85 @@ All publishing / release steps below are maintainer-only. Contributors never run
 ### Security issues
 
 - Fix the vulnerability, add a CRITICAL section to the WeKan CHANGELOG like previous
-  entries, and update `../w/wekan.fi/hall-of-fame/index.html` and the vuln-name
+  entries, and update `.tools/wekan.fi/hall-of-fame/index.html` and the vuln-name
   subdirectory `index.html` like previous security issues.
+- **Every security fix gets a TEST and a NEGATIVE TEST, and they are written so the
+  fault cannot exist ANYWHERE in the codebase — not just at the place it was
+  reported.** A test that pins one call site leaves the same mistake free to live in
+  the other five, and that is how most of these arrive: SignupBleed's guard read an
+  option nothing sets, and the same shape sat in a second endpoint; the source-map
+  trim was safe on the client and fatal on the server. So:
+  - the **test** proves the fix does what it claims, driving the decision itself
+    where that is possible. A pure module — `loginFailureDecision.js`,
+    `lockoutDecision.js` — can be tested as arithmetic, without a server or a
+    database, and reproduces the reporter's attack exactly rather than approximately;
+  - the **negative test** proves the fault is gone rather than moved. Search the
+    whole tree for the SHAPE of it and assert nothing matches: no other endpoint
+    reads the dead option, no other counter is global, no other caller skips the
+    check. When the shape is a pattern, pin the pattern.
+  - and a test that reads the source is a real test here. `tests/*.test.cjs` may
+    parse a file and fail on a construct — that is what makes "and nowhere else"
+    checkable at all.
+- **If somebody ATTEMPTS the attack, and the secure default DENIES it, that denial
+  has to be visible in Admin Panel → Problems** — in every case where the denial can
+  be attributed. This applies to every security fix added to Upcoming. That is the
+  difference between a hole that is closed and a hole that is closed and watched:
+  an administrator should be able to see that somebody tried.
+  - Add a key to the catalog in `models/lib/securityCategories.js` (category, the
+    hall-of-fame `bleed` name, severity, CWE), and call
+    `require('/server/lib/securityLog').record({ key, action: 'blocked', source, detail })`
+    on the refusal path. `action` is `'blocked'` when the fix stopped it and
+    `'detected'` when it was only noticed.
+  - **Wrap the call so logging can never break the guard**:
+    `try { ... } catch (e) { /* logging must never break the guard */ }`. The refusal
+    matters more than the record of it.
+  - **Only log an ATTEMPT, never ordinary use.** The test to apply is whether a
+    legitimate user can reach that line. Registration refused while registration is
+    off has no legitimate caller, so it is logged; an admin endpoint whose fault was
+    in what its answer CARRIED fires on every normal call, so it is NOT — that is why
+    HashBleed (GHSA-6qpx-x7vr-p9w6) deliberately has no key. A log that fills with
+    normal traffic hides the one line that mattered.
+  - Where the denial cannot be attributed to an attempt — a fix that changes what a
+    response contains, or one that only takes effect at build time — there is nothing
+    to record, and that is a decision to state in the entry rather than an omission.
+- **Admin Panel → Problems is a SUMMARY, never a row per event.** A guard on a path
+  an attacker controls fires as fast as they can send, so a document per occurrence
+  grows the database with the attack, turns the page into a scroll of near-identical
+  lines, and buries the one event that mattered under ten thousand that did not. The
+  admin's question is never *list every attempt* — it is *what is happening, how
+  much, since when, and who*. So each problem is ONE row that accumulates
+  (`models/lib/eventLogSummary.js`, written through `server/lib/eventLogFold.js`,
+  shared by the security, speed and test loggers):
+
+  | field | what it holds |
+  | --- | --- |
+  | `count` | how many times this problem has happened |
+  | `firstAt` … `at` | the window it happened in |
+  | `actors` | who, each with their own count — `username1 25, 100.100.100.100 30` |
+  | `username` / `ip` / `detail` | the MOST RECENT occurrence |
+
+  - **Identity is the KIND of thing that happened** — stream, `bleed`, category,
+    action, source, severity, CWE (and `type`/`db`/`kind` for the database stream).
+    The actor is NOT part of it: putting a username or an address in the key gives a
+    row per attacker per attempt, which is the cost being removed.
+  - **A username and an address are tallied SEPARATELY**, not as a pair. They answer
+    different questions — which account, and where from — and an unauthenticated
+    attempt has an address and no name.
+  - **The tally is CAPPED** (`MAX_ACTORS`), with the remainder counted in
+    `actorsOverflow`. Otherwise an attacker rotating addresses grows the row with the
+    attack and reintroduces the same bug one level down — and *"and 9,412 others"* is
+    itself the signal that the source is spread rather than single.
+  - **A logger that writes per event is a bug to fix, not a style.** If one is added
+    or found, route it through the shared fold and migrate what it already wrote
+    (`server/lib/eventLogSummaryMigration.js` folds legacy rows in place, in batches,
+    idempotently).
+- **Every hall-of-fame vulnerability that CAN be detected at runtime should have a
+  catalog key**, so Admin Panel → Problems groups attempts under the same name the
+  Hall of Fame uses and an admin can go from one to the other.
+  `tests/hallOfFameProblemsCoverage.test.cjs` lists the names that have no key and
+  requires each to be accounted for — a *Bleed with nothing to detect (a fix that
+  changed what a response carried, or one that only applies at build time) is
+  recorded there as a deliberate omission with its reason, not left silent.
 - **A Hall of Fame row has EIGHT cells**, in this order: CVE, Icon, Vulnerability
   name, Date, Responsible Security Disclosure by, Stars, Process, Vulnerabilities.
   One thing per cell — the name without its icons, the Font Awesome icons alone in
@@ -498,19 +708,17 @@ All publishing / release steps below are maintainer-only. Contributors never run
 - Add tests, negative tests and UI tests for all new features and fixes that do not yet
   have tests. When adding a test, run or validate it and fix it until it works.
 - **"Check newest test logs":** test logs go into a `log/<datetime>/` directory,
-  one per run (e.g. `2026-07-21_20-58-09/`). That is **`../log/`**, one level up
-  from the repo, so a run does not show up in `git status` - **unless the parent
-  is not writable**, as in a Flatpak sandbox that shares only the repository;
-  there it is **`./log/`** inside the repo (gitignored). `build.sh` prints which
-  one when a run starts. The
+  one per run (e.g. `2026-07-21_20-58-09/`). That is **`.tools/log/`** inside the
+  repository's ignored tool area, so a run does not show up in `git status` and
+  does not depend on the parent directory being writable. The
   newest datetime directory is the latest run. Each holds the Playwright per-browser
   logs (`wekan-alltests-chromium.log`, `-firefox.log`, `-webkit.log`), the mocha/unit
   log (`wekan-alltests-mocha.log`), the e2e/import logs, and `wekan-test-server.log`
   (the WeKan test server + database output). A whole-run directory also holds the
   database-conformance logs (`db-conformance-*.log`, `-report.md`, `-summary.txt`)
   and FerretDB's own (`ferretdb-unit.log`, `-vet.log`, `-integration.log`). "Check
-  the newest test logs" means: open the most recent `log/<datetime>/` - look in
-  `../log/` first, then `./log/` - and read those.
+  the newest test logs" means: open the most recent
+  `.tools/log/<datetime>/` and read those.
 - **Check and fix WHILE the tests are still running.** A full run takes a long time
   (three browsers, then every database with an image for this CPU, then FerretDB's
   own suites), and its stages finish one at a time. Do not wait for the end: read
@@ -539,6 +747,46 @@ All publishing / release steps below are maintainer-only. Contributors never run
   same directory — read it when something behaves differently than a normal host (file
   access, network, running services).
 
+### Flatpak sandbox: install task tools under `.tools/`
+
+- In the Flatpak sandbox launched by
+  `docs/Security/Sandboxes/vscode/vscodium-sandbox.sh` (or the VSCode variant),
+  the repository may be the only writable/shared host directory. When a command
+  needs a tool that is missing, install its binary, virtual environment, models
+  and caches under the repository-local `.tools/` directory. Do not install it
+  into the read-only Flatpak image or scatter generated tool files through the
+  source tree. `.tools/` is excluded by both `.gitignore` and `.meteorignore`, so
+  local toolchains neither enter commits nor consume Meteor file-watcher slots.
+- Use the version selected by the repository, resolved from the current files at
+  install time; never copy a version number from an old log or hard-code the
+  example currently shown in the sandbox README. In particular: Node.js and npm
+  come from `NODE_VERSION` and `NPM_VERSION` in `Dockerfile`; Meteor comes from
+  `.meteor/release`; companion repositories use the versions in their own build
+  scripts or module files. Use the architecture reported by `uname -m`. Reuse an
+  existing matching `.tools` installation before downloading another copy.
+- Follow the complete, tested bootstrap commands and environment variables in
+  `docs/Security/Sandboxes/vscode/README.md`, especially its "From-scratch
+  toolchain in `.tools/`" section. Prefer repository setup helpers such as
+  `build.sh` and `releases/ensure-tools.sh` when they already install the needed
+  pinned tool. Keep `HOME`, `PATH`, `GOROOT`, `GOPATH`, `GOCACHE`, `GOMODCACHE`
+  and similar overrides scoped to the command or sandbox terminal; do not change
+  the real host home or a system installation.
+- For screenshot or image text that cannot be read by the normal image viewer
+  because Flatpak/bubblewrap cannot create a user namespace, install RapidOCR
+  locally instead of guessing from filenames or logs:
+
+  ```bash
+  python3 -m venv .tools/ocr-venv
+  .tools/ocr-venv/bin/pip install rapidocr_onnxruntime pillow
+  .tools/ocr-venv/bin/python -c 'from rapidocr_onnxruntime import RapidOCR; import sys; result, _ = RapidOCR()(sys.argv[1]); print("\n".join(row[1] for row in (result or [])))' path/to/screenshot.png
+  ```
+
+  Process a timestamped screenshot series in chronological order and correlate
+  OCR output with the matching `.tools/log/<datetime>/` files. OCR is evidence
+  with recognition errors: retain timestamps and coordinates when needed, verify
+  suspicious numbers against adjacent frames, and do not claim visual details
+  that neither OCR nor another available viewer confirmed.
+
 ### Always validate from the actual code
 
 - When doing anything, check how it actually works in the code first.

CODE_OF_CONDUCT.md

@@ -10,7 +10,7 @@ For all code at WeKan GitHub Organization https://github.com/wekan
 - 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)
+- For someone elses installed WeKan, see [Forgot Password](https://github.com/wekan/wekan/blob/main/docs/Features/Login/Forgot-Password.md)
 
 # Reporting about violations or something else
 

Dockerfile

@@ -20,13 +20,14 @@ LABEL org.opencontainers.image.source="https://github.com/wekan/wekan"
 # TARGETARCH and TARGETVARIANT are automatically provided by Docker Buildx
 ARG TARGETARCH
 ARG TARGETVARIANT
-ARG VERSION=10.80
+ARG VERSION=11.09
 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 \
+    DDP_TRANSPORT=sockjs \
     NODE_VERSION=v24.19.0 \
     METEOR_RELEASE=METEOR@3.5-rc.2 \
     USE_EDGE=false \
@@ -188,6 +189,31 @@ ENV \
 # never end up on Node.js from different places. It is copied in rather than
 # reimplemented here; a second copy of that order would drift from the first.
 COPY --chmod=755 releases/resolve-node-source.sh /tmp/resolve-node-source.sh
+# It asks nodejs.org and github.com which builds exist, through releases/fetch.sh
+# - which retries a 503 instead of reading it as "that build does not exist".
+# The two travel together: without this line the resolve step dies on the first
+# lookup. tests/releaseDownloads.test.cjs pins the pair.
+COPY --chmod=755 releases/fetch.sh /tmp/fetch.sh
+# The bundle's `npm install` leaves node-gyp's whole tree - 83 of the 120
+# packages in programs/server/node_modules - in a bundle that compiles nothing at
+# run time, and a scan of the published image reads it as what it is. The same
+# script runs in every per-arch leg of release-all.yml, so the .zip bundles and
+# this image are pruned identically. tests/imageBuildOnlyModules.test.cjs pins it.
+COPY --chmod=755 releases/prune-build-only-modules.mjs /tmp/prune-build-only-modules.mjs
+# Its companion, and its manifest: the npm packages Meteor's own packages bundle,
+# which nothing in package.json can reach. The .zip is built with these already
+# applied; what this run has to redo is the part `npm install` puts back.
+COPY --chmod=755 releases/bump-bundle-npm-deps.mjs /tmp/bump-bundle-npm-deps.mjs
+COPY --chmod=644 releases/bundle-npm-security-bumps.json /tmp/bundle-npm-security-bumps.json
+# And the third of the same kind: WeKan talks DDP over sockjs on every platform,
+# so no bundle carries uWebSockets.js. ddp-server requires that module only
+# inside the uws transport's setup(), which a sockjs server never calls, and it
+# is 121M of prebuilt binaries for OS/CPU/ABI combinations one machine cannot
+# use. The entrypoint coerces DDP_TRANSPORT=uws to sockjs, so an existing
+# compose file that asks for uws keeps working rather than crash-looping.
+COPY --chmod=755 releases/bundle-trim.mjs /tmp/bundle-trim.mjs
+# Its companion: the same idea applied to programs/server/npm/node_modules.
+COPY --chmod=755 releases/prune-unreachable-npm.mjs /tmp/prune-unreachable-npm.mjs
 
 RUN <<EOR
 set -o xtrace
@@ -279,8 +305,12 @@ esac
 chmod +x /usr/local/bin/node
 # npm + npx from the official amd64 tarball of the SAME version; extract only
 # those paths, not the amd64 node binary.
-wget "https://nodejs.org/dist/${node_full}/node-${node_full}-linux-x64.tar.gz"
-wget "https://nodejs.org/dist/${node_full}/SHASUMS256.txt"
+# Same flags as the download above: a bare wget treats a 503 as fatal, and
+# nodejs.org has them.
+wget --tries=20 --waitretry=20 --retry-on-http-error=403,500,502,503 \
+  "https://nodejs.org/dist/${node_full}/node-${node_full}-linux-x64.tar.gz"
+wget --tries=20 --waitretry=20 --retry-on-http-error=403,500,502,503 \
+  "https://nodejs.org/dist/${node_full}/SHASUMS256.txt"
 grep " node-${node_full}-linux-x64.tar.gz\$" SHASUMS256.txt | sha256sum -c -
 tar xzf "node-${node_full}-linux-x64.tar.gz" -C /usr/local --strip-components=1 --no-same-owner \
     "node-${node_full}-linux-x64/lib/node_modules/npm" \
@@ -311,6 +341,21 @@ wget --tries=20 --waitretry=20 --retry-on-http-error=404,403,500,502,503 "${WEKA
 unzip "wekan-${VERSION}-${WEKAN_ARCH}.zip"
 rm "wekan-${VERSION}-${WEKAN_ARCH}.zip"
 npm install --prefix ./bundle/programs/server
+# node-gyp and @mapbox/node-pre-gyp compiled nothing here - every native module
+# in the bundle is a prebuilt .node - and nothing in boot.js reaches them. Their
+# tree is what shipped `tar` 6.2.1 (CRITICAL) and npm's networking stack to the
+# published image, so it goes now that the install is done.
+node /tmp/prune-build-only-modules.mjs ./bundle
+# The .zip already carries the bumped meteor/ tree; this install put back
+# meteor-dev-bundle's own underscore 1.13.7 pin (CVE-2026-27601) over it, so the
+# same pass runs here.
+node /tmp/bump-bundle-npm-deps.mjs ./bundle
+# No uWebSockets.js, no legacy client, no source maps: this image runs sockjs,
+# serves web.browser to every browser, and has no debugger attached to it.
+node /tmp/bundle-trim.mjs ./bundle --transport sockjs --drop-legacy-client
+# And the npm tree rspack cannot tree-shake, because Atmosphere packages load it
+# through Npm.require(). Only what it can prove nothing requires.
+node /tmp/prune-unreachable-npm.mjs ./bundle
 mv /home/wekan/app/bundle /build
 
 # The .zip bundle now ships a self-contained launcher + its own Node.js for the
@@ -325,6 +370,13 @@ rm -f /build/node /build/start-wekan.sh /build/start-wekan.bat
 mv $(which tar)~ $(which tar)
 
 # Cleanup
+# npm is a BUILD tool in this image and nothing else: the only thing it does is
+# the `npm install` above, and the container starts bash + wekan-entrypoint.sh,
+# which never calls it. Shipping it shipped npm's own bundled dependencies - its
+# `tar` (CRITICAL), `sigstore`, `@sigstore/*`, `ip-address`, `brace-expansion` -
+# as image content that no code path can reach. node itself stays, because that
+# is what runs WeKan.
+rm -rf /usr/local/lib/node_modules/npm /usr/local/bin/npm /usr/local/bin/npx
 # 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
@@ -348,6 +400,10 @@ COPY --chmod=755 releases/ferretdb/wekan-entrypoint.sh /build/wekan-entrypoint.s
 # #6492: standalone "recovering data" page the entrypoint serves as a brief bridge on
 # the web port while a just-restored FerretDB comes back up during a data recovery.
 COPY --chmod=644 releases/ferretdb/recovery-bridge.mjs /build/recovery-bridge.mjs
+# #6595: the entrypoint asks this whether the database answers yet, so it can
+# serve the "waiting for database" page instead of leaving the web port unbound
+# for a reverse proxy to time out on.
+COPY --chmod=644 releases/ferretdb/db-ready.mjs /build/db-ready.mjs
 
 USER wekan
 ENV PORT=8080

README.md

@@ -67,7 +67,8 @@ that by providing one-click installation on various platforms.
 
 - WeKan ® is used in [most countries of the world](https://snapcraft.io/wekan).
 - WeKan ® largest user has 30k users using WeKan ® in their company.
-- WeKan ® has been [translated](https://app.transifex.com/wekan/) to 154 languages.
+- WeKan ® has been [translated](https://app.transifex.com/wekan/) to 234 languages,
+  142 of them essentially complete.
 - [Features][features]: WeKan ® has real-time user interface.
 - [Platforms](https://wekan.fi/install/): WeKan ® supports many platforms.
   WeKan ® is critical part of new platforms Wekan is currently being integrated to.

Stackerfile.yml

@@ -1,5 +1,5 @@
 appId: wekan-public/apps/77b94f60-dec9-0136-304e-16ff53095928
-appVersion: "v10.80.0"
+appVersion: "v11.09.0"
 files:
   userUploads:
     - README.md

build.bat

@@ -51,14 +51,17 @@ REM development sessions and test runs don't crash with "FATAL ERROR: ...
 REM JavaScript heap out of memory". TOOL_NODE_FLAGS controls the Meteor
 REM command-line/build process (the one that hits the limit during
 REM `meteor run` / `meteor test` / `meteor build`); NODE_OPTIONS covers the
-REM child Node/rspack processes. Both default to 8 GB and honor any value you
-REM already set. Lower it if your machine has less RAM.
-if not defined TOOL_NODE_FLAGS set "TOOL_NODE_FLAGS=--max-old-space-size=8192"
-if not defined NODE_OPTIONS set "NODE_OPTIONS=--max-old-space-size=8192"
+REM child Node/rspack processes. Both derive their defaults from installed RAM and honor any value you
+set "WEKAN_MEMORY_MB=16384"
+for /f "usebackq delims=" %%M in (`powershell.exe -NoProfile -Command "[math]::Floor((Get-CimInstance Win32_OperatingSystem).TotalVisibleMemorySize / 1024)" 2^>NUL`) do set "WEKAN_MEMORY_MB=%%M"
+set /a WEKAN_BUILD_HEAP_MB=WEKAN_MEMORY_MB/2
+if %WEKAN_BUILD_HEAP_MB% GTR 16384 set "WEKAN_BUILD_HEAP_MB=16384"
+if not defined TOOL_NODE_FLAGS set "TOOL_NODE_FLAGS=--max-old-space-size=%WEKAN_BUILD_HEAP_MB%"
+if not defined NODE_OPTIONS set "NODE_OPTIONS=--max-old-space-size=%WEKAN_BUILD_HEAP_MB%"
 
-REM Every log this script writes goes into ..\log\ (one directory up from the
-REM repo). Create it up front so redirections never fail on a missing directory.
-if not exist "..\log" md "..\log"
+REM Every log this script writes goes into the repo-local ignored .tools\log\.
+REM Create it up front so redirections never fail on a missing directory.
+if not exist ".tools\log" md ".tools\log"
 
 REM --- Platform detection (OS + CPU arch), like detect_platform in the .sh ---
 set "PLATFORM_OS=windows"
@@ -67,7 +70,7 @@ if /i "%PROCESSOR_ARCHITECTURE%"=="ARM64" set "PLATFORM_ARCH=arm64"
 if /i "%PROCESSOR_ARCHITEW6432%"=="ARM64" set "PLATFORM_ARCH=arm64"
 echo Platform: %PLATFORM_OS% %PLATFORM_ARCH%
 echo Repo: %REPO%
-echo Note: Dev-server console output is also logged to ..\log\wekan-log.log
+echo Note: Dev-server console output is also logged to .tools\log\wekan-log.log
 
 :menu
 echo.
@@ -99,15 +102,17 @@ REM ===========================================================================
 echo.
 echo -- Setup --   ^(0 = Back^)
 echo   1^) Install dependencies
-echo   2^) Build WeKan
-echo   3^) git pull ^(fetch, fast-forward or rebase, repoint moved CHANGELOG links^)
-echo   4^) git push ^(check the CHANGELOG links, push, pull-and-retry once if rejected^)
+echo   2^) Build WeKan release bundle
+echo   3^) Build WeKan development bundle
+echo   4^) git pull ^(fetch, fast-forward or rebase, repoint moved CHANGELOG links^)
+echo   5^) git push ^(check the CHANGELOG links, push, pull-and-retry once if rejected^)
 set "choice="
 set /p "choice=Choose: "
 if "%choice%"=="1" goto install
 if "%choice%"=="2" goto build
-if "%choice%"=="3" goto gitpull
-if "%choice%"=="4" goto gitpush
+if "%choice%"=="3" goto builddev
+if "%choice%"=="4" goto gitpull
+if "%choice%"=="5" goto gitpush
 if "%choice%"=="0" goto menu
 goto menu_setup
 
@@ -140,13 +145,13 @@ REM ===========================================================================
 :menu_tests
 echo.
 echo -- Tests --   ^(0 = Back^)
-echo   1^) EVERYTHING ^(sequential^): the floating-promises guard, then WeKan's own
-echo       tests ^(mocha, node suites, import, node E2E, three browsers^), then every
-echo       database with an image for this CPU, then all FerretDB tests ^(unit, vet,
-echo       integration^). Logs in ..\log\^<datetime^>\
-echo   2^) WeKan's own tests only, parallel: Mocha, node unit suites, import, node
-echo       E2E and all three browsers, concurrently. No databases, no FerretDB
-echo   3^) WeKan's own tests only, sequential: the same suite, one job at a time
+echo   1^) EVERYTHING two-worker: one stage at a time, two Playwright workers
+echo       per browser; every database and all FerretDB tests remain sequential.
+echo       Logs in .tools\log\^<datetime^>\
+echo   2^) EVERYTHING one by one: one stage and one Playwright worker at a time
+echo       for minimum RAM usage; database and FerretDB stages stay sequential
+echo   3^) EVERYTHING at once: WeKan test jobs concurrently; database and
+echo       FerretDB stages remain sequential
 echo   4^) Mocha ^(server-side^)
 echo   5^) Import regression
 echo   6^) Node E2E regressions
@@ -162,9 +167,9 @@ echo       against every database with an image for this CPU, compare the answer
 echo  15^) Run all FerretDB tests - SEQUENTIAL ^(unit, vet, integration^)
 set "choice="
 set /p "choice=Choose: "
-if "%choice%"=="1"  goto test_everything
-if "%choice%"=="2"  goto test_all_parallel
-if "%choice%"=="3"  goto test_all_sequential
+if "%choice%"=="1"  goto test_everything_two
+if "%choice%"=="2"  goto test_everything_one
+if "%choice%"=="3"  goto test_everything_all
 if "%choice%"=="4"  goto test_mocha
 if "%choice%"=="5"  goto test_import
 if "%choice%"=="6"  goto test_e2e
@@ -253,6 +258,8 @@ echo   19^) Delete a git tag, locally and on the remote
 echo   20^) Move the 'stable' tag to HEAD
 echo   21^) Release the wekan-ondra / wekan-gantt-gpl variants, part 1
 echo   22^) Release the wekan-ondra / wekan-gantt-gpl variants, part 2
+echo   23^) Report ^(or repair^) the Helm chart index for past releases
+echo   24^) Rebuild the Helm index.yaml from the chart packages
 set "choice="
 set /p "choice=Choose: "
 if "%choice%"=="1" call :rel_run "releases/release-all.sh" ""
@@ -277,6 +284,8 @@ if "%choice%"=="19" call :rel_run "releases/delete-tag.sh" "Version tag, e.g. v1
 if "%choice%"=="20" call :rel_cmd "git tag --force stable HEAD && git push --tags --force && git push --follow-tags" ""
 if "%choice%"=="21" call :rel_run "releases/release-ondra-1.sh" ""
 if "%choice%"=="22" call :rel_run "releases/release-ondra-2.sh" ""
+if "%choice%"=="23" call :rel_run "releases/backfill-charts.sh" ""
+if "%choice%"=="24" call :rel_run "releases/reindex-charts.py" ""
 if "%choice%"=="0" goto menu_releases
 goto rel_release
 
@@ -628,6 +637,8 @@ if /I "%K%"=="release-ln" (set "CMD=bash releases/release-ln.sh" ^& goto cli_go)
 if /I "%K%"=="release-x2" (set "CMD=bash releases/release-x2.sh" ^& goto cli_go)
 if /I "%K%"=="release-cleanup" (set "CMD=bash releases/release-cleanup.sh" ^& goto cli_go)
 if /I "%K%"=="release-charts" (set "CMD=bash releases/release-charts.sh" ^& goto cli_go)
+if /I "%K%"=="backfill-charts" (set "CMD=bash releases/backfill-charts.sh" ^& goto cli_go)
+if /I "%K%"=="reindex-charts" (set "CMD=python3 releases/reindex-charts.py" ^& goto cli_go)
 if /I "%K%"=="release-website" (set "CMD=bash releases/release-website.sh" ^& goto cli_go)
 if /I "%K%"=="npm-publish" (set "CMD=bash releases/npm-publish.sh" ^& goto cli_go)
 if /I "%K%"=="test-download-urls" (set "CMD=bash releases/test-download-urls.sh" ^& goto cli_go)
@@ -794,11 +805,52 @@ call npm -g install meteor
 echo Done. Open a new terminal so PATH changes take effect, then re-run this script.
 goto end
 
+REM ===========================================================================
+REM Two entries, one build. :build adds what a RELEASE bundle is on top of
+REM :builddev, and both share :buildcommon - so the plain build cannot drift
+REM from the one the release steps run on.
+:builddev
+echo Building the WeKan DEVELOPMENT bundle ^(plain meteor build^).
+call :buildcommon
+if errorlevel 1 goto end
+echo.
+echo Done. This is NOT what a release ships: it still has the legacy client, the
+echo source maps and uWebSockets.js, and no Node.js, FerretDB or launcher of its
+echo own. Use "Build WeKan release bundle" to find out whether a release starts.
+goto end
+
 REM ===========================================================================
 :build
-echo Building WeKan.
-REM Also clears the rspack dev-build caches (_build and node_modules\.cache) so the
-REM next `meteor run` recompiles from scratch instead of serving stale modules.
+echo Building the WeKan RELEASE bundle.
+call :buildcommon
+if errorlevel 1 goto end
+REM THE REST OF WHAT A RELEASE BUNDLE IS - the same steps as the Release All
+REM workflow for this platform, minus the .zip: the server's npm modules, the
+REM three prunes, the sockjs / legacy-client / source-map trim, a verified
+REM Node.js, FerretDB, the MongoDB Database Tools and start-wekan.bat. So this
+REM entry answers whether the bundle a release would publish starts here, which
+REM `meteor build` on its own never could.
+REM
+REM Through bash, like the git actions above and for the same reason: this is
+REM releases/build-release-bundle.sh, the script the release itself runs, not a
+REM batch copy of it that would drift from it.
+where bash >nul 2>&1
+if errorlevel 1 (
+  echo.
+  echo WARNING: bash was not found, so .build\bundle is a plain `meteor build`
+  echo          bundle - no Node.js, no FerretDB, no launcher, nothing trimmed.
+  echo          bash comes with Git for Windows ^(Git Bash^) and with WSL.
+  goto end
+)
+bash releases/build-release-bundle.sh .build/bundle
+echo Done.
+goto end
+
+REM ===========================================================================
+REM The part both build entries do: clear the rspack dev-build caches (_build and
+REM node_modules\.cache) so the next `meteor run` recompiles from scratch instead
+REM of serving stale modules, then build the bundle.
+:buildcommon
 if exist "%REPO%\node_modules"        rmdir /s /q "%REPO%\node_modules"
 if exist "%REPO%\node_modules\.cache" rmdir /s /q "%REPO%\node_modules\.cache"
 if exist "%REPO%\.meteor\local"       rmdir /s /q "%REPO%\.meteor\local"
@@ -807,8 +859,11 @@ if exist "%REPO%\_build"              rmdir /s /q "%REPO%\_build"
 call meteor update --npm
 call meteor npm install
 call meteor build .build --directory
-echo Done.
-goto end
+if not exist "%REPO%\.build\bundle\main.js" (
+  echo ERROR: the build produced no .build\bundle\main.js.
+  exit /b 1
+)
+exit /b 0
 
 REM ===========================================================================
 :gitpull
@@ -922,6 +977,12 @@ goto end
 
 REM ===========================================================================
 :test_all_parallel
+REM Clear anything a previous run left listening before starting: cmd cannot
+REM trap Ctrl-C, so an interrupted run's database outlives it, and the harness
+REM would REUSE it (it reuses a database that answers) with data this run never
+REM seeded. build.sh does this with a trap on the way out; here it is done on
+REM the way in, which covers the same gap.
+call :stop_test_databases
 echo Running ALL tests against ONE WeKan server on http://localhost:3000 - all jobs run IN PARALLEL (concurrently). Needs plenty of RAM (fine on 32 GB).
 echo Two WeKan servers are involved:
 echo   :3000  - the PRECOMPILED .build\bundle run as a plain Node server (Meteor's mongod on :3001, db "meteor")
@@ -946,12 +1007,12 @@ set "S_mocha=RUN" & set "S_unit=RUN" & set "S_import=RUN" & set "S_e2e=RUN"
 set "S_chromium=RUN" & set "S_firefox=RUN" & set "S_webkit=RUN"
 set "C_mocha=0" & set "C_unit=0" & set "C_import=0" & set "C_e2e=0"
 set "C_chromium=0" & set "C_firefox=0" & set "C_webkit=0"
-REM Each run gets its own ..\log\<timestamp>\ dir (stamped once at run start), so
+REM Each run gets its own .tools\log\<timestamp>\ dir (stamped once at run start), so
 REM logs are never overwritten and previous runs are kept. PowerShell gives a
 REM locale-independent yyyy-MM-dd_HH-mm-ss; %RUN_LOGDIR% is absolute so it works
 REM from any job's working directory (e.g. the browser job runs in tests\playwright).
 for /f %%i in ('powershell -NoProfile -Command "Get-Date -Format yyyy-MM-dd_HH-mm-ss"') do set "RUN_TS=%%i"
-set "RUN_LOGDIR=%REPO%\..\log\%RUN_TS%"
+set "RUN_LOGDIR=%REPO%\.tools\log\%RUN_TS%"
 if not exist "%RUN_LOGDIR%" md "%RUN_LOGDIR%"
 echo Logs for this run: %RUN_LOGDIR%\  - previous runs are kept
 REM Clear completion flags from any previous run.
@@ -1030,9 +1091,7 @@ if "!ALLDONE!"=="0" (
 )
 
 echo.
-echo Stopping WeKan test server (bundle node :3000).
-taskkill /FI "WINDOWTITLE eq WekanTestServer*" /T /F >nul 2>&1
-if "!MONGOD_STARTED!"=="1" ( echo Stopping test MongoDB ^(mongod :3001^). & taskkill /FI "WINDOWTITLE eq WekanTestMongo*" /T /F >nul 2>&1 )
+call :stop_test_databases
 
 REM Final pass/fail per job (RUN means it never wrote a flag = treat as FAIL).
 if "!S_mocha!"=="FAIL" set "FAILED=1"
@@ -1060,6 +1119,12 @@ goto end
 
 REM ===========================================================================
 :test_all_sequential
+REM Clear anything a previous run left listening before starting: cmd cannot
+REM trap Ctrl-C, so an interrupted run's database outlives it, and the harness
+REM would REUSE it (it reuses a database that answers) with data this run never
+REM seeded. build.sh does this with a trap on the way out; here it is done on
+REM the way in, which covers the same gap.
+call :stop_test_databases
 echo Running ALL tests against ONE WeKan server on http://localhost:3000 - all jobs run SEQUENTIALLY (one at a time).
 echo Two WeKan servers are involved (they do NOT run tests in parallel; the suites run one at a time):
 echo   :3000  - the PRECOMPILED .build\bundle run as a plain Node server (Meteor's mongod on :3001, db "meteor")
@@ -1084,12 +1149,12 @@ set "S_mocha=RUN" & set "S_unit=RUN" & set "S_import=RUN" & set "S_e2e=RUN"
 set "S_chromium=RUN" & set "S_firefox=RUN" & set "S_webkit=RUN"
 set "C_mocha=0" & set "C_unit=0" & set "C_import=0" & set "C_e2e=0"
 set "C_chromium=0" & set "C_firefox=0" & set "C_webkit=0"
-REM Each run gets its own ..\log\<timestamp>\ dir (stamped once at run start), so
+REM Each run gets its own .tools\log\<timestamp>\ dir (stamped once at run start), so
 REM logs are never overwritten and previous runs are kept. PowerShell gives a
 REM locale-independent yyyy-MM-dd_HH-mm-ss; %RUN_LOGDIR% is absolute so it works
 REM from any job's working directory (e.g. the browser job runs in tests\playwright).
 for /f %%i in ('powershell -NoProfile -Command "Get-Date -Format yyyy-MM-dd_HH-mm-ss"') do set "RUN_TS=%%i"
-set "RUN_LOGDIR=%REPO%\..\log\%RUN_TS%"
+set "RUN_LOGDIR=%REPO%\.tools\log\%RUN_TS%"
 if not exist "%RUN_LOGDIR%" md "%RUN_LOGDIR%"
 echo Logs for this run: %RUN_LOGDIR%\  - previous runs are kept
 REM Clear completion flags from any previous run.
@@ -1153,9 +1218,7 @@ set "S_e2e=SKIP" & set "S_chromium=SKIP" & set "S_firefox=SKIP" & set "S_webkit=
 :server_jobs_done
 
 echo.
-echo Stopping WeKan test server (bundle node :3000).
-taskkill /FI "WINDOWTITLE eq WekanTestServer*" /T /F >nul 2>&1
-if "!MONGOD_STARTED!"=="1" ( echo Stopping test MongoDB ^(mongod :3001^). & taskkill /FI "WINDOWTITLE eq WekanTestMongo*" /T /F >nul 2>&1 )
+call :stop_test_databases
 
 REM Final pass/fail per job (RUN means it never wrote a flag = treat as FAIL).
 if "!S_mocha!"=="FAIL" set "FAILED=1"
@@ -1290,7 +1353,7 @@ REM
 REM It used to be a single `playwright test --project=... --project=...` call
 REM with no log at all: everything went to the terminal and there was nothing
 REM left to read afterwards, which is what tests/dbConformanceWiring.test.cjs
-REM means by "every Tests option writes its log to ../log/<datetime>/".
+REM means by "every Tests option writes its log to .tools/log/<datetime>/".
 set "PW_ALL_FAILED=0"
 for %%B in (chromium firefox webkit) do call :pw_one_browser %%B
 if "%PW_ALL_FAILED%"=="1" ( echo RESULT: Some Playwright browsers FAILED ^(see the logs above^). ) else ( echo RESULT: All Playwright browsers passed. )
@@ -1463,7 +1526,7 @@ exit /b 0
 :set_dev_env
 REM Common dev-server environment (caller sets ROOT_URL afterwards).
 set "DEFAULT_METEOR_REACTIVITY_ORDER=changeStreams,oplog,polling"
-set "DDP_TRANSPORT=uws"
+set "DDP_TRANSPORT=sockjs"
 set "DEBUG=true"
 set "WRITABLE_PATH=.."
 set "WITH_API=true"
@@ -1471,7 +1534,7 @@ set "RICHER_CARD_COMMENT_EDITOR=false"
 exit /b 0
 
 :onelog
-REM Set ONELOG to ..\log\<datetime>\wekan-%1.log - the same place every other
+REM Set ONELOG to .tools\log\<datetime>\wekan-%1.log - the same place every other
 REM test run writes, so "the newest test logs" is one directory whichever option
 REM produced them. A larger run (EVERYTHING) exports WEKAN_LOGDIR first, and then
 REM the whole run stays in that one directory. The Windows equivalent of build.sh's
@@ -1479,7 +1542,7 @@ REM one_log().
 if defined WEKAN_LOGDIR (
 	set "ONELOGDIR=%WEKAN_LOGDIR%"
 ) else (
-	for /f %%T in ('powershell -NoProfile -Command "Get-Date -Format yyyy-MM-dd_HH-mm-ss"') do set "ONELOGDIR=..\log\%%T"
+	for /f %%T in ('powershell -NoProfile -Command "Get-Date -Format yyyy-MM-dd_HH-mm-ss"') do set "ONELOGDIR=.tools\log\%%T"
 )
 if not exist "%ONELOGDIR%" md "%ONELOGDIR%" >nul 2>&1
 set "ONELOG=%ONELOGDIR%\wekan-%~1.log"
@@ -1495,8 +1558,8 @@ exit /b 0
 
 :runlog
 REM Run "meteor run <args>" showing output live AND copying it to
-REM ..\log\wekan-log.log - the Windows equivalent of the .sh's
-REM "meteor run ... 2>&1 | tee ../log/wekan-log.log". cmd has no built-in tee,
+REM .tools\log\wekan-log.log - the Windows equivalent of the .sh's
+REM "meteor run ... 2>&1 | tee .tools/log/wekan-log.log". cmd has no built-in tee,
 REM so pipe through PowerShell's Tee-Object. %* = all args forwarded to meteor.
 REM Note: PowerShell buffers the pipeline, so console output can appear in
 REM bursts; the full stream is always captured in the log file.
@@ -1504,8 +1567,8 @@ REM Callers always pass "--port <PORT>" first, so %2 is the port: kill any
 REM Meteor dev server already listening there before starting a new one.
 call :kill_meteor_on_port %2
 if errorlevel 1 exit /b 1
-if not exist "..\log" md "..\log"
-call meteor run %* 2>&1 | powershell -NoProfile -Command "$input | Tee-Object -FilePath '..\log\wekan-log.log'"
+if not exist ".tools\log" md ".tools\log"
+call meteor run %* 2>&1 | powershell -NoProfile -Command "$input | Tee-Object -FilePath '.tools\log\wekan-log.log'"
 exit /b 0
 
 :kill_meteor_on_port
@@ -1562,6 +1625,33 @@ REM %1 = port. Kill whatever is LISTENING on that TCP port (and its process tree
 for /f "tokens=5" %%p in ('netstat -ano ^| findstr /r /c:":%~1 .*LISTENING"') do taskkill /F /T /PID %%p >nul 2>&1
 exit /b 0
 
+:stop_test_databases
+REM Stop what a test run started: the bundle server on :3000, the test mongod on
+REM :3001 when THIS run launched it, and any database-conformance container.
+REM
+REM Called at the end of both all-tests flows, and again before a run starts,
+REM which is the batch answer to build.sh's trap. cmd cannot trap Ctrl-C, so an
+REM interrupted run leaves its database behind; clearing before starting means
+REM the next run does not inherit it. That matters because the harness reuses a
+REM database only when it ANSWERS - a leftover mongod answers, so it would be
+REM reused, holding a database this run never seeded, and the failures would
+REM land somewhere else entirely.
+echo Stopping WeKan test server (bundle node :3000).
+taskkill /FI "WINDOWTITLE eq WekanTestServer*" /T /F >nul 2>&1
+if "!MONGOD_STARTED!"=="1" ( echo Stopping test MongoDB ^(mongod :3001^). & taskkill /FI "WINDOWTITLE eq WekanTestMongo*" /T /F >nul 2>&1 )
+REM The conformance stage runs each engine in a container named
+REM wekan-conformance-db-<timestamp> and removes it when that engine is done. An
+REM interrupted run leaves the one it was on, and a container still holding 5432
+REM or 3306 fails the next run's engine before it starts.
+where docker >nul 2>&1
+if not errorlevel 1 (
+	for /f %%c in ('docker ps -aq --filter "name=wekan-conformance-db-" 2^>nul') do (
+		echo Stopping database-conformance container %%c.
+		docker rm -f %%c >nul 2>&1
+	)
+)
+exit /b 0
+
 :kill_all_dev_servers
 REM Kill every dev/test server this script can start, freeing all dev/test ports
 REM at once: the dev app (3000) + its Mongo (3001), the Mocha test server (3100)
@@ -1668,7 +1758,7 @@ if "!SERVER_READY!"=="1" echo ==^> WeKan test server is ready on http://localhos
 exit /b 0
 
 :rebuild_for_tests
-REM Delete .build (and the rspack dev-build caches, as :build does) and build the
+REM Delete .build (and the rspack dev-build caches, as :buildcommon does) and build the
 REM WeKan bundle the test server runs. Same steps as Setup -> "Build WeKan", so the
 REM two can never drift apart.
 echo ==^> Deleting .build and building WeKan before running the tests ^(always, so the tests run against the current source^).
@@ -1832,7 +1922,7 @@ REM there, and installing Go and the module dependencies if they are
 REM missing), then run the whole FerretDB v1 query catalogue against every
 REM database that has a Docker image for THIS CPU - one at a time, because they
 REM all use the same FerretDB port - and compare that they all answered the same.
-REM Results go to ..\log\<datetime>\ with every other test run's.
+REM Results go to .tools\log\<datetime>\ with every other test run's.
 REM
 REM The orchestration is one bash script, shared with build.sh rather than
 REM rewritten here: a second implementation would drift, and Docker Desktop on
@@ -1855,7 +1945,7 @@ REM that .gitignore and .meteorignore already exclude, instead of one ignored
 REM subdirectory each at the repo root. It is cloned here when it is not there,
 REM the same as build.sh's ensure_tool_repo does, so neither script depends on
 REM the other having been run first. Its build.sh installs Go and the Go modules
-REM when they are missing, and writes its logs to ..\log\<datetime>\ with every
+REM when they are missing, and writes its logs to .tools\log\<datetime>\ with every
 REM other test run's.
 where bash >nul 2>&1
 if errorlevel 1 (
@@ -1886,13 +1976,27 @@ bash -c "cd .tools/FerretDB && ./build.sh test-all"
 goto end
 
 REM ===========================================================================
+:test_everything_two
+set "WEKAN_EVERYTHING_MODE=two-worker"
+goto test_everything
+
+:test_everything_one
+set "WEKAN_EVERYTHING_MODE=sequential"
+goto test_everything
+
+:test_everything_all
+set "WEKAN_EVERYTHING_MODE=parallel"
+goto test_everything
+
 :test_everything
 REM Every test WeKan and FerretDB have, one stage at a time: WeKan's own suite,
 REM then the database conformance run for every database with an image for this
-REM CPU, then all of FerretDB's tests. One ..\log\<datetime>\ directory for the
+REM CPU, then all of FerretDB's tests. One .tools\log\<datetime>\ directory for the
 REM whole run, and nothing runs concurrently, which is what makes a failure
 REM readable.
 REM
+REM The shared runner first stops and waits for any older EVERYTHING run, so the
+REM two runs cannot share ports 3000/3001, databases or browser output.
 REM The WeKan stage builds a Meteor bundle and runs a server, which needs the
 REM POSIX shell throughout - so this hands the whole run to bash rather than
 REM reimplementing it here, exactly as options 14 and 15 do.
@@ -1901,7 +2005,11 @@ if errorlevel 1 (
   echo ERROR: bash was not found. It comes with Git for Windows ^(Git Bash^) and with WSL.
   goto end
 )
-bash ./releases/run-everything.sh
+bash ./releases/run-everything.sh %WEKAN_EVERYTHING_MODE%
+if errorlevel 1 (
+  echo ERROR: EVERYTHING did not start or did not finish successfully. See the message above.
+  goto end
+)
 goto end
 
 REM ===========================================================================

client/components/activities/activities.css

@@ -1,13 +1,19 @@
+/* The board sidebar's Activities heading. It is the section's own control now -
+   a caret, the icon and the name, clicked to show the activities under it - so
+   it is a row of three things beside each other rather than a heading with a
+   toggle pushed to the far end. client/components/sidebar/sidebar.jade */
 .activity-title {
   margin: 0 10px 9px;
   display: flex;
-  justify-content: space-between;
+  align-items: center;
+  gap: 0.4em;
+  cursor: pointer;
 }
 .reactions-popup .add-comment-reaction {
   display: inline-block;
   cursor: pointer;
   border-radius: 10px;
-  font-size: 18px;
+  font-size: calc(18px * var(--wekan-ui-font-scale, 1));
   text-align: center;
   line-height: 1.3;
   width: 70px;
@@ -15,20 +21,6 @@
 .reactions-popup .add-comment-reaction:hover {
   background-color: #b0c4de;
 }
-/* Eye / eye-slash icon toggle for showing/hiding activities. Open eye
-   (.eye-icon) = activities shown; crossed eye (.eye-slash-icon) = hidden.
-   Matches the password-visibility toggle used on the login/register pages. */
-.activities-eye-toggle {
-  cursor: pointer;
-  display: inline-flex;
-  align-items: center;
-  gap: 0.4em;
-  text-decoration: none;
-}
-.activities-eye-toggle .eye-icon,
-.activities-eye-toggle .eye-slash-icon {
-  line-height: 1;
-}
 .activities {
   clear: both;
 }

client/components/activities/activities.jade

@@ -31,7 +31,7 @@ template(name="activity")
         | {{{_ 'activity-attached' attachmentLink cardLink}}}.
         if($neq mode 'board')
           if activity.attachment.isImage
-            img.attachment-image-preview(src=activity.attachment.url)
+            img.attachment-image-preview(src=activity.attachment.url alt="")
 
       //- board activity ------------------------------------------------------
       if($eq activity.activityType 'createBoard')

client/components/activities/activities.js

@@ -6,6 +6,7 @@ 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';
+import { activityCardLinkData } from '/models/lib/activityCardLink';
 
 // #6480/#6481: 500 was far more than the sidebar/card activity feed ever shows
 // at once, and with FerretDB (no oplog) every live cursor is re-run on a timer —
@@ -87,9 +88,20 @@ function _showActivities(data) {
       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;
+      // The card's Activities section is COLLAPSED by default and renders this
+      // template only when its caret has been opened - so being here means the
+      // reader asked for the history, and the history is what they get.
+      //
+      // Until the section had a caret, the card carried a `showActivities` flag
+      // toggled by an eye beside the heading, and `false` - the default -
+      // subscribed to comments ONLY (server/publications/activities.js). The eye
+      // is gone: one control for one idea. Nothing is fetched at all while the
+      // section is closed, which is the cheaper half of what the flag was for,
+      // and opening it now means the whole history rather than a filtered part
+      // of it. Do not consult the obsolete per-card `showActivities` value here:
+      // existing cards commonly persist its old default (`false`), which would
+      // silently turn an explicitly opened Activities section into comments-only.
+      ret = true;
     } else {
       ret = Utils.getCurrentBoard().showActivities ?? false;
     }
@@ -150,23 +162,23 @@ Template.activity.helpers({
       return TAPi18n.__('this-card');
     }
     else if (this.mode !== 'board') {
-      return createCardLink(this.activity.card(), null);
+      return createCardLink(this.activity, this.activity.card(), null);
     }
     else if (currentBoardId != this.activity.boardId) {
-      return createCardLink(this.activity.card(), this.activity.board().title);
+      return createCardLink(this.activity, this.activity.card(), this.activity.board().title);
     }
-    return createCardLink(this.activity.card(), null);
+    return createCardLink(this.activity, this.activity.card(), null);
   },
 
   cardLink() {
     const currentBoardId = Session.get('currentBoard');
     if (this.mode !== 'board') {
-      return createCardLink(this.activity.card(), null);
+      return createCardLink(this.activity, this.activity.card(), null);
     }
     else if (currentBoardId != this.activity.boardId) {
-      return createCardLink(this.activity.card(), this.activity.board().title);
+      return createCardLink(this.activity, this.activity.card(), this.activity.board().title);
     }
-    return createCardLink(this.activity.card(), null);
+    return createCardLink(this.activity, this.activity.card(), null);
   },
 
   receivedDate() {
@@ -365,21 +377,36 @@ Template.commentReactions.helpers({
   }
 })
 
-function createCardLink(card, board) {
-  if (!card) return '';
-  let text = card.title;
-  if (board) text = `${board} > ` + text;
-  return (
-    card &&
-    Blaze.toHTML(
-      HTML.A(
-        {
-          href: card.originRelativeUrl(),
-          class: 'action-card',
-        },
-        sanitizeHTML(text),
-      ),
-    )
+// #3144: the card is not always here. An ARCHIVED card is not published to the
+// client, so `activity.card()` returned nothing and every sentence that named it
+// was rendered around a hole - "Activities for archived card displayed as
+// undefined on board settings".
+//
+// The activity itself recorded the title in most cases (`cardTitle`), and a card
+// URL can be built from the ids it carries, so the link survives the card not
+// being here. models/lib/activityCardLink.js decides what to show;
+// this turns it into the anchor, and marks an archived card the way the reporter
+// asked for: "{{ card title }} [archived]".
+function createCardLink(activity, card, boardTitle) {
+  const link = activityCardLinkData(activity, card, card ? card.board && card.board() : null);
+  if (!link) {
+    // Nothing named the card - an old activity from before the titles were
+    // recorded, on a card this client cannot see. Say "this card" rather than
+    // leaving a gap in the middle of a sentence.
+    return sanitizeHTML(TAPi18n.__('this-card'));
+  }
+  let text = link.title;
+  if (link.archived) text = `${text} [${TAPi18n.__('archived')}]`;
+  if (boardTitle) text = `${boardTitle} > ` + text;
+  if (!link.url) return sanitizeHTML(text);
+  return Blaze.toHTML(
+    HTML.A(
+      {
+        href: link.url,
+        class: 'action-card',
+      },
+      sanitizeHTML(text),
+    ),
   );
 }
 

client/components/activities/comments.css

@@ -110,7 +110,7 @@
 }
 .comments .comment .comment-desc .reactions .open-comment-reaction-popup span {
   display: inline-block;
-  font-size: 14px;
+  font-size: calc(14px * var(--wekan-ui-font-scale, 1));
   font-weight: 500;
   line-height: 1;
   margin-inline-start: 4px;
@@ -129,7 +129,7 @@
   background-color: #b0c4de;
 }
 .comments .comment .comment-desc .reactions .reaction .reaction-count {
-  font-size: 12px;
+  font-size: calc(12px * var(--wekan-ui-font-scale, 1));
 }
 .comments .comment .comment-desc .comment-meta {
   font-size: 0.8em;

client/components/activities/comments.jade

@@ -39,7 +39,8 @@ template(name="comment")
         +editor(autofocus=true)
           = text
         .edit-controls
-          button.primary(type="submit") {{_ 'edit'}}
+          button.primary(type="submit" title="{{_ 'edit'}}" aria-label="{{_ 'edit'}}")
+            i.fa.fa-pencil-square-o(aria-hidden="true")
           a.js-close-inlined-form(title="{{_ 'close' }}")
             i.fa.fa-times-thin
       else
@@ -56,7 +57,8 @@ template(name="comment")
 
 template(name="editOrDeleteComment")
   = ' - '
-  a.js-open-inlined-form {{_ "edit"}}
+  a.js-open-inlined-form(title="{{_ 'edit'}}" aria-label="{{_ 'edit'}}")
+    i.fa.fa-pencil-square-o(aria-hidden="true")
   = ' - '
   a.js-delete-comment {{_ "delete"}}
 
@@ -81,4 +83,3 @@ template(name="addReactionPopup")
   .reactions-popup
     each codepoint in codepoints
       span.add-comment-reaction(data-codepoint="#{codepoint}") !{codepoint}
-

client/components/boardConversionProgress.css

@@ -47,7 +47,7 @@
 .board-conversion-header h3 {
   margin: 0 0 8px 0;
   color: #333;
-  font-size: 20px;
+  font-size: calc(20px * var(--wekan-ui-font-scale, 1));
   font-weight: 500;
 }
 
@@ -59,7 +59,7 @@
 .board-conversion-header p {
   margin: 0;
   color: #666;
-  font-size: 14px;
+  font-size: calc(14px * var(--wekan-ui-font-scale, 1));
 }
 
 .board-conversion-content {
@@ -116,14 +116,14 @@
   text-align: center;
   font-weight: 600;
   color: #2196F3;
-  font-size: 16px;
+  font-size: calc(16px * var(--wekan-ui-font-scale, 1));
 }
 
 .conversion-status {
   text-align: center;
   margin-bottom: 16px;
   color: #333;
-  font-size: 16px;
+  font-size: calc(16px * var(--wekan-ui-font-scale, 1));
 }
 
 .conversion-status i {
@@ -134,7 +134,7 @@
 .conversion-time {
   text-align: center;
   color: #666;
-  font-size: 14px;
+  font-size: calc(14px * var(--wekan-ui-font-scale, 1));
   background-color: #f5f5f5;
   padding: 8px 12px;
   border-radius: 4px;
@@ -155,7 +155,7 @@
 .conversion-info {
   text-align: center;
   color: #666;
-  font-size: 13px;
+  font-size: calc(13px * var(--wekan-ui-font-scale, 1));
   line-height: 1.4;
 }
 
@@ -179,6 +179,6 @@
   }
 
   .board-conversion-header h3 {
-    font-size: 18px;
+    font-size: calc(18px * var(--wekan-ui-font-scale, 1));
   }
 }

client/components/boards/allBoardsSidebar.jade

@@ -7,7 +7,7 @@
 //- the same `.sidebar-content` with a title and a back arrow above the view. So
 //- it looks and behaves like the one on a board without pretending to be it.
 //-
-//- docs/Design/Page/Search.md, docs/Design/Page/Multi-Selection.md
+//- docs/Features/Page/Search.md, docs/Features/Page/Multi-Selection.md
 
 template(name="allBoardsSidebar")
   //- The theme class goes on an ANCESTOR of `.sidebar`, never on it: every
@@ -42,7 +42,7 @@ template(name="allBoardsHomeSidebar")
     what you are looking at, which belongs beside the page's name rather than
     behind a panel you have to open. Search and Multi-Selection were in that bar
     as well and are NOT repeated here: this view has offered both as rows since
-    it was written. docs/Design/Page/All-Boards.md
+    it was written. docs/Features/Page/All-Boards.md
   a.sidebar-btn.js-open-boards-sort(class="{{#unless isBoardsSort 'custom'}}emphasis{{/unless}}")
     i.fa.fa-sort
     span {{_ 'sort-boards'}}
@@ -52,7 +52,7 @@ template(name="allBoardsHomeSidebar")
       a.js-all-boards-sidebar-search
         i.fa.fa-search
         span.sidebar-list-item-description {{_ 'search-boards'}}
-    if canModifyBoards
+    if canMultiSelectBoards
       li
         a.js-all-boards-sidebar-multiselection
           i.fa.fa-check-square-o
@@ -83,23 +83,34 @@ template(name="allBoardsSearchSidebar")
 //- them. They were four icons crowded into the header bar; here each one has
 //- its name beside it.
 template(name="allBoardsMultiSelectionSidebar")
-  if hasBoardsSelected
+  if isArchiveSelection
+    if canPermanentlyDeleteArchivedBoards
+      p.sidebar-multiselection-hint {{_ 'multi-selection-active'}}
+      button.sidebar-btn.negate.wide.js-delete-selected-boards(type="button")
+        i.fa.fa-trash
+        span {{_ 'delete'}}
+    else
+      p.sidebar-multiselection-hint {{_ 'archive-permanent-delete-disabled-hint'}}
+  else
+    p.sidebar-multiselection-hint {{_ 'multi-selection-active'}}
     a.sidebar-btn.js-star-selected
       i.fa.fa-star
       span {{selectedStarTitle}}
     a.sidebar-btn.js-home-selected
       i.fa.fa-home
-      span {{_ 'set-selected-home'}}
-    hr
-    a.sidebar-btn.js-archive-selected-boards
-      i.fa.fa-archive
-      span {{_ 'archive-board'}}
-    a.sidebar-btn.js-duplicate-selected-boards
-      i.fa.fa-clipboard
-      span {{_ 'duplicate-board'}}
-    hr
-    a.sidebar-btn.js-multiselection-reset
-      i.fa.fa-times-thin
-      span {{_ 'multi-selection-off'}}
-  else
-    p.sidebar-multiselection-hint {{_ 'multi-selection-active'}}
+      if isHomeSelection
+        span {{_ 'unset-selected-home'}}
+      else
+        span {{_ 'set-selected-home'}}
+    unless isHomeSelection
+      hr
+      a.sidebar-btn.js-archive-selected-boards
+        i.fa.fa-archive
+        span {{_ 'archive-board'}}
+      a.sidebar-btn.js-duplicate-selected-boards
+        i.fa.fa-clipboard
+        span {{_ 'duplicate-board'}}
+  hr
+  a.sidebar-btn.js-multiselection-reset
+    i.fa.fa-times-thin
+    span {{_ 'multi-selection-off'}}

client/components/boards/allBoardsSidebar.js

@@ -1,9 +1,13 @@
 import { ReactiveCache } from '/imports/reactiveCache';
 import { FlowRouter } from 'meteor/ostrio:flow-router-extra';
-const { allBoardsPath, SECTION_ARCHIVE } = require('/models/lib/allBoardsUrls');
+const {
+  allBoardsPath,
+  SECTION_HOME,
+  SECTION_ARCHIVE,
+} = require('/models/lib/allBoardsUrls');
 import { TAPi18n } from '/imports/i18n';
 import { BoardMultiSelection } from '/client/lib/boardMultiSelection';
-import { allBoardsSearchVar } from '/client/lib/allBoardsView';
+import { allBoardsSearchVar, allBoardsMenuVar } from '/client/lib/allBoardsView';
 import {
   allBoardsSidebarView,
   isAllBoardsSidebarOpen,
@@ -20,8 +24,8 @@ import {
 import { selectedStarTitleKey, selectedStarAction } from '/models/lib/selectedStars';
 
 // The All Boards right sidebar. Its shell mirrors the board sidebar's; what it
-// shows is this page's own. docs/Design/Page/Search.md,
-// docs/Design/Page/Multi-Selection.md
+// shows is this page's own. docs/Features/Page/Search.md,
+// docs/Features/Page/Multi-Selection.md
 
 Template.allBoardsSidebar.helpers({
   isSidebarOpen() {
@@ -53,6 +57,9 @@ Template.allBoardsSidebar.helpers({
 Template.allBoardsSidebar.events({
   'click .js-close-all-boards-sidebar'(evt) {
     evt.preventDefault();
+    // Selection mode deliberately keeps this sidebar visible, so its X must
+    // turn the mode off before closeAllBoardsSidebar() will accept the close.
+    if (BoardMultiSelection.isActive()) BoardMultiSelection.disable();
     closeAllBoardsSidebar();
   },
   'click .js-all-boards-sidebar-home'(evt) {
@@ -62,7 +69,7 @@ Template.allBoardsSidebar.events({
 });
 
 Template.allBoardsHomeSidebar.helpers({
-  canModifyBoards() {
+  canMultiSelectBoards() {
     const currentUser = ReactiveCache.getCurrentUser();
     return currentUser && !currentUser.isCommentOnly();
   },
@@ -85,7 +92,7 @@ Template.allBoardsHomeSidebar.events({
     evt.preventDefault();
     closeAllBoardsSidebar();
     // The SECTION of this page, not the full-width page it replaced.
-    // docs/Design/Page/Archive.md
+    // docs/Features/Page/Archive.md
     FlowRouter.go(allBoardsPath(SECTION_ARCHIVE, []));
   },
 });
@@ -137,36 +144,77 @@ function currentSelectedStarAction() {
 }
 
 Template.allBoardsMultiSelectionSidebar.helpers({
-  hasBoardsSelected() {
-    return BoardMultiSelection.count() > 0;
-  },
   selectedStarTitle() {
     return TAPi18n.__(selectedStarTitleKey(currentSelectedStarAction().action));
   },
+  isArchiveSelection() {
+    return allBoardsMenuVar.get() === SECTION_ARCHIVE;
+  },
+  isHomeSelection() {
+    return allBoardsMenuVar.get() === SECTION_HOME;
+  },
+  canPermanentlyDeleteArchivedBoards() {
+    const user = ReactiveCache.getCurrentUser();
+    const setting = ReactiveCache.getCurrentSetting();
+    return allBoardsMenuVar.get() === SECTION_ARCHIVE
+      && user?.isAdmin === true
+      && !!(setting && setting.enablePermanentDelete);
+  },
 });
 
+function selectedBoardIdsOrWarn() {
+  const ids = BoardMultiSelection.getSelectedBoardIds();
+  if (!ids.length) {
+    alert(TAPi18n.__('no-boards-selected'));
+    return null;
+  }
+  return ids;
+}
+
+function selectedHomeBoardIdOrWarn() {
+  const ids = BoardMultiSelection.getSelectedBoardIds();
+  if (ids.length !== 1) {
+    alert(TAPi18n.__('select-only-one-board'));
+    return null;
+  }
+  return ids[0];
+}
+
 Template.allBoardsMultiSelectionSidebar.events({
+  'click .js-delete-selected-boards'(evt) {
+    evt.preventDefault();
+    const ids = selectedBoardIdsOrWarn();
+    if (!ids || !confirm(TAPi18n.__('delete-board-confirm-popup'))) return;
+    Meteor.call('permanentlyDeleteArchivedBoards', ids, (err) => {
+      if (err) {
+        alert(err.reason || err.message || 'Failed to permanently delete boards');
+        return;
+      }
+      BoardMultiSelection.reset();
+    });
+  },
   // Only the boards that must CHANGE are toggled: toggleBoardStar flips one
   // board, so calling it for an already-starred one in the mixed case would
   // un-star it.
   'click .js-star-selected'(evt) {
     evt.preventDefault();
+    const ids = selectedBoardIdsOrWarn();
+    if (!ids) return;
     currentSelectedStarAction().boardIds.forEach((id) => {
       Meteor.call('toggleBoardStar', id);
     });
   },
   'click .js-home-selected'(evt) {
     evt.preventDefault();
-    const ids = BoardMultiSelection.getSelectedBoardIds();
-    if (ids.length) {
-      Meteor.call('toggleDefaultBoard', ids[0]);
-    }
+    const boardId = selectedHomeBoardIdOrWarn();
+    if (!boardId) return;
+    Meteor.call('toggleDefaultBoard', boardId);
   },
   'click .js-archive-selected-boards'(evt) {
     evt.preventDefault();
-    const selectedBoards = BoardMultiSelection.getSelectedBoardIds();
+    const selectedBoards = selectedBoardIdsOrWarn();
+    if (!selectedBoards) return;
     if (
-      selectedBoards.length > 0 &&
       confirm(TAPi18n.__('archive-board-confirm'))
     ) {
       selectedBoards.forEach((boardId) => {
@@ -179,9 +227,9 @@ Template.allBoardsMultiSelectionSidebar.events({
   },
   'click .js-duplicate-selected-boards'(evt) {
     evt.preventDefault();
-    const selectedBoards = BoardMultiSelection.getSelectedBoardIds();
+    const selectedBoards = selectedBoardIdsOrWarn();
+    if (!selectedBoards) return;
     if (
-      selectedBoards.length > 0 &&
       confirm(TAPi18n.__('duplicate-board-confirm'))
     ) {
       selectedBoards.forEach((boardId) => {
@@ -207,5 +255,6 @@ Template.allBoardsMultiSelectionSidebar.events({
   'click .js-multiselection-reset'(evt) {
     evt.preventDefault();
     BoardMultiSelection.disable();
+    closeAllBoardsSidebar();
   },
 });

client/components/boards/boardArchive.jade

@@ -11,9 +11,6 @@ template(name="archivedBoards")
     each archivedBoards
       li.archived-lists-item
         div.board-header-btns
-          button.primary.board-header-btn.js-delete-board(type="submit")
-            i.fa.fa-trash
-            | {{_ 'delete-board'}}
           button.primary.board-header-btn.js-restore-board(type="submit")
             i.fa.fa-undo
             | {{_ 'restore-board'}}
@@ -21,7 +18,3 @@ template(name="archivedBoards")
         span {{ displayDate archivedAt 'LLL' }}
     else
       li.no-items-message {{_ 'no-archived-boards'}}
-
-template(name="boardDeletePopup")
-  p {{_ 'delete-board-confirm-popup'}}
-  button.js-confirm.negate.full(type="submit") {{_ 'delete'}}

client/components/boards/boardArchive.js

@@ -1,10 +1,9 @@
 import { ReactiveCache } from '/imports/reactiveCache';
-import { FlowRouter } from 'meteor/ostrio:flow-router-extra';
 import Boards from '/models/boards';
 import { Utils } from '/client/lib/utils';
 import { TABLE_PAGE_ROWS_PER_PAGE } from '/models/lib/tablePage';
 
-// The app's one rows-per-page (docs/Design/Page/Table.md): the archive pages
+// The app's one rows-per-page (docs/Features/Page/Table.md): the archive pages
 // like every other paginated page, whatever pager it draws.
 const ARCHIVED_BOARDS_PER_PAGE = TABLE_PAGE_ROWS_PER_PAGE;
 
@@ -80,17 +79,4 @@ Template.archivedBoards.events({
     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');
-  }),
 });

client/components/boards/boardBody.css

@@ -578,7 +578,7 @@ body.desktop-mode .board-wrapper .board-canvas .board-overlay {
   justify-content: center;
   align-items: center;
   margin: 0;
-  font-size: 18px;
+  font-size: calc(18px * var(--wekan-ui-font-scale, 1));
 }
 .modal-footer {
   display: flex;
@@ -594,7 +594,7 @@ body.desktop-mode .board-wrapper .board-canvas .board-overlay {
   position: absolute;
   top: 5px;
   inset-inline-end: 5px;
-  font-size: 25px;
+  font-size: calc(25px * var(--wekan-ui-font-scale, 1));
   cursor: pointer;
 }
 

client/components/boards/boardBody.js

@@ -21,6 +21,7 @@ import { EscapeActions } from '/client/lib/escapeActions';
 import { Utils } from '/client/lib/utils';
 import { Filter } from '/client/lib/filter';
 import { migrationProgressManager } from '/client/components/settings/migrationProgress';
+import { focusFirstControl } from '/client/lib/accessibility';
 
 // SubsManager removed for Meteor 3 migration
 const { calculateIndex } = Utils;
@@ -117,12 +118,23 @@ Template.board.onCreated(function () {
   // Pattern: https://kadira.io/academy/meteor-routing-guide/content/subscriptions-and-data-management/using-subs-manager
   this.autorun(() => {
     const currentBoardId = Session.get('currentBoard');
+    // Creating a linked card changes the set of source cards, boards and field
+    // definitions that the composite publication must expose. Reading this
+    // generation lets the link dialog restart the subscription immediately;
+    // otherwise those child cursors are only recalculated after a page reload.
+    const subscriptionGeneration =
+      Session.get('boardSubscriptionGeneration') || 0;
     if (!currentBoardId) {
       this.isBoardReady.set(false);
       return;
     }
 
-    const handle = Meteor.subscribe('board', currentBoardId, false);
+    const handle = Meteor.subscribe(
+      'board',
+      currentBoardId,
+      false,
+      subscriptionGeneration,
+    );
     // Learn this board's card-loading mode (lazy vs eager) so 'auto' can decide
     // per board by size; the flag drives isLazyCards(boardId). #6480.
     Meteor.subscribe('boardCardsLoadingMode', currentBoardId);
@@ -302,43 +314,27 @@ Template.boardBody.onRendered(function () {
     document.body.classList.add('iphone-device');
   }
 
-  // Accessibility: Focus management for popups and menus
-  function focusFirstInteractive(container) {
-    if (!container) return;
-    // Find first focusable element
-    const focusable = container.querySelectorAll(
-      'button, [role="button"], a[href], input, select, textarea, [tabindex]:not([tabindex="-1"])',
-    );
-    for (let i = 0; i < focusable.length; i++) {
-      if (!focusable[i].disabled && focusable[i].offsetParent !== null) {
-        focusable[i].focus();
-        break;
-      }
-    }
-  }
-
-  // Observe for new popups/menus and set focus (but exclude swimlane content)
-  const popupObserver = new MutationObserver(function (mutations) {
+  // Popups and modals use their shared focus lifecycle. Board-only menus that
+  // are inserted outside that lifecycle still need their first control focused.
+  this._accessibilityMenuObserver = new MutationObserver(function (mutations) {
     mutations.forEach(function (mutation) {
       mutation.addedNodes.forEach(function (node) {
         if (
           node.nodeType === 1 &&
-          (node.classList.contains('popup') ||
-            node.classList.contains('modal') ||
-            node.classList.contains('menu')) &&
+          node.classList.contains('menu') &&
           !node.closest('.js-swimlanes') &&
           !node.closest('.swimlane') &&
           !node.closest('.list') &&
           !node.closest('.minicard')
         ) {
           setTimeout(function () {
-            focusFirstInteractive(node);
+            focusFirstControl(node);
           }, 10);
         }
       });
     });
   });
-  popupObserver.observe(document.body, { childList: true, subtree: true });
+  this._accessibilityMenuObserver.observe(document.body, { childList: true, subtree: true });
 
   // Remove tabindex from non-interactive elements (e.g., user abbreviations, labels)
   document
@@ -455,7 +451,7 @@ Template.boardBody.onRendered(function () {
         outline: none;
       }
       /* Sidebar hamburger menu button in header. Renamed with the button when
-         it moved to the first top header bar: docs/Design/Page/Header.md */
+         it moved to the first top header bar: docs/Features/Page/Header.md */
       .js-toggle-page-sidebar .fa-bars {
         color: #fff !important;
       }
@@ -680,6 +676,8 @@ Template.boardBody.onRendered(function () {
 });
 
 Template.boardBody.onDestroyed(function () {
+  this._accessibilityMenuObserver?.disconnect();
+  this._accessibilityMenuObserver = null;
   // The reveal watcher owns a Tracker computation and a retry interval, and
   // neither stops on its own when this template goes.
   if (this.boardItemReveals) {

client/components/boards/boardHeader.css

@@ -41,18 +41,18 @@
 }
 
 .mobile-mode .minicard {
-  font-size: 16px;
+  font-size: calc(16px * var(--wekan-ui-font-scale, 1));
   padding: 11px 21px 5px;
   min-height: 24px;
 }
 
 .mobile-mode .list-header-name {
-  font-size: 18px;
+  font-size: calc(18px * var(--wekan-ui-font-scale, 1));
 }
 
 .mobile-mode .board-header-btn {
   padding: 9px 21px;
-  font-size: 14px;
+  font-size: calc(14px * var(--wekan-ui-font-scale, 1));
 }
 
 /* Comprehensive Mobile Mode Styles - Works on all screen sizes */
@@ -111,7 +111,7 @@
   width: 100% !important;
   min-width: 100% !important;
   max-width: 100% !important;
-  font-size: 18px !important;
+  font-size: calc(18px * var(--wekan-ui-font-scale, 1)) !important;
   padding: 1rem !important;
   /* No margin under the header bar: it is a fixed band of the swimlane's lighter
      grey between the bar and the first list, with nothing in it. */
@@ -150,7 +150,7 @@
   min-width: 100% !important;
   max-width: 100% !important;
   padding: 1rem !important;
-  font-size: 18px !important;
+  font-size: calc(18px * var(--wekan-ui-font-scale, 1)) !important;
   display: grid !important;
   /* title | caret | add-list + | drag handle. The grid follows the INLINE axis, so
      under dir="rtl" column 1 is on the right and the whole row mirrors by itself. */
@@ -174,7 +174,7 @@
 }
 
 .mobile-mode .list-header .list-header-name {
-  font-size: 18px !important;
+  font-size: calc(18px * var(--wekan-ui-font-scale, 1)) !important;
   font-weight: bold !important;
   grid-row: 1 !important;
   grid-column: 2 !important;
@@ -185,7 +185,7 @@
 }
 
 .mobile-mode .list-header .cardCount {
-  font-size: 14px !important;
+  font-size: calc(14px * var(--wekan-ui-font-scale, 1)) !important;
   grid-row: 2 !important;
   grid-column: 2 !important;
   align-self: center !important;
@@ -202,7 +202,7 @@
   grid-row: 1/3 !important;
   grid-column: 3 !important;
   padding: 14px !important;
-  font-size: 24px !important;
+  font-size: calc(24px * var(--wekan-ui-font-scale, 1)) !important;
   text-align: center !important;
   display: block !important;
   visibility: visible !important;
@@ -215,7 +215,7 @@
   grid-row: 1/3 !important;
   grid-column: 4 !important;
   padding: 14px !important;
-  font-size: 24px !important;
+  font-size: calc(24px * var(--wekan-ui-font-scale, 1)) !important;
   text-align: center !important;
   display: block !important;
 }
@@ -228,7 +228,7 @@
   grid-row: 1/3 !important;
   grid-column: 5 !important;
   padding: 14px !important;
-  font-size: 28px !important;
+  font-size: calc(28px * var(--wekan-ui-font-scale, 1)) !important;
   text-align: center !important;
   display: block !important;
   visibility: visible !important;
@@ -247,7 +247,7 @@
   width: 100% !important;
   min-width: 100% !important;
   max-width: 100% !important;
-  font-size: 16px !important;
+  font-size: calc(16px * var(--wekan-ui-font-scale, 1)) !important;
   padding: 11px 21px 5px !important;
   min-height: 24px !important;
   margin-bottom: 0.5rem !important;
@@ -256,16 +256,16 @@
 }
 
 .mobile-mode .minicard .minicard-title {
-  font-size: 16px !important;
+  font-size: calc(16px * var(--wekan-ui-font-scale, 1)) !important;
   font-weight: bold !important;
 }
 
 .mobile-mode .minicard .minicard-members {
-  font-size: 12px !important;
+  font-size: calc(12px * var(--wekan-ui-font-scale, 1)) !important;
 }
 
 .mobile-mode .minicard .minicard-lists {
-  font-size: 12px !important;
+  font-size: calc(12px * var(--wekan-ui-font-scale, 1)) !important;
 }
 
 /* Desktop Mode Styles */
@@ -293,12 +293,12 @@
   width: auto !important;
   min-width: auto !important;
   padding: 23px 21px 5px !important;
-  font-size: 14px !important;
+  font-size: calc(14px * var(--wekan-ui-font-scale, 1)) !important;
   display: block !important;
 }
 
 .desktop-mode .list-header .list-header-name {
-  font-size: 14px !important;
+  font-size: calc(14px * var(--wekan-ui-font-scale, 1)) !important;
   display: inline !important;
   grid-row: auto !important;
   grid-column: auto !important;
@@ -306,7 +306,7 @@
 }
 
 .desktop-mode .list-header .cardCount {
-  font-size: 12px !important;
+  font-size: calc(12px * var(--wekan-ui-font-scale, 1)) !important;
   grid-row: auto !important;
   grid-column: auto !important;
   align-self: auto !important;
@@ -320,7 +320,7 @@
   grid-row: auto !important;
   grid-column: auto !important;
   padding: 14px !important;
-  font-size: 40px !important;
+  font-size: calc(40px * var(--wekan-ui-font-scale, 1)) !important;
 }
 
 .desktop-mode .list-header .list-header-handle {
@@ -331,7 +331,7 @@
   grid-row: auto !important;
   grid-column: auto !important;
   padding: 7px !important;
-  font-size: 16px !important;
+  font-size: calc(16px * var(--wekan-ui-font-scale, 1)) !important;
 }
 
 .desktop-mode .list-body {
@@ -343,27 +343,27 @@
 .desktop-mode .minicard {
   width: auto !important;
   min-width: auto !important;
-  font-size: 12px !important;
+  font-size: calc(12px * var(--wekan-ui-font-scale, 1)) !important;
   padding: 5px 11px !important;
   min-height: auto !important;
   margin-bottom: 9px !important;
 }
 
 .desktop-mode .minicard .minicard-title {
-  font-size: 12px !important;
+  font-size: calc(12px * var(--wekan-ui-font-scale, 1)) !important;
 }
 
 .desktop-mode .minicard .minicard-members {
-  font-size: 10px !important;
+  font-size: calc(10px * var(--wekan-ui-font-scale, 1)) !important;
 }
 
 .desktop-mode .minicard .minicard-lists {
-  font-size: 10px !important;
+  font-size: calc(10px * var(--wekan-ui-font-scale, 1)) !important;
 }
 
 /* Additional Mobile Mode Styles for Other Elements - Works on all screen sizes */
 .mobile-mode .swimlane-header .swimlane-title {
-  font-size: 18px !important;
+  font-size: calc(18px * var(--wekan-ui-font-scale, 1)) !important;
   font-weight: bold !important;
   display: block !important;
   visibility: visible !important;
@@ -371,21 +371,21 @@
 }
 
 .mobile-mode .swimlane-header .swimlane-description {
-  font-size: 14px !important;
+  font-size: calc(14px * var(--wekan-ui-font-scale, 1)) !important;
   display: block !important;
   visibility: visible !important;
   opacity: 1 !important;
 }
 
 .mobile-mode .board-header {
-  font-size: 18px !important;
+  font-size: calc(18px * var(--wekan-ui-font-scale, 1)) !important;
   padding: 1rem !important;
   width: 100% !important;
   max-width: 100% !important;
 }
 
 .mobile-mode .board-header .board-header-title {
-  font-size: 18px !important;
+  font-size: calc(18px * var(--wekan-ui-font-scale, 1)) !important;
   font-weight: bold !important;
   display: block !important;
   visibility: visible !important;
@@ -393,14 +393,14 @@
 }
 
 .mobile-mode .board-header .board-header-description {
-  font-size: 14px !important;
+  font-size: calc(14px * var(--wekan-ui-font-scale, 1)) !important;
   display: block !important;
   visibility: visible !important;
   opacity: 1 !important;
 }
 
 .mobile-mode .board-header .board-header-btn {
-  font-size: 14px !important;
+  font-size: calc(14px * var(--wekan-ui-font-scale, 1)) !important;
   padding: 9px 21px !important;
   display: inline-block !important;
   visibility: visible !important;
@@ -408,7 +408,7 @@
 }
 
 .mobile-mode .board-header .board-header-btn i {
-  font-size: 14px !important;
+  font-size: calc(14px * var(--wekan-ui-font-scale, 1)) !important;
   display: inline !important;
   visibility: visible !important;
   opacity: 1 !important;
@@ -430,7 +430,7 @@
   grid-row: 1/3 !important;
   grid-column: 3 !important;
   padding: 14px !important;
-  font-size: 24px !important;
+  font-size: calc(24px * var(--wekan-ui-font-scale, 1)) !important;
   text-align: center !important;
 }
 
@@ -438,7 +438,7 @@
   grid-row: 1/3 !important;
   grid-column: 4 !important;
   padding: 14px !important;
-  font-size: 28px !important;
+  font-size: calc(28px * var(--wekan-ui-font-scale, 1)) !important;
   text-align: center !important;
 }
 
@@ -513,7 +513,7 @@
     min-width: 100% !important;
     margin: 0 !important;
     padding: 1rem !important;
-    font-size: 18px !important;
+    font-size: calc(18px * var(--wekan-ui-font-scale, 1)) !important;
     font-weight: bold !important;
     border-bottom: 2px solid #ccc !important;
   }
@@ -819,12 +819,12 @@
 
 .mobile-mode .board-header .board-header-btn {
   height: 32px !important;
-  line-height: 32px !important;
-  font-size: 15px !important;
+  line-height: calc(32px * var(--wekan-ui-font-scale, 1)) !important;
+  font-size: calc(15px * var(--wekan-ui-font-scale, 1)) !important;
 }
 
 .mobile-mode .board-header .board-header-btn i.fa {
-  line-height: 32px !important;
+  line-height: calc(32px * var(--wekan-ui-font-scale, 1)) !important;
 }
 
 /* Copy mobile media query styles to mobile mode for consistent appearance */
@@ -844,8 +844,8 @@
 
 .mobile-mode .board-header .board-header-btn {
   height: 32px !important;
-  line-height: 32px !important;
-  font-size: 15px !important;
+  line-height: calc(32px * var(--wekan-ui-font-scale, 1)) !important;
+  font-size: calc(15px * var(--wekan-ui-font-scale, 1)) !important;
   margin: 0 2px !important;
   padding: 4px 8px !important;
   border-radius: 4px !important;
@@ -866,8 +866,8 @@
 }
 
 .mobile-mode .board-header .board-header-btn i.fa {
-  line-height: 32px !important;
-  font-size: 15px !important;
+  line-height: calc(32px * var(--wekan-ui-font-scale, 1)) !important;
+  font-size: calc(15px * var(--wekan-ui-font-scale, 1)) !important;
   margin: 0 !important;
   padding: 0 !important;
 }
@@ -978,7 +978,7 @@ body.board-view.mobile-mode #header #header-main-bar .board-header-sidebar-toggl
     margin: 0 2px;
     min-width: 44px;
     height: 44px;
-    line-height: 44px;
+    line-height: calc(44px * var(--wekan-ui-font-scale, 1));
     display: inline-flex;
     align-items: center;
     justify-content: center;
@@ -1003,33 +1003,33 @@ body.board-view.mobile-mode #header #header-main-bar .board-header-sidebar-toggl
 
 /* Additional Desktop Mode Styles for Other Elements */
 .desktop-mode .swimlane-header .swimlane-title {
-  font-size: 14px !important;
+  font-size: calc(14px * var(--wekan-ui-font-scale, 1)) !important;
 }
 
 .desktop-mode .swimlane-header .swimlane-description {
-  font-size: 12px !important;
+  font-size: calc(12px * var(--wekan-ui-font-scale, 1)) !important;
 }
 
 .desktop-mode .board-header {
-  font-size: 14px !important;
+  font-size: calc(14px * var(--wekan-ui-font-scale, 1)) !important;
   padding: 23px 21px 5px !important;
 }
 
 .desktop-mode .board-header .board-header-title {
-  font-size: 14px !important;
+  font-size: calc(14px * var(--wekan-ui-font-scale, 1)) !important;
 }
 
 .desktop-mode .board-header .board-header-description {
-  font-size: 12px !important;
+  font-size: calc(12px * var(--wekan-ui-font-scale, 1)) !important;
 }
 
 .desktop-mode .board-header .board-header-btn {
-  font-size: 12px !important;
+  font-size: calc(12px * var(--wekan-ui-font-scale, 1)) !important;
   padding: 5px 11px !important;
 }
 
 .desktop-mode .board-header .board-header-btn i {
-  font-size: 12px !important;
+  font-size: calc(12px * var(--wekan-ui-font-scale, 1)) !important;
 }
 
 /* #6419: make the board-header action buttons touch-friendly by VIEWPORT WIDTH,
@@ -1042,9 +1042,9 @@ body.board-view.mobile-mode #header #header-main-bar .board-header-sidebar-toggl
     min-height: 40px;
     padding-top: 8px;
     padding-bottom: 8px;
-    font-size: 15px;
+    font-size: calc(15px * var(--wekan-ui-font-scale, 1));
   }
   .board-header-btns .board-header-btn i.fa {
-    font-size: 16px;
+    font-size: calc(16px * var(--wekan-ui-font-scale, 1));
   }
 }

client/components/boards/boardHeader.jade

@@ -1,13 +1,7 @@
-//- The pencil that renames the board, beside the board's name in the FIRST
-//- header bar. The name is there, so the thing that edits it belongs next to it
-//- rather than in a bar of its own. Board admins only; everybody else sees the
-//- name without a pencil. docs/Design/Page/Header.md
-template(name="boardEditTitleButton")
-  if currentUser.isBoardAdmin
-    with currentBoard
-      a.board-header-btn.js-edit-board-title(title="{{_ 'edit'}}" value=title)
-        i.fa.fa-pencil-square-o
-
+//- There is no pencil beside the board's name any more: the NAME renames the
+//- board. It is one target instead of a word and an icon that did the same
+//- thing, and the icon was the smaller of the two. client/components/main/header.jade
+//-
 //- Everything else the board's second header bar held, as icons in the FIRST
 //- bar, to the left of the notification bell.
 //-
@@ -17,74 +11,86 @@ template(name="boardEditTitleButton")
 //-
 //- There is no desktop/mobile split any more either. The second bar wrote the
 //- whole set out TWICE, once for each, because a labelled row does not fit on a
-//- phone; icons do, so one set serves both. docs/Design/Page/Header.md
+//- phone; icons do, so one set serves both. docs/Features/Page/Header.md
 template(name="boardHeaderButtons")
   if currentBoard
     if currentUser
       .board-header-btns.board-header-controls
-        with currentBoard
-          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}}")
-            //- The SAME expression the tooltip uses, so the two cannot say
-              different things - and both follow the board from Private to
-              Public without a second list of words to keep in step.
-            span.board-header-btn-label {{_ currentBoard.permission}}
+        //- The board's controls fold into one caret at the leading edge of the
+          group - left of the lock in a left-to-right page, right of it in Arabic,
+          because the caret's direction comes from the same rule as every other
+          one. Folded, the seven controls after it are gone; open, they are back.
+          The buttons a board's own Rules put in this bar are NOT folded away with
+          them: somebody added those to this board on purpose.
+          client/lib/foldState.js
+        a.board-header-btn.js-toggle-fold(data-fold="board-controls"
+          title="{{#if isFoldOpen 'board-controls'}}{{_ 'collapse'}}{{else}}{{_ 'uncollapse'}}{{/if}}" role="button" tabindex="0")
+          i.fa(class="{{foldCaret 'board-controls'}}")
+        if isFoldOpen 'board-controls'
+          with currentBoard
+            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}}")
+              //- The SAME expression the tooltip uses, so the two cannot say
+                different things - and both follow the board from Private to
+                Public without a second list of words to keep in step.
+              span.board-header-btn-label {{_ currentBoard.permission}}
 
-          unless watchDisabled
-            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.board-header-btn-label {{_ watchLevel }}
+            unless watchDisabled
+              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.board-header-btn-label {{_ watchLevel }}
 
-          //- The name beside the icon where the bar has room for it, dropped
-            when it does not - one rule in header.css hides every label of this
-            bar below the width they stop fitting at.
-            docs/Design/Page/Header.md
-          a.board-header-btn(title="{{#if isSortActive}}{{_ 'sort-is-on'}}{{else}}{{_ 'sort-cards'}}{{/if}}" class="js-sort-cards {{#if isSortActive }}emphasis{{/if}}")
-            i.fa.fa-sort
-            span.board-header-btn-label {{#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
+            //- The name beside the icon where the bar has room for it, dropped
+              when it does not - one rule in header.css hides every label of this
+              bar below the width they stop fitting at.
+              docs/Features/Page/Header.md
+            a.board-header-btn(title="{{#if isSortActive}}{{_ 'sort-is-on'}}{{else}}{{_ 'sort-cards'}}{{/if}}" class="js-sort-cards {{#if isSortActive }}emphasis{{/if}}")
+              i.fa.fa-sort
+              span.board-header-btn-label {{#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
 
         +boardButtons
 
-        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.board-header-btn-label {{#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.board-header-btn-label {{_ 'search'}}
-
-        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.board-header-btn-label {{#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
-            //- Named, like the board's Multi-Selection on All Boards: a
-              check-box outline says nothing about what the button does.
-            span.board-header-btn-label {{_ 'multi-selection'}}
-          if MultiSelection.isActive
-            a.board-header-btn-close.js-multiselection-reset(title="{{_ 'multi-selection-off'}}")
+        if isFoldOpen 'board-controls'
+          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.board-header-btn-label {{#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.board-header-btn-label {{_ 'search'}}
+
+          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.board-header-btn-label {{#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
+              //- Named, like the board's Multi-Selection on All Boards: a
+                check-box outline says nothing about what the button does.
+              span.board-header-btn-label {{_ 'multi-selection'}}
+            if MultiSelection.isActive
+              a.board-header-btn-close.js-multiselection-reset(title="{{_ 'multi-selection-off'}}")
+                i.fa.fa-times-thin
     else
       a.board-header-btn.js-log-in(title="{{_ 'log-in'}}")
         i.fa.fa-sign-in
@@ -187,7 +193,18 @@ template(name="boardChangeViewPopup")
           if $eq Utils.boardView "board-view-stats"
             i.fa.fa-check
 
-template(name="createBoard")
+//- The Create Board form: a title, what the board is visible to, and Create.
+  Four templates drew it letter for letter - the one on the All Boards page and
+  three popups, one of which creates a TEMPLATE board and says so with a Session
+  flag rather than with different markup.
+//-
+//- The two things it shows about visibility are passed IN. The state itself
+  (setupCreateBoardState) and the handlers stay with each of the four: an event
+  in here bubbles to whichever one included it, which is the one holding the
+  state, and that is what keeps `createTemplateContainerPopup` creating a
+  template board and the others an ordinary one.
+  client/components/boards/boardHeader.js
+template(name="createBoardForm")
   form
     label
       | {{_ 'title'}}
@@ -214,87 +231,18 @@ template(name="createBoard")
       | /
       a.js-board-template {{_ 'template'}}
 
+template(name="createBoard")
+  +createBoardForm(visibility=visibility visibilityMenuIsOpen=visibilityMenuIsOpen)
+
 template(name="createBoardPopup")
-  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'}}}
-        else
-          span.fa.fa-lock.colorful
-          = " "
-          | {{{_ 'board-private-info'}}}
-        a.js-change-visibility {{_ 'change'}}.
-    input.primary.wide(type="submit" value="{{_ 'create'}}")
-    unless importDisabled
-      span.quiet
-        | {{_ 'or'}}
-        a.js-import-board {{_ 'import'}}
-    span.quiet
-      | /
-      a.js-board-template {{_ 'template'}}
+  +createBoardForm(visibility=visibility visibilityMenuIsOpen=visibilityMenuIsOpen)
 
 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'}}}
-        else
-          span.fa.fa-lock.colorful
-          = " "
-          | {{{_ 'board-private-info'}}}
-        a.js-change-visibility {{_ 'change'}}.
-    input.primary.wide(type="submit" value="{{_ 'create'}}")
-    unless importDisabled
-      span.quiet
-        | {{_ 'or'}}
-        a.js-import-board {{_ 'import'}}
-    span.quiet
-      | /
-      a.js-board-template {{_ 'template'}}
+  +createBoardForm(visibility=visibility visibilityMenuIsOpen=visibilityMenuIsOpen)
 
 // New popup for Template Container creation; shares the same form content
 template(name="createTemplateContainerPopup")
-  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'}}}
-        else
-          span.fa.fa-lock.colorful
-          = " "
-          | {{{_ 'board-private-info'}}}
-        a.js-change-visibility {{_ 'change'}}.
-    input.primary.wide(type="submit" value="{{_ 'create'}}")
-    unless importDisabled
-      span.quiet
-        | {{_ 'or'}}
-        a.js-import-board {{_ 'import'}}
-    span.quiet
-      | /
-      a.js-board-template {{_ 'template'}}
+  +createBoardForm(visibility=visibility visibilityMenuIsOpen=visibilityMenuIsOpen)
 
 //template(name="listsortPopup")
 //
@@ -366,7 +314,7 @@ template(name="cardsSortPopup")
 //- always on screen - the same place the All Boards Lists/Table menu is.
 //-
 //- `unless currentBoard.isTemplatesBoard`: there is nothing to look at six
-//- ways on a templates board. docs/Design/Page/Header.md
+//- ways on a templates board. docs/Features/Page/Header.md
 //- Whether THIS board is starred, and the button that changes it. Its own
 //- template because the first header bar places it beside the starred-boards
 //- dropdown rather than among the board's other controls: the two are one pair -
@@ -374,7 +322,7 @@ template(name="cardsSortPopup")
 //-
 //- The outline star means not starred and the solid one means starred, so the
 //- button shows its state rather than the action - the tooltip says the action.
-//- docs/Design/Page/Header.md
+//- docs/Features/Page/Header.md
 template(name="boardStarButton")
   if currentBoard
     a.board-header-btn.js-star-board(class="{{#if isStarred}}is-active{{/if}}"
@@ -389,7 +337,7 @@ template(name="boardViewMenu")
       icons are six glyphs to learn, and a tooltip is the one place a name
       cannot be read without hovering - so the button says which view is on.
       The bar wraps to a second row when it runs out of width, which is what
-      makes a word beside the icon affordable. docs/Design/Page/Header.md
+      makes a word beside the icon affordable. docs/Features/Page/Header.md
     a.board-header-btn.js-toggle-board-view(title="{{boardViewName}}")
       i.fa.fa-caret-down
       if $eq boardView 'board-view-swimlanes'

client/components/boards/boardHeader.js

@@ -17,6 +17,7 @@ import {
 import { MultiSelection } from '/client/lib/multiSelection';
 import { getSidebarInstance } from '/client/features/sidebar/service';
 import { Utils } from '/client/lib/utils';
+import { toggleFold } from '/client/lib/foldState';
 
 /*
 const DOWNCLS = 'fa-sort-down';
@@ -53,7 +54,7 @@ Template.boardChangeTitlePopup.events({
     if (newTitle) {
       // The board this popup was opened FOR, when it was opened for one: the
       // All Boards Table view opens this same popup from a row whose data
-      // context is that row's board (docs/Design/Page/All-Boards.md), and on
+      // context is that row's board (docs/Features/Page/All-Boards.md), and on
       // that page there is no "current board" at all. The board header opens it
       // with the current board as its context, so that side is unchanged.
       const context = Template.currentData();
@@ -173,12 +174,23 @@ function toggleSidebarView(view, mustStayOpen) {
 }
 
 Template.boardHeaderButtons.events({
-  'click .js-edit-board-title': Popup.open('boardChangeTitle'),
+  // The board's controls fold into the caret at the start of the group. Named
+  // by the words the app already has for it - Collapse and Uncollapse - rather
+  // than a key of its own in 147 language files. client/lib/foldState.js
+  'click .js-toggle-fold'(event) {
+    event.preventDefault();
+    toggleFold(event.currentTarget.dataset.fold);
+  },
+  'keydown .js-toggle-fold'(event) {
+    if (event.key !== 'Enter' && event.key !== ' ') return;
+    event.preventDefault();
+    toggleFold(event.currentTarget.dataset.fold);
+  },
   'click .js-change-visibility': Popup.open('boardChangeVisibility'),
   'click .js-watch-board': Popup.open('boardChangeWatch'),
   // Boards in Archive is a SECTION of All Boards, not a page of its own: the
   // row in its left menu. `/archive` is the full-width page that section
-  // replaced. docs/Design/Page/Archive.md
+  // replaced. docs/Features/Page/Archive.md
   'click .js-open-archived-board'() {
     FlowRouter.go(allBoardsPath(SECTION_ARCHIVE, []));
   },
@@ -484,18 +496,38 @@ Template.boardChangeWatchPopup.helpers({
 
 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();
-        },
-      );
-    }
+    // `this` is the data context of the clicked row - the string from the
+    // enclosing {{#with "watching"}}. Blaze can hand that back as a boxed
+    // String, so read it through String() rather than refusing anything that is
+    // not typeof 'string'.
+    const level = this === null || this === undefined ? '' : String(this);
+    if (!level) return;
+    Meteor.call(
+      'watch',
+      'board',
+      Session.get('currentBoard'),
+      level,
+      (err, ret) => {
+        if (!err && ret) {
+          Popup.back();
+          return;
+        }
+        // AN ERROR MUST NOT BE SILENT. It was: the callback closed the popup on
+        // success and did nothing at all otherwise, so a refusal looked exactly
+        // like a broken button - "Silent does not respond. If we try to change
+        // it does not change. Nothing happens." (email, 2026-08-13). The server
+        // refuses for two reasons an admin can act on: the watch feature is
+        // turned off in the Admin Panel, and the board is not visible to this
+        // user.
+        const reason = err && (err.error || err.reason || err.message);
+        const message = reason === 'error-watch-disabled'
+          ? TAPi18n.__('error-watch-disabled')
+          : TAPi18n.__('error-board-notAMember');
+        // eslint-disable-next-line no-alert
+        if (typeof window !== 'undefined' && window.alert) window.alert(message);
+        if (process.env.DEBUG === 'true') console.error('watch failed:', err);
+      },
+    );
   },
 });
 
@@ -610,7 +642,7 @@ Template.cardsSortPopup.events({
 
 // The board's view menu is its own template in the FIRST header bar now, so its
 // handler is here rather than on the second bar that used to draw it.
-// docs/Design/Page/Header.md
+// docs/Features/Page/Header.md
 Template.boardViewMenu.events({
   'click .js-toggle-board-view': Popup.open('boardChangeView'),
 });
@@ -620,7 +652,7 @@ Template.boardViewMenu.helpers({
     return Utils.boardView();
   },
   // The tooltip: the name of the view that is ON. The button is icon only, so
-  // this is the only place the name appears. docs/Design/Page/Header.md
+  // this is the only place the name appears. docs/Features/Page/Header.md
   boardViewName() {
     const names = {
       'board-view-swimlanes': 'swimlanes',
@@ -634,8 +666,6 @@ Template.boardViewMenu.helpers({
   },
 });
 
-// The pencil is its own template in the first header bar, beside the board's
-// name, so its click is handled here. docs/Design/Page/Header.md
-Template.boardEditTitleButton.events({
-  'click .js-edit-board-title': Popup.open('boardChangeTitle'),
-});
+// The board is renamed by clicking its NAME in the first header bar, which is
+// handled where that bar is: client/components/main/header.js. The pencil that
+// used to be here is gone with the template it lived in.

client/components/boards/boardsList.css

@@ -45,7 +45,7 @@
   /* `auto`, not a fixed 260px: the menu carries its own width (below), so the
      track is whatever the menu is - and folded, when the grid drops to a single
      column, there is no second track left holding a gap open.
-     docs/Design/Page/Left-Menu.md */
+     docs/Features/Page/Left-Menu.md */
   grid-template-columns: auto 1fr;
   /* Between the columns only. A `gap` is between tracks, not around them, so
      this never insets the menu from the window edge - the padding that used to
@@ -64,12 +64,12 @@
   min-height: calc(100vh - var(--wekan-header-height, 0px));
   /* The width grip is positioned against the GRID: absolutely, so it is no grid
      item and adds no track, and outside the menu, which scrolls its own
-     entries. docs/Design/Page/Left-Menu.md */
+     entries. docs/Features/Page/Left-Menu.md */
   position: relative;
 }
 
 /* The left menu is styled like the Admin Panel's (settingBody.css,
-   docs/Design/Page/Left-Menu.md): a PANEL with its own background, border and
+   docs/Features/Page/Left-Menu.md): a PANEL with its own background, border and
    rounded corners, not a column separated from the page by a hairline. WeKan
    has one kind of left menu and it should look like one kind of left menu.
 
@@ -101,7 +101,7 @@
   /* Flush on three sides, like the Admin Panel's: it starts at the window's
      left edge, directly under the header, and runs to the bottom - so it has a
      border and a corner only on the side that faces the page. A rounded corner
-     on a flush edge shows the grey behind it. docs/Design/Page/Left-Menu.md */
+     on a flush edge shows the grey behind it. docs/Features/Page/Left-Menu.md */
   border: 1px solid #f0f0f0;
   border-inline-start: 0;
   border-top: 0;
@@ -154,7 +154,7 @@
   background: #ddd;
   padding: 2px 8px;
   border-radius: 12px;
-  font-size: 12px;
+  font-size: calc(12px * var(--wekan-ui-font-scale, 1));
   font-weight: bold;
   margin-inline-start: 8px;
 }
@@ -235,9 +235,9 @@
 .board-list .board-list-item-bookmark .bookmark-url {
   display: block;
   margin-top: 4px;
-  font-size: 12px;
+  font-size: calc(12px * var(--wekan-ui-font-scale, 1));
   font-weight: 400;
-  line-height: 16px;
+  line-height: calc(16px * var(--wekan-ui-font-scale, 1));
   opacity: 0.85;
   /* An address is one string and must not be hyphenated into something that
      reads like a different address. */
@@ -291,13 +291,13 @@
   border: 2px dashed #d0d0d0;
   border-radius: 4px;
   color: #808080;
-  font-size: 14px;
+  font-size: calc(14px * var(--wekan-ui-font-scale, 1));
   /* Nothing to grab: this is where a drag ENDS. */
   cursor: default;
   transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
 }
 .home-remove-target .fa {
-  font-size: 18px;
+  font-size: calc(18px * var(--wekan-ui-font-scale, 1));
 }
 /* Under the icon. The colour is the answer to "what happens if I let go", so it
    is the destructive one - and it is only ever shown while something is over
@@ -313,15 +313,26 @@
    pane says what to drag rather than showing nothing at all. Sized and spaced
    like a board tile so it sits where the first tile would.
    docs/Features/Board/Home.md */
+/* Home's "Drag only one board here to open it after login" placeholder.
+   It stands where a board tile will be, so it is the SIZE of a board tile:
+   114px like `.board-list .board-list-item` and `.js-add-board .label`, with
+   the dashed border folded into that height rather than added outside it. It
+   was 20px of padding around one line of text, which came to about 85px - a
+   short dashed box on a page whose whole content is that box, next to nothing
+   to compare it with except the tiles it is a placeholder FOR. */
 .board-list-item-empty {
-  display: block;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  min-height: 114px;
   width: 270px;
   padding: 20px;
   margin: 7px;
   border: 2px dashed #b3b3b3;
   border-radius: 4px;
   color: #808080;
-  font-size: 14px;
+  font-size: calc(14px * var(--wekan-ui-font-scale, 1));
   line-height: 1.4;
   text-align: center;
 }
@@ -366,7 +377,7 @@
   background: #888;
   /* The rows' own inline margin, so the rule lines up with them instead of
      running past their ends - the same `4px` the Admin Panel's separator uses.
-     docs/Design/Page/Left-Menu.md */
+     docs/Features/Page/Left-Menu.md */
   margin: 8px 4px;
 }
 
@@ -381,7 +392,7 @@
   padding-block: 8px 4px;
   padding-inline-start: 18px;
   padding-inline-end: 10px;
-  font-size: 12px;
+  font-size: calc(12px * var(--wekan-ui-font-scale, 1));
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 0.04em;
@@ -406,7 +417,7 @@
    whatever has been dragged into whatever.
    `padding-inline-start`, so a right-to-left language indents from the right by
    itself rather than needing a second rule kept in step.
-   docs/Design/Page/Workspaces.md */
+   docs/Features/Page/Workspaces.md */
 .workspace-tree {
   list-style: none;
   padding-inline-start: 10px;
@@ -435,7 +446,7 @@
   text-decoration: none;
   cursor: pointer;
   opacity: 0.7;
-  font-size: 12px;
+  font-size: calc(12px * var(--wekan-ui-font-scale, 1));
 }
 .workspace-collapse-indicator:hover {
   opacity: 1;
@@ -455,7 +466,7 @@
      drop-inside - the row lights up and the slot opens INDENTED under it, which
        is where the workspace will appear: as its child.
 
-   docs/Design/Page/Workspaces.md */
+   docs/Features/Page/Workspaces.md */
 .workspace-node.drop-before > .workspace-node-content,
 .workspace-node.drop-after > .workspace-node-content,
 .workspace-node.drop-inside > .workspace-node-content {
@@ -512,7 +523,7 @@
 .workspace-drag-handle {
   cursor: grab;
   color: #999;
-  font-size: 14px;
+  font-size: calc(14px * var(--wekan-ui-font-scale, 1));
   padding: 0 4px;
   user-select: none;
 }
@@ -537,7 +548,7 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  font-size: 16px;
+  font-size: calc(16px * var(--wekan-ui-font-scale, 1));
   line-height: 1;
   vertical-align: middle;
 }
@@ -556,7 +567,7 @@
    The cursor stays `pointer`, not `grab`: clicking this row is what opens the
    workspace, and that is what a reader does with it nearly every time. Dragging
    is the second gesture on the same element, exactly as it is on a board tile
-   with handles off. docs/Design/Page/All-Boards.md */
+   with handles off. docs/Features/Page/All-Boards.md */
 .workspace-node .js-select-space[draggable="true"] {
   user-select: none;
   -webkit-user-select: none;
@@ -592,12 +603,12 @@
    `flex: 1`, and without this a long workspace name shrinks its two neighbours
    instead of ellipsing itself, which pushes the count off the row that is
    supposed to be showing it. The phone rules said this already; the desktop
-   ones had not. docs/Design/Page/All-Boards.md */
+   ones had not. docs/Features/Page/All-Boards.md */
 .workspace-node .workspace-count {
   background: #ddd;
   padding: 2px 6px;
   border-radius: 10px;
-  font-size: 11px;
+  font-size: calc(11px * var(--wekan-ui-font-scale, 1));
   font-weight: bold;
   min-width: 20px;
   text-align: center;
@@ -613,7 +624,7 @@
   border-radius: 3px;
   cursor: pointer;
   text-decoration: none;
-  font-size: 14px;
+  font-size: calc(14px * var(--wekan-ui-font-scale, 1));
   opacity: 0.6;
   transition: opacity 0.2s;
 }
@@ -629,7 +640,7 @@
   border-radius: 3px;
   cursor: pointer;
   text-decoration: none;
-  font-size: 14px;
+  font-size: calc(14px * var(--wekan-ui-font-scale, 1));
   opacity: 0.7;
   transition: opacity 0.2s;
 }
@@ -703,7 +714,7 @@
    which boards are in it.
    So it keeps the same grey pill every other row has, and the rule that made it
    white is gone rather than re-tinted: there is no accent behind it to contrast
-   with. docs/Design/Page/All-Boards.md */
+   with. docs/Features/Page/All-Boards.md */
 
 .boards-right-grid {
   min-height: 200px;
@@ -724,7 +735,7 @@
    out of the grid, but the TRACK it was placed in stays, so the boards would
    have been left in the `auto` column with the 1fr one empty beside them. One
    column, and the menu hidden by the same rule.
-   docs/Design/Page/Left-Menu.md */
+   docs/Features/Page/Left-Menu.md */
 .boards-layout.collapsed {
   /* `!important` because the phone rules below set the two tracks with an
      `!important` of their own (#6488/#6523, so a narrow screen keeps the menu
@@ -747,7 +758,7 @@
    this the title would sit directly on top of the first row of board tiles.
    The board tiles carry a 7px margin of their own, so 12px of margin here plus
    that 7px is the same gap the Admin Panel's 12px gives above a flush pane.
-   docs/Design/Page/All-Boards.md */
+   docs/Features/Page/All-Boards.md */
 .boards-right-grid > .admin-pane-title {
   margin-bottom: 12px;
   /* The pager and the tiles below start at the tiles' own 7px inset, so the
@@ -766,15 +777,68 @@
   min-height: 45px;
 }
 
+/* THE CONTROLS THEMSELVES. Every page's controls template - Rules, My Cards,
+   Due Cards, Global Search - draws its entries as `.board-header-btn`, because
+   that is what they were when they lived in the page's own second header bar.
+   Every rule for that class is scoped to `#header-quick-access` (header.css),
+   so in here they had NO styling at all: three bare links jammed together on
+   one line, icons run into words, nothing to click but the text.
+
+   They are sidebar rows now - one per line, the width of the panel, with the
+   icon in a fixed column so every label starts at the same x. The board's own
+   sidebar rows are `.sidebar-list li > a` and `.sidebar-btn`; this gives the
+   same shape to the class these pages actually use. */
+.all-boards-sidebar .sidebar-content .board-header-btn,
+.page-sidebar .sidebar-content .board-header-btn {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  box-sizing: border-box;
+  margin: 0 0 4px;
+  padding: 8px 10px;
+  border-radius: 3px;
+  color: inherit;
+  cursor: pointer;
+}
+
+.all-boards-sidebar .sidebar-content .board-header-btn:hover,
+.page-sidebar .sidebar-content .board-header-btn:hover {
+  background: rgba(0, 0, 0, 0.06);
+}
+
+/* A fixed column for the icon, so a row with a caret and a row without one
+   still line their words up - the same reason the board sidebar gives its
+   checkbox glyphs a width. */
+.all-boards-sidebar .sidebar-content .board-header-btn i.fa,
+.page-sidebar .sidebar-content .board-header-btn i.fa {
+  width: 16px;
+  text-align: center;
+  flex-shrink: 0;
+  margin: 0;
+}
+
 /* The sidebar's own rows. `.sidebar-btn` and `.sidebar-list` come from the
    board sidebar's stylesheet, which is loaded on every page, so only what is
    particular to this one is here. */
 .all-boards-sidebar .sidebar-multiselection-hint {
   color: #666;
-  font-size: 13px;
+  font-size: calc(13px * var(--wekan-ui-font-scale, 1));
   margin: 8px 0;
 }
 
+/* Archive bulk-selection belongs to the board icons it changes, immediately
+   above them. It is visible only while Multi-Selection is on. */
+.board-multiselection-controls {
+  display: flex;
+  gap: 8px;
+  margin: 0 0 10px;
+}
+
+.board-multiselection-controls button {
+  margin: 0;
+}
+
 /* ── Where the All Boards sidebar sits, on a DESKTOP ────────────────────────
    It first inherited the board sidebar's `position: absolute`, which resolves
    against the nearest positioned ancestor. On a board that ancestor is the
@@ -887,9 +951,21 @@
   overflow: hidden;
   background-color: inherit; /* Inherit board color from parent li.js-board */
   color: #f6f6f6;
-  min-height: 72px; /* #6465: thinner tiles so more boards fit in the overview */
-  font-size: 16px;
-  line-height: 22px;
+  /* The number IS the rendered height, padding and border folded in - the same
+     thing the mobile rules below do for the same reason (#6523).
+     It used to be a 72px floor with 42px of padding added outside it, which came
+     to the same 114px for an ordinary tile and to 122px for a BORDERED one: the
+     bookmarks in All Boards / Starred and the Template Container tile both carry
+     `border: 4px solid #fff`, and on a content-box element those 8px are added
+     to the height rather than taken out of it. So a starred page sat 8px taller
+     than the board beside it and than the grey "+ Add Board" tile, and the row
+     it was in inherited the extra height.
+     114px is what an ordinary tile already rendered at (72 + 24 + 18), so
+     nothing moves except the bordered tiles, which now match. */
+  box-sizing: border-box;
+  min-height: 114px;
+  font-size: calc(16px * var(--wekan-ui-font-scale, 1));
+  line-height: calc(22px * var(--wekan-ui-font-scale, 1));
   border-radius: 0; /* No border-radius - parent .js-board has it */
   display: block;
   font-weight: 700;
@@ -908,7 +984,7 @@
   transform: translateX(-50%);
   z-index: 3;
   color: #fff;
-  font-size: 14px;
+  font-size: calc(14px * var(--wekan-ui-font-scale, 1));
   line-height: 1;
   text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
   pointer-events: none;
@@ -929,27 +1005,44 @@
 .board-list .board-list-item-sub-name {
   color: rgba(255,255,255,0.5);
   display: block;
-  font-size: 14px;
+  font-size: calc(14px * var(--wekan-ui-font-scale, 1));
   font-weight: 400;
-  line-height: 22px;
+  line-height: calc(22px * var(--wekan-ui-font-scale, 1));
 }
 .board-list .board-list-item-desc {
   color: #fff;
   display: block;
-  font-size: 14px;
+  font-size: calc(14px * var(--wekan-ui-font-scale, 1));
   font-weight: 400;
-  line-height: 18px;
+  line-height: calc(18px * var(--wekan-ui-font-scale, 1));
 }
+/* The "+ Add Board" tile is as tall as the boards beside it.
+   `min-height: 114px` is a FLOOR, not a height, and a board whose title wraps to
+   three lines - "WeKan ® Open Source Kanban board with MIT license" - grows past
+   it. The list is a grid, so every other tile in that row stretches to match;
+   the grey tile did not, because the colour of a board tile comes from the `li`
+   (which the grid stretches) while the grey comes from the `.label` INSIDE it,
+   which kept its own 114px. So the row was 146px of board and 114px of grey,
+   with the "+ Add Board" box hanging short at the bottom.
+   A flex `li` with a growing child gives the label the row's height, whatever
+   the tallest title in that row turns out to be. */
 .board-list .js-add-board {
   text-align: center;
+  display: flex;
+}
+.board-list .js-add-board > .label {
+  flex: 1 1 auto;
 }
 .board-list .js-add-board .label {
   font-weight: normal;
   /* Match the board tiles (#6465 thinner tiles) so the grey "+ Add Board" /
      "+ Add Template Container" box is the same height as a board icon:
      same min-height, padding and line-height as .board-list-item above. */
-  line-height: 22px;
-  min-height: 72px;
+  line-height: calc(22px * var(--wekan-ui-font-scale, 1));
+  /* Border-box and the full height, like .board-list-item above: the two are
+     compared by eye on the same row, so they are stated the same way. */
+  box-sizing: border-box;
+  min-height: 114px;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -978,9 +1071,9 @@
 .board-list .is-star-active,
 .board-list .is-not-star-active {
   top: 0;
-  font-size: 14px;
+  font-size: calc(14px * var(--wekan-ui-font-scale, 1));
   height: 18px;
-  line-height: 18px;
+  line-height: calc(18px * var(--wekan-ui-font-scale, 1));
   opacity: 0;
   padding: 9px 9px;
   position: absolute;
@@ -990,9 +1083,9 @@
 }
 .board-list .fa-circle {
   bottom: 0;
-  font-size: 10px;
+  font-size: calc(10px * var(--wekan-ui-font-scale, 1));
   height: 10px;
-  line-height: 10px;
+  line-height: calc(10px * var(--wekan-ui-font-scale, 1));
   padding: 9px 9px;
   position: absolute;
   inset-inline-end: 0;
@@ -1011,9 +1104,9 @@
 .board-list .fa-clone {
   position: absolute;
   bottom: 0;
-  font-size: 14px;
+  font-size: calc(14px * var(--wekan-ui-font-scale, 1));
   height: 18px;
-  line-height: 18px;
+  line-height: calc(18px * var(--wekan-ui-font-scale, 1));
   opacity: 0;
   inset-inline-end: 0;
   padding: 9px 9px;
@@ -1023,9 +1116,9 @@
 .board-list .fa-archive {
   position: absolute;
   bottom: 0;
-  font-size: 14px;
+  font-size: calc(14px * var(--wekan-ui-font-scale, 1));
   height: 18px;
-  line-height: 18px;
+  line-height: calc(18px * var(--wekan-ui-font-scale, 1));
   opacity: 0;
   inset-inline-start: 0;
   padding: 9px 9px;
@@ -1049,7 +1142,7 @@
 .board-list li:hover a .fa-clone:hover,
 .board-list li:hover a .fa-archive:hover,
 .board-list li:hover a .is-not-star-active:hover {
-  font-size: 18px;
+  font-size: calc(18px * var(--wekan-ui-font-scale, 1));
   opacity: 1;
 }
 .board-list li:hover a .is-star-active,
@@ -1067,7 +1160,7 @@
   top: 50%;
   inset-inline-end: 6px;
   transform: translateY(-50%);
-  font-size: 14px;
+  font-size: calc(14px * var(--wekan-ui-font-scale, 1));
   color: #fff;
   /* Transparent background so only the drag-handle icon shows (not a box). */
   background: transparent;
@@ -1136,7 +1229,7 @@
   font-family: FontAwesome;
   content: "\f00c";
   color: #fff;
-  font-size: 16px;
+  font-size: calc(16px * var(--wekan-ui-font-scale, 1));
   font-weight: bold;
 }
 
@@ -1183,7 +1276,7 @@
   justify-content: center;
 }
 .board-backgrounds-list .board-background-select .background-box i.fa-check {
-  font-size: 25px;
+  font-size: calc(25px * var(--wekan-ui-font-scale, 1));
   color: #3cb500;
 }
 /* Mobile view styles - applied when isMiniScreen is true (iPhone, etc.) */
@@ -1193,13 +1286,16 @@
      (e.g. a laptop in mobile mode) gets more columns instead of two stretched ones. */
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(min(46%, 200px), 1fr));
-  gap: 8px;
+  /* The same single spacing value as the phone grid above, in both directions. */
+  gap: 10px;
   /* #6488: sized by the column it lives in (the flex chain in the phone block
      below), not by the viewport minus a guess at the bars above it. */
   flex: 1 1 auto;
   min-height: 0;
   height: auto;
-  overflow-y: auto !important;
+  /* #6488: #content is the page's single vertical scroll owner. A nested
+     board-list scroller makes a phone swipe depend on where it starts. */
+  overflow-y: visible !important;
   overflow-x: hidden;
   padding: 0 0.5rem;
   margin: 0;
@@ -1210,7 +1306,8 @@
   width: auto; /* the grid controls the column width */
   float: none;
   display: block;
-  margin-bottom: 0.5rem;
+  /* The grid gap is the spacing; this added a second one, downwards only. */
+  margin-bottom: 0;
   /* NO handle reserve here. The drag handle is positioned INSIDE the tile, and
      the tile already keeps its text clear of it - so 32px here was a second,
      invisible reserve on top of that one. On a phone the tile is only ~97px
@@ -1246,7 +1343,7 @@
   top: 50%;
   transform: translateY(-50%);
   inset-inline-end: 6px;
-  font-size: 16px;
+  font-size: calc(16px * var(--wekan-ui-font-scale, 1));
   color: #fff;
   background: rgba(0,0,0,0.3);
   border-radius: 50%;
@@ -1340,18 +1437,42 @@
   .board-list {
     display: grid;
     grid-template-columns: repeat(2, minmax(0, 1fr));
-    gap: 8px;
+    /* ONE spacing value, in both directions. It used to be an 8px gap PLUS a
+       `margin-bottom: 0.5rem` on each li, so the tiles were 16px apart vertically
+       and 8px apart horizontally - which reads as "the icons are too close
+       together" side to side even though there is space between the rows. The
+       margin is gone (below) and the gap is the whole answer. */
+    gap: 10px;
     height: 100%;
-    overflow-y: auto;
+    overflow-y: visible !important;
     overflow-x: hidden;
     padding: 0 0.25rem;
     margin: 0;
+    /* #6488. Without these a grid's rows default to `align-content: stretch` and
+       its items to `align-items: stretch`, so when the list is SHORTER than the
+       column it is given - one or two rows of boards - the leftover height is
+       divided among the rows and each tile is grown to fill it. A board tile
+       paints its board colour over the whole cell, so a single row of boards
+       became one band several times the height of a normal icon: "some board
+       icons are 4x normal height or more".
+       This was fixed once, but only on `.board-list.mobile-view` - the class the
+       template sets from Utils.isMiniScreen(). A narrow WINDOW that is not a mini
+       screen (a desktop browser resized under 800px, a tablet in desktop mode)
+       matches this media query, becomes a grid here, and never got the fix. It
+       belongs on the rule that creates the grid. */
+    align-content: start;
+    align-items: start;
   }
   .board-list li {
     width: auto; /* the grid controls the column width */
     float: none;
     display: block;
-    margin-bottom: 0.5rem;
+    /* The grid gap spaces the tiles; a margin here spaced them a second time,
+       and only downwards. */
+    margin-bottom: 0;
+    /* ...and the tile is its own height, not the height of a stretched cell. */
+    align-self: start;
+    height: auto;
     /* Same as `.board-list.mobile-view li` above: the tile keeps its own text
        clear of the handle, so reserving the width a second time out here only
        narrowed the title. */
@@ -1426,7 +1547,7 @@
     top: 50%;
     transform: translateY(-50%);
     inset-inline-end: 6px;
-    font-size: 16px;
+    font-size: calc(16px * var(--wekan-ui-font-scale, 1));
     color: #fff;
     background: rgba(0,0,0,0.3);
     border-radius: 50%;
@@ -1462,7 +1583,7 @@
     top: 50%;
     transform: translateY(-50%);
     inset-inline-end: 6px;
-    font-size: 16px;
+    font-size: calc(16px * var(--wekan-ui-font-scale, 1));
     color: #fff;
     background: rgba(0,0,0,0.3);
     border-radius: 50%;
@@ -1523,7 +1644,7 @@
   border-radius: 4px;
   padding: 6px 12px;
   cursor: pointer;
-  font-size: 14px;
+  font-size: calc(14px * var(--wekan-ui-font-scale, 1));
   display: inline-flex;
   align-items: center;
   gap: 6px;
@@ -1535,7 +1656,7 @@
 }
 
 #resetBtn.filter-reset-btn .reset-icon {
-  font-size: 14px;
+  font-size: calc(14px * var(--wekan-ui-font-scale, 1));
 }
 
 .js-board {
@@ -1559,24 +1680,66 @@
   margin: 0 !important; /* grid gap spaces the tiles now (#6523) */
 }
 
-/* Apply board colors to li.js-board parent instead of just the link */
-.board-list .board-color-nephritis { background-color: #27ae60; }
-.board-list .board-color-pomegranate { background-color: #c0392b; }
-.board-list .board-color-belize { background-color: #2980b9; }
-.board-list .board-color-wisteria { background-color: #8e44ad; }
-.board-list .board-color-midnight { background-color: #2c3e50; }
-.board-list .board-color-pumpkin { background-color: #e67e22; }
-.board-list .board-color-moderatepink { background-color: #cd5a91; }
-.board-list .board-color-strongcyan { background-color: #00aecc; }
-.board-list .board-color-limegreen { background-color: #4bbf6b; }
-.board-list .board-color-dark { background-color: #2c3e51; }
-.board-list .board-color-relax { background-color: #27ae61; }
-.board-list .board-color-corteza { background-color: #568ba2; }
-.board-list .board-color-clearblue { background-color: #3498db; }
-.board-list .board-color-natural { background-color: #596557; }
-.board-list .board-color-modern { background-color: #2a80b8; }
-.board-list .board-color-moderndark { background-color: #2a2a2a; }
-.board-list .board-color-exodark { background-color: #222; }
+/* The board colour of a tile is painted by the THEME, not from here.
+   This used to be a hand-copied list of seventeen `.board-list
+   .board-color-<name> { background-color: ... }` lines, and a copied list is a
+   list that goes stale: the five colour SLIDE themes added later - clearpink,
+   cleargreen, clearorange, clearpurple, clearred - were never added to it, so
+   their tiles stayed the default #999 grey while the slide was drawn on the
+   inner link, which is inset by the tile's own padding. That is what a
+   clearpink board looked like in All Boards: a pink rectangle floating in a
+   grey tile. clearblue WAS in the list, as a flat #3498db, so it did not show
+   its slide either.
+   Each theme now paints `.board-list li.board-color-<name>` in
+   boardColors.css, beside everything else that theme colours, and a tile is
+   the whole tile. tests/boardTileTheme.test.cjs holds every theme to it. */
+
+/* Member Settings / Change color, beside "Default (no override)": "All Boards".
+   Every tile in the overview takes the THEME's lighter colour instead of the
+   colour its own board was given, so the page reads as one list rather than as a
+   palette - which is what #6593 asked for by making every tile white for
+   everybody, and this is the same thing as a per-user choice, because "the tile
+   colours are noise" and "the tile colours are how I find my board" are both
+   true, of different people.
+
+   THE ACCENT ITSELF, the same colour and the same white text as the selected row
+   in the left menu beside it - `.boards-left-menu .menu-item.active a` reads the
+   same variable. It was the accent under a flat white veil, one shade up, which
+   made the tiles a lighter version of the highlight they sit beside rather than
+   the same colour as it; two shades of one accent on one page read as two
+   colours, not as one page.
+   `--theme-accent-fill` rather than `--theme-accent`, and that is the whole
+   difference on a colour-SLIDE theme: the accent is ONE colour - the solid end
+   of the slide - so a tile painted from it came out flat beside a left-menu row
+   that slid. The fill is the theme's slide where it has one and its accent
+   where it does not (models/lib/themeAccents.js), which is what every other
+   themed control here reads.
+   It is the `background` SHORTHAND on purpose: a slide theme paints the tile
+   with a shorthand of its own, and setting only the colour would leave that
+   gradient sitting on top of the accent.
+
+   A board with a background IMAGE keeps its image: that is a picture somebody
+   chose, not a colour, and painting over it would be losing something rather
+   than calming it down. */
+body.has-theme-board-tiles .board-list > li.js-board {
+  background: var(--theme-accent-fill, var(--theme-accent, #2980b9));
+}
+body.has-theme-board-tiles .board-list > li.js-board .board-list-item:not(.has-background-image) {
+  background-color: transparent;
+  background-image: none;
+  color: #fff;
+}
+body.has-theme-board-tiles .board-list > li.js-board .board-list-item-name,
+body.has-theme-board-tiles .board-list > li.js-board .board-list-item-desc {
+  color: #fff;
+}
+/* The count pill keeps its contrast on the accent the same way the left menu's
+   does: a translucent white pill rather than the mid-grey that only works on
+   white. */
+body.has-theme-board-tiles .board-list > li.js-board .board-list-card-count {
+  background: rgba(255, 255, 255, 0.3);
+  color: #fff;
+}
 
 .minicard-members {
   padding: 6px 0 6px 8px;
@@ -1628,15 +1791,20 @@
      the middle of the bar. (The `height: 100vh` this replaced was landing on the
      bar too.) The page wrapper is inside #content; the header bar is not. */
   #content .wrapper {
-    overflow: hidden;
-    height: 100%;
+    /* #6488: #content is already the page's native vertical scroller. Keeping
+       another overflow boundary here made the board list depend on a chain of
+       percentage heights, and an invited board (whose Accept / Decline controls
+       make the tile taller) broke that chain. Let the page wrapper grow with
+       every tile; one swipe then always belongs to #content. */
+    overflow: visible;
+    height: auto;
     min-height: 0;
     display: flex;
     flex-direction: column;
   }
 
   #content .wrapper > .boards-layout {
-    flex: 1 1 auto;
+    flex: 0 0 auto;
     min-height: 0;
   }
 
@@ -1646,7 +1814,7 @@
   .boards-layout > .boards-left-menu,
   .boards-layout > .boards-right-grid {
     min-height: 0;
-    height: 100%;
+    height: auto;
   }
 
   .boards-right-grid {
@@ -1661,6 +1829,23 @@
     flex: 0 0 auto;
   }
 
+  /* ...and so does the pane's heading. Without this it is a flex item with the
+     default `flex-shrink: 1`, so in a column too short for its contents the
+     TITLE is what gets squeezed instead of the scroller below it growing a
+     scrollbar. */
+  .boards-right-grid > .admin-pane-title {
+    flex: 0 0 auto;
+  }
+
+  /* The right column has TWO branches: board icons and `+tablePage`. They obey
+     the same one-scroller contract: natural vertical height inside #content.
+     Horizontal overflow remains handled by tablePage's own table wrapper. */
+  .boards-right-grid > .table-page {
+    flex: 0 0 auto;
+    min-height: 0;
+    overflow: visible;
+  }
+
   /* The left menu (Starred / Templates / Remaining / Workspaces / Add board) is its
      own vertical scroll area, so when it is taller than the screen you can drag-scroll
      down to its lower items — the board icons already scroll in their own column on the
@@ -1668,38 +1853,25 @@
      inline borders mirror automatically, so in RTL the menu is on the right and the
      boards on the left. */
   .boards-left-menu {
-    overflow-y: auto;
+    overflow-y: visible;
     overflow-x: hidden;
-    -webkit-overflow-scrolling: touch;
-    /* Bounded by the layout above, not by a guess at how tall the bars are. */
-    height: 100%;
+    /* It grows with its rows. #content scrolls both columns together, so a
+       gesture never gets trapped between a menu scroller and a board scroller. */
+    height: auto;
     min-height: 0;
     max-height: none;
-    /* A vertical swipe here is a scroll of THIS menu: never a page scroll behind
-       it, and never a gesture the browser hands to something else. */
-    overscroll-behavior: contain;
-    touch-action: pan-y;
   }
 
-  .board-list {
-    overflow-y: auto !important;
+  .board-list,
+  .board-list.mobile-view {
+    /* One vertical scroller on the page: #content. In particular, do not clip
+       invited-board tiles whose buttons make them taller than an ordinary tile. */
+    overflow-y: visible !important;
     overflow-x: hidden !important;
-    -webkit-overflow-scrolling: touch;
-    scrollbar-width: thin;
-    scrollbar-color: #888 #f1f1f1;
-    /* #6488. The list is the part of the column that scrolls, and it ends where
-       the column ends - which is the bottom of the screen. It used to be
-       `calc(100dvh - 120px)`: a guess at everything above it (two header bars
-       plus a search header that is TWO rows on a phone, ~226px), so the box
-       reached about 100px below the screen. It scrolled internally, but its last
-       rows sat under the fold where no gesture could bring them - "you cannot
-       scroll the board list". No viewport arithmetic here at all now. */
-    flex: 1 1 auto;
+    flex: 0 0 auto;
     min-height: 0;
     height: auto;
     max-height: none;
-    overscroll-behavior: contain;
-    touch-action: pan-y;
   }
 
   /* Force scrollbar to always be visible */
@@ -1740,21 +1912,6 @@
        list scroll; forcing it 100vh tall would defeat that (see #6488). */
   }
 
-  /* Ensure only one scrollbar is visible */
-  /* The page is exactly the visible viewport, and nothing scrolls but the two
-     inner scrollers. `100dvh` is what is on screen right now; the `vh` line is
-     the fallback where `dvh` is unknown. Without a definite height here the
-     `height: 100%` chain below has nothing to resolve against. */
-  body {
-    overflow: hidden;
-    height: 100vh;
-    height: 100dvh;
-  }
-
-  #content {
-    overflow: hidden;
-  }
-
   /* Hide archive and clone board buttons in mobile view */
   .board-list .js-archive-board,
   .board-list .js-clone-board {
@@ -1829,8 +1986,8 @@
 
    `align-content: start` keeps rows at their content height instead of dividing
    the leftover space between them, and `align-items: start` stops each tile from
-   stretching to its row. The list still scrolls: its height comes from the flex
-   column it sits in, and `overflow-y: auto` makes it the scroll container. */
+   stretching to its row. On a phone the list grows naturally and #content is
+   the one vertical scroll container; this rule changes only grid alignment. */
 .board-list.mobile-view {
   align-content: start;
   align-items: start;
@@ -1910,6 +2067,37 @@
   min-height: 4rem;
 }
 
+/* #6488 follow-up: an invitation is not an ordinary one-line board tile. It
+   also contains "You are just invited to this board" and two touch-size action
+   buttons. The phone equal-tile rule above forced that whole control to 4rem;
+   `.js-board { overflow: hidden }` then clipped everything below the title.
+   Keep the 4rem floor, but let this explicitly marked tile grow around its
+   message and actions. This applies both to mobile mode (`.mobile-view`) and to
+   a narrow desktop-mode viewport (the media query below). */
+.board-list.mobile-view li.js-board.is-invited .board-list-item {
+  height: auto;
+  min-height: 4rem;
+}
+
+.board-list li.js-board.is-invited .board-list-item-desc {
+  margin: 4px 0 8px;
+}
+
+@media screen and (max-width: 800px),
+       screen and (max-device-width: 932px) and (-webkit-min-device-pixel-ratio: 3) {
+  .board-list li.js-board.is-invited .board-list-item,
+  .board-list.mobile-view li.js-board.is-invited .board-list-item {
+    height: auto;
+    min-height: 4rem;
+  }
+
+  .board-list li.js-board.is-invited button {
+    display: block;
+    width: 100%;
+    margin: 4px 0 0;
+  }
+}
+
 
 /* With drag handles OFF there is no handle on a board tile, so the title should
    use the width that was reserved for it. `:has()` keeps this to one rule
@@ -1977,10 +2165,10 @@
   }
   .workspace-node .workspace-drag-handle {
     padding: 0 2px;
-    font-size: 12px;
+    font-size: calc(12px * var(--wekan-ui-font-scale, 1));
   }
   .workspace-node .workspace-icon {
-    font-size: 14px;
+    font-size: calc(14px * var(--wekan-ui-font-scale, 1));
   }
   .workspace-node .js-open-workspace-menu {
     padding: 2px 4px;
@@ -1988,7 +2176,7 @@
   .workspace-node .workspace-count {
     min-width: 16px;
     padding: 2px 4px;
-    font-size: 10px;
+    font-size: calc(10px * var(--wekan-ui-font-scale, 1));
   }
 }
 
@@ -2005,7 +2193,7 @@
     min-width: 44px;
     min-height: 44px;
     padding: 8px;
-    font-size: 20px;
+    font-size: calc(20px * var(--wekan-ui-font-scale, 1));
     line-height: 1;
   }
 }
@@ -2042,7 +2230,7 @@
 }
 
 /* All Boards: the Table view.
- * Design: docs/Design/Page/All-Boards.md, which is docs/Design/Page/Table.md.
+ * Design: docs/Features/Page/All-Boards.md, which is docs/Features/Page/Table.md.
  * Only what is particular to these rows; the table itself is tablePage.css. */
 .all-boards-row {
   cursor: default;

client/components/boards/boardsList.jade

@@ -10,7 +10,7 @@ template(name="boardList")
       a 260px-wide nothing beside them. The grid drops to one column and hides
       the menu in the same rule. The Admin Panel marks its menu instead, because
       a flex row with a hidden item simply closes up.
-      docs/Design/Page/Left-Menu.md
+      docs/Features/Page/Left-Menu.md
     .boards-layout(class="{{#if isLeftMenuCollapsed}}collapsed{{/if}}")
       // Left menu
       .boards-left-menu
@@ -18,7 +18,7 @@ template(name="boardList")
           menus cannot end up with two different carets, and the same control a
           list has on a board. Folded, the menu is not drawn at all and the
           caret that brings it back rides on the pane title below.
-          docs/Design/Page/Left-Menu.md
+          docs/Features/Page/Left-Menu.md
         +leftMenuCollapse
         ul.menu
           //- ONE row, rendered four times, rather than four copies of the same
@@ -99,28 +99,32 @@ template(name="boardList")
         child of the GRID and not of the menu: it is positioned absolutely, so it
         is no grid item and adds no track, and it does not scroll away with a
         long list of workspaces the way a handle inside the menu would.
-        docs/Design/Page/Left-Menu.md
+        docs/Features/Page/Left-Menu.md
       +leftMenuResize
 
       // Right boards grid
       //- There is NO bar above the boards, and no second header bar either.
         Every control of this page - Sort, Search, Multi-Selection, the view
         menu and the actions on a selection - is in the right sidebar, and the
-        page is named by the FIRST header bar. docs/Design/Page/All-Boards.md
+        page is named by the FIRST header bar. docs/Features/Page/All-Boards.md
       .boards-right-grid
         //- The heading of the pane: which list of boards this is. It sits above
           the view branch, so it is drawn ONCE whichever view is on - the board
           icons and the Table are two ways of showing the same section, not two
           sections.
           The Admin Panel's own `paneTitle`, so the two pages have one heading
-          at one size and colour. docs/Design/Page/All-Boards.md
+          at one size and colour. docs/Features/Page/All-Boards.md
         +paneTitle(allBoardsPaneTitle)
+        if showsBoardSelectionControls
+          .board-multiselection-controls
+            button.primary.js-board-select-all(type="button") {{_ 'select-all'}}
+            button.primary.js-board-select-none(type="button") {{_ 'select-none'}}
         //- The Archive is a SECTION of this page, drawn here beside the left
           menu, not a page of its own that replaces it - and drawn with the same
           board ICONS every other section uses. It had a table of its own, which
           meant the one place you go to bring a board back was the one place
           multi-selection, dragging and the tile layout did not work.
-          docs/Design/Page/Archive.md
+          docs/Features/Page/Archive.md
         if isAllBoardsView 'table'
           +tablePage(tablePageData)
         else
@@ -192,7 +196,7 @@ template(name="boardList")
                   a.js-unstar-bookmark.bookmark-unstar(href="#", title="{{_ 'click-to-unstar-page'}}")
                     i.fa.fa-times
             each boards
-              li.js-board.nodragscroll(class="{{_id}} {{#if isStarred}}starred{{/if}} {{colorClass}} {{#if BoardMultiSelection.isSelected _id}}is-checked{{/if}}", draggable="true")
+              li.js-board.nodragscroll(class="{{_id}} {{#if isStarred}}starred{{/if}} {{colorClass}} {{#if isInvited}}is-invited{{/if}} {{#if BoardMultiSelection.isSelected _id}}is-checked{{/if}}", draggable="true")
                 if isInvited
                   .board-list-item
                     if BoardMultiSelection.isActive
@@ -238,9 +242,7 @@ template(name="boardList")
                             client/components/boards/boardsList.js
                           if isSelectedMenu 'archive'
                             p.board-list-item-archived-at
-                              span.emoji-icon
-                                i.fa.fa-archive
-                              |  {{_ 'archived-at'}}
+                              | {{_ 'archived-at'}}
                               = ' '
                               = archivedAtText
                           if hasSpentTimeCards
@@ -307,9 +309,7 @@ template(name="boardList")
                             client/components/boards/boardsList.js
                           if isSelectedMenu 'archive'
                             p.board-list-item-archived-at
-                              span.emoji-icon
-                                i.fa.fa-archive
-                              |  {{_ 'archived-at'}}
+                              | {{_ 'archived-at'}}
                               = ' '
                               = archivedAtText
                           if hasSpentTimeCards
@@ -413,7 +413,7 @@ template(name="workspaceTree")
           NOT the whole row either: the row also holds the ⋯ menu and the board
           count, and a drag started on those is a drag of something else.
           `dragstart` bubbles, so the handler stays on the row in both cases.
-          docs/Design/Page/All-Boards.md
+          docs/Features/Page/All-Boards.md
         li.workspace-node(class="{{#if $eq id ../selectedWorkspaceId}}active{{/if}}" data-workspace-id="{{id}}")
           .workspace-node-content
             //- The caret that folds this workspace's own workspaces away, at
@@ -424,7 +424,7 @@ template(name="workspaceTree")
               A workspace with no workspaces under it has nothing to fold, so it
               gets a spacer of the same width instead: a row that shifted
               sideways when it gained a child would be a moving target.
-              docs/Design/Page/Workspaces.md
+              docs/Features/Page/Workspaces.md
             if workspaceHasChildren
               a.workspace-collapse-indicator.js-collapse-workspace(
                 title="{{workspaceCollapseLabel}}"
@@ -467,7 +467,7 @@ template(name="workspaceTree")
             `..` counts block levels, and a second block between the `each` and
             this inclusion is another level for `../selectedWorkspaceId` to
             climb - which is how the highlight was lost once already.
-            docs/Design/Page/Workspaces.md
+            docs/Features/Page/Workspaces.md
           if workspaceShowsChildren
             +workspaceTree(nodes=children selectedWorkspaceId=../selectedWorkspaceId)
 
@@ -508,7 +508,7 @@ template(name="workspaceActionsPopup")
 //-
 //- It names the CURRENT view, not itself: the board header says "Swimlanes" or
 //- "Lists" rather than "Board View", and this matches it.
-//- docs/Design/Page/Header.md
+//- docs/Features/Page/Header.md
 //- The page's controls, as icons, in the first top header bar - left of the
 //- bell, exactly where a board's own controls are. They were rows inside the
 //- right sidebar's home view, which meant two clicks and a panel covering the
@@ -518,7 +518,7 @@ template(name="workspaceActionsPopup")
 //-
 //- Each names itself beside its icon where the bar has room, and the one rule
 //- in header.css drops every label below 1100px, leaving the tooltips.
-//- docs/Design/Page/All-Boards.md
+//- docs/Features/Page/All-Boards.md
 template(name="allBoardsHeaderButtons")
   a.board-header-btn.js-open-boards-sort(title="{{_ 'sort-boards'}}" class="{{#unless isBoardsSort 'custom'}}emphasis{{/unless}}")
     i.fa.fa-sort
@@ -526,12 +526,12 @@ template(name="allBoardsHeaderButtons")
   a.board-header-btn.js-all-boards-sidebar-search(title="{{_ 'search-boards'}}")
     i.fa.fa-search
     span.board-header-btn-label {{_ 'search-boards'}}
-  if canModifyBoards
+  if canMultiSelectBoards
     //- Says whether it is ON, and offers the way OFF - the same pair the
       board's own Multi-Selection has. It looked identical whether or not a
       selection was running, so the one control that changes what a click on a
       board does gave no sign it had changed it, and the only way out was to
-      find the row inside the sidebar. docs/Design/Page/Multi-Selection.md
+      find the row inside the sidebar. docs/Features/Page/Multi-Selection.md
     a.board-header-btn.js-all-boards-sidebar-multiselection(
         title="{{#if BoardMultiSelection.isActive}}{{_ 'multi-selection-on'}}{{else}}{{_ 'multi-selection'}}{{/if}}"
         class="{{#if BoardMultiSelection.isActive}}emphasis{{/if}}")

client/components/boards/boardsList.js

@@ -8,7 +8,7 @@ import getSlug from 'limax';
 // The archived-at line on a tile in the Archive, in the reader's own format.
 import { formatDateByUserPreference } from '/imports/lib/dateUtils';
 // The All Boards URLs, and the slug path of a workspace in the tree.
-// docs/Design/Page/All-Boards-URLs.md
+// docs/Features/Page/All-Boards-URLs.md
 import {
   ALL_BOARDS_SECTIONS,
   defaultSection,
@@ -16,6 +16,8 @@ import {
   workspaceIdForSlugPath,
   allBoardsPathForMenu,
   sectionTitleKey,
+  SECTION_ARCHIVE,
+  SECTION_REMAINING,
   SECTION_WORKSPACES,
 } from '/models/lib/allBoardsUrls';
 import TableVisibilityModeSettings from '/models/tableVisibilityModeSettings';
@@ -38,7 +40,7 @@ import { Utils } from '/client/lib/utils';
 import '/client/lib/dragDropTouch'; // touch -> HTML5 DnD so board icons drag by finger
 // What a drag does to the workspaces tree - move before, after, or INTO another
 // workspace - as pure functions, so the rules are testable without a browser.
-// docs/Design/Page/Workspaces.md
+// docs/Features/Page/Workspaces.md
 const {
   BEFORE: DROP_BEFORE,
   AFTER: DROP_AFTER,
@@ -54,7 +56,7 @@ import {
 } from '/models/lib/boardSortReorder';
 // The sidebar the Search and Multi-Selection controls open. Its state is module
 // scope, not a template instance: this bar and the sidebar are separate Blaze
-// instances. docs/Design/Page/Search.md, docs/Design/Page/Multi-Selection.md
+// instances. docs/Features/Page/Search.md, docs/Features/Page/Multi-Selection.md
 import {
   openAllBoardsSidebar,
   closeAllBoardsSidebar,
@@ -229,6 +231,9 @@ function homeBoardId() {
 // has to REFUSE the drop while it is still in the air, which means answering
 // before the drop happens. docs/Features/Board/Home.md
 const DRAG_FROM_HOME = 'application/x-board-from-home';
+const DRAG_FROM_REMAINING = 'application/x-board-from-remaining';
+const DRAG_FROM_WORKSPACE = 'application/x-board-from-workspace';
+const ARCHIVED_MULTI_BOARD_DRAG = 'application/x-archived-board-multi';
 
 // Reordering a bookmark carries its own type, so a bookmark and a board cannot
 // be dropped on each other. Readable in `dragover` for the same reason
@@ -274,6 +279,40 @@ function isDragFromHome(evt) {
   }
 }
 
+function isArchivedMultiBoardDrag(evt) {
+  try {
+    const types = evt.originalEvent.dataTransfer.types;
+    if (!types) return false;
+    return Array.prototype.indexOf.call(types, ARCHIVED_MULTI_BOARD_DRAG) !== -1;
+  } catch (e) {
+    return false;
+  }
+}
+
+function isDragFromRemaining(evt) {
+  try {
+    const types = evt.originalEvent.dataTransfer.types;
+    if (!types) return false;
+    return Array.prototype.indexOf.call(types, DRAG_FROM_REMAINING) !== -1;
+  } catch (e) {
+    return false;
+  }
+}
+
+function isDragFromWorkspace(evt) {
+  try {
+    const types = evt.originalEvent.dataTransfer.types;
+    if (!types) return false;
+    return Array.prototype.indexOf.call(types, DRAG_FROM_WORKSPACE) !== -1;
+  } catch (e) {
+    return false;
+  }
+}
+
+function isDragFromRemainingOrWorkspace(evt) {
+  return isDragFromRemaining(evt) || isDragFromWorkspace(evt);
+}
+
 function menuItemCountOf(type) {
   const currentUser = ReactiveCache.getCurrentUser();
   const assignments =
@@ -321,7 +360,7 @@ Template.boardList.helpers({
   },
   // Whether to move the boards left, out from under the right sidebar. The
   // sidebar is a separate Blaze instance, so the state is module scope - the
-  // page cannot read a ReactiveVar on it. docs/Design/Page/Search.md
+  // page cannot read a ReactiveVar on it. docs/Features/Page/Search.md
   isSidebarOpen() {
     return isAllBoardsSidebarOpen();
   },
@@ -342,11 +381,11 @@ Template.boardList.helpers({
 // map catches events from the templates rendered inside it, so these fire for
 // this bar's copy and the board header's map fires for its own. That is what
 // lets one piece of markup mean "search cards" on a board and "search boards"
-// here. docs/Design/Page/Search.md, docs/Design/Page/Multi-Selection.md
+// here. docs/Features/Page/Search.md, docs/Features/Page/Multi-Selection.md
 // Sort and the view menu, which were buttons in this page's second header bar
 // and are rows of the sidebar's home view now. A Blaze event map only sees
 // events inside its OWN template, so they had to move with their markup.
-// docs/Design/Page/All-Boards.md
+// docs/Features/Page/All-Boards.md
 Template.allBoardsHomeSidebar.events({
   // Titled "Sort Boards", from the key the app already has for that phrase -
   // the same reasoning as the starred-boards popup: a `boardsSortPopup-title`
@@ -379,7 +418,7 @@ Template.allBoardsHomeSidebar.helpers({
 // A Blaze event map only sees events inside its OWN template, so these are
 // their own map rather than shared with the sidebar's: the same
 // `js-all-boards-sidebar-search` markup exists in both places and each map
-// fires for its own copy. docs/Design/Page/All-Boards.md
+// fires for its own copy. docs/Features/Page/All-Boards.md
 Template.allBoardsHeaderButtons.helpers({
   // Every template registers the helpers IT uses. `BoardMultiSelection` is also
   // a helper of boardList, but a Blaze template cannot see a sibling's helpers -
@@ -398,7 +437,7 @@ Template.allBoardsHeaderButtons.helpers({
   },
   // Multi-Selection archives and duplicates boards, so somebody who may only
   // comment is not offered it.
-  canModifyBoards() {
+  canMultiSelectBoards() {
     const currentUser = ReactiveCache.getCurrentUser();
     return currentUser && !currentUser.isCommentOnly();
   },
@@ -431,6 +470,7 @@ Template.allBoardsHeaderButtons.events({
     evt.preventDefault();
     evt.stopPropagation();
     BoardMultiSelection.disable();
+    closeAllBoardsSidebar();
   },
 });
 
@@ -439,7 +479,7 @@ Template.boardList.events({});
 // Put the selected menu entry in the address bar. A section is its own name; a
 // workspace is the slugs of its names down the tree, so the URL says where you
 // are rather than carrying a random id. `go`, not `replace`, so Back returns to
-// the previous entry. docs/Design/Page/All-Boards-URLs.md
+// the previous entry. docs/Features/Page/All-Boards-URLs.md
 function goToAllBoards(tpl, menuValue) {
   const path = allBoardsPathForMenu(menuValue, tpl.workspacesTreeVar.get(), getSlug);
   if (path && FlowRouter.current().path !== path) FlowRouter.go(path);
@@ -448,7 +488,7 @@ function goToAllBoards(tpl, menuValue) {
 // The boards the page shows: the selected section, filtered by the search
 // field, sorted and paged. Extracted from the `boards` helper so the Table
 // view draws the SAME set - two copies of this would be two answers to
-// "which boards am I looking at". docs/Design/Page/All-Boards.md
+// "which boards am I looking at". docs/Features/Page/All-Boards.md
 // How many archived boards the section shows at once. The publication is
 // paginated and this is the page size it is asked for; the Archive is a place
 // you go to find one board, not a list to scroll for ever.
@@ -456,7 +496,7 @@ const ARCHIVED_BOARDS_LIMIT = 60;
 
 function boardsForView(tpl) {
   // The Archive shows ARCHIVED boards - the one section whose query is the
-  // opposite of every other one's. docs/Design/Page/Archive.md
+  // opposite of every other one's. docs/Features/Page/Archive.md
   const showsArchive = tpl.selectedMenu.get() === 'archive';
   let query = {
     $and: [
@@ -659,7 +699,7 @@ Template.boardList.onCreated(function () {
   // Shared with the right sidebar, which is a SEPARATE Blaze instance (it is
   // rendered beside the page, not inside it) and carries this page's controls. Assigned onto the instance so every `tpl.selectedMenu` /
   // `tpl.boardSearchVar` already written here keeps working unchanged.
-  // docs/Design/Page/All-Boards.md
+  // docs/Features/Page/All-Boards.md
   this.selectedMenu = allBoardsMenuVar;
   // Whatever the address named, else the section this user should land on:
   // Starred when anything is starred, Remaining when nothing is - opening on an
@@ -687,7 +727,7 @@ Template.boardList.onCreated(function () {
   // It runs whenever either changes, so a link followed while the page is
   // already open switches workspace, and a slug path that names nothing leaves
   // the Workspaces section selected rather than an empty board list.
-  // docs/Design/Page/All-Boards-URLs.md
+  // docs/Features/Page/All-Boards-URLs.md
   this.autorun(() => {
     const slugPath = Session.get('boardListWorkspacePath') || [];
     const tree = this.workspacesTreeVar.get();
@@ -719,6 +759,10 @@ Template.boardList.onCreated(function () {
     this.subscribe('archivedBoards', this.boardSearchVar.get() || '',
       ARCHIVED_BOARDS_LIMIT, 0);
   });
+  this.autorun(() => {
+    if (this.selectedMenu.get() !== 'templates' && !this.boardSearchVar.get()) return;
+    this.subscribe('boardTemplates');
+  });
   // The Table view's page. Client-side: the boards are already in minimongo for
   // the Lists view beside it, so paging them again on the server would be a round
   // trip for data the page is holding anyway.
@@ -754,7 +798,7 @@ Template.boardList.onCreated(function () {
   // A workspace was dropped: before, after, or INTO another one. The tree it
   // becomes is worked out by the pure module - the guards that keep a subtree
   // attached to the root live there, with their own tests - and this only saves
-  // the answer. docs/Design/Page/Workspaces.md
+  // the answer. docs/Features/Page/Workspaces.md
   this.moveWorkspaceInTree = (draggedId, targetId, position) => {
     const tree = this.workspacesTreeVar.get();
     // A drop that puts a workspace back where it already is writes the same tree
@@ -944,7 +988,7 @@ Template.boardList.helpers({
   // The Table view of the same boards the Lists view draws. Ten per page, the
   // shared TABLE_PAGE_ROWS_PER_PAGE, and a rowTemplate because the Edit cell is a
   // control and the row carries the board's colours.
-  // docs/Design/Page/All-Boards.md
+  // docs/Features/Page/All-Boards.md
   tablePageData() {
     const tpl = Template.instance();
     const all = boardsForView(tpl);
@@ -968,6 +1012,13 @@ Template.boardList.helpers({
   boards() {
     return boardsForView(Template.instance());
   },
+  showsBoardSelectionControls() {
+    const tpl = Template.instance();
+    const namedSection = ['remaining', 'starred', 'home', 'templates', 'archive']
+      .includes(tpl.selectedMenu.get());
+    const workspace = Boolean(tpl.selectedWorkspaceIdVar.get());
+    return (namedSection || workspace) && BoardMultiSelection.isActive();
+  },
   // #5174 / #4825: the board tiles' per-list card-count line and member avatar
   // row. Data comes from the one-shot getAllBoardsTileData method fetch in
   // onCreated (see there) — NOT from reactive getLists/getCards cursors, which
@@ -1099,7 +1150,7 @@ Template.boardList.helpers({
   // colour rather than two that drift apart. Its words are the section's own
   // title key - the same key the first header bar names the page with, and the
   // same one the highlighted menu row carries - so all three say the same
-  // thing. docs/Design/Page/All-Boards.md
+  // thing. docs/Features/Page/All-Boards.md
   //
   // `{ titleKey }` for a section, `{ label }` for a workspace: a workspace's
   // name is what somebody typed, and a workspace called "starred" is not the
@@ -1258,7 +1309,7 @@ Template.boardList.helpers({
 // it, or light the row up to say "into this one". The class is also what the
 // drop reads back: the pointer's position is worked out once, while the row is
 // showing it, rather than a second time from a drop event that may land a pixel
-// away from where the slot was drawn. docs/Design/Page/Workspaces.md
+// away from where the slot was drawn. docs/Features/Page/Workspaces.md
 const WORKSPACE_DROP_CLASSES = {
   [DROP_BEFORE]: 'drop-before',
   [DROP_INSIDE]: 'drop-inside',
@@ -1316,7 +1367,7 @@ Template.workspaceTree.helpers({
   // The caret, and what it says. `Template.currentData()` is the NODE inside the
   // `each`, which is what makes these read the row they are drawn on rather than
   // needing the id passed to each of them.
-  // docs/Design/Page/Workspaces.md
+  // docs/Features/Page/Workspaces.md
   workspaceHasChildren() {
     return hasChildren(Template.currentData());
   },
@@ -1562,6 +1613,7 @@ Template.boardList.events({
   // HTML5 DnD from boards to spaces
   // #5850: drag a (template) board onto an Org/Team/Domain target to share it.
   'dragover .js-share-target'(evt) {
+    if (isArchivedMultiBoardDrag(evt)) return;
     evt.preventDefault();
     if (evt.originalEvent.dataTransfer) {
       evt.originalEvent.dataTransfer.dropEffect = 'copy';
@@ -1572,6 +1624,7 @@ Template.boardList.events({
     evt.currentTarget.classList.remove('board-drag-hint');
   },
   'drop .js-share-target'(evt) {
+    if (isArchivedMultiBoardDrag(evt)) return;
     evt.preventDefault();
     evt.stopPropagation();
     const target = evt.currentTarget;
@@ -1622,6 +1675,32 @@ Template.boardList.events({
       return;
     }
 
+    if (tpl && tpl.selectedMenu && tpl.selectedMenu.get() === SECTION_REMAINING) {
+      try {
+        evt.originalEvent.dataTransfer.setData(DRAG_FROM_REMAINING, '1');
+      } catch (e) {}
+    }
+    if (
+      tpl && tpl.selectedWorkspaceIdVar
+      && tpl.selectedWorkspaceIdVar.get()
+    ) {
+      try {
+        evt.originalEvent.dataTransfer.setData(DRAG_FROM_WORKSPACE, '1');
+      } catch (e) {}
+    }
+
+    // While Multi-Selection is on in Archive, every board drag is a restore
+    // gesture. Mark even an unselected tile dragged on its own, so Home cannot
+    // become an accidental target merely because that tile was not checked.
+    if (
+      tpl && tpl.selectedMenu && tpl.selectedMenu.get() === SECTION_ARCHIVE
+      && BoardMultiSelection.isActive()
+    ) {
+      try {
+        evt.originalEvent.dataTransfer.setData(ARCHIVED_MULTI_BOARD_DRAG, '1');
+      } catch (e) {}
+    }
+
     // Support multi-drag
     if (
       BoardMultiSelection.isActive() &&
@@ -1667,11 +1746,23 @@ Template.boardList.events({
       el.classList.add('board-drag-hint');
     });
     document.querySelectorAll('.js-select-menu').forEach((el) => {
-      // Remaining takes a board out of a workspace and Home makes it the board
-      // that opens after login: both are places this drag can end, so both say
-      // so while it is in the air.
+      // An archived multi-selection may be restored to Remaining or an
+      // existing Workspace, but cannot become Home. Other live-board drags can
+      // still use both Remaining and Home.
       const type = el.getAttribute('data-type');
-      if (type === 'remaining' || type === 'home') {
+      const archivedMulti =
+        tpl && tpl.selectedMenu && tpl.selectedMenu.get() === SECTION_ARCHIVE
+        && BoardMultiSelection.isActive();
+      const fromRemaining =
+        tpl && tpl.selectedMenu && tpl.selectedMenu.get() === SECTION_REMAINING;
+      const fromWorkspace =
+        tpl && tpl.selectedWorkspaceIdVar && tpl.selectedWorkspaceIdVar.get();
+      if (
+        type === 'remaining'
+        || (!archivedMulti && type === 'home')
+        || ((fromRemaining || fromWorkspace) &&
+          (type === 'starred' || type === 'archive'))
+      ) {
         el.classList.add('board-drag-hint');
       }
     });
@@ -1807,8 +1898,10 @@ Template.boardList.events({
     evt.preventDefault();
     if (BoardMultiSelection.isActive()) {
       BoardMultiSelection.disable();
+      closeAllBoardsSidebar();
     } else {
       BoardMultiSelection.activate();
+      openAllBoardsSidebar(SIDEBAR_MULTISELECTION);
     }
   },
   'click .js-multiselection-reset'(evt) {
@@ -1818,6 +1911,7 @@ Template.boardList.events({
     // would otherwise immediately re-activate what we just disabled.
     evt.stopPropagation();
     BoardMultiSelection.disable();
+    closeAllBoardsSidebar();
   },
   'click .js-toggle-board-multi-selection'(evt) {
     evt.preventDefault();
@@ -1825,6 +1919,17 @@ Template.boardList.events({
     const boardId = this._id;
     BoardMultiSelection.toogle(boardId);
   },
+  'click .js-board-select-all'(evt, tpl) {
+    evt.preventDefault();
+    // `boardsForView` is the exact list of icons being drawn: the section and
+    // search have already narrowed it. Do not silently select a board that is
+    // not visible on this page.
+    BoardMultiSelection.add(boardsForView(tpl).map(board => board._id));
+  },
+  'click .js-board-select-none'(evt) {
+    evt.preventDefault();
+    BoardMultiSelection.reset();
+  },
   'click #resetBtn'(event) {
     let allBoards = document.getElementsByClassName('js-board');
     let currBoard;
@@ -1907,7 +2012,7 @@ Template.boardList.events({
     // the drop handler below reads as "a board was dropped here", so the drop
     // did nothing and the row snapped back. Handles ON started the drag from a
     // span, which carries no text, which is why the same drop worked there.
-    // docs/Design/Page/Workspaces.md
+    // docs/Features/Page/Workspaces.md
     if (typeof dt.clearData === 'function') dt.clearData();
     dt.setData('application/x-workspace-id', workspaceId);
 
@@ -2005,6 +2110,8 @@ Template.boardList.events({
       try {
         const boardIds = JSON.parse(boardData);
         boardIds.forEach((boardId) => {
+          const board = ReactiveCache.getBoard(boardId);
+          if (board && board.archived) Meteor.call('restoreBoard', boardId);
           Meteor.call('assignBoardToWorkspace', boardId, targetWorkspaceId);
         });
       } catch (e) {
@@ -2012,6 +2119,8 @@ Template.boardList.events({
       }
     } else {
       // Single board drag
+      const board = ReactiveCache.getBoard(boardData);
+      if (board && board.archived) Meteor.call('restoreBoard', boardData);
       Meteor.call('assignBoardToWorkspace', boardData, targetWorkspaceId);
     }
   },
@@ -2021,15 +2130,19 @@ Template.boardList.events({
     // so the cursor says no while the board is still in the air rather than the
     // drop landing and quietly doing nothing. docs/Features/Board/Home.md
     if (isDragFromHome(evt)) return;
+    const menuType = evt.currentTarget.getAttribute('data-type');
+    // Remaining accepts board drags generally. Starred additionally accepts a
+    // board from Remaining or an existing Workspace. Home and Archive have
+    // their own handlers.
+    if (
+      menuType !== 'remaining'
+      && !(menuType === 'starred' && isDragFromRemainingOrWorkspace(evt))
+    ) return;
     evt.preventDefault();
     evt.stopPropagation();
 
-    const menuType = evt.currentTarget.getAttribute('data-type');
-    // Only allow drop on "remaining" menu to unassign boards from spaces
-    if (menuType === 'remaining') {
-      evt.originalEvent.dataTransfer.dropEffect = 'move';
-      evt.currentTarget.classList.add('drag-over');
-    }
+    evt.originalEvent.dataTransfer.dropEffect = 'move';
+    evt.currentTarget.classList.add('drag-over');
   },
   'dragleave .js-select-menu'(evt) {
     evt.currentTarget.classList.remove('drag-over');
@@ -2045,6 +2158,7 @@ Template.boardList.events({
   // being dragged.
   'dragover .js-open-archived-board'(evt) {
     if (isDragFromHome(evt)) return;
+    if (isArchivedMultiBoardDrag(evt)) return;
     evt.preventDefault();
     evt.stopPropagation();
     evt.originalEvent.dataTransfer.dropEffect = 'move';
@@ -2055,6 +2169,7 @@ Template.boardList.events({
   },
   'drop .js-open-archived-board'(evt) {
     if (isDragFromHome(evt)) return;
+    if (isArchivedMultiBoardDrag(evt)) return;
     evt.preventDefault();
     evt.stopPropagation();
     evt.currentTarget.classList.remove('drag-over');
@@ -2220,6 +2335,7 @@ Template.boardList.events({
   // out of the Home section - and clicking the row's Multi-Selection toggle
   // still toggles. docs/Features/Board/Home.md
   'dragover .js-home-menu'(evt) {
+    if (isArchivedMultiBoardDrag(evt)) return;
     evt.preventDefault();
     evt.stopPropagation();
     evt.originalEvent.dataTransfer.dropEffect = 'link';
@@ -2229,6 +2345,7 @@ Template.boardList.events({
     evt.currentTarget.classList.remove('drag-over');
   },
   'drop .js-home-menu'(evt) {
+    if (isArchivedMultiBoardDrag(evt)) return;
     evt.preventDefault();
     evt.stopPropagation();
     evt.currentTarget.classList.remove('drag-over');
@@ -2247,13 +2364,14 @@ Template.boardList.events({
         return;
       }
     }
-    if (!boardIds.length) return;
+    if (boardIds.length !== 1) {
+      alert(TAPi18n.__('select-only-one-board'));
+      return;
+    }
 
-    // One board opens after login, so a multi-selection dropped here sets the
-    // FIRST of them - the same one the Multi-Selection sidebar's own Home row
-    // sets - rather than doing nothing or silently keeping the last. The
-    // selection is dropped afterwards, so it cannot look as though all of them
-    // went somewhere.
+    // Login can open one Home board. A multi-selection therefore cannot
+    // silently choose its first id; it has to be narrowed to one before this
+    // drop can change anything.
     Meteor.call('setDefaultBoard', boardIds[0], (err) => {
       if (err) alert(err?.reason || err?.message || 'Failed to set Home board');
     });
@@ -2289,6 +2407,17 @@ Template.boardList.events({
       }
     }
 
+    if (menuType === 'starred') {
+      if (!isDragFromRemainingOrWorkspace(evt)) return;
+      const user = ReactiveCache.getCurrentUser();
+      boardIds.forEach((boardId) => {
+        if (!user || !user.hasStarred(boardId)) {
+          Meteor.call('toggleBoardStar', boardId);
+        }
+      });
+      return;
+    }
+
     // Everything below is what a drop on REMAINING means.
     if (menuType !== 'remaining') return;
 
@@ -2409,7 +2538,7 @@ Template.workspaceActionsPopup.onRendered(function() {
 
 
 // The All Boards view menu, in the FIRST header bar. Its handler and the helper
-// that draws it follow it out of the sidebar. docs/Design/Page/Header.md
+// that draws it follow it out of the sidebar. docs/Features/Page/Header.md
 Template.allBoardsViewMenu.events({
   // Titled, so it has a header with the close ✕ in it - the same popup the
   // BOARD's view menu opens, and it is the same question: which view of this

client/components/boards/dependencyOverlay.css

@@ -68,16 +68,29 @@
 /* #3392: card detail "Dependencies" rows */
 .card-details-dependencies-list .card-dependency {
   display: flex;
-  align-items: center;
+  /* The title WRAPS now, so the row can be two or three lines tall. Centring
+     the icon and the controls against that block would float them halfway down
+     it; they belong beside the first line. */
+  align-items: flex-start;
   gap: 6px;
   margin-bottom: 4px;
 }
 
 .card-details-dependencies-list .card-dependency-link {
   flex: 1 1 auto;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  /* A card's title is a sentence, and the card details pane is narrow. It used
+     to be one line with an ellipsis, so everything past the width of the pane -
+     which is most of a real title, sitting right of the coloured icon - could
+     not be read at all. There is no reason to hide it: the row can be tall.
+     `min-width: 0` is what makes that work. A flex item's default is
+     `min-width: auto`, which refuses to shrink below its content, so the text
+     overflowed the row instead of wrapping inside it - and no amount of
+     `white-space: normal` alone would have fixed that. */
+  min-width: 0;
+  white-space: normal;
+  /* A title can be a URL or an id with no spaces in it; break inside the word
+     rather than let one long token push the controls off the row. */
+  overflow-wrap: anywhere;
 }
 
 .card-details-dependencies-list .js-dependency-type {

client/components/boards/exportScope.jade

@@ -0,0 +1,111 @@
+//- The checkbox list - WHAT an export includes, and what an import brings in.
+  Its own template so the board popup can borrow it into a pane of its own
+  layout while the swimlane, list and card popups get it inside the pane
+  exportScopeBody builds for them, with no copy of the markup in either place.
+  The helpers are registered on BOTH templates from one object (exportScope.js);
+  the click handlers stay on exportScopeBody, because an event from here bubbles
+  to the template that includes it.
+//- EACH ROW CARRIES ITS OWN CHECKBOX - `.materialCheckBox`, the one Admin
+  Panel / Settings / Announcement uses for "Active System-Wide Announcement",
+  and the one every checkbox in the Admin Panel uses. A reader has seen it
+  before, and it says "on" and "off" at a glance.
+  It used to be an unconditional `i.fa.fa-check` on a `li.active`, which is a
+  DIFFERENT convention: popup.css hides that tick and shows it only for an
+  active row - but its selector is `.pop-over-list .pop-over-list.checkable
+  .fa-check`, so it needs a NESTED list carrying `checkable`, and this list was
+  neither. The tick was therefore never hidden and `active` was never styled, so
+  every row looked ticked whatever it was and clicking one changed nothing on
+  screen. Reported as \#6586 comment 5308548585, "I can't select/deselect those
+  arrows here".
+  A checkbox that carries its own state needs no ancestor to be right, which is
+  why it is this rather than the missing class.
+template(name="exportScopeSelect")
+  p.quiet {{_ 'export-select-what-to-include'}}
+  ul.pop-over-list.export-scope-select
+    li
+      a.flex.js-export-card-details-toggle(href="#" role="checkbox" aria-checked="{{#if cardDetailsChecked}}true{{else}}false{{/if}}")
+        .materialCheckBox(class="{{#if cardDetailsChecked}}is-checked{{/if}}")
+        span {{_ 'export-card-details'}}
+    each exportFields
+      li
+        a.flex.js-export-field-toggle(data-field="{{field}}" href="#" role="checkbox" aria-checked="{{#if checked}}true{{else}}false{{/if}}")
+          .materialCheckBox(class="{{#if checked}}is-checked{{/if}}")
+          span {{_ label}}
+
+//- The body of an export popup - ALL of them (#1173). What to include in one
+  pane and what to export it to in the other, side by side when the window has
+  room and stacked when it does not.
+  It was two menus: the board popup wrote nineteen formats of its own in
+  sidebar.jade under four subheadings, and the swimlane, list and card popups
+  wrote five here in one narrow column - so "the export popup" looked like two
+  different features depending on which menu opened it, and a format added to
+  one was missing from the other. The formats are one table now
+  (EXPORT_FORMAT_GROUPS, exportScope.js); each entry says which scopes it
+  applies to and whether it is a link or an action, and this lays them out.
+template(name="exportScopeBody")
+  .export-board-panes
+    .export-board-pane.export-board-pane-select
+      +exportScopeSelect
+    .export-board-pane.export-board-pane-formats
+      if isImportMode
+        //- #1173: the same popup, the other direction. The checkboxes in the
+          other pane say what goes OUT of an export and what comes IN from an
+          import - one selection, so "no comments" means the same thing
+          whichever way the file is moving.
+          Asked HERE as well as on the menu row that opens it: the row is hidden
+          from a reader who may not write, and a popup that trusts its caller is
+          a popup that offers the file chooser the first time somebody reaches
+          it another way.
+        if canImport
+          p.quiet {{_ 'import-here-instruction'}}
+          ul.pop-over-list
+            li
+              label.js-import-file-label
+                i.fa.fa-download
+                | {{_ 'import'}} / JSON, .zip
+                input.js-import-file(type="file" accept=".json,application/json,.zip,application/zip" hidden)
+          if importBusy
+            p.quiet {{_ 'importing'}}
+          if importError
+            .warning {{_ importError}}
+          if importDone
+            p.quiet {{_ 'import-done'}} {{importDone}}
+      else
+        each formatGroups
+          if heading
+            hr
+            h4.pop-over-list-subheading {{heading}}
+          ul.pop-over-list
+            each entries
+              li
+                if action
+                  a(class="{{action}}")
+                    i.fa(class="{{icon}}")
+                    | {{label}}
+                else
+                  //- The server supplies the localized, scope-aware filename.
+                  a(href="{{url}}" download)
+                    i.fa(class="{{icon}}")
+                    | {{label}}
+
+template(name="exportSwimlanePopup")
+  +exportScopeBody(swimlaneId=_id title=title)
+
+template(name="exportListPopup")
+  +exportScopeBody(listId=_id title=title)
+
+template(name="exportChecklistPopup")
+  +exportScopeBody(checklistId=_id title=title)
+
+//- The IMPORT half of each menu. Same body, same table, same selection - the
+  mode decides whether the second pane offers the formats to write out or the
+  file to read in. A menu says what it is about, so its two rows are named
+  "Export" and "Import" and nothing more.
+template(name="importSwimlanePopup")
+  +exportScopeBody(swimlaneId=_id title=title mode="import")
+
+template(name="importListPopup")
+  +exportScopeBody(listId=_id title=title mode="import")
+
+template(name="importCardPopup")
+  +exportScopeBody(cardId=_id listId=listId title=title mode="import")

client/components/boards/exportScope.js

@@ -0,0 +1,457 @@
+// ITS OWN TEMPLATE FIRST. This module is imported by sidebar.js, by
+// cardDetails.js and by the import page, and any of them can be evaluated
+// before client/features/boards.js gets to the .jade - at which point
+// `Template.exportScopeBody` is undefined and `.helpers()` on it throws at
+// module scope. That does not break this popup, it breaks THE WHOLE BUNDLE:
+// evaluation stops, every template registered after it never registers, and
+// the sign-in page comes up with "no template passwordInput found".
+//
+// A component whose .js is imported by other components cannot rely on the
+// central import order in client/features/*.js. Importing the template here
+// makes the order a fact rather than a hope; the module cache means the second
+// import costs nothing.
+import './exportScope.jade';
+import { ReactiveDict } from 'meteor/reactive-dict';
+import { Template } from 'meteor/templating';
+import { FlowRouter } from 'meteor/ostrio:flow-router-extra';
+import { Meteor } from 'meteor/meteor';
+import { Session } from 'meteor/session';
+import { ReactiveCache } from '/imports/reactiveCache';
+import { TAPi18n } from '/imports/i18n';
+import { Accounts } from 'meteor/accounts-base';
+import { BOARD_EXPORT_FIELDS } from '/models/lib/exportFields';
+import { exportLocaleParams } from '/client/lib/exportLocale';
+
+// The "what do you want in it" half of an export, for a board, a swimlane or a
+// list (#1173 "Add Feature: Print Board with Params").
+//
+// One body, used by three popups. A board export, a swimlane export and a list
+// export differ by ONE query parameter - which cards are in scope - so writing
+// the checkbox list and the two download links three times would be three places
+// for a section to go missing from. `exportScopeBody` is included by each popup
+// with its own scope, and everything else is shared.
+//
+// The SELECTION is shared too, and deliberately: it is module-level, so ticking
+// "no attachments, no comments" once applies to the next export as well, in the
+// same session. Somebody printing a board rarely wants a different shape for
+// each list of it.
+
+const selection = new ReactiveDict();
+BOARD_EXPORT_FIELDS.forEach(({ field }) => selection.set(field, true));
+
+// `card-details` is what makes an export the card layout rather than the
+// spreadsheet table; it starts on, like everything else.
+selection.set('card-details', true);
+
+function selectedFields() {
+  return ['card-details', ...BOARD_EXPORT_FIELDS.map(({ field }) => field)]
+    .filter((field, index, all) => all.indexOf(field) === index)
+    .filter(field => selection.get(field));
+}
+
+// The scope a popup was opened with: {} for a board, {swimlaneId} or {listId}
+// for the other two.
+function currentScope() {
+  const data = Template.currentData() || {};
+  const scope = {};
+  if (data.swimlaneId) scope.swimlaneId = data.swimlaneId;
+  if (data.listId) scope.listId = data.listId;
+  return scope;
+}
+
+// ONE url builder for every format and every scope. A second one would be a
+// second place for a query parameter to go missing from - which is how the card
+// popup's checkboxes ended up driving the Excel download and not the PDF.
+// A CARD has export routes of its own - /lists/:listId/cards/:cardId/exportPDF
+// and exportExcel - which produce the one card rather than a board document with
+// one card in it. They are the same renderers underneath, so the popup uses them
+// when it is a card being exported and the board routes otherwise, instead of
+// there being two ways to ask for the same file.
+function routeFor(path) {
+  const data = Template.currentData() || {};
+  if (!data.cardId || !data.listId) return path;
+  if (path.endsWith('exportPDF')) {
+    return '/api/boards/:boardId/lists/:listId/cards/:cardId/exportPDF';
+  }
+  if (path.endsWith('exportExcel')) {
+    return '/api/boards/:boardId/lists/:listId/cards/:cardId/exportExcel';
+  }
+  return path;
+}
+
+function exportUrl(path, extra = {}) {
+  const boardId = Session.get('currentBoard');
+  const data = Template.currentData() || {};
+  const route = routeFor(path);
+  const params = { boardId };
+  if (route.includes(':listId')) params.listId = data.listId;
+  if (route.includes(':cardId')) params.cardId = data.cardId;
+  return FlowRouter.path(route, params, {
+    authToken: Accounts._storedLoginToken(),
+    fields: selectedFields().join(','),
+    ...currentScope(),
+    ...exportLocaleParams(),
+    ...extra,
+  });
+}
+
+// The import half's state. Module-level like the selection, because the popup is
+// destroyed and recreated as it is reopened and a half-finished import should
+// still be able to say how it went.
+const importState = new ReactiveDict();
+importState.set('busy', false);
+importState.set('error', '');
+importState.set('done', '');
+
+// A WeKan export is either the document itself or a .zip with the document
+// inside it. Reading the .zip in the BROWSER is what keeps the server out of it:
+// the method takes the same object either way, so there is one import path and
+// not two.
+async function readExportFile(file) {
+  const name = String(file.name || '').toLowerCase();
+  if (!name.endsWith('.zip')) {
+    // A .json already carries its attachments as base64 under `file`, which is
+    // what the importer reads.
+    return JSON.parse(await file.text());
+  }
+
+  const JSZip = (await import('jszip')).default;
+  const zip = await JSZip.loadAsync(file);
+  const entry = zip.file('wekan.json') || zip.file(/wekan\.json$/)[0];
+  if (!entry) throw new Error('import-not-wekan-export');
+  const doc = JSON.parse(await entry.async('string'));
+
+  // The FILES beside the document. The export writes them as
+  // `attachments/<attachmentId>-<name>`, and the id is what ties a file back to
+  // its metadata row - two attachments called "photo.png" are two entries.
+  //
+  // They go onto the SAME `file` field a .json export uses, so the server has
+  // one import path rather than one per container. That is also the tradeoff to
+  // know about: the archive is unpacked in the browser and sent as base64, so a
+  // .zip full of large attachments costs memory on the way in. It is the shape
+  // the board import has always used, and the reason to reach for a .zip is
+  // still the same - the JSON of a board with many attachments may be too large
+  // for one string, while its archive is not.
+  const byId = new Map(
+    (Array.isArray(doc.attachments) ? doc.attachments : [])
+      .filter(attachment => attachment && attachment._id)
+      .map(attachment => [attachment._id, attachment]),
+  );
+  const files = zip.file(/^attachments\//);
+  for (const archived of files || []) {
+    const base = archived.name.slice('attachments/'.length);
+    const dash = base.indexOf('-');
+    const attachmentId = dash === -1 ? base : base.slice(0, dash);
+    const attachment = byId.get(attachmentId);
+    // A file whose row is not in the document is one the selection left out, or
+    // a hand-made archive: skipping it is better than inventing a row for it.
+    if (!attachment) continue;
+    attachment.file = await archived.async('base64');
+  }
+  return doc;
+}
+
+// A .json is small enough to travel as a document: it is parsed here and sent
+// over DDP, which is the path the per-menu import has always used.
+function importJsonDocument(doc, target) {
+  return new Promise((resolve, reject) => {
+    Meteor.call('importScoped', target, doc, selectedFields(),
+      (err, res) => (err ? reject(err) : resolve(res)));
+  });
+}
+
+// POST the archive itself to /api/import/zip. `fetch` streams a File body, so
+// the browser does not hold a copy either.
+async function uploadZipImport(file, target) {
+  const params = new URLSearchParams({
+    authToken: Accounts._storedLoginToken() || '',
+    boardId: target.boardId,
+    fields: selectedFields().join(','),
+  });
+  for (const key of ['swimlaneId', 'listId', 'cardId', 'checklistId']) {
+    if (target[key]) params.set(key, target[key]);
+  }
+  const response = await fetch(`/api/import/zip?${params.toString()}`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/zip' },
+    body: file,
+  });
+  const answer = await response.json().catch(() => ({}));
+  if (!response.ok || !answer.ok) {
+    throw new Error(answer.error || 'import-scoped-failed');
+  }
+  return answer.counts;
+}
+
+// EVERY format this popup offers, in one table, for every scope.
+//
+// It was two markups: the board popup wrote its own list of nineteen formats in
+// sidebar.jade under four subheadings, and the swimlane / list / card popups
+// wrote five in exportScope.jade - so "the export popup" meant two different
+// menus with two different looks, and a format added to one was missing from
+// the other. One table, rendered by one template, is the answer to both.
+//
+// `scopes: ['board']` marks a format that only makes sense for a whole board -
+// the HTML archive, the dependency graph, the CSV columns, and the exports
+// written for another tool. Everything else is offered wherever the popup is,
+// because `exportUrl` already carries the scope: a swimlane, a list and a card
+// each differ from a board by a query parameter, not by a route.
+//
+// An entry is either a LINK (`path`, downloaded straight from the API) or an
+// ACTION (`action`, a class an event handler is bound to). Nothing else varies.
+const BOARD_ONLY = ['board'];
+const EXPORT_FORMAT_GROUPS = [
+  {
+    key: 'files',
+    entries: [
+      { key: 'pdf', icon: 'fa-file-pdf-o', label: 'PDF', path: 'exportPDF', ext: 'pdf' },
+      { key: 'excel', icon: 'fa-file-excel-o', label: 'Excel', path: 'exportExcel', ext: 'xlsx' },
+      { key: 'html', icon: 'fa-archive', label: 'HTML', action: 'html-export-board', scopes: BOARD_ONLY },
+    ],
+  },
+  {
+    key: 'dependencies',
+    headingKey: 'card-dependencies',
+    scopes: BOARD_ONLY,
+    entries: [
+      { key: 'dep-json', icon: 'fa-link', label: 'JSON', action: 'js-export-dependencies-json' },
+      { key: 'dep-svg', icon: 'fa-link', label: 'SVG', action: 'js-export-dependencies-svg' },
+    ],
+  },
+  {
+    key: 'csv',
+    heading: 'CSV',
+    scopes: BOARD_ONLY,
+    entries: [
+      { key: 'csv', icon: 'fa-upload', label: '(,)', path: 'export/csv', ext: 'csv', query: { delimiter: ',' } },
+      { key: 'scsv', icon: 'fa-upload', label: '(;)', path: 'export/csv', ext: 'csv', query: { delimiter: ';' } },
+      { key: 'tsv', icon: 'fa-upload', label: 'TSV', path: 'export/csv', ext: 'tsv', query: { delimiter: '\t' } },
+    ],
+  },
+  {
+    key: 'json',
+    heading: 'JSON',
+    entries: [
+      { key: 'json', icon: 'fa-file-code-o', label: 'JSON', path: 'export', ext: 'json' },
+      {
+        key: 'json-no-attachments',
+        icon: 'fa-file-code-o',
+        labelKey: 'export-board-without-attachments',
+        labelPrefix: 'JSON',
+        path: 'export',
+        ext: 'json',
+        query: { attachments: 'false' },
+      },
+      {
+        key: 'zip',
+        icon: 'fa-file-archive-o',
+        labelKey: 'attachments',
+        labelPrefix: '.zip',
+        path: 'exportZip',
+        ext: 'zip',
+      },
+      { key: 'kanboard', icon: 'fa-upload', label: 'Kanboard', path: 'export/kanboard', ext: 'json', scopes: BOARD_ONLY },
+      ...[
+        ['trello', 'Trello'], ['jira', 'Jira'], ['deck', 'NextCloud Deck'],
+        ['openproject', 'OpenProject'], ['github', 'GitHub'], ['gitlab', 'GitLab'],
+        ['gitea', 'Gitea'], ['forgejo', 'Forgejo'], ['asana', 'Asana'],
+        ['zenkit', 'Zenkit'],
+      ].map(([format, label]) => ({
+        key: format,
+        icon: 'fa-upload',
+        label,
+        path: `export/${format}`,
+        ext: 'json',
+        scopes: BOARD_ONLY,
+      })),
+    ],
+  },
+];
+
+// Is this popup a whole board, or a swimlane / list / card inside one?
+function isBoardScope() {
+  const data = Template.currentData() || {};
+  // checklistId too: the checklist popup is a scope of its own, and a scope
+  // that is not named here would be read as "a whole board" and offered the
+  // HTML archive, the dependency graph and the CSV columns of one.
+  return !data.swimlaneId && !data.listId && !data.cardId && !data.checklistId;
+}
+
+function entryApplies(entry) {
+  return !entry.scopes || entry.scopes.includes('board') === isBoardScope();
+}
+
+// The table above, resolved for the scope this popup was opened with: each entry
+// carries its URL; the response supplies its localized, scope-aware filename.
+// A group whose every entry is out of scope is dropped, heading and all.
+function resolvedFormatGroups() {
+  return EXPORT_FORMAT_GROUPS
+    .filter(group => !group.scopes || group.scopes.includes('board') === isBoardScope())
+    .map(group => ({
+      key: group.key,
+      heading: group.headingKey ? TAPi18n.__(group.headingKey) : group.heading || '',
+      entries: group.entries.filter(entryApplies).map(entry => ({
+        ...entry,
+        label: entry.labelKey
+          ? `${entry.labelPrefix} (${TAPi18n.__(entry.labelKey)})`
+          : entry.label,
+        url: entry.path ? exportUrl(`/api/boards/:boardId/${entry.path}`, entry.query || {}) : '',
+      })),
+    }))
+    .filter(group => group.entries.length);
+}
+
+// Import writes to the board, so unlike export it is offered only to somebody
+// who may change it. A named function rather than a helper body, because the
+// menus that offer the Import row have to ask the same question - four copies of
+// four permission checks is how one of them ends up offering a row that then
+// refuses to do anything.
+function canImportIntoBoard() {
+  const user = ReactiveCache.getCurrentUser();
+  return Boolean(user && !user.isWorker && !user.isCommentOnly
+    && !user.isReadOnly && !user.isReadAssignedOnly);
+}
+Template.registerHelper('canImportIntoBoard', canImportIntoBoard);
+
+const scopeHelpers = {
+  canImport() {
+    return canImportIntoBoard();
+  },
+  // Which half of the popup this is. One body, two modes: EXPORT shows the
+  // formats to download, IMPORT shows the file to read - and both keep the
+  // "what to include" pane, because that selection means the same thing in
+  // both directions (#1173).
+  isImportMode() {
+    const data = Template.currentData() || {};
+    return data.mode === 'import';
+  },
+  importBusy() { return importState.get('busy'); },
+  importError() { return importState.get('error'); },
+  importDone() { return importState.get('done'); },
+  exportFields() {
+    return BOARD_EXPORT_FIELDS.map(({ field, label }) => ({
+      field,
+      label,
+      checked: selection.get(field),
+    }));
+  },
+  cardDetailsChecked() {
+    return selection.get('card-details');
+  },
+  // Every format, resolved for this popup's scope - see EXPORT_FORMAT_GROUPS.
+  // #5870's "JSON without the base64 attachment data" is one of them, offered
+  // wherever an export is offered rather than only on the board menu.
+  formatGroups() {
+    return resolvedFormatGroups();
+  },
+};
+
+// One helper object, registered on both halves: the checkbox list is its own
+// template so the layout can put it in a pane, and it asks the same questions.
+Template.exportScopeBody.helpers(scopeHelpers);
+Template.exportScopeSelect.helpers(scopeHelpers);
+
+// THE TOGGLES, BOUND ON THE DOCUMENT - and deliberately not as a template event
+// map.
+//
+// #6586 comment 5308548585: "I can't select/deselect those arrows here", and
+// then "clicking a checked option, like labels, does not uncheck it". The
+// handlers were a `Template.exportScopeBody.events({...})` map, and a click on a
+// row did nothing. Registering the same map on `exportScopeSelect` as well - the
+// template that actually draws the rows - did not help either: the fix was
+// built, shipped in both the release and the development bundle, and the list
+// still could not be changed.
+//
+// What IS known, from the built bundle: the templates are registered, their
+// helpers run (the rows render, with their labels and their state), and both
+// event maps are attached. The click simply never arrives. This list is drawn
+// inside five different popups, each rendered by Popup into its own Blaze view
+// tree, so rather than keep guessing which link in that chain drops the event,
+// the toggle is bound where nothing can: one delegated handler on the document,
+// the same mechanism client/lib/escapeActions.js uses to catch clicks inside
+// popups.
+//
+// ONE binding, not one per template - two would toggle twice and cancel out,
+// which is the same "nothing happens" from a different direction.
+//
+// The display stays reactive through `selection`, which is what draws the
+// checkbox, so nothing here touches the DOM by hand.
+function toggleSelection(field) {
+  if (!field) return;
+  selection.set(field, !selection.get(field));
+}
+
+// A NATIVE listener, in the CAPTURE phase, and no jQuery.
+//
+// Capture, because it runs on the way DOWN to the row: a `stopPropagation()`
+// anywhere between the row and the document - which is one of the things that
+// could have been eating this click - cannot prevent it. And native, because a
+// `window.jQuery` that turned out to be undefined would fail silently, which is
+// indistinguishable from the bug being fixed.
+Meteor.startup(() => {
+  if (typeof document === 'undefined') return;
+  document.addEventListener('click', event => {
+    const target = event.target && event.target.closest
+      ? event.target.closest('.js-export-field-toggle, .js-export-card-details-toggle')
+      : null;
+    if (!target) return;
+    // The popup stays open: choosing five sections should not be five reopens.
+    event.preventDefault();
+    toggleSelection(target.classList.contains('js-export-card-details-toggle')
+      ? 'card-details'
+      : (target.dataset && target.dataset.field));
+  }, true);
+});
+
+Template.exportScopeBody.events({
+  async 'change .js-import-file'(event) {
+    const file = event.currentTarget.files && event.currentTarget.files[0];
+    if (!file) return;
+    const data = Template.currentData() || {};
+    const target = {
+      boardId: Session.get('currentBoard'),
+      ...currentScope(),
+    };
+    // A card's menu imports below THAT card, so the target is the card the popup
+    // was opened on - the same id the export side uses as its scope.
+    if (data.cardId) target.cardId = data.cardId;
+
+    importState.set('error', '');
+    importState.set('done', '');
+    importState.set('busy', true);
+    try {
+      const counts = String(file.name || '').toLowerCase().endsWith('.zip')
+        // A .zip goes to the server AS A FILE. Unpacking it here and sending
+        // base64 over DDP is what made a large archive expensive: 2 GB of
+        // attachments became 2.7 GB in one message. The route streams it to
+        // disk, reads the archive's directory, and pipes one attachment at a
+        // time into storage.
+        ? await uploadZipImport(file, target)
+        : await importJsonDocument(await readExportFile(file), target);
+      importState.set('done', Object.entries(counts || {})
+        .filter(([, n]) => n > 0)
+        .map(([what, n]) => `${n} ${what}`)
+        .join(', ') || '0');
+    } catch (error) {
+      const message = error && error.message === 'import-not-wekan-export'
+        ? 'import-not-wekan-export'
+        : 'import-scoped-failed';
+      importState.set('error', message);
+      // The reason, for somebody reading the console - the popup has room for a
+      // sentence, not for a stack.
+      console.error('scoped import failed', error);
+    } finally {
+      importState.set('busy', false);
+      event.currentTarget.value = '';
+    }
+  },
+});
+
+// `exportUrlFor` is what the board popup uses to build the same URLs with the
+// same selection - one query string, built in one place, whichever popup asks.
+export {
+  selectedFields,
+  selection,
+  readExportFile,
+  exportUrl as exportUrlFor,
+};

client/components/boards/originalPositionsView.css

@@ -100,7 +100,7 @@
   color: white;
   padding: 2px 6px;
   border-radius: 3px;
-  font-size: 11px;
+  font-size: calc(11px * var(--wekan-ui-font-scale, 1));
   font-weight: 500;
   text-transform: uppercase;
 }
@@ -112,7 +112,7 @@
 
 .entity-id {
   color: #6c757d;
-  font-size: 11px;
+  font-size: calc(11px * var(--wekan-ui-font-scale, 1));
   font-family: monospace;
 }
 
@@ -123,12 +123,12 @@
 .original-position-description {
   color: #495057;
   margin-bottom: 6px;
-  font-size: 13px;
+  font-size: calc(13px * var(--wekan-ui-font-scale, 1));
 }
 
 .original-title {
   color: #6c757d;
-  font-size: 12px;
+  font-size: calc(12px * var(--wekan-ui-font-scale, 1));
   margin-bottom: 6px;
   padding: 4px 6px;
   background-color: #e9ecef;
@@ -141,7 +141,7 @@
 
 .original-position-date {
   color: #6c757d;
-  font-size: 11px;
+  font-size: calc(11px * var(--wekan-ui-font-scale, 1));
 }
 
 .no-original-positions {
@@ -152,7 +152,7 @@
 }
 
 .no-original-positions i {
-  font-size: 24px;
+  font-size: calc(24px * var(--wekan-ui-font-scale, 1));
   margin-bottom: 10px;
   display: block;
   color: #adb5bd;

client/components/boards/publicBoards.css

@@ -1,5 +1,5 @@
 /* /public — the Public Boards table.
- * Design: docs/Design/Page/Public.md, which is docs/Design/Page/Table.md.
+ * Design: docs/Features/Page/Public.md, which is docs/Features/Page/Table.md.
  *
  * ONLY the row's board colouring lives here. The table itself — its width, its
  * columns, its cells, its controls row and its stacking below 800px — is

client/components/boards/publicBoards.jade

@@ -1,6 +1,6 @@
 //- /public — the boards anybody may open.
-//- Design: docs/Design/Page/Public.md, which is the Table page design
-//- (docs/Design/Page/Table.md).
+//- Design: docs/Features/Page/Public.md, which is the Table page design
+//- (docs/Features/Page/Table.md).
 //-
 //- The whole page is the shared table. It used to render `boardList`, the All
 //- Boards page, with its query swapped for `{ permission: 'public' }` — which

client/components/boards/publicBoards.js

@@ -10,7 +10,7 @@ import {
 } from '/models/lib/tablePage';
 
 // /public — the boards anybody may open, as a table page.
-// Design: docs/Design/Page/Public.md (which is docs/Design/Page/Table.md).
+// Design: docs/Features/Page/Public.md (which is docs/Features/Page/Table.md).
 //
 // The page is ONLY the table. It used to render `boardList`, the All Boards page,
 // with its query swapped for `{ permission: 'public' }` — which brought the
@@ -88,7 +88,7 @@ Template.publicBoards.helpers({
       // `boardListHeaderBar`, whose `h1` says "Public". The shared table page
       // prints a title only when one is supplied, precisely so a page that
       // already has a heading does not show two - the same reason the Admin
-      // Panel panes supply none (docs/Design/Page/Table.md).
+      // Panel panes supply none (docs/Features/Page/Table.md).
       header: buildHeader(COLUMNS),
       // A row template, not `rows`: see COLUMNS above.
       rowTemplate: 'publicBoardRow',

client/components/boards/statsView.css

@@ -16,7 +16,7 @@
 
 .stats-view-title {
   margin: 0 0 16px;
-  font-size: 22px;
+  font-size: calc(22px * var(--wekan-ui-font-scale, 1));
   font-weight: bold;
 }
 
@@ -26,7 +26,7 @@
 
 .stats-view-heading {
   margin: 0 0 8px;
-  font-size: 16px;
+  font-size: calc(16px * var(--wekan-ui-font-scale, 1));
   font-weight: bold;
   border-bottom: 2px solid #dbdbdb;
   padding-bottom: 4px;

client/components/cards/attachments.css

@@ -80,6 +80,8 @@
   color: #666;
 }
 #viewer-overlay {
+  display: flex;
+  flex-direction: column;
   width: 100%;
   height: 100vh;
   position: fixed;
@@ -88,11 +90,16 @@
   z-index: 9999 !important;
   background: rgba(13, 13, 13, 0.95);
 }
+#viewer-overlay.hidden {
+  display: none;
+}
 #viewer-container {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
-  height: 100%;
+  flex: 1 1 auto;
+  min-height: 0;
+  width: 100%;
 }
 #viewer-top-bar {
   display: flex;
@@ -100,6 +107,8 @@
   justify-content: space-between;
   width: 100%;
   padding: 16px;
+  flex: 0 0 auto;
+  box-sizing: border-box;
 }
 #attachment-name {
   color: white;
@@ -125,7 +134,7 @@
   border-radius: 4px;
   padding: 12px;
   margin: 8px 0;
-  font-size: 14px;
+  font-size: calc(14px * var(--wekan-ui-font-scale, 1));
 }
 
 .upload-progress-header {
@@ -187,7 +196,7 @@
 .upload-progress-success {
   display: flex;
   align-items: center;
-  font-size: 12px;
+  font-size: calc(12px * var(--wekan-ui-font-scale, 1));
   font-weight: 500;
 }
 
@@ -208,7 +217,7 @@
 .minicard-upload-progress {
   margin: 4px 0;
   padding: 8px;
-  font-size: 12px;
+  font-size: calc(12px * var(--wekan-ui-font-scale, 1));
 }
 
 .minicard-upload-progress .upload-progress-item {
@@ -217,7 +226,7 @@
 }
 
 .minicard-upload-progress .upload-progress-filename {
-  font-size: 11px;
+  font-size: calc(11px * var(--wekan-ui-font-scale, 1));
 }
 
 /* Card details specific styles */
@@ -227,7 +236,7 @@
 }
 
 .card-details-upload-progress .upload-progress-header {
-  font-size: 16px;
+  font-size: calc(16px * var(--wekan-ui-font-scale, 1));
   margin-bottom: 12px;
 }
 
@@ -237,7 +246,7 @@
 }
 
 .card-details-upload-progress .upload-progress-filename {
-  font-size: 14px;
+  font-size: calc(14px * var(--wekan-ui-font-scale, 1));
 }
 
 /* Drag over state for minicards */
@@ -276,8 +285,10 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  width: 100%;
-  height: calc(100% - 50px);
+  flex: 1 1 auto;
+  min-width: 0;
+  min-height: 0;
+  height: 100%;
 }
 #image-viewer {
   background: repeating-conic-gradient(#808080 0% 25%, transparent 0% 50%) 50% /
@@ -293,12 +304,12 @@
   max-width: 100%;
 }
 #pdf-viewer {
-  width: 560px;
+  width: 100%;
   height: 100%;
 }
 #txt-viewer {
   background-color: white;
-  width: 560px;
+  width: 100%;
   height: 100%;
 }
 .pdf-preview-error {
@@ -308,12 +319,6 @@
   color: white;
 }
 
-@media screen and (max-width: 1600px) {
-  #pdf-viewer {
-    width: 840px;
-  }
-}
-
 @media screen and (max-width: 800px) {
   #viewer-container {
     display: block;

client/components/cards/attachments.jade

@@ -23,7 +23,7 @@ template(name="cardAttachmentsPopup")
 
 template(name="previewClipboardImagePopup")
   p <kbd>Ctrl</kbd>+<kbd>V</kbd> {{_ "paste-or-dragdrop"}}
-  img.preview-clipboard-image()
+  img.preview-clipboard-image(alt="{{_ 'preview'}}")
   button.primary.js-upload-pasted-image {{_ 'upload'}}
 
 template(name="attachmentDeletePopup")
@@ -62,9 +62,9 @@ template(name="attachmentGallery")
         .attachment-thumbnail-container.open-preview(data-attachment-id="{{_id}}" data-card-id="{{ meta.cardId }}")
           if link
             if(isImage)
-              img.attachment-thumbnail(src="{{link}}" title="{{cleanFilename name}}")
+              img.attachment-thumbnail(src="{{link}}" title="{{cleanFilename name}}" alt="{{cleanFilename name}}")
             else if($eq extension 'svg')
-              img.attachment-thumbnail(src="{{link}}" title="{{cleanFilename name}}" type="image/svg+xml")
+              img.attachment-thumbnail(src="{{link}}" title="{{cleanFilename name}}" alt="{{cleanFilename name}}" type="image/svg+xml")
             else if($eq extension 'mp3')
               video.attachment-thumbnail(title="{{cleanFilename name}}")
                 source(src="{{link}}" type="audio/mpeg")

client/components/cards/attachments.js

@@ -7,6 +7,7 @@ import uploadProgressManager from '../../lib/uploadProgressManager';
 import { attachmentMigrationManager } from '/client/lib/attachmentMigrationManager';
 import Attachments from '/models/attachments';
 import { Utils } from '/client/lib/utils';
+import { buildAttachmentUploadConfig } from '/client/lib/attachmentUploadConfig';
 const { cleanFileName } = require('/imports/lib/fileNameDisplay');
 import { formatDateTime } from '/imports/lib/dateUtils';
 import { EscapeActions } from '/client/lib/escapeActions';
@@ -445,38 +446,16 @@ export async function handleFileUpload(card, files) {
       continue;
     }
 
-    const fileId = new ObjectId().toString();
-    let fileName = sanitizeText(file.name);
-
-    // If sanitized filename is not same as original filename,
-    // it could be XSS that is already fixed with sanitize,
-    // or just normal mistake, so it is not a problem.
-    // That is why here is no warning.
-    if (fileName !== file.name) {
-      // If filename is empty, only in that case add some filename
-      if (fileName.length === 0) {
-        fileName = 'Empty-filename-after-sanitize.txt';
-      }
-    }
-
-    const config = {
-      file: file,
-      fileId: fileId,
-      fileName: fileName,
+    // The id, the sanitized name, the chunk size and the transport all come
+    // from one builder - the file id has to be stamped into `meta` for
+    // Attachments' namingFunction to find it, and the transport has to be DDP
+    // on Sandstorm and HTTP everywhere else. Both are easy to leave out by hand
+    // and neither says so until an upload silently does not arrive.
+    // client/lib/attachmentUploadConfig.js
+    const config = buildAttachmentUploadConfig({
+      file,
       meta: Utils.getCommonAttachmentMetaFrom(card),
-      chunkSize: 'dynamic',
-      // Use HTTP transport (a dedicated fetch POST per chunk) rather than DDP,
-      // which floods the WebSocket channel and causes repeated reconnects in
-      // Safari (the "Loading, please wait" offline banner, stalling at ~95%).
-      // EXCEPT on Sandstorm: the grain's sandstorm-http-bridge strips Meteor-Files'
-      // custom upload headers — x-start/x-mtok/x-chunkid/x-fileid/x-eof are not on
-      // Sandstorm's request-header whitelist — so the server never sees x-start,
-      // treats every request as a chunk continuation, and fails with "Can't
-      // continue upload, session expired" [408]. DDP uploads go over method calls
-      // (no custom HTTP headers), so they work through the bridge.
-      transport: Meteor.settings?.public?.sandstorm ? 'ddp' : 'http',
-    };
-    config.meta.fileId = fileId;
+    });
 
     try {
       const uploader = await Attachments.insertAsync(
@@ -485,7 +464,7 @@ export async function handleFileUpload(card, files) {
       );
 
       // Add to progress manager for tracking
-      const uploadId = uploadProgressManager.addUpload(card._id, uploader, file);
+      const uploadId = uploadProgressManager.addUpload(card.getRealId(), uploader, file);
 
       uploader.on('uploaded', (error, fileRef) => {
         if (!error) {
@@ -559,18 +538,12 @@ Template.previewClipboardImagePopup.events({
     if (pastedResults && pastedResults.file) {
       const file = pastedResults.file;
       window.oPasted = pastedResults;
-      const fileId = new ObjectId().toString();
-      const config = {
+      // Same builder as the file-picker upload above; a pasted image has no
+      // name of its own, which the builder answers with the image's type.
+      const config = buildAttachmentUploadConfig({
         file,
-        fileId: fileId,
         meta: Utils.getCommonAttachmentMetaFrom(card),
-        fileName: file.name || file.type.replace('image/', 'clipboard.'),
-        chunkSize: 'dynamic',
-        // DDP on Sandstorm (its bridge strips Meteor-Files' x-* upload headers),
-        // HTTP elsewhere — see the note in the other upload handler above.
-        transport: Meteor.settings?.public?.sandstorm ? 'ddp' : 'http',
-      };
-      config.meta.fileId = fileId;
+      });
       const uploader = await Attachments.insertAsync(
         config,
         false,

client/components/cards/cardCustomFields.jade

@@ -1,35 +1,61 @@
+//- The card's custom fields, from the hamburger at the end of the Custom Fields
+  heading: every field the BOARD has, with a tick when it is on this card, a
+  pencil to edit the field itself, and - under a rule - the one that makes a new
+  one. Everything about custom fields, in the place they are shown.
+//-
+//- Edit and Add open in this same pop-over, on top of this list, so the back
+  arrow returns to it. They are the board's own forms
+  (client/components/sidebar/sidebarCustomFields.jade), not second copies.
 template(name="cardCustomFieldsPopup")
     ul.pop-over-list
         each board.customFields
-            li.item(class="")
-                a.name.js-select-field(href="#")
+            li.item
+                a.name.js-select-field(href="#" title="{{_ 'show-field-on-card'}}")
+                    //- The same animated checkbox used by Admin Panel /
+                      Settings / Announcement: the square itself morphs into
+                      the green tick through forms.css.
+                    .materialCheckBox(class="{{#if hasCustomField}}is-checked{{/if}}")
                     span.full-name
                       = name
-                    if hasCustomField
-                      i.fa.fa-check
+                a.js-edit-custom-field(title="{{_ 'edit'}}" aria-label="{{_ 'edit'}}")
+                    i.fa.fa-pencil-square-o(aria-hidden="true")
     hr
-    a.quiet-button.full.js-settings
-        i.fa.fa-cog
-        span {{_ 'settings'}}
+    a.quiet-button.full.js-open-create-custom-field
+        i.fa.fa-plus
+        span {{_ 'createCustomField'}}
 
 template(name="cardCustomField")
+    h3.card-details-item-title.js-edit-card-custom-field-value(
+      class="{{#if canModifyCard}}is-editable{{/if}}"
+      title="{{#if canModifyCard}}{{_ 'edit'}}{{/if}}"
+      role="{{#if canModifyCard}}button{{/if}}"
+      tabindex="{{#if canModifyCard}}0{{else}}-1{{/if}}")
+        i.fa.fa-list
+        = definition.name
     +Template.dynamic(template=getTemplate)
 
+template(name="customFieldCopyButton")
+    span.custom-field-copy-control
+        a.fa.fa-copy.js-copy-custom-field(title="{{_ 'copy-text-to-clipboard'}}")
+        span.copied-tooltip {{_ 'copied'}}
+
 template(name="cardCustomField-text")
     if canModifyCard
         +inlinedForm(classNames="js-card-customfield-text")
-            +editor(autofocus=true)
-                = value
+            +customFieldCopyButton(value=editValue)
+            +editor(autofocus=true hideCopy=true)
+                = editValue
             .edit-controls.clearfix
                 button.primary(type="submit") {{_ 'save'}}
-                a.js-close-inlined-form
+                a.fa.fa-times-thin.js-close-inlined-form(title="{{_ 'close'}}")
         else
-            a.js-open-inlined-form
+            button.js-open-inlined-form.js-custom-field-edit-trigger(type="button" hidden)
+            a.js-edit-card-custom-field-value(title="{{_ 'edit'}}" aria-label="{{_ 'edit'}}")
                 if value
                     +viewer
                         = value
                 else
-                    | {{_ 'edit'}}
+                    i.fa.fa-pencil-square-o(aria-hidden="true")
     else
       +viewer
         = value
@@ -38,48 +64,67 @@ template(name="cardCustomField-text")
 template(name="cardCustomField-number")
     if canModifyCard
         +inlinedForm(classNames="js-card-customfield-number")
-            input(type="number" value=data.value)
+            +customFieldCopyButton(value=editValue)
+            input(type="number" value=editValue)
             .edit-controls.clearfix
                 button.primary(type="submit") {{_ 'save'}}
-                a.js-close-inlined-form
+                a.fa.fa-times-thin.js-close-inlined-form(title="{{_ 'close'}}")
         else
-            a.js-open-inlined-form
+            button.js-open-inlined-form.js-custom-field-edit-trigger(type="button" hidden)
+            a.js-edit-card-custom-field-value(title="{{_ 'edit'}}" aria-label="{{_ 'edit'}}")
                 if formattedValue
                     = formattedValue
                 else
-                    | {{_ 'edit'}}
+                    i.fa.fa-pencil-square-o(aria-hidden="true")
     else
         if formattedValue
             = formattedValue
 
 template(name="cardCustomField-checkbox")
-  .js-checklist-item.checklist-item(class="{{#if data.value }}is-checked{{/if}}")
-    if canModifyCard
-      .check-box-container
-        .check-box.materialCheckBox(class="{{#if data.value}}is-checked{{/if}}")
+  //- This is a persisted card value, not a checklist item and not the
+    Custom Fields menu's visibility toggle. Keep its own event hook so no
+    generic checklist handler can interpret the click.
+  if canModifyCard
+    +inlinedForm(classNames="js-card-customfield-checkbox-editor")
+      +customFieldCopyButton(value=editValue)
+      label.check-box-container
+        input.js-card-customfield-checkbox-input(type="checkbox" checked=editValue)
+        .check-box.materialCheckBox(class="{{#if editValue}}is-checked{{/if}}")
+      .edit-controls.clearfix
+        button.primary(type="submit") {{_ 'save'}}
+        a.fa.fa-times-thin.js-close-inlined-form(title="{{_ 'close'}}")
     else
-      .materialCheckBox(class="{{#if data.value}}is-checked{{/if}}")
+      button.js-open-inlined-form.js-custom-field-edit-trigger(type="button" hidden)
+      .js-card-custom-field-checkbox.js-edit-card-custom-field-value.checklist-item(
+        class="{{#if value}}is-checked{{/if}}" title="{{_ 'edit'}}"
+        aria-label="{{_ 'edit'}}" role="button" tabindex="0")
+        .check-box-container
+          .check-box.materialCheckBox(class="{{#if value}}is-checked{{/if}}")
+  else
+    .materialCheckBox(class="{{#if value}}is-checked{{/if}}")
 
 template(name="cardCustomField-currency")
     if canModifyCard
         +inlinedForm(classNames="js-card-customfield-currency")
-            input(type="text" value=data.value autofocus)
+            +customFieldCopyButton(value=editValue)
+            input(type="text" value=editValue autofocus)
             .edit-controls.clearfix
                 button.primary(type="submit") {{_ 'save'}}
-                a.js-close-inlined-form
+                a.fa.fa-times-thin.js-close-inlined-form(title="{{_ 'close'}}")
         else
-            a.js-open-inlined-form
+            button.js-open-inlined-form.js-custom-field-edit-trigger(type="button" hidden)
+            a.js-edit-card-custom-field-value(title="{{_ 'edit'}}" aria-label="{{_ 'edit'}}")
                 if value
                     = formattedValue
                 else
-                    | {{_ 'edit'}}
+                    i.fa.fa-pencil-square-o(aria-hidden="true")
     else
         if value
             = formattedValue
 
 template(name="cardCustomField-date")
     if canModifyCard
-      a.js-edit-date(title="{{showTitle}} {{_ 'predicate-week'}} {{#if showWeekOfYear}}{{showWeek}}{{/if}}" class="{{classes}}")
+      a.js-edit-date.js-custom-field-edit-trigger(title="{{#if value}}{{showTitle}} {{_ 'predicate-week'}} {{#if showWeekOfYear}}{{showWeek}}{{/if}}{{else}}{{_ 'edit'}}{{/if}}" aria-label="{{_ 'edit'}}" class="{{classes}}")
         if value
           div.card-date
             time(datetime="{{showISODate}}")
@@ -88,7 +133,7 @@ template(name="cardCustomField-date")
                 b
                   | {{showWeek}}
         else
-          | {{_ 'edit'}}
+          i.fa.fa-pencil-square-o(aria-hidden="true")
     else
       if value
         div.card-date
@@ -99,26 +144,15 @@ template(name="cardCustomField-date")
                 | {{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'}}
+  +editDateForm(showDate=showDate showTime=showTime error=error datePicker=datePicker customFieldCopyValue=value customFieldControls=true)
 
 template(name="cardCustomField-dropdown")
     if canModifyCard
         +inlinedForm(classNames="js-card-customfield-dropdown")
+            +customFieldCopyButton(value=selectedItem)
             select.inline
                 each items
-                    if($eq data.value this._id)
+                    if isSelectedItem _id
                         option(value=_id selected="selected")
                           +viewer
                             = name
@@ -128,14 +162,15 @@ template(name="cardCustomField-dropdown")
                             = name
             .edit-controls.clearfix
                 button.primary(type="submit") {{_ 'save'}}
-                a.js-close-inlined-form
+                a.fa.fa-times-thin.js-close-inlined-form(title="{{_ 'close'}}")
         else
-            a.js-open-inlined-form
+            button.js-open-inlined-form.js-custom-field-edit-trigger(type="button" hidden)
+            a.js-edit-card-custom-field-value(title="{{_ 'edit'}}" aria-label="{{_ 'edit'}}")
                 if value
                     +viewer
                         = selectedItem
                 else
-                    | {{_ 'edit'}}
+                    i.fa.fa-pencil-square-o(aria-hidden="true")
     else
         if value
             +viewer
@@ -144,19 +179,21 @@ template(name="cardCustomField-dropdown")
 template(name="cardCustomField-stringtemplate")
     if canModifyCard
         +inlinedForm(classNames="js-card-customfield-stringtemplate")
+            +customFieldCopyButton(value=formattedValue)
             each item in stringtemplateItems.get
                 input.js-card-customfield-stringtemplate-item(type="text" value=item placeholder="")
             input.js-card-customfield-stringtemplate-item.last(type="text" value="" placeholder="{{_ 'custom-field-stringtemplate-item-placeholder'}}" autofocus)
             .edit-controls.clearfix
                 button.primary(type="submit") {{_ 'save'}}
-                a.js-close-inlined-form
+                a.fa.fa-times-thin.js-close-inlined-form(title="{{_ 'close'}}")
         else
-            a.js-open-inlined-form
+            button.js-open-inlined-form.js-custom-field-edit-trigger(type="button" hidden)
+            a.js-edit-card-custom-field-value(title="{{_ 'edit'}}" aria-label="{{_ 'edit'}}")
                 if value
                     +viewer
                         = formattedValue
                 else
-                    | {{_ 'edit'}}
+                    i.fa.fa-pencil-square-o(aria-hidden="true")
     else
         if value
             +viewer

client/components/cards/cardCustomFields.js

@@ -3,7 +3,6 @@ import {
   setupDatePicker,
   datePickerRendered,
   datePickerHelpers,
-  datePickerEvents,
 } from '/client/lib/datepicker';
 import { ReactiveCache } from '/imports/reactiveCache';
 import {
@@ -30,10 +29,55 @@ import {
 import { CustomFieldStringTemplate } from '/client/lib/customFields'
 import { getCurrentCardFromContext } from '/client/lib/currentCard';
 import { formatNumberValue } from '/imports/lib/customNumberFormat';
-import { EscapeActions } from '/client/lib/escapeActions';
-import { getSidebarInstance } from '/client/features/sidebar/service';
+import { Utils } from '/client/lib/utils';
+
+Template.customFieldCopyButton.events({
+  'click .js-copy-custom-field'(event, tpl) {
+    event.preventDefault();
+    event.stopPropagation();
+    const form = event.currentTarget.closest('form');
+    const checkbox = form?.querySelector('input[type="checkbox"]');
+    const select = form?.querySelector('select');
+    const date = form?.querySelector('input[type="date"]');
+    const time = form?.querySelector('input[type="time"]');
+    const stringItems = form?.querySelectorAll(
+      '.js-card-customfield-stringtemplate-item',
+    );
+    const editor = form?.querySelector(
+      'textarea, input[type="text"], input[type="number"]',
+    );
+    let rawValue = Template.currentData()?.value;
+    if (checkbox) {
+      rawValue = checkbox.checked;
+    } else if (select) {
+      rawValue = select.selectedOptions[0]?.textContent?.trim() ?? '';
+    } else if (date) {
+      rawValue = [date.value, time?.value].filter(Boolean).join(' ');
+    } else if (stringItems?.length) {
+      rawValue = Array.from(stringItems)
+        .map(input => input.value)
+        .filter(value => value.trim());
+    } else if (editor) {
+      rawValue = editor.value;
+    }
+    let value;
+    if (rawValue instanceof Date) {
+      value = rawValue.toISOString();
+    } else if (Array.isArray(rawValue)) {
+      value = rawValue.join('\n');
+    } else {
+      value = rawValue == null ? '' : String(rawValue);
+    }
+    const promise = Utils.copyTextToClipboard(value);
+    Utils.showCopied(promise, tpl.$('.copied-tooltip'));
+  },
+});
 
 Template.cardCustomFieldsPopup.helpers({
+  board() {
+    const card = getCurrentCardFromContext();
+    return card?.getRealBoard ? card.getRealBoard() : card?.board?.();
+  },
   hasCustomField() {
     const card = getCurrentCardFromContext();
     if (!card) return false;
@@ -43,20 +87,32 @@ Template.cardCustomFieldsPopup.helpers({
 });
 
 Template.cardCustomFieldsPopup.events({
-  'click .js-select-field'(event) {
+  async 'click .js-select-field'(event) {
+    event.preventDefault();
     const card = getCurrentCardFromContext();
     if (!card) return;
     const customFieldId = this._id;
-    card.toggleCustomField(customFieldId);
-    event.preventDefault();
-  },
-  'click .js-settings'(event) {
-    EscapeActions.executeUpTo('detailsPane');
-    const sidebar = getSidebarInstance();
-    if (sidebar) {
-      sidebar.setView('customFields');
+    const assigned = card.customFieldIndex(customFieldId) < 0;
+    try {
+      await Meteor.callAsync(
+        'setCardCustomFieldAssigned', card.getRealId(), customFieldId, assigned);
+    } catch (error) {
+      alert(error.reason || error.message || TAPi18n.__('server-error'));
     }
-    event.preventDefault();
+  },
+  // Editing a field, and making one, open in this same pop-over on top of the
+  // list, so the back arrow returns to it and the card stays open behind. They
+  // are the board's own forms - the same templates the sidebar list opens - so
+  // there is one create form and one edit form, not a second pair for cards.
+  // client/components/sidebar/sidebarCustomFields.jade
+  'click .js-edit-custom-field': Popup.open('editCustomField'),
+  // "Add custom field" sits OUTSIDE the list, so its data context is this
+  // popup's own - which is the CARD. The form reads its context as the field
+  // being edited, and a card has an `_id`, so it was read as an edit of a
+  // custom field that does not exist and the new field was never inserted.
+  // A new field is made from nothing, so it is handed nothing.
+  'click .js-open-create-custom-field'(event) {
+    Popup.open('createCustomField').call({}, event);
   },
 });
 
@@ -72,12 +128,59 @@ Template.cardCustomField.onCreated(function () {
   this.customFieldId = Template.currentData()._id;
 });
 
+function openCustomFieldValueEditor(event, tpl) {
+  // The Checkbox square is the direct on/off control. Only its surrounding row
+  // uses this shared editor route.
+  if (event.target.closest('.check-box-container')) return;
+  event.preventDefault();
+  event.stopPropagation();
+  const trigger = tpl.find('.js-custom-field-edit-trigger');
+  if (trigger) trigger.click();
+}
+
+function openCustomFieldValueEditorFromKeyboard(event) {
+  if (event.currentTarget.matches('a, button')) return;
+  if (event.key !== 'Enter' && event.key !== ' ') return;
+  event.preventDefault();
+  event.currentTarget.click();
+}
+
+Template.cardCustomField.events({
+  'click .js-edit-card-custom-field-value': openCustomFieldValueEditor,
+  'keydown .js-edit-card-custom-field-value': openCustomFieldValueEditorFromKeyboard,
+});
+
+function persistedEditValue() {
+  return Template.instance().data?.value;
+}
+
+// Titles belong to Template.cardCustomField, while displayed values belong to
+// these nested type templates. Register on both sides of the Blaze boundary so
+// every title, value and type-specific empty edit area behaves consistently.
+[
+  'text',
+  'number',
+  'checkbox',
+  'currency',
+  'dropdown',
+  'stringtemplate',
+].forEach(type => {
+  Template[`cardCustomField-${type}`].events({
+    'click .js-edit-card-custom-field-value': openCustomFieldValueEditor,
+    'keydown .js-edit-card-custom-field-value': openCustomFieldValueEditorFromKeyboard,
+  });
+});
+
 // cardCustomField-text
 Template['cardCustomField-text'].onCreated(function () {
   this.card = getCurrentCardFromContext();
   this.customFieldId = Template.currentData()._id;
 });
 
+Template['cardCustomField-text'].helpers({
+  editValue: persistedEditValue,
+});
+
 Template['cardCustomField-text'].events({
   'submit .js-card-customfield-text'(event, tpl) {
     event.preventDefault();
@@ -93,6 +196,7 @@ Template['cardCustomField-number'].onCreated(function () {
 });
 
 Template['cardCustomField-number'].helpers({
+  editValue: persistedEditValue,
   // Render blank / cleared / non-numeric values as empty instead of "NaN" (#2091).
   formattedValue() {
     return formatNumberValue(this.value);
@@ -117,9 +221,45 @@ Template['cardCustomField-checkbox'].onCreated(function () {
   this.customFieldId = Template.currentData()._id;
 });
 
+Template['cardCustomField-checkbox'].helpers({
+  editValue: persistedEditValue,
+});
+
 Template['cardCustomField-checkbox'].events({
-  'click .js-checklist-item .check-box-container'(event, tpl) {
-    tpl.card.setCustomField(tpl.customFieldId, !Template.currentData().value);
+  'change .js-card-customfield-checkbox-input'(event, tpl) {
+    // Editing is staged until Save, but its square must still show the staged
+    // value immediately. The persisted `value` remains unchanged until submit,
+    // so update only the editor's visual checkbox here.
+    tpl.$('.js-card-customfield-checkbox-editor .materialCheckBox')
+      .toggleClass('is-checked', event.currentTarget.checked);
+  },
+  async 'submit .js-card-customfield-checkbox-editor'(event, tpl) {
+    event.preventDefault();
+    const value = Boolean(
+      tpl.find('.js-card-customfield-checkbox-input')?.checked,
+    );
+    try {
+      await Meteor.callAsync(
+        'setCardCustomFieldCheckbox', tpl.card.getRealId(), tpl.customFieldId, value);
+    } catch (error) {
+      alert(error.reason || error.message || TAPi18n.__('server-error'));
+    }
+  },
+  async 'click .js-card-custom-field-checkbox .check-box-container'(event, tpl) {
+    event.preventDefault();
+    event.stopPropagation();
+    // This template context is rebuilt from customFieldsWD whenever the saved
+    // value changes. Using the Card object captured at onCreated kept the old
+    // value after the first click, so a second click tried to save true again.
+    const currentField = Template.currentData();
+    if (!currentField || currentField._id !== tpl.customFieldId) return;
+    const value = !Boolean(currentField.value);
+    try {
+      await Meteor.callAsync(
+        'setCardCustomFieldCheckbox', tpl.card.getRealId(), tpl.customFieldId, value);
+    } catch (error) {
+      alert(error.reason || error.message || TAPi18n.__('server-error'));
+    }
   },
 });
 
@@ -131,6 +271,7 @@ Template['cardCustomField-currency'].onCreated(function () {
 });
 
 Template['cardCustomField-currency'].helpers({
+  editValue: persistedEditValue,
   formattedValue() {
     const locale = TAPi18n.getLanguage();
     const tpl = Template.instance();
@@ -142,11 +283,21 @@ Template['cardCustomField-currency'].helpers({
 });
 
 Template['cardCustomField-currency'].events({
-  'submit .js-card-customfield-currency'(event, tpl) {
+  async '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);
+    const value = Number(tpl.find('input').value.trim().replace(/,/g, '.'));
+    if (!Number.isFinite(value)) return;
+    try {
+      await Meteor.callAsync(
+        'setCardCustomFieldCurrency',
+        tpl.card.getRealId(),
+        tpl.customFieldId,
+        value,
+      );
+    } catch (error) {
+      alert(error.reason || error.message || TAPi18n.__('server-error'));
+    }
   },
 });
 
@@ -200,6 +351,9 @@ Template['cardCustomField-date'].helpers({
   },
 });
 
+// Date keeps its original direct popup opener. Clicking the title activates
+// this same visible element through `.js-custom-field-edit-trigger`, while a
+// click on the displayed datetime is handled here without a template hop.
 Template['cardCustomField-date'].events({
   'click .js-edit-date': Popup.open('cardCustomField-date'),
 });
@@ -209,10 +363,11 @@ Template['cardCustomField-datePopup'].onCreated(function () {
   const data = Template.currentData();
   setupDatePicker(this, {
     initialDate: data.value ? data.value : undefined,
+    storeDate: (date, card) => card.setCustomField(data._id, date),
+    deleteDate: card => card.setCustomField(data._id, ''),
   });
-  // Override card and store customFieldId for store/delete callbacks
+  // A custom-field popup's data is the field definition, not the card.
   this.datePicker.card = getCurrentCardFromContext();
-  this.customFieldId = data._id;
 });
 
 Template['cardCustomField-datePopup'].onRendered(function () {
@@ -221,20 +376,12 @@ Template['cardCustomField-datePopup'].onRendered(function () {
 
 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
 Template['cardCustomField-dropdown'].onCreated(function () {
+  const data = Template.currentData();
   this.card = getCurrentCardFromContext();
-  this.customFieldId = Template.currentData()._id;
-  this._items = Template.currentData().definition.settings.dropdownItems;
+  this.customFieldId = data._id;
+  this._items = data.definition.settings.dropdownItems;
   this.items = this._items.slice(0);
   this.items.unshift({
     _id: '',
@@ -246,6 +393,9 @@ Template['cardCustomField-dropdown'].helpers({
   items() {
     return Template.instance().items;
   },
+  isSelectedItem(itemId) {
+    return (Template.instance().data.value ?? '') === itemId;
+  },
   selectedItem() {
     const tpl = Template.instance();
     const selected = tpl._items.find(item => {

client/components/cards/cardDate.jade

@@ -1,289 +1,91 @@
-template(name="dateBadge")
+//- One date badge: the coloured date on a card or a minicard. Twelve templates
+  drew this, letter for letter - Received, Start, Due and End on the card and
+  again on the minicard, a vote's end, a poker's end and a custom field's date -
+  and each of them still has its own helpers and its own click, which is the
+  part that differs. The markup did not.
+//-
+//- It takes what it draws as ARGUMENTS: a helper is looked up on the template
+  it is written in, not on the one including it, so passing the values is what
+  lets one piece of markup serve twelve templates without moving any of their
+  state.
+//-
+//- `baseClass` is the class the caller's own markup carried - `card-date`, plus
+  `due-date` and friends on a minicard. A custom field's date passes NONE: it
+  was never a `.card-date` and must not become one now.
+//- `canModifyCard` decides whether the badge is a link that opens the date
+  editor; a custom field's date is never one, and passes nothing.
+template(name="dateBadgeBody")
   if canModifyCard
-    a.js-edit-date.card-date(title="{{showTitle}} {{_ 'predicate-week'}} {{#if showWeekOfYear}}{{showWeek}}{{/if}}" class="{{classes}}")
+    a.js-edit-date(title="{{showTitle}} {{_ 'predicate-week'}} {{#if showWeekOfYear}}{{showWeek}}{{/if}}" class="{{baseClass}} {{classes}}")
       time(datetime="{{showISODate}}")
         | {{showDate}}
         if showWeekOfYear
           b
             | {{showWeek}}
   else
-    a.card-date(title="{{showTitle}} {{_ 'predicate-week'}} {{#if showWeekOfYear}}{{showWeek}}{{/if}}" class="{{classes}}")
+    a(title="{{showTitle}} {{_ 'predicate-week'}} {{#if showWeekOfYear}}{{showWeek}}{{/if}}" class="{{baseClass}} {{classes}}")
       time(datetime="{{showISODate}}")
         | {{showDate}}
         if showWeekOfYear
           b
             | {{showWeek}}
 
+template(name="dateBadge")
+  +dateBadgeBody(canModifyCard=canModifyCard baseClass="card-date" showTitle=showTitle classes=classes showISODate=showISODate showDate=showDate showWeekOfYear=showWeekOfYear showWeek=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}}
+  +dateBadgeBody(canModifyCard=canModifyCard baseClass="card-date" showTitle=showTitle classes=classes showISODate=showISODate showDate=showDate showWeekOfYear=showWeekOfYear showWeek=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}}
+  +dateBadgeBody(canModifyCard=canModifyCard baseClass="card-date" showTitle=showTitle classes=classes showISODate=showISODate showDate=showDate showWeekOfYear=showWeekOfYear showWeek=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}}
+  +dateBadgeBody(canModifyCard=canModifyCard baseClass="card-date" showTitle=showTitle classes=classes showISODate=showISODate showDate=showDate showWeekOfYear=showWeekOfYear showWeek=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}}
+  +dateBadgeBody(canModifyCard=canModifyCard baseClass="card-date" showTitle=showTitle classes=classes showISODate=showISODate showDate=showDate showWeekOfYear=showWeekOfYear showWeek=showWeek)
 
 template(name="dateCustomField")
-  a(title="{{showTitle}} {{_ 'predicate-week'}} {{#if showWeekOfYear}}{{showWeek}}{{/if}}" class="{{classes}}")
-    time(datetime="{{showISODate}}")
-      | {{showDate}}
-      if showWeekOfYear
-        b
-          | {{showWeek}}
+  +dateBadgeBody(showTitle=showTitle classes=classes showISODate=showISODate showDate=showDate showWeekOfYear=showWeekOfYear showWeek=showWeek)
 
 template(name="cardCustomFieldDate")
-  a(title="{{showTitle}} {{_ 'predicate-week'}} {{#if showWeekOfYear}}{{showWeek}}{{/if}}" class="{{classes}}")
-    time(datetime="{{showISODate}}")
-      | {{showDate}}
-      if showWeekOfYear
-        b
-          | {{showWeek}}
+  +dateBadgeBody(showTitle=showTitle classes=classes showISODate=showISODate showDate=showDate showWeekOfYear=showWeekOfYear showWeek=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}}
+  +dateBadgeBody(canModifyCard=canModifyCard baseClass="card-date" showTitle=showTitle classes=classes showISODate=showISODate showDate=showDate showWeekOfYear=showWeekOfYear showWeek=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}}
+  +dateBadgeBody(canModifyCard=canModifyCard baseClass="card-date" showTitle=showTitle classes=classes showISODate=showISODate showDate=showDate showWeekOfYear=showWeekOfYear showWeek=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}}")
-      time(datetime="{{showISODate}}")
-        | {{showDate}}
-        if showWeekOfYear
-          b
-            | {{showWeek}}
-  else
-    a.card-date.received-date(title="{{_ 'card-received'}} {{_ 'predicate-week'}} {{#if showWeekOfYear}}{{showWeek}}{{/if}}" class="{{classes}}")
-      time(datetime="{{showISODate}}")
-        | {{showDate}}
-        if showWeekOfYear
-          b
-            | {{showWeek}}
+  +dateBadgeBody(canModifyCard=canModifyCard showTitle="{{_ 'card-received'}}" baseClass="card-date received-date" classes=classes showISODate=showISODate showDate=showDate showWeekOfYear=showWeekOfYear showWeek=showWeek)
 
 template(name="minicardStartDate")
-  if canModifyCard
-    a.js-edit-date.card-date.start-date(title="{{_ 'card-start'}} {{_ 'predicate-week'}} {{#if showWeekOfYear}}{{showWeek}}{{/if}}" class="{{classes}}")
-      time(datetime="{{showISODate}}")
-        | {{showDate}}
-        if showWeekOfYear
-          b
-            | {{showWeek}}
-  else
-    a.card-date.start-date(title="{{_ 'card-start'}} {{_ 'predicate-week'}} {{#if showWeekOfYear}}{{showWeek}}{{/if}}" class="{{classes}}")
-      time(datetime="{{showISODate}}")
-        | {{showDate}}
-        if showWeekOfYear
-          b
-            | {{showWeek}}
+  +dateBadgeBody(canModifyCard=canModifyCard showTitle="{{_ 'card-start'}}" baseClass="card-date start-date" classes=classes showISODate=showISODate showDate=showDate showWeekOfYear=showWeekOfYear showWeek=showWeek)
 
 template(name="minicardDueDate")
-  if canModifyCard
-    a.js-edit-date.card-date.due-date(title="{{_ 'card-due'}} {{_ 'predicate-week'}} {{#if showWeekOfYear}}{{showWeek}}{{/if}}" class="{{classes}}")
-      time(datetime="{{showISODate}}")
-        | {{showDate}}
-        if showWeekOfYear
-          b
-            | {{showWeek}}
-  else
-    a.card-date.due-date(title="{{_ 'card-due'}} {{_ 'predicate-week'}} {{#if showWeekOfYear}}{{showWeek}}{{/if}}" class="{{classes}}")
-      time(datetime="{{showISODate}}")
-        | {{showDate}}
-        if showWeekOfYear
-          b
-            | {{showWeek}}
+  +dateBadgeBody(canModifyCard=canModifyCard showTitle="{{_ 'card-due'}}" baseClass="card-date due-date" classes=classes showISODate=showISODate showDate=showDate showWeekOfYear=showWeekOfYear showWeek=showWeek)
 
 template(name="minicardEndDate")
-  if canModifyCard
-    a.js-edit-date.card-date.end-date(title="{{_ 'card-end'}} {{_ 'predicate-week'}} {{#if showWeekOfYear}}{{showWeek}}{{/if}}" class="{{classes}}")
-      time(datetime="{{showISODate}}")
-        | {{showDate}}
-        if showWeekOfYear
-          b
-            | {{showWeek}}
-  else
-    a.card-date.end-date(title="{{_ 'card-end'}} {{_ 'predicate-week'}} {{#if showWeekOfYear}}{{showWeek}}{{/if}}" class="{{classes}}")
-      time(datetime="{{showISODate}}")
-        | {{showDate}}
-        if showWeekOfYear
-          b
-            | {{showWeek}}
+  +dateBadgeBody(canModifyCard=canModifyCard showTitle="{{_ 'card-end'}}" baseClass="card-date end-date" classes=classes showISODate=showISODate showDate=showDate showWeekOfYear=showWeekOfYear showWeek=showWeek)
 
 template(name="minicardCustomFieldDate")
-  a(title="{{_ 'date'}} {{_ 'predicate-week'}} {{#if showWeekOfYear}}{{showWeek}}{{/if}}" class="{{classes}}")
-    time(datetime="{{showISODate}}")
-      | {{showDate}}
-      if showWeekOfYear
-        b
-          | {{showWeek}}
+  +dateBadgeBody(showTitle="{{_ 'date'}}" classes=classes showISODate=showISODate showDate=showDate showWeekOfYear=showWeekOfYear showWeek=showWeek)
 
 template(name="editCardReceivedDatePopup")
-  .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'}}
+  +editDateForm(showDate=showDate showTime=showTime error=error datePicker=datePicker)
 
 template(name="editCardStartDatePopup")
-  .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'}}
+  +editDateForm(showDate=showDate showTime=showTime error=error datePicker=datePicker)
 
 template(name="editCardDueDatePopup")
-  .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'}}
+  +editDateForm(showDate=showDate showTime=showTime error=error datePicker=datePicker)
 
 template(name="editCardEndDatePopup")
-  .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'}}
+  +editDateForm(showDate=showDate showTime=showTime error=error datePicker=datePicker)
 
 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'}}
+  +editDateForm(showDate=showDate showTime=showTime error=error datePicker=datePicker)
 
 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'}}
+  +editDateForm(showDate=showDate showTime=showTime error=error datePicker=datePicker)

client/components/cards/cardDate.js

@@ -4,7 +4,6 @@ import {
   setupDatePicker,
   datePickerRendered,
   datePickerHelpers,
-  datePickerEvents,
 } from '/client/lib/datepicker';
 import {
   formatDateTime,
@@ -37,6 +36,12 @@ Template.editCardReceivedDatePopup.onCreated(function () {
   setupDatePicker(this, {
     defaultTime: formatDateTime(now()),
     initialDate: card.getReceived() ? card.getReceived() : undefined,
+    storeDate(date, currentCard) {
+      return currentCard.setReceived(date);
+    },
+    deleteDate(currentCard) {
+      return currentCard.unsetReceived();
+    },
   });
 });
 
@@ -46,21 +51,18 @@ Template.editCardReceivedDatePopup.onRendered(function () {
 
 Template.editCardReceivedDatePopup.helpers(datePickerHelpers());
 
-Template.editCardReceivedDatePopup.events(datePickerEvents({
-  storeDate(date) {
-    this.datePicker.card.setReceived(date);
-  },
-  deleteDate() {
-    this.datePicker.card.unsetReceived();
-  },
-}));
-
 // editCardStartDatePopup
 Template.editCardStartDatePopup.onCreated(function () {
   const card = Template.currentData();
   setupDatePicker(this, {
     defaultTime: formatDateTime(now()),
     initialDate: card.getStart() ? card.getStart() : undefined,
+    storeDate(date, currentCard) {
+      return currentCard.setStart(date);
+    },
+    deleteDate(currentCard) {
+      return currentCard.unsetStart();
+    },
   });
 });
 
@@ -70,21 +72,18 @@ Template.editCardStartDatePopup.onRendered(function () {
 
 Template.editCardStartDatePopup.helpers(datePickerHelpers());
 
-Template.editCardStartDatePopup.events(datePickerEvents({
-  storeDate(date) {
-    this.datePicker.card.setStart(date);
-  },
-  deleteDate() {
-    this.datePicker.card.unsetStart();
-  },
-}));
-
 // editCardDueDatePopup
 Template.editCardDueDatePopup.onCreated(function () {
   const card = Template.currentData();
   setupDatePicker(this, {
     defaultTime: '1970-01-01 17:00:00',
     initialDate: card.getDue() ? card.getDue() : undefined,
+    storeDate(date, currentCard) {
+      return currentCard.setDue(date);
+    },
+    deleteDate(currentCard) {
+      return currentCard.unsetDue();
+    },
   });
 });
 
@@ -94,21 +93,18 @@ Template.editCardDueDatePopup.onRendered(function () {
 
 Template.editCardDueDatePopup.helpers(datePickerHelpers());
 
-Template.editCardDueDatePopup.events(datePickerEvents({
-  storeDate(date) {
-    this.datePicker.card.setDue(date);
-  },
-  deleteDate() {
-    this.datePicker.card.unsetDue();
-  },
-}));
-
 // editCardEndDatePopup
 Template.editCardEndDatePopup.onCreated(function () {
   const card = Template.currentData();
   setupDatePicker(this, {
     defaultTime: formatDateTime(now()),
     initialDate: card.getEnd() ? card.getEnd() : undefined,
+    storeDate(date, currentCard) {
+      return currentCard.setEnd(date);
+    },
+    deleteDate(currentCard) {
+      return currentCard.unsetEnd();
+    },
   });
 });
 
@@ -118,17 +114,34 @@ Template.editCardEndDatePopup.onRendered(function () {
 
 Template.editCardEndDatePopup.helpers(datePickerHelpers());
 
-Template.editCardEndDatePopup.events(datePickerEvents({
-  storeDate(date) {
-    this.datePicker.card.setEnd(date);
-  },
-  deleteDate() {
-    this.datePicker.card.unsetEnd();
-  },
-}));
-
 // --- Card date badge display helpers ---
 
+// Passing named arguments to a Blaze inclusion replaces the included
+// template's data context with the argument object. Card details passes
+// `canModifyCard`, while minicards and Table view inherit the Card directly.
+// Keep both call shapes explicit so reactive reruns never try Card methods on
+// `{ card, canModifyCard }` (#6615).
+function cardFromDateContext(data = Template.currentData()) {
+  return data?.card || data;
+}
+
+// dateBadgeBody is a child template whose data is only display arguments. An
+// event handled by the surrounding card/minicard date template therefore must
+// open the popup with THAT surrounding template's Card, not with the event's
+// `this`. The plus buttons do not need this because they already live directly
+// in cardDetails with the Card as their data context.
+function openDateEditor(name) {
+  return function (event, templateInstance) {
+    event.preventDefault();
+    event.stopPropagation();
+    Popup.open(name).call(
+      cardFromDateContext(templateInstance.data),
+      event,
+      templateInstance,
+    );
+  };
+}
+
 // Shared onCreated logic for card date badge templates
 function cardDateOnCreated(tpl) {
   tpl.date = new ReactiveVar();
@@ -166,7 +179,7 @@ Template.cardReceivedDate.onCreated(function () {
   cardDateOnCreated(this);
   const self = this;
   self.autorun(() => {
-    self.date.set(new Date(Template.currentData().getReceived()));
+    self.date.set(new Date(cardFromDateContext().getReceived()));
   });
 });
 
@@ -174,7 +187,7 @@ Template.cardReceivedDate.helpers(cardDateHelpers({
   classes() {
     const tpl = Template.instance();
     let classes = 'received-date ';
-    const data = Template.currentData();
+    const data = cardFromDateContext();
     const dueAt = data.getDue();
     const endAt = data.getEnd();
     const startAt = data.getStart();
@@ -201,7 +214,7 @@ Template.cardReceivedDate.helpers(cardDateHelpers({
 }));
 
 Template.cardReceivedDate.events({
-  'click .js-edit-date': Popup.open('editCardReceivedDate'),
+  'click .js-edit-date': openDateEditor('editCardReceivedDate'),
 });
 
 // cardStartDate
@@ -209,7 +222,7 @@ Template.cardStartDate.onCreated(function () {
   cardDateOnCreated(this);
   const self = this;
   self.autorun(() => {
-    self.date.set(new Date(Template.currentData().getStart()));
+    self.date.set(new Date(cardFromDateContext().getStart()));
   });
 });
 
@@ -217,7 +230,7 @@ Template.cardStartDate.helpers(cardDateHelpers({
   classes() {
     const tpl = Template.instance();
     let classes = 'start-date ';
-    const data = Template.currentData();
+    const data = cardFromDateContext();
     const dueAt = data.getDue();
     const endAt = data.getEnd();
     const theDate = tpl.date.get();
@@ -242,7 +255,7 @@ Template.cardStartDate.helpers(cardDateHelpers({
 }));
 
 Template.cardStartDate.events({
-  'click .js-edit-date': Popup.open('editCardStartDate'),
+  'click .js-edit-date': openDateEditor('editCardStartDate'),
 });
 
 // cardDueDate
@@ -250,14 +263,14 @@ Template.cardDueDate.onCreated(function () {
   cardDateOnCreated(this);
   const self = this;
   self.autorun(() => {
-    self.date.set(new Date(Template.currentData().getDue()));
+    self.date.set(new Date(cardFromDateContext().getDue()));
   });
 });
 
 Template.cardDueDate.helpers(cardDateHelpers({
   classes() {
     const tpl = Template.instance();
-    const data = Template.currentData();
+    const data = cardFromDateContext();
     const endAt = data.getEnd();
     const theDate = tpl.date.get();
     const nowVal = tpl.now.get();
@@ -274,7 +287,7 @@ Template.cardDueDate.helpers(cardDateHelpers({
 }));
 
 Template.cardDueDate.events({
-  'click .js-edit-date': Popup.open('editCardDueDate'),
+  'click .js-edit-date': openDateEditor('editCardDueDate'),
 });
 
 // cardEndDate
@@ -282,7 +295,7 @@ Template.cardEndDate.onCreated(function () {
   cardDateOnCreated(this);
   const self = this;
   self.autorun(() => {
-    self.date.set(new Date(Template.currentData().getEnd()));
+    self.date.set(new Date(cardFromDateContext().getEnd()));
   });
 });
 
@@ -290,7 +303,7 @@ Template.cardEndDate.helpers(cardDateHelpers({
   classes() {
     const tpl = Template.instance();
     let classes = 'end-date ';
-    const data = Template.currentData();
+    const data = cardFromDateContext();
     const dueAt = data.getDue();
     const theDate = tpl.date.get();
 
@@ -312,7 +325,7 @@ Template.cardEndDate.helpers(cardDateHelpers({
 }));
 
 Template.cardEndDate.events({
-  'click .js-edit-date': Popup.open('editCardEndDate'),
+  'click .js-edit-date': openDateEditor('editCardEndDate'),
 });
 
 // cardCustomFieldDate
@@ -353,7 +366,7 @@ Template.minicardReceivedDate.onCreated(function () {
   cardDateOnCreated(this);
   const self = this;
   self.autorun(() => {
-    self.date.set(new Date(Template.currentData().getReceived()));
+    self.date.set(new Date(cardFromDateContext().getReceived()));
   });
 });
 
@@ -361,7 +374,7 @@ Template.minicardReceivedDate.helpers(cardDateHelpers({
   classes() {
     const tpl = Template.instance();
     let classes = 'received-date ';
-    const data = Template.currentData();
+    const data = cardFromDateContext();
     const dueAt = data.getDue();
     const endAt = data.getEnd();
     const startAt = data.getStart();
@@ -393,7 +406,7 @@ Template.minicardReceivedDate.helpers(cardDateHelpers({
 }));
 
 Template.minicardReceivedDate.events({
-  'click .js-edit-date': Popup.open('editCardReceivedDate'),
+  'click .js-edit-date': openDateEditor('editCardReceivedDate'),
 });
 
 // minicardStartDate
@@ -401,7 +414,7 @@ Template.minicardStartDate.onCreated(function () {
   cardDateOnCreated(this);
   const self = this;
   self.autorun(() => {
-    self.date.set(new Date(Template.currentData().getStart()));
+    self.date.set(new Date(cardFromDateContext().getStart()));
   });
 });
 
@@ -409,7 +422,7 @@ Template.minicardStartDate.helpers(cardDateHelpers({
   classes() {
     const tpl = Template.instance();
     let classes = 'start-date ';
-    const data = Template.currentData();
+    const data = cardFromDateContext();
     const dueAt = data.getDue();
     const endAt = data.getEnd();
     const theDate = tpl.date.get();
@@ -439,7 +452,7 @@ Template.minicardStartDate.helpers(cardDateHelpers({
 }));
 
 Template.minicardStartDate.events({
-  'click .js-edit-date': Popup.open('editCardStartDate'),
+  'click .js-edit-date': openDateEditor('editCardStartDate'),
 });
 
 // minicardDueDate
@@ -447,14 +460,14 @@ Template.minicardDueDate.onCreated(function () {
   cardDateOnCreated(this);
   const self = this;
   self.autorun(() => {
-    self.date.set(new Date(Template.currentData().getDue()));
+    self.date.set(new Date(cardFromDateContext().getDue()));
   });
 });
 
 Template.minicardDueDate.helpers(cardDateHelpers({
   classes() {
     const tpl = Template.instance();
-    const data = Template.currentData();
+    const data = cardFromDateContext();
     const endAt = data.getEnd();
     const theDate = tpl.date.get();
     const nowVal = tpl.now.get();
@@ -476,7 +489,7 @@ Template.minicardDueDate.helpers(cardDateHelpers({
 }));
 
 Template.minicardDueDate.events({
-  'click .js-edit-date': Popup.open('editCardDueDate'),
+  'click .js-edit-date': openDateEditor('editCardDueDate'),
 });
 
 // minicardEndDate
@@ -484,7 +497,7 @@ Template.minicardEndDate.onCreated(function () {
   cardDateOnCreated(this);
   const self = this;
   self.autorun(() => {
-    self.date.set(new Date(Template.currentData().getEnd()));
+    self.date.set(new Date(cardFromDateContext().getEnd()));
   });
 });
 
@@ -492,7 +505,7 @@ Template.minicardEndDate.helpers(cardDateHelpers({
   classes() {
     const tpl = Template.instance();
     let classes = 'end-date ';
-    const data = Template.currentData();
+    const data = cardFromDateContext();
     const dueAt = data.getDue();
     const theDate = tpl.date.get();
 
@@ -519,7 +532,7 @@ Template.minicardEndDate.helpers(cardDateHelpers({
 }));
 
 Template.minicardEndDate.events({
-  'click .js-edit-date': Popup.open('editCardEndDate'),
+  'click .js-edit-date': openDateEditor('editCardEndDate'),
 });
 
 // minicardCustomFieldDate
@@ -556,7 +569,7 @@ Template.voteEndDate.onCreated(function () {
   cardDateOnCreated(this);
   const self = this;
   self.autorun(() => {
-    self.date.set(new Date(Template.currentData().getVoteEnd()));
+    self.date.set(new Date(cardFromDateContext().getVoteEnd()));
   });
 });
 
@@ -576,7 +589,7 @@ Template.voteEndDate.helpers(cardDateHelpers({
 }));
 
 Template.voteEndDate.events({
-  'click .js-edit-date': Popup.open('editVoteEndDate'),
+  'click .js-edit-date': openDateEditor('editVoteEndDate'),
 });
 
 // pokerEndDate
@@ -584,7 +597,7 @@ Template.pokerEndDate.onCreated(function () {
   cardDateOnCreated(this);
   const self = this;
   self.autorun(() => {
-    self.date.set(new Date(Template.currentData().getPokerEnd()));
+    self.date.set(new Date(cardFromDateContext().getPokerEnd()));
   });
 });
 
@@ -604,5 +617,5 @@ Template.pokerEndDate.helpers(cardDateHelpers({
 }));
 
 Template.pokerEndDate.events({
-  'click .js-edit-date': Popup.open('editPokerEndDate'),
+  'click .js-edit-date': openDateEditor('editPokerEndDate'),
 });

client/components/cards/cardDetails.css

@@ -4,7 +4,7 @@
 }
 
 .card-details-item-date-format .card-details-item-title {
-  font-size: 15px;
+  font-size: calc(15px * var(--wekan-ui-font-scale, 1));
   font-weight: bold;
   margin-bottom: 6px;
   color: #333;
@@ -17,7 +17,7 @@
   border: 1px solid #ddd;
   border-radius: 5px;
   background-color: #fff;
-  font-size: 15px;
+  font-size: calc(15px * var(--wekan-ui-font-scale, 1));
   cursor: pointer;
   transition: border-color 0.15s, box-shadow 0.15s;
 }
@@ -138,7 +138,10 @@
 body.desktop-mode .card-details:not(.card-details-popup) {
   position: fixed;
   width: auto;
-  max-width: 520px; /* #6465: narrower dock (was 800px, ~1/4 screen) */
+  /* Open at the compact dock width below, but let the bottom-right native
+     resize handle grow the card up to the viewport edge. A fixed 520px cap
+     made the handle capable of shrinking only. */
+  max-width: calc(100vw - 16px);
   flex-basis: auto;
   border-radius: 3px;
   z-index: 2001;
@@ -149,7 +152,7 @@ body.desktop-mode .card-details:not(.card-details-popup):not([style*="left"]):no
   top: 8px;
   inset-inline-start: auto;
   inset-inline-end: 8px;
-  width: min(650px, 90vw);
+  width: min(520px, 90vw);
   bottom: 8px;
 }
 
@@ -207,7 +210,7 @@ body.desktop-mode .card-details:not(.card-details-popup):not(.card-details-colla
    canvas (off-screen) instead of over the viewport.
    All four insets are !important for two reasons:
    1. The floating-window rules above (top: 8px / inset-inline-end: 8px /
-      width: min(650px, 90vw), specificity up to 0,5,1) otherwise override the
+      width: min(520px, 90vw), specificity up to 0,5,1) otherwise override the
       lower-specificity .card-details-maximized geometry entirely, leaving the
       Maximize button a no-op.
    2. The drag handle writes inline left/top styles onto the card; a card that
@@ -267,7 +270,7 @@ body.desktop-mode .card-details.card-details-collapsed {
 /* Collapse toggle triangle */
 .card-details .card-details-header .card-collapse-toggle {
   float: inline-start;
-  font-size: 20px;
+  font-size: calc(20px * var(--wekan-ui-font-scale, 1));
   padding: 7px 10px;
   margin-inline-start: -10px;
   margin-inline-end: 5px;
@@ -279,7 +282,7 @@ body.desktop-mode .card-details.card-details-collapsed {
 }
 
 .card-details .card-details-header .card-drag-handle {
-  font-size: 20px;
+  font-size: calc(20px * var(--wekan-ui-font-scale, 1));
   padding: 8px 10px;
   margin-inline-end: 10px;
   cursor: move;
@@ -304,7 +307,7 @@ body.desktop-mode .card-details.card-details-collapsed {
 .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;
+  font-size: calc(24px * var(--wekan-ui-font-scale, 1));
   padding: 5px 10px 5px 10px;
   margin-inline-end: -8px;
   cursor: pointer;
@@ -315,37 +318,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-mobile-desktop-toggle {
-  font-size: 24px;
+  font-size: calc(24px * var(--wekan-ui-font-scale, 1));
   padding: 5px;
   margin-inline-end: 5px;
   cursor: pointer;
   user-select: none;
 }
 .card-details .card-details-header .card-copy-button {
-  font-size: 17px;
+  font-size: calc(17px * var(--wekan-ui-font-scale, 1));
   padding: 10px;
   margin-inline-end: 10px;
 }
 .card-details .card-details-header .card-copy-mobile-button {
-  font-size: 17px;
+  font-size: calc(17px * var(--wekan-ui-font-scale, 1));
   padding: 10px;
   margin-inline-end: 10px;
 }
 .card-details .card-details-header .card-details-menu {
-  font-size: 17px;
+  font-size: calc(17px * var(--wekan-ui-font-scale, 1));
   padding: 10px;
   vertical-align: middle;
   line-height: 1.2;
 }
 .card-details .card-details-header .card-details-menu-mobile-web {
-  font-size: 17px;
+  font-size: calc(17px * var(--wekan-ui-font-scale, 1));
   padding: 10px;
   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;
+  font-size: calc(24px * var(--wekan-ui-font-scale, 1));
   padding: 5px 10px 5px 10px;
   margin-inline-end: 5px;
   cursor: pointer;
@@ -362,7 +365,7 @@ body.desktop-mode .card-details.card-details-collapsed {
   font-size: 1em;
 }
 .card-details .card-details-header .card-details-watch {
-  font-size: 17px;
+  font-size: calc(17px * var(--wekan-ui-font-scale, 1));
   padding-inline-start: 7px;
   color: #a6a6a6;
 }
@@ -375,6 +378,46 @@ body.desktop-mode .card-details.card-details-collapsed {
   vertical-align: middle;
   line-height: 1.3;
   letter-spacing: 0.01em;
+  position: relative;
+}
+
+/* The title is two things at once, split like a minicard's: the LEADING half
+   opens the editor, the trailing half drags the window. With drag handles OFF
+   there is no handle, so the title bar is what the window is moved by - and a
+   heading that is entirely an edit target leaves nothing to take hold of.
+
+   An overlay rather than a split of the text, because the text is a `.viewer`
+   and cutting it in two would cut the sentence in two. `inset-inline-start`, so
+   the edit half is the left in English and the right in Arabic from one rule.
+   The drag handler steps aside for this zone (cardDetails.js). */
+.card-details .card-details-header .card-details-title .card-details-title-edit-zone {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  inset-inline-start: 0;
+  /* Half of the heading - and the heading is stretched to the row below, so
+     this is half of the BAR however long the title happens to be. */
+  width: 50%;
+  cursor: text;
+  z-index: 1;
+}
+
+/* The heading fills the row rather than shrinking to its text, so "half the
+   title" and "half the bar" are the same half however long the title is. A
+   heading only as wide as its words leaves the empty space beside it belonging
+   to nothing - and that space is where anybody would grab to move the window.
+   It stays inline-block so the complete-toggle beside it keeps its place; the
+   buttons floating at the trailing edge take their room out of this width. */
+.card-details .card-details-header .card-details-title {
+  min-width: 60%;
+}
+
+/* With drag handles ON the handle is the only drag source, so the whole title
+   is the edit target - the same rule the minicard follows, from the same
+   question: `card-details-with-handle` is set by the template from
+   isTouchScreenOrShowDesktopDragHandles, which is Utils.showDragHandles(). */
+.card-details.card-details-with-handle .card-details-header .card-details-title .card-details-title-edit-zone {
+  width: 100%;
 }
 .card-details .card-details-header .linked-card-location {
   font-style: italic;
@@ -454,10 +497,19 @@ body.desktop-mode .card-details.card-details-collapsed {
   padding-inline-start: 10px;
 }
 .card-details .card-details-item-title {
-  font-size: 16px;
+  font-size: calc(16px * var(--wekan-ui-font-scale, 1));
   font-weight: bold;
   color: #4d4d4d;
 }
+.card-details .card-details-item-customfield .js-edit-card-custom-field-value {
+  cursor: pointer;
+}
+.card-details .card-details-person-controls {
+  align-items: flex-start;
+  display: flex;
+  flex-direction: column;
+  gap: 0.25em;
+}
 .card-details .activities {
   padding-top: 10px;
 }
@@ -920,7 +972,7 @@ body.mobile-mode .card-details .card-details-header .close-card-details-mobile-w
   box-sizing: border-box;
   padding: 5px;
   margin: 3px;
-  font-size: 20px;
+  font-size: calc(20px * var(--wekan-ui-font-scale, 1));
   font-weight: bold;
   text-shadow: #2d2d2d 1px 1px 0;
   box-shadow: 0 0 5px #aaa;
@@ -946,8 +998,15 @@ body.mobile-mode .card-details .card-details-header .close-card-details-mobile-w
 }
 
 /* Sticker picker + card-detail stickers + due-complete toggle */
+/* The picker fills the popup it is in rather than stopping at eight columns:
+   the popup is wide now (popup.css), and a fixed 320px there would have left
+   the extra width empty while the icons still ran off the bottom. A grid that
+   fits as many 40px cells as there is room for turns that width into rows the
+   reader does not have to scroll past. */
 .card-stickers-picker {
-  max-width: 320px;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
+  justify-items: center;
 }
 .card-sticker-select {
   display: inline-flex;
@@ -957,7 +1016,7 @@ body.mobile-mode .card-details .card-details-header .close-card-details-mobile-w
   height: 36px;
   margin: 2px;
   border-radius: 3px;
-  font-size: 18px;
+  font-size: calc(18px * var(--wekan-ui-font-scale, 1));
   color: #4d4d4d;
   cursor: pointer;
   position: relative;
@@ -973,18 +1032,18 @@ body.mobile-mode .card-details .card-details-header .close-card-details-mobile-w
   position: absolute;
   bottom: 1px;
   inset-inline-end: 2px;
-  font-size: 10px;
+  font-size: calc(10px * var(--wekan-ui-font-scale, 1));
   color: #3cb500;
 }
 .card-stickers .card-sticker {
   display: inline-flex;
   align-items: center;
   margin: 0 8px 4px 0;
-  font-size: 18px;
+  font-size: calc(18px * var(--wekan-ui-font-scale, 1));
 }
 .card-sticker .card-sticker-remove {
   margin-inline-start: 3px;
-  font-size: 11px;
+  font-size: calc(11px * var(--wekan-ui-font-scale, 1));
   color: #999;
   cursor: pointer;
 }
@@ -1065,19 +1124,6 @@ body.mobile-mode .card-details .card-details-header .close-card-details-mobile-w
   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
@@ -1146,3 +1192,147 @@ body.mobile-mode .card-details .card-details-header .close-card-details-mobile-w
   user-select: none;
   margin: 8px 0;
 }
+
+/* #1591 gave every FIELD of the opened card a caret of its own on its title,
+   and hid everything after that title when it was folded. The section carets
+   replaced it - one handle per section, on the heading - and the two ran at the
+   same time: clicking a section's caret also folded the field the heading was
+   drawn on, and with the field's own caret gone there was nothing left to open
+   it. That is where the Date Format select went. Both halves are gone from
+   here; client/components/cards/cardDetails.js says the same at the handler. */
+
+/* Collapsible card sections.
+   Every section of an opened card - Labels, Date Format, Members, Dependencies,
+   Sort, Custom Fields, Description, Checklists, Subtasks, Attachments, Comments
+   and Activities - has one rule above it and a caret in its heading that
+   collapses it. The rule comes from the same template as the caret, so eleven
+   sections cannot end up with ten separators.
+   The heading is a button: it says so to a screen reader (role/tabindex in the
+   template) and it looks like one to a mouse. */
+/* The GROUP is the full-width row of the card, and the fields inside it share
+   rows within it - which is what puts Assignee and Creator beside Members
+   rather than under it. The class that made an individual field full width is
+   gone with the grouping; a field that is its own section is a group of one. */
+.card-details .card-details-section-rule {
+  width: 100%;
+  margin: 14px 0 6px 0;
+}
+.card-details h3.card-details-item-title.js-toggle-card-section {
+  cursor: pointer;
+  user-select: none;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+/* The hamburger that opens a section's settings, at the FAR end of its heading
+   - `margin-inline-start: auto` in a flex row, so it mirrors itself in a
+   right-to-left page. It is inside a heading that folds the section when
+   clicked, so its own handler stops the click there. */
+.card-details h3.card-details-item-title .card-details-section-menu {
+  margin-inline-start: auto;
+  padding: 0 4px;
+  color: #808080;
+  cursor: pointer;
+}
+
+.card-details h3.card-details-item-title .card-details-section-menu:hover {
+  color: #000;
+}
+
+/* The caret is the widest part of the heading that must not move as the label
+   changes length, so it gets a fixed box. `text-align: center` rather than a
+   side, because the glyph itself differs between the open and closed states
+   (down, and right or left) and a fixed side would make it jump. */
+.card-details h3.card-details-item-title.js-toggle-card-section > .fa:first-child {
+  width: 12px;
+  text-align: center;
+  flex: 0 0 auto;
+}
+.card-details h3.card-details-item-title.js-toggle-card-section:hover {
+  opacity: 0.85;
+}
+/* The checklist "3/7" line that used to be a second h3 under the Checklists
+   heading: a subtitle, so it is not read as another section. */
+.card-details .card-details-item-subtitle {
+  margin: 0 0 4px 0;
+  font-size: calc(13px * var(--wekan-ui-font-scale, 1));
+  font-weight: 400;
+  opacity: 0.8;
+}
+
+/* A GROUP of card fields - Labels with Stickers and Location, Date Format with
+   the four dates, Members with Assignee and Creator, and so on.
+   The group's own title carries the caret that folds it, and the fields inside
+   it do NOT: #1591 gives every .card-details-item a caret of its own, drawn on
+   the title by the rule further up this file, and inside a group that is a
+   second caret on every row saying the same thing in a smaller way. One handle
+   per group is what was asked for, and it is the group's.
+   The fields keep sharing rows inside the group, which is how they were laid
+   out - the group is a full-width row, the fields inside it wrap within it. */
+.card-details .card-details-items .card-details-group {
+  flex: 0 0 100%;
+  width: 100%;
+}
+.card-details .card-details-group-body {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5em;
+}
+.card-details .card-details-group-body .card-details-item {
+  flex-grow: 1;
+}
+/* The user's Custom Fields layout toggle has two deliberately distinct modes.
+   Off keeps the compact wrapping grid; on gives every field its own row. */
+.card-details .card-details-group-custom-fields .custom-fields-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr));
+}
+.card-details .card-details-group-custom-fields .custom-fields-grid > .card-details-item-customfield {
+  margin-inline-end: 0;
+  max-width: none;
+  min-width: 0;
+}
+.card-details .card-details-group-custom-fields .custom-fields-one-per-row > .card-details-item-customfield {
+  flex: 0 0 100%;
+  margin-inline-end: 0;
+  max-width: 100%;
+}
+/* The same paired-icon language as the header's Mobile / Desktop selector:
+   both choices remain visible and the active layout is the filled chip. */
+.card-details .custom-fields-layout-toggle {
+  align-items: center;
+  background: #fff;
+  border: 1px solid #999;
+  border-radius: 4px;
+  color: #4d4d4d;
+  cursor: pointer;
+  display: inline-flex;
+  gap: 2px;
+  margin: 0;
+  margin-inline-start: auto;
+  padding: 2px;
+  width: auto;
+}
+.card-details h3.card-details-item-title .custom-fields-layout-toggle + .card-details-section-menu {
+  margin-inline-start: 0;
+}
+.card-details .custom-fields-layout-toggle .grid-icon,
+.card-details .custom-fields-layout-toggle .list-icon {
+  align-items: center;
+  border-radius: 3px;
+  display: inline-flex;
+  justify-content: center;
+  min-width: 28px;
+  opacity: 0.35;
+  padding: 4px 7px;
+  transition: opacity 0.2s ease, background-color 0.2s ease;
+}
+.card-details .custom-fields-layout-toggle .grid-icon.active,
+.card-details .custom-fields-layout-toggle .list-icon.active {
+  background: var(--theme-accent, #2980b9);
+  opacity: 1;
+}
+.card-details .custom-fields-layout-toggle .grid-icon.active .fa,
+.card-details .custom-fields-layout-toggle .list-icon.active .fa {
+  color: #fff;
+}

client/components/cards/cardDetails.js

@@ -1,5 +1,6 @@
 import { ReactiveCache } from '/imports/reactiveCache';
 import { TAPi18n } from '/imports/i18n';
+import { ReactiveDict } from 'meteor/reactive-dict';
 import { FlowRouter } from 'meteor/ostrio:flow-router-extra';
 import { ReactiveVar } from 'meteor/reactive-var';
 import {
@@ -21,7 +22,6 @@ import {
   setupDatePicker,
   datePickerRendered,
   datePickerHelpers,
-  datePickerEvents,
 } from '/client/lib/datepicker';
 import {
   formatDateTime,
@@ -72,91 +72,19 @@ import { EscapeActions } from '/client/lib/escapeActions';
 import { MultiSelection } from '/client/lib/multiSelection';
 import { Utils } from '/client/lib/utils';
 import autosize from 'autosize';
+import { cardMenuSource, setCardMenuSource } from '/client/lib/cardMenuSource';
+import { caretClassFor } from '/client/lib/sectionCaret';
 
 // Id of the location currently being edited in the cardLocationsPopup; null
 // when adding a new location.
 const editingLocationId = new ReactiveVar(null);
 
-// Chinese datum conversions ("eviltransform" algorithm). Baidu Maps uses BD-09
-// and Amap (Gaode) uses GCJ-02; both are offset from the WGS-84 coordinates
-// Wekan stores, so a raw lat/lon would land a few hundred metres off. Convert on
-// the way out (mapLinkFor) and back (parseMapLink). Coordinates outside mainland
-// China use no offset, so every non-Chinese provider is unaffected.
-const GCJ = (() => {
-  const PI = Math.PI;
-  const A = 6378245.0; // Krasovsky 1940 semi-major axis
-  const EE = 0.00669342162296594323; // eccentricity squared
-  const XPI = (PI * 3000.0) / 180.0;
-  const outOfChina = (lat, lon) =>
-    lon < 72.004 || lon > 137.8347 || lat < 0.8293 || lat > 55.8271;
-  const tLat = (x, y) => {
-    let r = -100 + 2 * x + 3 * y + 0.2 * y * y + 0.1 * x * y + 0.2 * Math.sqrt(Math.abs(x));
-    r += ((20 * Math.sin(6 * x * PI) + 20 * Math.sin(2 * x * PI)) * 2) / 3;
-    r += ((20 * Math.sin(y * PI) + 40 * Math.sin((y / 3) * PI)) * 2) / 3;
-    r += ((160 * Math.sin((y / 12) * PI) + 320 * Math.sin((y * PI) / 30)) * 2) / 3;
-    return r;
-  };
-  const tLon = (x, y) => {
-    let r = 300 + x + 2 * y + 0.1 * x * x + 0.1 * x * y + 0.1 * Math.sqrt(Math.abs(x));
-    r += ((20 * Math.sin(6 * x * PI) + 20 * Math.sin(2 * x * PI)) * 2) / 3;
-    r += ((20 * Math.sin(x * PI) + 40 * Math.sin((x / 3) * PI)) * 2) / 3;
-    r += ((150 * Math.sin((x / 12) * PI) + 300 * Math.sin((x / 30) * PI)) * 2) / 3;
-    return r;
-  };
-  const wgs2gcj = (lat, lon) => {
-    if (outOfChina(lat, lon)) return [lat, lon];
-    let dLat = tLat(lon - 105, lat - 35);
-    let dLon = tLon(lon - 105, lat - 35);
-    const rad = (lat / 180) * PI;
-    let magic = Math.sin(rad);
-    magic = 1 - EE * magic * magic;
-    const sq = Math.sqrt(magic);
-    dLat = (dLat * 180) / (((A * (1 - EE)) / (magic * sq)) * PI);
-    dLon = (dLon * 180) / ((A / sq) * Math.cos(rad) * PI);
-    return [lat + dLat, lon + dLon];
-  };
-  // Approximate inverse by fixed-point iteration (converges to ~1e-9 deg).
-  const gcj2wgs = (lat, lon) => {
-    if (outOfChina(lat, lon)) return [lat, lon];
-    let wLat = lat;
-    let wLon = lon;
-    for (let i = 0; i < 10; i++) {
-      const [gLat, gLon] = wgs2gcj(wLat, wLon);
-      const dLat = gLat - lat;
-      const dLon = gLon - lon;
-      if (Math.abs(dLat) < 1e-9 && Math.abs(dLon) < 1e-9) break;
-      wLat -= dLat;
-      wLon -= dLon;
-    }
-    return [wLat, wLon];
-  };
-  const gcj2bd = (lat, lon) => {
-    const z = Math.sqrt(lon * lon + lat * lat) + 0.00002 * Math.sin(lat * XPI);
-    const theta = Math.atan2(lat, lon) + 0.000003 * Math.cos(lon * XPI);
-    return [z * Math.sin(theta) + 0.006, z * Math.cos(theta) + 0.0065];
-  };
-  const bd2gcj = (lat, lon) => {
-    const x = lon - 0.0065;
-    const y = lat - 0.006;
-    const z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * XPI);
-    const theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * XPI);
-    return [z * Math.sin(theta), z * Math.cos(theta)];
-  };
-  return {
-    wgs2gcj,
-    gcj2wgs,
-    wgs2bd: (lat, lon) => {
-      if (outOfChina(lat, lon)) return [lat, lon];
-      const [gLat, gLon] = wgs2gcj(lat, lon);
-      return gcj2bd(gLat, gLon);
-    },
-    bd2wgs: (lat, lon) => {
-      if (outOfChina(lat, lon)) return [lat, lon];
-      const [gLat, gLon] = bd2gcj(lat, lon);
-      return gcj2wgs(gLat, gLon);
-    },
-  };
-})();
+// The "open in map" link builder and the Chinese datum conversions it needs.
+// Shared with Admin Panel, which links the places accounts log in from the same
+// way - models/lib/mapLink.js.
+const { mapLinkFor, GCJ } = require('/models/lib/mapLink');
+
+
 
 // Parse coordinates (and, when present, a place name / address) out of a map
 // link from common providers, grouped by region:
@@ -230,6 +158,12 @@ function parseMapLink(url) {
   if ((m = sd.match(new RegExp(`[?&]q=${N},${N}`)))) setCoords(m[1], m[2]);
   // Generic center=lat,lon
   if ((m = sd.match(new RegExp(`[?&]center=${N},${N}`)))) setCoords(m[1], m[2]);
+  // A coordinate pair copied directly from a map or GPS application. Anchor
+  // the complete input so unrelated prose containing two numbers is not
+  // silently treated as a location.
+  if ((m = sd.match(new RegExp(`^\\s*${N}\\s*,\\s*${N}\\s*$`)))) {
+    setCoords(m[1], m[2]);
+  }
 
   if (lat !== undefined) {
     result.latitude = lat;
@@ -259,44 +193,6 @@ function parseMapLink(url) {
   return result;
 }
 
-// Build an "open in map" link for the given provider and coordinates. Mirrors
-// the providers offered in the location popup's "Open map links at" selector,
-// grouped by region (USA, Europe, Asia). Note that several non-US providers
-// expect the coordinates in lon,lat order rather than lat,lon.
-function mapLinkFor(provider, lat, lon) {
-  switch (provider) {
-    // --- USA ---
-    case 'google':
-      return `https://www.google.com/maps/search/?api=1&query=${lat},${lon}`;
-    case 'bing':
-      return `https://www.bing.com/maps?cp=${lat}~${lon}&lvl=16`;
-    case 'apple':
-      return `https://maps.apple.com/?ll=${lat},${lon}`;
-    case 'waze':
-      return `https://waze.com/ul?ll=${lat},${lon}`;
-    // --- Europe ---
-    case 'here':
-      return `https://wego.here.com/?map=${lat},${lon},16`;
-    case 'yandex':
-      return `https://yandex.com/maps/?ll=${lon},${lat}&z=16`;
-    case 'mapy':
-      return `https://mapy.cz/zakladni?x=${lon}&y=${lat}&z=16`;
-    case '2gis':
-      return `https://2gis.ru/geo/${lon},${lat}`;
-    // --- Asia (coordinates converted from WGS-84 into the local datum) ---
-    case 'baidu': {
-      const [bLat, bLon] = GCJ.wgs2bd(parseFloat(lat), parseFloat(lon));
-      return `https://api.map.baidu.com/marker?location=${bLat},${bLon}&output=html`;
-    }
-    case 'amap': {
-      const [gLat, gLon] = GCJ.wgs2gcj(parseFloat(lat), parseFloat(lon));
-      return `https://uri.amap.com/marker?position=${gLon},${gLat}`;
-    }
-    case 'openstreetmap':
-    default:
-      return `https://www.openstreetmap.org/?mlat=${lat}&mlon=${lon}#map=16/${lat}/${lon}`;
-  }
-}
 
 // SubsManager removed for Meteor 3 migration
 const { calculateIndexData } = Utils;
@@ -654,10 +550,19 @@ Template.cardDetails.onDestroyed(function () {
 });
 
 Template.cardDetails.helpers({
+  canShowCustomFieldsOnCard() {
+    const board = this?.board?.();
+    return Utils.canModifyCard(this) && board?.allowsCustomFields !== false;
+  },
+  stickers() {
+    const card = Template.currentData();
+    return card && typeof card.getStickers === 'function' ? card.getStickers() : [];
+  },
   isWatching() {
     const card = Template.currentData();
     if (!card || typeof card.findWatcher !== 'function') return false;
-    return card.findWatcher(Meteor.userId());
+    const realCard = typeof card.getRealCard === 'function' ? card.getRealCard() : card;
+    return realCard.findWatcher(Meteor.userId());
   },
 
   // #6081: number of times this card's due date has been changed, for
@@ -727,7 +632,10 @@ Template.cardDetails.helpers({
 
   showActivities() {
     const card = Template.currentData();
-    return card && card.showActivities;
+    const realCard = card && typeof card.getRealCard === 'function'
+      ? card.getRealCard()
+      : card;
+    return realCard && realCard.showActivities;
   },
 
   cardCollapsed() {
@@ -804,12 +712,11 @@ Template.cardDetails.helpers({
     const swimlaneId = card.swimlaneId;
     const selector = { boardId: card.boardId, archived: false };
     if (swimlaneId) {
-      const defaultSwimlane = board.getDefaultSwimline && board.getDefaultSwimline();
-      if (defaultSwimlane && defaultSwimlane._id === swimlaneId) {
-        selector.swimlaneId = { $in: [swimlaneId, null, ''] };
-      } else {
-        selector.swimlaneId = swimlaneId;
-      }
+      // Board-wide lists have no swimlaneId. They are shared by EVERY
+      // swimlane, not only by the first/default one. Restricting this fallback
+      // to the default swimlane made the List chooser (and move/copy chooser)
+      // empty for valid cards in every later swimlane (#6614/#6618).
+      selector.swimlaneId = { $in: [swimlaneId, null, ''] };
     }
     return ReactiveCache.getLists(selector, { sort: { sort: 1 } });
   },
@@ -828,7 +735,109 @@ Template.cardDetails.helpers({
   },
 });
 
+// WHICH SECTIONS OF A CARD ARE OPEN.
+//
+// Every section of an opened card - Labels, Date Format, Members, Dependencies,
+// Sort, Custom Fields, Description, Checklists, Subtasks, Attachments, Comments
+// and Activities - carries a caret that collapses it, and one rule above it.
+// Before this there was one caret for the whole card and an EYE on Activities
+// that showed and hid exactly what a caret would: two controls for one idea,
+// able to disagree with each other.
+//
+// The state is module-level, so it survives closing and reopening a card in the
+// same session: somebody who works with the description collapsed wants it
+// collapsed on the next card too, not just on this one.
+//
+// ACTIVITIES starts CLOSED and everything else open. A card is opened to read
+// the card; its history is the thing you go looking for.
+const CARD_SECTIONS = [
+  'labels', 'date-format', 'members', 'dependencies', 'sort', 'custom-fields',
+  'description', 'checklists', 'subtasks', 'attachments', 'comments', 'activities',
+];
+const COLLAPSED_BY_DEFAULT = ['activities'];
+
+const cardSectionState = new ReactiveDict();
+CARD_SECTIONS.forEach(section => {
+  cardSectionState.set(section, !COLLAPSED_BY_DEFAULT.includes(section));
+});
+
+function isCardSectionOpen(section) {
+  const state = cardSectionState.get(section);
+  // An unknown section is open: a new one must show up, not hide silently.
+  return state === undefined ? true : state;
+}
+
+Template.registerHelper('isSectionOpen', isCardSectionOpen);
+
+// "Attachments (3)" - the count the heading carried before it became a section,
+// and only when the board asks for it.
+Template.registerHelper('attachmentCount', function attachmentCount() {
+  const card = Utils.getCurrentCard();
+  const board = card && card.board && card.board();
+  if (!board || !board.allowsAttachmentCountOnCard) return '';
+  const attachments = card.attachments && card.attachments();
+  return attachments && attachments.length ? attachments.length : '';
+});
+
+// Which way the caret points. The rule - and the reason - is in
+// client/lib/sectionCaret.js, shared with the board sidebar's Activities, which
+// is the same control and must not point the other way in the same language.
+Template.registerHelper('sectionCaret', section =>
+  caretClassFor(isCardSectionOpen(section)));
+
+Template.cardSectionHeader.events({
+  // A hamburger at the end of a heading opens that section's settings. Neither
+  // may reach the heading itself: a click there folds the section, so opening
+  // the menu would close what you opened it from.
+  'click .js-open-subtasks-settings'(event) {
+    event.preventDefault();
+    event.stopPropagation();
+    Popup.open('boardSubtaskSettings')(event);
+  },
+  // Every custom field the board has, ticked when it is on this card, with a
+  // pencil each and "Add custom field" under a rule. The card is its data
+  // context, which is what the ticks and the toggle read.
+  // client/components/cards/cardCustomFields.jade
+  'click .js-open-custom-fields-settings'(event) {
+    event.preventDefault();
+    event.stopPropagation();
+    Popup.open('cardCustomFields').call(Utils.getCurrentCard(), event);
+  },
+
+  'click #toggleCustomFieldsGridButton'(event) {
+    event.preventDefault();
+    event.stopPropagation();
+    Meteor.call('toggleCustomFieldsGrid');
+  },
+
+  'click .js-toggle-card-section'(event) {
+    if (event.target.closest('#toggleCustomFieldsGridButton')) return;
+    event.preventDefault();
+    const section = event.currentTarget.dataset.section;
+    if (!section) return;
+    cardSectionState.set(section, !isCardSectionOpen(section));
+  },
+  // A heading that can be operated with the mouse can be operated with the
+  // keyboard: it carries role="button" and tabindex, so Enter and Space are
+  // what a screen reader user presses.
+  'keydown .js-toggle-card-section'(event) {
+    if (event.target !== event.currentTarget) return;
+    if (event.key !== 'Enter' && event.key !== ' ') return;
+    event.preventDefault();
+    const section = event.currentTarget.dataset.section;
+    if (section) cardSectionState.set(section, !isCardSectionOpen(section));
+  },
+});
+
 Template.cardDetails.events({
+  // #1591 folded each FIELD by its own title, storing a class per card in the
+  // profile. The section carets replaced it: one handle per section, on the
+  // heading, and every field lives in a section now. Both were still running,
+  // and they fought - clicking a section's caret also ran the old handler, so
+  // the field it was drawn on was left `is-collapsed` with nothing to open it
+  // again, and the Date Format select vanished for good. The old half is gone;
+  // the same store is still the CHECKLISTS' (client/components/cards/checklists.js),
+  // which is why it is not.
   [`${CSSEvents.transitionend} .js-card-details`](event, tpl) {
     tpl.isLoaded.set(true);
   },
@@ -878,11 +887,23 @@ Template.cardDetails.events({
     $(document).on('mouseup', onMouseUp);
   },
   'mousedown .js-card-title-drag-handle'(event) {
-    // Allow dragging from title for ReadOnly users
-    // Don't interfere with text selection
+    // The title bar drags the window. Don't interfere with text selection.
     if (event.target.tagName === 'A' || $(event.target).closest('a').length > 0) {
       return; // Don't drag if clicking on links
     }
+    // ...and don't drag from the half that EDITS. The title is split like a
+    // minicard's: the leading half opens the editor, the trailing half is what
+    // you take hold of. With drag handles ON the zone covers the whole title
+    // (cardDetails.css), so the window is dragged by its handle alone - which is
+    // what turning handles on means.
+    if ($(event.target).closest('.card-details-title-edit-zone').length > 0) {
+      return;
+    }
+    // The drag handle has its own handler; without this both would run and the
+    // window would be moved twice by one press.
+    if ($(event.target).closest('.js-card-drag-handle').length > 0) {
+      return;
+    }
 
     event.preventDefault();
     const $card = $(event.target).closest('.card-details');
@@ -969,7 +990,12 @@ Template.cardDetails.events({
       window.localStorage.setItem('dateFormat', dateFormat);
     }
   },
-  'click .js-open-card-details-menu': Popup.open('cardDetailsActions'),
+  // The opened card's own hamburger. It says so, so the menu's first entry is
+  // "Show on Card" rather than the minicard's "Show on Minicard".
+  'click .js-open-card-details-menu'(event) {
+    setCardMenuSource('card');
+    Popup.open('cardDetailsActions').call(this, event);
+  },
   // Mobile: switch to desktop popup view (maximize)
   'click .js-mobile-switch-to-desktop'(event) {
     event.preventDefault();
@@ -1108,6 +1134,8 @@ Template.cardDetails.events({
   },
   'click .js-member': Popup.open('cardMember'),
   'click .js-add-members': Popup.open('cardMembers'),
+  'click .js-select-requester': Popup.open('cardRequestedBy', { titleKey: 'requested-by' }),
+  'click .js-select-assigner': Popup.open('cardAssignedBy', { titleKey: 'assigned-by' }),
   'click .js-assignee': Popup.open('cardAssignee'),
   'click .js-add-assignees': Popup.open('cardAssignees'),
   'click .js-add-labels': Popup.open('cardLabels'),
@@ -1165,7 +1193,6 @@ Template.cardDetails.events({
   'click .js-end-date': Popup.open('editCardEndDate'),
   'click .js-show-positive-votes': Popup.open('positiveVoteMembers'),
   'click .js-show-negative-votes': Popup.open('negativeVoteMembers'),
-  'click .js-custom-fields': Popup.open('cardCustomFields'),
   'mouseenter .js-card-details'(event, tpl) {
     const boardBody = getBoardBodyInstance(tpl);
     if (boardBody === null) return;
@@ -1189,13 +1216,6 @@ Template.cardDetails.events({
     const card = Template.currentData();
     await card.toggleHideCheckedChecklistItems();
   },
-  async 'click .js-toggle-show-activities-card'() {
-    const card = Template.currentData();
-    await card.toggleShowActivities();
-  },
-  'click #toggleCustomFieldsGridButton'() {
-    Meteor.call('toggleCustomFieldsGrid');
-  },
   'click .js-maximize-card-details'() {
     if (Meteor.userId()) {
       Meteor.call('toggleCardMaximized');
@@ -1224,50 +1244,50 @@ Template.cardDetails.events({
       newState = forIt;
     }
     // Use secure server method; direct client updates to vote are blocked
-    Meteor.call('cards.vote', card._id, newState);
+    Meteor.call('cards.vote', card.getRealId(), newState);
   },
   'click .js-poker'(e) {
     const card = Template.currentData();
     let newState = null;
     if ($(e.target).hasClass('js-poker-vote-one')) {
       newState = 'one';
-      Meteor.call('cards.pokerVote', card._id, newState);
+      Meteor.call('cards.pokerVote', card.getRealId(), newState);
     }
     if ($(e.target).hasClass('js-poker-vote-two')) {
       newState = 'two';
-      Meteor.call('cards.pokerVote', card._id, newState);
+      Meteor.call('cards.pokerVote', card.getRealId(), newState);
     }
     if ($(e.target).hasClass('js-poker-vote-three')) {
       newState = 'three';
-      Meteor.call('cards.pokerVote', card._id, newState);
+      Meteor.call('cards.pokerVote', card.getRealId(), newState);
     }
     if ($(e.target).hasClass('js-poker-vote-five')) {
       newState = 'five';
-      Meteor.call('cards.pokerVote', card._id, newState);
+      Meteor.call('cards.pokerVote', card.getRealId(), newState);
     }
     if ($(e.target).hasClass('js-poker-vote-eight')) {
       newState = 'eight';
-      Meteor.call('cards.pokerVote', card._id, newState);
+      Meteor.call('cards.pokerVote', card.getRealId(), newState);
     }
     if ($(e.target).hasClass('js-poker-vote-thirteen')) {
       newState = 'thirteen';
-      Meteor.call('cards.pokerVote', card._id, newState);
+      Meteor.call('cards.pokerVote', card.getRealId(), newState);
     }
     if ($(e.target).hasClass('js-poker-vote-twenty')) {
       newState = 'twenty';
-      Meteor.call('cards.pokerVote', card._id, newState);
+      Meteor.call('cards.pokerVote', card.getRealId(), newState);
     }
     if ($(e.target).hasClass('js-poker-vote-forty')) {
       newState = 'forty';
-      Meteor.call('cards.pokerVote', card._id, newState);
+      Meteor.call('cards.pokerVote', card.getRealId(), newState);
     }
     if ($(e.target).hasClass('js-poker-vote-one-hundred')) {
       newState = 'oneHundred';
-      Meteor.call('cards.pokerVote', card._id, newState);
+      Meteor.call('cards.pokerVote', card.getRealId(), newState);
     }
     if ($(e.target).hasClass('js-poker-vote-unsure')) {
       newState = 'unsure';
-      Meteor.call('cards.pokerVote', card._id, newState);
+      Meteor.call('cards.pokerVote', card.getRealId(), newState);
     }
   },
   'click .js-poker-finish'(e) {
@@ -1275,16 +1295,16 @@ Template.cardDetails.events({
       e.preventDefault();
       const card = Template.currentData();
       const now = new Date();
-      Meteor.call('cards.setPokerEnd', card._id, now);
+      Meteor.call('cards.setPokerEnd', card.getRealId(), now);
     }
   },
   'click .js-poker-replay'(e) {
     if ($(e.target).hasClass('js-poker-replay')) {
       e.preventDefault();
       const currentCard = Template.currentData();
-      Meteor.call('cards.replayPoker', currentCard._id);
-      Meteor.call('cards.unsetPokerEnd', currentCard._id);
-      Meteor.call('cards.unsetPokerEstimation', currentCard._id);
+      Meteor.call('cards.replayPoker', currentCard.getRealId());
+      Meteor.call('cards.unsetPokerEnd', currentCard.getRealId());
+      Meteor.call('cards.unsetPokerEstimation', currentCard.getRealId());
     }
   },
   'click .js-poker-estimation'(event, tpl) {
@@ -1295,9 +1315,9 @@ Template.cardDetails.events({
       tpl.find('#pokerEstimation').value = '';
 
       if (ruleTitle) {
-        Meteor.call('cards.setPokerEstimation', card._id, parseInt(ruleTitle, 10));
+        Meteor.call('cards.setPokerEstimation', card.getRealId(), parseInt(ruleTitle, 10));
       } else {
-        Meteor.call('cards.unsetPokerEstimation', card._id);
+        Meteor.call('cards.unsetPokerEstimation', card.getRealId());
       }
     }
   },
@@ -1394,90 +1414,9 @@ Template.cardDetailsPopup.helpers({
   },
 });
 
-// Ordered list of Excel export field keys and their i18n label keys.
-// Must match ALL_FIELDS in models/server/ExporterExcelCard.js.
-const EXCEL_EXPORT_FIELDS = [
-  { field: 'labels',      label: 'labels' },
-  { field: 'people',      label: 'export-card-field-people' },
-  { field: 'board-info',  label: 'export-card-field-board-info' },
-  { field: 'dates',       label: 'export-card-field-dates' },
-  { field: 'description', label: 'description' },
-  { field: 'checklists',  label: 'checklists' },
-  { field: 'subtasks',    label: 'export-card-subtasks' },
-  { field: 'comments',    label: 'comments' },
-  { field: 'attachments', label: 'attachments' },
-];
-
-Template.exportCardPopup.onCreated(function () {
-  // Track which Excel sections the user wants to include (all on by default)
-  const initial = {};
-  EXCEL_EXPORT_FIELDS.forEach(({ field }) => { initial[field] = true; });
-  this.excelFields = new ReactiveDict(initial);
-});
-
-Template.exportCardPopup.helpers({
-  exportUrlCardPDF() {
-    const card = getCurrentCardFromContext({ ignorePopupCard: true }) || this;
-    const params = {
-      boardId: card.boardId || Session.get('currentBoard'),
-      listId: card.listId,
-      cardId: card._id || card.cardId,
-    };
-    return FlowRouter.path(
-      '/api/boards/:boardId/lists/:listId/cards/:cardId/exportPDF',
-      params,
-      { authToken: Accounts._storedLoginToken() },
-    );
-  },
-  exportFilenameCardPDF() {
-    const card = getCurrentCardFromContext({ ignorePopupCard: true }) || this;
-    return `${String(card.title || 'export-card')
-      .replace(/[^a-z0-9._-]+/gi, '-')
-      .replace(/-+/g, '-')
-      .replace(/^-|-$/g, '') || 'export-card'}.pdf`;
-  },
-  // Returns the field list with current checked state — reactive
-  excelExportFields() {
-    const instance = Template.instance();
-    return EXCEL_EXPORT_FIELDS.map(f => ({
-      field:   f.field,
-      label:   f.label,
-      checked: instance.excelFields.get(f.field),
-    }));
-  },
-  exportUrlCardExcel() {
-    const instance = Template.instance();
-    const card = getCurrentCardFromContext({ ignorePopupCard: true }) || this;
-    const params = {
-      boardId: card.boardId || Session.get('currentBoard'),
-      listId:  card.listId,
-      cardId:  card._id || card.cardId,
-    };
-    const selectedFields = EXCEL_EXPORT_FIELDS
-      .map(f => f.field)
-      .filter(f => instance.excelFields.get(f));
-    return FlowRouter.path(
-      '/api/boards/:boardId/lists/:listId/cards/:cardId/exportExcel',
-      params,
-      { authToken: Accounts._storedLoginToken(), fields: selectedFields.join(','), lang: TAPi18n.getLanguage() },
-    );
-  },
-  exportFilenameCardExcel() {
-    const card = getCurrentCardFromContext({ ignorePopupCard: true }) || this;
-    return `${String(card.title || 'export-card')
-      .replace(/[^a-z0-9._-]+/gi, '-')
-      .replace(/-+/g, '-')
-      .replace(/^-|-$/g, '') || 'export-card'}.xlsx`;
-  },
-});
-
-Template.exportCardPopup.events({
-  'click .js-excel-field-toggle'(event, instance) {
-    event.preventDefault();
-    const field = event.currentTarget.dataset.field;
-    instance.excelFields.set(field, !instance.excelFields.get(field));
-  },
-});
+// #1173: the card export popup is client/components/boards/exportScope.js now -
+// one body, one field list and one url builder for the card, the list, the
+// swimlane and the board. What was here was a second copy of all three.
 
 // only allow number input
 Template.editCardSortOrderForm.onRendered(function () {
@@ -1580,6 +1519,12 @@ Template.cardDetailsActionsPopup.helpers({
     return ReactiveCache.getCurrentUser()?.isBoardAdmin();
   },
 
+  // Which of the two hamburgers opened this menu, so its first entry can be
+  // about the thing the user is looking at. client/lib/cardMenuSource.js
+  isMinicardMenu() {
+    return cardMenuSource() === 'minicard';
+  },
+
   showListOnMinicard() {
     return this.showListOnMinicard;
   },
@@ -1590,7 +1535,7 @@ Template.cardDetailsActionsPopup.events({
   // tooltip to name it - the one place a name cannot be read without hovering -
   // and it is here now beside the swimlane's and the list's, so all three are
   // copied the same way from the same kind of menu.
-  // docs/Design/Page/Board-Item-Links.md
+  // docs/Features/Page/Board-Item-Links.md
   'click .js-copy-card-link'(event, tpl) {
     event.preventDefault();
     const card = Template.currentData();
@@ -1599,13 +1544,24 @@ Template.cardDetailsActionsPopup.events({
     if (!url) return;
     Utils.showCopied(Utils.copyTextToClipboard(url), tpl.$('.copied-tooltip'));
   },
+  // The board's Card Settings, one column of them, titled by the key the app
+  // already has for that column - so no `showOnCardPopup-title` has to be added
+  // to 147 language files to say a phrase they have already translated.
+  'click .js-show-on-card': Popup.open('showOnCard', { titleKey: 'show-on-card' }),
+  // "Custom Fields" is ONE entry: it opens the picker for which of the board's
+  // fields are on THIS card, and that popup's own Settings cog opens the
+  // board's list of fields, where one is created, renamed or deleted. Two
+  // entries for the two halves put the general one above the particular one and
+  // made the menu ask which you wanted before you had seen either.
+  // client/components/cards/cardCustomFields.jade
+  'click .js-show-on-minicard': Popup.open('showOnMinicard', { titleKey: 'show-on-minicard' }),
   'click .js-export-card': Popup.open('exportCard'),
+  'click .js-import-card': Popup.open('importCard'),
   'click .js-members': Popup.open('cardMembers'),
   'click .js-assignees': Popup.open('cardAssignees'),
   'click .js-attachments': Popup.open('cardAttachments'),
   'click .js-start-voting': Popup.open('cardStartVoting'),
   'click .js-start-planning-poker': Popup.open('cardStartPlanningPoker'),
-  'click .js-custom-fields': Popup.open('cardCustomFields'),
   'click .js-received-date': Popup.open('editCardReceivedDate'),
   'click .js-start-date': Popup.open('editCardStartDate'),
   'click .js-due-date': Popup.open('editCardDueDate'),
@@ -1653,16 +1609,17 @@ Template.cardDetailsActionsPopup.events({
   'click .js-toggle-watch-card'() {
     const currentCard = Cards.findOne(getCardId());
     if (!currentCard) return;
-    const level = currentCard.findWatcher(Meteor.userId()) ? null : 'watching';
-    Meteor.call('watch', 'card', currentCard._id, level, (err, ret) => {
+    const sourceCard = currentCard.getRealCard();
+    const level = sourceCard.findWatcher(Meteor.userId()) ? null : 'watching';
+    Meteor.call('watch', 'card', currentCard.getRealId(), level, (err, ret) => {
       if (!err && ret) Popup.close();
     });
   },
   'click .js-toggle-show-list-on-minicard'() {
     const currentCard = Cards.findOne(getCardId());
     if (!currentCard) return;
-    const newValue = !currentCard.showListOnMinicard;
-    Cards.update(currentCard._id, { $set: { showListOnMinicard: newValue } });
+    const newValue = !currentCard.getRealCard().showListOnMinicard;
+    Cards.update(currentCard.getRealId(), { $set: { showListOnMinicard: newValue } });
     Popup.close();
   },
 });
@@ -1739,6 +1696,48 @@ Template.cardMembersPopup.helpers({
   },
 });
 
+Template.cardIdentityPicker.onCreated(function () {
+  this.filterTerm = new ReactiveVar('');
+});
+
+Template.cardIdentityPicker.events({
+  'click .js-select-card-identity'(event, tpl) {
+    event.preventDefault();
+    const card = getCurrentCardFromContext();
+    const user = ReactiveCache.getUser(this.userId);
+    if (!card || !user) return;
+    if (tpl.data.field === 'requesters') card.toggleRequester(user._id);
+    if (tpl.data.field === 'assigners') card.toggleAssigner(user._id);
+  },
+  'keyup .card-identity-filter'(event) {
+    Template.instance().filterTerm.set(event.target.value);
+  },
+});
+
+Template.cardIdentityPicker.helpers({
+  members() {
+    return [...uniqBy(filterMembers(Template.instance().filterTerm.get()), 'userId')]
+      .sort((a, b) => {
+        const userA = ReactiveCache.getUser(a.userId);
+        const userB = ReactiveCache.getUser(b.userId);
+        const nameA = (userA && userA.profile && userA.profile.fullname) || '';
+        const nameB = (userB && userB.profile && userB.profile.fullname) || '';
+        return nameA.localeCompare(nameB);
+      });
+  },
+  userData() {
+    return ReactiveCache.getUser(this.userId);
+  },
+  isSelected() {
+    const card = getCurrentCardFromContext();
+    const user = ReactiveCache.getUser(this.userId);
+    if (!card || !user) return false;
+    const selected = Template.instance().data.field === 'requesters'
+      ? card.getRequesters() : card.getAssigners();
+    return (selected || []).includes(user._id);
+  },
+});
+
 // Popup that adds or edits a single card location (name, address, latitude,
 // longitude). Cards can hold multiple locations, like members.
 Template.cardLocationsPopup.onCreated(function () {
@@ -1762,11 +1761,6 @@ Template.cardLocationsPopup.helpers({
   detectMessage() {
     return Template.instance().detectMsg.get();
   },
-  isMapProvider(provider) {
-    const user = ReactiveCache.getCurrentUser();
-    const current = user ? user.getMapProvider() : 'openstreetmap';
-    return current === provider;
-  },
   mapSavedMessage() {
     return Template.instance().mapSavedMsg.get();
   },
@@ -1911,47 +1905,75 @@ Template.editCardAssignerForm.events({
   },
 });
 
+
+// The four selects of the move/copy dialogs, in one template. The dialog comes
+// from the popup that includes it and is kept on THIS instance: inside
+// `each boards` the data context is a board, so a helper reaching into the
+// context for it would find nothing there.
+Template.cardDestinationPicker.onCreated(function () {
+  this.autorun(() => {
+    const data = Template.currentData();
+    this.dialog = data && data.dialog;
+  });
+});
+
+Template.cardDestinationPicker.helpers({
+  boards() {
+    return Template.instance().dialog.boards();
+  },
+  swimlanes() {
+    return Template.instance().dialog.swimlanes();
+  },
+  lists() {
+    return Template.instance().dialog.lists();
+  },
+  cards() {
+    return Template.instance().dialog.cards();
+  },
+  isDialogOptionBoardId(boardId) {
+    return Template.instance().dialog.isDialogOptionBoardId(boardId);
+  },
+  isDialogOptionSwimlaneId(swimlaneId) {
+    return Template.instance().dialog.isDialogOptionSwimlaneId(swimlaneId);
+  },
+  isDialogOptionListId(listId) {
+    return Template.instance().dialog.isDialogOptionListId(listId);
+  },
+  isSelectedBoardId(boardId) {
+    return Template.instance().dialog.isSelectedBoardId(boardId);
+  },
+  isSelectedSwimlaneId(swimlaneId) {
+    return Template.instance().dialog.isSelectedSwimlaneId(swimlaneId);
+  },
+  isSelectedListId(listId) {
+    return Template.instance().dialog.isSelectedListId(listId);
+  },
+  isDialogOptionCardId(cardId) {
+    return Template.instance().dialog.isDialogOptionCardId(cardId);
+  },
+  isTitleDefault(title) {
+    return Template.instance().dialog.isTitleDefault(title);
+  },
+});
+
 /**
  * Helper: register standard board/swimlane/list/card dialog helpers and events
  * for a template that uses BoardSwimlaneListCardDialog.
  */
+/**
+ * Helper: register standard board/swimlane/list/card dialog helpers and events
+ * for a template that uses BoardSwimlaneListCardDialog.
+ *
+ * The MARKUP those helpers feed is one template - `cardDestinationPicker` in
+ * cardDetails.jade, included by all four popups - so the helpers are registered
+ * on it, once, below. What each popup needs of its own is the `dialog` to hand
+ * that template, and the events: a change or a click inside the picker bubbles
+ * up to the popup that includes it, which is the one holding the dialog.
+ */
 function registerCardDialogTemplate(templateName) {
   Template[templateName].helpers({
-    boards() {
-      return Template.instance().dialog.boards();
-    },
-    swimlanes() {
-      return Template.instance().dialog.swimlanes();
-    },
-    lists() {
-      return Template.instance().dialog.lists();
-    },
-    cards() {
-      return Template.instance().dialog.cards();
-    },
-    isDialogOptionBoardId(boardId) {
-      return Template.instance().dialog.isDialogOptionBoardId(boardId);
-    },
-    isDialogOptionSwimlaneId(swimlaneId) {
-      return Template.instance().dialog.isDialogOptionSwimlaneId(swimlaneId);
-    },
-    isDialogOptionListId(listId) {
-      return Template.instance().dialog.isDialogOptionListId(listId);
-    },
-    isSelectedBoardId(boardId) {
-      return Template.instance().dialog.isSelectedBoardId(boardId);
-    },
-    isSelectedSwimlaneId(swimlaneId) {
-      return Template.instance().dialog.isSelectedSwimlaneId(swimlaneId);
-    },
-    isSelectedListId(listId) {
-      return Template.instance().dialog.isSelectedListId(listId);
-    },
-    isDialogOptionCardId(cardId) {
-      return Template.instance().dialog.isDialogOptionCardId(cardId);
-    },
-    isTitleDefault(title) {
-      return Template.instance().dialog.isTitleDefault(title);
+    dialog() {
+      return Template.instance().dialog;
     },
   });
 
@@ -2481,16 +2503,16 @@ Template.cardStartVotingPopup.events({
       'is-checked',
     );
     const endString = card.getVoteEnd();
-    Meteor.call('cards.setVoteQuestion', card._id, voteQuestion, publicVote, allowNonBoardMembers);
+    Meteor.call('cards.setVoteQuestion', card.getRealId(), voteQuestion, publicVote, allowNonBoardMembers);
     if (endString) {
-      Meteor.call('cards.setVoteEnd', card._id, new Date(endString));
+      Meteor.call('cards.setVoteEnd', card.getRealId(), new Date(endString));
     }
     Popup.back();
   },
   'click .js-remove-vote': Popup.afterConfirm('deleteVote', function () {
     const card = Cards.findOne(getCardId());
     if (!card) return;
-    Meteor.call('cards.unsetVote', card._id);
+    Meteor.call('cards.unsetVote', card.getRealId());
     Popup.back();
   }),
   'click a.js-toggle-vote-public'(event) {
@@ -2537,6 +2559,12 @@ Template.editVoteEndDatePopup.onCreated(function () {
   setupDatePicker(this, {
     defaultTime: formatDateTime(now()),
     initialDate: card?.getVoteEnd ? (card.getVoteEnd() || undefined) : undefined,
+    async storeDate(date, currentCard) {
+      await Meteor.callAsync('cards.setVoteEnd', currentCard.getRealId(), date);
+    },
+    async deleteDate(currentCard) {
+      await Meteor.callAsync('cards.unsetVoteEnd', currentCard.getRealId());
+    },
   });
 });
 
@@ -2546,15 +2574,6 @@ Template.editVoteEndDatePopup.onRendered(function () {
 
 Template.editVoteEndDatePopup.helpers(datePickerHelpers());
 
-Template.editVoteEndDatePopup.events(datePickerEvents({
-  storeDate(date) {
-    Meteor.call('cards.setVoteEnd', this.datePicker.card._id, date);
-  },
-  deleteDate() {
-    Meteor.call('cards.unsetVoteEnd', this.datePicker.card._id);
-  },
-}));
-
 Template.cardStartPlanningPokerPopup.onCreated(function () {
   const cardId = getCardId();
   this.currentCard = Cards.findOne(cardId);
@@ -2588,16 +2607,16 @@ Template.cardStartPlanningPokerPopup.events({
     );
     const endString = card.getPokerEnd();
 
-    Meteor.call('cards.setPokerQuestion', card._id, pokerQuestion, allowNonBoardMembers);
+    Meteor.call('cards.setPokerQuestion', card.getRealId(), pokerQuestion, allowNonBoardMembers);
     if (endString) {
-      Meteor.call('cards.setPokerEnd', card._id, new Date(endString));
+      Meteor.call('cards.setPokerEnd', card.getRealId(), new Date(endString));
     }
     Popup.back();
   },
   'click .js-remove-poker': Popup.afterConfirm('deletePoker', function () {
     const card = Cards.findOne(getCardId());
     if (!card) return;
-    Meteor.call('cards.unsetPoker', card._id);
+    Meteor.call('cards.unsetPoker', card.getRealId());
     Popup.back();
   }),
   'click a.js-toggle-poker-allow-non-members'(event) {
@@ -2612,6 +2631,12 @@ Template.editPokerEndDatePopup.onCreated(function () {
   setupDatePicker(this, {
     defaultTime: formatDateTime(now()),
     initialDate: card?.getPokerEnd ? (card.getPokerEnd() || undefined) : undefined,
+    async storeDate(date, currentCard) {
+      await Meteor.callAsync('cards.setPokerEnd', currentCard.getRealId(), date);
+    },
+    async deleteDate(currentCard) {
+      await Meteor.callAsync('cards.unsetPokerEnd', currentCard.getRealId());
+    },
   });
 });
 
@@ -2621,15 +2646,6 @@ Template.editPokerEndDatePopup.onRendered(function () {
 
 Template.editPokerEndDatePopup.helpers(datePickerHelpers());
 
-Template.editPokerEndDatePopup.events(datePickerEvents({
-  storeDate(date) {
-    Meteor.call('cards.setPokerEnd', this.datePicker.card._id, date);
-  },
-  deleteDate() {
-    Meteor.call('cards.unsetPokerEnd', this.datePicker.card._id);
-  },
-}));
-
 // Close the card details pane by pressing escape
 EscapeActions.register(
   'detailsPane',

client/components/cards/checklists.css

@@ -54,12 +54,12 @@ textarea.js-edit-checklist-item {
   float: inline-start;
   width: 30px;
   height: 30px;
-  font-size: 18px;
-  line-height: 30px;
+  font-size: calc(18px * var(--wekan-ui-font-scale, 1));
+  line-height: calc(30px * var(--wekan-ui-font-scale, 1));
 }
 .checklist-title .title {
-  font-size: 18px;
-  line-height: 25px;
+  font-size: calc(18px * var(--wekan-ui-font-scale, 1));
+  line-height: calc(25px * var(--wekan-ui-font-scale, 1));
 }
 .checklist-title .checklist-stat {
   margin: 0 0.5em;
@@ -93,7 +93,7 @@ textarea.js-edit-checklist-item {
 }
 .checklist-item {
   margin: 0 0 0 0.1em;
-  line-height: 18px;
+  line-height: calc(18px * var(--wekan-ui-font-scale, 1));
   font-size: 1.1em;
   margin-top: 3px;
   display: flex;
@@ -191,3 +191,26 @@ textarea.js-edit-checklist-item {
 .edit-controls label.toggle-label {
   margin-inline-start: 2px;
 }
+
+/* #1591: the fold caret on a checklist title. Sized and coloured like the
+   actions menu beside it so the two read as one row of controls, and given a
+   real hit area - it is a single glyph, and a caret you have to aim at is worse
+   than no caret. */
+.checklist-title .checklist-collapse {
+  /* Logical, so the caret sits on the reading-start side under dir=rtl too
+     (tests/rtl.test.js enforces this across component CSS). */
+  float: inline-start;
+  margin-block-start: 2px;
+  margin-inline-end: 4px;
+  padding: 2px 4px;
+  color: #808080;
+  font-size: calc(14px * var(--wekan-ui-font-scale, 1));
+  line-height: calc(14px * var(--wekan-ui-font-scale, 1));
+  cursor: pointer;
+  text-decoration: none;
+}
+
+.checklist-title .checklist-collapse:hover,
+.checklist-title .checklist-collapse:focus-visible {
+  color: #2980b9;
+}

client/components/cards/checklists.jade

@@ -1,8 +1,9 @@
 template(name="checklists")
+  //- The NAME of this section is drawn by +cardSectionHeader in cardDetails.jade,
+    with the caret that collapses it and the rule above it. What stays here is
+    the control that belongs to the list itself: add a checklist.
   .checklists-title
     h3.card-details-item-title
-      i.fa.fa-check
-      | {{_ 'checklists'}}
       if canModifyCard
         +inlinedForm(autoclose=false classNames="js-add-checklist" cardId = cardId
           position="top")
@@ -38,6 +39,15 @@ template(name="checklistDetail")
     else
       .checklist-title
         span
+        //- #1591: fold a long checklist out of the way. A caret rather than
+          another entry in the actions menu, because the whole point is to do it
+          at a glance while reading the card - and it is a view preference of
+          this user, so it does not touch the card.
+        a.fa.checklist-collapse.js-collapse-checklist(
+          class="{{#if checklistCollapsed}}fa-caret-right{{else}}fa-caret-down{{/if}}"
+          title="{{#if checklistCollapsed}}{{_ 'expand-checklist'}}{{else}}{{_ 'collapse-checklist'}}{{/if}}"
+          role="button" tabindex="0"
+          aria-expanded="{{#if checklistCollapsed}}false{{else}}true{{/if}}")
         if canModifyCard
           a.fa.fa-navicon.checklist-details-menu.js-open-checklist-details-menu(title="{{_ 'checklistActionsPopup-title'}}")
 
@@ -52,12 +62,15 @@ template(name="checklistDetail")
             +viewer
                 = checklist.title
 
+    //- The progress bar stays visible when folded: it is the summary of what was
+      folded away, so hiding it too would leave a title that says nothing.
     if $gt finishedPercent 0
       .checklist-progress-bar-container
         .checklist-progress-text {{finishedPercent}}%
         .checklist-progress-bar
           .checklist-progress(style="width:{{finishedPercent}}%")
-    +checklistItems(checklist = checklist card = card)
+    unless checklistCollapsed
+      +checklistItems(checklist = checklist card = card)
 
 template(name="checklistDeletePopup")
   p {{_ 'confirm-checklist-delete-popup'}}
@@ -155,6 +168,14 @@ template(name='checklistItemDetail')
           = item.title
 
 template(name="checklistActionsPopup")
+  //- #1173: a checklist exports like everything else - the same popup body, with
+    the checklist as its scope. Reading, so it is above the rows that change it.
+  ul.pop-over-list
+    li
+      a.js-export-checklist
+        i.fa.fa-exchange
+        | {{_ 'export'}} / {{_ 'import'}} ...
+  hr
   ul.pop-over-list
     li
       a.js-delete-checklist.delete-checklist
@@ -188,7 +209,11 @@ template(name="checklistActionsPopup")
         i.fa.fa-th-list
         | {{_ "show-on-minicard"}} ...
         .material-toggle-switch(title="{{_ 'show-on-minicard'}}")
-          if checklist.showChecklistAtMinicard
+          //- The switch shows what is ON THE MINICARD, not the raw field. Drawn
+            from the field it read OFF beside a checklist that was plainly showing,
+            because the board default (allowsChecklistsOnMinicard, on out of the
+            box) put it there - reported by email.
+          if shownAtMinicard
             input.toggle-switch(type="checkbox" id="toggleShowChecklistAtMinicard_{{checklist._id}}" checked="checked")
           else
             input.toggle-switch(type="checkbox" id="toggleShowChecklistAtMinicard_{{checklist._id}}")

client/components/cards/checklists.js

@@ -8,6 +8,7 @@ import { BoardSwimlaneListCardDialog } from '/client/lib/dialogWithBoardSwimlane
 import { EscapeActions } from '/client/lib/escapeActions';
 import { Utils } from '/client/lib/utils';
 import autosize from 'autosize';
+import { isChecklistShownAtMinicard } from '/models/lib/minicardChecklistVisibility';
 
 // SubsManager removed for Meteor 3 migration
 const { calculateIndexData } = Utils;
@@ -82,6 +83,47 @@ Template.checklistDetail.helpers({
     const ret = this.checklist.finishedPercent();
     return ret;
   },
+  /** #1591: is this checklist folded for THIS user?
+   *
+   * Per-user, keyed by card and checklist, exactly like collapsed lists and
+   * swimlanes - not the checklist's own hideAllChecklistItems, which is a field
+   * on the checklist and so changes what everyone on the board sees. `null` from
+   * the getter means "never set", which is what makes the default (expanded)
+   * distinguishable from somebody having deliberately expanded it. */
+  checklistCollapsed() {
+    const checklist = this.checklist;
+    if (!checklist || !checklist._id) return false;
+    const user = ReactiveCache.getCurrentUser();
+    if (!user) return false;
+    const cardId = (this.card && this.card._id) || checklist.cardId;
+    const stored = user.getCollapsedCardSection(
+      cardId, user.checklistSectionKey(checklist._id));
+    return stored === true;
+  },
+});
+
+Template.checklistDetail.events({
+  'click .js-collapse-checklist'(event) {
+    // The caret sits inside the title, which opens the inline rename form when
+    // clicked - so this must not reach it.
+    event.preventDefault();
+    event.stopPropagation();
+    const checklist = this.checklist;
+    const user = ReactiveCache.getCurrentUser();
+    if (!checklist || !checklist._id || !user) return;
+    const cardId = (this.card && this.card._id) || checklist.cardId;
+    const key = user.checklistSectionKey(checklist._id);
+    const collapsed = user.getCollapsedCardSection(cardId, key) === true;
+    user.setCollapsedCardSection(cardId, key, !collapsed);
+  },
+  'keydown .js-collapse-checklist'(event) {
+    // It is a link acting as a button, so it has to answer the keys a button
+    // answers or it is unreachable without a mouse.
+    if (event.key !== 'Enter' && event.key !== ' ') return;
+    event.preventDefault();
+    event.stopPropagation();
+    $(event.currentTarget).trigger('click');
+  },
 });
 
 Template.checklists.helpers({
@@ -256,7 +298,26 @@ Template.addChecklistItemForm.events({
   },
 });
 
+// The board default this checklist's own setting overrides. Read here rather than
+// in the model helper, because the model runs on the server too, where looking a
+// board up is asynchronous - and a Blaze helper has to answer now.
+function boardAllowsChecklistsOnMinicard(checklist) {
+  if (!checklist) return false;
+  const board = ReactiveCache.getBoard(checklist.boardId);
+  return !!(board && board.allowsChecklistsOnMinicard);
+}
+
+Template.checklistActionsPopup.helpers({
+  // What the "Show on minicard" switch draws: whether the checklist is on the
+  // minicard right now, board default included.
+  shownAtMinicard() {
+    const checklist = this.checklist;
+    return isChecklistShownAtMinicard(checklist, boardAllowsChecklistsOnMinicard(checklist));
+  },
+});
+
 Template.checklistActionsPopup.events({
+  'click .js-export-checklist': Popup.open('exportChecklist'),
   'click .js-delete-checklist': Popup.afterConfirm('checklistDelete', function () {
     Popup.back(2);
     const checklist = this.checklist;
@@ -279,7 +340,12 @@ Template.checklistActionsPopup.events({
   },
   'click .js-show-checklist-at-minicard'(event) {
     event.preventDefault();
-    Template.currentData().checklist.toggleShowChecklistAtMinicard();
+    const checklist = Template.currentData().checklist;
+    // The board's setting is the default this one overrides, so the toggle has to
+    // flip what is ON SCREEN, not the raw field. Flipping the field is what made
+    // the first click do nothing while the board default was on (false -> true,
+    // still shown) - reported by email.
+    checklist.toggleShowChecklistAtMinicard(boardAllowsChecklistsOnMinicard(checklist));
     Popup.back();
   },
 });

client/components/cards/labels.css

@@ -17,7 +17,7 @@
   background: #fff;
   color: #333;
   cursor: pointer;
-  font-size: 14px;
+  font-size: calc(14px * var(--wekan-ui-font-scale, 1));
   line-height: 1.4;
   text-decoration: none;
 }
@@ -41,7 +41,7 @@
   background: #fff;
   color: #333;
   cursor: pointer;
-  font-size: 14px;
+  font-size: calc(14px * var(--wekan-ui-font-scale, 1));
   line-height: 1.4;
   text-decoration: none;
 }
@@ -82,7 +82,7 @@
   color: #fff;
   display: inline-block;
   font-weight: 700;
-  font-size: 13px;
+  font-size: calc(13px * var(--wekan-ui-font-scale, 1));
   margin-inline-end: 4px;
   margin-bottom: 5px;
   padding: 3px 8px;
@@ -238,7 +238,7 @@
   width: 24px;
 }
 .edit-labels .labels-static .card-label {
-  line-height: 30px;
+  line-height: calc(30px * var(--wekan-ui-font-scale, 1));
   margin-bottom: 4px;
   position: relative;
   top: auto;

client/components/cards/labels.js

@@ -16,6 +16,12 @@ const getFallbackLabelColor = () => {
   return 'green';
 };
 
+// Label popups opened from a linked card operate on the source card and its
+// label catalogue. Do not infer this from the route: the route still names the
+// board containing the linked representation.
+const getCardLabelBoard = card =>
+  card?.getRealBoard?.() || card?.board?.() || Utils.getCurrentBoard();
+
 Template.formLabel.onCreated(function () {
   const initialColor = this.data?.color || getFallbackLabelColor();
   this.currentColor = new ReactiveVar(initialColor);
@@ -56,7 +62,7 @@ Template.createLabelPopup.helpers({
   // is not already used in the board (although it's not a problem if two
   // labels have the same color).
   defaultColor() {
-    const board = Utils.getCurrentBoard();
+    const board = getCardLabelBoard(Template.currentData());
     const colors = Array.isArray(labelColors) ? labelColors : [getFallbackLabelColor()];
     const labels = Array.isArray(board?.labels) ? board.labels : [];
     const usedColors = labels.map(l => l.color);
@@ -111,17 +117,29 @@ Template.cardLabelsPopup.onRendered(function () {
 });
 
 Template.cardLabelsPopup.helpers({
+  board() {
+    const card = Template.currentData();
+    // The linked source board is preferred when it is published. Fall back to
+    // the card's placement/current board: a missing linked source must not turn
+    // the whole label picker into the lone "Create label" row (#6616).
+    return getCardLabelBoard(card);
+  },
   isLabelSelected(cardId) {
-    return (ReactiveCache.getCard(cardId).labelIds || []).includes(this._id);
+    const card = ReactiveCache.getCard(cardId);
+    return (card?.getRealCard().labelIds || []).includes(this._id);
   },
 });
 
 Template.cardLabelsPopup.events({
-  'click .js-select-label'(event) {
-    const card = Template.currentData();
+  async 'click .js-select-label'(event, templateInstance) {
+    // The event's `this` is the label row. Keep the popup template's card data
+    // explicitly so a linked card updates its source instead of trying to call
+    // toggleLabel on the row context.
+    const card = templateInstance.data;
     const labelId = this._id;
-    card.toggleLabel(labelId);
     event.preventDefault();
+    if (!card?.toggleLabel) return;
+    await card.toggleLabel(labelId);
   },
   'click .js-edit-label': Popup.open('editLabel'),
   'click .js-add-label': Popup.open('createLabel'),
@@ -131,7 +149,7 @@ Template.createLabelPopup.events({
   // Create the new label
   'submit .create-label'(event, templateInstance) {
     event.preventDefault();
-    const board = Utils.getCurrentBoard();
+    const board = getCardLabelBoard(templateInstance.data);
     if (!board) {
       return;
     }

client/components/cards/minicard.css

@@ -58,13 +58,13 @@
 .minicard-details-menu-with-handle {
   float: inline-end;
   padding-inline-start: 10px;
-  font-size: 14px;
+  font-size: 0.875rem;
   padding: 0;
   z-index: 1;
 }
 .minicard-details-menu {
   float: inline-end;
-  font-size: 14px;
+  font-size: 0.875rem;
   padding-inline-start: 10px;
 }
 @media print {
@@ -237,12 +237,12 @@
   }
   body.mobile-mode .minicard .handle .drag-handle,
   body.mobile-mode .minicard .handle .fa {
-    font-size: 22px;
+    font-size: 1.375rem;
   }
 }
 
 .minicard .handle .drag-handle {
-  font-size: 16px;
+  font-size: 1rem;
   color: #ccc;
   display: inline-block;
   width: 1.4em;
@@ -253,7 +253,7 @@
      "Add card" affordance below (13px). It used to inherit the 16px document
      size, which made a card title exactly as loud as the heading of the column
      holding it. See the note on .list-header-name in lists/list.css. */
-  font-size: 14px;
+  font-size: 0.875rem;
   margin-inline-end: 21px;
   /* #6444: isolate each title's bidirectional context. The title is a
      dir="auto" .viewer; under a global dir="rtl" document, non-isolated
@@ -263,6 +263,53 @@
      reverts on refresh). Isolation makes each title a self-contained run. */
   unicode-bidi: isolate;
 }
+/* #4990: the title text is the edit target. It is a block so that the whole
+   line, not only the words, is that target: a click on the empty space after a
+   short title is still a click on the title. */
+.minicard .minicard-title .minicard-title-text {
+  display: block;
+  position: relative;
+}
+
+/* ...and with no drag handles, only HALF of it. The card is then dragged by its
+   own body, so a title that is entirely an edit target leaves nowhere on that
+   line to take hold of - a grab that moves a few pixels is a click, and the
+   editor opens instead of the card moving.
+
+   The zone is an overlay rather than a split of the text, because the text is a
+   `.viewer` and cutting it in two would cut the SENTENCE in two. It sits on the
+   LEADING half - `inset-inline-start`, so it is the left in English and the
+   right in Arabic without a second rule - and the trailing half is left for
+   dragging. Dragging still works over the zone too (jQuery UI sortable's handle
+   is the whole `.minicard`); what the zone decides is where a CLICK edits. */
+.minicard .minicard-title .minicard-title-edit-zone {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  inset-inline-start: 0;
+  width: 50%;
+  cursor: text;
+  /* Above the text, so the click lands here and not on the `.viewer`. */
+  z-index: 1;
+}
+
+/* With handles ON the handle is the only drag source, so nothing has to be
+   reserved and the whole title is the edit target again. */
+.minicard.minicard-with-handle .minicard-title .minicard-title-edit-zone {
+  width: 100%;
+}
+/* The editor replaces the title in place and is the width of the card. */
+.minicard .js-minicard-title-form textarea.minicard-title-editor {
+  font-size: 0.875rem;
+  width: 100%;
+  min-height: 40px;
+  max-height: 200px;
+  margin-bottom: 4px;
+  overflow-y: auto;
+  resize: none;
+  /* Same bidi isolation as the title it stands in for. */
+  unicode-bidi: isolate;
+}
 .minicard .minicard-title .card-number {
   color: #b3b3b3;
   display: inline-block;
@@ -855,8 +902,16 @@
   transition: all 0.2s ease;
 }
 
-/* List name display on minicard */
+/* The name of the LIST this card is in, under the badges - "Show on Minicard /
+   List title", for reading a card away from the column it lives in (a
+   swimlane, search results, My Cards).
+
+   `clear` is the whole rule: `.minicard .badges` is `float: inline-start`, so
+   without it this block shares the badges' line and reads as one more badge
+   rather than as the line it is. Logical `inline-start`, so it clears the
+   floats on whichever side the page starts. */
 .minicard-list-name {
+  clear: inline-start;
   font-size: 0.75em;
   color: #8c8c8c;
   margin-top: 2px;

client/components/cards/minicard.jade

@@ -72,33 +72,55 @@ template(name="minicard")
                 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 ' > ' }}
-      if $eq 'prefix-with-parent' currentBoard.presentParentTask
-        .parent-prefix
-          | {{ parentCardName }}
-      if isLinkedBoard
-        a.js-linked-link
-          span.linked-icon
-            i.fa.fa-folder
-      else if isLinkedCard
-        a.js-linked-link
-          span.linked-icon
-            i.fa.fa-id-card
-      if getArchived
-        span.linked-icon.linked-archived
-          i.fa.fa-archive
-      +viewer
-        if showCardNumber
-          span.card-number
-            | ##{getCardNumber}  
-        = getTitle
+    //- #4990: the title is edited where it is read - on the board - exactly
+      like a list's title is. Clicking the title text opens this form in its
+      place; everything else on the card still opens the card.
+    +inlinedForm(classNames="js-minicard-title-form")
+      +editMinicardTitleForm
+    else
+      .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 ' > ' }}
+        if $eq 'prefix-with-parent' currentBoard.presentParentTask
+          .parent-prefix
+            | {{ parentCardName }}
+        if isLinkedBoard
+          a.js-linked-link
+            span.linked-icon
+              i.fa.fa-folder
+        else if isLinkedCard
+          a.js-linked-link
+            span.linked-icon
+              i.fa.fa-id-card
+        if getArchived
+          span.linked-icon.linked-archived
+            i.fa.fa-archive
+        //- Only the TEXT is the edit target, and only for somebody who may
+          write: the checkbox, the linked-card icons and the card number keep
+          doing what they did.
+        //-
+          And only HALF of the text, when there are no drag handles. With handles
+          off the card is dragged by its own body, so a title that is entirely an
+          edit target leaves nowhere on that line to take hold of: a grab that
+          moves a few pixels is a click, and the editor opens instead of the card
+          moving. The edit target is the LEADING half - left in English, right in
+          Arabic, because it is an inline edge - and the trailing half is there to
+          drag from. With handles ON the handle is the only drag source, so
+          nothing has to be reserved and the whole title edits.
+          client/components/cards/minicard.css
+        span.minicard-title-text(class="{{#if canModifyCard}}is-editable{{/if}}")
+          if canModifyCard
+            a.minicard-title-edit-zone.js-open-inlined-form(title="{{_ 'edit'}}")
+          +viewer
+            if showCardNumber
+              span.card-number
+                | ##{getCardNumber}  
+            = getTitle
     if showLabels
       if labels
         .minicard-labels(class="{{#if hiddenMinicardLabelText}}minicard-labels-no-text{{/if}}")
@@ -110,10 +132,10 @@ template(name="minicard")
             if hiddenMinicardLabelText
               .minicard-label(class="{{labelColorClass color}}" style="{{labelColorStyle color}}" title="{{name}}")
 
-    .minicard-custom-fields
-      each customFieldsWD
-        if definition.showOnCard
-          if trueValue
+    if showCustomFieldsOnMinicard
+      .minicard-custom-fields
+        each customFieldsWD
+          if definition.showOnCard
             .minicard-custom-field
               // If there is custom field label, show label at left,
               // and value at right
@@ -169,7 +191,7 @@ template(name="minicard")
 
     if showCreatorOnMinicard
       .minicard-creator
-        +userAvatar(userId=this.userId noRemove=true)
+        +userAvatar(userId=getCreatorId noRemove=true)
 
     if shouldShowChecklistAtMinicard
       each shouldShowChecklistAtMinicard
@@ -257,6 +279,16 @@ template(name="minicard")
       .parent-subtext
         | {{ parentCardName }}
 
+//- The card's title editor on the board, the same shape as a list's: the text
+  as a textarea, Save, and an X that closes without saving.
+template(name="editMinicardTitleForm")
+  textarea.minicard-title-editor.js-edit-minicard-title(rows='1' autofocus dir="auto")
+    = getTitle
+  .edit-controls.clearfix
+    button.primary.confirm.js-submit-edit-minicard-title(type="submit") {{_ 'save'}}
+    a.js-close-inlined-form(title="{{_ 'close'}}")
+      i.fa.fa-times-thin
+
 template(name="editCardSortOrderPopup")
   input.js-edit-card-sort-popup(type='text' autofocus value=sort dir="auto")
   .edit-controls.clearfix
@@ -265,6 +297,13 @@ template(name="editCardSortOrderPopup")
 template(name="minicardChecklist")
   .minicard-checklist
     .checklist-header
+      //- #1591: the same caret as on the opened card, and the same stored key,
+        so folding a checklist folds it in both places.
+      a.fa.checklist-collapse.js-collapse-checklist(
+        class="{{#if checklistCollapsed}}fa-caret-right{{else}}fa-caret-down{{/if}}"
+        title="{{#if checklistCollapsed}}{{_ 'expand-checklist'}}{{else}}{{_ 'collapse-checklist'}}{{/if}}"
+        role="button" tabindex="0"
+        aria-expanded="{{#if checklistCollapsed}}false{{else}}true{{/if}}")
       if canModifyCard
         +inlinedForm(classNames="js-edit-checklist-title" checklist=checklist)
           +editChecklistForm(checklist=checklist)
@@ -275,16 +314,16 @@ template(name="minicardChecklist")
       if canModifyCard
         a.checklist-menu.js-open-checklist-menu(title="{{_ 'checklistActionsPopup-title'}}")
           i.fa.fa-bars
-    .checklist-items.js-checklist-items
-      each visibleItems
-        +inlinedForm(classNames="js-edit-checklist-item" item=. checklist=checklist)
-          +editChecklistItemForm(type='item' item=. checklist=checklist)
+    unless checklistCollapsed
+      .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
-          +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
-
+          a.add-checklist-item.js-open-inlined-form(title="{{_ 'add-checklist-item'}}")
+            i.fa.fa-plus

client/components/cards/minicard.js

@@ -7,11 +7,16 @@ import { Utils } from '/client/lib/utils';
 import ChecklistItems from '/models/checklistItems';
 import Cards from '/models/cards';
 import { resolveCoverId } from '/models/lib/linkedCardCover';
+import { isChecklistShownAtMinicard } from '/models/lib/minicardChecklistVisibility';
 import {
   parseChecklistItemTitles,
   buildChecklistItemPayload,
 } from '/models/lib/checklistItemTitles';
-import { normalizeDependencies } from '/models/metadata/dependencies';
+import { setCardMenuSource } from '/client/lib/cardMenuSource';
+import {
+  hiddenMinicardLabelText,
+  toggleMinicardLabelText,
+} from '/client/lib/minicardLabelText';
 
 function getMinicardFlag(board, onMinicardField, legacyField, defaultValue) {
   if (!board) return false;
@@ -29,6 +34,10 @@ function getMinicardFlag(board, onMinicardField, legacyField, defaultValue) {
 // });
 
 Template.minicard.helpers({
+  showCustomFieldsOnMinicard() {
+    const board = this.board();
+    return board?.allowsCustomFieldsOnMinicard === true;
+  },
   // True exactly when the drag handle is rendered (see minicard.jade): the user
   // may move the card AND drag handles are on. On a coarse pointer the handle is
   // a 48px strip down the leading edge, so the card's own content needs matching
@@ -48,7 +57,7 @@ Template.minicard.helpers({
   // when a card has dependencies: the first dependency's icon and color plus the
   // total count.
   dependencyBadge() {
-    const deps = normalizeDependencies(this.cardDependencies);
+    const deps = this.getDependencies();
     if (deps.length === 0) return null;
     return {
       icon: deps[0].icon,
@@ -59,9 +68,10 @@ Template.minicard.helpers({
   // #3984: visual card aging — fade cards that have not been touched recently,
   // based on dateLastActivity, when the board has card aging enabled.
   agingClass() {
+    const card = this.getRealCard();
     const board = ReactiveCache.getBoard(this.boardId);
     if (!board || !board.cardAging) return '';
-    const last = this.dateLastActivity || this.modifiedAt || this.createdAt;
+    const last = card.dateLastActivity || card.modifiedAt || card.createdAt;
     if (!last) return '';
     const days = (Date.now() - new Date(last).getTime()) / 86400000;
     // #3984: thresholds are board-configurable (board settings / cardSettings API),
@@ -75,29 +85,44 @@ Template.minicard.helpers({
     return '';
   },
   formattedCurrencyCustomFieldValue(definition) {
-    const customField = this
-      .customFieldsWD()
-      .find(f => f._id === definition._id);
-    const customFieldTrueValue =
-      customField && customField.trueValue ? customField.trueValue : '';
-
+    // This helper is called from `each customFieldsWD`, so `this` is already
+    // the rendered custom-field row, not the Card. Calling this.customFieldsWD
+    // threw and prevented minicards with Currency fields from rendering.
+    const field = this || {};
+    const fieldDefinition = definition || field.definition || {};
+    const customFieldTrueValue = field.trueValue;
+    if (customFieldTrueValue === '' || customFieldTrueValue == null) return '';
+    const currencyCode = fieldDefinition.settings?.currencyCode || 'USD';
     const locale = TAPi18n.getLanguage();
-    return new Intl.NumberFormat(locale, {
-      style: 'currency',
-      currency: definition.settings.currencyCode,
-    }).format(customFieldTrueValue);
+    try {
+      const number = typeof customFieldTrueValue === 'number'
+        ? customFieldTrueValue
+        : Number(customFieldTrueValue);
+      if (!Number.isFinite(number)) return String(customFieldTrueValue);
+      return new Intl.NumberFormat(locale, {
+        style: 'currency',
+        currency: currencyCode,
+      }).format(number);
+    } catch (error) {
+      return `${currencyCode} ${customFieldTrueValue}`;
+    }
   },
 
   formattedStringtemplateCustomFieldValue(definition) {
-    const customField = this
-      .customFieldsWD()
-      .find(f => f._id === definition._id);
-
-    const customFieldTrueValue =
-      customField && customField.trueValue ? customField.trueValue : [];
-
-    const ret = new CustomFieldStringTemplate(definition).getFormattedValue(customFieldTrueValue);
-    return ret;
+    // As above, the current row already carries the resolved linked/source
+    // value and definition. Never reach back through a nonexistent Card API.
+    const field = this || {};
+    const fieldDefinition = definition || field.definition;
+    const customFieldTrueValue = Array.isArray(field.trueValue)
+      ? field.trueValue
+      : [];
+    if (!fieldDefinition) return customFieldTrueValue.join(' ');
+    try {
+      return new CustomFieldStringTemplate(fieldDefinition)
+        .getFormattedValue(customFieldTrueValue);
+    } catch (error) {
+      return customFieldTrueValue.join(' ');
+    }
   },
 
   showCreatorOnMinicard() {
@@ -110,7 +135,7 @@ Template.minicard.helpers({
     return ret;
   },
   isWatching() {
-    return this.findWatcher(Meteor.userId());
+    return this.getRealCard().findWatcher(Meteor.userId());
   },
 
   showMembers() {
@@ -166,15 +191,9 @@ Template.minicard.helpers({
     return !!(board && board.allowsChecklistCountBadgeOnMinicard);
   },
 
-  hiddenMinicardLabelText() {
-    const currentUser = ReactiveCache.getCurrentUser();
-    if (currentUser) {
-      return (currentUser.profile || {}).hiddenMinicardLabelText;
-    } else if (window.localStorage.getItem('hiddenMinicardLabelText')) {
-      return true;
-    } else {
-      return false;
-    }
+  hiddenMinicardLabelText,
+  stickers() {
+    return this.getStickers();
   },
   cover() {
     // #5666: for a linked card the cover lives on the real card it points at, so
@@ -200,13 +219,13 @@ Template.minicard.helpers({
   },
   // Upload progress helpers
   hasActiveUploads() {
-    return uploadProgressManager.hasActiveUploads(this._id);
+    return uploadProgressManager.hasActiveUploads(this.getRealId());
   },
   uploads() {
-    return uploadProgressManager.getUploadsForCard(this._id);
+    return uploadProgressManager.getUploadsForCard(this.getRealId());
   },
   uploadCount() {
-    return uploadProgressManager.getUploadCountForCard(this._id);
+    return uploadProgressManager.getUploadCountForCard(this.getRealId());
   },
   listName() {
     const list = this.list();
@@ -219,7 +238,7 @@ Template.minicard.helpers({
     // 2. This specific card has the setting enabled
     const currentBoard = this.board();
     if (!currentBoard) return false;
-    return currentBoard.allowsShowListsOnMinicard || this.showListOnMinicard;
+    return currentBoard.allowsShowListsOnMinicard || this.getRealCard().showListOnMinicard;
   },
 
   shouldShowChecklistAtMinicard() {
@@ -231,14 +250,13 @@ Template.minicard.helpers({
     const visibleChecklists = [];
 
     checklists.forEach(checklist => {
-      // Show checklist if either:
-      // 1. Board-wide setting is enabled, OR
-      // 2. This specific checklist has the setting enabled
-      // #5565: use the same board field the sidebar toggle writes
-      // (`allowsChecklistsOnMinicard`); this previously checked a different,
-      // UI-less field (`allowsChecklistAtMinicard`), so the board toggle to show
-      // checklists on minicards had no effect.
-      if (currentBoard.allowsChecklistsOnMinicard || checklist.showChecklistAtMinicard) {
+      // The board setting is the DEFAULT and the checklist's own setting is an
+      // OVERRIDE. This was an OR - board || checklist - and the board setting
+      // (`allowsChecklistsOnMinicard`, #5565) defaults to TRUE, so unchecking
+      // "Show on minicard" on a checklist could never hide it: reported by email
+      // with a screenshot of a checklist still on the minicard after the toggle
+      // was switched off. See models/lib/minicardChecklistVisibility.js.
+      if (isChecklistShownAtMinicard(checklist, currentBoard.allowsChecklistsOnMinicard)) {
         visibleChecklists.push(checklist);
       }
     });
@@ -270,6 +288,35 @@ function moveCardBy(card, delta) {
 }
 
 Template.minicard.events({
+  // #4990: the title is edited in place. The minicard sits inside the wrapper
+  // LINK to the card, so every click inside the open form would otherwise
+  // navigate away mid-edit. Cancelling the click's default stops that - except
+  // on the save button, whose own default IS the submit (the innermost element
+  // with an activation behaviour is the one that runs, so the link does not
+  // follow when the button is clicked).
+  'click .js-minicard-title-form'(event) {
+    event.stopPropagation();
+    if (!$(event.target).closest('button[type=submit]').length) {
+      event.preventDefault();
+    }
+  },
+  async 'submit .js-minicard-title-form'(event, templateInstance) {
+    event.preventDefault();
+    event.stopPropagation();
+    // #6604: `this` is the nested inlinedForm's data context
+    // ({ classNames: 'js-minicard-title-form' }), not the Card. The enclosing
+    // minicard template instance keeps the Card it was created with.
+    const card = templateInstance.data;
+    const title = templateInstance
+      .$('.js-edit-minicard-title')
+      .val()
+      ?.trim();
+    // An empty title would leave a card with nothing to click, so an empty
+    // save is a no-op rather than a way to lose the card - same as a list.
+    if (card && title && title !== card.getTitle()) {
+      await card.setTitle(title);
+    }
+  },
   'click .js-linked-link'() {
     if (this.isLinkedCard()) Utils.goCardId(this.linkedId);
     else if (this.isLinkedBoard())
@@ -297,23 +344,35 @@ Template.minicard.events({
     }
     this.setDueComplete(!this.getDueComplete());
   },
+  // The minicard's own copy of this only ever wrote localStorage, so a
+  // logged-in user toggling it here set something nothing reads. One module
+  // now, for reading and for writing. client/lib/minicardLabelText.js
   'click .js-toggle-minicard-label-text'() {
-    if (window.localStorage.getItem('hiddenMinicardLabelText')) {
-      window.localStorage.removeItem('hiddenMinicardLabelText'); //true
-    } else {
-      window.localStorage.setItem('hiddenMinicardLabelText', 'true'); //true
-    }
+    toggleMinicardLabelText();
   },
   '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()});
+  // A label on a minicard opens the card's labels, and ONLY that. The click used
+  // to reach the minicard as well, so the card details opened behind the popup:
+  // two things for one click, and the one you asked for on top of the one you
+  // did not.
+  //
+  // Which label was clicked is read from the EVENT rather than from `:hover`.
+  // `:hover` answers about the pointer, and on a touch screen it can still be
+  // true for whatever was tapped last - so a tap anywhere in the labels area
+  // could open the labels of a label nobody touched.
+  'click .minicard-labels'(event) {
+    if (!$(event.target).closest('.js-card-label').length) {
+      return; // not a label - let the click be the card's, as before
     }
+    event.preventDefault();
+    event.stopPropagation();
+    Popup.open("cardLabels")(event, {dataContextIfCurrentDataIsUndefined: Template.currentData()});
   },
   'click .js-open-minicard-details-menu'(event, tpl) {
     event.preventDefault();
     event.stopPropagation();
     const card = Template.currentData();
+    setCardMenuSource('minicard');
     Popup.open('cardDetailsActions').call({currentData: () => card}, event);
   },
   // Drag and drop file upload handlers
@@ -375,6 +434,18 @@ Template.minicard.events({
 });
 
 Template.minicardChecklist.helpers({
+  /** #1591: folded for THIS user, under the same key the opened card uses, so
+   * the two agree. `this.checklist || this` because this template is called both
+   * with an explicit checklist and with one as the data context. */
+  checklistCollapsed() {
+    const checklist = this.checklist || this;
+    if (!checklist || !checklist._id) return false;
+    const user = ReactiveCache.getCurrentUser();
+    if (!user) return false;
+    const cardId = (this.card && this.card._id) || checklist.cardId;
+    return user.getCollapsedCardSection(
+      cardId, user.checklistSectionKey(checklist._id)) === true;
+  },
   visibleItems() {
     const checklist = this.checklist || this;
     const items = checklist.items();
@@ -416,6 +487,26 @@ function addMinicardChecklistItems(textarea, checklist) {
 }
 
 Template.minicardChecklist.events({
+  'click .js-collapse-checklist'(event) {
+    // A minicard is a link to the card, and the title opens the rename form -
+    // neither must happen because somebody folded a checklist.
+    event.preventDefault();
+    event.stopPropagation();
+    const data = Template.currentData();
+    const checklist = (data && data.checklist) || data || this;
+    const user = ReactiveCache.getCurrentUser();
+    if (!checklist || !checklist._id || !user) return;
+    const cardId = (data && data.card && data.card._id) || checklist.cardId;
+    const key = user.checklistSectionKey(checklist._id);
+    const collapsed = user.getCollapsedCardSection(cardId, key) === true;
+    user.setCollapsedCardSection(cardId, key, !collapsed);
+  },
+  'keydown .js-collapse-checklist'(event) {
+    if (event.key !== 'Enter' && event.key !== ' ') return;
+    event.preventDefault();
+    event.stopPropagation();
+    $(event.currentTarget).trigger('click');
+  },
   'click .js-convert-checklist-item-to-card'(event) {
     event.stopPropagation();
     const formData = Blaze.getData(event.currentTarget);

client/components/cards/subtasks.css

@@ -33,12 +33,12 @@ textarea.js-edit-subtask-item {
   flex-shrink: 0;
   width: 30px;
   height: 30px;
-  font-size: 18px;
-  line-height: 30px;
+  font-size: calc(18px * var(--wekan-ui-font-scale, 1));
+  line-height: calc(30px * var(--wekan-ui-font-scale, 1));
 }
 .subtask-title .title {
-  font-size: 18px;
-  line-height: 25px;
+  font-size: calc(18px * var(--wekan-ui-font-scale, 1));
+  line-height: calc(25px * var(--wekan-ui-font-scale, 1));
   flex: 1;
   order: 1;
 }
@@ -121,7 +121,7 @@ textarea.js-edit-subtask-item {
 }
 .subtasks-item {
   margin: 0 0 0 0.1em;
-  line-height: 18px;
+  line-height: calc(18px * var(--wekan-ui-font-scale, 1));
   font-size: 1.1em;
   margin-top: 3px;
   display: flex;

client/components/cards/subtasks.jade

@@ -1,7 +1,6 @@
 template(name="subtasks")
-  h3.card-details-item-title
-    i.fa.fa-globe
-    | {{_ 'subtasks'}}
+  //- No title here: +cardSectionHeader draws it, with the caret and the rule.
+    Two headings for one section is what a card showed before.
   if currentUser.isBoardAdmin
     if toggleDeleteDialog.get
       .board-overlay#card-details-overlay
@@ -107,4 +106,7 @@ template(name="subtaskActionsPopup")
         a.js-delete-subtask.delete-subtask
           i.fa.fa-trash
           | {{_ "delete"}} ...
+  //- The board's subtask SETTINGS are not here: they belong to the section, not
+    to one subtask, and they are behind the hamburger at the end of the
+    Subtasks heading. client/components/cards/cardDetails.jade
 

client/components/cards/subtasks.js

@@ -22,7 +22,8 @@ Template.subtasks.events({
     event.preventDefault();
     const textarea = tpl.find('textarea.js-add-subtask-item');
     const title = textarea.value.trim();
-    const cardId = Template.currentData().cardId;
+    const contextCard = ReactiveCache.getCard(this.cardId);
+    const cardId = contextCard?.getRealId ? contextCard.getRealId() : this.cardId;
 
     if (title) {
       // Subtask creation is performed server-side by the `addSubtaskCard` Meteor
@@ -32,9 +33,12 @@ Template.subtasks.events({
       // (#3868 / #5788 / #2256) and lets multiple subtasks be created reliably
       // (#4782), and the method applies the destination board's automatic
       // custom fields to the new subtask (#4037 / #3562).
-      const _id = await Meteor.callAsync('addSubtaskCard', cardId, title);
+      try {
+        const _id = await Meteor.callAsync('addSubtaskCard', cardId, title);
 
-      if (_id) {
+        if (!_id) {
+          throw new Error('The server could not create the subtask.');
+        }
         // In case the filter is active we need to add the newly inserted card in
         // the list of exceptions -- cards that are not filtered. Otherwise the
         // card will disappear instantly.
@@ -46,10 +50,13 @@ Template.subtasks.events({
             .last()
             .click();
         }, 100);
+        textarea.value = '';
+        textarea.focus();
+      } catch (error) {
+        alert(error?.reason || error?.message || 'Could not create the subtask.');
+        textarea.focus();
       }
     }
-    textarea.value = '';
-    textarea.focus();
   },
   'submit .js-edit-subtask-title'(event, tpl) {
     event.preventDefault();

client/components/common/originalPosition.css

@@ -3,7 +3,7 @@
   margin: 5px 0;
   padding: 8px;
   border-radius: 4px;
-  font-size: 12px;
+  font-size: calc(12px * var(--wekan-ui-font-scale, 1));
   line-height: 1.4;
 }
 
@@ -57,7 +57,7 @@
 
 .original-title {
   color: #6c757d;
-  font-size: 11px;
+  font-size: calc(11px * var(--wekan-ui-font-scale, 1));
   margin-top: 4px;
   padding-top: 4px;
   border-top: 1px solid #e9ecef;
@@ -78,7 +78,7 @@
 /* Responsive adjustments */
 @media (max-width: 768px) {
   .original-position-info {
-    font-size: 11px;
+    font-size: calc(11px * var(--wekan-ui-font-scale, 1));
     padding: 6px;
   }
 

client/components/forms/datepicker.css

@@ -1,8 +1,30 @@
+.datepicker-container .fields {
+  display: flex;
+  gap: 15px;
+  margin-bottom: 15px;
+}
 .datepicker-container .fields .left {
-  width: 56%;
+  flex: 1;
+  float: none;
+  order: 1;
+  width: auto;
 }
 .datepicker-container .fields .right {
-  width: 38%;
+  flex: 1;
+  float: none;
+  order: 2;
+  width: auto;
+}
+.datepicker-container .fields .custom-field-date-copy {
+  align-items: center;
+  display: flex;
+  flex: 0 0 auto;
+  order: 3;
+  padding-top: 24px;
+}
+.datepicker-container .fields .custom-field-date-copy .custom-field-copy-control {
+  inset: auto;
+  position: static;
 }
 .datepicker-container .datepicker {
   width: 100%;

client/components/forms/datepicker.jade

@@ -1,14 +1,29 @@
-template(name="datepicker")
-    .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'}}
+//- The date-and-time form every "edit a date" popup is made of: the card's
+//- Received, Start, Due and End dates, a vote's and a planning poker's end
+//- date, and a date custom field. Eight popups drew this same form, letter for
+//- letter, in three different files.
+//-
+//- It takes what it shows as ARGUMENTS rather than reading helpers: a helper
+//- inside a template is looked up on that template, not on the one including
+//- it, and all eight popups keep their own state and handlers
+//- (client/lib/datepicker.js, which they already shared - it was only the
+//- markup that was copied). So this template has no code of its own at all;
+//- it renders the popup's datePicker state and the buttons. Its events live on
+//- this template too: Blaze events do not cross a child-template boundary.
+template(name="editDateForm")
+  .datepicker-container
+    form.edit-date(class="{{#if customFieldControls}}custom-field-date-editor{{/if}}")
+      .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 customFieldControls
+          .custom-field-date-copy
+            +customFieldCopyButton(value=customFieldCopyValue)
+      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'}}

client/components/forms/datepicker.js

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

client/components/forms/forms.css

@@ -177,7 +177,7 @@ button:active:active {
    it in the same menu was the themed one. Two buttons, one menu, two looks.
    It is named in the SAME rules rather than given a copy of them, so the theme
    accent and the hover and active states have one home.
-   docs/Design/Page/Theme.md */
+   docs/Features/Page/Theme.md */
 input[type="submit"].primary,
 button.primary,
 .pop-over .at-form button.at-btn {
@@ -307,9 +307,33 @@ textarea::-moz-placeholder {
 }
 .edit-controls .fa-times-thin,
 .add-controls .fa-times-thin {
-  font-size: 20px;
+  font-size: calc(20px * var(--wekan-ui-font-scale, 1));
   margin: 5px 21px;
 }
+/* Custom-field Copy is an editor action above the top-right corner of the
+   field controls, not part of the Save / Close row. */
+.js-card-customfield-text,
+.js-card-customfield-number,
+.js-card-customfield-checkbox-editor,
+.js-card-customfield-currency,
+.js-card-customfield-dropdown,
+.js-card-customfield-stringtemplate,
+.custom-field-date-editor {
+  position: relative;
+}
+.custom-field-copy-control {
+  inset-inline-end: 0;
+  position: absolute;
+  top: -24px;
+  z-index: 1;
+}
+form.inlined-form .custom-field-copy-control > a.fa-copy,
+.custom-field-date-editor .custom-field-copy-control > a.fa-copy {
+  float: none;
+  inset: auto;
+  position: static;
+  top: auto;
+}
 /* CJK (Japanese/Chinese/Korean) labels contain no spaces, so browsers may
    insert a line break between any two characters. In the narrow add-card /
    edit footers this made short labels such as "追加" (Add) and "リンク"
@@ -346,6 +370,16 @@ textarea::-moz-placeholder {
   transition: 0.2s;
   margin: 0;
   cursor: pointer;
+  /* A CHECKBOX IS SQUARE, WHEREVER IT IS PUT.
+     Several of the rows that carry one are flex containers - the export popup's
+     "select what to include", Admin Panel's setting rows, the sidebar's filters
+     - and a flex item shrinks by default. Next to a long label that squeezed the
+     13px box into a thin vertical sliver: "Kortin tiedot (jokainen kortti kuten
+     kortin viennissä)" drew a sliver while "Taulu" beside it stayed square.
+     `flex: none` here rather than in each of those places, because the shape of
+     a checkbox is this rule's business and there are 92 of them across 19
+     templates. */
+  flex: none;
 }
 .materialCheckBox.is-checked {
   top: -4px;
@@ -388,10 +422,10 @@ textarea::-moz-placeholder {
   border-radius: 3px;
   color: #fff;
   display: none;
-  font-size: 12px;
+  font-size: calc(12px * var(--wekan-ui-font-scale, 1));
   font-weight: 700;
   height: 17px;
-  line-height: 17px;
+  line-height: calc(17px * var(--wekan-ui-font-scale, 1));
   margin: 0;
   padding: 2px 4px;
   position: absolute;
@@ -445,8 +479,8 @@ textarea::-moz-placeholder {
 .button-link.setting .label {
   color: #222;
   display: block;
-  font-size: 12px;
-  line-height: 14px;
+  font-size: calc(12px * var(--wekan-ui-font-scale, 1));
+  line-height: calc(14px * var(--wekan-ui-font-scale, 1));
   margin-bottom: 0;
 }
 .button-link.setting:hover .label {
@@ -454,8 +488,8 @@ textarea::-moz-placeholder {
 }
 .button-link.setting .value {
   display: block;
-  font-size: 18px;
-  line-height: 24px;
+  font-size: calc(18px * var(--wekan-ui-font-scale, 1));
+  line-height: calc(24px * var(--wekan-ui-font-scale, 1));
   overflow: hidden;
   text-overflow: ellipsis;
 }
@@ -598,8 +632,8 @@ button.loud-text-button:hover {
   padding: 11px;
   position: relative;
   text-decoration: none;
-  font-size: 16px;
-  line-height: 20px;
+  font-size: calc(16px * var(--wekan-ui-font-scale, 1));
+  line-height: calc(20px * var(--wekan-ui-font-scale, 1));
 }
 .big-link .text {
   text-decoration: underline;
@@ -641,9 +675,9 @@ button.loud-text-button:hover {
   width: 40px;
 }
 .big-link.avatar-changer .member .member-initials {
-  font-size: 16px;
+  font-size: calc(16px * var(--wekan-ui-font-scale, 1));
   height: 40px;
-  line-height: 40px;
+  line-height: calc(40px * var(--wekan-ui-font-scale, 1));
   max-height: 40px;
 }
 .show-more {
@@ -675,24 +709,24 @@ button.loud-text-button:hover {
 .uploader .realfile {
   cursor: pointer;
   height: 34px;
-  line-height: 34px;
+  line-height: calc(34px * var(--wekan-ui-font-scale, 1));
   position: absolute;
   top: 0;
   inset-inline-start: 0;
   width: 100%;
   z-index: 2;
-  font-size: 23px;
+  font-size: calc(23px * var(--wekan-ui-font-scale, 1));
 }
 .uploader .realfile input[type="file"] {
   cursor: pointer;
   height: 34px;
-  line-height: 34px;
+  line-height: calc(34px * var(--wekan-ui-font-scale, 1));
   margin: 0;
   opacity: 0;
   padding: 0;
   width: 100%;
   z-index: 2;
-  font-size: 23px;
+  font-size: calc(23px * var(--wekan-ui-font-scale, 1));
 }
 .uploader:hover .fakefile {
   background: #318ec4;

client/components/gantt/gantt.css

@@ -2,25 +2,25 @@
 .ganttview-received {
   background-color: #dbdbdb !important;
   color: #000 !important;
-  font-size: 18px !important;
+  font-size: calc(18px * var(--wekan-ui-font-scale, 1)) !important;
   font-weight: bold !important;
 }
 .ganttview-start {
   background-color: #90ee90 !important;
   color: #000 !important;
-  font-size: 18px !important;
+  font-size: calc(18px * var(--wekan-ui-font-scale, 1)) !important;
   font-weight: bold !important;
 }
 .ganttview-due {
   background-color: #ffd700 !important;
   color: #000 !important;
-  font-size: 18px !important;
+  font-size: calc(18px * var(--wekan-ui-font-scale, 1)) !important;
   font-weight: bold !important;
 }
 .ganttview-end {
   background-color: #ffb3b3 !important;
   color: #000 !important;
-  font-size: 18px !important;
+  font-size: calc(18px * var(--wekan-ui-font-scale, 1)) !important;
   font-weight: bold !important;
 }
 /* Gantt View Styles */
@@ -52,7 +52,7 @@
   min-width: 800px;
   border: 2px solid #666;
   font-family: sans-serif;
-  font-size: 13px;
+  font-size: calc(13px * var(--wekan-ui-font-scale, 1));
   background-color: #fff;
 }
 
@@ -81,7 +81,7 @@
   padding: 2px 1px; /* half */
   text-align: center;
   background-color: #f5f5f5;
-  font-size: 11px;
+  font-size: calc(11px * var(--wekan-ui-font-scale, 1));
   min-width: 15px; /* half of 30px */
   font-weight: bold;
   height: auto;
@@ -110,9 +110,9 @@
   min-width: 15px; /* half of 30px */
   height: 32px;
   vertical-align: middle;
-  line-height: 28px;
+  line-height: calc(28px * var(--wekan-ui-font-scale, 1));
   background-color: #ffffff;
-  font-size: 18px;
+  font-size: calc(18px * var(--wekan-ui-font-scale, 1));
   font-weight: bold;
 }
 
@@ -162,7 +162,7 @@
 .gantt-container tbody td.ganttview-block {
   background-color: #4CAF50 !important;
   color: #fff !important;
-  font-size: 18px !important;
+  font-size: calc(18px * var(--wekan-ui-font-scale, 1)) !important;
   font-weight: bold !important;
   padding: 2px !important;
   border-radius: 2px;
@@ -171,7 +171,7 @@
 /* Responsive adjustments */
 @media (max-width: 768px) {
   .gantt-container table {
-    font-size: 11px;
+    font-size: calc(11px * var(--wekan-ui-font-scale, 1));
   }
 
   .gantt-container thead td {
@@ -187,7 +187,7 @@
 
   .gantt-container tbody td:first-child {
     width: 100px;
-    font-size: 12px;
+    font-size: calc(12px * var(--wekan-ui-font-scale, 1));
   }
 }
 

client/components/import/import.css

@@ -134,7 +134,7 @@ a.show-mapping {
 }
 .trello-progress-percent {
   text-align: end;
-  font-size: 12px;
+  font-size: calc(12px * var(--wekan-ui-font-scale, 1));
   color: #666;
   font-weight: 600;
   margin-bottom: 8px;
@@ -165,3 +165,71 @@ a.show-mapping {
   font-size: 0.85em;
   margin: 2px 0 4px;
 }
+
+/* ── The import page's two questions ────────────────────────────────────────
+   WHICH SOURCE, and WHAT TO TAKE FROM IT. They are asked in that order and
+   answered in either, so on a wide page they are two columns: fourteen sources
+   in one and two dozen parts in the other, both on screen at once instead of
+   the parts living below a list you scroll past. `auto-fit` with a minimum, so
+   a narrow window stacks them without a second rule. */
+.import-page .import-columns {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  gap: 24px;
+  align-items: start;
+}
+
+.import-page .import-columns h2 {
+  font-size: 1.1em;
+  margin: 0 0 8px;
+}
+
+.import-page .import-source-list,
+.import-page .import-part-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+/* A row is EXACTLY the row Admin Panel / Announcement draws:
+   `a.flex > .materialCheckBox + span`, and no geometry of its own. That matters
+   more than it looks: `.materialCheckBox.is-checked` becomes the tick by
+   turning two borders transparent, rotating 40deg and shifting itself
+   (`top: -4px; inset-inline-start: -3px; margin-inline-end: 6px`) - offsets
+   written for the plain flow `.flex` gives it. An `align-items: center` and a
+   `gap` on top of that fight those offsets, and the tick lands on the first
+   word of the label, which is what this page did before.
+
+   So only the things that move nothing: something to click against, and a
+   pointer. forms.css does the rest, the same way it does on the Announcement
+   page. */
+.import-page .import-source-list a.flex,
+.import-page .import-part-list a.flex {
+  padding: 4px 4px;
+  border-radius: 3px;
+  color: inherit;
+  cursor: pointer;
+}
+
+.import-page .import-source-list a.flex:hover,
+.import-page .import-part-list a.flex:hover {
+  background: rgba(0, 0, 0, 0.05);
+}
+
+/* A space between the box and its label, in BOTH states.
+   `.materialCheckBox` is 13px plus a 2px border on each side, and carries no
+   margin, so an unchecked row's text starts right against the box. Checked, it
+   is a different shape entirely - 7px wide, shifted `inset-inline-start: -3px`,
+   with `margin-inline-end: 6px` - so its text starts 8px + 6px in.
+   Lining the two up is arithmetic: 17 + 8 = 25 for the unchecked box, and
+   8 + 17 = 25 for the checked one, so a row's label sits in the same place
+   whether it is ticked or not and ticking one no longer nudges its text. */
+.import-page .import-source-list a.flex .materialCheckBox,
+.import-page .import-part-list a.flex .materialCheckBox {
+  margin-inline-end: 8px;
+}
+
+.import-page .import-source-list a.flex .materialCheckBox.is-checked,
+.import-page .import-part-list a.flex .materialCheckBox.is-checked {
+  margin-inline-end: 17px;
+}

client/components/import/import.jade

@@ -1,10 +1,46 @@
 template(name="import")
-  .wrapper
+  .wrapper.import-page
     if error.get
       .warning {{_ error.get}}
     if zipImporting
       .warning {{_ 'import-trello-zip-progress'}}
-    +Template.dynamic(template=currentTemplate)
+    //- #1173: ONE import page. Every source used to be its own address reached
+      from its own link in the board sidebar, and the page never said which
+      others existed - so "where do I import a Jira export" was answered by a
+      menu somewhere else. The source is picked HERE, the parts are picked with
+      the same checkboxes every export uses, and the boards inside a file that
+      holds several are picked below that.
+    //- The two questions side by side when the page is wide enough: which
+      source, and what to take from it. They are asked in that order and
+      answered in either, so reading them as two columns beats scrolling past
+      fourteen sources to reach the parts. client/components/import/import.css
+    .import-columns
+      .import-sources
+        h2 {{_ 'import-source-heading'}}
+        ul.import-source-list
+          each importSources
+            li
+              //- The same green tick every checkbox in the app uses
+                (`.materialCheckBox`, forms.css) - the one Admin Panel /
+                Announcement has. Nothing is chosen to begin with, and choosing
+                one un-chooses the last: an import reads ONE file in one format,
+                so this is a radio wearing the app's own checkbox.
+              a.flex.js-select-import-source(data-source="{{key}}" href="#")
+                .materialCheckBox(class="{{#if selected}}is-checked{{/if}}")
+                span {{name}}
+      if hasImportSource
+        .import-parts
+          h2 {{_ 'export-select-what-to-include'}}
+          p.quiet {{_ 'import-parts-instruction'}}
+          ul.import-part-list
+            each importParts
+              li
+                a.flex.js-import-part-toggle(data-field="{{field}}" href="#")
+                  .materialCheckBox(class="{{#if checked}}is-checked{{/if}}")
+                  span {{_ label}}
+    if hasImportSource
+      hr
+      +Template.dynamic(template=currentTemplate)
 
 template(name="importTextarea")
   form
@@ -16,6 +52,14 @@ template(name="importTextarea")
     else
       textarea.js-import-json(id='import-textarea' placeholder="{{_ importPlaceHolder}}" autofocus)
         | {{jsonText}}
+    if isWekanImport
+      //- #1173: a WeKan export can be a .json or a .zip - the .zip is the one to
+        use when a board's attachments are too large to sit inside one JSON
+        string. Both land in the same place; the .zip is unpacked in the browser
+        and its files are put back on their metadata rows.
+      p.import-file-row
+        label(for='import-wekan-file') {{_ 'import-wekan-file'}}
+        input.js-import-json-file(id='import-wekan-file' type="file" accept=".json,.zip,application/json,application/zip")
     if isTrelloImport
       p.import-file-row
         label(for='import-json-file') {{_ 'import-trello-json-file'}}
@@ -29,7 +73,7 @@ template(name="importTextarea")
         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'}}
+    button.primary.wide.js-import-without-mapping(type="button") {{_ 'import-without-mapping-members'}}
   if isTrelloImport
     hr
     +importTrelloApi
@@ -158,7 +202,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'}}
+        button.primary.wide.js-import-skip-mapping(type="button") {{_ 'import-without-mapping-members'}}
   else
     +spinner
 

client/components/import/import.js

@@ -8,6 +8,14 @@ import { kanboardGetMembersToMap } from './kanboardMembersMapper';
 import getSlug from 'limax';
 import { UserSearchIndex } from '/models/users';
 import { Utils } from '/client/lib/utils';
+import { productNameOrDefault } from '/models/lib/productName';
+import { BOARD_EXPORT_FIELDS } from '/models/lib/exportFields';
+import {
+  selection as importSelection,
+  selectedFields,
+  readExportFile,
+} from '/client/components/boards/exportScope';
+import { pruneImportDocument } from '/models/lib/importParts';
 import { TAPi18n } from '/imports/i18n';
 import TrelloImportJobs from '/models/trelloImportJobs';
 
@@ -233,10 +241,17 @@ Template.import.onCreated(function () {
       // exports are awkward to paste) or from the textarea.
       let input = this.find('.js-import-json').value;
       const jsonFileEl = this.find('.js-import-json-file');
+      let dataObject = null;
       if (jsonFileEl && jsonFileEl.files && jsonFileEl.files[0]) {
-        input = await jsonFileEl.files[0].text();
+        // #1173: a .zip is read the same way the per-menu import reads one -
+        // the document out of `wekan.json`, and every file under `attachments/`
+        // put back on the metadata row it belongs to, so an export that was
+        // taken as a .zip imports with its files rather than without them.
+        // readExportFile handles a .json unchanged.
+        dataObject = await readExportFile(jsonFileEl.files[0]);
+      } else {
+        dataObject = JSON.parse(input);
       }
-      const dataObject = JSON.parse(input);
       // Guard against importing a broken/old WeKan export that has no board
       // content (see wekanExportIsEmpty): warn the user to re-export rather than
       // silently creating an empty board with only a Default swimlane.
@@ -350,9 +365,13 @@ Template.import.onCreated(function () {
       settled = true;
       this.setError('import-timeout');
     }, timeoutMs);
+    // #1173: the parts the page's checkboxes did not tick are taken OUT of the
+    // document here, before any creator sees it. A creator that never sees a
+    // comment cannot import one, which is how one selection works for five
+    // sources without teaching each of them a selection of its own.
     Meteor.call(
       'importBoard',
-      importedData,
+      pruneImportDocument(importedData, selectedFields()),
       { membersMapping: mappingById },
       this.importSource,
       Session.get('fromBoard'),
@@ -371,10 +390,56 @@ Template.import.onCreated(function () {
   };
 });
 
+// #1173: every import source, in one list, so the page says what it can read
+// instead of the answer living in a menu somewhere else. The order is the one
+// the board sidebar's links were in - the familiar one - and the WeKan entry is
+// named for the PRODUCT NAME this instance is branded with, because "a previous
+// export of ..." should say the name the person sees at the top of their screen.
+const IMPORT_SOURCES = [
+  { key: 'wekan', product: true },
+  { key: 'trello', name: 'Trello' },
+  { key: 'csv', name: 'CSV / TSV' },
+  { key: 'excel', name: 'Excel' },
+  { key: 'jira', name: 'Jira' },
+  { key: 'kanboard', name: 'Kanboard' },
+  { key: 'deck', name: 'NextCloud Deck' },
+  { key: 'openproject', name: 'OpenProject' },
+  { key: 'github', name: 'GitHub' },
+  { key: 'gitlab', name: 'GitLab' },
+  { key: 'gitea', name: 'Gitea' },
+  { key: 'forgejo', name: 'Forgejo' },
+  { key: 'asana', name: 'Asana' },
+  { key: 'zenkit', name: 'Zenkit' },
+];
+
 Template.import.helpers({
   error() {
     return Template.instance().error;
   },
+  importSources() {
+    const setting = ReactiveCache.getCurrentSetting();
+    const product = productNameOrDefault(setting && setting.productName);
+    const current = Session.get('importSource');
+    return IMPORT_SOURCES.map(source => ({
+      key: source.key,
+      // "a previous export of <Product name>", which for an unbranded WeKan is
+      // "WeKan" and for a rebranded one is whatever it was rebranded to.
+      name: source.product ? `${product} (JSON, .zip)` : source.name,
+      selected: source.key === current,
+    }));
+  },
+  hasImportSource() {
+    return Boolean(Session.get('importSource'));
+  },
+  // The SAME selection the export popups use - one list, one meaning: on an
+  // export it is what goes out, on an import it is what comes in.
+  importParts() {
+    return BOARD_EXPORT_FIELDS.map(({ field, label }) => ({
+      field,
+      label,
+      checked: importSelection.get(field),
+    }));
+  },
   currentTemplate() {
     return Template.instance().steps[Template.instance()._currentStepIndex.get()];
   },
@@ -383,6 +448,21 @@ Template.import.helpers({
   },
 });
 
+Template.import.events({
+  'click .js-select-import-source'(event) {
+    event.preventDefault();
+    const source = event.currentTarget.dataset.source;
+    // The address still names the source, so an import page can be linked and
+    // the back button works - the picker sets it rather than replacing it.
+    FlowRouter.go(`/import/${source}`);
+  },
+  'click .js-import-part-toggle'(event) {
+    event.preventDefault();
+    const field = event.currentTarget.dataset.field;
+    importSelection.set(field, !importSelection.get(field));
+  },
+});
+
 Template.importTextarea.helpers({
   instruction() {
     const importSource = Session.get('importSource');
@@ -426,6 +506,10 @@ Template.importTextarea.helpers({
   isTrelloImport() {
     return Session.get('importSource') === 'trello';
   },
+  // #1173: a previous export of this WeKan, as a .json or as a .zip.
+  isWekanImport() {
+    return Session.get('importSource') === 'wekan';
+  },
   isExcelImport() {
     return Session.get('importSource') === 'excel';
   },

client/components/lib/basicTabs.jade

@@ -1,11 +1,24 @@
 template(name="basicTabs")
   .basicTabs-container(class="{{name}}")
-    ul.tabs-list
+    ul.tabs-list(role="tablist")
       each tabs
-        li.tab-item(class="{{isActiveTab slug}} {{class}}" data-tab="{{slug}}") {{name}}
+        li.tab-item(
+          id="{{tabDomId slug}}"
+          class="{{isActiveTab slug}} {{class}}"
+          data-tab="{{slug}}"
+          role="tab"
+          tabindex="{{tabIndex slug}}"
+          aria-selected="{{isSelectedTab slug}}"
+          aria-controls="{{panelDomId slug}}") {{name}}
     .tabs-content-container
       +Template.contentBlock
 
 template(name="tabContent")
-  section.tabs-content(class="{{isActiveTab slug}}" data-tab="{{slug}}")
+  section.tabs-content(
+    id="{{panelDomId slug}}"
+    class="{{isActiveTab slug}}"
+    data-tab="{{slug}}"
+    role="tabpanel"
+    aria-labelledby="{{tabDomId slug}}"
+    tabindex="0")
     +Template.contentBlock

client/components/lib/basicTabs.js

@@ -1,4 +1,6 @@
 import { ReactiveVar } from 'meteor/reactive-var';
+import { Tracker } from 'meteor/tracker';
+import { tabIndexForKey } from '/client/lib/accessibility';
 
 // Creation-time stack tracking which basicTabs is currently being rendered.
 // Blaze creates parent views before children, so when tabContent.onCreated fires,
@@ -7,12 +9,14 @@ import { ReactiveVar } from 'meteor/reactive-var';
 // back to the calling context (e.g. membersWidget), not the basicTabs template —
 // so walking the view tree cannot find the basicTabs instance.
 const _creatingStack = [];
+let nextTabsId = 1;
 
 Template.basicTabs.onCreated(function () {
   const activeTab = this.data.activeTab
     ? { slug: this.data.activeTab }
     : this.data.tabs[0];
   this._activeTab = new ReactiveVar(activeTab);
+  this._accessibilityId = `basic-tabs-${nextTabsId++}`;
 
   this.isActiveSlug = (slug) => {
     const current = this._activeTab.get();
@@ -33,12 +37,39 @@ Template.basicTabs.helpers({
       return 'active';
     }
   },
+  tabDomId(slug) {
+    return `${Template.instance()._accessibilityId}-tab-${slug}`;
+  },
+  panelDomId(slug) {
+    return `${Template.instance()._accessibilityId}-panel-${slug}`;
+  },
+  tabIndex(slug) {
+    return Template.instance().isActiveSlug(slug) ? '0' : '-1';
+  },
+  isSelectedTab(slug) {
+    return Template.instance().isActiveSlug(slug) ? 'true' : 'false';
+  },
 });
 
 Template.basicTabs.events({
   'click .tab-item'(e, t) {
     t._activeTab.set(this);
   },
+  'keydown .tab-item'(event, template) {
+    const tabs = template.data.tabs || [];
+    const currentIndex = tabs.findIndex(tab => tab.slug === this.slug);
+    if (currentIndex < 0) return;
+
+    const nextIndex = tabIndexForKey(event, currentIndex, tabs.length);
+    if (nextIndex === null) return;
+
+    event.preventDefault();
+    template._activeTab.set(tabs[nextIndex]);
+    Tracker.afterFlush(() => {
+      const target = template.find(`#${template._accessibilityId}-tab-${tabs[nextIndex].slug}`);
+      target?.focus();
+    });
+  },
 });
 
 Template.tabContent.onCreated(function () {
@@ -53,4 +84,12 @@ Template.tabContent.helpers({
     const inst = Template.instance()._basicTabsInst;
     if (inst && inst.isActiveSlug(slug)) return 'active';
   },
+  tabDomId(slug) {
+    const inst = Template.instance()._basicTabsInst;
+    return inst ? `${inst._accessibilityId}-tab-${slug}` : undefined;
+  },
+  panelDomId(slug) {
+    const inst = Template.instance()._basicTabsInst;
+    return inst ? `${inst._accessibilityId}-panel-${slug}` : undefined;
+  },
 });

client/components/lists/list.css

@@ -346,7 +346,7 @@ body.mobile-mode [id^="swimlane-"] .list[style*="--list-width"]:not(.list-collap
   margin: 5px auto;
   z-index: 30;
   padding: 5px;
-  font-size: 16px;
+  font-size: calc(16px * var(--wekan-ui-font-scale, 1));
   white-space: nowrap;
   display: block;
   width: auto;
@@ -403,7 +403,7 @@ body.mobile-mode [id^="swimlane-"] .list[style*="--list-width"]:not(.list-collap
   overflow: hidden;
   white-space: normal;
   display: block !important;
-  font-size: 12px;
+  font-size: calc(12px * var(--wekan-ui-font-scale, 1));
   line-height: 1.2;
   color: #333;
   padding: 0;
@@ -476,8 +476,12 @@ form.inlined-form .list-composer {
      the cards. The scale is now heading 16 > card title 14 >= add-card link 13,
      kept in that order by tests/listTypeScale.test.cjs. Mobile keeps its own
      larger sizes (the !important rules further down) - a phone is read at arm's
-     length. */
-  font-size: 16px;
+     length.
+     #6587: written in rem, not px. The three sizes are the same as before at the
+     default root size (1rem = 16px), but a px size cannot follow Member Settings
+     / Font size, which sets the root font size - so a board's type was the one
+     part of the UI that ignored the setting entirely. */
+  font-size: 1rem;
   line-height: 1.2;
   margin: 0;
   font-weight: bold;
@@ -497,7 +501,7 @@ form.inlined-form .list-composer {
   background: transparent;
   color: #8c8c8c;
   font-weight: bold;
-  font-size: 12px;
+  font-size: calc(12px * var(--wekan-ui-font-scale, 1));
   vertical-align: middle;
 }
 .list-rotated {
@@ -550,7 +554,7 @@ form.inlined-form .list-composer {
   border-radius: 0;
   background-color: transparent;
   cursor: pointer;
-  font-size: 18px;
+  font-size: calc(18px * var(--wekan-ui-font-scale, 1));
   line-height: 1.2;
   min-width: 30px;
   text-align: center;
@@ -621,7 +625,7 @@ form.inlined-form .list-composer {
   }
   .list.list-collapsed .list-header .list-rotated h2.list-header-name {
     width: 100%;
-    font-size: 12px;
+    font-size: calc(12px * var(--wekan-ui-font-scale, 1));
     height: 100%;
     line-height: 1.2;
     padding: 0;
@@ -672,7 +676,7 @@ form.inlined-form .list-composer {
   }
   .list.list-collapsed .list-header .list-rotated h2.list-header-name {
     width: 100%;
-    font-size: 12px;
+    font-size: calc(12px * var(--wekan-ui-font-scale, 1));
     height: 100%;
     line-height: 1.2;
     padding: 0;
@@ -723,7 +727,7 @@ form.inlined-form .list-composer {
   }
   .list.list-collapsed .list-header .list-rotated h2.list-header-name {
     width: 100%;
-    font-size: 12px;
+    font-size: calc(12px * var(--wekan-ui-font-scale, 1));
     height: 100%;
     line-height: 1.2;
     padding: 0;
@@ -774,7 +778,7 @@ form.inlined-form .list-composer {
 
 .list-header .cardCount {
   color: #8c8c8c;
-  font-size: 12px;
+  font-size: calc(12px * var(--wekan-ui-font-scale, 1));
   font-weight: bold;
 }
 .list-header .list-header-plus-top,
@@ -784,7 +788,7 @@ form.inlined-form .list-composer {
   padding-inline-start: 4px;
 }
 .js-open-list-menu {
-  font-size: 18px;
+  font-size: calc(18px * var(--wekan-ui-font-scale, 1));
   vertical-align: middle;
   line-height: 1.2;
 }
@@ -828,7 +832,7 @@ form.inlined-form .list-composer {
      "Add" button was the biggest thing on the board while typing. 34px is a
      comfortable touch target that still reads as a control rather than a slab. */
   min-height: 34px;
-  font-size: 14px;
+  font-size: calc(14px * var(--wekan-ui-font-scale, 1));
 }
 .list-body .open-minicard-composer {
   border-radius: 2px;
@@ -837,7 +841,7 @@ form.inlined-form .list-composer {
   /* Smaller than a card title, because it is not a card: it is the affordance
      for making one. At the inherited 16px it was the largest text in the list
      body, level with the board's real content. */
-  font-size: 13px;
+  font-size: 0.8125rem;
   padding: 7px 10px;
   position: relative;
   text-decoration: none;
@@ -956,7 +960,7 @@ form.inlined-form .list-composer {
 }
 .list.mobile-view .list-header .list-header-menu-icon {
   padding: 14px;
-  font-size: 40px !important;
+  font-size: calc(40px * var(--wekan-ui-font-scale, 1)) !important;
   text-align: center;
   /* Force positioning for iPhone */
   position: absolute !important;
@@ -967,7 +971,7 @@ form.inlined-form .list-composer {
 }
 .list.mobile-view .list-header .list-header-handle {
   padding: 14px;
-  font-size: 48px !important;
+  font-size: calc(48px * var(--wekan-ui-font-scale, 1)) !important;
   text-align: center;
   /* Force positioning for iPhone */
   position: absolute !important;
@@ -985,7 +989,7 @@ form.inlined-form .list-composer {
   grid-row: 1;
   grid-column: 2;
   align-self: end;
-  font-size: 20px !important;
+  font-size: calc(20px * var(--wekan-ui-font-scale, 1)) !important;
   font-weight: bold;
   line-height: 1.2;
   padding-bottom: 2px;
@@ -997,7 +1001,7 @@ form.inlined-form .list-composer {
   text-align: start;
   padding-inline-start: 0;
   margin-inline-start: 0;
-  font-size: 16px !important;
+  font-size: calc(16px * var(--wekan-ui-font-scale, 1)) !important;
   line-height: 1.2;
 }
 .list.mobile-view .list-header .list-header-menu {
@@ -1097,7 +1101,7 @@ form.inlined-form .list-composer {
   }
   .list-header .list-header-menu-icon {
     padding: 14px;
-    font-size: 40px;
+    font-size: calc(40px * var(--wekan-ui-font-scale, 1));
     text-align: center;
     /* iOS Safari fallback positioning */
     position: absolute;
@@ -1107,7 +1111,7 @@ form.inlined-form .list-composer {
   }
   .list-header .list-header-handle {
     padding: 14px;
-    font-size: 48px;
+    font-size: calc(48px * var(--wekan-ui-font-scale, 1));
     text-align: center;
     /* iOS Safari fallback positioning */
     position: absolute;
@@ -1129,7 +1133,7 @@ form.inlined-form .list-composer {
     grid-row: 1;
     grid-column: 2;
     align-self: end;
-    font-size: 20px;
+    font-size: calc(20px * var(--wekan-ui-font-scale, 1));
     font-weight: bold;
     line-height: 1.2;
     padding-bottom: 2px;
@@ -1138,7 +1142,7 @@ form.inlined-form .list-composer {
     grid-row: 2;
     grid-column: 2;
     align-self: start;
-    font-size: 16px;
+    font-size: calc(16px * var(--wekan-ui-font-scale, 1));
     line-height: 1.2;
   }
   .list-header .list-header-menu {
@@ -1184,7 +1188,7 @@ form.inlined-form .list-composer {
     grid-row: 1/3 !important;
     grid-column: 3 !important;
     padding: 14px !important;
-    font-size: 40px !important;
+    font-size: calc(40px * var(--wekan-ui-font-scale, 1)) !important;
     text-align: center !important;
   }
 
@@ -1198,7 +1202,7 @@ form.inlined-form .list-composer {
     grid-row: 1/3 !important;
     grid-column: 4 !important;
     padding: 14px !important;
-    font-size: 48px !important;
+    font-size: calc(48px * var(--wekan-ui-font-scale, 1)) !important;
     text-align: center !important;
   }
 
@@ -1206,7 +1210,7 @@ form.inlined-form .list-composer {
     grid-row: 1 !important;
     grid-column: 2 !important;
     align-self: end !important;
-    font-size: 20px !important;
+    font-size: calc(20px * var(--wekan-ui-font-scale, 1)) !important;
     font-weight: bold !important;
     line-height: 1.2 !important;
     padding-bottom: 2px !important;
@@ -1219,7 +1223,7 @@ form.inlined-form .list-composer {
     text-align: start !important;
     padding-inline-start: 0 !important;
     margin-inline-start: 0 !important;
-    font-size: 16px !important;
+    font-size: calc(16px * var(--wekan-ui-font-scale, 1)) !important;
     line-height: 1.2 !important;
   }
 
@@ -1249,7 +1253,7 @@ form.inlined-form .list-composer {
   grid-row: 1/3 !important;
   grid-column: 3 !important;
   padding: 14px !important;
-  font-size: 40px !important;
+  font-size: calc(40px * var(--wekan-ui-font-scale, 1)) !important;
   text-align: center !important;
 }
 
@@ -1263,7 +1267,7 @@ form.inlined-form .list-composer {
   grid-row: 1/3 !important;
   grid-column: 4 !important;
   padding: 14px !important;
-  font-size: 48px !important;
+  font-size: calc(48px * var(--wekan-ui-font-scale, 1)) !important;
   text-align: center !important;
 }
 
@@ -1271,7 +1275,7 @@ form.inlined-form .list-composer {
   grid-row: 1 !important;
   grid-column: 2 !important;
   align-self: end !important;
-  font-size: 20px !important;
+  font-size: calc(20px * var(--wekan-ui-font-scale, 1)) !important;
   font-weight: bold !important;
   line-height: 1.2 !important;
   padding-bottom: 2px !important;
@@ -1281,7 +1285,7 @@ form.inlined-form .list-composer {
   grid-row: 2 !important;
   grid-column: 2 !important;
   align-self: start !important;
-  font-size: 16px !important;
+  font-size: calc(16px * var(--wekan-ui-font-scale, 1)) !important;
   line-height: 1.2 !important;
 }
 
@@ -1618,7 +1622,7 @@ form.inlined-form .list-composer {
 .list.list-collapsed .list-header-name-collapsed {
   writing-mode: vertical-rl;
   text-align: center;
-  font-size: 12px;
+  font-size: calc(12px * var(--wekan-ui-font-scale, 1));
   color: #333;
   margin: 0;
   padding: 0;
@@ -1642,7 +1646,7 @@ form.inlined-form .list-composer {
   display: block !important;
   align-items: initial;
   justify-content: initial;
-  font-size: 16px !important;
+  font-size: calc(16px * var(--wekan-ui-font-scale, 1)) !important;
   box-shadow: none;
   margin: 5px auto;
   z-index: 10;

client/components/lists/list.js

@@ -423,8 +423,46 @@ Template.list.onRendered(function () {
           scrolled = true;
         }
       }
-      // vertical auto-scroll stays on the board canvas
-      const canvas = document.querySelector('.board-canvas');
+      // #6584: VERTICALLY, the thing to scroll is the LIST the pointer is over,
+      // not the board canvas. `.list-body` is `overflow-y: scroll` (list.css) and
+      // is what holds the cards; `.board-canvas` is `overflow-y: auto` and holds
+      // the swimlanes. Scrolling the canvas moves the whole board, which is what
+      // the report describes: "The whole Page/Site scrolls down and not the Line".
+      //
+      // It only showed up DOWNWARDS, and the asymmetry is the tell. Dragging up,
+      // the canvas is usually already at scrollTop 0, so computeEdgeScroll
+      // returned null, nothing here fired, and jQuery UI's own `scroll` option -
+      // which acts on the placeholder's scrollParent, i.e. the list body - scrolled
+      // the list, exactly as expected. Dragging down, the canvas nearly always HAS
+      // room, so this fired first and scrolled the board instead of the list.
+      //
+      // The canvas is still scrolled, but only once the list under the pointer
+      // cannot go further that way - so a drag down a long list scrolls the list,
+      // and a drag past the end of it moves on to the board. Same shape as the
+      // horizontal case above, which already picks the lane under the pointer.
+      let scrolledList = false;
+      const listBodies = document.querySelectorAll('.list-body');
+      const listRects = Array.prototype.map.call(listBodies, el =>
+        el.getBoundingClientRect());
+      // findLaneUnderPointer is a plain rectangle hit-test; the name is about
+      // where it was first used, not what it can be given.
+      const listIndex = findLaneUnderPointer(listRects, event.clientX, event.clientY);
+      if (listIndex !== -1) {
+        const nextListTop = computeEdgeScroll({
+          pointer: event.clientY,
+          lowEdge: listRects[listIndex].top,
+          highEdge: listRects[listIndex].bottom,
+          scrollPos: listBodies[listIndex].scrollTop,
+          scrollSize: listBodies[listIndex].scrollHeight,
+          clientSize: listBodies[listIndex].clientHeight,
+        });
+        if (nextListTop !== null) {
+          listBodies[listIndex].scrollTop = nextListTop;
+          scrolled = true;
+          scrolledList = true;
+        }
+      }
+      const canvas = scrolledList ? null : document.querySelector('.board-canvas');
       if (canvas) {
         const crect = canvas.getBoundingClientRect();
         const nextTop = computeEdgeScroll({

client/components/lists/listBody.js

@@ -53,6 +53,45 @@ function openCardWindow(cardId) {
   }
 }
 
+// #6465: "Clicking the mini card again to close the popout is still not
+// possible."
+//
+// On a desktop-sized screen the card details are NOT the route: clicking a
+// minicard only writes `openCards`, and boardBody renders one draggable window
+// per id in that list. The URL stays on the board. So closing by navigating to
+// the board - which is what the second click did - cleared `currentCard` and
+// left the window on screen, because nothing had taken the card OUT of
+// `openCards`. Only the window's own X button did that, which is why closing
+// worked from the card and not from the minicard.
+//
+// This is the close button's logic (cardDetails.js, `click
+// .js-close-card-details`), so both ways of closing a card do the same thing.
+function cardWindowIsOpen(cardId) {
+  if (!Utils.isMiniScreen() && (Session.get('openCards') || []).includes(cardId)) {
+    return true;
+  }
+  return Session.equals('currentCard', cardId);
+}
+
+function closeCardWindow(cardId) {
+  Session.set(
+    'openCards',
+    (Session.get('openCards') || []).filter(id => id !== cardId),
+  );
+  if (Session.equals('currentCard', cardId)) {
+    Session.set('currentCard', null);
+  }
+  Session.delete('popupCardId');
+  Session.delete('popupCardBoardId');
+  // A card opened by its own URL IS the route, and then the board has to be
+  // navigated back to. A card opened by clicking a minicard is not, and
+  // navigating would reset the board view for nothing.
+  const boardId = Session.get('currentBoard');
+  if (FlowRouter.current()?.params?.cardId === cardId && boardId) {
+    Utils.goBoardId(boardId);
+  }
+}
+
 Template.listBody.onCreated(function () {
   // for infinite scrolling
   this.cardlimit = new ReactiveVar(InfiniteScrollIter);
@@ -252,10 +291,37 @@ Template.listBody.onCreated(function () {
       return;
     }
 
+    // #4990: clicking the title TEXT edits it on the board, the way a list's
+    // title is edited. The minicard's own inlinedForm has already opened by the
+    // time this runs (it is delegated deeper in the DOM), so all that is left
+    // here is to not open the card on top of the editor - and to stop the
+    // wrapper link navigating away from the card being renamed. The rest of the
+    // minicard still opens it, and so does a middle-click or Ctrl-click on the
+    // link, which never reaches this handler.
+    const clickedEditableTitle =
+      clickedTitle && $target.closest('.js-open-inlined-form').length > 0;
+    if (clickedEditableTitle || $target.closest('.js-minicard-title-form').length > 0) {
+      // Let the title's own inlinedForm click handler run. Both handlers are
+      // delegated by Blaze on the same event root, so either propagation stop
+      // can prevent that sibling handler from replacing the title.
+      evt.preventDefault();
+      return;
+    }
+
     // Title clicks should open the regular board card details view.
     if (clickedTitle && !clickedLinkedReference) {
       evt.stopImmediatePropagation();
       evt.preventDefault();
+      // #6465: clicking the OPEN card again closes it. The toggle below has
+      // always been here, but this branch returned before ever reaching it - and
+      // the title covers most of the minicard, so in practice the second click
+      // almost always lands here and just re-opened the card that was already
+      // open. That is why it read as a missing feature rather than a dead
+      // branch. Same call as below, so both click targets behave alike.
+      if (cardWindowIsOpen(card._id)) {
+        closeCardWindow(card._id);
+        return;
+      }
       Session.delete('popupCardId');
       Session.delete('popupCardBoardId');
       Session.set('currentCard', card._id);
@@ -265,12 +331,18 @@ Template.listBody.onCreated(function () {
 
     if (Utils.isMiniScreen()) {
       evt.preventDefault();
+      // ...and on a phone, where the card is a popup rather than a pane, the
+      // second click closes that popup for the same reason.
+      if (Session.equals('popupCardId', card._id) && Popup.isOpen()) {
+        Popup.back();
+        return;
+      }
       Session.set('popupCardId', card._id);
       this.cardDetailsPopup(evt);
-    } else if (Session.equals('currentCard', card._id)) {
+    } else if (cardWindowIsOpen(card._id)) {
       evt.stopImmediatePropagation();
       evt.preventDefault();
-      Utils.goBoardId(Session.get('currentBoard'));
+      closeCardWindow(card._id);
     } else {
       // Allow normal href navigation, but if it's the same card URL,
       // we'll handle it by directly setting the session
@@ -786,6 +858,10 @@ Template.linkCardPopup.onCreated(function () {
   this.selectedBoardId = new ReactiveVar('');
   this.selectedSwimlaneId = new ReactiveVar('');
   this.selectedListId = new ReactiveVar('');
+  // Blaze only exposes Template.currentData() while a view is current. Store
+  // the add-card position now; both confirmation handlers cross an `await`, so
+  // asking Blaze for it later throws "There is no current view".
+  this.position = Template.currentData()?.position;
 
   this.boardId = Session.get('currentBoard');
   // Only when there IS a board. `currentBoard` is null on every page that is not
@@ -812,12 +888,11 @@ Template.linkCardPopup.onCreated(function () {
     this.swimlaneId = listData.swimlaneId || ReactiveCache.getSwimlane({ boardId: this.boardId })._id;
 
   this.getSortIndex = () => {
-    const position = Template.currentData().position;
     let ret;
-    if (position === 'top') {
+    if (this.position === 'top') {
       const firstCardDom = this.list.find('.js-minicard:first')[0];
       ret = Utils.calculateIndex(null, firstCardDom).base;
-    } else if (position === 'bottom') {
+    } else if (this.position === 'bottom') {
       const lastCardDom = this.list.find('.js-minicard:last')[0];
       ret = Utils.calculateIndex(lastCardDom, null).base;
     }
@@ -949,9 +1024,9 @@ Template.linkCardPopup.events({
     // https://github.com/wekan/wekan/issues/5715
     evt.stopPropagation();
     evt.preventDefault();
-    const linkedId = $('.js-select-cards option:selected').val();
+    const linkedId = tpl.$('.js-select-cards').val();
     if (!linkedId) {
-      const boardId = $('.js-select-boards option:selected').val();
+      const boardId = tpl.$('.js-select-boards').val();
       // No board and no card selected: nothing to link.
       if (!boardId) {
         Popup.back();
@@ -989,26 +1064,31 @@ Template.linkCardPopup.events({
       Popup.back();
       return;
     }
-    const nextCardNumber = await tpl.board.getNextCardNumber();
     const sortIndex = tpl.getSortIndex();
-    const _id = Cards.insert({
-      title: $('.js-select-cards option:selected').text(), //dummy
-      listId: tpl.listId,
-      swimlaneId: tpl.swimlaneId,
-      boardId: tpl.boardId,
-      sort: sortIndex,
-      type: 'cardType-linkedCard',
-      linkedId,
-      cardNumber: nextCardNumber,
-    });
-    Filter.addException(_id);
-    Popup.back();
+    try {
+      const _id = await Meteor.callAsync(
+        'createLinkedCard',
+        linkedId,
+        tpl.boardId,
+        tpl.swimlaneId,
+        tpl.listId,
+        sortIndex,
+      );
+      Filter.addException(_id);
+      Session.set(
+        'boardSubscriptionGeneration',
+        (Session.get('boardSubscriptionGeneration') || 0) + 1,
+      );
+      Popup.back();
+    } catch (error) {
+      alert(error.reason || error.message);
+    }
   },
   async 'click .js-link-board'(evt, tpl) {
     //LINK BOARD
     evt.stopPropagation();
     evt.preventDefault();
-    const impBoardId = $('.js-select-boards option:selected').val();
+    const impBoardId = tpl.$('.js-select-boards').val();
     if (
       !impBoardId ||
       ReactiveCache.getCard({ linkedId: impBoardId, archived: false })
@@ -1019,7 +1099,7 @@ Template.linkCardPopup.events({
     const nextCardNumber = await tpl.board.getNextCardNumber();
     const sortIndex = tpl.getSortIndex();
     const _id = Cards.insert({
-      title: $('.js-select-boards option:selected').text(), //dummy
+      title: tpl.$('.js-select-boards option:selected').text(), //dummy
       listId: tpl.listId,
       swimlaneId: tpl.swimlaneId,
       boardId: tpl.boardId,

client/components/lists/listHeader.jade

@@ -130,7 +130,7 @@ template(name="editListTitleForm")
 template(name="listActionPopup")
   //- Copy link, FIRST and above every permission check - see the swimlane
     popup: copying an address is reading, not editing.
-    models/lib/boardItemUrl.js, docs/Design/Page/Board-Item-Links.md
+    models/lib/boardItemUrl.js, docs/Features/Page/Board-Item-Links.md
   ul.pop-over-list
     li: a.js-copy-list-link
       i.fa.fa-link
@@ -138,6 +138,22 @@ template(name="listActionPopup")
         | {{_ 'copy-link-to-clipboard'}}
   span.copied-tooltip {{_ 'copied'}}
   hr
+  //- #1173: exporting a list is the board export restricted to it. Reading, like
+    the link above it, so it is not behind the edit permissions below. The menu
+    already says what it is about, so the rows are named "Export" and "Import"
+    and not "Export list" - the noun was in the heading above them either way.
+    Import WRITES, so it is offered only to somebody who may change the board;
+    `canImportIntoBoard` is the same question the popup itself asks
+    (client/components/boards/exportScope.js).
+  ul.pop-over-list
+    li: a.js-export-list
+      i.fa.fa-upload
+      span {{_ 'export'}}
+    if canImportIntoBoard
+      li: a.js-import-list
+        i.fa.fa-download
+        span {{_ 'import'}}
+  hr
   unless currentUser.isReadOnly
     unless currentUser.isReadAssignedOnly
       ul.pop-over-list
@@ -319,9 +335,13 @@ template(name="setListColorPopup")
     button.primary.confirm.js-submit {{_ 'save'}}
     button.js-remove-color.negate.wide.right {{_ 'unset-color'}}
 
-template(name="copyListPopup")
-  label(for='copy-list-title') {{_ 'title'}}:
-  input#copy-list-title.full-line(type="text" value="{{title}}" autofocus)
+//- WHERE a list goes: the board, the swimlane, which list to put it left or
+  right of, and Done. Copy list and Move list asked the same question with the
+  same form; only the title field above it differs, so that stays with each.
+  The dialog comes from the popup that includes this and is read from the
+  template INSTANCE, because inside `each boards` the data context is a board.
+  client/components/lists/listHeader.js
+template(name="listDestinationPicker")
   label {{_ 'boards'}}:
   select.js-select-boards
     each boards
@@ -343,29 +363,15 @@ template(name="copyListPopup")
   .edit-controls.clearfix
     button.primary.confirm.js-done {{_ 'done'}}
 
+template(name="copyListPopup")
+  label(for='copy-list-title') {{_ 'title'}}:
+  input#copy-list-title.full-line(type="text" value="{{title}}" autofocus)
+  +listDestinationPicker(dialog=dialog)
+
 template(name="moveListPopup")
   label(for='move-list-title') {{_ 'title'}}:
   input#move-list-title.full-line(type="text" value="{{title}}" autofocus)
-  label {{_ 'boards'}}:
-  select.js-select-boards
-    each boards
-      option(value="{{_id}}" selected="{{#if isDialogOptionBoardId _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}}
-  label {{_ 'lists'}}:
-  select.js-select-lists
-    each lists
-      option(value="{{_id}}" selected="{{#if isDialogOptionListId _id}}selected{{/if}}") {{add @index 1}}. {{title}}
-  div
-    input(type="radio" name="list-position" value="left" checked id="list-position-left" style="display: inline")
-    label(for="list-position-left") {{_ 'left-of-list'}}
-  div
-    input(type="radio" name="list-position" value="right" id="list-position-right" style="display: inline")
-    label(for="list-position-right") {{_ 'right-of-list'}}
-  .edit-controls.clearfix
-    button.primary.confirm.js-done {{_ 'done'}}
+  +listDestinationPicker(dialog=dialog)
 
 template(name="addListPopup")
   form.js-add-list-form

client/components/lists/listHeader.js

@@ -314,6 +314,8 @@ Template.listActionPopup.events({
     }
     Popup.back();
   },
+  'click .js-export-list': Popup.open('exportList'),
+  'click .js-import-list': Popup.open('importList'),
   'click .js-add-list': Popup.open('addList'),
   'click .js-set-list-width': Popup.open('setListWidth'),
   'click .js-set-color-list': Popup.open('setListColor'),
@@ -442,28 +444,50 @@ Template.listMorePopup.events({
   }),
 });
 
+
+// The three selects of the copy/move list dialogs, in one template. The dialog
+// is kept on THIS instance: inside `each boards` the data context is a board,
+// so a helper reaching into the context for it would find nothing.
+Template.listDestinationPicker.onCreated(function () {
+  this.autorun(() => {
+    const data = Template.currentData();
+    this.dialog = data && data.dialog;
+  });
+});
+
+Template.listDestinationPicker.helpers({
+  boards() {
+    return Template.instance().dialog.boards();
+  },
+  swimlanes() {
+    return Template.instance().dialog.swimlanes();
+  },
+  lists() {
+    return Template.instance().dialog.lists();
+  },
+  isDialogOptionBoardId(boardId) {
+    return Template.instance().dialog.isDialogOptionBoardId(boardId);
+  },
+  isDialogOptionSwimlaneId(swimlaneId) {
+    return Template.instance().dialog.isDialogOptionSwimlaneId(swimlaneId);
+  },
+  isDialogOptionListId(listId) {
+    return Template.instance().dialog.isDialogOptionListId(listId);
+  },
+  isTitleDefault(title) {
+    return Template.instance().dialog.isTitleDefault(title);
+  },
+});
+
 function registerListDialogTemplate(templateName) {
+  // The markup those helpers feed is one template - `listDestinationPicker` in
+  // listHeader.jade, included by both popups - so the helpers are registered on
+  // it, once, below. Each popup provides the `dialog` and keeps the events: a
+  // change or a click inside the picker bubbles up to the popup that includes
+  // it, which is the one holding the dialog.
   Template[templateName].helpers({
-    boards() {
-      return Template.instance().dialog.boards();
-    },
-    swimlanes() {
-      return Template.instance().dialog.swimlanes();
-    },
-    lists() {
-      return Template.instance().dialog.lists();
-    },
-    isDialogOptionBoardId(boardId) {
-      return Template.instance().dialog.isDialogOptionBoardId(boardId);
-    },
-    isDialogOptionSwimlaneId(swimlaneId) {
-      return Template.instance().dialog.isDialogOptionSwimlaneId(swimlaneId);
-    },
-    isDialogOptionListId(listId) {
-      return Template.instance().dialog.isDialogOptionListId(listId);
-    },
-    isTitleDefault(title) {
-      return Template.instance().dialog.isTitleDefault(title);
+    dialog() {
+      return Template.instance().dialog;
     },
   });
 

client/components/main/accessibility.css

@@ -81,7 +81,7 @@
 }
 
 .accessibility-page h2 {
-  font-size: 24px;
+  font-size: calc(24px * var(--wekan-ui-font-scale, 1));
   margin-bottom: 20px;
   color: #4d4d4d;
 }

client/components/main/customTheme.css

@@ -47,6 +47,38 @@
   margin: 0 0 4px;
   padding: 0;
 }
+/* Two switches, one row: what the theme IS on the start side ("Default (no
+   override)"), and where it ALSO applies on the end side ("All Boards", which
+   paints the overview's tiles in the theme's lighter colour). They are one
+   decision about the same theme, so they are one row rather than two stacked
+   menus, and each takes half the width so neither reads as the heading of the
+   other. On a narrow popup the row wraps and they stack, which is the same
+   layout one item at a time. */
+.theme-color-picker ul.pop-over-list.theme-scope-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+}
+.theme-color-picker ul.pop-over-list.theme-scope-row > li {
+  flex: 1 1 12em;
+  min-width: 0;
+}
+/* The chosen one is filled, not merely ticked: the tick alone is easy to miss on
+   a row that is otherwise identical to the one beside it. Same fill as the
+   selected row of the All Boards left menu and of the Admin Panel - one
+   selected-thing look everywhere.
+   `--theme-accent-fill`, not `--theme-accent`: the accent is one colour - the
+   solid end of a colour-slide theme - so on clearorange this button was flat
+   orange while the menu row behind the popup slid, which is two looks for one
+   selected thing. The fill is the slide where the theme has one. */
+.theme-color-picker ul.pop-over-list.theme-scope-row > li.active > a,
+.theme-color-picker ul.pop-over-list.theme-scope-row > li.active > a:hover {
+  background: var(--theme-accent-fill, var(--theme-accent, #2980b9));
+  color: #fff !important;
+}
+.theme-color-picker ul.pop-over-list.theme-scope-row > li.active > a i {
+  color: #fff !important;
+}
 
 /* As many colour swatches visible at once as the width allows.
  *

client/components/main/dueCards.jade

@@ -1,7 +1,7 @@
 template(name="dueCardsControls")
   //- The controls of this page. They were a group in its second header bar,
     beside a title the first bar now carries; they are a view of the shared
-    page sidebar. models/lib/pageSidebar.js, docs/Design/Page/Header.md
+    page sidebar. models/lib/pageSidebar.js, docs/Features/Page/Header.md
   a.board-header-btn.js-due-cards-view-change(title="{{_ 'dueCardsViewChange-title'}}")
     i.fa.fa-caret-down
     if $eq dueCardsView 'me'

client/components/main/editor.css

@@ -5,6 +5,11 @@
   top: -10px;
   inset-inline-end: 60px;
 }
+.inlined-form.js-card-customfield-text > a.fa.fa-brands.fa-markdown {
+  float: none;
+  inset-inline-end: 28px;
+  top: -24px;
+}
 .new-comment a.fa.fa-copy,
 .inlined-form a.fa.fa-copy {
   float: inline-end;

client/components/main/editor.jade

@@ -1,7 +1,8 @@
 template(name="editor")
   a.fa.fa-brands.fa-markdown(title="{{_ 'convert-to-markdown'}}")
-  a.fa.fa-copy(title="{{_ 'copy-text-to-clipboard'}}")
-  span.copied-tooltip {{_ 'copied'}}
+  unless hideCopy
+    a.fa.fa-copy(title="{{_ 'copy-text-to-clipboard'}}")
+    span.copied-tooltip {{_ 'copied'}}
   textarea.editor(
     dir="auto"
     class="{{class}}"

client/components/main/globalSearch.jade

@@ -1,7 +1,7 @@
 template(name="globalSearchControls")
   //- The controls of this page. They were a group in its second header bar,
     beside a title the first bar now carries; they are a view of the shared
-    page sidebar. models/lib/pageSidebar.js, docs/Design/Page/Header.md
+    page sidebar. models/lib/pageSidebar.js, docs/Features/Page/Header.md
   a.board-header-btn.js-global-search-view-change(title="{{_ 'globalSearchViewChange-title'}}")
     i.fa.fa-caret-down
     if $eq globalSearchView 'me'

client/components/main/globalSearch.js

@@ -372,6 +372,7 @@ Template.globalSearch.helpers({
         operator_debug: TAPi18n.__('operator-debug'),
         operator_org: TAPi18n.__('operator-org'),
         operator_team: TAPi18n.__('operator-team'),
+        operator_number: TAPi18n.__('operator-number'),
         predicate_overdue: TAPi18n.__('predicate-overdue'),
         predicate_archived: TAPi18n.__('predicate-archived'),
         predicate_all: TAPi18n.__('predicate-all'),
@@ -414,6 +415,7 @@ Template.globalSearch.helpers({
         ['\n- ', 'globalSearch-instructions-operator-creator'],
         ['\n- ', 'globalSearch-instructions-operator-org'],
         ['\n- ', 'globalSearch-instructions-operator-team'],
+        ['\n- ', 'globalSearch-instructions-operator-number'],
         ['\n- ', 'globalSearch-instructions-operator-due'],
         ['\n- ', 'globalSearch-instructions-operator-created'],
         ['\n- ', 'globalSearch-instructions-operator-modified'],

client/components/main/globalThemeColor.js

@@ -28,7 +28,7 @@ import { activeAccent, activeFill } from '/models/lib/themeAccents';
 // The class the CHROME (the two top bars, the board wrapper) must carry, from the
 // same order of themes the <body> autorun below applies:
 //   the user's own override, then the board's own colour on a board page, then the
-// site theme (docs/Design/Page/Theme.md). Registered as a Blaze helper so the
+// site theme (docs/Features/Page/Theme.md). Registered as a Blaze helper so the
 // templates read ONE answer instead of each re-deriving part of the order - which is
 // what left the top bars on the default colour while the buttons took the site theme.
 Template.registerHelper('themeColorClass', () => {
@@ -110,6 +110,20 @@ Meteor.startup(() => {
     }
   }
 
+  // Member Settings / Change color, beside "Default (no override)": paint the All
+  // Boards tiles in the theme's lighter colour instead of each board's own. It is
+  // a class on <body> rather than one on the list, because the preference is the
+  // user's and follows them to every page that shows board tiles.
+  Tracker.autorun(() => {
+    const user = Meteor.user();
+    const on = !!(user && user.profile && user.profile.allBoardsThemeTiles);
+    try {
+      document.body.classList.toggle('has-theme-board-tiles', on);
+    } catch (_) {
+      // document.body may not exist yet in exotic embeddings; ignore.
+    }
+  });
+
   Tracker.autorun(() => {
     const user = Meteor.user();
     const globalColor = user && user.profile && user.profile.globalThemeColor;

client/components/main/header.css

@@ -40,7 +40,7 @@
   row-gap: 4px;
 }
 #header #header-main-bar h1 {
-  font-size: 20px;
+  font-size: calc(20px * var(--wekan-ui-font-scale, 1));
   /* A flex box with its own centred line, so the title sits on the bar's middle with
      everything else instead of on the middle of a line box far taller than its text. */
   display: flex;
@@ -127,11 +127,11 @@
   color: #f2f2f2;
   padding: 0 6px;
   height: 28px;
-  font-size: 13px;
+  font-size: calc(13px * var(--wekan-ui-font-scale, 1));
   display: inline-flex;
   align-items: center;
   gap: 4px;
-  line-height: 28px;
+  line-height: calc(28px * var(--wekan-ui-font-scale, 1));
   margin: 0 4px;
   white-space: nowrap;
 }
@@ -209,10 +209,10 @@
   color: #f2f2f2;
   padding: 0;
   height: 28px;
-  font-size: 13px;
+  font-size: calc(13px * var(--wekan-ui-font-scale, 1));
   float: inline-start;
   overflow: hidden;
-  line-height: 28px;
+  line-height: calc(28px * var(--wekan-ui-font-scale, 1));
   margin: 0 12px;
 }
 /* The sidebar hamburger sits at the far right; drop its wide 12px side margins so
@@ -228,7 +228,7 @@
 #header #header-main-bar .board-header-btn i.fa {
   float: inline-start;
   display: block;
-  line-height: 28px;
+  line-height: calc(28px * var(--wekan-ui-font-scale, 1));
   color: #f2f2f2;
   margin: 0 10px;
 }
@@ -246,7 +246,7 @@
 #header #header-main-bar .board-header-btn .board-header-btn-icon {
   float: inline-start;
   display: block;
-  line-height: 28px;
+  line-height: calc(28px * var(--wekan-ui-font-scale, 1));
   color: #27ae60;
   margin: 0 10px;
   cursor: pointer;
@@ -299,7 +299,7 @@ body:not(.board-view) #header #header-main-bar h1 {
      the same, by naming this bar in the selector list the main bar already has
      (boardColors.css) rather than by restating each hex a second time. */
   background: #2980b9;
-  font-size: 12px;
+  font-size: calc(12px * var(--wekan-ui-font-scale, 1));
   display: flex;
   z-index: 1000;
   padding: 10px var(--wekan-header-gutter);
@@ -348,6 +348,29 @@ body:not(.board-view) #header #header-main-bar h1 {
   margin-block: 0;
 }
 
+/* The page title beside the house. On a board, and for a board admin, it is
+   also the rename button (client/components/main/header.js) - so it says so on
+   hover, the way a list's heading does.
+
+   `min-width` is the part that is easy to miss: a board whose title is EMPTY
+   renders no text at all, and an element with no content is zero pixels wide
+   and cannot be clicked. The minimum keeps a strip of the bar clickable, so an
+   empty title can still be given one. `min-height` does the same for the other
+   axis, and the padding makes the target bigger than the glyphs. */
+#header-quick-access .header-page-title.is-editable {
+  cursor: text;
+  display: inline-block;
+  min-width: 4em;
+  min-height: 1.3em;
+  padding: 2px 4px;
+  border-radius: 4px;
+  transition: background-color 0.2s ease;
+}
+
+#header-quick-access .header-page-title.is-editable:hover {
+  background-color: rgba(255, 255, 255, 0.1);
+}
+
 #header-quick-access .home-icon {
   display: flex;
   align-items: center;
@@ -382,7 +405,7 @@ body:not(.board-view) #header #header-main-bar h1 {
 }
 
 #header-quick-access .home-icon .fa-home {
-  font-size: 16px;
+  font-size: calc(16px * var(--wekan-ui-font-scale, 1));
   margin-inline-end: 4px;
 }
 
@@ -395,9 +418,9 @@ body:not(.board-view) #header #header-main-bar h1 {
    - the same 22px the left menu's rows below it are indented by (4px of margin
    plus 18px of padding), so the two line up down the page.
    The gap to the logo beside it is the 4 + 4 of the two margins, like every
-   other pair of neighbours in this bar. docs/Design/Page/Header.md */
+   other pair of neighbours in this bar. docs/Features/Page/Header.md */
 #header-quick-access .allBoards {
-  font-size: 14px;
+  font-size: calc(14px * var(--wekan-ui-font-scale, 1));
   padding-block: 4px;
   padding-inline: 0;
 }
@@ -421,14 +444,14 @@ body.mobile-mode #header-quick-access .home-icon .header-home-link {
 
 body.mobile-mode #header-quick-access .home-icon .header-home-link .fa-home,
 body.mobile-mode #header-quick-access .home-icon .fa-home {
-  font-size: 16px;
+  font-size: calc(16px * var(--wekan-ui-font-scale, 1));
   margin-inline-end: 0;
 }
 
 /* No inline padding in mobile mode either. This rule existed to cut the 15px
    the desktop `.allBoards` carried down to 6px; that padding is gone, so
    matching it here would only put the house back off the line every other width
-   starts on. docs/Design/Page/Header.md */
+   starts on. docs/Features/Page/Header.md */
 body.mobile-mode #header-quick-access .allBoards {
   padding-block: 4px;
   padding-inline: 0;
@@ -649,7 +672,7 @@ body.mobile-mode #header-quick-access .allBoards {
   line-height: normal !important;
   margin: 0 !important;
   transition: all 0.2s ease !important;
-  font-size: 14px !important;
+  font-size: calc(14px * var(--wekan-ui-font-scale, 1)) !important;
 }
 
 #header-quick-access .mobile-mode-toggle .board-header-btn i.active {
@@ -762,11 +785,11 @@ body.mobile-mode #header-quick-access .allBoards {
        readable-font minimum (~44px / 16px). Enlarged vertically + bigger font;
        width is unchanged so this does not worsen the horizontal icon crowding. */
     height: 44px;
-    line-height: 44px;
-    font-size: 16px;
+    line-height: calc(44px * var(--wekan-ui-font-scale, 1));
+    font-size: calc(16px * var(--wekan-ui-font-scale, 1));
   }
   #header #header-main-bar .board-header-btn i.fa {
-    line-height: 32px;
+    line-height: calc(32px * var(--wekan-ui-font-scale, 1));
   }
   #header #header-main-bar .board-header-btn i.fa + span {
     display: none;
@@ -786,17 +809,17 @@ body.mobile-mode #header-quick-access .allBoards {
   }
 
   #header-quick-access .home-icon .fa-home {
-    font-size: 16px;
+    font-size: calc(16px * var(--wekan-ui-font-scale, 1));
     margin-inline-end: 4px;
   }
 
   /* 6px at the START, the same as at every other width, so the house begins on
      one line down the page no matter how wide the window is. It was 8px, which
      moved it 2px in on a phone alone. The end stays 8px - that is a gap between
-     two things, not the inset. docs/Design/Page/Header.md */
+     two things, not the inset. docs/Features/Page/Header.md */
   #header-quick-access .home-icon .header-home-link {
     padding: 4px 8px 4px 6px;
-    font-size: 12px;
+    font-size: calc(12px * var(--wekan-ui-font-scale, 1));
   }
 
   /* Ensure All Boards text is visible on mobile */
@@ -808,12 +831,12 @@ body.mobile-mode #header-quick-access .allBoards {
   /* Adjust for very small screens */
   @media screen and (max-width: 480px) {
     #header-quick-access .home-icon .header-home-link {
-      font-size: 11px;
+      font-size: calc(11px * var(--wekan-ui-font-scale, 1));
       padding: 3px 6px;
     }
 
     #header-quick-access .home-icon .fa-home {
-      font-size: 14px;
+      font-size: calc(14px * var(--wekan-ui-font-scale, 1));
       margin-inline-end: 3px;
     }
   }
@@ -1079,15 +1102,15 @@ body.mobile-mode #header-quick-access .allBoards {
     }
 
     #header-quick-access .home-icon .header-home-link {
-      font-size: 16px !important; /* Much larger text */
+      font-size: calc(16px * var(--wekan-ui-font-scale, 1)) !important; /* Much larger text */
       /* 6px at the START here too - the tap target grows, the INSET does not.
          At 12px the house began 6px further in on a small phone than at every
-         other width. docs/Design/Page/Header.md */
+         other width. docs/Features/Page/Header.md */
       padding: 8px 12px 8px 6px !important;
     }
 
     #header-quick-access .home-icon .fa-home {
-      font-size: 20px !important; /* Much larger icon */
+      font-size: calc(20px * var(--wekan-ui-font-scale, 1)) !important; /* Much larger icon */
       margin-inline-end: 6px !important;
     }
 
@@ -1098,11 +1121,11 @@ body.mobile-mode #header-quick-access .allBoards {
     /* Make mobile mode toggle larger */
     #header-quick-access .mobile-mode-toggle .board-header-btn {
       padding: 7px 17px !important;
-      font-size: 16px !important;
+      font-size: calc(16px * var(--wekan-ui-font-scale, 1)) !important;
     }
 
     #header-quick-access .mobile-mode-toggle .board-header-btn i {
-      font-size: 18px !important;
+      font-size: calc(18px * var(--wekan-ui-font-scale, 1)) !important;
     }
   }
 
@@ -1419,7 +1442,7 @@ body.mobile-mode #header-quick-access .allBoards {
   }
   .iphone-device #header-quick-access .home-icon .header-home-link .fa-home,
   .iphone-device #header-quick-access .home-icon .fa-home {
-    font-size: 16px !important;
+    font-size: calc(16px * var(--wekan-ui-font-scale, 1)) !important;
     margin-inline-end: 0 !important;
   }
   /* No auto margin: everything in this bar packs from the START and wraps
@@ -1554,7 +1577,7 @@ body.mobile-mode #header-quick-access .allBoards {
   .iphone-device #header-quick-access .home-icon .fa-home,
   .iphone-device .wrapper ~ #header-quick-access .home-icon .fa-home,
   .iphone-device body:not(.board-view) #header-quick-access .home-icon .fa-home {
-    font-size: 16px !important;
+    font-size: calc(16px * var(--wekan-ui-font-scale, 1)) !important;
     margin-inline-end: 0 !important;
     padding: 0 !important;
   }
@@ -1731,7 +1754,7 @@ body.mobile-mode #header-quick-access .allBoards {
     padding: 0 !important;
     min-width: 44px !important;
     height: 44px !important;
-    line-height: 44px !important;
+    line-height: calc(44px * var(--wekan-ui-font-scale, 1)) !important;
     display: inline-flex !important;
     align-items: center !important;
     justify-content: center !important;

client/components/main/header.jade

@@ -13,7 +13,7 @@ template(name="header")
         Boards; the TEXT beside it is the page you are on, which on a board is
         the board's title. It used to say "All Boards" on every page, so the one
         bar that is always on screen named a place you were not.
-        models/lib/pageTitles.js, docs/Design/Page/Header.md
+        models/lib/pageTitles.js, docs/Features/Page/Header.md
       span.home-icon.allBoards
         //- `header-home-link`: the rules that collapse this link's LABEL on a
           narrow screen were written as `.home-icon a`, which also matched the
@@ -27,29 +27,33 @@ template(name="header")
           strip always on screen and already short of width. The root names the
           place and the tooltip carries the rest.
           client/components/main/header.js
-        span.header-page-title(title="{{headerTitleFullPath}}")
+        //- The board's NAME is the button that renames it: clicking the title
+          text opens the same "Change title" popup the pencil beside it used to
+          open, so there is one thing to click instead of a word and an icon
+          that do the same job. Board admins only - everybody else gets the
+          plain title. The `is-editable` class also gives the element a minimum
+          width, so a board whose title is EMPTY still has an area to click.
+        span.header-page-title(title="{{headerTitleFullPath}}"
+          class="{{#if canEditBoardTitle}}js-edit-board-title is-editable{{/if}}")
           if headerTitleKey
             | {{_ headerTitleKey}}
           else
             = headerTitleText
-        //- The pencil that renames the board, immediately right of its name.
-        if isBoardPage
-          +boardEditTitleButton
 
       // Logo - visible; on mobile constrained by CSS
       unless currentSetting.hideLogo
         if currentSetting.customTopLeftCornerLogoImageUrl
           if currentSetting.customTopLeftCornerLogoLinkUrl
             a.header-logo(href="{{currentSetting.customTopLeftCornerLogoLinkUrl}}" alt="{{currentSetting.productName}}" title="{{currentSetting.productName}}")
-              img(src="{{currentSetting.customTopLeftCornerLogoImageUrl}}" height="{{#if currentSetting.customTopLeftCornerLogoHeight}}#{currentSetting.customTopLeftCornerLogoHeight}{{else}}27{{/if}}" width="auto" margin="0" padding="0")
+              img(src="{{currentSetting.customTopLeftCornerLogoImageUrl}}" alt="{{currentSetting.productName}}" height="{{#if currentSetting.customTopLeftCornerLogoHeight}}#{currentSetting.customTopLeftCornerLogoHeight}{{else}}27{{/if}}" width="auto" margin="0" padding="0")
           unless currentSetting.customTopLeftCornerLogoLinkUrl
             img.header-logo(src="{{currentSetting.customTopLeftCornerLogoImageUrl}}" height="{{#if currentSetting.customTopLeftCornerLogoHeight}}#{currentSetting.customTopLeftCornerLogoHeight}{{else}}27{{/if}}" width="auto" margin="0" padding="0" alt="{{currentSetting.productName}}" title="{{currentSetting.productName}}")
         unless currentSetting.customTopLeftCornerLogoImageUrl
           //- `header-logo` on all three branches - a custom logo that links, one
             that does not, and the stock one - so the bar can space the logo the
-            same way whichever is drawn. docs/Design/Page/Header.md
+            same way whichever is drawn. docs/Features/Page/Header.md
           div#headerIsSettingDatabaseCallDone.header-logo
-            img(src="{{pathFor '/logo-header.png'}}" alt="{{currentSetting.productName}}" title="{{currentSetting.productName}}")
+            img(src="{{pathFor '/logo-header.png'}}" alt="{{headerLogoAlt}}" title="{{headerLogoAlt}}")
 
       // Mobile/desktop mode toggle (swapped with zoom)
       .mobile-mode-toggle
@@ -163,7 +167,7 @@ template(name="header")
           / Gantt / Table / Stats on a board, Lists / Table on All Boards. A view
           menu says what you are looking AT, so it belongs beside the page's name
           in the bar that is always on screen, not in a second bar or behind a
-          panel. docs/Design/Page/Header.md
+          panel. docs/Features/Page/Header.md
         if isBoardPage
           +boardViewMenu
         else if isAllBoardsPage
@@ -188,7 +192,7 @@ template(name="header")
           It is a box rather than `display: contents`, unlike the page's own
           button groups, and deliberately: these five belong together, and an
           avatar left on the first row with its hamburger on the second is worse
-          than the whole cluster moving down at once. docs/Design/Page/Header.md
+          than the whole cluster moving down at once. docs/Features/Page/Header.md
         .header-account-group
           //- The divider is the seam. Everything before it belongs to the PAGE -
             its controls, its view menu, the panel's tabs. The bar runs them
@@ -218,7 +222,7 @@ template(name="header")
     none now - their title is in the bar above and their controls are in a
     sidebar - and `#header` is a coloured block with a height of its own, so
     without this it painted a tall empty strip under the first bar on every one
-    of them. docs/Design/Page/Header.md
+    of them. docs/Features/Page/Header.md
   //- See the note above: dragging this bar is owned by headerDragscroll.js.
   if headerBar
     #header.nodragscroll(class="{{themeColorClass}}")
@@ -261,7 +265,7 @@ template(name="offlineWarning")
 //- Shaped like boardChangeViewPopup - a `ul.pop-over-list` of links, with a
 //- check on the one you are looking at - because it is the same kind of menu
 //- and opens from the same kind of button. On a phone it is full width, which
-//- body.mobile-mode does for every pop-over. docs/Design/Page/Header.md
+//- body.mobile-mode does for every pop-over. docs/Features/Page/Header.md
 template(name="starredBoardsPopup")
   ul.pop-over-list
     each currentUser.starredBoards

client/components/main/header.js

@@ -101,7 +101,7 @@ Template.header.helpers({
   // is a board; otherwise the page's, by route name. Two helpers rather than
   // one string, because a translated title has to go through {{_ }} and a board
   // title must NOT (it is user text, and a board called "settings" is not the
-  // Admin Panel). docs/Design/Page/Header.md
+  // Admin Panel). docs/Features/Page/Header.md
   // How many boards are starred, shown on the button the way a board's own star
   // shows its count. Nothing is shown when none are.
   // The button carries no star icon any more, so this number IS its label -
@@ -136,6 +136,14 @@ Template.header.helpers({
   isBoardPage() {
     return Boolean(Utils.getCurrentBoardId());
   },
+  // True when the title in this bar is a BOARD's title and the user may rename
+  // it: the title text itself is then the rename button. The pencil that used
+  // to sit beside it is gone - one thing to click, not two that did the same.
+  canEditBoardTitle() {
+    return Boolean(
+      Utils.getCurrentBoardId() && ReactiveCache.getCurrentUser()?.isBoardAdmin(),
+    );
+  },
   isAllBoardsPage() {
     return ALL_BOARDS_VIEW_ROUTES.includes(FlowRouter.getRouteName());
   },
@@ -267,6 +275,12 @@ function headerTitleTrailOf() {
 
 Template.header.helpers({
 
+  // Settings arrive after the header's first render. Keep an accessible name
+  // on the stock logo during that short loading interval as well.
+  headerLogoAlt() {
+    return ReactiveCache.getCurrentSetting()?.productName || 'WeKan';
+  },
+
   wrappedHeader() {
     return !Session.get('currentBoard');
   },
@@ -332,7 +346,7 @@ Template.header.helpers({
 
 Template.header.events({
   // The starred boards, by name. They were listed inline in this bar; the bar
-  // is one row now and the names are in the popup. docs/Design/Page/Header.md
+  // is one row now and the names are in the popup. docs/Features/Page/Header.md
   // Titled "Starred Boards", from the key the app already has for that phrase,
   // rather than a `starredBoardsPopup-title` of its own: the convention key
   // would be a second copy of one phrase in all 147 language files, English in
@@ -342,6 +356,18 @@ Template.header.events({
   // `no-title` pop-over with nothing to shut it but clicking away.
   'click .js-open-starred-boards': Popup.open('starredBoards', { titleKey: 'allboards.starred' }),
 
+  // Rename the board by clicking its name. The popup is the EXISTING
+  // `boardChangeTitlePopup` - the same form the pencil opened, with the title
+  // and the description in it - so this changes only what you click to get
+  // there. It is opened with the board as its data context, because this bar's
+  // context is the page and not the board, and the form fills its fields from
+  // `title` and `description`.
+  'click .js-edit-board-title'(evt) {
+    const board = Utils.getCurrentBoard();
+    if (!board || !ReactiveCache.getCurrentUser()?.isBoardAdmin()) return;
+    Popup.open('boardChangeTitle').call(board, evt);
+  },
+
   // Star the page you are on, or unstar it. The title stored with it is the
   // one in the browser tab - "Product name - All Boards / Remaining" - because
   // that is what the dropdown lists, and a row saying `/allboards/remaining`
@@ -356,7 +382,7 @@ Template.header.events({
   },
   // The one hamburger, in the bar that is always on screen. Which sidebar it
   // toggles depends on where you are: a board has its own, and every other page
-  // shares one. docs/Design/Page/Header.md
+  // shares one. docs/Features/Page/Header.md
   'click .js-toggle-page-sidebar'(evt) {
     evt.preventDefault();
     const boardSidebar = Utils.getCurrentBoardId() ? getSidebarInstance() : null;

client/components/main/keyboardShortcuts.css

@@ -12,7 +12,7 @@
 .shortcuts-list .shortcuts-list-item .shortcuts-list-item-keys kbd {
   padding: 5px 8px;
   margin: 5px;
-  font-size: 18px;
+  font-size: calc(18px * var(--wekan-ui-font-scale, 1));
 }
 .shortcuts-list .shortcuts-list-item .shortcuts-list-item-action {
   font-size: 1.4em;

client/components/main/layouts.css

@@ -189,8 +189,15 @@ button {
      6.09's 14px — which is the "everything is way too big" regression. Mobile
      readability is handled by the mobile media queries, not by inflating the
      desktop base font. */
-  font: 14px Roboto, Poppins, "Helvetica Neue", Arial, Helvetica, sans-serif;
-  line-height: 18px;
+  /* Family and SIZE separately, not the `font` shorthand. The shorthand's size
+     is what Member Settings / Font / Size has to be able to move, and it moves
+     it the same way every other size in the app moves: through the scale
+     variable (client/components/main/uiFont.css). As a shorthand it also reset
+     `line-height` to normal and the line below set it again, so splitting it
+     changes nothing else. */
+  font-family: Roboto, Poppins, "Helvetica Neue", Arial, Helvetica, sans-serif;
+  font-size: calc(14px * var(--wekan-ui-font-scale, 1));
+  line-height: calc(18px * var(--wekan-ui-font-scale, 1));
   color: #4d4d4d;
   /* Improve text rendering */
   -webkit-font-smoothing: antialiased;
@@ -243,8 +250,30 @@ body.mobile-mode #content {
   overflow-y: auto;
   overflow-x: hidden;
   -webkit-overflow-scrolling: touch;
-  height: calc(100vh - 48px);
-  height: calc(100dvh - 48px);
+  /* #6488, and the reason that issue kept coming back after being closed three
+     times: THE LAST PIECE OF VIEWPORT ARITHMETIC. This said
+     `height: calc(100dvh - 48px)`, and 48px is a guess at how tall the header is.
+     The header is not 48px and is not any one number - Utils publishes
+     --wekan-header-height from a ResizeObserver for exactly this reason, because
+     the quick-access bar WRAPS to a second and third row depending on the
+     language and the window width, and its own comment says "every fixed number
+     for it has been wrong for some of those".
+     On a phone, where the bar does wrap, #content was therefore taller than the
+     room under the header by however much the header exceeded 48px, so its
+     bottom sat BELOW the bottom of the screen. body.mobile-mode is
+     `position: fixed` and the phone rules make it `overflow: hidden`, so that
+     strip is unreachable: everything below it inherits the error through the
+     `height: 100%` chain (boardsList.css), and the last rows of the board list
+     end up where no gesture can reach them. That is "in mobile board menu you
+     cant scroll boards" - the list scrolls, it just ends off screen.
+     Nothing has to be computed here. body is a flex COLUMN of exactly one
+     viewport and this is its `flex: 1` item (below), so the space left under the
+     header - whatever the header turns out to be this paint - IS this box. The
+     arithmetic was overriding a correct answer with a wrong one.
+     `min-height: 0` so it can be SHORTER than its content: a flex item will not
+     shrink below its content otherwise, and an inner scroller whose ancestor
+     refuses to shrink never scrolls. */
+  min-height: 0;
   overscroll-behavior: contain;
 }
 #content {
@@ -286,7 +315,7 @@ body.mobile-mode #content {
 #modal .modal-content .modal-close-btn {
   display: block;
   float: inline-end;
-  font-size: 18px;
+  font-size: calc(18px * var(--wekan-ui-font-scale, 1));
 }
 #modal .modal-content-wide {
   width: min(800px, 95vw);
@@ -303,7 +332,7 @@ body.mobile-mode #content {
 #modal .modal-content-wide .modal-close-btn {
   display: block;
   float: inline-end;
-  font-size: 18px;
+  font-size: calc(18px * var(--wekan-ui-font-scale, 1));
 }
 /* Archived boards modal: full-width panel that extends to the bottom of the browser
    window (so archived boards show full width with maximum vertical space). It is the
@@ -329,12 +358,12 @@ body.mobile-mode #content {
 /* #6465: heading sizes back to the 6.09 values (22/18/16px) — the vw clamps
    resolved to 24/20/18px on desktop and compounded the density regression. */
 h1 {
-  font-size: 22px;
+  font-size: calc(22px * var(--wekan-ui-font-scale, 1));
   line-height: 1.2em;
   margin: 0 0 9px;
 }
 h2 {
-  font-size: 18px;
+  font-size: calc(18px * var(--wekan-ui-font-scale, 1));
   line-height: 1.2em;
   margin: 0 0 7px;
 }
@@ -342,7 +371,7 @@ h3,
 h4,
 h5,
 h6 {
-  font-size: 16px;
+  font-size: calc(16px * var(--wekan-ui-font-scale, 1));
   line-height: 1.25em;
   margin: 0 0 5px;
 }
@@ -602,11 +631,11 @@ a:not(.disabled).is-active i.fa {
   max-width: min(600px, 90vw);
 }
 .big-message h1 {
-  font-size: 20px;
+  font-size: calc(20px * var(--wekan-ui-font-scale, 1));
   margin-bottom: 27px;
 }
 .big-message p {
-  font-size: 16px;
+  font-size: calc(16px * var(--wekan-ui-font-scale, 1));
   line-height: 1.3;
 }
 .gutter {
@@ -655,7 +684,7 @@ a:not(.disabled).is-active i.fa {
 }
 .basicTabs-container .tabs-list .tab-item {
   font-weight: 600;
-  font-size: 13px;
+  font-size: calc(13px * var(--wekan-ui-font-scale, 1));
   display: inline-block;
   padding: 13px 15px;
   margin: 0;
@@ -697,11 +726,25 @@ a:not(.disabled).is-active i.fa {
 @media screen and (max-width: 800px),
        screen and (max-device-width: 932px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: landscape),
        screen and (max-device-width: 932px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: portrait) {
+  /* Keep the header and page content as independent areas in BOTH UI modes.
+     body.mobile-mode already made #content scroll above, but a phone whose user
+     explicitly selected desktop mode did not match that selector. With the body
+     bounded to the viewport, the page was then clipped instead of reaching its
+     final controls or rows. This shared layout rule covers every route; pages
+     with an intentional alternate scroll owner override it more specifically. */
+  body {
+    overflow: hidden;
+    height: 100vh;
+    height: 100dvh;
+  }
+
   #content {
     margin: 1px 0px 0px 0px;
     height: calc(100% - 0px);
-    /* Improve touch scrolling */
+    overflow-y: auto;
+    overflow-x: hidden;
     -webkit-overflow-scrolling: touch;
+    overscroll-behavior: contain;
   }
   #content > .wrapper {
     margin-top: 0px;
@@ -723,13 +766,13 @@ a:not(.disabled).is-active i.fa {
     min-height: 44px;
     min-width: 44px;
     padding: 12px 16px;
-    font-size: 16px; /* Prevent zoom on iOS */
+    font-size: calc(16px * var(--wekan-ui-font-scale, 1)); /* Prevent zoom on iOS */
     touch-action: manipulation;
   }
 
   /* Form elements */
   input, select, textarea {
-    font-size: 16px; /* Prevent zoom on iOS */
+    font-size: calc(16px * var(--wekan-ui-font-scale, 1)); /* Prevent zoom on iOS */
     padding: 12px;
     min-height: 44px;
     touch-action: manipulation;
@@ -762,7 +805,7 @@ a:not(.disabled).is-active i.fa {
        is added on top of it. It used to be 8px here, 16px on a tablet and 8px on
        a large display, so the All Boards house started at a different X on every
        screen size - and on none of them on the line the left menu's rows start
-       on. docs/Design/Page/Header.md */
+       on. docs/Features/Page/Header.md */
     padding: 8px 0;
     /* Keep top bar on a single row on small screens */
     flex-wrap: nowrap;
@@ -817,13 +860,13 @@ a:not(.disabled).is-active i.fa {
     padding: 4px 6px;
   }
   #header-quick-access .home-icon a .fa-home {
-    font-size: 16px;
+    font-size: calc(16px * var(--wekan-ui-font-scale, 1));
     margin-inline-end: 0;
   }
   /* `.allBoards` is the same element as `.home-icon`, and it carries no inline
      padding at any width now (header.css). This rule cut a 15px desktop padding
      down to 6px on a phone, which is half of why the All Boards house started at
-     a different X on every screen size. docs/Design/Page/Header.md */
+     a different X on every screen size. docs/Features/Page/Header.md */
   #header-quick-access .allBoards {
     padding-block: 4px;
     padding-inline: 0;
@@ -836,7 +879,7 @@ a:not(.disabled).is-active i.fa {
   /* No auto margin: the bar packs from the START and wraps forward at every
      width, so nothing is pushed to the far end. This one survived the sweep
      that removed the others because it lives in layouts.css rather than
-     header.css. docs/Design/Page/Header.md */
+     header.css. docs/Features/Page/Header.md */
   #header-user-bar {
     margin-inline-start: 0;
   }
@@ -876,7 +919,7 @@ a:not(.disabled).is-active i.fa {
 
   /* Table mobile optimization */
   table {
-    font-size: 14px;
+    font-size: calc(14px * var(--wekan-ui-font-scale, 1));
     width: 100%;
     display: block;
     overflow-x: auto;
@@ -939,7 +982,7 @@ a:not(.disabled).is-active i.fa {
   /* Vertical only. The 16px it used to carry sideways pushed the whole first bar
      - the All Boards house first of all - 16px further in than at any other
      width. The inset is the bar's own gutter, once, at every width.
-     docs/Design/Page/Header.md */
+     docs/Features/Page/Header.md */
   #header {
     padding: 12px 0;
   }
@@ -961,7 +1004,7 @@ a:not(.disabled).is-active i.fa {
   /* The DEFAULT width of the left menu on a tablet. The variable, not the
      `width` of the menu: a width dragged by the reader arrives as an inline
      property on <html>, and a rule naming `.side-menu` here would override it
-     at exactly this one screen size. docs/Design/Page/Left-Menu.md */
+     at exactly this one screen size. docs/Features/Page/Left-Menu.md */
   :root {
     --wekan-left-menu-width: 250px;
   }
@@ -975,20 +1018,20 @@ a:not(.disabled).is-active i.fa {
 /* Large displays and digital signage (1920px+) */
 @media screen and (min-width: 1920px) {
   body {
-    font-size: 18px;
+    font-size: calc(18px * var(--wekan-ui-font-scale, 1));
   }
 
   button, .btn, .js-toggle, .js-color-choice, .js-reaction, .close {
     min-height: 56px;
     min-width: 56px;
     padding: 16px 20px;
-    font-size: 18px;
+    font-size: calc(18px * var(--wekan-ui-font-scale, 1));
   }
 
   .minicard {
     min-height: 56px;
     padding: 16px;
-    font-size: 18px;
+    font-size: calc(18px * var(--wekan-ui-font-scale, 1));
   }
 
   .list {
@@ -1001,7 +1044,7 @@ a:not(.disabled).is-active i.fa {
   }
 
   /* ...and on a large display the same: no side padding of its own.
-     docs/Design/Page/Header.md */
+     docs/Features/Page/Header.md */
   #header {
     padding: 0;
   }
@@ -1023,7 +1066,7 @@ a:not(.disabled).is-active i.fa {
   }
 
   /* ...and on a large display, for the same reason as the tablet default above.
-     docs/Design/Page/Left-Menu.md */
+     docs/Features/Page/Left-Menu.md */
   :root {
     --wekan-left-menu-width: 320px;
   }

client/components/main/layouts.jade

@@ -34,10 +34,10 @@ template(name="userFormsLayout")
       if currentSetting.customLoginLogoImageUrl
         if currentSetting.customLoginLogoLinkUrl
           a(href="{{currentSetting.customLoginLogoLinkUrl}}")
-            img(src="{{currentSetting.customLoginLogoImageUrl}}" width="300" height="auto")
+            img(src="{{currentSetting.customLoginLogoImageUrl}}" alt="{{currentSetting.productName}}" width="300" height="auto")
           br
         unless currentSetting.customLoginLogoLinkUrl
-          img(src="{{currentSetting.customLoginLogoImageUrl}}" width="300" height="auto")
+          img(src="{{currentSetting.customLoginLogoImageUrl}}" alt="{{currentSetting.productName}}" width="300" height="auto")
           br
       else
         img(src="{{pathFor '/wekan-logo.svg'}}" alt="" width="300" height="auto")
@@ -99,7 +99,7 @@ template(name="defaultLayout")
     | {{{beforeBodyEnd}}}
     //- The right sidebar of a page that has no sidebar of its own. It draws
       nothing on a board or on All Boards, which have theirs, and nothing on a
-      page with no controls to put in one. docs/Design/Page/Header.md
+      page with no controls to put in one. docs/Features/Page/Header.md
     +pageSidebar
   +boardConversionProgress
   if (Modal.isOpen)

client/components/main/layouts.js

@@ -4,6 +4,7 @@ import { FlowRouter } from 'meteor/ostrio:flow-router-extra';
 import Users from '/models/users';
 import { EscapeActions } from '/client/lib/escapeActions';
 import { enablePageDragscroll, disablePageDragscroll } from '/client/lib/pageDragscroll';
+import { trapTabKey } from '/client/lib/accessibility';
 
 let alreadyCheck = 1;
 let isCheckDone = false;
@@ -310,6 +311,9 @@ Template.defaultLayout.events({
   'click .js-close-modal': () => {
     Modal.close();
   },
+  'keydown #modal'(event) {
+    trapTabKey(event);
+  },
 });
 
 // Accessibility (WCAG 2.4.3 Focus Order): when a modal dialog opens, move