v8.35

Fix IntegrationBleed.
Thanks to Rodolphe GHIO and xet7 !
2026-03-05 22:35:43 +02:00 · 2026-03-05 21:26:22 +02:00 · 2026-03-05 17:30:35 +02:00 · 2026-03-05 17:27:33 +02:00 · 2026-03-05 14:54:52 +02:00 · 2026-03-05 14:53:45 +02:00
751 changed files with 124363 additions and 25313 deletions
@@ -97,22 +97,19 @@
    "Avatar": true,
    "Avatars": true,
    "BlazeComponent": false,
-    "BlazeLayout": false,
+
    "CollectionHooks": false,
-    "DocHead": false,
    "ESSearchResults": false,
    "FastRender": false,
    "FlowRouter": false,
    "FS": false,
    "getSlug": false,
    "Migrations": false,
-    "moment": false,
    "Mousetrap": false,
    "Picker": false,
    "Presence": true,
    "presences": true,
    "Ps": true,
-    "ReactiveTabs": false,
    "Restivus": false,
    "SimpleSchema": false,
    "SubsManager": false,
@@ -1,3 +1,4 @@
 # These are supported funding model platforms

+github: wekan
 custom: ['https://wekan.fi/commercial-support/']
@@ -1,56 +0,0 @@
-## Issue
-
-UPGRADE: https://wekan.fi/upgrade/
-
-Pull requests welcome to fix any broken links at docs directory, and organizing docs/Features and their screenshots to subdirectories of each feature.
-
-Please report these issues elsewhere:
-
- SECURITY ISSUES, PGP EMAIL: https://github.com/wekan/wekan/blob/main/SECURITY.md
- UCS: https://github.com/wekan/univention/issues
-
-If WeKan Snap is slow, try this: https://github.com/wekan/wekan/wiki/Cron
-
-Please search existing Open and Closed issues, most questions have already been answered.
-
-If you can not login for any reason: https://github.com/wekan/wekan/wiki/Forgot-Password
-Email settings, only SMTP MAIL_URL and MAIL_FROM are in use:
-https://github.com/wekan/wekan/wiki/Troubleshooting-Mail
-
-### Server Setup Information
-
-Please anonymize info, and do not any of your Wekan board URLs, passwords,
-API tokens etc to this public issue.
-
-* Did you test in newest Wekan?:
-* Did you configure root-url correctly so Wekan cards open correctly (see https://github.com/wekan/wekan/wiki/Settings)?
-* Operating System:
-* Deployment Method (Snap/Docker/Sandstorm/bundle/source):
-* Http frontend if any (Caddy, Nginx, Apache, see config examples from Wekan GitHub wiki first):
-* Node.js Version:
-* MongoDB Version:
-* What webbrowser version are you using (Wekan should work on all modern browsers that support Javascript)?
-
-### Problem description
-
-Add a recorded animated gif (e.g. with https://github.com/phw/peek) about
-how it works currently, and screenshot mockups how it should work.
-
-
-#### Reproduction Steps
-
-
-
-#### Logs
-
-Check Right Click / Inspect / Console in you browser - generally Chromium
-based browsers show more detailed info than Firefox based browsers.
-
-Please anonymize logs.
-
-Snap: sudo snap logs wekan.wekan
-
-Docker: sudo docker logs wekan-app
-
-If logs are very long, attach them in .zip file
-
@@ -0,0 +1,69 @@
+name: 🐛 Bug Report
+description: Report a bug to help improve WeKan
+labels: ["bug"]
+body:
+  - type: markdown
+    attributes:
+      value: |
+        Thanks for reporting a bug! Please ensure you are using the [latest version of WeKan](https://wekan.fi/install) and [Upgrade](https://wekan.fi/upgrade) before submitting.
+  - type: textarea
+    id: description
+    attributes:
+      label: Bug Description
+      description: A clear and concise description of what the bug is. Mention versions of WeKan, Node.js, database name and version, frontend webserver version like Caddy etc.
+    validations:
+      required: true
+  - type: dropdown
+    id: platform
+    attributes:
+      label: Platform / Installation Method
+      options:
+        - Snap Stable
+        - Snap Candidate
+        - Docker
+        - Sandstorm
+        - Source (Meteor)
+        - Windows
+        - Mac
+        - Other
+    validations:
+      required: true
+  - type: dropdown 
+    id: CPU
+    attributes:    
+      label: CPU
+      options:
+        - amd64
+        - arm64
+        - s390x
+        - Other
+    validations:
+      required: true
+  - type: textarea
+    id: reproduction
+    attributes:
+      label: Steps to Reproduce
+      description: How can we recreate this issue?
+      placeholder: |
+        1. Go to '...'
+        2. Click on '....'
+        3. Scroll down to '....'
+        4. See error
+    validations:
+      required: true
+  - type: textarea
+    id: logs
+    attributes:
+      label: Relevant Logs
+      description: | 
+        - Please paste any relevant anonymized server logs or browser console errors here.
+        - Snap: sudo snap logs wekan.wekan
+        - Docker: sudo docker logs wekan-app
+        - If logs are very long, attach them in .zip file
+      render: shell
+  - type: textarea
+    id: context
+    attributes: 
+      label: Additional Context
+      description: Add any other context, anonymized screenshots or GIF video about the bug, and screenshot mockups about how it should work.
+
@@ -0,0 +1,31 @@
+name: ✨ Feature Request
+description: Suggest a new feature for WeKan
+labels: ["Feature:Request"]
+body:
+  - type: textarea
+    id: feature-description
+    attributes:
+      label: Problem Statement
+      description: Is your feature request related to a problem? Please describe.
+      placeholder: I'm always frustrated when [...]
+    validations:
+      required: true
+  - type: textarea
+    id: solution
+    attributes:
+      label: Proposed Solution
+      description: A clear and concise description of what you want to happen.
+    validations:
+      required: true
+  - type: textarea
+    id: alternatives
+    attributes:
+      label: Alternatives Considered
+      description: Any alternative solutions or features you've considered.
+  - type: textarea
+    id: context
+    attributes:
+      label: Additional Context
+      description: Add any other context, like anonymized screenshot mockups about how it should work.
+    
+    
@@ -0,0 +1,14 @@
+name: 🛡️ Security Issue
+description: Report a security vulnerability
+labels: ["security", "critical"]
+body:
+  - type: markdown
+    attributes:
+      value: |
+        ## ⚠️ IMPORTANT: Please do not report security vulnerabilities via public issues.
+        
+        To protect the WeKan community, we ask that you report security bugs privately. This allows us to fix the issue before it can be exploited by malicious actors.
+        
+        ### How to report:
+        Please read our **[Security Policy (SECURITY.md)](https://github.com/wekan/wekan/blob/main/SECURITY.md)** for the official reporting process and contact information.
+
@@ -0,0 +1,23 @@
+name: 🗳️ Univention (UCS) Issue
+description: Problems specifically related to the WeKan app on Univention Corporate Server
+labels: ["UCS"]
+body:
+  - type: markdown
+    attributes:
+      value: |
+        ## 🛑 Is this a UCS-specific issue?
+        
+        If your issue is related to the **Univention Corporate Server (UCS) integration**, packaging, or installation via the Univention App Center, it should be reported in the dedicated Univention repository.
+        
+        ### ➡️ [Report UCS Issues Here](https://github.com/wekan/univention/issues)
+        
+        ---
+        **Why?**
+        Reporting there ensures that the maintainers specifically focused on the UCS environment see your request. 
+        
+        If you are certain this is a **core WeKan bug** that affects all platforms (Docker, Snap, etc.), please go back and use the standard [Bug Report](https://github.com/wekan/wekan/issues/new?template=bug-report.yml) template.
+  - type: textarea
+    id: ucs-details
+    attributes:
+      label: Brief Description (Optional)
+      description: If you still wish to post here, please provide a brief summary of why this is a core Wekan issue and not a UCS-specific integration bug.
@@ -9,6 +9,6 @@ jobs:
    runs-on: ubuntu-latest
    steps:
      - name: 'Checkout Repository'
-        uses: actions/checkout@v5
+        uses: actions/checkout@v6
      - name: 'Dependency Review'
        uses: actions/dependency-review-action@v4
@@ -32,13 +32,13 @@ jobs:

    steps:
      - name: Checkout repository
-        uses: actions/checkout@v5
+        uses: actions/checkout@v6

      # Login against a Docker registry except on PR
      # https://github.com/docker/login-action
      - name: Log into registry ${{ env.REGISTRY }}
        if: github.event_name != 'pull_request'
-        uses: docker/login-action@5e57cd118135c172c3672efd75eb46360885c0ef
+        uses: docker/login-action@c94ce9fb468520275223c153574b00df6fe4bcc9
        with:
          registry: ${{ env.REGISTRY }}
          username: ${{ github.actor }}
@@ -48,14 +48,14 @@ jobs:
      # https://github.com/docker/metadata-action
      - name: Extract Docker metadata
        id: meta
-        uses: docker/metadata-action@c1e51972afc2121e065aed6d45c65596fe445f3f
+        uses: docker/metadata-action@c299e40c65443455700f0fdfc63efafe5b349051
        with:
          images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}

      # Build and push Docker image with Buildx (don't push on PR)
      # https://github.com/docker/build-push-action
      - name: Build and push Docker image
-        uses: docker/build-push-action@263435318d21b8e681c14492fe198d362a7d2c83
+        uses: docker/build-push-action@10e90e3645eae34f1e60eeb005ba3a3d33f178e8
        with:
          context: .
          push: ${{ github.event_name != 'pull_request' }}
@@ -15,6 +15,6 @@ jobs:
    runs-on: ubuntu-latest

    steps:
-    - uses: actions/checkout@v5
+    - uses: actions/checkout@v6
    - name: Build the Docker image
      run: docker build . --file Dockerfile --tag wekan:$(date +%s)
@@ -15,7 +15,7 @@ jobs:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
-        uses: actions/checkout@v5
+        uses: actions/checkout@v6
        with:
          fetch-depth: 0

@@ -18,7 +18,7 @@ jobs:
 #    runs-on: ubuntu-latest
 #    steps:
 #    - name: checkout
-#      uses: actions/checkout@v5
+#      uses: actions/checkout@v6
 #
 #    - name: setup node
 #      uses: actions/setup-node@v1
@@ -42,7 +42,7 @@ jobs:
 #    needs: [lintcode]
 #    steps:
 #    - name: checkout
-#      uses: actions/checkout@v5
+#      uses: actions/checkout@v6
 #
 #    - name: setup node
 #      uses: actions/setup-node@v1
@@ -65,7 +65,7 @@ jobs:
 #    needs: [lintcode,lintstyle]
 #    steps:
 #    - name: checkout
-#      uses: actions/checkout@v5
+#      uses: actions/checkout@v6
 #
 #    - name: setup node
 #      uses: actions/setup-node@v1
@@ -90,12 +90,12 @@ jobs:

      # CHECKOUTS
      - name: Checkout
-        uses: actions/checkout@v5
+        uses: actions/checkout@v6

      # CACHING
      - name: Install Meteor
        id: cache-meteor-install
-        uses: actions/cache@v4
+        uses: actions/cache@v5
        with:
          path: ~/.meteor
          key: v1-meteor-${{ hashFiles('.meteor/versions') }}
@@ -104,7 +104,7 @@ jobs:

      - name: Cache NPM dependencies
        id: cache-meteor-npm
-        uses: actions/cache@v4
+        uses: actions/cache@v5
        with:
          path: ~/.npm
          key: v1-npm-${{ hashFiles('package-lock.json') }}
@@ -113,7 +113,7 @@ jobs:

      - name: Cache Meteor build
        id: cache-meteor-build
-        uses: actions/cache@v4
+        uses: actions/cache@v5
        with:
          path: |
            .meteor/local/resolver-result-cache.json
@@ -125,7 +125,7 @@ jobs:
            v1-meteor_build_cache-

      - name: Setup meteor
-        uses: meteorengineer/setup-meteor@v2
+        uses: meteorengineer/setup-meteor@v3
        with:
          meteor-release: '2.2'

@@ -136,7 +136,7 @@ jobs:
        run: sh ./test-wekan.sh -cv

      - name: Upload coverage
-        uses: actions/upload-artifact@v4
+        uses: actions/upload-artifact@v7
        with:
          name: coverage-folder
          path: .coverage/
@@ -147,10 +147,10 @@ jobs:
    needs: [tests]
    steps:
      - name: Checkout
-        uses: actions/checkout@v5
+        uses: actions/checkout@v6

      - name: Download coverage
-        uses: actions/download-artifact@v5
+        uses: actions/download-artifact@v8
        with:
          name: coverage-folder
          path: .coverage/
@@ -16,17 +16,13 @@ es5-shim@4.8.0

 # Collections
 aldeed:collection2
-cottz:publish-relations
+reywood:publish-composite
 dburles:collection-helpers
-idmontie:migrations
-easy:search
 mongo@1.16.8
-mquandalle:collection-mutations

 # Account system
 accounts-password@2.4.0
 useraccounts:core
-useraccounts:flow-routing
 useraccounts:unstyled
 simple:rest-accounts-password
 wekan-ldap
@@ -44,24 +40,16 @@ reactive-dict@1.3.1
 session@1.2.1
 tracker@1.3.3
 underscore@1.0.13
-arillo:flow-router-helpers
 audit-argument-checks@1.0.7
-kadira:dochead
-mquandalle:autofocus
-ongoworks:speakingurl
 raix:handlebar-helpers
 http@2.0.0! # force new http package

-# Datepicker
-wekan-bootstrap-datepicker
+# Datepicker (disabled - using native HTML inputs)
+# wekan-bootstrap-datepicker

 # UI components
 ostrio:i18n
 reactive-var@1.0.12
-mousetrap:mousetrap
-mquandalle:jquery-textcomplete
-mquandalle:mousetrap-bindglobal
-templates:tabs
 meteor-autosize
 shell-server@0.5.0
 email@2.2.5
@@ -71,26 +59,24 @@ msavin:usercache
 meteorhacks:subs-manager
 meteorhacks:aggregate@1.3.0
 wekan-markdown
-konecty:mongo-counter
-percolate:synced-cron
+quave:synced-cron
 ostrio:cookies
 ostrio:files@2.3.0
-pascoual:pdfkit
 lmieulet:meteor-coverage
 meteortesting:mocha@2.0.3
 aldeed:simple-schema
 matb33:collection-hooks
 simple:json-routes
-kadira:flow-router
 spacebars
 service-configuration@1.3.2
 communitypackages:picker
 minifier-css@1.6.4
 blaze
-kadira:blaze-layout
 peerlibrary:blaze-components
 ejson@1.1.3
 logging@1.3.3
 wekan-fullcalendar
-momentjs:moment@2.29.3
 wekan-fontawesome
+
+useraccounts:flow-routing-extra
+ostrio:flow-router-extra
@@ -1 +1 @@
-METEOR@2.14
+METEOR@2.16
@@ -1,5 +1,5 @@
-accounts-base@2.2.10
-accounts-oauth@1.4.3
+accounts-base@2.2.11
+accounts-oauth@1.4.4
 accounts-password@2.4.0
 aldeed:collection2@2.10.0
 aldeed:collection2-core@1.2.0
@@ -7,7 +7,6 @@ aldeed:schema-deny@1.1.0
 aldeed:schema-index@1.1.1
 aldeed:simple-schema@1.5.4
 allow-deny@1.1.1
-arillo:flow-router-helpers@0.5.2
 audit-argument-checks@1.0.7
 autoupdate@1.8.0
 babel-compiler@7.10.5
@@ -20,29 +19,25 @@ boilerplate-generator@1.7.2
 caching-compiler@1.2.2
 caching-html-compiler@1.2.1
 callback-hook@1.5.1
-check@1.3.2
+check@1.4.1
 coffeescript@2.7.0
 coffeescript-compiler@2.4.1
 communitypackages:picker@1.1.1
-cottz:publish-relations@2.0.8
 dburles:collection-helpers@1.1.0
 ddp@1.4.1
-ddp-client@2.6.1
-ddp-common@1.4.0
+ddp-client@2.6.2
+ddp-common@1.4.1
 ddp-rate-limiter@1.2.1
-ddp-server@2.7.0
+ddp-server@2.7.1
 deps@1.0.12
 diff-sequence@1.1.2
 dynamic-import@0.7.3
-easy:search@2.2.1
-easysearch:components@2.2.2
-easysearch:core@2.2.2
 ecmascript@0.16.8
 ecmascript-runtime@0.8.1
 ecmascript-runtime-client@0.12.1
 ecmascript-runtime-server@0.11.0
 ejson@1.1.3
-email@2.2.5
+email@2.2.6
 es5-shim@4.8.0
 fetch@0.1.4
 geojson-utils@1.0.11
@@ -51,16 +46,11 @@ html-tools@1.1.3
 htmljs@1.1.1
 http@2.0.0
 id-map@1.1.1
-idmontie:migrations@1.0.3
 inter-process-messaging@0.1.1
 jquery@3.0.0
-kadira:blaze-layout@2.3.0
-kadira:dochead@1.5.0
-kadira:flow-router@2.12.1
-konecty:mongo-counter@0.0.5_3
 lmieulet:meteor-coverage@1.1.4
 localstorage@1.2.0
-logging@1.3.3
+logging@1.3.4
 matb33:collection-hooks@1.3.0
 mdg:validation-error@0.5.1
 meteor@1.11.5
@@ -74,45 +64,38 @@ meteortesting:browser-tests@1.4.2
 meteortesting:mocha@2.1.0
 meteortesting:mocha-core@8.0.1
 minifier-css@1.6.4
-minifier-js@2.7.5
+minifier-js@2.8.0
 minifiers@1.1.8-faster-rebuild.0
-minimongo@1.9.3
+minimongo@1.9.4
 modern-browsers@0.1.10
 modules@0.20.0
 modules-runtime@0.13.1
-momentjs:moment@2.29.3
-mongo@1.16.8
+mongo@1.16.10
 mongo-decimal@0.1.3
 mongo-dev-server@1.1.0
 mongo-id@1.0.8
 mongo-livedata@1.0.12
-mousetrap:mousetrap@1.4.6_1
-mquandalle:autofocus@1.0.0
-mquandalle:collection-mutations@0.1.0
 mquandalle:jade@0.4.9
 mquandalle:jade-compiler@0.4.5
-mquandalle:jquery-textcomplete@0.8.0_1
-mquandalle:mousetrap-bindglobal@0.0.1
 msavin:usercache@1.8.0
 npm-mongo@4.17.2
 oauth@2.2.1
 oauth2@1.3.2
 observe-sequence@1.0.21
-ongoworks:speakingurl@1.1.0
 ordered-dict@1.1.0
 ostrio:cookies@2.7.2
 ostrio:cstorage@4.0.1
 ostrio:files@2.3.3
+ostrio:flow-router-extra@3.10.1
 ostrio:i18n@3.2.1
-pascoual:pdfkit@1.0.7
 peerlibrary:assert@0.3.0
 peerlibrary:base-component@0.17.1
 peerlibrary:blaze-components@0.23.0
 peerlibrary:computed-field@0.10.0
 peerlibrary:data-lookup@0.3.0
 peerlibrary:reactive-field@0.6.0
-percolate:synced-cron@1.5.2
 promise@0.12.2
+quave:synced-cron@2.2.1
 raix:eventemitter@0.1.3
 raix:handlebar-helpers@0.2.5
 random@1.2.1
@@ -122,8 +105,9 @@ reactive-dict@1.3.1
 reactive-var@1.0.12
 reload@1.3.1
 retry@1.1.0
+reywood:publish-composite@1.9.0
 routepolicy@1.1.1
-service-configuration@1.3.3
+service-configuration@1.3.4
 session@1.2.1
 sha@1.0.9
 shell-server@0.5.0
@@ -136,7 +120,6 @@ socket-stream-client@0.5.2
 spacebars@1.4.1
 spacebars-compiler@1.3.1
 standard-minifier-js@2.8.1
-templates:tabs@2.3.0
 templating@1.4.1
 templating-compiler@1.4.1
 templating-runtime@1.5.0
@@ -144,23 +127,20 @@ templating-tools@1.2.2
 tracker@1.3.3
 typescript@4.9.5
 ui@1.0.13
-underscore@1.0.13
+underscore@1.6.1
 url@1.3.2
 useraccounts:core@1.16.2
-useraccounts:flow-routing@1.15.0
+useraccounts:flow-routing-extra@1.1.0
 useraccounts:unstyled@1.14.2
-webapp@1.13.6
+webapp@1.13.8
 webapp-hashing@1.1.1
-wekan-accounts-cas@0.1.0
-wekan-accounts-lockout@1.0.0
+wekan-accounts-cas@0.2.0
+wekan-accounts-lockout@1.1.0
 wekan-accounts-oidc@1.0.10
-wekan-accounts-sandstorm@0.8.0
-wekan-bootstrap-datepicker@1.10.0
+wekan-accounts-sandstorm@0.9.0
 wekan-fontawesome@6.4.2
-wekan-fullcalendar@3.10.5
-wekan-ldap@0.0.2
+wekan-fullcalendar@5.11.5
+wekan-ldap@0.1.0
 wekan-markdown@1.0.9
-wekan-oidc@1.0.12
-yasaricli:slugify@0.0.7
-zimme:active-route@2.3.2
-zodern:types@1.0.10
+wekan-oidc@1.1.0
+zodern:types@1.0.13
@@ -0,0 +1 @@
+npm-packages/
@@ -1,6 +1,6 @@
 [main]
 host     = https://www.transifex.com
-lang_map = te_IN: te-IN, es_AR: es-AR, es_419: es-LA, es_TX: es-TX, he_IL: he-IL, zh_CN: zh-CN, ar_EG: ar-EG, cs_CZ: cs-CZ, fa_IR: fa-IR, ms_MY: ms-MY, nl_NL: nl-NL, de_CH: de-CH, en_IT: en-IT, uz_UZ: uz-UZ, fr_CH: fr-CH, hi_IN: hi-IN, et_EE: et-EE, es_PE: es-PE, es_MX: es-MX, gl_ES: gl-ES, mn_MN: mn, sl_SI: sl, zh_TW: zh-TW, ast_ES: ast-ES, es_CL: es-CL, ja_JP: ja, lv_LV: lv, ro_RO: ro-RO, az_AZ: az-AZ, cy_GB: cy-GB, gu_IN: gu-IN, pl_PL: pl-PL, vep: ve-PP, en_BR: en-BR, en@ysv: en-YS, hu_HU: hu, ko_KR: ko-KR, pt_BR: pt-BR, zh_HK: zh-HK, zu_ZA: zu-ZA, en_MY: en-MY, ja-Hira: ja-HI, fi_FI: fi, vec: ve-CC, vi_VN: vi-VN, fr_FR: fr-FR, id_ID: id, zh_Hans: zh-Hans, en_DE: en-DE, en_GB: en-GB, el_GR: el-GR, uk_UA: uk-UA, az@latin: az-LA, de_AT: de-AT, uz@Latn: uz-LA, vls: vl-SS, ar_DZ: ar-DZ, bg_BG: bg, es_PY: es-PY, fy_NL: fy-NL, uz@Arab: uz-AR, ru_UA: ru-UA, war: wa-RR, zh_CN.GB2312: zh-GB
+lang_map = te_IN: te-IN, es_AR: es-AR, es_419: es-LA, es_TX: es-TX, he_IL: he-IL, zh_CN: zh-CN, ar_EG: ar-EG, cs_CZ: cs-CZ, fa_IR: fa-IR, ms_MY: ms-MY, nl_NL: nl-NL, de_CH: de-CH, en_IT: en-IT, uz_UZ: uz-UZ, fr_CH: fr-CH, hi_IN: hi-IN, et_EE: et-EE, es_PE: es-PE, es_MX: es-MX, gl_ES: gl-ES, mn_MN: mn, zh_TW: zh-TW, ast_ES: ast-ES, es_CL: es-CL, ja_JP: ja, lv_LV: lv, ro_RO: ro-RO, az_AZ: az-AZ, cy_GB: cy-GB, gu_IN: gu-IN, pl_PL: pl-PL, vep: ve-PP, en_BR: en-BR, en@ysv: en-YS, hu_HU: hu, ko_KR: ko-KR, pt_BR: pt-BR, zh_HK: zh-HK, zu_ZA: zu-ZA, en_MY: en-MY, ja-Hira: ja-HI, fi_FI: fi, vec: ve-CC, vi_VN: vi-VN, fr_FR: fr-FR, id_ID: id, zh_Hans: zh-Hans, en_DE: en-DE, en_GB: en-GB, el_GR: el-GR, uk_UA: uk-UA, az@latin: az-LA, de_AT: de-AT, uz@Latn: uz-LA, vls: vl-SS, ar_DZ: ar-DZ, bg_BG: bg, es_PY: es-PY, fy_NL: fy-NL, uz@Arab: uz-AR, ru_UA: ru-UA, war: wa-RR, zh_CN.GB2312: zh-GB

 [o:wekan:p:wekan:r:application]
 file_filter = imports/i18n/data/<lang>.i18n.json
@@ -1,12 +1,16 @@
 {
-  "editor.tabSize": 2,
-  "editor.rulers": [80],
-  "files.trimTrailingWhitespace": true,
-  "files.insertFinalNewline": true,
-  "files.exclude": {
-    "**/.git": true,
-    "**/.DS_Store": true,
-    "node_modules": true,
-    ".meteor/local": true
-  }
-}
+  "terminal.integrated.env.linux": {
+    "TERM": "xterm-256color"
+  },
+  "terminal.integrated.env.osx": {
+    "TERM": "xterm-256color"
+  },
+  "terminal.integrated.env.windows": {
+    "TERM": "xterm-256color"
+  },
+  "terminal.integrated.shell.linux": "/bin/bash",
+  "terminal.integrated.shellArgs.linux": [
+    "-l"
+  ],
+  "files.simpleDialog.enable": true
+}
@@ -4,28 +4,23 @@ LABEL org.opencontainers.image.ref.name="ubuntu"
 LABEL org.opencontainers.image.version="24.04"
 LABEL org.opencontainers.image.source="https://github.com/wekan/wekan"

-# 2022-04-25:
-# - gyp does not yet work with Ubuntu 22.04 ubuntu:rolling,
-#   so changing to 21.10. https://github.com/wekan/wekan/issues/4488
-
-# 2021-09-18:
-# - Above Ubuntu base image copied from Docker Hub ubuntu:hirsute-20210825
-#   to Quay to avoid Docker Hub rate limits.
+# TARGETARCH is automatically provided by Docker Buildx
+ARG TARGETARCH
 ARG DEBIAN_FRONTEND=noninteractive

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

 ENV \
    DEBUG=false \
    NODE_VERSION=v14.21.4 \
-    METEOR_RELEASE=METEOR@2.14 \
+    METEOR_RELEASE=METEOR@2.16 \
    USE_EDGE=false \
    METEOR_EDGE=1.5-beta.17 \
    NPM_VERSION=6.14.17 \
    FIBERS_VERSION=4.0.1 \
-    ARCHITECTURE=linux-x64 \
    SRC_PATH=./ \
    WITH_API=true \
+    MONGO_OPLOG_URL="" \
    RESULTS_PER_PAGE="" \
    DEFAULT_BOARD_ID="" \
    ACCOUNTS_LOCKOUT_KNOWN_USERS_FAILURES_BEFORE=3 \
@@ -66,6 +61,7 @@ ENV \
    OAUTH2_LOGIN_STYLE=redirect \
    OAUTH2_CLIENT_ID="" \
    OAUTH2_SECRET="" \
+    OAUTH2_SECRET_FILE="" \
    OAUTH2_SERVER_URL="" \
    OAUTH2_AUTH_ENDPOINT="" \
    OAUTH2_USERINFO_ENDPOINT="" \
@@ -91,6 +87,7 @@ ENV \
    LDAP_AUTHENTIFICATION=false \
    LDAP_AUTHENTIFICATION_USERDN="" \
    LDAP_AUTHENTIFICATION_PASSWORD="" \
+    LDAP_AUTHENTIFICATION_PASSWORD_FILE="" \
    LDAP_LOG_ENABLED=false \
    LDAP_BACKGROUND_SYNC=false \
    LDAP_BACKGROUND_SYNC_INTERVAL="" \
@@ -156,136 +153,74 @@ ENV \
    ORACLE_OIM_ENABLED=false \
    WAIT_SPINNER="" \
    WRITABLE_PATH=/data \
-    S3=""
+    S3="" \
+    MAIL_SERVICE_PASSWORD_FILE="" \
+    MONGO_PASSWORD_FILE="" \
+    S3_SECRET_FILE=""

-#   NODE_OPTIONS="--max_old_space_size=4096"
-
-#---------------------------------------------
-# == at docker-compose.yml: AUTOLOGIN WITH OIDC/OAUTH2 ====
-# https://github.com/wekan/wekan/wiki/autologin
-#- OIDC_REDIRECTION_ENABLED=true
-#---------------------------------------------------------------------
-
-# Copy the app to the image
-#COPY ${SRC_PATH} /home/wekan/app
-
-# Install OS
 RUN <<EOR
 set -o xtrace

-# Add non-root user wekan
+# Create Wekan user
 useradd --user-group --system --home-dir /home/wekan wekan
-# OS dependencies
+
+# OS Updates
 apt-get update --assume-yes
+apt-get upgrade --assume-yes
 apt-get install --assume-yes --no-install-recommends ${BUILD_DEPS}

-# Meteor installer doesn't work with the default tar binary, so using bsdtar while installing.
-# https://github.com/coreos/bugs/issues/1095#issuecomment-350574389
+# Multi-arch mapping logic
+case "${TARGETARCH}" in
+    "amd64")  NODE_ARCH="x64"  WEKAN_ARCH="amd64" ;;
+    "arm64")  NODE_ARCH="arm64" WEKAN_ARCH="arm64" ;;
+    "s390x")  NODE_ARCH="s390x" WEKAN_ARCH="s390x" ;;
+    *) echo "Unsupported architecture: ${TARGETARCH}"; exit 1 ;;
+esac
+
+# Node.js Installation
+cd /tmp
+wget "https://github.com/wekan/node-v14-esm/releases/download/${NODE_VERSION}/node-${NODE_VERSION}-linux-${NODE_ARCH}.tar.gz"
+wget "https://github.com/wekan/node-v14-esm/releases/download/${NODE_VERSION}/SHASUMS256.txt"
+grep "node-${NODE_VERSION}-linux-${NODE_ARCH}.tar.gz" SHASUMS256.txt | shasum -a 256 -c -
+tar xzf "node-${NODE_VERSION}-linux-${NODE_ARCH}.tar.gz" -C /usr/local --strip-components=1 --no-same-owner
+rm -f "node-${NODE_VERSION}-linux-${NODE_ARCH}.tar.gz" SHASUMS256.txt
+ln -s "/usr/local/bin/node" "/usr/local/bin/nodejs"
+
+# NPM configuration
+npm install -g npm@${NPM_VERSION} --production
+chown --recursive wekan:wekan /home/wekan/
+
+# Temporary Tar swap for Meteor bundle
 cp $(which tar) $(which tar)~
 ln -sf $(which bsdtar) $(which tar)

-# Install NodeJS
-cd /tmp
-
-# Download nodejs
-#wget "https://github.com/wekan/node-v14-esm/releases/download/${NODE_VERSION}/node-${NODE_VERSION}-${ARCHITECTURE}.tar.gz"
-wget "https://github.com/wekan/node-v14-esm/releases/download/v14.21.4/node-v14.21.4-linux-x64.tar.gz"
-#wget "https://github.com/wekan/node-v14-esm/releases/download/${NODE_VERSION}/SHASUMS256.txt"
-wget "https://github.com/wekan/node-v14-esm/releases/download/v14.21.4/SHASUMS256.txt"
-
-# Verify nodejs authenticity
-#grep "node-${NODE_VERSION}-${ARCHITECTURE}.tar.gz" "SHASUMS256.txt" | shasum -a 256 -c -
-grep "node-v14.21.4-linux-x64.tar.gz" "SHASUMS256.txt" | shasum -a 256 -c -
-rm -f "SHASUMS256.txt"
-
-# Install Node
-#tar xzf "node-$NODE_VERSION-$ARCHITECTURE.tar.gz" -C /usr/local --strip-components=1 --no-same-owner
-tar xzf "node-v14.21.4-linux-x64.tar.gz" -C /usr/local --strip-components=1 --no-same-owner
-#rm "node-$NODE_VERSION-$ARCHITECTURE.tar.gz" "SHASUMS256.txt"
-rm "node-v14.21.4-linux-x64.tar.gz" "SHASUMS256.txt"
-ln -s "/usr/local/bin/node" "/usr/local/bin/nodejs"
-#mkdir -p "/opt/nodejs/lib/node_modules/fibers/.node-gyp" "/root/.node-gyp/${NODE_VERSION} /home/wekan/.config"
-#mkdir -p "/opt/nodejs/lib/node_modules/fibers/.node-gyp" "/root/.node-gyp/v14.21.4 /home/wekan/.config"
-
-# Install node dependencies
-#npm install -g npm@${NPM_VERSION} --production
-npm install -g npm@$6.14.17 --production
-chown --recursive wekan:wekan /home/wekan/.config
-
-# Install Meteor
-cd /home/wekan
-chown --recursive wekan:wekan /home/wekan
-echo "Starting meteor ${METEOR_RELEASE} installation...   \n"
-#gosu wekan:wekan curl https://install.meteor.com/ | /bin/sh
-# Specify Meteor version 2.14 to be compatible: https://github.com/wekan/wekan/pull/5816/files
-#gosu wekan:wekan npm -g install meteor@2.14 --unsafe-perm
-#mv /root/.meteor /home/wekan/
-#chown --recursive wekan:wekan /home/wekan/.meteor
-
-#sed -i 's/api\.versionsFrom/\/\/api.versionsFrom/' /home/wekan/app/packages/meteor-useraccounts-core/package.js
-#cd /home/wekan/.meteor
-#gosu wekan:wekan /home/wekan/.meteor/meteor -- help
-
-# Build app (Production)
-#cd /home/wekan/app
+# WeKan Bundle Installation
 mkdir -p /home/wekan/app
 cd /home/wekan/app
-#mkdir -p /home/wekan/.npm
-#chown --recursive wekan:wekan /home/wekan/.npm
-#chmod u+w *.json
-#gosu wekan:wekan meteor npm install --production
-#gosu wekan:wekan /home/wekan/.meteor/meteor build --directory /home/wekan/app_build
-#cd /home/wekan/app_build/bundle/programs/server/
-#chmod u+w *.json
-#gosu wekan:wekan meteor npm install --production
-#cd node_modules/fibers
-#node build.js
-#cd ../..
-# Remove legacy webbroser bundle, so that Wekan works also at Android Firefox, iOS Safari, etc.
-#rm -rf /home/wekan/app_build/bundle/programs/web.browser.legacy
-#mv /home/wekan/app_build/bundle /build
-wget "https://github.com/wekan/wekan/releases/download/v7.97/wekan-7.97-amd64.zip"
-unzip wekan-7.97-amd64.zip
-rm wekan-7.97-amd64.zip
+wget "https://github.com/wekan/wekan/releases/download/v8.35/wekan-8.35-${WEKAN_ARCH}.zip"
+unzip "wekan-8.35-${WEKAN_ARCH}.zip"
+rm "wekan-8.35-${WEKAN_ARCH}.zip"
 mv /home/wekan/app/bundle /build

-# Put back the original tar
+# Restore original tar
 mv $(which tar)~ $(which tar)

 # Cleanup
 apt-get remove --purge --assume-yes ${BUILD_DEPS}
-#npm uninstall -g api2html
 apt-get autoremove --assume-yes
 apt-get clean --assume-yes
 rm -Rf /tmp/*
 rm -Rf /var/lib/apt/lists/*
-rm -Rf /var/cache/apt
-rm -Rf /var/lib/apt/lists
-rm -Rf /home/wekan/app_build
 rm -Rf /home/wekan/app
-rm -Rf /home/wekan/.meteor

-mkdir /data
-chown wekan --recursive /data
+mkdir -p /data
+chown wekan:wekan --recursive /data
 EOR

 USER wekan
-
 ENV PORT=8080
 EXPOSE $PORT
-
 STOPSIGNAL SIGKILL
-WORKDIR /home/wekan/app
+WORKDIR /build

-#---------------------------------------------------------------------
-# https://github.com/wekan/wekan/issues/3585#issuecomment-1021522132
-# Add more Node heap:
-#   NODE_OPTIONS="--max_old_space_size=4096"
-# Add more stack:
-#   bash -c "ulimit -s 65500; exec node --stack-size=65500 main.js"
-#---------------------------------------------------------------------
-#
-# CMD ["node", "/build/main.js"]
-# CMD ["bash", "-c", "ulimit -s 65500; exec node --stack-size=65500 /build/main.js"]
-# CMD ["bash", "-c", "ulimit -s 65500; exec node --stack-size=65500 --max-old-space-size=8192 /build/main.js"]
-CMD ["bash", "-c", "ulimit -s 65500; exec node /build/main.js"]
+CMD ["bash", "-c", "ulimit -s 65500; exec node main.js"]
@@ -53,7 +53,12 @@ ENV QEMU_ARCHITECTURE=aarch64 \
    WITH_API=true \
    PORT=8080 \
    ROOT_URL=http://localhost \
-    MONGO_URL=mongodb://127.0.0.1:27017/wekan
+    MONGO_URL=mongodb://127.0.0.1:27017/wekan \
+    LDAP_AUTHENTIFICATION_PASSWORD_FILE="" \
+    OAUTH2_SECRET_FILE="" \
+    MAIL_SERVICE_PASSWORD_FILE="" \
+    MONGO_PASSWORD_FILE="" \
+    S3_SECRET_FILE=""

 # Copy qemu-static to image
 COPY --from=builder qemu-${QEMU_ARCHITECTURE}-static /usr/bin
@@ -56,7 +56,12 @@ ENV QEMU_ARCHITECTURE=s390x \
    WITH_API=true \
    PORT=8080 \
    ROOT_URL=http://localhost \
-    MONGO_URL=mongodb://127.0.0.1:27017/wekan
+    MONGO_URL=mongodb://127.0.0.1:27017/wekan \
+    LDAP_AUTHENTIFICATION_PASSWORD_FILE="" \
+    OAUTH2_SECRET_FILE="" \
+    MAIL_SERVICE_PASSWORD_FILE="" \
+    MONGO_PASSWORD_FILE="" \
+    S3_SECRET_FILE=""

 # Copy qemu-static to image
 COPY --from=builder qemu-${QEMU_ARCHITECTURE}-static /usr/bin
@@ -0,0 +1,203 @@
+# Meteor 3.0 Migration Guide
+
+Reference document capturing patterns, constraints, and lessons learned during the async migration of WeKan from Meteor 2.16 toward Meteor 3.0 readiness.
+
+---
+
+## 1. Dual-Compatibility Strategy
+
+WeKan runs on **Meteor 2.16 with Blaze 2.x**. The goal is dual compatibility: changes must work on 2.16 now and remain compatible with a future Meteor 3.0 upgrade.
+
+**Key constraint:** Blaze 2.x does NOT support async template helpers. Client-side code must receive synchronous data.
+
+---
+
+## 2. ReactiveCache Facade Pattern
+
+`ReactiveCache` dispatches to `ReactiveCacheServer` (async MongoDB) or `ReactiveCacheClient` (sync Minimongo).
+
+**Rule:** Facade methods must NOT be `async`. They return a Promise on the server and data on the client. Server callers `await`; client code uses the return value directly.
+
+```javascript
+// CORRECT:
+getBoard(boardId) {
+  if (Meteor.isServer) {
+    return ReactiveCacheServer.getBoard(boardId);  // Returns Promise
+  } else {
+    return ReactiveCacheClient.getBoard(boardId);  // Returns data
+  }
+}
+
+// WRONG:
+async getBoard(boardId) { ... }  // Wraps client return in Promise too!
+```
+
+---
+
+## 3. Model Helpers (Collection.helpers)
+
+Model helpers defined via `Collection.helpers({})` are used by Blaze templates. They must NOT be `async`.
+
+```javascript
+// CORRECT:
+Cards.helpers({
+  board() {
+    return ReactiveCache.getBoard(this.boardId);  // Promise on server, data on client
+  },
+});
+
+// WRONG:
+Cards.helpers({
+  async board() {  // Blaze gets Promise instead of data
+    return await ReactiveCache.getBoard(this.boardId);
+  },
+});
+```
+
+**Server-side callers** of these helpers must `await` the result:
+```javascript
+// In a Meteor method or hook (server-only):
+const board = await card.board();
+```
+
+---
+
+## 4. Allow/Deny Callbacks Must Be Synchronous
+
+Meteor 2.x evaluates allow/deny callbacks synchronously. An `async` callback returns a Promise:
+- **allow** callback returning Promise (truthy) → always passes
+- **deny** callback returning Promise (truthy) → always denies
+
+**Rule:** Never use `async` in allow/deny. Replace `ReactiveCache` calls with direct sync Mongo calls.
+
+```javascript
+// CORRECT:
+Cards.allow({
+  insert(userId, doc) {
+    return allowIsBoardMemberWithWriteAccess(userId, Boards.findOne(doc.boardId));
+  },
+  fetch: ['boardId'],
+});
+
+// WRONG:
+Cards.allow({
+  async insert(userId, doc) {
+    return allowIsBoardMemberWithWriteAccess(userId, await ReactiveCache.getBoard(doc.boardId));
+  },
+});
+```
+
+### Sync alternatives for common patterns:
+
+| Async (broken in allow/deny) | Sync replacement |
+|------------------------------|------------------|
+| `await ReactiveCache.getBoard(id)` | `Boards.findOne(id)` |
+| `await ReactiveCache.getCard(id)` | `Cards.findOne(id)` |
+| `await ReactiveCache.getCurrentUser()` | `Meteor.users.findOne(userId)` |
+| `await ReactiveCache.getBoards({...})` | `Boards.find({...}).fetch()` |
+| `await card.board()` | `Boards.findOne(card.boardId)` |
+
+**Note:** These sync Mongo calls (`findOne`, `find().fetch()`) are available in Meteor 2.x. In Meteor 3.0, they will be replaced by `findOneAsync` / `find().fetchAsync()`, which will require allow/deny callbacks to be reworked again (or replaced by Meteor 3.0's new permission model).
+
+---
+
+## 5. Server-Only Code CAN Be Async
+
+Code that runs exclusively on the server can safely use `async`/`await`:
+
+- `Meteor.methods({})` — method bodies
+- `Meteor.publish()` — publication functions
+- `JsonRoutes.add()` — REST API handlers
+- `Collection.before.*` / `Collection.after.*` — collection hooks (via `matb33:collection-hooks`)
+- Standalone server functions
+
+```javascript
+Meteor.methods({
+  async createCard(data) {
+    const board = await ReactiveCache.getBoard(data.boardId);  // OK
+    // ...
+  },
+});
+```
+
+---
+
+## 6. forEach with await Anti-Pattern
+
+`Array.forEach()` does not handle async callbacks — iterations run concurrently without awaiting.
+
+```javascript
+// WRONG:
+items.forEach(async (item) => {
+  await processItem(item);  // Runs all in parallel, not sequentially
+});
+
+// CORRECT:
+for (const item of items) {
+  await processItem(item);  // Runs sequentially
+}
+```
+
+---
+
+## 7. Client-Side Collection Updates
+
+Meteor requires client-side collection updates to use `_id` as the selector:
+
+```javascript
+// CORRECT:
+Lists.updateAsync(listId, { $set: { title: newTitle } });
+
+// WRONG - fails with "Untrusted code may only update documents by ID":
+Lists.updateAsync({ _id: listId, boardId: boardId }, { $set: { title: newTitle } });
+```
+
+---
+
+## 8. Sync Meteor 2.x APIs to Convert for 3.0
+
+These Meteor 2.x sync APIs will need conversion when upgrading to Meteor 3.0:
+
+| Meteor 2.x (sync) | Meteor 3.0 (async) |
+|--------------------|--------------------|
+| `Collection.findOne()` | `Collection.findOneAsync()` |
+| `Collection.find().fetch()` | `Collection.find().fetchAsync()` |
+| `Collection.insert()` | `Collection.insertAsync()` |
+| `Collection.update()` | `Collection.updateAsync()` |
+| `Collection.remove()` | `Collection.removeAsync()` |
+| `Collection.upsert()` | `Collection.upsertAsync()` |
+| `Meteor.user()` | `Meteor.userAsync()` |
+| `Meteor.userId()` | Remains sync |
+
+**Current status:** Server-side code already uses async patterns via `ReactiveCache`. The sync `findOne()` calls in allow/deny callbacks will need to be addressed when Meteor 3.0's allow/deny system supports async (or is replaced).
+
+---
+
+## 9. Files Reference
+
+Key files involved in the async migration:
+
+| File | Role |
+|------|------|
+| `imports/reactiveCache.js` | ReactiveCache facade + Server/Client/Index implementations |
+| `server/lib/utils.js` | Permission helper functions (`allowIsBoardMember*`) |
+| `models/*.js` | Collection schemas, helpers, allow/deny, hooks, methods |
+| `server/publications/*.js` | Meteor publications |
+| `server/rulesHelper.js` | Rule trigger/action evaluation |
+| `server/cronMigrationManager.js` | Cron-based migration jobs |
+
+---
+
+## 10. FullCalendar Versioning Note (Post-3.0 Follow-Up)
+
+`wekan-fullcalendar` is currently migrated from legacy Meteor package globals to npm-based **FullCalendar 5.11.5** to keep Meteor 2.16 and 3.0 dual compatibility stable.
+
+**Why pinned for now:**
+- Avoids introducing additional breaking changes during core Meteor async migration.
+- Keeps compatibility with current Blaze/jQuery-era integration points while removing `momentjs:moment` Meteor package dependency.
+
+**After Meteor 3.0 lands (recommended follow-up):**
+1. Re-evaluate upgrading FullCalendar to latest stable major.
+2. Re-test plugin API differences (especially view names, callback signatures, locale/time formatting, CSS entry points).
+3. Verify Node/runtime compatibility and bundle behavior under Meteor 3's final toolchain.
+4. Keep migration isolated in a dedicated PR (separate from async data-layer work) to reduce rollback risk.
@@ -1,12 +1,20 @@
-About money, see [CONTRIBUTING.md](CONTRIBUTING.md)

-Security is very important to us. If you discover any issue regarding security, please disclose
-the information responsibly by sending an email from Protonmail to security@wekan.fi
-that is Protomail email address, or by using this PGP key
-[security-at-wekan.fi.asc](security-at-wekan.fi.asc) to security@wekan.fi
-and not by creating a GitHub issue. We will respond swiftly to fix verifiable security issues.
+## Responsible Security Disclosure

-We thank you with a place at our hall of fame page, that is at https://wekan.fi/hall-of-fame
+- To send email, use [ProtonMail](https://proton.me) email address or use PGP key [security-at-wekan.fi.asc](security-at-wekan.fi.asc)
+- Send info about security issue ONLY to security@wekan.fi (that is Protomail email address). NOT TO ANYWHERE ELSE. NO CC, NO BCC.
+- Wait for new WeKan release that fixes security issue
+- If you approve, we thank you by adding you to Hall of Fame: https://wekan.fi/hall-of-fame/
+
+## Bonus Points
+
+- If you include code for fixing security issue
+
+## Losing Points
+
+- If you ask about [bounty](CONTRIBUTING.md). There is no bounty. WeKan is NOT Big Tech. WeKan is FLOSS.
+- If you forget to include vulnerability details.
+- If you send info about security issue to somewhere else than security@wekan.fi

 ## How should reports be formatted?

@@ -26,7 +34,7 @@ CWSS (optional): %cwss

 Anyone who reports a unique security issue in scope and does not disclose it to
 a third party before we have patched and updated may be upon their approval
-added to the Wekan Hall of Fame.
+added to the WeKan Hall of Fame https://wekan.fi/hall-of-fame/

 ## Which domains are in scope?

@@ -63,11 +71,6 @@ and by by companies that have 30k users.
 - If you are thinking about TLS MITM, look at https://github.com/caddyserver/caddy/issues/2530
 - Let's Encrypt TLS requires publicly accessible webserver, that Let's Encrypt TLS validation servers check.
 - If firewall limits to only allowed IP addresses, you may need non-Let's Encrypt TLS cert.
- For On Premise:
-  - https://caddyserver.com/docs/automatic-https#local-https
-  - https://github.com/wekan/wekan/wiki/Caddy-Webserver-Config
-  - https://github.com/wekan/wekan/wiki/Azure
-  - https://github.com/wekan/wekan/wiki/Traefik-and-self-signed-SSL-certs

 ## XSS

@@ -172,6 +175,57 @@ Meteor.startup(() => {
 - https://github.com/wekan/wekan/blob/main/client/components/cards/attachments.js#L303-L312
 - https://wekan.github.io/hall-of-fame/filebleed/

+### Attachments: Forced download to prevent stored XSS
+
+- To prevent browser-side execution of uploaded content under the app origin, all attachment downloads are served with safe headers:
+  - `Content-Type: application/octet-stream`
+  - `Content-Disposition: attachment`
+  - `X-Content-Type-Options: nosniff`
+  - A restrictive `Content-Security-Policy` with `sandbox`
+- This means attachments are downloaded instead of rendered inline by default. This mitigates HTML/JS/SVG based stored XSS vectors.
+- Avatars and inline images remain supported but SVG uploads are blocked and never rendered inline.
+
+## Users: Client update restrictions
+
+- Client-side updates to user documents are limited to safe fields only:
+  - `username`
+  - `profile.*`
+- Sensitive fields are blocked from any client updates and can only be modified by server methods with authorization:
+  - `orgs`, `teams`, `roles`, `isAdmin`, `createdThroughApi`, `loginDisabled`, `authenticationMethod`, `services.*`, `emails.*`, `sessionData.*`
+- Attempts to update forbidden fields from the client are denied.
+- Admin operations like managing org/team membership or toggling flags must use server methods that check permissions.
+
+## Voting: integrity and authorization
+
+- Client updates to card `vote` fields are blocked to prevent forged votes and inconsistent policy enforcement.
+- Voting is performed via a server method that enforces:
+  - Authentication and board membership, or an explicit per-card flag allowing non-members to vote.
+  - Only the caller's own userId is added/removed from `vote.positive`/`vote.negative`.
+- This prevents members from fabricating other users' votes and ensures non-members cannot vote unless explicitly allowed.
+
+## Planning Poker: integrity and authorization
+
+- Client updates to card `poker` fields are blocked. All poker actions go through server methods that enforce:
+  - Authentication and board membership for configuration and results.
+  - For casting a poker vote, either board membership or an explicit per-card flag allowing non-members to participate.
+  - Only the caller's own userId is added/removed from the selected estimation bucket (e.g., one, two, five, etc.).
+- Methods cover setting/unsetting poker question/end, casting votes, replaying, and setting final estimation.
+
+## Attachment API: authentication and DoS prevention
+
+- The attachment API (`/api/attachment/*`) requires proper authentication using `X-User-Id` and `X-Auth-Token` headers.
+- Authentication validates tokens by hashing with `Accounts._hashLoginToken` and matching against stored login tokens, preventing identity spoofing.
+- Request handlers implement:
+  - 30-second timeout to prevent hanging connections.
+  - Request body size limits (50MB for uploads, 10MB for metadata operations).
+  - Proper error handling and guaranteed response completion.
+  - Request error event handlers to clean up failed connections.
+- This prevents:
+  - DoS attacks via concurrent unauthenticated or malformed requests.
+  - Identity spoofing by using arbitrary bearer tokens or user IDs.
+  - Resource exhaustion from hanging connections or excessive payloads.
+- Access control: all attachment operations verify board membership before allowing access.
+
 ## Brute force login protection

 - https://github.com/wekan/wekan/commit/23e5e1e3bd081699ce39ce5887db7e612616014d
@@ -218,9 +272,4 @@ Typical already known or "no impact" bugs such as:
 - Email spoofing, SPF, DMARC & DKIM. Wekan does not include email server.

 Wekan is Open Source with MIT license, and free to use also for commercial use.
-We welcome all fixes to improve security by email to security@wekan.team
-
-## Bonus Points
-
-If your Responsible Security Disclosure includes code for fixing security issue,
-you get bonus points, as seen on [Hall of Fame](https://wekan.github.io/hall-of-fame).
+We welcome all fixes to improve security by email to security@wekan.fi
@@ -1,5 +1,5 @@
 appId: wekan-public/apps/77b94f60-dec9-0136-304e-16ff53095928
-appVersion: "v7.97.0"
+appVersion: "v8.35.0"
 files:
  userUploads:
    - README.md
@@ -39,6 +39,12 @@ If *nix:  chmod +x api.py => ./api.py users
    python3 api.py addcustomfieldtoboard AUTHORID BOARDID NAME TYPE SETTINGS SHOWONCARD AUTOMATICALLYONCARD SHOWLABELONMINICARD SHOWSUMATTOPOFLIST # Add Custom Field to Board
    python3 api.py editcustomfield BOARDID LISTID CARDID CUSTOMFIELDID NEWCUSTOMFIELDVALUE # Edit Custom Field
    python3 api.py listattachments BOARDID # List attachments
+    python3 api.py uploadattachment BOARDID SWIMLANEID LISTID CARDID FILEPATH [STORAGE_BACKEND] # Upload attachment to card
+    python3 api.py downloadattachment ATTACHMENTID OUTPUTPATH # Download attachment to local file
+    python3 api.py attachmentinfo ATTACHMENTID # Get attachment information
+    python3 api.py listcardattachments BOARDID SWIMLANEID LISTID CARDID # List attachments for specific card
+    python3 api.py copymoveattachment ATTACHMENTID TARGETBOARDID TARGETSWIMLANEID TARGETLISTID TARGETCARDID [copy|move] # Copy or move attachment
+    python3 api.py deleteattachment ATTACHMENTID # Delete attachment
    python3 api.py cardsbyswimlane SWIMLANEID LISTID # Retrieve cards list on a swimlane
    python3 api.py getcard BOARDID LISTID CARDID # Get card info
    python3 api.py addlabel BOARDID LISTID CARDID LABELID # Add label to a card
@@ -750,3 +756,273 @@ if arguments == 1:
        data2 = body.text.replace('}',"}\n")
        print(data2)
        # ------- LIST OF PUBLIC BOARDS END -----------
+
+# ------- NEW ATTACHMENT API ENDPOINTS START -----------
+
+    if sys.argv[1] == 'uploadattachment':
+        # ------- UPLOAD ATTACHMENT START -----------
+        if arguments < 5:
+            print("Usage: python3 api.py uploadattachment BOARDID SWIMLANEID LISTID CARDID FILEPATH [STORAGE_BACKEND]")
+            print("Storage backends: fs, gridfs, s3")
+            exit(1)
+        
+        boardid = sys.argv[2]
+        swimlaneid = sys.argv[3]
+        listid = sys.argv[4]
+        cardid = sys.argv[5]
+        filepath = sys.argv[6]
+        storage_backend = sys.argv[7] if arguments > 6 else None
+        
+        # Read file and convert to base64
+        try:
+            with open(filepath, 'rb') as f:
+                file_data = f.read()
+                import base64
+                base64_data = base64.b64encode(file_data).decode('utf-8')
+        except FileNotFoundError:
+            print(f"Error: File '{filepath}' not found")
+            exit(1)
+        except Exception as e:
+            print(f"Error reading file: {e}")
+            exit(1)
+        
+        # Get file info
+        import os
+        filename = os.path.basename(filepath)
+        import mimetypes
+        file_type = mimetypes.guess_type(filepath)[0] or 'application/octet-stream'
+        
+        # Prepare request data
+        upload_data = {
+            'boardId': boardid,
+            'swimlaneId': swimlaneid,
+            'listId': listid,
+            'cardId': cardid,
+            'fileData': base64_data,
+            'fileName': filename,
+            'fileType': file_type
+        }
+        
+        if storage_backend:
+            upload_data['storageBackend'] = storage_backend
+        
+        # Make API call
+        headers = {'Accept': 'application/json', 'Authorization': 'Bearer {}'.format(apikey), 'Content-Type': 'application/json'}
+        upload_url = wekanurl + 'api/attachment/upload'
+        
+        try:
+            response = requests.post(upload_url, headers=headers, json=upload_data)
+            response.raise_for_status()
+            result = response.json()
+            print(f"Upload successful!")
+            print(f"Attachment ID: {result.get('attachmentId')}")
+            print(f"File: {result.get('fileName')}")
+            print(f"Size: {result.get('fileSize')} bytes")
+            print(f"Storage: {result.get('storageBackend')}")
+        except requests.exceptions.RequestException as e:
+            print(f"Upload failed: {e}")
+            if hasattr(e, 'response') and e.response is not None:
+                print(f"Response: {e.response.text}")
+        # ------- UPLOAD ATTACHMENT END -----------
+
+    if sys.argv[1] == 'downloadattachment':
+        # ------- DOWNLOAD ATTACHMENT START -----------
+        if arguments < 3:
+            print("Usage: python3 api.py downloadattachment ATTACHMENTID OUTPUTPATH")
+            exit(1)
+        
+        attachmentid = sys.argv[2]
+        outputpath = sys.argv[3]
+        
+        # Make API call
+        headers = {'Accept': 'application/json', 'Authorization': 'Bearer {}'.format(apikey)}
+        download_url = wekanurl + f'api/attachment/download/{attachmentid}'
+        
+        try:
+            response = requests.get(download_url, headers=headers)
+            response.raise_for_status()
+            result = response.json()
+            
+            if result.get('success'):
+                # Decode base64 data and save to file
+                import base64
+                file_data = base64.b64decode(result.get('base64Data'))
+                
+                with open(outputpath, 'wb') as f:
+                    f.write(file_data)
+                
+                print(f"Download successful!")
+                print(f"File saved to: {outputpath}")
+                print(f"Original filename: {result.get('fileName')}")
+                print(f"Size: {result.get('fileSize')} bytes")
+                print(f"Storage: {result.get('storageBackend')}")
+            else:
+                print(f"Download failed: {result.get('message', 'Unknown error')}")
+        except requests.exceptions.RequestException as e:
+            print(f"Download failed: {e}")
+            if hasattr(e, 'response') and e.response is not None:
+                print(f"Response: {e.response.text}")
+        # ------- DOWNLOAD ATTACHMENT END -----------
+
+    if sys.argv[1] == 'attachmentinfo':
+        # ------- ATTACHMENT INFO START -----------
+        if arguments < 2:
+            print("Usage: python3 api.py attachmentinfo ATTACHMENTID")
+            exit(1)
+        
+        attachmentid = sys.argv[2]
+        
+        # Make API call
+        headers = {'Accept': 'application/json', 'Authorization': 'Bearer {}'.format(apikey)}
+        info_url = wekanurl + f'api/attachment/info/{attachmentid}'
+        
+        try:
+            response = requests.get(info_url, headers=headers)
+            response.raise_for_status()
+            result = response.json()
+            
+            if result.get('success'):
+                print("=== ATTACHMENT INFO ===")
+                print(f"Attachment ID: {result.get('attachmentId')}")
+                print(f"File Name: {result.get('fileName')}")
+                print(f"File Size: {result.get('fileSize')} bytes")
+                print(f"File Type: {result.get('fileType')}")
+                print(f"Storage Backend: {result.get('storageBackend')}")
+                print(f"Board ID: {result.get('boardId')}")
+                print(f"Swimlane ID: {result.get('swimlaneId')}")
+                print(f"List ID: {result.get('listId')}")
+                print(f"Card ID: {result.get('cardId')}")
+                print(f"Created At: {result.get('createdAt')}")
+                print(f"Is Image: {result.get('isImage')}")
+                print(f"Versions: {len(result.get('versions', []))}")
+            else:
+                print(f"Failed to get attachment info: {result.get('message', 'Unknown error')}")
+        except requests.exceptions.RequestException as e:
+            print(f"Request failed: {e}")
+            if hasattr(e, 'response') and e.response is not None:
+                print(f"Response: {e.response.text}")
+        # ------- ATTACHMENT INFO END -----------
+
+    if sys.argv[1] == 'listcardattachments':
+        # ------- LIST CARD ATTACHMENTS START -----------
+        if arguments < 5:
+            print("Usage: python3 api.py listcardattachments BOARDID SWIMLANEID LISTID CARDID")
+            exit(1)
+        
+        boardid = sys.argv[2]
+        swimlaneid = sys.argv[3]
+        listid = sys.argv[4]
+        cardid = sys.argv[5]
+        
+        # Make API call
+        headers = {'Accept': 'application/json', 'Authorization': 'Bearer {}'.format(apikey)}
+        list_url = wekanurl + f'api/attachment/list/{boardid}/{swimlaneid}/{listid}/{cardid}'
+        
+        try:
+            response = requests.get(list_url, headers=headers)
+            response.raise_for_status()
+            result = response.json()
+            
+            if result.get('success'):
+                attachments = result.get('attachments', [])
+                print(f"=== CARD ATTACHMENTS ({len(attachments)}) ===")
+                for attachment in attachments:
+                    print(f"ID: {attachment.get('attachmentId')}")
+                    print(f"Name: {attachment.get('fileName')}")
+                    print(f"Size: {attachment.get('fileSize')} bytes")
+                    print(f"Type: {attachment.get('fileType')}")
+                    print(f"Storage: {attachment.get('storageBackend')}")
+                    print(f"Created: {attachment.get('createdAt')}")
+                    print("---")
+            else:
+                print(f"Failed to list attachments: {result.get('message', 'Unknown error')}")
+        except requests.exceptions.RequestException as e:
+            print(f"Request failed: {e}")
+            if hasattr(e, 'response') and e.response is not None:
+                print(f"Response: {e.response.text}")
+        # ------- LIST CARD ATTACHMENTS END -----------
+
+    if sys.argv[1] == 'copymoveattachment':
+        # ------- COPY/MOVE ATTACHMENT START -----------
+        if arguments < 6:
+            print("Usage: python3 api.py copymoveattachment ATTACHMENTID TARGETBOARDID TARGETSWIMLANEID TARGETLISTID TARGETCARDID [copy|move]")
+            exit(1)
+        
+        attachmentid = sys.argv[2]
+        targetboardid = sys.argv[3]
+        targetswimlaneid = sys.argv[4]
+        targetlistid = sys.argv[5]
+        targetcardid = sys.argv[6]
+        operation = sys.argv[7] if arguments > 6 else 'copy'
+        
+        if operation not in ['copy', 'move']:
+            print("Operation must be 'copy' or 'move'")
+            exit(1)
+        
+        # Prepare request data
+        request_data = {
+            'attachmentId': attachmentid,
+            'targetBoardId': targetboardid,
+            'targetSwimlaneId': targetswimlaneid,
+            'targetListId': targetlistid,
+            'targetCardId': targetcardid
+        }
+        
+        # Make API call
+        headers = {'Accept': 'application/json', 'Authorization': 'Bearer {}'.format(apikey), 'Content-Type': 'application/json'}
+        api_url = wekanurl + f'api/attachment/{operation}'
+        
+        try:
+            response = requests.post(api_url, headers=headers, json=request_data)
+            response.raise_for_status()
+            result = response.json()
+            
+            if result.get('success'):
+                print(f"{operation.capitalize()} successful!")
+                if operation == 'copy':
+                    print(f"Source Attachment ID: {result.get('sourceAttachmentId')}")
+                    print(f"New Attachment ID: {result.get('newAttachmentId')}")
+                else:
+                    print(f"Attachment ID: {result.get('attachmentId')}")
+                    print(f"Source Board: {result.get('sourceBoardId')}")
+                    print(f"Target Board: {result.get('targetBoardId')}")
+                print(f"File: {result.get('fileName')}")
+                print(f"Size: {result.get('fileSize')} bytes")
+            else:
+                print(f"{operation.capitalize()} failed: {result.get('message', 'Unknown error')}")
+        except requests.exceptions.RequestException as e:
+            print(f"{operation.capitalize()} failed: {e}")
+            if hasattr(e, 'response') and e.response is not None:
+                print(f"Response: {e.response.text}")
+        # ------- COPY/MOVE ATTACHMENT END -----------
+
+    if sys.argv[1] == 'deleteattachment':
+        # ------- DELETE ATTACHMENT START -----------
+        if arguments < 2:
+            print("Usage: python3 api.py deleteattachment ATTACHMENTID")
+            exit(1)
+        
+        attachmentid = sys.argv[2]
+        
+        # Make API call
+        headers = {'Accept': 'application/json', 'Authorization': 'Bearer {}'.format(apikey)}
+        delete_url = wekanurl + f'api/attachment/delete/{attachmentid}'
+        
+        try:
+            response = requests.delete(delete_url, headers=headers)
+            response.raise_for_status()
+            result = response.json()
+            
+            if result.get('success'):
+                print("Delete successful!")
+                print(f"Attachment ID: {result.get('attachmentId')}")
+                print(f"File: {result.get('fileName')}")
+            else:
+                print(f"Delete failed: {result.get('message', 'Unknown error')}")
+        except requests.exceptions.RequestException as e:
+            print(f"Delete failed: {e}")
+            if hasattr(e, 'response') and e.response is not None:
+                print(f"Response: {e.response.text}")
+        # ------- DELETE ATTACHMENT END -----------
+
+# ------- NEW ATTACHMENT API ENDPOINTS END -----------
@@ -4,3 +4,80 @@ if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('/pwa-service-worker.js');
  });
 }
+
+// Import board converter for on-demand conversion
+import '/client/lib/boardConverter';
+import '/client/components/boardConversionProgress';
+
+// Import migration manager and progress UI - COMMENTED OUT
+// import '/client/lib/attachmentMigrationManager';
+// import '/client/components/settings/migrationProgress';
+
+// Import cron settings - COMMENTED OUT
+// import '/client/components/settings/cronSettings';
+// Custom head tags
+
+// Mirror Meteor login token into a cookie for server-side file route auth
+// This enables cookie-based auth for /cdn/storage/* without leaking ROOT_URL
+// Token already lives in localStorage; cookie adds same-origin send-on-request semantics
+Meteor.startup(() => {
+  const COOKIE_NAME = 'meteor_login_token';
+  const cookieAttrs = () => {
+    const attrs = ['Path=/', 'SameSite=Lax'];
+    try {
+      if (window.location && window.location.protocol === 'https:') {
+        attrs.push('Secure');
+      }
+    } catch (_) {}
+    return attrs.join('; ');
+  };
+
+  const setCookie = (name, value) => {
+    if (!value) return;
+    document.cookie = `${encodeURIComponent(name)}=${encodeURIComponent(value)}; ${cookieAttrs()}`;
+  };
+  const clearCookie = (name) => {
+    document.cookie = `${encodeURIComponent(name)}=; Expires=Thu, 01 Jan 1970 00:00:00 GMT; ${cookieAttrs()}`;
+  };
+
+  const syncCookie = () => {
+    try {
+      const token = Accounts && typeof Accounts._storedLoginToken === 'function' ? Accounts._storedLoginToken() : null;
+      if (token) setCookie(COOKIE_NAME, token); else clearCookie(COOKIE_NAME);
+    } catch (e) {
+      // ignore
+    }
+  };
+
+  // Initial sync on startup
+  syncCookie();
+
+  // Keep cookie in sync on login/logout
+  if (Accounts && typeof Accounts.onLogin === 'function') Accounts.onLogin(syncCookie);
+  if (Accounts && typeof Accounts.onLogout === 'function') Accounts.onLogout(syncCookie);
+
+  // Sync across tabs/windows when localStorage changes
+  window.addEventListener('storage', (ev) => {
+    if (ev && typeof ev.key === 'string' && ev.key.indexOf('Meteor.loginToken') !== -1) {
+      syncCookie();
+    }
+  });
+});
+
+// Subscribe to per-user small publications
+Meteor.startup(() => {
+  Tracker.autorun(() => {
+    if (Meteor.userId()) {
+      Meteor.subscribe('userGreyIcons');
+      Meteor.subscribe('userDesktopDragHandles');
+    }
+  });
+  
+  // Initialize mobile mode on startup for iOS devices
+  // This ensures mobile mode is applied correctly on page load
+  Tracker.afterFlush(() => {
+    if (typeof Utils !== 'undefined' && Utils.initializeUserSettings) {
+      Utils.initializeUserSettings();
+    }
+  });
+});
@@ -1,16 +1,16 @@
 .activity-title {
-  margin: 0 0.5em 0.8em;
+  margin: 0 0.7vw 1vh;
  display: flex;
  justify-content: space-between;
 }
 .reactions-popup .add-comment-reaction {
  display: inline-block;
  cursor: pointer;
-  border-radius: 5px;
-  font-size: 22px;
+  border-radius: 0.7vw;
+  font-size: clamp(18px, 4vw, 22px);
  text-align: center;
-  line-height: 30px;
-  width: 40px;
+  line-height: 1.3;
+  width: 5vw;
 }
 .reactions-popup .add-comment-reaction:hover {
  background-color: #b0c4de;
@@ -19,13 +19,13 @@
  clear: both;
 }
 .activities .activity {
-  margin: 0.5px 0;
-  padding: 6px 0;
+  margin: 0.1vh 0;
+  padding: 0.8vh 0;
  display: flex;
 }
 .activities .activity .member {
-  width: 32px;
-  height: 32px;
+  width: 4vw;
+  height: 4vw;
 }
 .activities .activity .activity-member {
  font-weight: 700;
@@ -36,18 +36,18 @@
  flex: 1;
  align-self: center;
  margin: 0;
-  margin-left: 3px;
+  margin-left: 0.4vw;
  overflow: hidden;
  word-break: break-word;
 }
 .activities .activity .activity-desc .activity-comment {
  display: block;
-  border-radius: 3px;
+  border-radius: 0.4vw;
  background: #fff;
  text-decoration: none;
-  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
-  margin-top: 5px;
-  padding: 5px;
+  box-shadow: 0 0.2vh 0.3vh rgba(0,0,0,0.2);
+  margin-top: 0.7vh;
+  padding: 0.7vh 0.7vw;
 }
 .activities .activity .activity-desc .activity-checklist {
  display: block;
@@ -189,14 +189,15 @@ template(name="activity")
      if(currentData.timeKey)
        | {{_ activity.activityType }}
        = ' '
-        i(title=currentData.timeValue).activity-meta {{ moment currentData.timeValue 'LLL' }}
+        i(title=currentData.timeValue).activity-meta {{ displayDate currentData.timeValue 'LLL' }}
        if (currentData.timeOldValue)
          = ' '
            | {{{_ "previous_as" }}}
            = ' '
-            i(title=currentData.timeOldValue).activity-meta {{ moment currentData.timeOldValue 'LLL' }}
+            i(title=currentData.timeOldValue).activity-meta {{ displayDate currentData.timeOldValue 'LLL' }}
        = ' @'
      else if(currentData.timeValue)
        | {{_ activity.activityType currentData.timeValue}}

-      div(title=activity.createdAt).activity-meta {{ moment activity.createdAt }}
+      if($neq mode 'none')
+        div(title=activity.createdAt).activity-meta {{ displayDate activity.createdAt }}
@@ -1,5 +1,6 @@
 import { ReactiveCache } from '/imports/reactiveCache';
 import DOMPurify from 'dompurify';
+import { sanitizeHTML, sanitizeText } from '/imports/lib/secureDOMPurify';
 import { TAPi18n } from '/imports/i18n';

 const activitiesPerPage = 500;
@@ -216,15 +217,11 @@ BlazeComponent.extendComponent({
            {
              href: source.url,
            },
-            DOMPurify.sanitize(source.system, {
-              ALLOW_UNKNOWN_PROTOCOLS: true,
-            }),
+            sanitizeHTML(source.system),
          ),
        );
      } else {
-        return DOMPurify.sanitize(source.system, {
-          ALLOW_UNKNOWN_PROTOCOLS: true,
-        });
+        return sanitizeHTML(source.system);
      }
    }
    return null;
@@ -248,10 +245,10 @@ BlazeComponent.extendComponent({
              href: `${attachment.link()}?download=true`,
              target: '_blank',
            },
-            DOMPurify.sanitize(attachment.name),
+            sanitizeText(attachment.name),
          ),
        )) ||
-      DOMPurify.sanitize(this.currentData().activity.attachmentName)
+      sanitizeText(this.currentData().activity.attachmentName)
    );
  },

@@ -265,7 +262,7 @@ BlazeComponent.extendComponent({

 Template.activity.helpers({
  sanitize(value) {
-    return DOMPurify.sanitize(value, { ALLOW_UNKNOWN_PROTOCOLS: true });
+    return sanitizeHTML(value);
  },
 });

@@ -336,7 +333,7 @@ function createCardLink(card, board) {
          href: card.originRelativeUrl(),
          class: 'action-card',
        },
-        DOMPurify.sanitize(text, { ALLOW_UNKNOWN_PROTOCOLS: true }),
+        sanitizeHTML(text),
      ),
    )
  );
@@ -353,7 +350,7 @@ function createBoardLink(board, list) {
          href: board.originRelativeUrl(),
          class: 'action-board',
        },
-        DOMPurify.sanitize(text, { ALLOW_UNKNOWN_PROTOCOLS: true }),
+        sanitizeHTML(text),
      ),
    )
  );
@@ -108,15 +108,12 @@
  text-decoration: none;
  height: 24px;
 }
-.comments .comment .comment-desc .reactions .open-comment-reaction-popup i.fa.fa-smile-o {
-  font-size: 17px;
+.comments .comment .comment-desc .reactions .open-comment-reaction-popup span {
+  display: inline-block;
+  font-size: clamp(14px, 2vw, 18px);
  font-weight: 500;
-  margin-left: 2px;
-}
-.comments .comment .comment-desc .reactions .open-comment-reaction-popup i.fa.fa-plus {
-  font-size: 8px;
-  margin-top: -7px;
-  margin-left: 1px;
+  line-height: 1;
+  margin-left: 4px;
 }
 .comments .comment .comment-desc .reactions .reaction {
  cursor: pointer;
@@ -25,13 +25,14 @@ template(name="comment")
          = text
        .edit-controls
          button.primary(type="submit") {{_ 'edit'}}
-          .fa.fa-times-thin.js-close-inlined-form
+          a.js-close-inlined-form(title="{{_ 'close' }}")
+            i.fa.fa-times-thin
      else
        .comment-text
          +viewer
            = text
        +commentReactions(reactions=reactions commentId=_id)
-        span(title=createdAt).comment-meta {{ moment createdAt }}
+        span(title=createdAt).comment-meta {{ displayDate createdAt }}
          if($eq currentUser._id userId)
            +editOrDeleteComment
          else if currentUser.isBoardAdmin
@@ -54,9 +55,11 @@ template(name="commentReactions")
        span.reaction-codepoint !{reaction.reactionCodepoint}
        span.reaction-count #{reaction.userIds.length}
    if (currentUser.isBoardMember)
-      a.open-comment-reaction-popup(title="{{_ 'addReactionPopup-title'}}")
-        i.fa.fa-smile-o
-        i.fa.fa-plus
+      unless currentUser.isReadOnly
+        unless currentUser.isReadAssignedOnly
+          a.open-comment-reaction-popup(title="{{_ 'addReactionPopup-title'}}")
+            span(title="{{_ 'reaction' }}") 😀
+            span(title="{{_ 'add' }}") ➕

 template(name="addReactionPopup")
  .reactions-popup
@@ -57,8 +57,9 @@ BlazeComponent.extendComponent({

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

@@ -0,0 +1,184 @@
+/* Board Conversion Progress Styles */
+.board-conversion-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.7);
+  z-index: 9999;
+  display: none;
+  align-items: center;
+  justify-content: center;
+}
+
+.board-conversion-overlay.active {
+  display: flex;
+}
+
+.board-conversion-modal {
+  background: white;
+  border-radius: 8px;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
+  max-width: 500px;
+  width: 90%;
+  max-height: 80vh;
+  overflow: hidden;
+  animation: slideIn 0.3s ease-out;
+}
+
+@keyframes slideIn {
+  from {
+    opacity: 0;
+    transform: translateY(-20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.board-conversion-header {
+  padding: 20px 24px 16px;
+  border-bottom: 1px solid #e0e0e0;
+  text-align: center;
+}
+
+.board-conversion-header h3 {
+  margin: 0 0 8px 0;
+  color: #333;
+  font-size: 20px;
+  font-weight: 500;
+}
+
+.board-conversion-header h3 i {
+  margin-right: 8px;
+  color: #2196F3;
+}
+
+.board-conversion-header p {
+  margin: 0;
+  color: #666;
+  font-size: 14px;
+}
+
+.board-conversion-content {
+  padding: 24px;
+}
+
+.conversion-progress {
+  margin-bottom: 20px;
+}
+
+.progress-bar {
+  width: 100%;
+  height: 8px;
+  background-color: #e0e0e0;
+  border-radius: 4px;
+  overflow: hidden;
+  margin-bottom: 8px;
+}
+
+.progress-fill {
+  height: 100%;
+  background: linear-gradient(90deg, #2196F3, #21CBF3);
+  border-radius: 4px;
+  transition: width 0.3s ease;
+  position: relative;
+}
+
+.progress-fill::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: linear-gradient(
+    90deg,
+    transparent,
+    rgba(255, 255, 255, 0.3),
+    transparent
+  );
+  animation: shimmer 2s infinite;
+}
+
+@keyframes shimmer {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(100%);
+  }
+}
+
+.progress-text {
+  text-align: center;
+  font-weight: 600;
+  color: #2196F3;
+  font-size: 16px;
+}
+
+.conversion-status {
+  text-align: center;
+  margin-bottom: 16px;
+  color: #333;
+  font-size: 16px;
+}
+
+.conversion-status i {
+  margin-right: 8px;
+  color: #2196F3;
+}
+
+.conversion-time {
+  text-align: center;
+  color: #666;
+  font-size: 14px;
+  background-color: #f5f5f5;
+  padding: 8px 12px;
+  border-radius: 4px;
+  margin-bottom: 16px;
+}
+
+.conversion-time i {
+  margin-right: 6px;
+  color: #FF9800;
+}
+
+.board-conversion-footer {
+  padding: 16px 24px 20px;
+  border-top: 1px solid #e0e0e0;
+  background-color: #f9f9f9;
+}
+
+.conversion-info {
+  text-align: center;
+  color: #666;
+  font-size: 13px;
+  line-height: 1.4;
+}
+
+.conversion-info i {
+  margin-right: 6px;
+  color: #2196F3;
+}
+
+/* Responsive design */
+@media (max-width: 600px) {
+  .board-conversion-modal {
+    width: 95%;
+    margin: 20px;
+  }
+
+  .board-conversion-header,
+  .board-conversion-content,
+  .board-conversion-footer {
+    padding-left: 16px;
+    padding-right: 16px;
+  }
+
+  .board-conversion-header h3 {
+    font-size: 18px;
+  }
+}
@@ -0,0 +1,27 @@
+template(name="boardConversionProgress")
+  .board-conversion-overlay(class="{{#if isConverting}}active{{/if}}")
+    .board-conversion-modal
+      .board-conversion-header
+        h3
+          i.fa.fa-cog
+          | {{_ 'converting-board'}}
+        p {{_ 'converting-board-description'}}
+
+      .board-conversion-content
+        .conversion-progress
+          .progress-bar
+            .progress-fill(style="width: {{conversionProgress}}%")
+          .progress-text {{conversionProgress}}%
+
+        .conversion-status
+          i.fa.fa-cog
+          | {{conversionStatus}}
+
+        .conversion-time(style="{{#unless conversionEstimatedTime}}display: none;{{/unless}}")
+          i.fa.fa-clock-o
+          | {{_ 'estimated-time-remaining'}}: {{conversionEstimatedTime}}
+
+      .board-conversion-footer
+        .conversion-info
+          i.fa.fa-info-circle
+          | {{_ 'conversion-info-text'}}
@@ -0,0 +1,37 @@
+import { Template } from 'meteor/templating';
+import { ReactiveVar } from 'meteor/reactive-var';
+import {
+  boardConverter,
+  isConverting,
+  conversionProgress,
+  conversionStatus,
+  conversionEstimatedTime
+} from '/client/lib/boardConverter';
+
+Template.boardConversionProgress.helpers({
+  isConverting() {
+    return isConverting.get();
+  },
+
+  conversionProgress() {
+    return conversionProgress.get();
+  },
+
+  conversionStatus() {
+    return conversionStatus.get();
+  },
+
+  conversionEstimatedTime() {
+    return conversionEstimatedTime.get();
+  }
+});
+
+Template.boardConversionProgress.onCreated(function() {
+  // Subscribe to conversion state changes
+  this.autorun(() => {
+    isConverting.get();
+    conversionProgress.get();
+    conversionStatus.get();
+    conversionEstimatedTime.get();
+  });
+});
@@ -1,6 +1,7 @@
 template(name="archivedBoards")
  h2
-    i.fa.fa-archive
+    span(title="{{_ 'archived-boards'}}")
+      i.fa.fa-archive
    | {{_ 'archived-boards'}}

  ul.archived-lists
@@ -8,13 +9,13 @@ template(name="archivedBoards")
      li.archived-lists-item
        div.board-header-btns
          button.board-header-btn.js-delete-board
-            i.fa.fa-trash-o
+            i.fa.fa-trash
            | {{_ 'delete-board'}}
          button.board-header-btn.js-restore-board
            i.fa.fa-undo
            | {{_ 'restore-board'}}
          = title
-        span {{ moment archivedAt 'LLL' }}
+        span {{ displayDate archivedAt 'LLL' }}
    else
      li.no-items-message {{_ 'no-archived-boards'}}

@@ -1,4 +1,5 @@
 import { ReactiveCache } from '/imports/reactiveCache';
+import { FlowRouter } from 'meteor/ostrio:flow-router-extra';

 BlazeComponent.extendComponent({
  onCreated() {
@@ -22,7 +23,7 @@ BlazeComponent.extendComponent({
  events() {
    return [
      {
-        'click .js-restore-board'() {
+        async 'click .js-restore-board'() {
          // TODO : Make isSandstorm variable global
          const isSandstorm =
            Meteor.settings &&
@@ -30,13 +31,13 @@ BlazeComponent.extendComponent({
            Meteor.settings.public.sandstorm;
          if (isSandstorm && Utils.getCurrentBoardId()) {
            const currentBoard = Utils.getCurrentBoard();
-            currentBoard.archive();
+            await currentBoard.archive();
          }
          const board = this.currentData();
-          board.restore();
+          await board.restore();
          Utils.goBoardId(board._id);
        },
-        'click .js-delete-board': Popup.afterConfirm('boardDelete', function() {
+        'click .js-delete-board': Popup.afterConfirm('boardDelete', async function() {
          Popup.back();
          const isSandstorm =
            Meteor.settings &&
@@ -44,9 +45,9 @@ BlazeComponent.extendComponent({
            Meteor.settings.public.sandstorm;
          if (isSandstorm && Utils.getCurrentBoardId()) {
            const currentBoard = Utils.getCurrentBoard();
-            Boards.remove(currentBoard._id);
+            await Boards.removeAsync(currentBoard._id);
          }
-          Boards.remove(this._id);
+          await Boards.removeAsync(this._id);
          FlowRouter.go('home');
        }),
      },
@@ -6,6 +6,27 @@
  bottom: 0;
  overflow-x: hidden;
  overflow-y: hidden;
+  width: 100%;
+  min-width: 100%;
+}
+
+/* When zoom is 50% or lower, ensure full width like content */
+.board-wrapper[style*="transform: scale(0.5)"] {
+  width: 100% !important;
+  max-width: 100% !important;
+  margin: 0 !important;
+}
+
+.board-wrapper[style*="transform: scale(0.4)"] {
+  width: 100% !important;
+  max-width: 100% !important;
+  margin: 0 !important;
+}
+
+.board-wrapper[style*="transform: scale(0.3)"] {
+  width: 100% !important;
+  max-width: 100% !important;
+  margin: 0 !important;
 }
 .board-wrapper .board-canvas {
  position: absolute;
@@ -15,6 +36,243 @@
  bottom: 0;
  transition: margin 0.1s;
  overflow-y: auto;
+  width: 100%;
+  min-width: 100%;
+}
+
+/* Ensure horizontal scrollbar is visible for high zoom levels */
+.board-wrapper .board-canvas[style*="overflow-x: auto"] {
+  overflow-x: auto !important;
+  overflow-y: auto !important;
+}
+
+/* Style the scrollbar for better visibility */
+.board-wrapper .board-canvas::-webkit-scrollbar {
+  height: 12px;
+  width: 12px;
+}
+
+.board-wrapper .board-canvas::-webkit-scrollbar-track {
+  background: #f1f1f1;
+  border-radius: 6px;
+}
+
+.board-wrapper .board-canvas::-webkit-scrollbar-thumb {
+  background: #888;
+  border-radius: 6px;
+}
+
+.board-wrapper .board-canvas::-webkit-scrollbar-thumb:hover {
+  background: #555;
+}
+
+/* Ensure content area can scroll horizontally for high zoom levels */
+#content[style*="overflow-x: auto"] {
+  overflow-x: auto !important;
+  overflow-y: auto !important;
+}
+
+/* Style content area scrollbar */
+#content::-webkit-scrollbar {
+  height: 12px;
+  width: 12px;
+}
+
+#content::-webkit-scrollbar-track {
+  background: #f1f1f1;
+  border-radius: 6px;
+}
+
+#content::-webkit-scrollbar-thumb {
+  background: #888;
+  border-radius: 6px;
+}
+
+#content::-webkit-scrollbar-thumb:hover {
+  background: #555;
+}
+
+/* Ensure scrollbars are always visible for high zoom levels */
+#content[style*="overflow-x: auto"] {
+  position: relative;
+}
+
+#content[style*="overflow-x: auto"]::-webkit-scrollbar {
+  height: 12px;
+  width: 12px;
+}
+
+    /* Force vertical scrollbar to always be visible */
+    #content[style*="overflow-y: auto"] {
+      overflow-y: scroll !important;
+    }
+
+    /* Mobile - make all text 2x bigger inside #content by default (icons stay same size) */
+    @media screen and (max-width: 800px),
+           screen and (max-device-width: 800px),
+           screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 800px),
+           screen and (max-width: 800px) and (orientation: portrait),
+           screen and (max-width: 800px) and (orientation: landscape) {
+      #content {
+        font-size: 2em !important; /* 2x bigger base font size for content area */
+      }
+
+      /* Make all text elements 2x bigger */
+      #content h1, #content h2, #content h3, #content h4, #content h5, #content h6,
+      #content p, #content span, #content div, #content a, #content button,
+      #content .minicard, #content .list-header-name, #content .board-header-btn,
+      #content .card-title, #content .card-details, #content .card-description,
+      #content .swimlane-header, #content .list-title, #content .card-text,
+      #content .member, #content .member-name, #content .member-initials,
+      #content .checklist-item, #content .checklist-title, #content .comment,
+      #content .activity, #content .activity-text, #content .activity-time,
+      #content .board-title, #content .board-description, #content .list-name,
+      #content .card-text, #content .card-title, #content .card-description,
+      #content .swimlane-title, #content .swimlane-description,
+      #content .board-header-title, #content .board-header-description,
+      #content .card-detail-title, #content .card-detail-description,
+      #content .list-header-title, #content .list-header-description,
+      #content .swimlane-header-title, #content .swimlane-header-description,
+      #content .minicard-title, #content .minicard-description,
+      #content .card-comment, #content .card-comment-text,
+      #content .checklist-item-text, #content .checklist-item-title,
+      #content .activity-item, #content .activity-item-text,
+      #content .board-member, #content .board-member-name,
+      #content .team-member, #content .team-member-name,
+      #content .org-member, #content .org-member-name,
+      #content .template-member, #content .template-member-name,
+      #content .user-name, #content .user-email, #content .user-role,
+      #content .setting-title, #content .setting-description,
+      #content .popup-title, #content .popup-description,
+      #content .modal-title, #content .modal-description,
+      #content .notification-title, #content .notification-text,
+      #content .announcement-title, #content .announcement-text,
+      #content .offline-warning-title, #content .offline-warning-text,
+      #content .error-title, #content .error-text,
+      #content .success-title, #content .success-text,
+      #content .info-title, #content .info-text,
+      #content .warning-title, #content .warning-text {
+        font-size: 1em !important; /* Use inherited 2x scaling */
+      }
+
+      /* Keep icons the same size (don't scale them) */
+      #content .fa, #content .icon, #content i {
+        font-size: 1em !important; /* Keep original icon size */
+      }
+
+      /* Reset specific icon sizes to prevent double scaling */
+      #content .fa-home, #content .fa-bars, #content .fa-search,
+      #content .fa-bell, #content .fa-user, #content .fa-cog,
+      #content .fa-plus, #content .fa-minus, #content .fa-edit,
+      #content .fa-trash, #content .fa-save, #content .fa-cancel,
+      #content .fa-arrow-left, #content .fa-arrow-right,
+      #content .fa-arrow-up, #content .fa-arrow-down,
+      #content .fa-check, #content .fa-times, #content .fa-close,
+      #content .fa-star, #content .fa-heart, #content .fa-thumbs-up,
+      #content .fa-thumbs-down, #content .fa-comment, #content .fa-reply,
+      #content .fa-share, #content .fa-download, #content .fa-upload,
+      #content .fa-copy, #content .fa-paste, #content .fa-cut,
+      #content .fa-undo, #content .fa-redo, #content .fa-refresh,
+      #content .fa-sync, #content .fa-spinner, #content .fa-loading,
+      #content .fa-info, #content .fa-question, #content .fa-exclamation,
+      #content .fa-warning, #content .fa-error, #content .fa-success,
+      #content .fa-check-circle, #content .fa-times-circle,
+      #content .fa-exclamation-circle, #content .fa-question-circle,
+      #content .fa-info-circle, #content .fa-warning-circle,
+      #content .fa-error-circle, #content .fa-success-circle {
+        font-size: 1em !important; /* Keep original icon size */
+      }
+    }
+
+    /* Fallback for iPhone devices using JavaScript detection */
+    .iphone-device #content {
+      font-size: 2em !important; /* 2x bigger base font size for content area */
+    }
+
+    .iphone-device #content h1, .iphone-device #content h2, .iphone-device #content h3, .iphone-device #content h4, .iphone-device #content h5, .iphone-device #content h6,
+    .iphone-device #content p, .iphone-device #content span, .iphone-device #content div, .iphone-device #content a, .iphone-device #content button,
+    .iphone-device #content .minicard, .iphone-device #content .list-header-name, .iphone-device #content .board-header-btn,
+    .iphone-device #content .card-title, .iphone-device #content .card-details, .iphone-device #content .card-description,
+    .iphone-device #content .swimlane-header, .iphone-device #content .list-title, .iphone-device #content .card-text,
+    .iphone-device #content .member, .iphone-device #content .member-name, .iphone-device #content .member-initials,
+    .iphone-device #content .checklist-item, .iphone-device #content .checklist-title, .iphone-device #content .comment,
+    .iphone-device #content .activity, .iphone-device #content .activity-text, .iphone-device #content .activity-time,
+    .iphone-device #content .board-title, .iphone-device #content .board-description, .iphone-device #content .list-name,
+    .iphone-device #content .card-text, .iphone-device #content .card-title, .iphone-device #content .card-description,
+    .iphone-device #content .swimlane-title, .iphone-device #content .swimlane-description,
+    .iphone-device #content .board-header-title, .iphone-device #content .board-header-description,
+    .iphone-device #content .card-detail-title, .iphone-device #content .card-detail-description,
+    .iphone-device #content .list-header-title, .iphone-device #content .list-header-description,
+    .iphone-device #content .swimlane-header-title, .iphone-device #content .swimlane-header-description,
+    .iphone-device #content .minicard-title, .iphone-device #content .minicard-description,
+    .iphone-device #content .card-comment, .iphone-device #content .card-comment-text,
+    .iphone-device #content .checklist-item-text, .iphone-device #content .checklist-item-title,
+    .iphone-device #content .activity-item, .iphone-device #content .activity-item-text,
+    .iphone-device #content .board-member, .iphone-device #content .board-member-name,
+    .iphone-device #content .team-member, .iphone-device #content .team-member-name,
+    .iphone-device #content .org-member, .iphone-device #content .org-member-name,
+    .iphone-device #content .template-member, .iphone-device #content .template-member-name,
+    .iphone-device #content .user-name, .iphone-device #content .user-email, .iphone-device #content .user-role,
+    .iphone-device #content .setting-title, .iphone-device #content .setting-description,
+    .iphone-device #content .popup-title, .iphone-device #content .popup-description,
+    .iphone-device #content .modal-title, .iphone-device #content .modal-description,
+    .iphone-device #content .notification-title, .iphone-device #content .notification-text,
+    .iphone-device #content .announcement-title, .iphone-device #content .announcement-text,
+    .iphone-device #content .offline-warning-title, .iphone-device #content .offline-warning-text,
+    .iphone-device #content .error-title, .iphone-device #content .error-text,
+    .iphone-device #content .success-title, .iphone-device #content .success-text,
+    .iphone-device #content .info-title, .iphone-device #content .info-text,
+    .iphone-device #content .warning-title, .iphone-device #content .warning-text {
+      font-size: 1em !important; /* Use inherited 2x scaling */
+    }
+
+    /* Keep icons the same size for iPhone devices */
+    .iphone-device #content .fa, .iphone-device #content .icon, .iphone-device #content i {
+      font-size: 1em !important; /* Keep original icon size */
+    }
+
+/* Mobile iPhone: scale card details text and icons to 2x */
+body.mobile-mode.iphone-device .card-details {
+  font-size: 2em !important;
+}
+body.mobile-mode.iphone-device .card-details .fa,
+body.mobile-mode.iphone-device .card-details .icon,
+body.mobile-mode.iphone-device .card-details i,
+body.mobile-mode.iphone-device .card-details .emoji-icon,
+body.mobile-mode.iphone-device .card-details a,
+body.mobile-mode.iphone-device .card-details p,
+body.mobile-mode.iphone-device .card-details span,
+body.mobile-mode.iphone-device .card-details div,
+body.mobile-mode.iphone-device .card-details button,
+body.mobile-mode.iphone-device .card-details input,
+body.mobile-mode.iphone-device .card-details select,
+body.mobile-mode.iphone-device .card-details textarea {
+  font-size: inherit !important;
+}
+/* Section titles slightly larger than content but not as big as card title */
+body.mobile-mode.iphone-device .card-details .card-details-item-title {
+  font-size: 1.1em !important;
+  font-weight: bold;
+}
+
+/* Ensure scrollbars are positioned correctly */
+#content[style*="overflow-x: auto"]::-webkit-scrollbar:vertical {
+  width: 12px;
+}
+
+#content[style*="overflow-x: auto"]::-webkit-scrollbar:horizontal {
+  height: 12px;
+}
+
+/* Force both scrollbars to always be visible for high zoom levels */
+#content[style*="overflow-x: auto"][style*="overflow-y: auto"] {
+  overflow-x: scroll !important;
+  overflow-y: scroll !important;
+}
+
+/* Ensure the right scrollbar is always visible on the inner right edge */
+#content[style*="overflow-y: auto"] {
+  scrollbar-gutter: stable;
 }
 .board-wrapper .board-canvas .board-overlay {
  position: fixed;
@@ -29,30 +287,106 @@
  animation: fadeIn 0.2s;
  z-index: 16;
 }
+
+/* Fix for mobile Safari: ensure overlay stays behind card details */
+@media screen and (max-width: 800px) {
+  .board-wrapper .board-canvas .board-overlay {
+    z-index: 17 !important;
+  }
+
+  /* In desktop mode on small screens, still keep overlay behind card */
+  body.desktop-mode .board-wrapper .board-canvas .board-overlay {
+    z-index: 17 !important;
+  }
+}
+
+/* In mobile mode, lower the overlay z-index to stay behind card details */
+body.mobile-mode .board-wrapper .board-canvas .board-overlay {
+  z-index: 17 !important;
+}
+
+/* iPhone in desktop mode: remove overlay to avoid blocking card */
+body.desktop-mode.iphone-device .board-wrapper .board-canvas .board-overlay {
+  display: none !important;
+  pointer-events: none !important;
+}
+
+/* Desktop mode: hide overlay to allow multiple cards and board interaction */
+body.desktop-mode .board-wrapper .board-canvas .board-overlay {
+  display: none !important;
+  pointer-events: none !important;
+}
 .board-wrapper .board-canvas.is-dragging-active .open-minicard-composer,
 .board-wrapper .board-canvas.is-dragging-active .minicard-wrapper.is-checked {
  display: none;
 }
 /* Mobile view styles - applied when isMiniScreen is true (iPhone, etc.) */
-.board-wrapper.mobile-view .board-canvas.mobile-view .swimlane {
-  border-bottom: 1px solid #ccc;
-  display: flex;
-  flex-direction: column;
-  margin: 0;
-  padding: 0 0px 0px 0;
-  overflow-x: hidden;
-  overflow-y: auto;
+.board-wrapper.mobile-view {
+  width: 100vw !important;
+  max-width: 100vw !important;
+  min-width: 100vw !important;
+  left: 0 !important;
+  right: 0 !important;
+  overflow-x: hidden !important;
+  overflow-y: auto !important;
 }

-@media screen and (max-width: 800px) {
+.board-wrapper.mobile-view .board-canvas {
+  width: 100vw !important;
+  max-width: 100vw !important;
+  min-width: 100vw !important;
+  left: 0 !important;
+  right: 0 !important;
+  overflow-x: hidden !important;
+  overflow-y: auto !important;
+}
+
+.board-wrapper.mobile-view .board-canvas.mobile-view .swimlane {
+  border-bottom: 1px solid #ccc;
+  display: block !important;
+  flex-direction: column;
+  margin: 0;
+  padding: 0;
+  overflow-x: hidden !important;
+  overflow-y: auto;
+  width: 100vw !important;
+  max-width: 100vw !important;
+  min-width: 100vw !important;
+}
+
+@media screen and (max-width: 800px),
+       screen and (max-device-width: 932px) and (-webkit-min-device-pixel-ratio: 3) {
+  .board-wrapper {
+    width: 100vw !important;
+    max-width: 100vw !important;
+    min-width: 100vw !important;
+    left: 0 !important;
+    right: 0 !important;
+    overflow-x: hidden !important;
+    overflow-y: auto !important;
+  }
+
+  .board-wrapper .board-canvas {
+    width: 100vw !important;
+    max-width: 100vw !important;
+    min-width: 100vw !important;
+    left: 0 !important;
+    right: 0 !important;
+    overflow-x: hidden !important;
+    overflow-y: auto !important;
+  }
+
  .board-wrapper .board-canvas .swimlane {
    border-bottom: 1px solid #ccc;
-    display: flex;
+    display: block !important;
    flex-direction: column;
    margin: 0;
-    padding: 0 0px 0px 0;
-    overflow-x: hidden;
+    padding: 0;
+    overflow-x: hidden !important;
    overflow-y: auto;
+    width: 100vw !important;
+    max-width: 100vw !important;
+    min-width: 100vw !important;
  }
 }
 .calendar-event-green {
@@ -230,3 +564,10 @@
  font-size: 25px;
  cursor: pointer;
 }
+
+/* Global file drag over state for board canvas */
+.board-canvas.file-drag-over {
+  background-color: rgba(0, 123, 255, 0.05) !important;
+  border: 2px dashed #007bff !important;
+  transition: all 0.2s ease;
+}
@@ -1,5 +1,8 @@
 template(name="board")
-  if isBoardReady.get
+
+  if isConverting.get
+    +boardConversionProgress
+  else if isBoardReady.get
    if currentBoard
      if onlyShowCurrentCard
        +cardDetails(currentCard)
@@ -16,6 +19,10 @@ template(name="boardBody")
  if notDisplayThisBoard
   | {{_ 'tableVisibilityMode-allowPrivateOnly'}}
  else
+    // Debug information (remove in production)
+    if debugBoardState
+      .debug-info(style="position: fixed; top: 0; left: 0; background: rgba(0,0,0,0.8); color: white; padding: 10px; z-index: 9999; font-size: 12px;")
+        | {{_ 'board'}}: {{currentBoard.title}} | {{_ 'view'}}: {{boardView}} | {{_ 'has-swimlanes'}}: {{hasSwimlanes}} | {{_ 'swimlanes'}}: {{currentBoard.swimlanes.length}}
    .board-wrapper(class=currentBoard.colorClass class="{{#if isMiniScreen}}mobile-view{{/if}}")
      .board-canvas.js-swimlanes(
        class="{{#if hasSwimlanes}}dragscroll{{/if}}"
@@ -34,15 +41,25 @@ template(name="boardBody")
            each currentBoard.swimlanes
              +swimlane(this)
          else
-            a.js-empty-board-add-swimlane(title="{{_ 'add-swimlane'}}")
-              h1.big-message.quiet
-                | {{_ 'add-swimlane'}} +
+            // Fallback: If no swimlanes exist, show lists instead of empty message
+            +listsGroup(currentBoard)
        else if isViewLists
          +listsGroup(currentBoard)
        else if isViewCalendar
          +calendarView
+        else if isViewGantt
+          +ganttView
        else
-          +listsGroup(currentBoard)
+          // Default view - show swimlanes if they exist, otherwise show lists
+          if hasSwimlanes
+            each currentBoard.swimlanes
+              +swimlane(this)
+          else
+            +listsGroup(currentBoard)
+      //- Render multiple open cards in desktop mode
+      unless isMiniScreen
+        each openCards
+          +cardDetails(this cardIndex=@index)
      +sidebar

 template(name="calendarView")
@@ -50,4 +67,4 @@ template(name="calendarView")
    .calendar-view.swimlane
      if currentCard
        +cardDetails(currentCard)
-      +fullcalendar(calendarOptions)
+      +fullcalendar(calendarOptions)
@@ -1,6 +1,12 @@
 import { ReactiveCache } from '/imports/reactiveCache';
+import '../gantt/gantt.js';
+import { FlowRouter } from 'meteor/ostrio:flow-router-extra';
 import { TAPi18n } from '/imports/i18n';
 import dragscroll from '@wekanteam/dragscroll';
+import { boardConverter } from '/client/lib/boardConverter';
+import { formatDateByUserPreference } from '/imports/lib/dateUtils';
+import Swimlanes from '/models/swimlanes';
+import Lists from '/models/lists';

 const subManager = new SubsManager();
 const { calculateIndex } = Utils;
@@ -9,6 +15,10 @@ const swimlaneWhileSortingHeight = 150;
 BlazeComponent.extendComponent({
  onCreated() {
    this.isBoardReady = new ReactiveVar(false);
+    this.isConverting = new ReactiveVar(false);
+    this._swimlaneCreated = new Set(); // Track boards where we've created swimlanes
+    this._boardProcessed = false; // Track if board has been processed
+    this._lastProcessedBoardId = null; // Track last processed board ID

    // The pattern we use to manually handle data loading is described here:
    // https://kadira.io/academy/meteor-routing-guide/content/subscriptions-and-data-management/using-subs-manager
@@ -17,22 +27,122 @@ BlazeComponent.extendComponent({
    this.autorun(() => {
      const currentBoardId = Session.get('currentBoard');
      if (!currentBoardId) return;
+
      const handle = subManager.subscribe('board', currentBoardId, false);
-      Tracker.nonreactive(() => {
-        Tracker.autorun(() => {
-          this.isBoardReady.set(handle.ready());
-        });
+
+      // Use a separate autorun for subscription ready state to avoid reactive loops
+      this.subscriptionReadyAutorun = Tracker.autorun(() => {
+        if (handle.ready()) {
+          if (
+            !this._boardProcessed ||
+            this._lastProcessedBoardId !== currentBoardId
+          ) {
+            this._boardProcessed = true;
+            this._lastProcessedBoardId = currentBoardId;
+
+            // Ensure default swimlane exists (only once per board)
+            this.ensureDefaultSwimlane(currentBoardId);
+            // Check if board needs conversion
+            this.checkAndConvertBoard(currentBoardId);
+          }
+        } else {
+          this.isBoardReady.set(false);
+        }
      });
    });
  },

+  onDestroyed() {
+    // Clean up the subscription ready autorun to prevent memory leaks
+    if (this.subscriptionReadyAutorun) {
+      this.subscriptionReadyAutorun.stop();
+    }
+  },
+
+  ensureDefaultSwimlane(boardId) {
+    // Only create swimlane once per board
+    if (this._swimlaneCreated.has(boardId)) {
+      return;
+    }
+
+    try {
+      const board = ReactiveCache.getBoard(boardId);
+      if (!board) return;
+
+      const swimlanes = board.swimlanes();
+
+      if (swimlanes.length === 0) {
+        // Check if any swimlane exists in the database to avoid race conditions
+        const existingSwimlanes = ReactiveCache.getSwimlanes({ boardId });
+        if (existingSwimlanes.length === 0) {
+          const swimlaneId = Swimlanes.insert({
+            title: 'Default',
+            boardId: boardId,
+          });
+          if (process.env.DEBUG === 'true') {
+            console.log(
+              `Created default swimlane ${swimlaneId} for board ${boardId}`,
+            );
+          }
+        }
+        this._swimlaneCreated.add(boardId);
+      } else {
+        this._swimlaneCreated.add(boardId);
+      }
+    } catch (error) {
+      console.error('Error creating default swimlane:', error);
+    }
+  },
+
+  async checkAndConvertBoard(boardId) {
+    try {
+      const board = ReactiveCache.getBoard(boardId);
+      if (!board) {
+        this.isBoardReady.set(true);
+        return;
+      }
+
+      this.isBoardReady.set(true);
+    } catch (error) {
+      console.error('Error during board conversion check:', error);
+      this.isConverting.set(false);
+      this.isBoardReady.set(true); // Show board even if conversion check failed
+    }
+  },
+
  onlyShowCurrentCard() {
-    return Utils.isMiniScreen() && Utils.getCurrentCardId(true);
+    const isMiniScreen = Utils.isMiniScreen();
+    const currentCardId = Utils.getCurrentCardId(true);
+    return isMiniScreen && currentCardId;
+  },
+
+  openCards() {
+    // In desktop mode, return array of all open cards
+    const isMobile = Utils.getMobileMode();
+    if (!isMobile) {
+      const openCardIds = Session.get('openCards') || [];
+      return openCardIds
+        .map((id) => ReactiveCache.getCard(id))
+        .filter((card) => card);
+    }
+    return [];
  },

  goHome() {
    FlowRouter.go('home');
  },
+
+  isConverting() {
+    return this.isConverting.get();
+  },
+
+  isBoardReady() {
+    return this.isBoardReady.get();
+  },
+
+  currentBoard() {
+    return Utils.getCurrentBoard();
+  },
 }).register('board');

 BlazeComponent.extendComponent({
@@ -43,44 +153,70 @@ BlazeComponent.extendComponent({
    this._isDragging = false;
    // Used to set the overlay
    this.mouseHasEnterCardDetails = false;
+    this._sortFieldsFixed = new Set(); // Track which boards have had sort fields fixed

    // fix swimlanes sort field if there are null values
    const currentBoardData = Utils.getCurrentBoard();
-    const nullSortSwimlanes = currentBoardData.nullSortSwimlanes();
-    if (nullSortSwimlanes.length > 0) {
-      const swimlanes = currentBoardData.swimlanes();
-      let count = 0;
-      swimlanes.forEach(s => {
-        Swimlanes.update(s._id, {
-          $set: {
-            sort: count,
-          },
-        });
-        count += 1;
-      });
+    if (currentBoardData && Swimlanes) {
+      const boardId = currentBoardData._id;
+      // Only fix sort fields once per board to prevent reactive loops
+      if (!this._sortFieldsFixed.has(`swimlanes-${boardId}`)) {
+        const nullSortSwimlanes = currentBoardData.nullSortSwimlanes();
+        if (nullSortSwimlanes.length > 0) {
+          const swimlanes = currentBoardData.swimlanes();
+          let count = 0;
+          swimlanes.forEach((s) => {
+            Swimlanes.update(s._id, {
+              $set: {
+                sort: count,
+              },
+            });
+            count += 1;
+          });
+        }
+        this._sortFieldsFixed.add(`swimlanes-${boardId}`);
+      }
    }

    // fix lists sort field if there are null values
-    const nullSortLists = currentBoardData.nullSortLists();
-    if (nullSortLists.length > 0) {
-      const lists = currentBoardData.lists();
-      let count = 0;
-      lists.forEach(l => {
-        Lists.update(l._id, {
-          $set: {
-            sort: count,
-          },
-        });
-        count += 1;
-      });
+    if (currentBoardData && Lists) {
+      const boardId = currentBoardData._id;
+      // Only fix sort fields once per board to prevent reactive loops
+      if (!this._sortFieldsFixed.has(`lists-${boardId}`)) {
+        const nullSortLists = currentBoardData.nullSortLists();
+        if (nullSortLists.length > 0) {
+          const lists = currentBoardData.lists();
+          let count = 0;
+          lists.forEach((l) => {
+            Lists.update(l._id, {
+              $set: {
+                sort: count,
+              },
+            });
+            count += 1;
+          });
+        }
+        this._sortFieldsFixed.add(`lists-${boardId}`);
+      }
    }
  },
  onRendered() {
+    // Initialize user settings (zoom and mobile mode)
+    Utils.initializeUserSettings();
+
+    // Detect iPhone devices and add class for better CSS targeting
+    const isIPhone = /iPhone|iPod/.test(navigator.userAgent);
+    if (isIPhone) {
+      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"])');
+      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();
@@ -89,12 +225,23 @@ BlazeComponent.extendComponent({
      }
    }

-    // Observe for new popups/menus and set focus
-    const popupObserver = 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'))) {
-            setTimeout(function() { focusFirstInteractive(node); }, 10);
+    // Observe for new popups/menus and set focus (but exclude swimlane content)
+    const popupObserver = 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.closest('.js-swimlanes') &&
+            !node.closest('.swimlane') &&
+            !node.closest('.list') &&
+            !node.closest('.minicard')
+          ) {
+            setTimeout(function () {
+              focusFirstInteractive(node);
+            }, 10);
          }
        });
      });
@@ -102,11 +249,15 @@ BlazeComponent.extendComponent({
    popupObserver.observe(document.body, { childList: true, subtree: true });

    // Remove tabindex from non-interactive elements (e.g., user abbreviations, labels)
-    document.querySelectorAll('.user-abbreviation, .user-label, .card-header-label, .edit-label, .private-label').forEach(function(el) {
-      if (el.hasAttribute('tabindex')) {
-        el.removeAttribute('tabindex');
-      }
-    });
+    document
+      .querySelectorAll(
+        '.user-abbreviation, .user-label, .card-header-label, .edit-label, .private-label',
+      )
+      .forEach(function (el) {
+        if (el.hasAttribute('tabindex')) {
+          el.removeAttribute('tabindex');
+        }
+      });
    /*
    // Add a toggle button for keyboard shortcuts accessibility
    if (!document.getElementById('wekan-shortcuts-toggle')) {
@@ -139,7 +290,7 @@ BlazeComponent.extendComponent({
    }
    */
    // Ensure toggle-buttons, color choices, reactions, renaming, and calendar controls are focusable and have ARIA roles
-    document.querySelectorAll('.js-toggle').forEach(function(el) {
+    document.querySelectorAll('.js-toggle').forEach(function (el) {
      el.setAttribute('tabindex', '0');
      el.setAttribute('role', 'button');
      // Short, descriptive label for favorite/star toggle
@@ -149,27 +300,27 @@ BlazeComponent.extendComponent({
        el.setAttribute('aria-label', 'Toggle');
      }
    });
-    document.querySelectorAll('.js-color-choice').forEach(function(el) {
+    document.querySelectorAll('.js-color-choice').forEach(function (el) {
      el.setAttribute('tabindex', '0');
      el.setAttribute('role', 'button');
      el.setAttribute('aria-label', 'Choose color');
    });
-    document.querySelectorAll('.js-reaction').forEach(function(el) {
+    document.querySelectorAll('.js-reaction').forEach(function (el) {
      el.setAttribute('tabindex', '0');
      el.setAttribute('role', 'button');
      el.setAttribute('aria-label', 'React');
    });
-    document.querySelectorAll('.js-rename-swimlane').forEach(function(el) {
+    document.querySelectorAll('.js-rename-swimlane').forEach(function (el) {
      el.setAttribute('tabindex', '0');
      el.setAttribute('role', 'button');
      el.setAttribute('aria-label', 'Rename swimlane');
    });
-    document.querySelectorAll('.js-rename-list').forEach(function(el) {
+    document.querySelectorAll('.js-rename-list').forEach(function (el) {
      el.setAttribute('tabindex', '0');
      el.setAttribute('role', 'button');
      el.setAttribute('aria-label', 'Rename list');
    });
-    document.querySelectorAll('.fc-button').forEach(function(el) {
+    document.querySelectorAll('.fc-button').forEach(function (el) {
      el.setAttribute('tabindex', '0');
      el.setAttribute('role', 'button');
    });
@@ -180,7 +331,10 @@ BlazeComponent.extendComponent({
    // This fixes WCAG 2.5.3: Label in Name
    const swimlanesSwitcher = this.$('.js-board-view-swimlanes');
    if (swimlanesSwitcher.length) {
-      swimlanesSwitcher.attr('aria-label', swimlanesSwitcher.text().trim() || 'Swimlanes');
+      swimlanesSwitcher.attr(
+        'aria-label',
+        swimlanesSwitcher.text().trim() || 'Swimlanes',
+      );
    }

    // Add a highly visible focus indicator and improve contrast for interactive elements
@@ -206,9 +360,9 @@ BlazeComponent.extendComponent({
        .js-add-card[tabindex] {
          outline: none;
        }
-        /* Hamburger menu */
-        .fa-bars, .icon-hamburger {
-          color: #222 !important;
+        /* Sidebar hamburger menu button in header */
+        .js-toggle-sidebar .fa-bars {
+          color: #fff !important;
        }
        /* Grey icons in card detail header */
        .card-detail-header .fa, .card-detail-header .icon {
@@ -243,7 +397,7 @@ BlazeComponent.extendComponent({
      document.head.appendChild(style);
    }
    // Ensure plus/add elements are focusable and have ARIA roles
-    document.querySelectorAll('.js-add-card').forEach(function(el) {
+    document.querySelectorAll('.js-add-card').forEach(function (el) {
      el.setAttribute('tabindex', '0');
      el.setAttribute('role', 'button');
      el.setAttribute('aria-label', 'Add new card');
@@ -371,22 +525,24 @@ BlazeComponent.extendComponent({
      // Always reset dragscroll on view switch
      dragscroll.reset();

-      if (Utils.isTouchScreenOrShowDesktopDragHandles()) {
-        $swimlanesDom.sortable({
-          handle: '.js-swimlane-header-handle',
-        });
-      } else {
-        $swimlanesDom.sortable({
-          handle: '.swimlane-header',
-        });
-      }
+      if ($swimlanesDom.data('uiSortable') || $swimlanesDom.data('sortable')) {
+        if (Utils.isTouchScreenOrShowDesktopDragHandles()) {
+          $swimlanesDom.sortable(
+            'option',
+            'handle',
+            '.js-swimlane-header-handle',
+          );
+        } else {
+          $swimlanesDom.sortable('option', 'handle', '.swimlane-header');
+        }

-      // Disable drag-dropping if the current user is not a board member
-      $swimlanesDom.sortable(
-        'option',
-        'disabled',
-        !ReactiveCache.getCurrentUser()?.isBoardAdmin(),
-      );
+        // Disable drag-dropping if the current user is not a board member
+        $swimlanesDom.sortable(
+          'option',
+          'disabled',
+          !ReactiveCache.getCurrentUser()?.isBoardAdmin(),
+        );
+      }
    });

    // If there is no data in the board (ie, no lists) we autofocus the list
@@ -401,45 +557,98 @@ BlazeComponent.extendComponent({
  },

  notDisplayThisBoard() {
-    let allowPrivateVisibilityOnly = TableVisibilityModeSettings.findOne('tableVisibilityMode-allowPrivateOnly');
+    let allowPrivateVisibilityOnly = TableVisibilityModeSettings.findOne(
+      'tableVisibilityMode-allowPrivateOnly',
+    );
    let currentBoard = Utils.getCurrentBoard();
-    if (allowPrivateVisibilityOnly !== undefined && allowPrivateVisibilityOnly.booleanValue && currentBoard.permission == 'public') {
-      return true;
-    }
-
-    return false;
+    return (
+      allowPrivateVisibilityOnly !== undefined &&
+      allowPrivateVisibilityOnly.booleanValue &&
+      currentBoard &&
+      currentBoard.permission == 'public'
+    );
  },

  isViewSwimlanes() {
    const currentUser = ReactiveCache.getCurrentUser();
-    if (currentUser) {
-      return (currentUser.profile || {}).boardView === 'board-view-swimlanes';
-    } else {
-      return (
-        window.localStorage.getItem('boardView') === 'board-view-swimlanes'
-      );
-    }
-  },
+    let boardView;

-  hasSwimlanes() {
-    return Utils.getCurrentBoard().swimlanes().length > 0;
+    if (currentUser) {
+      boardView = (currentUser.profile || {}).boardView;
+    } else {
+      boardView = window.localStorage.getItem('boardView');
+    }
+
+    // If no board view is set, default to swimlanes
+    if (!boardView) {
+      boardView = 'board-view-swimlanes';
+    }
+
+    return boardView === 'board-view-swimlanes';
  },

  isViewLists() {
    const currentUser = ReactiveCache.getCurrentUser();
+    let boardView;
+
    if (currentUser) {
-      return (currentUser.profile || {}).boardView === 'board-view-lists';
+      boardView = (currentUser.profile || {}).boardView;
    } else {
-      return window.localStorage.getItem('boardView') === 'board-view-lists';
+      boardView = window.localStorage.getItem('boardView');
    }
+
+    return boardView === 'board-view-lists';
  },

  isViewCalendar() {
    const currentUser = ReactiveCache.getCurrentUser();
+    let boardView;
+
    if (currentUser) {
-      return (currentUser.profile || {}).boardView === 'board-view-cal';
+      boardView = (currentUser.profile || {}).boardView;
    } else {
-      return window.localStorage.getItem('boardView') === 'board-view-cal';
+      boardView = window.localStorage.getItem('boardView');
+    }
+
+    return boardView === 'board-view-cal';
+  },
+
+  isViewGantt() {
+    const currentUser = ReactiveCache.getCurrentUser();
+    let boardView;
+
+    if (currentUser) {
+      boardView = (currentUser.profile || {}).boardView;
+    } else {
+      boardView = window.localStorage.getItem('boardView');
+    }
+
+    return boardView === 'board-view-gantt';
+  },
+
+  hasSwimlanes() {
+    const currentBoard = Utils.getCurrentBoard();
+    if (!currentBoard) {
+      if (process.env.DEBUG === 'true') {
+        console.log('hasSwimlanes: No current board');
+      }
+      return false;
+    }
+
+    try {
+      const swimlanes = currentBoard.swimlanes();
+      const hasSwimlanes = swimlanes && swimlanes.length > 0;
+      if (process.env.DEBUG === 'true') {
+        console.log(
+          'hasSwimlanes: Board has',
+          swimlanes ? swimlanes.length : 0,
+          'swimlanes',
+        );
+      }
+      return hasSwimlanes;
+    } catch (error) {
+      console.error('hasSwimlanes: Error getting swimlanes:', error);
+      return false;
    }
  },

@@ -448,6 +657,47 @@ BlazeComponent.extendComponent({
    return user && user.isVerticalScrollbars();
  },

+  boardView() {
+    return Utils.boardView();
+  },
+
+  debugBoardState() {
+    // Enable debug mode by setting ?debug=1 in URL
+    const urlParams = new URLSearchParams(window.location.search);
+    return urlParams.get('debug') === '1';
+  },
+
+  debugBoardStateData() {
+    const currentBoard = Utils.getCurrentBoard();
+    const currentBoardId = Session.get('currentBoard');
+    const isBoardReady = this.isBoardReady.get();
+    const isConverting = this.isConverting.get();
+    const boardView = Utils.boardView();
+
+    if (process.env.DEBUG === 'true') {
+      console.log('=== BOARD DEBUG STATE ===');
+      console.log('currentBoardId:', currentBoardId);
+      console.log(
+        'currentBoard:',
+        !!currentBoard,
+        currentBoard ? currentBoard.title : 'none',
+      );
+      console.log('isBoardReady:', isBoardReady);
+      console.log('isConverting:', isConverting);
+      console.log('boardView:', boardView);
+      console.log('========================');
+    }
+
+    return {
+      currentBoardId,
+      hasCurrentBoard: !!currentBoard,
+      currentBoardTitle: currentBoard ? currentBoard.title : 'none',
+      isBoardReady,
+      isConverting,
+      boardView,
+    };
+  },
+
  openNewListForm() {
    if (this.isViewSwimlanes()) {
      // The form had been removed in 416b17062e57f215206e93a85b02ef9eb1ab4902
@@ -471,6 +721,43 @@ BlazeComponent.extendComponent({
          }
        },
        'click .js-empty-board-add-swimlane': Popup.open('swimlaneAdd'),
+        // Global drag and drop file upload handlers for better visual feedback
+        'dragover .board-canvas'(event) {
+          const dataTransfer = event.originalEvent.dataTransfer;
+          if (
+            dataTransfer &&
+            dataTransfer.types &&
+            dataTransfer.types.includes('Files')
+          ) {
+            event.preventDefault();
+            // Add visual indicator that files can be dropped
+            $('.board-canvas').addClass('file-drag-over');
+          }
+        },
+        'dragleave .board-canvas'(event) {
+          const dataTransfer = event.originalEvent.dataTransfer;
+          if (
+            dataTransfer &&
+            dataTransfer.types &&
+            dataTransfer.types.includes('Files')
+          ) {
+            // Only remove class if we're leaving the board canvas entirely
+            if (!event.currentTarget.contains(event.relatedTarget)) {
+              $('.board-canvas').removeClass('file-drag-over');
+            }
+          }
+        },
+        'drop .board-canvas'(event) {
+          const dataTransfer = event.originalEvent.dataTransfer;
+          if (
+            dataTransfer &&
+            dataTransfer.types &&
+            dataTransfer.types.includes('Files')
+          ) {
+            event.preventDefault();
+            $('.board-canvas').removeClass('file-drag-over');
+          }
+        },
      },
    ];
  },
@@ -501,12 +788,12 @@ BlazeComponent.extendComponent({

 // Accessibility: Allow users to enable/disable keyboard shortcuts
 window.wekanShortcutsEnabled = true;
-window.toggleWekanShortcuts = function(enabled) {
+window.toggleWekanShortcuts = function (enabled) {
  window.wekanShortcutsEnabled = !!enabled;
 };

 // Example: Wrap your character key shortcut handler like this
-document.addEventListener('keydown', function(e) {
+document.addEventListener('keydown', function (e) {
  // Example: "W" key shortcut (replace with your actual shortcut logic)
  if (!window.wekanShortcutsEnabled) return;
  if (e.key === 'w' || e.key === 'W') {
@@ -516,7 +803,7 @@ document.addEventListener('keydown', function(e) {
 });

 // Keyboard accessibility for card actions (favorite, archive, duplicate, etc.)
-document.addEventListener('keydown', function(e) {
+document.addEventListener('keydown', function (e) {
  if (!window.wekanShortcutsEnabled) return;
  // Only proceed if focus is on a card action element
  const active = document.activeElement;
@@ -561,14 +848,20 @@ document.addEventListener('keydown', function(e) {
      }
    }
  }
-    // Ensure move card buttons are focusable and have ARIA roles
-    document.querySelectorAll('.js-move-card').forEach(function(el) {
-      el.setAttribute('tabindex', '0');
-      el.setAttribute('role', 'button');
-      el.setAttribute('aria-label', 'Move card');
-    });
+  // Ensure move card buttons are focusable and have ARIA roles
+  document.querySelectorAll('.js-move-card').forEach(function (el) {
+    el.setAttribute('tabindex', '0');
+    el.setAttribute('role', 'button');
+    el.setAttribute('aria-label', 'Move card');
+  });
  // Make toggle-buttons, color choices, reactions, and X-buttons keyboard accessible
-  if (active && (active.classList.contains('js-toggle') || active.classList.contains('js-color-choice') || active.classList.contains('js-reaction') || active.classList.contains('close'))) {
+  if (
+    active &&
+    (active.classList.contains('js-toggle') ||
+      active.classList.contains('js-color-choice') ||
+      active.classList.contains('js-reaction') ||
+      active.classList.contains('close'))
+  ) {
    if (e.key === 'Enter' || e.key === ' ') {
      e.preventDefault();
      active.click();
@@ -576,13 +869,21 @@ document.addEventListener('keydown', function(e) {
  }
  // Prevent scripts from removing focus when received
  if (active) {
-    active.addEventListener('focus', function(e) {
-      // Do not remove focus
-      // No-op: This prevents F55 failure
-    }, { once: true });
+    active.addEventListener(
+      'focus',
+      function (e) {
+        // Do not remove focus
+        // No-op: This prevents F55 failure
+      },
+      { once: true },
+    );
  }
  // Make swimlane/list renaming keyboard accessible
-  if (active && (active.classList.contains('js-rename-swimlane') || active.classList.contains('js-rename-list'))) {
+  if (
+    active &&
+    (active.classList.contains('js-rename-swimlane') ||
+      active.classList.contains('js-rename-list'))
+  ) {
    if (e.key === 'Enter') {
      e.preventDefault();
      active.click();
@@ -603,31 +904,52 @@ BlazeComponent.extendComponent({
    document.documentElement.lang = TAPi18n.getLanguage();

    this.autorun(function () {
-      $('#calendar-view').fullCalendar('refetchEvents');
+      const calendarEl = document.getElementById('calendar-view');
+      if (calendarEl && calendarEl._wekanCalendar) {
+        calendarEl._wekanCalendar.refetchEvents();
+      }
    });
  },
  calendarOptions() {
+    const t = (key, fallback) => {
+      const translated = TAPi18n.__(key);
+      return translated && translated !== key ? translated : fallback;
+    };
+
    return {
      id: 'calendar-view',
-      defaultView: 'month',
+      initialView: 'dayGridMonth',
      editable: true,
      selectable: true,
-      timezone: 'local',
      weekNumbers: true,
-      header: {
-          left: 'title   today prev,next',
+      // Use non-localized AM/PM time format to avoid confusing notations like 上/下/中
+      // Use full 'am'/'pm' instead of single-letter 'a'/'p' for clarity
+      eventTimeFormat: {
+        hour: 'numeric',
+        minute: '2-digit',
+        meridiem: 'short',
+      },
+      slotLabelFormat: {
+        hour: 'numeric',
+        minute: '2-digit',
+        meridiem: 'short',
+      },
+      headerToolbar: {
+        left: 'title today prev,next',
        center:
-          'agendaDay,listDay,timelineDay agendaWeek,listWeek,timelineWeek month,listMonth',
+          'timeGridDay,listDay timeGridWeek,listWeek dayGridMonth,listMonth',
        right: '',
      },
-        buttonText: {
-          prev: TAPi18n.__('calendar-previous-month-label'), // e.g. "Previous month"
-          next: TAPi18n.__('calendar-next-month-label'), // e.g. "Next month"
-        },
-        ariaLabel: {
-          prev: TAPi18n.__('calendar-previous-month-label'),
-          next: TAPi18n.__('calendar-next-month-label'),
-        },
+      buttonIcons: false,
+      buttonText: {
+        prev: t('previous', 'Previous'),
+        next: t('next', 'Next'),
+        today: t('today', 'Today'),
+        day: t('day', 'Day'),
+        week: t('week', 'Week'),
+        month: t('month', 'Month'),
+        list: t('list', 'List'),
+      },
      // height: 'parent', nope, doesn't work as the parent might be small
      height: 'auto',
      /* TODO: lists as resources: https://fullcalendar.io/docs/vertical-resource-view */
@@ -635,12 +957,12 @@ BlazeComponent.extendComponent({
      nowIndicator: true,
      businessHours: {
        // days of week. an array of zero-based day of week integers (0=Sunday)
-        dow: [1, 2, 3, 4, 5], // Monday - Friday
+        daysOfWeek: [1, 2, 3, 4, 5], // Monday - Friday
        start: '8:00',
        end: '18:00',
      },
      locale: TAPi18n.getLanguage(),
-      events(start, end, timezone, callback) {
+      events(fetchInfo, callback) {
        const currentBoard = Utils.getCurrentBoard();
        const events = [];
        const pushEvent = function (card, title, start, end, extraCls) {
@@ -666,12 +988,12 @@ BlazeComponent.extendComponent({
          });
        };
        currentBoard
-          .cardsInInterval(start.toDate(), end.toDate())
+          .cardsInInterval(fetchInfo.start, fetchInfo.end)
          .forEach(function (card) {
            pushEvent(card);
          });
        currentBoard
-          .cardsDueInBetween(start.toDate(), end.toDate())
+          .cardsDueInBetween(fetchInfo.start, fetchInfo.end)
          .forEach(function (card) {
            pushEvent(
              card,
@@ -685,36 +1007,36 @@ BlazeComponent.extendComponent({
        });
        callback(events);
      },
-      eventResize(event, delta, revertFunc) {
+      eventResize(info) {
        let isOk = false;
-        const card = ReactiveCache.getCard(event.id);
+        const card = ReactiveCache.getCard(info.event.id);

        if (card) {
-          card.setEnd(event.end.toDate());
+          card.setEnd(info.event.end);
          isOk = true;
        }
        if (!isOk) {
-          revertFunc();
+          info.revert();
        }
      },
-      eventDrop(event, delta, revertFunc) {
+      eventDrop(info) {
        let isOk = false;
-        const card = ReactiveCache.getCard(event.id);
+        const card = ReactiveCache.getCard(info.event.id);
        if (card) {
          // TODO: add a flag for allDay events
-          if (!event.allDay) {
+          if (!info.event.allDay) {
            // https://github.com/wekan/wekan/issues/2917#issuecomment-1236753962
-            //card.setStart(event.start.toDate());
-            //card.setEnd(event.end.toDate());
-            card.setDue(event.start.toDate());
+            //card.setStart(info.event.start);
+            //card.setEnd(info.event.end);
+            card.setDue(info.event.start);
            isOk = true;
          }
        }
        if (!isOk) {
-          revertFunc();
+          info.revert();
        }
      },
-      select: function (startDate) {
+      select: function (selectionInfo) {
        const currentBoard = Utils.getCurrentBoard();
        const currentUser = ReactiveCache.getCurrentUser();
        const modalElement = document.createElement('div');
@@ -726,7 +1048,7 @@ BlazeComponent.extendComponent({
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title">${TAPi18n.__('r-create-card')}</h5>
-              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+              <button type="button" class="close calendar-create-close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
@@ -734,41 +1056,57 @@ BlazeComponent.extendComponent({
              <input type="text" class="form-control" id="card-title-input" placeholder="">
            </div>
            <div class="modal-footer">
-              <button type="button" class="btn btn-primary" id="create-card-button">${TAPi18n.__('add-card')}</button>
+              <button type="button" class="primary confirm" id="create-card-button">${TAPi18n.__('add-card')}</button>
            </div>
          </div>
        </div>
        `;
-        const createCardButton = modalElement.querySelector('#create-card-button');
+        const createCardButton = modalElement.querySelector(
+          '#create-card-button',
+        );
        createCardButton.addEventListener('click', function () {
          const myTitle = modalElement.querySelector('#card-title-input').value;
          if (myTitle) {
            const firstList = currentBoard.draggableLists()[0];
            const firstSwimlane = currentBoard.swimlanes()[0];
-            Meteor.call('createCardWithDueDate', currentBoard._id, firstList._id, myTitle, startDate.toDate(), firstSwimlane._id, function(error, result) {
-              if (error) {
-                console.log(error);
-              } else {
-                console.log("Card Created", result);
-              }
-            });
+            Meteor.call(
+              'createCardWithDueDate',
+              currentBoard._id,
+              firstList._id,
+              myTitle,
+              selectionInfo.start,
+              firstSwimlane._id,
+              function (error, result) {
+                if (error) {
+                  if (process.env.DEBUG === 'true') {
+                    console.log(error);
+                  }
+                } else {
+                  if (process.env.DEBUG === 'true') {
+                    console.log('Card Created', result);
+                  }
+                }
+              },
+            );
            closeModal();
          }
        });
        document.body.appendChild(modalElement);
-        const openModal = function() {
+        const openModal = function () {
          modalElement.style.display = 'flex';
          // Set focus to the input field for better keyboard accessibility
          const input = modalElement.querySelector('#card-title-input');
          if (input) input.focus();
        };
-        const closeModal = function() {
+        const closeModal = function () {
          modalElement.style.display = 'none';
        };
-        const closeButton = modalElement.querySelector('[data-dismiss="modal"]');
+        const closeButton = modalElement.querySelector(
+          '[data-dismiss="modal"]',
+        );
        closeButton.addEventListener('click', closeModal);
        openModal();
-      }
+      },
    };
  },
  isViewCalendar() {
@@ -780,3 +1118,7 @@ BlazeComponent.extendComponent({
    }
  },
 }).register('calendarView');
+/**
+ * Gantt View Component
+ * Displays cards as a Gantt chart with start/due dates
+ */
@@ -49,6 +49,12 @@ THEME - NEPHRITIS
  border-bottom: 2px solid #27ae60;
  border-right: 2px solid #27ae60;
 }
+.board-color-nephritis .checklist-progress-bar {
+  background-color: #d4f1dd !important;
+}
+.board-color-nephritis .checklist-progress-bar .checklist-progress {
+  background-color: #27ae60 !important;
+}
 .board-color-nephritis .is-multiselection-active .multi-selection-checkbox.is-checked + .minicard {
  background: #e7faef;
 }
@@ -150,6 +156,12 @@ THEME - Pomegranate
  border-bottom: 2px solid #c0392b;
  border-right: 2px solid #c0392b;
 }
+.board-color-pomegranate .checklist-progress-bar {
+  background-color: #f5d5d2 !important;
+}
+.board-color-pomegranate .checklist-progress-bar .checklist-progress {
+  background-color: #c0392b !important;
+}
 .board-color-pomegranate .is-multiselection-active .multi-selection-checkbox.is-checked + .minicard {
  background: #faeae9;
 }
@@ -251,6 +263,12 @@ THEME - Belize
  border-bottom: 2px solid #2980b9;
  border-right: 2px solid #2980b9;
 }
+.board-color-belize .checklist-progress-bar {
+  background-color: #d1e7f5 !important;
+}
+.board-color-belize .checklist-progress-bar .checklist-progress {
+  background-color: #2980b9 !important;
+}
 .board-color-belize .is-multiselection-active .multi-selection-checkbox.is-checked + .minicard {
  background: #e8f3fa;
 }
@@ -352,6 +370,12 @@ THEME - Wisteria
  border-bottom: 2px solid #8e44ad;
  border-right: 2px solid #8e44ad;
 }
+.board-color-wisteria .checklist-progress-bar {
+  background-color: #e8d9f0 !important;
+}
+.board-color-wisteria .checklist-progress-bar .checklist-progress {
+  background-color: #8e44ad !important;
+}
 .board-color-wisteria .is-multiselection-active .multi-selection-checkbox.is-checked + .minicard {
  background: #f4ecf7;
 }
@@ -453,6 +477,12 @@ THEME - Midnight
  border-bottom: 2px solid #2c3e50;
  border-right: 2px solid #2c3e50;
 }
+.board-color-midnight .checklist-progress-bar {
+  background-color: #d2dae2 !important;
+}
+.board-color-midnight .checklist-progress-bar .checklist-progress {
+  background-color: #2c3e50 !important;
+}
 .board-color-midnight .is-multiselection-active .multi-selection-checkbox.is-checked + .minicard {
  background: #e6ecf1;
 }
@@ -554,6 +584,12 @@ THEME - Pumpkin
  border-bottom: 2px solid #e67e22;
  border-right: 2px solid #e67e22;
 }
+.board-color-pumpkin .checklist-progress-bar {
+  background-color: #f9e5d1 !important;
+}
+.board-color-pumpkin .checklist-progress-bar .checklist-progress {
+  background-color: #e67e22 !important;
+}
 .board-color-pumpkin .is-multiselection-active .multi-selection-checkbox.is-checked + .minicard {
  background: #fdf2e9;
 }
@@ -655,6 +691,12 @@ THEME - Moderate Pink
  border-bottom: 2px solid #cd5a91;
  border-right: 2px solid #cd5a91;
 }
+.board-color-moderatepink .checklist-progress-bar {
+  background-color: #f4dde8 !important;
+}
+.board-color-moderatepink .checklist-progress-bar .checklist-progress {
+  background-color: #cd5a91 !important;
+}
 .board-color-moderatepink .is-multiselection-active .multi-selection-checkbox.is-checked + .minicard {
  background: #faeef4;
 }
@@ -756,6 +798,12 @@ THEME - Strong Cyan
  border-bottom: 2px solid #00aecc;
  border-right: 2px solid #00aecc;
 }
+.board-color-strongcyan .checklist-progress-bar {
+  background-color: #ccf2f9 !important;
+}
+.board-color-strongcyan .checklist-progress-bar .checklist-progress {
+  background-color: #00aecc !important;
+}
 .board-color-strongcyan .is-multiselection-active .multi-selection-checkbox.is-checked + .minicard {
  background: #e0fbff;
 }
@@ -857,6 +905,12 @@ THEME - Lime Green
  border-bottom: 2px solid #4bbf6b;
  border-right: 2px solid #4bbf6b;
 }
+.board-color-limegreen .checklist-progress-bar {
+  background-color: #daf4de !important;
+}
+.board-color-limegreen .checklist-progress-bar .checklist-progress {
+  background-color: #4bbf6b !important;
+}
 .board-color-limegreen .is-multiselection-active .multi-selection-checkbox.is-checked + .minicard {
  background: #edf9f0;
 }
@@ -959,6 +1013,12 @@ THEME - Dark
  border-bottom: 2px solid #2c3e51;
  border-right: 2px solid #2c3e51;
 }
+.board-color-dark .checklist-progress-bar {
+  background-color: #d2dae2 !important;
+}
+.board-color-dark .checklist-progress-bar .checklist-progress {
+  background-color: #2c3e51 !important;
+}
 .board-color-dark .is-multiselection-active .multi-selection-checkbox.is-checked + .minicard {
  background: #e6ecf1;
 }
@@ -1162,6 +1222,12 @@ THEME - Relax
  border-bottom: 2px solid #27ae61;
  border-right: 2px solid #27ae61;
 }
+.board-color-relax .checklist-progress-bar {
+  background-color: #d4f1dd !important;
+}
+.board-color-relax .checklist-progress-bar .checklist-progress {
+  background-color: #27ae61 !important;
+}
 .board-color-relax .is-multiselection-active .multi-selection-checkbox.is-checked + .minicard {
  background: #e7faef;
 }
@@ -1292,6 +1358,12 @@ THEME - Corteza
  border-bottom: 2px solid #568ba2;
  border-right: 2px solid #568ba2;
 }
+.board-color-corteza .checklist-progress-bar {
+  background-color: #dce6ec !important;
+}
+.board-color-corteza .checklist-progress-bar .checklist-progress {
+  background-color: #568ba2 !important;
+}
 .board-color-corteza .is-multiselection-active .multi-selection-checkbox.is-checked + .minicard {
  background: #eef3f6;
 }
@@ -1397,6 +1469,12 @@ THEME - Clear Blue
  border-bottom: 2px solid #499bea;
  border-right: 2px solid #499bea;
 }
+.board-color-clearblue .checklist-progress-bar {
+  background-color: #daeefb !important;
+}
+.board-color-clearblue .checklist-progress-bar .checklist-progress {
+  background-color: #499bea !important;
+}
 .board-color-clearblue .is-multiselection-active .multi-selection-checkbox.is-checked + .minicard {
  background: #e0fbff;
 }
@@ -1425,7 +1503,7 @@ THEME - Clear Blue
 }
 .board-color-clearblue .list {
  background: rgba(255,255,255,0.35);
-  margin: 10px;
+  margin: 10px 0;
  border: 0;
  border-radius: 14px;
 }
@@ -1660,6 +1738,12 @@ THEME - Natural
  border-bottom: 2px solid #596557;
  border-right: 2px solid #596557;
 }
+.board-color-natural .checklist-progress-bar {
+  background-color: #dee0dd !important;
+}
+.board-color-natural .checklist-progress-bar .checklist-progress {
+  background-color: #596557 !important;
+}
 .board-color-natural .is-multiselection-active .multi-selection-checkbox.is-checked + .minicard {
  background: #eef0ee;
 }
@@ -1770,6 +1854,12 @@ THEME - Modern
  border-bottom: 2px solid #2a80b8;
  border-right: 2px solid #2a80b8;
 }
+.board-color-modern .checklist-progress-bar {
+  background-color: #d1e7f5 !important;
+}
+.board-color-modern .checklist-progress-bar .checklist-progress {
+  background-color: #2a80b8 !important;
+}
 .board-color-modern .is-multiselection-active .multi-selection-checkbox.is-checked + .minicard {
  background: #e8f3fa;
 }
@@ -2062,6 +2152,12 @@ THEME - Modern Dark
  border-bottom: 2px solid #2a2a2a;
  border-right: 2px solid #2a2a2a;
 }
+.board-color-moderndark .checklist-progress-bar {
+  background-color: #d1d1d1 !important;
+}
+.board-color-moderndark .checklist-progress-bar .checklist-progress {
+  background-color: #2a2a2a !important;
+}
 .board-color-moderndark .is-multiselection-active .multi-selection-checkbox.is-checked + .minicard {
  background: #eaeaea;
 }
@@ -2547,6 +2643,12 @@ THEME - Exodark
  border-bottom: 2px solid #dbdbdb!important;/*Fix contrast of checkbox*/
  border-right: 2px solid #dbdbdb!important;
 }
+.board-color-exodark .checklist-progress-bar {
+  background-color: #cccccc !important;
+}
+.board-color-exodark .checklist-progress-bar .checklist-progress {
+  background-color: #222 !important;
+}
 .board-color-exodark .is-multiselection-active .multi-selection-checkbox.is-checked + .minicard {
  background: #e9e9e9;
 }
@@ -2588,7 +2690,7 @@ THEME - Exodark
  background: #222;
 }
 .board-color-exodark .list {
-  margin: 10px;
+  margin: 10px 0;
  color: #fff;
  border-radius: 15px;
  background-color: #1c1c1c;
@@ -3140,6 +3242,12 @@ THEME - Clean Dark
  margin-left: 3px;
  margin-top: 3px;
 }
+.board-color-cleandark .checklist-progress-bar {
+  background-color: #6b6b78 !important;
+}
+.board-color-cleandark .checklist-progress-bar .checklist-progress {
+  background-color: #23232B !important;
+}

 .board-color-cleandark .allBoards {
  white-space: nowrap;
@@ -3892,6 +4000,13 @@ THEME - Clean Light
  margin-left: 3px;
  margin-top: 3px;
 }
+.board-color-cleanlight .checklist-progress-bar {
+  background-color: #f5f5f5 !important;
+}
+.board-color-cleanlight .checklist-progress-bar .checklist-progress {
+  background-color: #c0c0c0 !important;
+  color: #010101 !important;
+}

 .board-color-cleanlight .allBoards {
  white-space: nowrap;
@@ -1,5 +1,5 @@
 .integration-form {
-  padding: 5px;
+  padding: 0.7vh 0.7vw;
  border-bottom: 1px solid #ccc;
 }
 .flex,
@@ -12,12 +12,928 @@
  display: flex;
 }
 .option {
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
+  -webkit-border-radius: 0.4vw;
+  border-radius: 0.4vw;
  background: #fff;
  text-decoration: none;
-  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.2);
-  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
-  margin-top: 5px;
-  padding: 5px;
+  -webkit-box-shadow: 0 0.2vh 0.3vh rgba(0,0,0,0.2);
+  box-shadow: 0 0.2vh 0.3vh rgba(0,0,0,0.2);
+  margin-top: 0.7vh;
+  padding: 0.7vh 0.7vw;
+}
+
+/* Zoom and Mobile Mode Controls */
+.board-header-btns.center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 1;
+}
+
+.zoom-controls {
+  display: flex;
+  align-items: center;
+  gap: 0.5vw;
+  background: rgba(255, 255, 255, 0.9);
+  padding: 0.5vh 1vw;
+  border-radius: 0.5vw;
+  box-shadow: 0 0.2vh 0.5vh rgba(0,0,0,0.1);
+}
+
+.zoom-controls .board-header-btn {
+  padding: 0.5vh 0.8vw !important;
+  border-radius: 0.3vw !important;
+  background: #fff !important;
+  border: 1px solid #000 !important;
+  transition: all 0.2s ease !important;
+  color: #000 !important;
+  height: auto !important;
+  line-height: normal !important;
+  margin: 0 !important;
+  float: none !important;
+  overflow: visible !important;
+}
+
+.zoom-controls .board-header-btn i {
+  color: #000 !important;
+  float: none !important;
+  display: inline !important;
+  line-height: normal !important;
+  margin: 0 !important;
+}
+
+.zoom-controls .board-header-btn:hover {
+  background: #000 !important;
+  border-color: #000 !important;
+  color: #fff !important;
+}
+
+.zoom-controls .board-header-btn:hover i {
+  color: #fff !important;
+}
+
+.zoom-controls .board-header-btn.is-active {
+  background: #0079bf;
+  color: white;
+  border-color: #005a8a;
+}
+
+.zoom-controls .board-header-btn.is-active i {
+  color: white;
+}
+
+.zoom-level {
+  font-weight: bold;
+  color: #333;
+  min-width: 3vw;
+  text-align: center;
+  font-size: clamp(12px, 2vw, 14px);
+  cursor: pointer;
+  padding: 0.3vh 0.5vw;
+  border-radius: 0.3vw;
+  transition: all 0.2s ease;
+}
+
+.zoom-level:hover {
+  background: #f0f0f0;
+  color: #000;
+}
+
+/* Mobile Mode Styles */
+.mobile-mode .board-wrapper {
+  width: 100%;
+  height: 100%;
+}
+
+.mobile-mode .board-canvas {
+  height: 100%;
+}
+
+.mobile-mode .minicard {
+  font-size: clamp(16px, 4vw, 20px);
+  padding: 1.2vh 1.5vw 0.5vh;
+  min-height: 3vh;
+}
+
+.mobile-mode .list-header-name {
+  font-size: clamp(18px, 4.5vw, 24px);
+}
+
+.mobile-mode .board-header-btn {
+  padding: 1vh 1.5vw;
+  font-size: clamp(14px, 3.5vw, 18px);
+}
+
+.mobile-mode .zoom-controls {
+  padding: 1vh 1.5vw;
+  gap: 1vw;
+}
+
+.mobile-mode .zoom-controls .board-header-btn {
+  padding: 1vh 1.5vw !important;
+  font-size: clamp(14px, 3.5vw, 18px) !important;
+  background: #fff !important;
+  border: 1px solid #000 !important;
+  color: #000 !important;
+  height: auto !important;
+  line-height: normal !important;
+  margin: 0 !important;
+  float: none !important;
+  overflow: visible !important;
+}
+
+.mobile-mode .zoom-controls .board-header-btn i {
+  color: #000 !important;
+  float: none !important;
+  display: inline !important;
+  line-height: normal !important;
+  margin: 0 !important;
+}
+
+.mobile-mode .zoom-controls .board-header-btn:hover {
+  background: #000 !important;
+  border-color: #000 !important;
+  color: #fff !important;
+}
+
+.mobile-mode .zoom-controls .board-header-btn:hover i {
+  color: #fff !important;
+}
+
+.mobile-mode .zoom-level {
+  font-size: clamp(14px, 3.5vw, 18px);
+  min-width: 4vw;
+}
+
+/* Comprehensive Mobile Mode Styles - Works on all screen sizes */
+.mobile-mode .board-wrapper {
+  width: 100% !important;
+  height: 100% !important;
+  transform: none !important;
+  transform-origin: initial !important;
+  max-width: 100% !important;
+}
+
+.mobile-mode .board-canvas {
+  height: 100% !important;
+  overflow-x: hidden !important;
+  overflow-y: auto !important;
+  width: 100% !important;
+  max-width: 100% !important;
+}
+
+.mobile-mode .swimlane {
+  width: 100% !important;
+  min-width: 100% !important;
+  max-width: 100% !important;
+  margin-bottom: 2rem !important;
+  display: block !important;
+  float: none !important;
+}
+
+.mobile-mode .swimlane-header {
+  width: 100% !important;
+  min-width: 100% !important;
+  max-width: 100% !important;
+  font-size: clamp(18px, 2.5vw, 32px) !important;
+  padding: 1rem !important;
+  margin-bottom: 1rem !important;
+  display: block !important;
+}
+
+.mobile-mode .list {
+  width: 100% !important;
+  min-width: 100% !important;
+  max-width: 100% !important;
+  display: block !important;
+  float: none !important;
+  margin-bottom: 2rem !important;
+  border-left: none !important;
+  border-bottom: 2px solid #ccc !important;
+  clear: both !important;
+}
+
+.mobile-mode .list-header {
+  width: 100% !important;
+  min-width: 100% !important;
+  max-width: 100% !important;
+  padding: 1rem !important;
+  font-size: clamp(18px, 2.5vw, 32px) !important;
+  display: grid !important;
+  grid-template-columns: 30px 1fr auto auto !important;
+  gap: 10px !important;
+  align-items: center !important;
+  position: relative !important;
+}
+
+.mobile-mode .list-header .list-header-name {
+  font-size: clamp(18px, 2.5vw, 32px) !important;
+  font-weight: bold !important;
+  grid-row: 1 !important;
+  grid-column: 2 !important;
+  align-self: end !important;
+  display: block !important;
+  visibility: visible !important;
+  opacity: 1 !important;
+}
+
+.mobile-mode .list-header .cardCount {
+  font-size: clamp(14px, 2vw, 24px) !important;
+  grid-row: 2 !important;
+  grid-column: 2 !important;
+  align-self: start !important;
+  display: block !important;
+  visibility: visible !important;
+  opacity: 1 !important;
+}
+
+.mobile-mode .list-header .list-header-menu-icon {
+  position: static !important;
+  right: auto !important;
+  top: auto !important;
+  transform: none !important;
+  grid-row: 1/3 !important;
+  grid-column: 3 !important;
+  padding: 14px !important;
+  font-size: clamp(24px, 3vw, 48px) !important;
+  text-align: center !important;
+  display: block !important;
+  visibility: visible !important;
+  opacity: 1 !important;
+}
+
+.mobile-mode .list-header .list-header-handle {
+  position: static !important;
+  right: auto !important;
+  top: auto !important;
+  transform: none !important;
+  grid-row: 1/3 !important;
+  grid-column: 4 !important;
+  padding: 14px !important;
+  font-size: clamp(28px, 3.5vw, 56px) !important;
+  text-align: center !important;
+  display: block !important;
+  visibility: visible !important;
+  opacity: 1 !important;
+}
+
+.mobile-mode .list-body {
+  width: 100% !important;
+  min-width: 100% !important;
+  max-width: 100% !important;
+  padding: 1rem !important;
+  display: block !important;
+}
+
+.mobile-mode .minicard {
+  width: 100% !important;
+  min-width: 100% !important;
+  max-width: 100% !important;
+  font-size: clamp(16px, 2vw, 24px) !important;
+  padding: 1.2vh 1.5vw 0.5vh !important;
+  min-height: 3vh !important;
+  margin-bottom: 0.5rem !important;
+  display: block !important;
+  float: none !important;
+}
+
+.mobile-mode .minicard .minicard-title {
+  font-size: clamp(16px, 2vw, 24px) !important;
+  font-weight: bold !important;
+}
+
+.mobile-mode .minicard .minicard-members {
+  font-size: clamp(12px, 1.5vw, 18px) !important;
+}
+
+.mobile-mode .minicard .minicard-lists {
+  font-size: clamp(12px, 1.5vw, 18px) !important;
+}
+
+/* Desktop Mode Styles */
+.desktop-mode .board-wrapper {
+  width: auto !important;
+  height: auto !important;
+}
+
+.desktop-mode .swimlane {
+  width: auto !important;
+  min-width: auto !important;
+}
+
+.desktop-mode .list {
+  width: auto !important;
+  min-width: auto !important;
+  display: flex !important;
+  float: left !important;
+  margin-bottom: 0 !important;
+  border-left: 1px solid #ccc !important;
+  border-bottom: none !important;
+}
+
+.desktop-mode .list-header {
+  width: auto !important;
+  min-width: auto !important;
+  padding: 2.5vh 1.5vw 0.5vh !important;
+  font-size: clamp(14px, 3vw, 18px) !important;
+  display: block !important;
+}
+
+.desktop-mode .list-header .list-header-name {
+  font-size: clamp(14px, 3vw, 18px) !important;
+  display: inline !important;
+  grid-row: auto !important;
+  grid-column: auto !important;
+  align-self: auto !important;
+}
+
+.desktop-mode .list-header .cardCount {
+  font-size: 12px !important;
+  grid-row: auto !important;
+  grid-column: auto !important;
+  align-self: auto !important;
+}
+
+.desktop-mode .list-header .list-header-menu-icon {
+  position: absolute !important;
+  right: 60px !important;
+  top: 50% !important;
+  transform: translateY(-50%) !important;
+  grid-row: auto !important;
+  grid-column: auto !important;
+  padding: 14px !important;
+  font-size: 40px !important;
+}
+
+.desktop-mode .list-header .list-header-handle {
+  position: absolute !important;
+  right: 10px !important;
+  top: 50% !important;
+  transform: translateY(-50%) !important;
+  grid-row: auto !important;
+  grid-column: auto !important;
+  padding: 7px !important;
+  font-size: clamp(16px, 3vw, 20px) !important;
+}
+
+.desktop-mode .list-body {
+  width: auto !important;
+  min-width: auto !important;
+  padding: 5px 11px !important;
+}
+
+.desktop-mode .minicard {
+  width: auto !important;
+  min-width: auto !important;
+  font-size: clamp(12px, 2.5vw, 16px) !important;
+  padding: 0.5vh 0.8vw !important;
+  min-height: auto !important;
+  margin-bottom: 9px !important;
+}
+
+.desktop-mode .minicard .minicard-title {
+  font-size: clamp(12px, 2.5vw, 16px) !important;
+}
+
+.desktop-mode .minicard .minicard-members {
+  font-size: 10px !important;
+}
+
+.desktop-mode .minicard .minicard-lists {
+  font-size: 10px !important;
+}
+
+/* Additional Mobile Mode Styles for Other Elements - Works on all screen sizes */
+.mobile-mode .swimlane-header .swimlane-title {
+  font-size: clamp(18px, 2.5vw, 32px) !important;
+  font-weight: bold !important;
+  display: block !important;
+  visibility: visible !important;
+  opacity: 1 !important;
+}
+
+.mobile-mode .swimlane-header .swimlane-description {
+  font-size: clamp(14px, 2vw, 24px) !important;
+  display: block !important;
+  visibility: visible !important;
+  opacity: 1 !important;
+}
+
+.mobile-mode .board-header {
+  font-size: clamp(18px, 2.5vw, 32px) !important;
+  padding: 1rem !important;
+  width: 100% !important;
+  max-width: 100% !important;
+}
+
+.mobile-mode .board-header .board-header-title {
+  font-size: clamp(18px, 2.5vw, 32px) !important;
+  font-weight: bold !important;
+  display: block !important;
+  visibility: visible !important;
+  opacity: 1 !important;
+}
+
+.mobile-mode .board-header .board-header-description {
+  font-size: clamp(14px, 2vw, 24px) !important;
+  display: block !important;
+  visibility: visible !important;
+  opacity: 1 !important;
+}
+
+.mobile-mode .board-header .board-header-btn {
+  font-size: clamp(14px, 2vw, 24px) !important;
+  padding: 1vh 1.5vw !important;
+  display: inline-block !important;
+  visibility: visible !important;
+  opacity: 1 !important;
+}
+
+.mobile-mode .board-header .board-header-btn i {
+  font-size: clamp(14px, 2vw, 24px) !important;
+  display: inline !important;
+  visibility: visible !important;
+  opacity: 1 !important;
+}
+
+/* Force mobile mode visibility on all screen sizes */
+.mobile-mode .list-header .fa-angle-right,
+.mobile-mode .list-header .fa-arrows {
+  display: block !important;
+  visibility: visible !important;
+  opacity: 1 !important;
+  position: static !important;
+  right: auto !important;
+  top: auto !important;
+  transform: none !important;
+}
+
+.mobile-mode .list-header .fa-angle-right {
+  grid-row: 1/3 !important;
+  grid-column: 3 !important;
+  padding: 14px !important;
+  font-size: clamp(24px, 3vw, 48px) !important;
+  text-align: center !important;
+}
+
+.mobile-mode .list-header .fa-arrows {
+  grid-row: 1/3 !important;
+  grid-column: 4 !important;
+  padding: 14px !important;
+  font-size: clamp(28px, 3.5vw, 56px) !important;
+  text-align: center !important;
+}
+
+/* Override any media queries that might hide elements in mobile mode */
+.mobile-mode * {
+  max-width: none !important;
+}
+
+.mobile-mode .list,
+.mobile-mode .swimlane,
+.mobile-mode .board-wrapper,
+.mobile-mode .board-canvas {
+  max-width: 100% !important;
+  width: 100% !important;
+  min-width: 100% !important;
+}
+
+/* Force mobile mode list styling on all screen sizes - override desktop CSS */
+.mobile-mode .board-canvas {
+  display: block !important;
+  flex-direction: column !important;
+  flex-wrap: nowrap !important;
+  align-items: stretch !important;
+  justify-content: flex-start !important;
+  width: 100vw !important;
+  max-width: 100vw !important;
+  min-width: 100vw !important;
+  overflow-x: hidden !important;
+  overflow-y: auto !important;
+}
+
+  .mobile-mode .swimlane {
+    display: block !important;
+    width: 100vw !important;
+    max-width: 100vw !important;
+    min-width: 100vw !important;
+    margin: 0 0 2rem 0 !important;
+    padding: 0 !important;
+    float: none !important;
+    clear: both !important;
+  }
+
+  .mobile-mode .swimlane .swimlane-header {
+    display: block !important;
+    width: 100vw !important;
+    max-width: 100vw !important;
+    min-width: 100vw !important;
+    margin: 0 0 1rem 0 !important;
+    padding: 1rem !important;
+    font-size: clamp(18px, 2.5vw, 32px) !important;
+    font-weight: bold !important;
+    border-bottom: 2px solid #ccc !important;
+  }
+
+  .mobile-mode .swimlane .lists {
+    display: block !important;
+    width: 100vw !important;
+    max-width: 100vw !important;
+    min-width: 100vw !important;
+    margin: 0 !important;
+    padding: 0 !important;
+    flex-direction: column !important;
+    flex-wrap: nowrap !important;
+    align-items: stretch !important;
+    justify-content: flex-start !important;
+  }
+
+  .mobile-mode .list {
+    display: block !important;
+    width: 100vw !important;
+    max-width: 100vw !important;
+    min-width: 100vw !important;
+    margin: 0 0 2rem 0 !important;
+    padding: 0 !important;
+    float: none !important;
+    clear: both !important;
+    border-left: none !important;
+    border-right: none !important;
+    border-top: none !important;
+    border-bottom: 2px solid #ccc !important;
+    flex: none !important;
+    flex-basis: auto !important;
+    flex-grow: 0 !important;
+    flex-shrink: 0 !important;
+    position: static !important;
+    left: auto !important;
+    right: auto !important;
+    top: auto !important;
+    bottom: auto !important;
+    transform: none !important;
+  }
+
+.mobile-mode .list:first-child {
+  margin-left: 0 !important;
+  margin-top: 0 !important;
+}
+
+.mobile-mode .list:last-child {
+  margin-right: 0 !important;
+  margin-bottom: 0 !important;
+}
+
+.mobile-mode .list.ui-sortable-helper {
+  display: block !important;
+  width: 100% !important;
+  max-width: 100% !important;
+  min-width: 100% !important;
+  height: auto !important;
+  min-height: 60px !important;
+  margin: 0 0 2rem 0 !important;
+  padding: 0 !important;
+  float: none !important;
+  clear: both !important;
+  border-left: none !important;
+  border-right: none !important;
+  border-top: none !important;
+  border-bottom: 2px solid #ccc !important;
+  flex: none !important;
+}
+
+.mobile-mode .list.placeholder {
+  display: block !important;
+  width: 100% !important;
+  max-width: 100% !important;
+  min-width: 100% !important;
+  height: auto !important;
+  min-height: 60px !important;
+  margin: 0 0 2rem 0 !important;
+  padding: 0 !important;
+  float: none !important;
+  clear: both !important;
+  border-left: none !important;
+  border-right: none !important;
+  border-top: none !important;
+  border-bottom: 2px solid #ccc !important;
+  flex: none !important;
+}
+
+/* Override any existing responsive CSS that might interfere with mobile mode */
+.mobile-mode .board-canvas .swimlane .lists {
+  display: block !important;
+  width: 100% !important;
+  max-width: 100% !important;
+  min-width: 100% !important;
+  margin: 0 !important;
+  padding: 0 !important;
+  flex-direction: column !important;
+  flex-wrap: nowrap !important;
+  align-items: stretch !important;
+  justify-content: flex-start !important;
+  overflow: visible !important;
+}
+
+.mobile-mode .board-canvas .swimlane .lists .list {
+  display: block !important;
+  width: 100% !important;
+  max-width: 100% !important;
+  min-width: 100% !important;
+  margin: 0 0 2rem 0 !important;
+  padding: 0 !important;
+  float: none !important;
+  clear: both !important;
+  border-left: none !important;
+  border-right: none !important;
+  border-top: none !important;
+  border-bottom: 2px solid #ccc !important;
+  flex: none !important;
+  flex-basis: auto !important;
+  flex-grow: 0 !important;
+  flex-shrink: 0 !important;
+  position: static !important;
+  left: auto !important;
+  right: auto !important;
+  top: auto !important;
+  bottom: auto !important;
+  transform: none !important;
+}
+
+/* Force mobile mode to override any media query styles */
+@media screen and (min-width: 801px) {
+  .mobile-mode .board-canvas {
+    display: block !important;
+    flex-direction: column !important;
+    flex-wrap: nowrap !important;
+    align-items: stretch !important;
+    justify-content: flex-start !important;
+    width: 100vw !important;
+    max-width: 100vw !important;
+    min-width: 100vw !important;
+    overflow-x: hidden !important;
+    overflow-y: auto !important;
+  }
+
+  .mobile-mode .swimlane {
+    display: block !important;
+    width: 100% !important;
+    max-width: 100% !important;
+    min-width: 100% !important;
+    margin: 0 0 2rem 0 !important;
+    padding: 0 !important;
+    float: none !important;
+    clear: both !important;
+  }
+
+  .mobile-mode .swimlane .lists {
+    display: block !important;
+    width: 100% !important;
+    max-width: 100% !important;
+    min-width: 100% !important;
+    margin: 0 !important;
+    padding: 0 !important;
+    flex-direction: column !important;
+    flex-wrap: nowrap !important;
+    align-items: stretch !important;
+    justify-content: flex-start !important;
+  }
+
+  .mobile-mode .list {
+    display: block !important;
+    width: 100% !important;
+    max-width: 100% !important;
+    min-width: 100% !important;
+    margin: 0 0 2rem 0 !important;
+    padding: 0 !important;
+    float: none !important;
+    clear: both !important;
+    border-left: none !important;
+    border-right: none !important;
+    border-top: none !important;
+    border-bottom: 2px solid #ccc !important;
+    flex: none !important;
+    flex-basis: auto !important;
+    flex-grow: 0 !important;
+    flex-shrink: 0 !important;
+    position: static !important;
+    left: auto !important;
+    right: auto !important;
+    top: auto !important;
+    bottom: auto !important;
+    transform: none !important;
+  }
+}
+
+/* Hide desktop-only elements in mobile mode (like mobile media queries do) */
+.mobile-mode .board-header-btn i.fa + span {
+  display: none !important;
+}
+
+.mobile-mode .board-header-btn span {
+  display: none !important;
+}
+
+.mobile-mode .board-header-btn .fa + span {
+  display: none !important;
+}
+
+.mobile-mode .board-header-btn .fa + .board-header-btn-text {
+  display: none !important;
+}
+
+.mobile-mode .board-header-btn .fa + .board-header-btn-label {
+  display: none !important;
+}
+
+/* Show only icons in mobile mode */
+.mobile-mode .board-header-btn {
+  width: auto !important;
+  min-width: auto !important;
+  padding: 8px !important;
+  text-align: center !important;
+}
+
+.mobile-mode .board-header-btn i {
+  display: inline-block !important;
+  margin: 0 !important;
+}
+
+/* Hide desktop-specific elements that shouldn't show in mobile mode */
+.mobile-mode .desktop-only,
+.mobile-mode .board-header .desktop-only {
+  display: none !important;
+}
+
+.mobile-mode .board-header .board-header-btn.desktop-only {
+  display: none !important;
+}
+
+/* Hide desktop-specific board header buttons in mobile mode */
+.mobile-mode .board-header-btns.left {
+  display: none !important;
+}
+
+.mobile-mode .board-header-btns.center {
+  display: none !important;
+}
+
+/* Show only the right section buttons in mobile mode, but hide text labels */
+.mobile-mode .board-header-btns.right {
+  display: block !important;
+}
+
+.mobile-mode .board-header-btns.right .board-header-btn span {
+  display: none !important;
+}
+
+.mobile-mode .board-header-btns.right .board-header-btn .fa + span {
+  display: none !important;
+}
+
+.mobile-mode .board-header-btns.right .board-header-btn .fa + .board-header-btn-text {
+  display: none !important;
+}
+
+.mobile-mode .board-header-btns.right .board-header-btn .fa + .board-header-btn-label {
+  display: none !important;
+}
+
+/* Hide specific desktop-only buttons that shouldn't show in mobile mode */
+.mobile-mode .board-header-btn.js-star-board span,
+.mobile-mode .board-header-btn.js-change-visibility span,
+.mobile-mode .board-header-btn.js-watch-board span,
+.mobile-mode .board-header-btn.js-sort-cards span {
+  display: none !important;
+}
+
+/* Show only icons for mobile mode buttons */
+.mobile-mode .board-header-btns.right .board-header-btn {
+  width: auto !important;
+  min-width: auto !important;
+  padding: 8px !important;
+  text-align: center !important;
+  margin: 0 2px !important;
+}
+
+.mobile-mode .board-header-btns.right .board-header-btn i {
+  display: inline-block !important;
+  margin: 0 !important;
+}
+
+/* Ensure mobile mode looks like small screen mobile view */
+.mobile-mode .board-header {
+  height: 40px !important;
+}
+
+.mobile-mode .board-header .board-header-btns {
+  margin-top: 0px !important;
+}
+
+.mobile-mode .board-header .board-header-btn {
+  height: 32px !important;
+  line-height: 32px !important;
+  font-size: 15px !important;
+}
+
+.mobile-mode .board-header .board-header-btn i.fa {
+  line-height: 32px !important;
+}
+
+/* Copy mobile media query styles to mobile mode for consistent appearance */
+.mobile-mode .board-header {
+  height: 40px !important;
+  padding: 0 !important;
+  margin: 0 !important;
+}
+
+.mobile-mode .board-header .board-header-btns {
+  margin-top: 0px !important;
+  height: 40px !important;
+  display: flex !important;
+  align-items: center !important;
+  justify-content: flex-end !important;
+}
+
+.mobile-mode .board-header .board-header-btn {
+  height: 32px !important;
+  line-height: 32px !important;
+  font-size: 15px !important;
+  margin: 0 2px !important;
+  padding: 4px 8px !important;
+  border-radius: 4px !important;
+  background: rgba(255, 255, 255, 0.1) !important;
+  border: 1px solid rgba(255, 255, 255, 0.2) !important;
+  color: #fff !important;
+  text-decoration: none !important;
+  display: inline-flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  min-width: 32px !important;
+  width: auto !important;
+}
+
+.mobile-mode .board-header .board-header-btn:hover {
+  background: rgba(255, 255, 255, 0.2) !important;
+  border-color: rgba(255, 255, 255, 0.3) !important;
+}
+
+.mobile-mode .board-header .board-header-btn i.fa {
+  line-height: 32px !important;
+  font-size: 15px !important;
+  margin: 0 !important;
+  padding: 0 !important;
+}
+
+.mobile-mode .board-header .board-header-btn i.fa + span {
+  display: none !important;
+}
+
+.mobile-mode .board-header .board-header-btn span {
+  display: none !important;
+}
+
+/* Hide the board title in mobile mode to match mobile view */
+.mobile-mode .header-board-menu {
+  display: none !important;
+}
+
+/* Ensure the board header takes full width in mobile mode */
+.mobile-mode .board-header {
+  width: 100% !important;
+  max-width: 100% !important;
+  display: flex !important;
+  align-items: center !important;
+  justify-content: space-between !important;
+  padding: 0 10px !important;
+}
+
+/* Additional Desktop Mode Styles for Other Elements */
+.desktop-mode .swimlane-header .swimlane-title {
+  font-size: clamp(14px, 3vw, 18px) !important;
+}
+
+.desktop-mode .swimlane-header .swimlane-description {
+  font-size: 12px !important;
+}
+
+.desktop-mode .board-header {
+  font-size: clamp(14px, 3vw, 18px) !important;
+  padding: 2.5vh 1.5vw 0.5vh !important;
+}
+
+.desktop-mode .board-header .board-header-title {
+  font-size: clamp(14px, 3vw, 18px) !important;
+}
+
+.desktop-mode .board-header .board-header-description {
+  font-size: 12px !important;
+}
+
+.desktop-mode .board-header .board-header-btn {
+  font-size: clamp(12px, 2.5vw, 16px) !important;
+  padding: 0.5vh 0.8vw !important;
+}
+
+.desktop-mode .board-header .board-header-btn i {
+  font-size: clamp(12px, 2.5vw, 16px) !important;
 }
@@ -16,31 +16,29 @@ template(name="boardHeaderBar")
              a.board-header-btn(class="{{#if currentUser.isBoardAdmin}}js-edit-board-title{{else}}is-disabled{{/if}}" title="{{_ 'edit'}}" value=title)
                i.fa.fa-pencil-square-o

-          a.board-header-btn.js-star-board(class="{{#if isStarred}}is-active{{/if}}"
-            title="{{#if isStarred}}{{_ 'star-board-short-unstar'}}{{else}}{{_ 'star-board-short-star'}}{{/if}}" aria-label="{{#if isStarred}}{{_ 'star-board-short-unstar'}}{{else}}{{_ 'star-board-short-star'}}{{/if}}")
-            i.fa(class="fa-star{{#unless isStarred}}-o{{/unless}}")
-            if showStarCounter
-              span
-                = currentBoard.stars
+            a.board-header-btn(
+              class="{{#if currentUser.isBoardAdmin}}js-change-visibility{{else}}is-disabled{{/if}}"
+              title="{{_ currentBoard.permission}}")
+              i.fa(class="{{#if currentBoard.isPublic}}fa-globe{{else}}fa-lock{{/if}}")
+              span {{_ currentBoard.permission}}

-          a.board-header-btn(
-            class="{{#if currentUser.isBoardAdmin}}js-change-visibility{{else}}is-disabled{{/if}}"
-            title="{{_ currentBoard.permission}}")
-            i.fa(class="{{#if currentBoard.isPublic}}fa-globe{{else}}fa-lock{{/if}}")
-            span {{_ currentBoard.permission}}
-
-          a.board-header-btn.js-watch-board(
-            title="{{_ watchLevel }}")
-            if $eq watchLevel "watching"
-              i.fa.fa-eye
-            if $eq watchLevel "tracking"
-              i.fa.fa-bell
-            if $eq watchLevel "muted"
-              i.fa.fa-bell-slash
-            span {{_ watchLevel}}
-          a.board-header-btn(title="{{_ 'sort-cards'}}" class="{{#if isSortActive }}emphasis{{else}} js-sort-cards {{/if}}")
-            i.fa.fa-sort
-            span {{#if isSortActive }}{{_ 'sort-is-on'}}{{else}}{{_ 'sort-cards'}}{{/if}}
+            a.board-header-btn.js-watch-board(
+              title="{{_ watchLevel }}")
+              if $eq watchLevel "watching"
+                i.fa.fa-eye
+              if $eq watchLevel "tracking"
+                i.fa.fa-bell
+              if $eq watchLevel "muted"
+                i.fa.fa-bell-slash
+              span {{_ watchLevel}}
+            a.board-header-btn.js-star-board(class="{{#if isStarred}}is-active{{/if}}"
+              title="{{#if isStarred}}{{_ 'click-to-unstar'}}{{else}}{{_ 'click-to-star'}}{{/if}} {{_ 'starred-boards-description'}}")
+              i.fa(class="fa-star{{#unless isStarred}}-o{{/unless}}")
+              if showStarCounter
+                span.board-star-counter {{currentBoard.stars}}
+            a.board-header-btn(title="{{_ 'sort-cards'}}" class="{{#if isSortActive }}emphasis{{else}} js-sort-cards {{/if}}")
+              i.fa.fa-sort
+              span {{#if isSortActive }}{{_ 'sort-is-on'}}{{else}}{{_ 'sort-cards'}}{{/if}}
            if isSortActive
              a.board-header-btn-close.js-sort-reset(title="{{_ 'remove-sort'}}")
                i.fa.fa-times-thin
@@ -51,6 +49,8 @@ template(name="boardHeaderBar")
            i.fa.fa-sign-in
            span {{_ 'log-in'}}

+  .board-header-btns.center
+
  .board-header-btns.right
    if currentBoard
      if isMiniScreen
@@ -59,25 +59,25 @@ template(name="boardHeaderBar")
            a.board-header-btn(class="{{#if currentUser.isBoardAdmin}}js-edit-board-title{{else}}is-disabled{{/if}}" title="{{_ 'edit'}}" value=title)
              i.fa.fa-pencil-square-o

-          a.board-header-btn.js-star-board(class="{{#if isStarred}}is-active{{/if}}"
-            title="{{#if isStarred}}{{_ 'click-to-unstar'}}{{else}}{{_ 'click-to-star'}}{{/if}} {{_ 'starred-boards-description'}}")
-            i.fa(class="fa-star{{#unless isStarred}}-o{{/unless}}")
+            a.board-header-btn(
+              class="{{#if currentUser.isBoardAdmin}}js-change-visibility{{else}}is-disabled{{/if}}"
+              title="{{_ currentBoard.permission}}")
+              i.fa(class="{{#if currentBoard.isPublic}}fa-globe{{else}}fa-lock{{/if}}")

-          a.board-header-btn(
-            class="{{#if currentUser.isBoardAdmin}}js-change-visibility{{else}}is-disabled{{/if}}"
-            title="{{_ currentBoard.permission}}")
-            i.fa(class="{{#if currentBoard.isPublic}}fa-globe{{else}}fa-lock{{/if}}")
-
-          a.board-header-btn.js-watch-board(
-            title="{{_ watchLevel }}")
-            if $eq watchLevel "watching"
-              i.fa.fa-eye
-            if $eq watchLevel "tracking"
-              i.fa.fa-bell
-            if $eq watchLevel "muted"
-              i.fa.fa-bell-slash
-          a.board-header-btn(title="{{_ 'sort-cards'}}" class="{{#if isSortActive }}emphasis{{else}} js-sort-cards {{/if}}")
-            i.fa.fa-sort
+            a.board-header-btn.js-watch-board(
+              title="{{_ watchLevel }}")
+              if $eq watchLevel "watching"
+                i.fa.fa-eye
+              if $eq watchLevel "tracking"
+                i.fa.fa-bell
+              if $eq watchLevel "muted"
+                i.fa.fa-bell-slash
+            a.board-header-btn.js-star-board(class="{{#if isStarred}}is-active{{/if}}"
+              title="{{#if isStarred}}{{_ 'click-to-unstar'}}{{else}}{{_ 'click-to-star'}}{{/if}} {{_ 'starred-boards-description'}}")
+              i.fa(class="fa-star{{#unless isStarred}}-o{{/unless}}")
+            a.board-header-btn(title="{{_ 'sort-cards'}}" class="{{#if isSortActive }}emphasis{{else}} js-sort-cards {{/if}}")
+              i.fa.fa-sort
+              span {{#if isSortActive }}{{_ 'sort-is-on'}}{{else}}{{_ 'sort-cards'}}{{/if}}
            if isSortActive
              a.board-header-btn-close.js-sort-reset(title="{{_ 'remove-sort'}}")
                i.fa.fa-times-thin
@@ -93,24 +93,28 @@ template(name="boardHeaderBar")
            i.fa.fa-archive

      //if showSort
-      //  a.board-header-btn.js-open-sort-view(title="{{_ 'sort-desc'}}")
-      //    i.fa(class="{{directionClass}}")
-      //    span {{_ 'sort'}}{{_ listSortShortDesc}}
+      //
+        a.board-header-btn.js-open-sort-view(title="{{_ 'sort-desc'}}")
+      //
+          i.fa(class="{{directionClass}}")
+      //
+          span {{_ 'sort'}}{{_ listSortShortDesc}}

      a.board-header-btn.js-open-filter-view(
          title="{{#if Filter.isActive}}{{_ 'filter-on-desc'}}{{else}}{{_ 'filter'}}{{/if}}"
-          class="{{#if Filter.isActive}}emphasis{{/if}}")
+          class="{{#if Filter.isActive}}js-filter-active{{/if}}")
        i.fa.fa-filter
+        span {{#if Filter.isActive}}{{_ 'filter-on-desc'}}{{else}}{{_ 'filter'}}{{/if}}
        if Filter.isActive
          a.board-header-btn-close.js-filter-reset(title="{{_ 'filter-clear'}}")
            i.fa.fa-times-thin

      a.board-header-btn.js-open-search-view(title="{{_ 'search'}}")
        i.fa.fa-search
+        span {{_ 'search'}}

      unless currentBoard.isTemplatesBoard
-        a.board-header-btn.js-toggle-board-view(
-          title="{{_ 'board-view'}}")
+        a.board-header-btn.js-toggle-board-view
          i.fa.fa-caret-down
          if $eq boardView 'board-view-swimlanes'
            i.fa.fa-th-large
@@ -118,26 +122,37 @@ template(name="boardHeaderBar")
            i.fa.fa-trello
          if $eq boardView 'board-view-cal'
            i.fa.fa-calendar
-
+          if $eq boardView 'board-view-gantt'
+            i.fa.fa-bar-chart
+          span
+            if $eq boardView 'board-view-swimlanes'
+              | {{_ 'swimlanes'}}
+            if $eq boardView 'board-view-lists'
+              | {{_ 'lists'}}
+            if $eq boardView 'board-view-cal'
+              | {{_ 'calendar'}}
+            if $eq boardView 'board-view-gantt'
+              | {{_ 'gantt'}}
      if canModifyBoard
        a.board-header-btn.js-multiselection-activate(
            title="{{#if MultiSelection.isActive}}{{_ 'multi-selection-on'}}{{else}}{{_ 'multi-selection'}}{{/if}}"
            class="{{#if MultiSelection.isActive}}emphasis{{/if}}")
          i.fa.fa-check-square-o
+          span {{#if MultiSelection.isActive}}{{_ 'multi-selection-on'}}{{else}}{{_ 'multi-selection'}}{{/if}}
          if MultiSelection.isActive
            a.board-header-btn-close.js-multiselection-reset(title="{{_ 'filter-clear'}}")
              i.fa.fa-times-thin

      .separator
      a.board-header-btn.js-toggle-sidebar(title="{{_ 'sidebar-open'}} {{_ 'or'}} {{_ 'sidebar-close'}}")
-        i.fa.fa-navicon
+        i.fa.fa-bars

 template(name="boardVisibilityList")
  ul.pop-over-list
    li
      with "private"
        a.js-select-visibility
-          i.fa.fa-lock.colorful
+          i.fa.fa-lock
          | {{_ 'private'}}
          if visibilityCheck
            i.fa.fa-check
@@ -146,7 +161,7 @@ template(name="boardVisibilityList")
      li
        with "public"
          a.js-select-visibility
-            i.fa.fa-globe.colorful
+            i.fa.fa-globe
            | {{_ 'public'}}
            if visibilityCheck
              i.fa.fa-check
@@ -160,7 +175,7 @@ template(name="boardChangeWatchPopup")
    li
      with "watching"
        a.js-select-watch
-          i.fa.fa-eye.colorful
+          i.fa.fa-eye
          | {{_ 'watching'}}
          if watchCheck
            i.fa.fa-check
@@ -168,7 +183,7 @@ template(name="boardChangeWatchPopup")
    li
      with "tracking"
        a.js-select-watch
-          i.fa.fa-bell.colorful
+          i.fa.fa-bell
          | {{_ 'tracking'}}
          if watchCheck
            i.fa.fa-check
@@ -176,7 +191,7 @@ template(name="boardChangeWatchPopup")
    li
      with "muted"
        a.js-select-watch
-          i.fa.fa-bell-slash.colorful
+          i.fa.fa-bell-slash
          | {{_ 'muted'}}
          if watchCheck
            i.fa.fa-check
@@ -187,24 +202,31 @@ template(name="boardChangeViewPopup")
    li
      with "board-view-swimlanes"
        a.js-open-swimlanes-view
-          i.fa.fa-th-large.colorful
-          | {{_ 'board-view-swimlanes'}}
+          i.fa.fa-th-large
+          | {{_ 'swimlanes'}}
          if $eq Utils.boardView "board-view-swimlanes"
            i.fa.fa-check
    li
      with "board-view-lists"
        a.js-open-lists-view
-          i.fa.fa-trello.colorful
+          i.fa.fa-trello
          | {{_ 'board-view-lists'}}
          if $eq Utils.boardView "board-view-lists"
            i.fa.fa-check
    li
      with "board-view-cal"
        a.js-open-cal-view
-          i.fa.fa-calendar.colorful
+          i.fa.fa-calendar
          | {{_ 'board-view-cal'}}
          if $eq Utils.boardView "board-view-cal"
            i.fa.fa-check
+    li
+      with "board-view-gantt"
+        a.js-open-gantt-view
+          i.fa.fa-bar-chart
+          | {{_ 'board-view-gantt'}}
+          if $eq Utils.boardView "board-view-gantt"
+            i.fa.fa-check

 template(name="createBoard")
  form
@@ -235,20 +257,90 @@ template(name="createBoard")
      | /
      a.js-board-template {{_ 'template'}}

-//template(name="listsortPopup")
-//  h2
-//   | {{_ 'list-sort-by'}}
-//  hr
-//  ul.pop-over-list
-//    each value in allowedSortValues
-//     li
-//      a.js-sort-by(name="{{value.name}}")
-//        if $eq sortby value.name
-//           i(class="fa {{Direction}}")
-//        | {{_ value.label }}{{_ value.shortLabel}}
-//        if $eq sortby value.name
-//           i(class="fa fa-check")
+template(name="createBoardPopup")
+  form
+    label
+      | {{_ 'title'}}
+      input.js-new-board-title(type="text" placeholder="{{_ 'bucket-example'}}" autofocus required)
+    if visibilityMenuIsOpen.get
+      +boardVisibilityList
+    else
+      p.quiet
+        if $eq visibility.get 'public'
+          span.fa.fa-globe.colorful
+          = " "
+          | {{{_ 'board-public-info'}}}
+        else
+          span.fa.fa-lock.colorful
+          = " "
+          | {{{_ 'board-private-info'}}}
+        a.js-change-visibility {{_ 'change'}}.
+    a.flex.js-toggle-add-template-container
+      .materialCheckBox#add-template-container
+      span {{_ 'add-template-container'}}
+    input.primary.wide(type="submit" value="{{_ 'create'}}")
+    span.quiet
+      | {{_ 'or'}}
+      a.js-import-board {{_ 'import'}}
+    span.quiet
+      | /
+      a.js-board-template {{_ 'template'}}

+// 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.get
+      +boardVisibilityList
+    else
+      p.quiet
+        if $eq visibility.get 'public'
+          span.fa.fa-globe.colorful
+          = " "
+          | {{{_ 'board-public-info'}}}
+        else
+          span.fa.fa-lock.colorful
+          = " "
+          | {{{_ 'board-private-info'}}}
+        a.js-change-visibility {{_ 'change'}}.
+    a.flex.js-toggle-add-template-container
+      .materialCheckBox#add-template-container
+      span {{_ 'add-template-container'}}
+    input.primary.wide(type="submit" value="{{_ 'create'}}")
+    span.quiet
+      | {{_ 'or'}}
+      a.js-import-board {{_ 'import'}}
+    span.quiet
+      | /
+      a.js-board-template {{_ 'template'}}
+
+//template(name="listsortPopup")
+//
+  h2
+//
+   | {{_ 'list-sort-by'}}
+//
+  hr
+//
+  ul.pop-over-list
+//
+    each value in allowedSortValues
+//
+     li
+//
+      a.js-sort-by(name="{{value.name}}")
+//
+        if $eq sortby value.name
+//
+           | {{#if $eq Direction "fa-arrow-up"}}⬆️{{else}}⬇️{{/if}}
+//
+        | {{_ value.label }}{{_ value.shortLabel}}
+//
+        if $eq sortby value.name
+//
+           i.fa.fa-check
 template(name="boardChangeTitlePopup")
  form
    label
@@ -267,14 +359,22 @@ template(name="boardCreateRulePopup")
 template(name="cardsSortPopup")
  ul.pop-over-list
    li
-      a.js-sort-due {{_ 'due-date'}}
+      a.js-sort-due
+        i.fa.fa-calendar
+        | {{_ 'due-date'}}
      hr
    li
-      a.js-sort-title {{_ 'title-alphabetically'}}
+      a.js-sort-title
+        i.fa.fa-sort-alpha-asc
+        | {{_ 'title-alphabetically'}}
      hr
    li
-      a.js-sort-created-desc {{_ 'created-at-newest-first'}}
+      a.js-sort-created-desc
+        i.fa.fa-arrow-down
+        | {{_ 'created-at-newest-first'}}
      hr
    li
-      a.js-sort-created-asc {{_ 'created-at-oldest-first'}}
+      a.js-sort-created-asc
+        i.fa.fa-arrow-up
+        | {{_ 'created-at-oldest-first'}}

@@ -1,5 +1,6 @@
 import { ReactiveCache } from '/imports/reactiveCache';
 import { TAPi18n } from '/imports/i18n';
+import { FlowRouter } from 'meteor/ostrio:flow-router-extra';
 import dragscroll from '@wekanteam/dragscroll';

 /*
@@ -9,7 +10,7 @@ const UPCLS = 'fa-sort-up';
 const sortCardsBy = new ReactiveVar('');

 Template.boardChangeTitlePopup.events({
-  submit(event, templateInstance) {
+  async submit(event, templateInstance) {
    const newTitle = templateInstance
      .$('.js-board-name')
      .val()
@@ -19,8 +20,8 @@ Template.boardChangeTitlePopup.events({
      .val()
      .trim();
    if (newTitle) {
-      this.rename(newTitle);
-      this.setDescription(newDesc);
+      await this.rename(newTitle);
+      await this.setDescription(newDesc);
      Popup.back();
    }
    event.preventDefault();
@@ -33,6 +34,8 @@ BlazeComponent.extendComponent({
    return currentBoard && currentBoard.getWatchLevel(Meteor.userId());
  },

+
+
  isStarred() {
    const boardId = Session.get('currentBoard');
    const user = ReactiveCache.getCurrentUser();
@@ -70,7 +73,10 @@ BlazeComponent.extendComponent({
      {
        'click .js-edit-board-title': Popup.open('boardChangeTitle'),
        'click .js-star-board'() {
-          ReactiveCache.getCurrentUser().toggleBoardStar(Session.get('currentBoard'));
+          const boardId = Session.get('currentBoard');
+          if (boardId) {
+            Meteor.call('toggleBoardStar', boardId);
+          }
        },
        'click .js-open-board-menu': Popup.open('boardMenu'),
        'click .js-change-visibility': Popup.open('boardChangeVisibility'),
@@ -80,10 +86,37 @@ BlazeComponent.extendComponent({
        },
        'click .js-toggle-board-view': Popup.open('boardChangeView'),
        'click .js-toggle-sidebar'() {
-          Sidebar.toggle();
+          if (process.env.DEBUG === 'true') {
+            console.log('Hamburger menu clicked');
+          }
+          // Use the same approach as keyboard shortcuts
+          if (typeof Sidebar !== 'undefined' && Sidebar && typeof Sidebar.toggle === 'function') {
+            if (process.env.DEBUG === 'true') {
+              console.log('Using Sidebar.toggle()');
+            }
+            Sidebar.toggle();
+          } else {
+            if (process.env.DEBUG === 'true') {
+              console.warn('Sidebar not available, trying alternative approach');
+            }
+            // Try to trigger the sidebar through the global Blaze helper
+            if (typeof Blaze !== 'undefined' && Blaze._globalHelpers && Blaze._globalHelpers.Sidebar) {
+              const sidebar = Blaze._globalHelpers.Sidebar();
+              if (sidebar && typeof sidebar.toggle === 'function') {
+                if (process.env.DEBUG === 'true') {
+                  console.log('Using Blaze helper Sidebar.toggle()');
+                }
+                sidebar.toggle();
+              }
+            }
+          }
        },
        'click .js-open-filter-view'() {
-          Sidebar.setView('filter');
+          if (Sidebar) {
+            Sidebar.setView('filter');
+          } else {
+            console.warn('Sidebar not available for setView');
+          }
        },
        'click .js-sort-cards': Popup.open('cardsSort'),
        /*
@@ -100,14 +133,22 @@ BlazeComponent.extendComponent({
        */
        'click .js-filter-reset'(event) {
          event.stopPropagation();
-          Sidebar.setView();
+          if (Sidebar) {
+            Sidebar.setView();
+          } else {
+            console.warn('Sidebar not available for setView');
+          }
          Filter.reset();
        },
        'click .js-sort-reset'() {
          Session.set('sortBy', '');
        },
        'click .js-open-search-view'() {
-          Sidebar.setView('search');
+          if (Sidebar) {
+            Sidebar.setView('search');
+          } else {
+            console.warn('Sidebar not available for setView');
+          }
        },
        'click .js-multiselection-activate'() {
          const currentCard = Utils.getCurrentCardId();
@@ -126,6 +167,7 @@ BlazeComponent.extendComponent({
      },
    ];
  },
+
 }).register('boardHeaderBar');

 Template.boardHeaderBar.helpers({
@@ -135,6 +177,23 @@ Template.boardHeaderBar.helpers({
  isSortActive() {
    return Session.get('sortBy') ? true : false;
  },
+  sortCardsIcon() {
+    const sortBy = Session.get('sortBy');
+    if (!sortBy) {
+      return '🃏'; // Card icon when nothing is selected
+    }
+
+    // Determine which sort option is active based on sortBy object
+    if (sortBy.dueAt) {
+      return '📅'; // Due date icon
+    } else if (sortBy.title) {
+      return '🔤'; // Alphabet icon
+    } else if (sortBy.createdAt) {
+      return sortBy.createdAt === 1 ? '⬆️' : '⬇️'; // Up/down arrow based on direction
+    }
+
+    return '🃏'; // Default card icon
+  },
 });

 Template.boardChangeViewPopup.events({
@@ -150,6 +209,10 @@ Template.boardChangeViewPopup.events({
    Utils.setBoardView('board-view-cal');
    Popup.back();
  },
+  'click .js-open-gantt-view'() {
+    Utils.setBoardView('board-view-gantt');
+    Popup.back();
+  },
 });

 const CreateBoard = BlazeComponent.extendComponent({
@@ -201,6 +264,7 @@ const CreateBoard = BlazeComponent.extendComponent({
            title: title,
            permission: 'private',
            type: 'template-container',
+            migrationVersion: 1, // Latest version - no migration needed
          }),
       );

@@ -235,6 +299,15 @@ const CreateBoard = BlazeComponent.extendComponent({
        },
      );

+      // Assign to space if one was selected
+      const spaceId = Session.get('createBoardInWorkspace');
+      if (spaceId) {
+        Meteor.call('assignBoardToWorkspace', this.boardId.get(), spaceId, (err) => {
+          if (err) console.error('Error assigning board to space:', err);
+        });
+        Session.set('createBoardInWorkspace', null); // Clear after use
+      }
+
      Utils.goBoardId(this.boardId.get());

    } else {
@@ -244,6 +317,7 @@ const CreateBoard = BlazeComponent.extendComponent({
        Boards.insert({
          title,
          permission: visibility,
+          migrationVersion: 1, // Latest version - no migration needed
        }),
      );

@@ -252,6 +326,15 @@ const CreateBoard = BlazeComponent.extendComponent({
        boardId: this.boardId.get(),
      });

+      // Assign to space if one was selected
+      const spaceId = Session.get('createBoardInWorkspace');
+      if (spaceId) {
+        Meteor.call('assignBoardToWorkspace', this.boardId.get(), spaceId, (err) => {
+          if (err) console.error('Error assigning board to space:', err);
+        });
+        Session.set('createBoardInWorkspace', null); // Clear after use
+      }
+
      Utils.goBoardId(this.boardId.get());
    }
  },
@@ -273,11 +356,18 @@ const CreateBoard = BlazeComponent.extendComponent({
  },
 }).register('createBoardPopup');

+(class CreateTemplateContainerPopup extends CreateBoard {
+  onRendered() {
+    // Always pre-check the template container checkbox for this popup
+    $('#add-template-container').addClass('is-checked');
+  }
+}).register('createTemplateContainerPopup');
+
 (class HeaderBarCreateBoard extends CreateBoard {
-  onSubmit(event) {
+  async onSubmit(event) {
    super.onSubmit(event);
    // Immediately star boards crated with the headerbar popup.
-    ReactiveCache.getCurrentUser().toggleBoardStar(this.boardId.get());
+    await ReactiveCache.getCurrentUser().toggleBoardStar(this.boardId.get());
  }
 }.register('headerBarCreateBoardPopup'));

@@ -1,154 +1,239 @@
 template(name="boardList")
  .wrapper
-    ul.AllBoardTeamsOrgs
-      li.AllBoardTeams
-        if userHasTeams
-          select.js-AllBoardTeams#jsAllBoardTeams("multiple")
-            option(value="-1") {{_ 'teams'}} :
-            each teamsDatas
-              option(value="{{teamId}}") {{_ teamDisplayName}}
+    .board-list-header

-      li.AllBoardOrgs
-        if userHasOrgs
-          select.js-AllBoardOrgs#jsAllBoardOrgs("multiple")
-            option(value="-1") {{_ 'organizations'}} :
-            each orgsDatas
-              option(value="{{orgId}}") {{orgDisplayName}}
+    .boards-layout
+      // Left menu
+      .boards-left-menu
+        ul.menu
+          li(class="menu-item {{#if isSelectedMenu 'starred'}}active{{/if}}")
+            a.js-select-menu(data-type="starred")
+              span.menu-label
+                span.emoji-icon
+                  i.fa.fa-star
+                |  {{_ 'allboards.starred'}}
+              span.menu-count {{menuItemCount 'starred'}}
+          li(class="menu-item {{#if isSelectedMenu 'templates'}}active{{/if}}")
+            a.js-select-menu(data-type="templates")
+              span.menu-label
+                span.emoji-icon
+                  i.fa.fa-clipboard
+                |  {{_ 'allboards.templates'}}
+              span.menu-count {{menuItemCount 'templates'}}
+          li(class="menu-item {{#if isSelectedMenu 'remaining'}}active{{/if}}")
+            a.js-select-menu(data-type="remaining")
+              span.menu-label
+                span.emoji-icon
+                  i.fa.fa-folder
+                |  {{_ 'allboards.remaining'}}
+              span.menu-count {{menuItemCount 'remaining'}}
+        .workspaces-header
+          span
+            span.emoji-icon
+              i.fa.fa-folder-open
+            |  {{_ 'allboards.workspaces'}}
+          a.js-add-workspace(title="{{_ 'allboards.add-workspace'}}") +
+        // Workspaces tree
+        +workspaceTree(nodes=workspacesTree selectedWorkspaceId=selectedWorkspaceId)

-      //li.AllBoardTemplates
-      //  if userHasTemplates
-      //  select.js-AllBoardTemplates#jsAllBoardTemplates("multiple")
-      //    option(value="-1") {{_ 'templates'}} :
-      //    each templatesDatas
-      //      option(value="{{templateId}}") {{_ templateDisplayName}}
+        // Existing filter by orgs/teams (kept)
+        ul.AllBoardTeamsOrgs
+          li.AllBoardTeams
+            if userHasTeams
+              select.js-AllBoardTeams#jsAllBoardTeams("multiple")
+                option(value="-1") {{_ 'teams'}} :
+                each teamsDatas
+                  option(value="{{teamId}}") {{_ teamDisplayName}}

-      li.AllBoardBtns
-        div.AllBoardButtonsContainer
-          if userHasOrgsOrTeams
-            i.fa.fa-filter
-            input#filterBtn(type="button" value="{{_ 'filter'}}")
-            input#resetBtn(type="button" value="{{_ 'filter-clear'}}")
+          li.AllBoardOrgs
+            if userHasOrgs
+              select.js-AllBoardOrgs#jsAllBoardOrgs("multiple")
+                option(value="-1") {{_ 'organizations'}} :
+                each orgsDatas
+                  option(value="{{orgId}}") {{orgDisplayName}}

-    ul.board-list.clearfix.js-boards(class="{{#if isMiniScreen}}mobile-view{{/if}}")
-      li.js-add-board
-        a.board-list-item.label(title="{{_ 'add-board'}}")
-          | {{_ 'add-board'}}
-      each boards
-        li(class="{{_id}}" class="{{#if isStarred}}starred{{/if}}" class=colorClass).js-board
-          if isInvited
-            .board-list-item
-              span.details
-                span.board-list-item-name= title
-                i.fa.js-star-board(
-                  class="fa-star{{#if isStarred}} is-star-active{{else}}-o{{/if}}"
-                  title="{{_ 'star-board-title'}}")
-                p.board-list-item-desc {{_ 'just-invited'}}
-                button.js-accept-invite.primary {{_ 'accept'}}
-                button.js-decline-invite {{_ 'decline'}}
-          else
-            if $eq type "template-container"
-              a.js-open-board.template-container.board-list-item(href="{{pathFor 'board' id=_id slug=slug}}")
-                span.details
-                  span.board-list-item-name(title="{{_ 'template-container'}}")
-                    +viewer
-                      = title
-                  i.fa.js-star-board(
-                    class="fa-star{{#if isStarred}} is-star-active{{else}}-o{{/if}}"
-                    title="{{_ 'star-board-title'}}")
-                  p.board-list-item-desc
-                    +viewer
-                      = description
-                  if hasSpentTimeCards
-                    i.fa.js-has-spenttime-cards(
-                      class="fa-circle{{#if hasOvertimeCards}} has-overtime-card-active{{else}} no-overtime-card-active{{/if}}"
-                      title="{{#if hasOvertimeCards}}{{_ 'has-overtime-cards'}}{{else}}{{_ 'has-spenttime-cards'}}{{/if}}")
-                  if isTouchScreenOrShowDesktopDragHandles
-                    i.fa.board-handle(
-                        class="fa-arrows"
-                        title="{{_ 'drag-board'}}")
-                  else
-                    if isSandstorm
-                      i.fa.js-clone-board(
-                          class="fa-clone"
-                          title="{{_ 'duplicate-board'}}")
-                      i.fa.js-archive-board(
-                          class="fa-archive"
-                          title="{{_ 'archive-board'}}")
-                    else if isAdministrable
-                      i.fa.js-clone-board(
-                          class="fa-clone"
-                          title="{{_ 'duplicate-board'}}")
-                      i.fa.js-archive-board(
-                          class="fa-archive"
-                          title="{{_ 'archive-board'}}")
-                    else if currentUser.isAdmin
-                      i.fa.js-clone-board(
-                          class="fa-clone"
-                          title="{{_ 'duplicate-board'}}")
-                      i.fa.js-archive-board(
-                          class="fa-archive"
-                          title="{{_ 'archive-board'}}")
+          li.AllBoardBtns
+            div.AllBoardButtonsContainer
+              if userHasOrgsOrTeams
+                span.emoji-icon
+                  i.fa.fa-search
+                input#filterBtn(type="button" value="{{_ 'filter'}}")
+                button#resetBtn.filter-reset-btn
+                  span.reset-icon
+                    span.emoji-icon
+                      i.fa.fa-times-thin
+                  span {{_ 'filter-clear'}}
+
+      // Right boards grid
+      .boards-right-grid
+        .boards-path-header
+          .path-left
+            span.path-icon.emoji-icon {{currentMenuPath.icon}}
+            span.path-text {{currentMenuPath.text}}
+            if BoardMultiSelection.isActive
+              span.multiselection-hint
+                span.emoji-icon
+                  i.fa.fa-thumb-tack
+                |  {{_ 'multi-selection-active'}}
+          .path-right
+            if canModifyBoards
+              if hasBoardsSelected
+                button.js-archive-selected-boards.board-header-btn
+                  span.emoji-icon
+                    i.fa.fa-archive
+                  span {{_ 'archive-board'}}
+                button.js-duplicate-selected-boards.board-header-btn
+                  span.emoji-icon
+                    i.fa.fa-clipboard
+                  span {{_ 'duplicate-board'}}
+              a.board-header-btn.js-multiselection-activate(
+                title="{{#if BoardMultiSelection.isActive}}{{_ 'multi-selection-on'}}{{else}}{{_ 'multi-selection'}}{{/if}}"
+                class="{{#if BoardMultiSelection.isActive}}emphasis{{/if}}")
+                span.emoji-icon
+                  i.fa.fa-check-square-o
+              if BoardMultiSelection.isActive
+                a.board-header-btn-close.js-multiselection-reset(title="{{_ 'filter-clear'}}")
+                  span.emoji-icon
+                    i.fa.fa-times
+        ul.board-list.clearfix.js-boards(class="{{#if isMiniScreen}}mobile-view{{/if}} {{#if BoardMultiSelection.isActive}}is-multiselection-active{{/if}}")
+          li.js-add-board
+            if isSelectedMenu 'templates'
+              a.board-list-item.label(title="{{_ 'add-template-container'}}")
+                span.emoji-icon
+                  i.fa.fa-plus
+                | &nbsp;{{_ 'add-template-container'}}
            else
-              a.js-open-board.board-list-item(href="{{pathFor 'board' id=_id slug=slug}}")
-                span.details
-                  span.board-list-item-name(title="{{_ 'board-drag-drop-reorder-or-click-open'}}")
-                    +viewer
-                      = title
-                  unless currentSetting.hideBoardMemberList
-                    if allowsBoardMemberList
-                      .minicard-members
-                        each member in boardMembers _id
-                          a.name
-                            +userAvatar(userId=member noRemove=true)
-                  unless currentSetting.hideCardCounterList
-                    if allowsCardCounterList
-                      .minicard-lists.flex.flex-wrap
-                        each list in boardLists _id
-                          .item
-                            | {{ list }}
-                  i.fa.js-star-board(
-                    class="fa-star{{#if isStarred}} is-star-active{{else}}-o{{/if}}"
-                    title="{{_ 'star-board-title'}}")
-                  p.board-list-item-desc
-                    +viewer
-                      = description
-                  if hasSpentTimeCards
-                    i.fa.js-has-spenttime-cards(
-                      class="fa-circle{{#if hasOvertimeCards}} has-overtime-card-active{{else}} no-overtime-card-active{{/if}}"
-                      title="{{#if hasOvertimeCards}}{{_ 'has-overtime-cards'}}{{else}}{{_ 'has-spenttime-cards'}}{{/if}}")
-                  if isTouchScreenOrShowDesktopDragHandles
-                    i.fa.board-handle(
-                        class="fa-arrows"
-                        title="{{_ 'drag-board'}}")
-                  else
-                    if isSandstorm
-                      i.fa.js-clone-board(
-                          class="fa-clone"
-                          title="{{_ 'duplicate-board'}}")
-                      i.fa.js-archive-board(
-                          class="fa-archive"
-                          title="{{_ 'archive-board'}}")
-                    else if isAdministrable
-                      i.fa.js-clone-board(
-                          class="fa-clone"
-                          title="{{_ 'duplicate-board'}}")
-                      i.fa.js-archive-board(
-                          class="fa-archive"
-                          title="{{_ 'archive-board'}}")
-                    else if currentUser.isAdmin
-                      i.fa.js-clone-board(
-                          class="fa-clone"
-                          title="{{_ 'duplicate-board'}}")
-                      i.fa.js-archive-board(
-                          class="fa-archive"
-                          title="{{_ 'archive-board'}}")
+              a.board-list-item.label(title="{{_ 'add-board'}}")
+                span.emoji-icon
+                  i.fa.fa-plus
+                | &nbsp;{{_ 'add-board'}}
+          each boards
+            li.js-board(class="{{_id}} {{#if isStarred}}starred{{/if}} {{colorClass}} {{#if BoardMultiSelection.isSelected _id}}is-checked{{/if}}", draggable="true")
+              if isInvited
+                .board-list-item
+                  if BoardMultiSelection.isActive
+                    .materialCheckBox.multi-selection-checkbox.js-toggle-board-multi-selection(
+                      class="{{#if BoardMultiSelection.isSelected _id}}is-checked{{/if}}")
+                  span.details
+                    span.board-list-item-name= title
+                    span.js-star-board(
+                      class="{{#if isStarred}}is-star-active{{else}}is-not-star-active{{/if}}"
+                      title="{{_ 'star-board-title'}}")
+                      span.emoji-icon
+                        | {{#if isStarred}}⭐{{else}}☆{{/if}}
+                    p.board-list-item-desc {{_ 'just-invited'}}
+                    button.js-accept-invite.primary {{_ 'accept'}}
+                    button.js-decline-invite {{_ 'decline'}}
+              else
+                if $eq type "template-container"
+                  .template-container.board-list-item
+                    if BoardMultiSelection.isActive
+                      .materialCheckBox.multi-selection-checkbox.js-toggle-board-multi-selection(
+                        class="{{#if BoardMultiSelection.isSelected _id}}is-checked{{/if}}")
+                    span.board-handle(title="{{_ 'drag-board'}}")
+                      span.emoji-icon
+                        i.fa.fa-arrows
+
+                    a.js-open-board(href="{{pathFor 'board' id=_id slug=slug}}")
+                      span.details
+                        span.board-list-item-name(title="{{_ 'template-container'}}")
+                          +viewer
+                            = title
+                        p.board-list-item-desc
+                          +viewer
+                            = description
+                        if hasSpentTimeCards
+                          span.js-has-spenttime-cards(
+                            class="{{#if hasOvertimeCards}}has-overtime-card-active{{else}}no-overtime-card-active{{/if}}"
+                            title="{{#if hasOvertimeCards}}{{_ 'has-overtime-cards'}}{{else}}{{_ 'has-spenttime-cards'}}{{/if}}")
+                            span.emoji-icon
+                              i.fa.fa-clock-o
+                    span.js-star-board(
+                      class="{{#if isStarred}}is-star-active{{else}}is-not-star-active{{/if}}"
+                      title="{{_ 'star-board-title'}}")
+                      span.emoji-icon
+                        i.fa(class="fa-star{{#unless isStarred}}-o{{/unless}}")
+                else
+                  .board-list-item
+                    if BoardMultiSelection.isActive
+                      .materialCheckBox.multi-selection-checkbox.js-toggle-board-multi-selection(
+                        class="{{#if BoardMultiSelection.isSelected _id}}is-checked{{/if}}")
+                    span.board-handle(title="{{_ 'drag-board'}}")
+                      span.emoji-icon
+                        i.fa.fa-arrows
+
+                    a.js-open-board(href="{{pathFor 'board' id=_id slug=slug}}")
+                      span.details
+                        span.board-list-item-name(title="{{_ 'board-drag-drop-reorder-or-click-open'}}")
+                          +viewer
+                            = title
+                        unless currentSetting.hideBoardMemberList
+                          if allowsBoardMemberList
+                            .minicard-members
+                              each member in boardMembers _id
+                                a.name
+                                  +userAvatar(userId=member noRemove=true)
+                        unless currentSetting.hideCardCounterList
+                          if allowsCardCounterList
+                            .minicard-lists.flex.flex-wrap
+                              each list in boardLists _id
+                                .item
+                                  | {{ list }}
+                        p.board-list-item-desc
+                          +viewer
+                            = description
+                        if hasSpentTimeCards
+                          span.js-has-spenttime-cards(
+                            class="{{#if hasOvertimeCards}}has-overtime-card-active{{else}}no-overtime-card-active{{/if}}"
+                            title="{{#if hasOvertimeCards}}{{_ 'has-overtime-cards'}}{{else}}{{_ 'has-spenttime-cards'}}{{/if}}")
+                            span.emoji-icon
+                              i.fa.fa-clock-o
+                    a.js-star-board(
+                      class="{{#if isStarred}}is-star-active{{else}}is-not-star-active{{/if}}"
+                      title="{{_ 'star-board-title'}}")
+                      span.emoji-icon
+                        i.fa(class="fa-star{{#unless isStarred}}-o{{/unless}}")

 template(name="boardListHeaderBar")
  h1 {{_ title }}
  //.board-header-btns.right
-  //  a.board-header-btn.js-open-archived-board
-  //    i.fa.fa-archive
-  //    span {{_ 'archives'}}
-  //  a.board-header-btn(href="{{pathFor 'board' id=templatesBoardId slug=templatesBoardSlug}}")
-  //    i.fa.fa-clone
-  //    span {{_ 'templates'}}
+  //
+    a.board-header-btn.js-open-archived-board
+  //
+      i.fa.fa-archive
+  //
+      span {{_ 'archives'}}
+  //
+    a.board-header-btn(href="{{pathFor 'board' id=templatesBoardId slug=templatesBoardSlug}}")
+  //
+      i.fa.fa-clone
+  //
+      span {{_ 'templates'}}
+
+// Recursive template for workspaces tree
+template(name="workspaceTree")
+  if nodes
+    ul.workspace-tree.js-workspace-tree
+      each nodes
+        li.workspace-node(class="{{#if $eq id selectedWorkspaceId}}active{{/if}}" data-workspace-id="{{id}}" draggable="true")
+          .workspace-node-content
+            span.workspace-drag-handle
+              span.emoji-icon
+                i.fa.fa-arrows
+
+            a.js-select-workspace(data-id="{{id}}")
+              span.workspace-icon
+                if icon
+                  +viewer
+                    = icon
+                else
+                  span.emoji-icon
+                    i.fa.fa-folder
+              span.workspace-name= name
+            a.js-edit-workspace(data-id="{{id}}" title="{{_ 'allboards.edit-workspace'}}")
+              span.emoji-icon
+                i.fa.fa-pencil-square-o
+            span.workspace-count {{workspaceCount id}}
+            a.js-add-subworkspace(data-id="{{id}}" title="{{_ 'allboards.add-subworkspace'}}") +
+          if children
+            +workspaceTree(nodes=children selectedWorkspaceId=selectedWorkspaceId)
@@ -1,5 +1,7 @@
 import { ReactiveCache } from '/imports/reactiveCache';
 import { TAPi18n } from '/imports/i18n';
+import { FlowRouter } from 'meteor/ostrio:flow-router-extra';
+import getSlug from 'limax';

 const subManager = new SubsManager();

@@ -14,7 +16,10 @@ Template.boardList.helpers({
       return Utils.isMiniScreen() && Session.get('currentBoard'); */
    return true;
  },
-})
+  BoardMultiSelection() {
+    return BoardMultiSelection;
+  },
+});

 Template.boardListHeaderBar.events({
  'click .js-open-archived-board'() {
@@ -22,6 +27,8 @@ Template.boardListHeaderBar.events({
  },
 });

+Template.boardList.events({});
+
 Template.boardListHeaderBar.helpers({
  title() {
    //if (FlowRouter.getRouteName() === 'template-container') {
@@ -42,17 +49,85 @@ BlazeComponent.extendComponent({
  onCreated() {
    Meteor.subscribe('setting');
    Meteor.subscribe('tableVisibilityModeSettings');
+    this.selectedMenu = new ReactiveVar('starred');
+    this.selectedWorkspaceIdVar = new ReactiveVar(null);
+    this.workspacesTreeVar = new ReactiveVar([]);
    let currUser = ReactiveCache.getCurrentUser();
    let userLanguage;
    if (currUser && currUser.profile) {
-      userLanguage = currUser.profile.language
+      userLanguage = currUser.profile.language;
    }
    if (userLanguage) {
      TAPi18n.setLanguage(userLanguage);
    }
+    // Load workspaces tree reactively
+    this.autorun(() => {
+      const u = ReactiveCache.getCurrentUser();
+      const tree = (u && u.profile && u.profile.boardWorkspacesTree) || [];
+      this.workspacesTreeVar.set(tree);
+    });
+  },
+
+  reorderWorkspaces(draggedSpaceId, targetSpaceId) {
+    const tree = this.workspacesTreeVar.get();
+
+    // Helper to remove a space from tree
+    const removeSpace = (nodes, id) => {
+      for (let i = 0; i < nodes.length; i++) {
+        if (nodes[i].id === id) {
+          const removed = nodes.splice(i, 1)[0];
+          return { tree: nodes, removed };
+        }
+        if (nodes[i].children) {
+          const result = removeSpace(nodes[i].children, id);
+          if (result.removed) {
+            return { tree: nodes, removed: result.removed };
+          }
+        }
+      }
+      return { tree: nodes, removed: null };
+    };
+
+    // Helper to insert a space after target
+    const insertAfter = (nodes, targetId, spaceToInsert) => {
+      for (let i = 0; i < nodes.length; i++) {
+        if (nodes[i].id === targetId) {
+          nodes.splice(i + 1, 0, spaceToInsert);
+          return true;
+        }
+        if (nodes[i].children) {
+          if (insertAfter(nodes[i].children, targetId, spaceToInsert)) {
+            return true;
+          }
+        }
+      }
+      return false;
+    };
+
+    // Clone the tree
+    const newTree = EJSON.clone(tree);
+
+    // Remove the dragged space
+    const { tree: treeAfterRemoval, removed } = removeSpace(
+      newTree,
+      draggedSpaceId,
+    );
+
+    if (removed) {
+      // Insert after target
+      insertAfter(treeAfterRemoval, targetSpaceId, removed);
+
+      // Save the new tree
+      Meteor.call('setWorkspacesTree', treeAfterRemoval, (err) => {
+        if (err) console.error(err);
+      });
+    }
  },

  onRendered() {
+    // jQuery sortable is disabled in favor of HTML5 drag-and-drop for space management
+    // The old sortable code has been removed to prevent conflicts
+    /* OLD SORTABLE CODE - DISABLED
    const itemsSelector = '.js-board:not(.placeholder)';

    const $boards = this.$('.js-boards');
@@ -69,28 +144,21 @@ BlazeComponent.extendComponent({
        ui.placeholder.height(ui.helper.height());
        EscapeActions.executeUpTo('popup-close');
      },
-      stop(evt, ui) {
-        // To attribute the new index number, we need to get the DOM element
-        // of the previous and the following card -- if any.
+      async stop(evt, ui) {
        const prevBoardDom = ui.item.prev('.js-board').get(0);
-        const nextBoardBom = ui.item.next('.js-board').get(0);
-        const sortIndex = Utils.calculateIndex(prevBoardDom, nextBoardBom, 1);
+        const nextBoardDom = ui.item.next('.js-board').get(0);
+        const sortIndex = Utils.calculateIndex(prevBoardDom, nextBoardDom, 1);

        const boardDomElement = ui.item.get(0);
        const board = Blaze.getData(boardDomElement);
-        // Normally the jquery-ui sortable library moves the dragged DOM element
-        // to its new position, which disrupts Blaze reactive updates mechanism
-        // (especially when we move the last card of a list, or when multiple
-        // users move some cards at the same time). To prevent these UX glitches
-        // we ask sortable to gracefully cancel the move, and to put back the
-        // DOM in its initial state. The card move is then handled reactively by
-        // Blaze with the below query.
        $boards.sortable('cancel');
-        board.move(sortIndex.base);
+        const currentUser = ReactiveCache.getCurrentUser();
+        if (currentUser && typeof currentUser.setBoardSortIndex === 'function') {
+          await currentUser.setBoardSortIndex(board._id, sortIndex.base);
+        }
      },
    });

-    // Disable drag-dropping if the current user is not a board member or is comment only
    this.autorun(() => {
      if (Utils.isTouchScreenOrShowDesktopDragHandles()) {
        $boards.sortable({
@@ -98,56 +166,121 @@ BlazeComponent.extendComponent({
        });
      }
    });
+    */
  },
  userHasTeams() {
-    if (ReactiveCache.getCurrentUser()?.teams?.length > 0)
-      return true;
-    else
-      return false;
+    if (ReactiveCache.getCurrentUser()?.teams?.length > 0) return true;
+    else return false;
  },
  teamsDatas() {
-    const teams = ReactiveCache.getCurrentUser()?.teams
+    const teams = ReactiveCache.getCurrentUser()?.teams;
    if (teams)
-      return teams.sort((a, b) => a.teamDisplayName.localeCompare(b.teamDisplayName));
-    else
-      return [];
+      return teams.sort((a, b) =>
+        a.teamDisplayName.localeCompare(b.teamDisplayName),
+      );
+    else return [];
  },
  userHasOrgs() {
-    if (ReactiveCache.getCurrentUser()?.orgs?.length > 0)
-      return true;
-    else
-      return false;
+    if (ReactiveCache.getCurrentUser()?.orgs?.length > 0) return true;
+    else return false;
  },
  orgsDatas() {
    const orgs = ReactiveCache.getCurrentUser()?.orgs;
    if (orgs)
-      return orgs.sort((a, b) => a.orgDisplayName.localeCompare(b.orgDisplayName));
-    else
-      return [];
+      return orgs.sort((a, b) =>
+        a.orgDisplayName.localeCompare(b.orgDisplayName),
+      );
+    else return [];
  },
  userHasOrgsOrTeams() {
    const ret = this.userHasOrgs() || this.userHasTeams();
    return ret;
  },
+  currentMenuPath() {
+    try {
+      const selectedMenuVar = this.selectedMenu;
+      if (!selectedMenuVar || typeof selectedMenuVar.get !== 'function') {
+        return { icon: '🗂️', text: 'Workspaces' };
+      }
+      const sel = selectedMenuVar.get();
+      const currentUser = ReactiveCache.getCurrentUser();
+
+      // Helper function to safely get translation or fallback
+      const safeTranslate = (key, fallback) => {
+        try {
+          return TAPi18n.__(key) || fallback;
+        } catch (e) {
+          return fallback;
+        }
+      };
+
+      // Helper to find space by id in tree
+      const findSpaceById = (nodes, targetId, path = []) => {
+        if (!nodes || !Array.isArray(nodes)) return null;
+        for (const node of nodes) {
+          if (node.id === targetId) {
+            return [...path, node];
+          }
+          if (node.children && node.children.length > 0) {
+            const result = findSpaceById(node.children, targetId, [
+              ...path,
+              node,
+            ]);
+            if (result) return result;
+          }
+        }
+        return null;
+      };
+
+      if (sel === 'starred') {
+        return { icon: '⭐', text: safeTranslate('allboards.starred', 'Starred') };
+      } else if (sel === 'templates') {
+        return { icon: '📋', text: safeTranslate('allboards.templates', 'Templates') };
+      } else if (sel === 'remaining') {
+        return { icon: '📂', text: safeTranslate('allboards.remaining', 'Remaining') };
+      } else {
+        // sel is a workspaceId, build path
+        if (!this.workspacesTreeVar || typeof this.workspacesTreeVar.get !== 'function') {
+          return { icon: '🗂️', text: safeTranslate('allboards.workspaces', 'Workspaces') };
+        }
+        const tree = this.workspacesTreeVar.get();
+        const spacePath = findSpaceById(tree, sel);
+        if (spacePath && spacePath.length > 0) {
+          const pathText = spacePath.map((s) => s.name).join(' / ');
+          return {
+            icon: '🗂️',
+            text: `${safeTranslate('allboards.workspaces', 'Workspaces')} / ${pathText}`,
+          };
+        }
+        return { icon: '🗂️', text: safeTranslate('allboards.workspaces', 'Workspaces') };
+      }
+    } catch (error) {
+      console.error('Error in currentMenuPath:', error);
+      return { icon: '🗂️', text: 'Workspaces' };
+    }
+  },
  boards() {
    let query = {
-      // { type: 'board' },
-      // { type: { $in: ['board','template-container'] } },
      $and: [
        { archived: false },
        { type: { $in: ['board', 'template-container'] } },
-        { $or: [] },
-        { title: { $not: { $regex: /^\^.*\^$/ } } }
-      ]
+        { title: { $not: { $regex: /^\^.*\^$/ } } },
+      ],
    };
+    const membershipOrs = [];

-    let allowPrivateVisibilityOnly = TableVisibilityModeSettings.findOne('tableVisibilityMode-allowPrivateOnly');
+    let allowPrivateVisibilityOnly = TableVisibilityModeSettings.findOne(
+      'tableVisibilityMode-allowPrivateOnly',
+    );

    if (FlowRouter.getRouteName() === 'home') {
-      query.$and[2].$or.push({ 'members.userId': Meteor.userId() });
+      membershipOrs.push({ 'members.userId': Meteor.userId() });

-      if (allowPrivateVisibilityOnly !== undefined && allowPrivateVisibilityOnly.booleanValue) {
-        query.$and.push({ 'permission': 'private' });
+      if (
+        allowPrivateVisibilityOnly !== undefined &&
+        allowPrivateVisibilityOnly.booleanValue
+      ) {
+        query.$and.push({ permission: 'private' });
      }
      const currUser = ReactiveCache.getCurrentUser();

@@ -159,7 +292,7 @@ BlazeComponent.extendComponent({
        // }

        //query.$and[2].$or.push({'orgs': {$elemMatch : {orgId: orgsIds[0]}}});
-        query.$and[2].$or.push({ 'orgs.orgId': { $in: orgsIds } });
+        membershipOrs.push({ 'orgs.orgId': { $in: orgsIds } });
      }

      let teamIdsUserBelongs = currUser?.teamIdsUserBelongs() || '';
@@ -169,10 +302,15 @@ BlazeComponent.extendComponent({
        //   query.$or[2].$or.push({'teams.teamId': teamsIds[i]});
        // }
        //query.$and[2].$or.push({'teams': { $elemMatch : {teamId: teamsIds[0]}}});
-        query.$and[2].$or.push({ 'teams.teamId': { $in: teamsIds } });
+        membershipOrs.push({ 'teams.teamId': { $in: teamsIds } });
      }
-    }
-    else if (allowPrivateVisibilityOnly !== undefined && !allowPrivateVisibilityOnly.booleanValue) {
+      if (membershipOrs.length) {
+        query.$and.splice(2, 0, { $or: membershipOrs });
+      }
+    } else if (
+      allowPrivateVisibilityOnly !== undefined &&
+      !allowPrivateVisibilityOnly.booleanValue
+    ) {
      query = {
        archived: false,
        //type: { $in: ['board','template-container'] },
@@ -181,10 +319,38 @@ BlazeComponent.extendComponent({
      };
    }

-    const ret = ReactiveCache.getBoards(query, {
-      sort: { sort: 1 /* boards default sorting */ },
-    });
-    return ret;
+    const boards = ReactiveCache.getBoards(query, {});
+    const currentUser = ReactiveCache.getCurrentUser();
+    let list = boards;
+    // Apply left menu filtering
+    const sel = this.selectedMenu.get();
+    const assignments =
+      (currentUser &&
+        currentUser.profile &&
+        currentUser.profile.boardWorkspaceAssignments) ||
+      {};
+    if (sel === 'starred') {
+      list = list.filter((b) => currentUser && currentUser.hasStarred(b._id));
+    } else if (sel === 'templates') {
+      list = list.filter((b) => b.type === 'template-container');
+    } else if (sel === 'remaining') {
+      // Show boards not in any workspace AND not templates
+      // Keep starred boards visible in Remaining too
+      list = list.filter(
+        (b) => !assignments[b._id] && b.type !== 'template-container',
+      );
+    } else {
+      // assume sel is a workspaceId
+      // Keep starred boards visible in their workspace too
+      list = list.filter((b) => assignments[b._id] === sel);
+    }
+
+    if (currentUser && typeof currentUser.sortBoardsForUser === 'function') {
+      return currentUser.sortBoardsForUser(list);
+    }
+    return list
+      .slice()
+      .sort((a, b) => (a.title || '').localeCompare(b.title || ''));
  },
  boardLists(boardId) {
    /* Bug Board icons random dance https://github.com/wekan/wekan/issues/4214
@@ -232,11 +398,82 @@ BlazeComponent.extendComponent({
  events() {
    return [
      {
-        'click .js-add-board': Popup.open('createBoard'),
-        'click .js-star-board'(evt) {
-          const boardId = this.currentData()._id;
-          ReactiveCache.getCurrentUser().toggleBoardStar(boardId);
+        'click .js-select-menu'(evt) {
+          const type = evt.currentTarget.getAttribute('data-type');
+          this.selectedWorkspaceIdVar.set(null);
+          this.selectedMenu.set(type);
+        },
+        'click .js-select-workspace'(evt) {
+          const id = evt.currentTarget.getAttribute('data-id');
+          this.selectedWorkspaceIdVar.set(id);
+          this.selectedMenu.set(id);
+        },
+        'click .js-add-workspace'(evt) {
          evt.preventDefault();
+          const name = prompt(
+            TAPi18n.__('allboards.add-workspace-prompt') || 'New Space name',
+          );
+          if (name && name.trim()) {
+            Meteor.call(
+              'createWorkspace',
+              { parentId: null, name: name.trim() },
+              (err, res) => {
+                if (err) console.error(err);
+              },
+            );
+          }
+        },
+        'click .js-add-board'(evt) {
+          // Store the currently selected workspace/menu for board creation
+          const selectedWorkspaceId = this.selectedWorkspaceIdVar.get();
+          const selectedMenu = this.selectedMenu.get();
+
+          if (selectedWorkspaceId) {
+            Session.set('createBoardInWorkspace', selectedWorkspaceId);
+          } else {
+            Session.set('createBoardInWorkspace', null);
+          }
+
+          // Open different popup based on context
+          if (selectedMenu === 'templates') {
+            Popup.open('createTemplateContainer')(evt);
+          } else {
+            Popup.open('createBoard')(evt);
+          }
+        },
+        'click .js-star-board'(evt) {
+          evt.preventDefault();
+          evt.stopPropagation();
+          const boardId = this.currentData()._id;
+          if (boardId) {
+            Meteor.call('toggleBoardStar', boardId);
+          }
+        },
+        // HTML5 DnD from boards to spaces
+        'dragstart .js-board'(evt) {
+          const boardId = this.currentData()._id;
+
+          // Support multi-drag
+          if (
+            BoardMultiSelection.isActive() &&
+            BoardMultiSelection.isSelected(boardId)
+          ) {
+            const selectedIds = BoardMultiSelection.getSelectedBoardIds();
+            try {
+              evt.originalEvent.dataTransfer.setData(
+                'text/plain',
+                JSON.stringify(selectedIds),
+              );
+              evt.originalEvent.dataTransfer.setData(
+                'application/x-board-multi',
+                'true',
+              );
+            } catch (e) {}
+          } else {
+            try {
+              evt.originalEvent.dataTransfer.setData('text/plain', boardId);
+            } catch (e) {}
+          }
        },
        'click .js-clone-board'(evt) {
          if (confirm(TAPi18n.__('duplicate-board-confirm'))) {
@@ -287,47 +524,115 @@ BlazeComponent.extendComponent({
            }
          });
        },
+        'click .js-multiselection-activate'(evt) {
+          evt.preventDefault();
+          if (BoardMultiSelection.isActive()) {
+            BoardMultiSelection.disable();
+          } else {
+            BoardMultiSelection.activate();
+          }
+        },
+        'click .js-multiselection-reset'(evt) {
+          evt.preventDefault();
+          BoardMultiSelection.disable();
+        },
+        'click .js-toggle-board-multi-selection'(evt) {
+          evt.preventDefault();
+          evt.stopPropagation();
+          const boardId = this.currentData()._id;
+          BoardMultiSelection.toogle(boardId);
+        },
+        'click .js-archive-selected-boards'(evt) {
+          evt.preventDefault();
+          const selectedBoards = BoardMultiSelection.getSelectedBoardIds();
+          if (
+            selectedBoards.length > 0 &&
+            confirm(TAPi18n.__('archive-board-confirm'))
+          ) {
+            selectedBoards.forEach((boardId) => {
+              Meteor.call('archiveBoard', boardId);
+            });
+            BoardMultiSelection.reset();
+          }
+        },
+        'click .js-duplicate-selected-boards'(evt) {
+          evt.preventDefault();
+          const selectedBoards = BoardMultiSelection.getSelectedBoardIds();
+          if (
+            selectedBoards.length > 0 &&
+            confirm(TAPi18n.__('duplicate-board-confirm'))
+          ) {
+            selectedBoards.forEach((boardId) => {
+              const board = ReactiveCache.getBoard(boardId);
+              if (board) {
+                Meteor.call(
+                  'copyBoard',
+                  boardId,
+                  {
+                    sort: ReactiveCache.getBoards({ archived: false }).length,
+                    type: 'board',
+                    title: board.title,
+                  },
+                  (err, res) => {
+                    if (err) console.error(err);
+                  },
+                );
+              }
+            });
+            BoardMultiSelection.reset();
+          }
+        },
        'click #resetBtn'(event) {
-          let allBoards = document.getElementsByClassName("js-board");
+          let allBoards = document.getElementsByClassName('js-board');
          let currBoard;
          for (let i = 0; i < allBoards.length; i++) {
            currBoard = allBoards[i];
-            currBoard.style.display = "block";
+            currBoard.style.display = 'block';
          }
        },
        'click #filterBtn'(event) {
          event.preventDefault();
-          let selectedTeams = document.querySelectorAll('#jsAllBoardTeams option:checked');
-          let selectedTeamsValues = Array.from(selectedTeams).map(function (elt) { return elt.value });
-          let index = selectedTeamsValues.indexOf("-1");
+          let selectedTeams = document.querySelectorAll(
+            '#jsAllBoardTeams option:checked',
+          );
+          let selectedTeamsValues = Array.from(selectedTeams).map(
+            function (elt) {
+              return elt.value;
+            },
+          );
+          let index = selectedTeamsValues.indexOf('-1');
          if (index > -1) {
            selectedTeamsValues.splice(index, 1);
          }

-          let selectedOrgs = document.querySelectorAll('#jsAllBoardOrgs option:checked');
-          let selectedOrgsValues = Array.from(selectedOrgs).map(function (elt) { return elt.value });
-          index = selectedOrgsValues.indexOf("-1");
+          let selectedOrgs = document.querySelectorAll(
+            '#jsAllBoardOrgs option:checked',
+          );
+          let selectedOrgsValues = Array.from(selectedOrgs).map(function (elt) {
+            return elt.value;
+          });
+          index = selectedOrgsValues.indexOf('-1');
          if (index > -1) {
            selectedOrgsValues.splice(index, 1);
          }

          if (selectedTeamsValues.length > 0 || selectedOrgsValues.length > 0) {
            const query = {
-              $and: [
-                { archived: false },
-                { type: 'board' },
-                { $or: [] }
-              ]
+              $and: [{ archived: false }, { type: 'board' }],
            };
+            const ors = [];
            if (selectedTeamsValues.length > 0) {
-              query.$and[2].$or.push({ 'teams.teamId': { $in: selectedTeamsValues } });
+              ors.push({ 'teams.teamId': { $in: selectedTeamsValues } });
            }
            if (selectedOrgsValues.length > 0) {
-              query.$and[2].$or.push({ 'orgs.orgId': { $in: selectedOrgsValues } });
+              ors.push({ 'orgs.orgId': { $in: selectedOrgsValues } });
+            }
+            if (ors.length) {
+              query.$and.push({ $or: ors });
            }

            let filteredBoards = ReactiveCache.getBoards(query, {});
-            let allBoards = document.getElementsByClassName("js-board");
+            let allBoards = document.getElementsByClassName('js-board');
            let currBoard;
            if (filteredBoards.length > 0) {
              let currBoardId;
@@ -339,21 +644,312 @@ BlazeComponent.extendComponent({
                  return board._id == currBoardId;
                });

-                if (found !== undefined)
-                  currBoard.style.display = "block";
-                else
-                  currBoard.style.display = "none";
+                if (found !== undefined) currBoard.style.display = 'block';
+                else currBoard.style.display = 'none';
              }
-            }
-            else {
+            } else {
              for (let i = 0; i < allBoards.length; i++) {
                currBoard = allBoards[i];
-                currBoard.style.display = "none";
+                currBoard.style.display = 'none';
              }
            }
          }
        },
+        'click .js-edit-workspace'(evt) {
+          evt.preventDefault();
+          evt.stopPropagation();
+          const workspaceId = evt.currentTarget.getAttribute('data-id');
+
+          // Find the space in the tree
+          const findSpace = (nodes, id) => {
+            for (const node of nodes) {
+              if (node.id === id) return node;
+              if (node.children) {
+                const found = findSpace(node.children, id);
+                if (found) return found;
+              }
+            }
+            return null;
+          };
+
+          const tree = this.workspacesTreeVar.get();
+          const space = findSpace(tree, workspaceId);
+
+          if (space) {
+            const newName = prompt(
+              TAPi18n.__('allboards.edit-workspace-name') || 'Space name:',
+              space.name,
+            );
+            const newIcon = prompt(
+              TAPi18n.__('allboards.edit-workspace-icon') ||
+                'Space icon (markdown):',
+              space.icon || '📁',
+            );
+
+            if (newName !== null && newName.trim()) {
+              // Update space in tree
+              const updateSpaceInTree = (nodes, id, updates) => {
+                return nodes.map((node) => {
+                  if (node.id === id) {
+                    return { ...node, ...updates };
+                  }
+                  if (node.children) {
+                    return {
+                      ...node,
+                      children: updateSpaceInTree(node.children, id, updates),
+                    };
+                  }
+                  return node;
+                });
+              };
+
+              const updatedTree = updateSpaceInTree(tree, workspaceId, {
+                name: newName.trim(),
+                icon: newIcon || '📁',
+              });
+
+              Meteor.call('setWorkspacesTree', updatedTree, (err) => {
+                if (err) console.error(err);
+              });
+            }
+          }
+        },
+        'click .js-add-subworkspace'(evt) {
+          evt.preventDefault();
+          evt.stopPropagation();
+          const parentId = evt.currentTarget.getAttribute('data-id');
+          const name = prompt(
+            TAPi18n.__('allboards.add-subworkspace-prompt') || 'Subspace name:',
+          );
+
+          if (name && name.trim()) {
+            Meteor.call(
+              'createWorkspace',
+              { parentId, name: name.trim() },
+              (err) => {
+                if (err) console.error(err);
+              },
+            );
+          }
+        },
+        'dragstart .workspace-node'(evt) {
+          const workspaceId =
+            evt.currentTarget.getAttribute('data-workspace-id');
+          evt.originalEvent.dataTransfer.effectAllowed = 'move';
+          evt.originalEvent.dataTransfer.setData(
+            'application/x-workspace-id',
+            workspaceId,
+          );
+
+          // Create a better drag image
+          const dragImage = evt.currentTarget.cloneNode(true);
+          dragImage.style.position = 'absolute';
+          dragImage.style.top = '-9999px';
+          dragImage.style.opacity = '0.8';
+          document.body.appendChild(dragImage);
+          evt.originalEvent.dataTransfer.setDragImage(dragImage, 0, 0);
+          setTimeout(() => document.body.removeChild(dragImage), 0);
+
+          evt.currentTarget.classList.add('dragging');
+        },
+        'dragend .workspace-node'(evt) {
+          evt.currentTarget.classList.remove('dragging');
+          document.querySelectorAll('.workspace-node').forEach((el) => {
+            el.classList.remove('drag-over');
+          });
+        },
+        'dragover .workspace-node'(evt) {
+          evt.preventDefault();
+          evt.stopPropagation();
+
+          const draggingEl = document.querySelector('.workspace-node.dragging');
+          const targetEl = evt.currentTarget;
+
+          // Allow dropping boards on any space
+          // Or allow dropping spaces on other spaces (but not on itself or descendants)
+          if (
+            !draggingEl ||
+            (targetEl !== draggingEl && !draggingEl.contains(targetEl))
+          ) {
+            evt.originalEvent.dataTransfer.dropEffect = 'move';
+            targetEl.classList.add('drag-over');
+          }
+        },
+        'dragleave .workspace-node'(evt) {
+          evt.currentTarget.classList.remove('drag-over');
+        },
+        'drop .workspace-node'(evt) {
+          evt.preventDefault();
+          evt.stopPropagation();
+
+          const targetEl = evt.currentTarget;
+          targetEl.classList.remove('drag-over');
+
+          // Check what's being dropped - board or workspace
+          const draggedWorkspaceId = evt.originalEvent.dataTransfer.getData(
+            'application/x-workspace-id',
+          );
+          const isMultiBoard = evt.originalEvent.dataTransfer.getData(
+            'application/x-board-multi',
+          );
+          const boardData =
+            evt.originalEvent.dataTransfer.getData('text/plain');
+
+          if (draggedWorkspaceId && !boardData) {
+            // This is a workspace reorder operation
+            const targetWorkspaceId =
+              targetEl.getAttribute('data-workspace-id');
+
+            if (draggedWorkspaceId !== targetWorkspaceId) {
+              this.reorderWorkspaces(draggedWorkspaceId, targetWorkspaceId);
+            }
+          } else if (boardData) {
+            // This is a board assignment operation
+            // Get the workspace ID directly from the dropped workspace-node's data-workspace-id attribute
+            const workspaceId = targetEl.getAttribute('data-workspace-id');
+
+            if (workspaceId) {
+              if (isMultiBoard) {
+                // Multi-board drag
+                try {
+                  const boardIds = JSON.parse(boardData);
+                  boardIds.forEach((boardId) => {
+                    Meteor.call('assignBoardToWorkspace', boardId, workspaceId);
+                  });
+                } catch (e) {
+                  // Error parsing multi-board data
+                }
+              } else {
+                // Single board drag
+                Meteor.call('assignBoardToWorkspace', boardData, workspaceId);
+              }
+            }
+          }
+        },
+        'dragover .js-select-menu'(evt) {
+          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');
+          }
+        },
+        'dragleave .js-select-menu'(evt) {
+          evt.currentTarget.classList.remove('drag-over');
+        },
+        'drop .js-select-menu'(evt) {
+          evt.preventDefault();
+          evt.stopPropagation();
+
+          const menuType = evt.currentTarget.getAttribute('data-type');
+          evt.currentTarget.classList.remove('drag-over');
+
+          // Only handle drops on "remaining" menu
+          if (menuType !== 'remaining') return;
+
+          const isMultiBoard = evt.originalEvent.dataTransfer.getData(
+            'application/x-board-multi',
+          );
+          const boardData =
+            evt.originalEvent.dataTransfer.getData('text/plain');
+
+          if (boardData) {
+            if (isMultiBoard) {
+              // Multi-board drag - unassign all from workspaces
+              try {
+                const boardIds = JSON.parse(boardData);
+                boardIds.forEach((boardId) => {
+                  Meteor.call('unassignBoardFromWorkspace', boardId);
+                });
+              } catch (e) {
+                // Error parsing multi-board data
+              }
+            } else {
+              // Single board drag - unassign from workspace
+              Meteor.call('unassignBoardFromWorkspace', boardData);
+            }
+          }
+        },
      },
    ];
  },
+  // Helpers for templates
+  workspacesTree() {
+    return this.workspacesTreeVar.get();
+  },
+  selectedWorkspaceId() {
+    return this.selectedWorkspaceIdVar.get();
+  },
+  isSelectedMenu(type) {
+    return this.selectedMenu.get() === type;
+  },
+  isSpaceSelected(id) {
+    return this.selectedWorkspaceIdVar.get() === id;
+  },
+  menuItemCount(type) {
+    const currentUser = ReactiveCache.getCurrentUser();
+    const assignments =
+      (currentUser &&
+        currentUser.profile &&
+        currentUser.profile.boardWorkspaceAssignments) ||
+      {};
+
+    // Get all boards for counting
+    let query = {
+      $and: [
+        { archived: false },
+        { type: { $in: ['board', 'template-container'] } },
+        { $or: [{ 'members.userId': Meteor.userId() }] },
+        { title: { $not: { $regex: /^\^.*\^$/ } } },
+      ],
+    };
+    const allBoards = ReactiveCache.getBoards(query, {});
+
+    if (type === 'starred') {
+      return allBoards.filter(
+        (b) => currentUser && currentUser.hasStarred(b._id),
+      ).length;
+    } else if (type === 'templates') {
+      return allBoards.filter((b) => b.type === 'template-container').length;
+    } else if (type === 'remaining') {
+      // Count boards not in any workspace AND not templates
+      // Include starred boards (they appear in both Starred and Remaining)
+      return allBoards.filter(
+        (b) => !assignments[b._id] && b.type !== 'template-container',
+      ).length;
+    }
+    return 0;
+  },
+  workspaceCount(workspaceId) {
+    const currentUser = ReactiveCache.getCurrentUser();
+    const assignments =
+      (currentUser &&
+        currentUser.profile &&
+        currentUser.profile.boardWorkspaceAssignments) ||
+      {};
+
+    // Get all boards for counting
+    let query = {
+      $and: [
+        { archived: false },
+        { type: { $in: ['board', 'template-container'] } },
+        { $or: [{ 'members.userId': Meteor.userId() }] },
+        { title: { $not: { $regex: /^\^.*\^$/ } } },
+      ],
+    };
+    const allBoards = ReactiveCache.getBoards(query, {});
+
+    // Count boards directly assigned to this space (not including children)
+    return allBoards.filter((b) => assignments[b._id] === workspaceId).length;
+  },
+  canModifyBoards() {
+    const currentUser = ReactiveCache.getCurrentUser();
+    return currentUser && !currentUser.isCommentOnly();
+  },
+  hasBoardsSelected() {
+    return BoardMultiSelection.count() > 0;
+  },
 }).register('boardList');
@@ -0,0 +1,43 @@
+.calendar-view .fc {
+  --fc-button-text-color: #333;
+  --fc-button-bg-color: #f5f5f5;
+  --fc-button-border-color: rgba(0, 0, 0, 0.2);
+  --fc-button-hover-bg-color: #e6e6e6;
+  --fc-button-hover-border-color: rgba(0, 0, 0, 0.25);
+  --fc-button-active-bg-color: #d9d9d9;
+  --fc-button-active-border-color: rgba(0, 0, 0, 0.3);
+}
+
+.calendar-view .fc .fc-button-primary {
+  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2),
+    0 1px 2px rgba(0, 0, 0, 0.05);
+  background-image: linear-gradient(to bottom, #fff 0%, #e6e6e6 100%);
+}
+
+.calendar-view .fc .fc-button-primary:focus,
+.calendar-view .fc .fc-button-primary:not(:disabled).fc-button-active,
+.calendar-view .fc .fc-button-primary:not(:disabled):active {
+  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15),
+    0 1px 2px rgba(0, 0, 0, 0.05);
+}
+
+.calendar-create-close {
+  min-height: auto !important;
+  min-width: auto !important;
+  width: 32px;
+  height: 32px;
+  padding: 0 !important;
+  border: 0 !important;
+  background: transparent !important;
+  box-shadow: none !important;
+  color: #666 !important;
+  opacity: 0.8;
+}
+
+.calendar-create-close:hover,
+.calendar-create-close:focus {
+  background: transparent !important;
+  color: #111 !important;
+  opacity: 1;
+}
@@ -3,6 +3,7 @@ template(name="miniboard")
    class="minicard-{{colorClass}}")
    .minicard-title
      .handle
-        .fa.fa-arrows
+        span.drag-handle(title="{{_ 'dragBoard'}}")
+          i.fa.fa-arrows
      +viewer
        = title
@@ -0,0 +1,263 @@
+/* Original Positions View Styles */
+.original-positions-view {
+  margin: 10px 0;
+  padding: 15px;
+  background-color: #f8f9fa;
+  border: 1px solid #e9ecef;
+  border-radius: 6px;
+}
+
+.original-positions-header {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 15px;
+}
+
+.original-positions-header .btn {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+}
+
+.original-positions-content {
+  background-color: white;
+  border: 1px solid #dee2e6;
+  border-radius: 4px;
+  padding: 15px;
+}
+
+.original-positions-loading {
+  text-align: center;
+  padding: 20px;
+  color: #6c757d;
+  font-style: italic;
+}
+
+.original-positions-loading i {
+  margin-right: 8px;
+}
+
+.original-positions-filters {
+  margin-bottom: 20px;
+  padding-bottom: 15px;
+  border-bottom: 1px solid #dee2e6;
+}
+
+.original-positions-filters .btn-group {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 5px;
+}
+
+.original-positions-filters .btn {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  white-space: nowrap;
+}
+
+.original-positions-list {
+  max-height: 400px;
+  overflow-y: auto;
+}
+
+.original-position-item {
+  background-color: #f8f9fa;
+  border: 1px solid #e9ecef;
+  border-radius: 4px;
+  margin-bottom: 10px;
+  padding: 12px;
+  transition: all 0.2s ease;
+}
+
+.original-position-item:hover {
+  background-color: #e9ecef;
+  border-color: #ced4da;
+}
+
+.original-position-item:last-child {
+  margin-bottom: 0;
+}
+
+.original-position-item-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 8px;
+  font-weight: 600;
+  color: #495057;
+}
+
+.original-position-item-header i {
+  color: #6c757d;
+  width: 16px;
+  text-align: center;
+}
+
+.entity-type {
+  background-color: #007bff;
+  color: white;
+  padding: 2px 6px;
+  border-radius: 3px;
+  font-size: 11px;
+  font-weight: 500;
+  text-transform: uppercase;
+}
+
+.entity-name {
+  color: #212529;
+  font-weight: 600;
+}
+
+.entity-id {
+  color: #6c757d;
+  font-size: 11px;
+  font-family: monospace;
+}
+
+.original-position-item-details {
+  margin-left: 24px;
+}
+
+.original-position-description {
+  color: #495057;
+  margin-bottom: 6px;
+  font-size: 13px;
+}
+
+.original-title {
+  color: #6c757d;
+  font-size: 12px;
+  margin-bottom: 6px;
+  padding: 4px 6px;
+  background-color: #e9ecef;
+  border-radius: 3px;
+}
+
+.original-title strong {
+  color: #495057;
+}
+
+.original-position-date {
+  color: #6c757d;
+  font-size: 11px;
+}
+
+.no-original-positions {
+  text-align: center;
+  padding: 40px 20px;
+  color: #6c757d;
+  font-style: italic;
+}
+
+.no-original-positions i {
+  font-size: 24px;
+  margin-bottom: 10px;
+  display: block;
+  color: #adb5bd;
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+  .original-positions-view {
+    margin: 5px 0;
+    padding: 10px;
+  }
+
+  .original-positions-header {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 8px;
+  }
+
+  .original-positions-header .btn {
+    justify-content: center;
+  }
+
+  .original-positions-filters .btn-group {
+    justify-content: center;
+  }
+
+  .original-position-item-header {
+    flex-wrap: wrap;
+    gap: 6px;
+  }
+
+  .entity-name {
+    flex: 1;
+    min-width: 0;
+    word-break: break-word;
+  }
+
+  .original-position-item-details {
+    margin-left: 0;
+    margin-top: 8px;
+  }
+}
+
+/* Dark theme support */
+@media (prefers-color-scheme: dark) {
+  .original-positions-view {
+    background-color: #2d3748;
+    border-color: #4a5568;
+    color: #e2e8f0;
+  }
+
+  .original-positions-content {
+    background-color: #1a202c;
+    border-color: #4a5568;
+  }
+
+  .original-position-item {
+    background-color: #2d3748;
+    border-color: #4a5568;
+    color: #e2e8f0;
+  }
+
+  .original-position-item:hover {
+    background-color: #4a5568;
+    border-color: #718096;
+  }
+
+  .original-position-item-header {
+    color: #e2e8f0;
+  }
+
+  .original-position-item-header i {
+    color: #a0aec0;
+  }
+
+  .entity-name {
+    color: #e2e8f0;
+  }
+
+  .entity-id {
+    color: #a0aec0;
+  }
+
+  .original-position-description {
+    color: #e2e8f0;
+  }
+
+  .original-title {
+    background-color: #4a5568;
+    color: #a0aec0;
+  }
+
+  .original-title strong {
+    color: #e2e8f0;
+  }
+
+  .original-position-date {
+    color: #a0aec0;
+  }
+
+  .no-original-positions {
+    color: #a0aec0;
+  }
+
+  .no-original-positions i {
+    color: #718096;
+  }
+}
@@ -0,0 +1,82 @@
+<template name="originalPositionsView">
+  <div class="original-positions-view">
+    <div class="original-positions-header">
+      <button class="btn btn-sm btn-outline-secondary" onclick="{{toggleOriginalPositions}}">
+        <i class="fa fa-history"></i>
+        {{#if isShowingOriginalPositions}}Hide{{else}}Show{{/if}} Original Positions
+      </button>
+
+      {{#if isShowingOriginalPositions}}
+        <button class="btn btn-sm btn-outline-primary" onclick="{{refreshHistory}}">
+          <i class="fa fa-refresh"></i> Refresh
+        </button>
+      {{/if}}
+    </div>
+
+    {{#if isShowingOriginalPositions}}
+      <div class="original-positions-content">
+        {{#if isLoading}}
+          <div class="original-positions-loading">
+            <i class="fa fa-spinner fa-spin"></i> Loading original positions...
+          </div>
+        {{else}}
+          <div class="original-positions-filters">
+            <div class="btn-group btn-group-sm" role="group">
+              <button type="button"
+                      class="btn {{#if isFilterType 'all'}}btn-primary{{else}}btn-outline-secondary{{/if}}"
+                      onclick="{{setFilterType 'all'}}">
+                All
+              </button>
+              <button type="button"
+                      class="btn {{#if isFilterType 'swimlane'}}btn-primary{{else}}btn-outline-secondary{{/if}}"
+                      onclick="{{setFilterType 'swimlane'}}">
+                <i class="fa fa-bars"></i> Swimlanes
+              </button>
+              <button type="button"
+                      class="btn {{#if isFilterType 'list'}}btn-primary{{else}}btn-outline-secondary{{/if}}"
+                      onclick="{{setFilterType 'list'}}">
+                <i class="fa fa-columns"></i> Lists
+              </button>
+              <button type="button"
+                      class="btn {{#if isFilterType 'card'}}btn-primary{{else}}btn-outline-secondary{{/if}}"
+                      onclick="{{setFilterType 'card'}}">
+                <i class="fa fa-sticky-note"></i> Cards
+              </button>
+            </div>
+          </div>
+
+          <div class="original-positions-list">
+            {{#each getFilteredHistory}}
+              <div class="original-position-item">
+                <div class="original-position-item-header">
+                  <i class="fa {{getEntityTypeIcon entityType}}"></i>
+                  <span class="entity-type">{{getEntityTypeLabel entityType}}</span>
+                  <span class="entity-name">{{getEntityDisplayName this}}</span>
+                  <span class="entity-id">({{entityId}})</span>
+                </div>
+                <div class="original-position-item-details">
+                  <div class="original-position-description">
+                    {{getEntityOriginalPositionDescription this}}
+                  </div>
+                  {{#if originalTitle}}
+                    <div class="original-title">
+                      <strong>Original title:</strong> {{originalTitle}}
+                    </div>
+                  {{/if}}
+                  <div class="original-position-date">
+                    <small class="text-muted">Created: {{formatDate createdAt}}</small>
+                  </div>
+                </div>
+              </div>
+            {{else}}
+              <div class="no-original-positions">
+                <i class="fa fa-info-circle"></i>
+                No original position data available for this board.
+              </div>
+            {{/each}}
+          </div>
+        {{/if}}
+      </div>
+    {{/if}}
+  </div>
+</template>
@@ -0,0 +1,148 @@
+import { BlazeComponent } from 'meteor/peerlibrary:blaze-components';
+import { ReactiveVar } from 'meteor/reactive-var';
+import { Meteor } from 'meteor/meteor';
+import { Template } from 'meteor/templating';
+import './originalPositionsView.html';
+
+/**
+ * Component to display original positions for all entities on a board
+ */
+class OriginalPositionsViewComponent extends BlazeComponent {
+  onCreated() {
+    super.onCreated();
+    this.showOriginalPositions = new ReactiveVar(false);
+    this.boardHistory = new ReactiveVar([]);
+    this.isLoading = new ReactiveVar(false);
+    this.filterType = new ReactiveVar('all'); // 'all', 'swimlane', 'list', 'card'
+  }
+
+  onRendered() {
+    super.onRendered();
+    this.loadBoardHistory();
+  }
+
+  loadBoardHistory() {
+    const boardId = Session.get('currentBoard');
+    if (!boardId) return;
+
+    this.isLoading.set(true);
+
+    Meteor.call('positionHistory.getBoardHistory', boardId, (error, result) => {
+      this.isLoading.set(false);
+      if (error) {
+        console.error('Error loading board history:', error);
+        this.boardHistory.set([]);
+      } else {
+        this.boardHistory.set(result);
+      }
+    });
+  }
+
+  toggleOriginalPositions() {
+    this.showOriginalPositions.set(!this.showOriginalPositions.get());
+  }
+
+  isShowingOriginalPositions() {
+    return this.showOriginalPositions.get();
+  }
+
+  isLoading() {
+    return this.isLoading.get();
+  }
+
+  getBoardHistory() {
+    return this.boardHistory.get();
+  }
+
+  getFilteredHistory() {
+    const history = this.getBoardHistory();
+    const filterType = this.filterType.get();
+
+    if (filterType === 'all') {
+      return history;
+    }
+
+    return history.filter(item => item.entityType === filterType);
+  }
+
+  getSwimlanesHistory() {
+    return this.getBoardHistory().filter(item => item.entityType === 'swimlane');
+  }
+
+  getListsHistory() {
+    return this.getBoardHistory().filter(item => item.entityType === 'list');
+  }
+
+  getCardsHistory() {
+    return this.getBoardHistory().filter(item => item.entityType === 'card');
+  }
+
+  setFilterType(type) {
+    this.filterType.set(type);
+  }
+
+  getFilterType() {
+    return this.filterType.get();
+  }
+
+  getEntityDisplayName(entity) {
+    const position = entity.originalPosition || {};
+    return position.title || `Entity ${entity.entityId}`;
+  }
+
+  getEntityOriginalPositionDescription(entity) {
+    const position = entity.originalPosition || {};
+    let description = `Position: ${position.sort || 0}`;
+
+    if (entity.entityType === 'list' && entity.originalSwimlaneId) {
+      description += ` in swimlane ${entity.originalSwimlaneId}`;
+    } else if (entity.entityType === 'card') {
+      if (entity.originalSwimlaneId) {
+        description += ` in swimlane ${entity.originalSwimlaneId}`;
+      }
+      if (entity.originalListId) {
+        description += ` in list ${entity.originalListId}`;
+      }
+    }
+
+    return description;
+  }
+
+  getEntityTypeIcon(entityType) {
+    switch (entityType) {
+      case 'swimlane':
+        return 'fa-bars';
+      case 'list':
+        return 'fa-columns';
+      case 'card':
+        return 'fa-sticky-note';
+      default:
+        return 'fa-question';
+    }
+  }
+
+  getEntityTypeLabel(entityType) {
+    switch (entityType) {
+      case 'swimlane':
+        return 'Swimlane';
+      case 'list':
+        return 'List';
+      case 'card':
+        return 'Card';
+      default:
+        return 'Unknown';
+    }
+  }
+
+  formatDate(date) {
+    return new Date(date).toLocaleString();
+  }
+
+  refreshHistory() {
+    this.loadBoardHistory();
+  }
+}
+
+OriginalPositionsViewComponent.register('originalPositionsView');
+
+export default OriginalPositionsViewComponent;
@@ -55,6 +55,12 @@
  flex-direction: row;
  align-items: center;
 }
+.attachment-actions a {
+  margin-left: 16px;
+}
+.attachment-actions a:first-child {
+  margin-left: 0;
+}
 .add-attachment {
  display: flex;
  align-items: center;
@@ -106,9 +112,144 @@
  color: white;
  cursor: pointer;
  font-size: 4em;
-  top: 0;
-  right: 8px;
  position: absolute;
+  right: 50px;
+  top: 16px;
+}
+
+/* Upload progress indicators for drag-and-drop uploads */
+.minicard-upload-progress,
+.card-details-upload-progress {
+  background: #f8f9fa;
+  border: 1px solid #e9ecef;
+  border-radius: 4px;
+  padding: 12px;
+  margin: 8px 0;
+  font-size: 14px;
+}
+
+.upload-progress-header {
+  display: flex;
+  align-items: center;
+  margin-bottom: 8px;
+  font-weight: bold;
+  color: #495057;
+}
+
+.upload-progress-header i {
+  margin-right: 8px;
+  color: #007bff;
+}
+
+.upload-progress-item {
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 8px;
+  padding: 8px;
+  background: white;
+  border-radius: 3px;
+  border: 1px solid #dee2e6;
+}
+
+.upload-progress-item.upload-error {
+  border-color: #dc3545;
+  background: #f8d7da;
+}
+
+.upload-progress-filename {
+  font-weight: 500;
+  margin-bottom: 4px;
+  color: #495057;
+  word-break: break-all;
+}
+
+.upload-progress-bar {
+  width: 100%;
+  height: 6px;
+  background: #e9ecef;
+  border-radius: 3px;
+  overflow: hidden;
+  margin-bottom: 4px;
+}
+
+.upload-progress-fill {
+  height: 100%;
+  background: linear-gradient(90deg, #007bff, #0056b3);
+  transition: width 0.3s ease;
+  border-radius: 3px;
+}
+
+.upload-progress-item.upload-error .upload-progress-fill {
+  background: #dc3545;
+}
+
+.upload-progress-error,
+.upload-progress-success {
+  display: flex;
+  align-items: center;
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.upload-progress-error {
+  color: #dc3545;
+}
+
+.upload-progress-success {
+  color: #28a745;
+}
+
+.upload-progress-error i,
+.upload-progress-success i {
+  margin-right: 4px;
+}
+
+/* Minicard specific styles */
+.minicard-upload-progress {
+  margin: 4px 0;
+  padding: 8px;
+  font-size: 12px;
+}
+
+.minicard-upload-progress .upload-progress-item {
+  padding: 6px;
+  margin-bottom: 6px;
+}
+
+.minicard-upload-progress .upload-progress-filename {
+  font-size: 11px;
+}
+
+/* Card details specific styles */
+.card-details-upload-progress {
+  margin: 12px 0;
+  padding: 16px;
+}
+
+.card-details-upload-progress .upload-progress-header {
+  font-size: 16px;
+  margin-bottom: 12px;
+}
+
+.card-details-upload-progress .upload-progress-item {
+  padding: 12px;
+  margin-bottom: 10px;
+}
+
+.card-details-upload-progress .upload-progress-filename {
+  font-size: 14px;
+}
+
+/* Drag over state for minicards */
+.minicard.is-dragging-over {
+  border: 2px dashed #007bff !important;
+  background: rgba(0, 123, 255, 0.1) !important;
+}
+
+/* Drag over state for card details */
+.js-card-details.is-dragging-over {
+  border: 2px dashed #007bff !important;
+  background: rgba(0, 123, 255, 0.05) !important;
 }
 .attachment-arrow {
  font-size: 4em;
@@ -117,6 +258,20 @@
  align-self: center;
  margin: 0 20px;
 }
+#prev-attachment {
+  font-size: 4em;
+  color: white;
+  cursor: pointer;
+  align-self: center;
+  margin-left: 70px;
+}
+#next-attachment {
+  font-size: 4em;
+  color: white;
+  cursor: pointer;
+  align-self: center;
+  margin-right: 70px;
+}
 #viewer-content {
  display: flex;
  justify-content: center;
@@ -130,6 +285,13 @@
  max-width: 100%;
  max-height: 100%;
 }
+#video-viewer {
+  max-width: 100%;
+  max-height: 100%;
+}
+#audio-viewer {
+  max-width: 100%;
+}
 #pdf-viewer {
  width: 40vw;
  height: 100%;
@@ -164,9 +326,19 @@
  }
  #prev-attachment {
    left: 0;
+    position: absolute;
+    bottom: 2.2em;
+    font-size: 1.6em;
+    padding: 16px;
+    margin-left: 0;
  }
  #next-attachment {
    right: 0;
+    position: absolute;
+    bottom: 2.2em;
+    font-size: 1.6em;
+    padding: 16px;
+    margin-right: 0;
  }
  #pdf-viewer {
    width: 100%;
@@ -34,10 +34,11 @@ template(name="attachmentViewer")
  #viewer-overlay.hidden
    #viewer-top-bar
      span#attachment-name
-      a#viewer-close.fa.fa-times-thin
+      a#viewer-close
+        i.fa.fa-times-thin

    #viewer-container
-      i.fa.fa-chevron-left.attachment-arrow#prev-attachment
+      i.fa.fa-caret-left#prev-attachment
      #viewer-content
        img#image-viewer.hidden
        video#video-viewer.hidden(controls="true")
@@ -45,7 +46,7 @@ template(name="attachmentViewer")
        object#pdf-viewer.hidden(type="application/pdf")
          span.pdf-preview-error {{_ 'preview-pdf-not-supported' }}
        object#txt-viewer.hidden(type="text/plain")
-      i.fa.fa-chevron-right.attachment-arrow#next-attachment
+      i.fa.fa-caret-right#next-attachment

 template(name="attachmentGallery")

@@ -53,11 +54,11 @@ template(name="attachmentGallery")

    if canModifyCard
      a.attachment-item.add-attachment.js-add-attachment
-        i.fa.fa-plus.icon
+        i.fa.fa-plus

    each attachments

-      .attachment-item
+      .attachment-item(class="{{#if isAttachmentMigrating _id}}migrating{{/if}}")
        .attachment-thumbnail-container.open-preview(data-attachment-id="{{_id}}" data-card-id="{{ meta.cardId }}")
          if link
            if(isImage)
@@ -86,29 +87,31 @@ template(name="attachmentGallery")
                = name
              span.file-size ({{fileSize size}})
            .attachment-actions
-              a.js-download(href="{{link}}?download=true", download="{{name}}")
-                i.fa.fa-download.icon(title="{{_ 'download'}}")
+              a.js-download(href="{{link}}?download=true", download="{{name}}", title="{{_ 'download'}}")
+                i.fa.fa-arrow-down
              if currentUser.isBoardMember
                unless currentUser.isCommentOnly
                  unless currentUser.isWorker
-                    a.js-rename
-                      i.fa.fa-pencil-square-o.icon(title="{{_ 'rename'}}")
-                    a.js-confirm-delete
-                      i.fa.fa-trash.icon(title="{{_ 'delete'}}")
-                    a.fa.fa-navicon.icon.js-open-attachment-menu(data-attachment-link="{{link}}" title="{{_ 'attachmentActionsPopup-title'}}")
-
+                    a.js-rename(title="{{_ 'rename'}}")
+                      i.fa.fa-pencil-square-o
+                    a.js-confirm-delete(title="{{_ 'delete'}}")
+                      i.fa.fa-trash
+                    a.js-open-attachment-menu(data-attachment-link="{{link}}", title="{{_ 'attachmentActionsPopup-title'}}")
+                      i.fa.fa-bars
+        // Migration spinner overlay
+        if isAttachmentMigrating _id
+          .attachment-migration-overlay
+            .migration-spinner
+              i.fa.fa-cog.fa-spin
+            .migration-text {{_ 'migrating-attachment'}}

 template(name="attachmentActionsPopup")
  ul.pop-over-list
    li
      if isImage
        a(class="{{#if isCover}}js-remove-cover{{else}}js-add-cover{{/if}}")
-          i.fa.fa-book
          i.fa.fa-picture-o
-          if isCover
-            | {{_ 'remove-cover'}}
-          else
-            | {{_ 'add-cover'}}
+          | {{#if isCover}}{{_ 'remove-cover'}}{{else}}{{_ 'add-cover'}}{{/if}}
      if currentUser.isBoardAdmin
        if isImage
          a(class="{{#if isBackgroundImage}}js-remove-background-image{{else}}js-add-background-image{{/if}}")
@@ -1,6 +1,9 @@
 import { ReactiveCache } from '/imports/reactiveCache';
 import { ObjectID } from 'bson';
 import DOMPurify from 'dompurify';
+import { sanitizeHTML, sanitizeText } from '/imports/lib/secureDOMPurify';
+import uploadProgressManager from '../../lib/uploadProgressManager';
+import { attachmentMigrationManager } from '/client/lib/attachmentMigrationManager';

 const filesize = require('filesize');
 const prettyMilliseconds = require('pretty-ms');
@@ -268,7 +271,7 @@ Template.attachmentGallery.helpers({
    return ret;
  },
  sanitize(value) {
-    return DOMPurify.sanitize(value);
+    return sanitizeHTML(value);
  },
 });

@@ -296,44 +299,13 @@ Template.cardAttachmentsPopup.events({
    const files = event.currentTarget.files;
    if (files) {
      let uploads = [];
-      for (const file of files) {
-        const fileId = new ObjectID().toString();
-        let fileName = DOMPurify.sanitize(file.name);
+      const uploaders = handleFileUpload(card, files);

-        // 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,
-          meta: Utils.getCommonAttachmentMetaFrom(card),
-          chunkSize: 'dynamic',
-        };
-        config.meta.fileId = fileId;
-        const uploader = Attachments.insert(
-          config,
-          false,
-        );
+      uploaders.forEach(uploader => {
        uploader.on('start', function() {
          uploads.push(this);
          templateInstance.uploads.set(uploads);
        });
-        uploader.on('uploaded', (error, fileRef) => {
-          if (!error) {
-            if (fileRef.isImage) {
-              card.setCover(fileRef._id);
-            }
-          }
-        });
        uploader.on('end', (error, fileRef) => {
          uploads = uploads.filter(_upload => _upload.config.fileId != fileRef._id);
          templateInstance.uploads.set(uploads);
@@ -341,8 +313,7 @@ Template.cardAttachmentsPopup.events({
            Popup.back();
          }
        });
-        uploader.start();
-      }
+      });
    }
  },
  'click .js-computer-upload'(event, templateInstance) {
@@ -356,6 +327,105 @@ const MAX_IMAGE_PIXEL = Utils.MAX_IMAGE_PIXEL;
 const COMPRESS_RATIO = Utils.IMAGE_COMPRESS_RATIO;
 let pastedResults = null;

+// Shared upload logic for drag-and-drop functionality
+export function handleFileUpload(card, files) {
+  if (!files || files.length === 0) {
+    return [];
+  }
+
+  // Check if board allows attachments
+  const board = card.board();
+  if (!board || !board.allowsAttachments) {
+    if (process.env.DEBUG === 'true') {
+      console.warn('Attachments not allowed on this board');
+    }
+    return [];
+  }
+
+  // Check if user can modify the card
+  if (!Utils.canModifyCard()) {
+    if (process.env.DEBUG === 'true') {
+      console.warn('User does not have permission to modify this card');
+    }
+    return [];
+  }
+
+  const uploads = [];
+
+  for (const file of files) {
+    // Basic file validation
+    if (!file || !file.name) {
+      if (process.env.DEBUG === 'true') {
+        console.warn('Invalid file object');
+      }
+      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,
+      meta: Utils.getCommonAttachmentMetaFrom(card),
+      chunkSize: 'dynamic',
+    };
+    config.meta.fileId = fileId;
+
+    try {
+      const uploader = Attachments.insert(
+        config,
+        false,
+      );
+
+      // Add to progress manager for tracking
+      const uploadId = uploadProgressManager.addUpload(card._id, uploader, file);
+
+      uploader.on('uploaded', (error, fileRef) => {
+        if (!error) {
+          if (fileRef.isImage) {
+            card.setCover(fileRef._id);
+            if (process.env.DEBUG === 'true') {
+              console.log(`Set cover image for card ${card._id}: ${fileRef.name}`);
+            }
+          }
+        } else {
+          if (process.env.DEBUG === 'true') {
+            console.error('Upload error:', error);
+          }
+        }
+      });
+
+      uploader.on('error', (error) => {
+        if (process.env.DEBUG === 'true') {
+          console.error('Upload error:', error);
+        }
+      });
+
+      uploads.push(uploader);
+      uploader.start();
+    } catch (error) {
+      if (process.env.DEBUG === 'true') {
+        console.error('Failed to create uploader:', error);
+      }
+    }
+  }
+
+  return uploads;
+}
+
 Template.previewClipboardImagePopup.onRendered(() => {
  // we can paste image from clipboard
  const handle = results => {
@@ -498,7 +568,7 @@ BlazeComponent.extendComponent({
          const name = this.$('.js-edit-attachment-name')[0]
            .value
            .trim() + this.data().extensionWithDot;
-          if (name === DOMPurify.sanitize(name)) {
+          if (name === sanitizeText(name)) {
            Meteor.call('renameAttachment', this.data()._id, name);
          }
          Popup.back();
@@ -507,3 +577,20 @@ BlazeComponent.extendComponent({
    ]
  }
 }).register('attachmentRenamePopup');
+
+// Template helpers for attachment migration status
+Template.registerHelper('attachmentMigrationStatus', function(attachmentId) {
+  return attachmentMigrationManager.getAttachmentMigrationStatus(attachmentId);
+});
+
+Template.registerHelper('isAttachmentMigrating', function(attachmentId) {
+  return attachmentMigrationManager.isAttachmentBeingMigrated(attachmentId);
+});
+
+Template.registerHelper('attachmentMigrationProgress', function() {
+  return attachmentMigrationManager.attachmentMigrationProgress.get();
+});
+
+Template.registerHelper('attachmentMigrationStatusText', function() {
+  return attachmentMigrationManager.attachmentMigrationStatus.get();
+});
@@ -22,7 +22,7 @@ template(name="cardCustomField-text")
                = value
            .edit-controls.clearfix
                button.primary(type="submit") {{_ 'save'}}
-                a.fa.fa-times-thin.js-close-inlined-form
+                a.js-close-inlined-form
        else
            a.js-open-inlined-form
                if value
@@ -41,7 +41,7 @@ template(name="cardCustomField-number")
            input(type="number" value=data.value)
            .edit-controls.clearfix
                button.primary(type="submit") {{_ 'save'}}
-                a.fa.fa-times-thin.js-close-inlined-form
+                a.js-close-inlined-form
        else
            a.js-open-inlined-form
                if value
@@ -55,10 +55,11 @@ template(name="cardCustomField-number")
 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}}")
+      span.check-box-unicode
+        i.fa(class="{{#if data.value}}fa-check-square{{else}}fa-square-o{{/if}}")
    else
-      .materialCheckBox(class="{{#if data.value }}is-checked{{/if}}")
+      span.check-box-unicode
+        i.fa(class="{{#if data.value}}fa-check-square{{else}}fa-square-o{{/if}}")

 template(name="cardCustomField-currency")
    if canModifyCard
@@ -66,7 +67,7 @@ template(name="cardCustomField-currency")
            input(type="text" value=data.value autofocus)
            .edit-controls.clearfix
                button.primary(type="submit") {{_ 'save'}}
-                a.fa.fa-times-thin.js-close-inlined-form
+                a.js-close-inlined-form
        else
            a.js-open-inlined-form
                if value
@@ -113,7 +114,7 @@ template(name="cardCustomField-dropdown")
                            = name
            .edit-controls.clearfix
                button.primary(type="submit") {{_ 'save'}}
-                a.fa.fa-times-thin.js-close-inlined-form
+                a.js-close-inlined-form
        else
            a.js-open-inlined-form
                if value
@@ -134,7 +135,7 @@ template(name="cardCustomField-stringtemplate")
            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.fa.fa-times-thin.js-close-inlined-form
+                a.js-close-inlined-form
        else
            a.js-open-inlined-form
                if value
@@ -1,6 +1,27 @@
-import moment from 'moment/min/moment-with-locales';
 import { TAPi18n } from '/imports/i18n';
 import { DatePicker } from '/client/lib/datepicker';
+import { ReactiveCache } from '/imports/reactiveCache';
+import {
+  formatDateTime,
+  formatDate,
+  formatDateByUserPreference,
+  formatTime,
+  getISOWeek,
+  isValidDate,
+  isBefore,
+  isAfter,
+  isSame,
+  add,
+  subtract,
+  startOf,
+  endOf,
+  format,
+  parseDate,
+  now,
+  createDate,
+  fromNow,
+  calendar
+} from '/imports/lib/dateUtils';
 import Cards from '/models/cards';
 import { CustomFieldStringTemplate } from '/client/lib/customFields'

@@ -91,6 +112,7 @@ CardCustomField.register('cardCustomField');
  events() {
    return [
      {
+        'click .js-checklist-item .check-box-unicode': this.toggleItem,
        'click .js-checklist-item .check-box-container': this.toggleItem,
      },
    ];
@@ -134,31 +156,33 @@ CardCustomField.register('cardCustomField');
    super.onCreated();
    const self = this;
    self.date = ReactiveVar();
-    self.now = ReactiveVar(moment());
+    self.now = ReactiveVar(now());
    window.setInterval(() => {
-      self.now.set(moment());
+      self.now.set(now());
    }, 60000);

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

  showWeek() {
-    return this.date.get().week().toString();
+    return getISOWeek(this.date.get()).toString();
  }

  showWeekOfYear() {
-    return ReactiveCache.getCurrentUser().isShowWeekOfYear();
+    const user = ReactiveCache.getCurrentUser();
+    if (!user) {
+      // For non-logged-in users, week of year is not shown
+      return false;
+    }
+    return user.isShowWeekOfYear();
  }

  showDate() {
-    // this will start working once mquandalle:moment
-    // is updated to at least moment.js 2.10.5
-    // until then, the date is displayed in the "L" format
-    return this.date.get().calendar(null, {
-      sameElse: 'llll',
-    });
+    const currentUser = ReactiveCache.getCurrentUser();
+    const dateFormat = currentUser ? currentUser.getDateFormat() : 'YYYY-MM-DD';
+    return formatDateByUserPreference(this.date.get(), dateFormat, true);
  }

  showISODate() {
@@ -167,8 +191,8 @@ CardCustomField.register('cardCustomField');

  classes() {
    if (
-      this.date.get().isBefore(this.now.get(), 'minute') &&
-      this.now.get().isBefore(this.data().value)
+      isBefore(this.date.get(), this.now.get(), 'minute') &&
+      isBefore(this.now.get(), this.data().value, 'minute')
    ) {
      return 'current';
    }
@@ -176,7 +200,7 @@ CardCustomField.register('cardCustomField');
  }

  showTitle() {
-    return `${TAPi18n.__('card-start-on')} ${this.date.get().format('LLLL')}`;
+    return `${TAPi18n.__('card-start-on')} ${this.date.get().toLocaleString()}`;
  }

  events() {
@@ -195,7 +219,7 @@ CardCustomField.register('cardCustomField');
    const self = this;
    self.card = Utils.getCurrentCard();
    self.customFieldId = this.data()._id;
-    this.data().value && this.date.set(moment(this.data().value));
+    this.data().value && this.date.set(new Date(this.data().value));
  }

  _storeDate(date) {
@@ -8,57 +8,134 @@
 .card-date.is-active {
  background-color: #b3b3b3;
 }
-.card-date.current,
-.card-date.almost-due,
-.card-date.due,
-.card-date.long-overdue {
+/* Date status colors - red = overdue, amber = due soon, no shade = not due */
+.card-date.overdue {
+  background-color: #ff4444; /* Red for overdue */
  color: #fff;
 }
+.card-date.overdue:hover,
+.card-date.overdue.is-active {
+  background-color: #cc3333;
+}
+
+.card-date.due-soon {
+  background-color: #ffaa00; /* Amber for due soon */
+  color: #000;
+}
+.card-date.due-soon:hover,
+.card-date.due-soon.is-active {
+  background-color: #e69900;
+}
+
+.card-date.not-due {
+  /* No special background - uses default date type colors */
+}
+
 .card-date.current {
-  background-color: #5ba639;
+  background-color: #5ba639; /* Green for current/active */
+  color: #fff;
 }
 .card-date.current:hover,
 .card-date.current.is-active {
  background-color: #46802c;
 }
-.card-date.almost-due {
-  background-color: #edc909;
+
+.card-date.completed {
+  background-color: #90ee90; /* Light green for completed */
+  color: #000;
 }
-.card-date.almost-due:hover,
-.card-date.almost-due.is-active {
-  background-color: #bc9f07;
+.card-date.completed:hover,
+.card-date.completed.is-active {
+  background-color: #7dd87d;
 }
-.card-date.due {
-  background-color: #fa3f00;
+
+.card-date.completed-early {
+  background-color: #4caf50; /* Green for completed early */
+  color: #fff;
 }
-.card-date.due:hover,
-.card-date.due.is-active {
-  background-color: #c73200;
+.card-date.completed-early:hover,
+.card-date.completed-early.is-active {
+  background-color: #45a049;
 }
-.card-date.long-overdue {
-  background-color: #fd5d47;
+
+.card-date.completed-late {
+  background-color: #ff9800; /* Orange for completed late */
+  color: #fff;
 }
-.card-date.long-overdue:hover,
-.card-date.long-overdue.is-active {
-  background-color: #fd3e24;
+.card-date.completed-late:hover,
+.card-date.completed-late.is-active {
+  background-color: #f57c00;
+}
+
+.card-date.completed-on-time {
+  background-color: #2196f3; /* Blue for completed on time */
+  color: #fff;
+}
+.card-date.completed-on-time:hover,
+.card-date.completed-on-time.is-active {
+  background-color: #1976d2;
+}
+
+/* Date type specific colors */
+.card-date.received-date {
+  background-color: #dbdbdb; /* Light grey for received */
+}
+
+.card-date.received-date:hover,
+.card-date.received-date.is-active {
+  background-color: #b3b3b3;
+}
+
+.card-date.start-date {
+  background-color: #90ee90; /* Light green for start */
+  color: #000; /* Black text for start */
+}
+
+.card-date.start-date:hover,
+.card-date.start-date.is-active {
+  background-color: #7dd87d;
+}
+
+.card-date.due-date {
+  background-color: #ffd700; /* Yellow for due */
+  color: #000; /* Black text for due */
+}
+
+.card-date.due-date:hover,
+.card-date.due-date.is-active {
+  background-color: #e6c200;
+}
+
+.card-date.end-date {
+  background-color: #ffb3b3; /* Light red for end */
+  color: #000; /* Black text for end */
+}
+
+.card-date.end-date:hover,
+.card-date.end-date.is-active {
+  background-color: #ff9999;
 }
 .card-date.end-date time::before {
-  content: "\f253";
+  content: "🏁"; /* Finish flag - represents end/completion */
 }
 .card-date.due-date time::before {
-  content: "\f090";
+  content: "⏰"; /* Alarm clock - represents due/deadline */
 }
 .card-date.start-date time::before {
-  content: "\f251";
+  content: "🚀"; /* Rocket - represents start/launch */
 }
 .card-date.received-date time::before {
-  content: "\f08b";
+  content: "📥"; /* Inbox tray - represents received/incoming */
+}
+
+/* Generic date badge and custom field date */
+.card-date:not(.received-date):not(.start-date):not(.due-date):not(.end-date) time::before {
+  /*content: "📅"; // Calendar - represents generic date */
 }
 .card-date time::before {
-  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
-  -webkit-font-smoothing: antialiased;
  margin-right: 0.3em;
+  display: inline-block;
 }
 .customfield-date {
  display: block;
@@ -21,3 +21,135 @@ template(name="dateCustomField")
      if showWeekOfYear
        b
          | {{showWeek}}
+
+template(name="minicardReceivedDate")
+  if canModifyCard
+    a.js-edit-date.card-date.received-date(title="{{_ 'card-received'}} {{_ 'predicate-week'}} {{#if showWeekOfYear}}{{showWeek}}{{/if}}" class="{{classes}}")
+      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}}
+
+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}}
+
+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}}
+
+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}}
+
+template(name="minicardCustomFieldDate")
+  a(title="{{_ 'date'}} {{_ 'predicate-week'}} {{#if showWeekOfYear}}{{showWeek}}{{/if}}" class="{{classes}}")
+    time(datetime="{{showISODate}}")
+      | {{showDate}}
+      if showWeekOfYear
+        b
+          | {{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'}}
+
+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'}}
+
+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'}}
+
+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'}}
@@ -1,17 +1,38 @@
-import moment from 'moment/min/moment-with-locales';
 import { TAPi18n } from '/imports/i18n';
 import { DatePicker } from '/client/lib/datepicker';
+import {
+  formatDateTime,
+  formatDate,
+  formatDateByUserPreference,
+  formatTime,
+  getISOWeek,
+  isValidDate,
+  isBefore,
+  isAfter,
+  isSame,
+  add,
+  subtract,
+  startOf,
+  endOf,
+  format,
+  parseDate,
+  now,
+  createDate,
+  fromNow,
+  calendar,
+  diff
+} from '/imports/lib/dateUtils';

 // editCardReceivedDatePopup
 (class extends DatePicker {
  onCreated() {
-    super.onCreated(moment().format('YYYY-MM-DD HH:mm'));
+    super.onCreated(formatDateTime(now()));
    this.data().getReceived() &&
-      this.date.set(moment(this.data().getReceived()));
+      this.date.set(new Date(this.data().getReceived()));
  }

  _storeDate(date) {
-    this.card.setReceived(moment(date).format('YYYY-MM-DD HH:mm'));
+    this.card.setReceived(formatDateTime(date));
  }

  _deleteDate() {
@@ -22,22 +43,12 @@ import { DatePicker } from '/client/lib/datepicker';
 // editCardStartDatePopup
 (class extends DatePicker {
  onCreated() {
-    super.onCreated(moment().format('YYYY-MM-DD HH:mm'));
-    this.data().getStart() && this.date.set(moment(this.data().getStart()));
-  }
-
-  onRendered() {
-    super.onRendered();
-    if (moment.isDate(this.card.getReceived())) {
-      this.$('.js-datepicker').datepicker(
-        'setStartDate',
-        this.card.getReceived(),
-      );
-    }
+    super.onCreated(formatDateTime(now()));
+    this.data().getStart() && this.date.set(new Date(this.data().getStart()));
  }

  _storeDate(date) {
-    this.card.setStart(moment(date).format('YYYY-MM-DD HH:mm'));
+    this.card.setStart(formatDateTime(date));
  }

  _deleteDate() {
@@ -49,18 +60,11 @@ import { DatePicker } from '/client/lib/datepicker';
 (class extends DatePicker {
  onCreated() {
    super.onCreated('1970-01-01 17:00:00');
-    this.data().getDue() && this.date.set(moment(this.data().getDue()));
-  }
-
-  onRendered() {
-    super.onRendered();
-    if (moment.isDate(this.card.getStart())) {
-      this.$('.js-datepicker').datepicker('setStartDate', this.card.getStart());
-    }
+    this.data().getDue() && this.date.set(new Date(this.data().getDue()));
  }

  _storeDate(date) {
-    this.card.setDue(moment(date).format('YYYY-MM-DD HH:mm'));
+    this.card.setDue(formatDateTime(date));
  }

  _deleteDate() {
@@ -71,19 +75,12 @@ import { DatePicker } from '/client/lib/datepicker';
 // editCardEndDatePopup
 (class extends DatePicker {
  onCreated() {
-    super.onCreated(moment().format('YYYY-MM-DD HH:mm'));
-    this.data().getEnd() && this.date.set(moment(this.data().getEnd()));
-  }
-
-  onRendered() {
-    super.onRendered();
-    if (moment.isDate(this.card.getStart())) {
-      this.$('.js-datepicker').datepicker('setStartDate', this.card.getStart());
-    }
+    super.onCreated(formatDateTime(now()));
+    this.data().getEnd() && this.date.set(new Date(this.data().getEnd()));
  }

  _storeDate(date) {
-    this.card.setEnd(moment(date).format('YYYY-MM-DD HH:mm'));
+    this.card.setEnd(formatDateTime(date));
  }

  _deleteDate() {
@@ -100,27 +97,29 @@ const CardDate = BlazeComponent.extendComponent({
  onCreated() {
    const self = this;
    self.date = ReactiveVar();
-    self.now = ReactiveVar(moment());
+    self.now = ReactiveVar(now());
    window.setInterval(() => {
-      self.now.set(moment());
+      self.now.set(now());
    }, 60000);
  },

  showWeek() {
-    return this.date.get().week().toString();
+    return getISOWeek(this.date.get()).toString();
  },

  showWeekOfYear() {
-    return ReactiveCache.getCurrentUser().isShowWeekOfYear();
+    const user = ReactiveCache.getCurrentUser();
+    if (!user) {
+      // For non-logged-in users, week of year is not shown
+      return false;
+    }
+    return user.isShowWeekOfYear();
  },

  showDate() {
-    // this will start working once mquandalle:moment
-    // is updated to at least moment.js 2.10.5
-    // until then, the date is displayed in the "L" format
-    return this.date.get().calendar(null, {
-      sameElse: 'llll',
-    });
+    const currentUser = ReactiveCache.getCurrentUser();
+    const dateFormat = currentUser ? currentUser.getDateFormat() : 'YYYY-MM-DD';
+    return formatDateByUserPreference(this.date.get(), dateFormat, true);
  },

  showISODate() {
@@ -133,7 +132,7 @@ class CardReceivedDate extends CardDate {
    super.onCreated();
    const self = this;
    self.autorun(() => {
-      self.date.set(moment(self.data().getReceived()));
+      self.date.set(new Date(self.data().getReceived()));
    });
  }

@@ -143,21 +142,26 @@ class CardReceivedDate extends CardDate {
    const endAt = this.data().getEnd();
    const startAt = this.data().getStart();
    const theDate = this.date.get();
-    // if dueAt, endAt and startAt exist & are > receivedAt, receivedAt doesn't need to be flagged
+    const now = this.now.get();
+
+    // Received date logic: if received date is after start, due, or end dates, it's overdue
    if (
-      (startAt && theDate.isAfter(startAt)) ||
-      (endAt && theDate.isAfter(endAt)) ||
-      (dueAt && theDate.isAfter(dueAt))
-    )
-      classes += 'long-overdue';
-    else classes += 'current';
+      (startAt && isAfter(theDate, startAt)) ||
+      (endAt && isAfter(theDate, endAt)) ||
+      (dueAt && isAfter(theDate, dueAt))
+    ) {
+      classes += 'overdue';
+    } else {
+      classes += 'not-due';
+    }
    return classes;
  }

  showTitle() {
-    return `${TAPi18n.__('card-received-on')} ${this.date
-      .get()
-      .format('LLLL')}`;
+    const currentUser = ReactiveCache.getCurrentUser();
+    const dateFormat = currentUser ? currentUser.getDateFormat() : 'YYYY-MM-DD';
+    const formattedDate = formatDateByUserPreference(this.date.get(), dateFormat, true);
+    return `${TAPi18n.__('card-received-on')} ${formattedDate}`;
  }

  events() {
@@ -173,26 +177,35 @@ class CardStartDate extends CardDate {
    super.onCreated();
    const self = this;
    self.autorun(() => {
-      self.date.set(moment(self.data().getStart()));
+      self.date.set(new Date(self.data().getStart()));
    });
  }

  classes() {
-    let classes = 'start-date' + ' ';
+    let classes = 'start-date ';
    const dueAt = this.data().getDue();
    const endAt = this.data().getEnd();
    const theDate = this.date.get();
    const now = this.now.get();
-    // if dueAt or endAt exist & are > startAt, startAt doesn't need to be flagged
-    if ((endAt && theDate.isAfter(endAt)) || (dueAt && theDate.isAfter(dueAt)))
-      classes += 'long-overdue';
-    else if (theDate.isAfter(now)) classes += '';
-    else classes += 'current';
+
+    // Start date logic: if start date is after due or end dates, it's overdue
+    if ((endAt && isAfter(theDate, endAt)) || (dueAt && isAfter(theDate, dueAt))) {
+      classes += 'overdue';
+    } else if (isAfter(theDate, now)) {
+      // Start date is in the future - not due yet
+      classes += 'not-due';
+    } else {
+      // Start date is today or in the past - current/active
+      classes += 'current';
+    }
    return classes;
  }

  showTitle() {
-    return `${TAPi18n.__('card-start-on')} ${this.date.get().format('LLLL')}`;
+    const currentUser = ReactiveCache.getCurrentUser();
+    const dateFormat = currentUser ? currentUser.getDateFormat() : 'YYYY-MM-DD';
+    const formattedDate = formatDateByUserPreference(this.date.get(), dateFormat, true);
+    return `${TAPi18n.__('card-start-on')} ${formattedDate}`;
  }

  events() {
@@ -208,27 +221,48 @@ class CardDueDate extends CardDate {
    super.onCreated();
    const self = this;
    self.autorun(() => {
-      self.date.set(moment(self.data().getDue()));
+      self.date.set(new Date(self.data().getDue()));
    });
  }

  classes() {
-    let classes = 'due-date' + ' ';
+    let classes = 'due-date ';
    const endAt = this.data().getEnd();
    const theDate = this.date.get();
    const now = this.now.get();
-    // if the due date is after the end date, green - done early
-    if (endAt && theDate.isAfter(endAt)) classes += 'current';
-    // if there is an end date, don't need to flag the due date
-    else if (endAt) classes += '';
-    else if (now.diff(theDate, 'days') >= 2) classes += 'long-overdue';
-    else if (now.diff(theDate, 'minute') >= 0) classes += 'due';
-    else if (now.diff(theDate, 'days') >= -1) classes += 'almost-due';
+
+    // If there's an end date and it's before the due date, task is completed early
+    if (endAt && isBefore(endAt, theDate)) {
+      classes += 'completed-early';
+    }
+    // If there's an end date, don't show due date status since task is completed
+    else if (endAt) {
+      classes += 'completed';
+    }
+    // Due date logic based on current time
+    else {
+      const daysDiff = diff(theDate, now, 'days');
+
+      if (daysDiff < 0) {
+        // Due date is in the past - overdue
+        classes += 'overdue';
+      } else if (daysDiff <= 1) {
+        // Due today or tomorrow - due soon
+        classes += 'due-soon';
+      } else {
+        // Due date is more than 1 day away - not due yet
+        classes += 'not-due';
+      }
+    }
+
    return classes;
  }

  showTitle() {
-    return `${TAPi18n.__('card-due-on')} ${this.date.get().format('LLLL')}`;
+    const currentUser = ReactiveCache.getCurrentUser();
+    const dateFormat = currentUser ? currentUser.getDateFormat() : 'YYYY-MM-DD';
+    const formattedDate = formatDateByUserPreference(this.date.get(), dateFormat, true);
+    return `${TAPi18n.__('card-due-on')} ${formattedDate}`;
  }

  events() {
@@ -244,22 +278,33 @@ class CardEndDate extends CardDate {
    super.onCreated();
    const self = this;
    self.autorun(() => {
-      self.date.set(moment(self.data().getEnd()));
+      self.date.set(new Date(self.data().getEnd()));
    });
  }

  classes() {
-    let classes = 'end-date' + ' ';
+    let classes = 'end-date ';
    const dueAt = this.data().getDue();
    const theDate = this.date.get();
-    if (!dueAt) classes += '';
-    else if (theDate.isBefore(dueAt)) classes += 'current';
-    else if (theDate.isAfter(dueAt)) classes += 'due';
+
+    if (!dueAt) {
+      // No due date set - just show as completed
+      classes += 'completed';
+    } else if (isBefore(theDate, dueAt)) {
+      // End date is before due date - completed early
+      classes += 'completed-early';
+    } else if (isAfter(theDate, dueAt)) {
+      // End date is after due date - completed late
+      classes += 'completed-late';
+    } else {
+      // End date equals due date - completed on time
+      classes += 'completed-on-time';
+    }
    return classes;
  }

  showTitle() {
-    return `${TAPi18n.__('card-end-on')} ${this.date.get().format('LLLL')}`;
+    return `${TAPi18n.__('card-end-on')} ${format(this.date.get(), 'LLLL')}`;
  }

  events() {
@@ -279,16 +324,21 @@ class CardCustomFieldDate extends CardDate {
    super.onCreated();
    const self = this;
    self.autorun(() => {
-      self.date.set(moment(self.data().value));
+      self.date.set(new Date(self.data().value));
    });
  }

  showWeek() {
-    return this.date.get().week().toString();
+    return getISOWeek(this.date.get()).toString();
  }

  showWeekOfYear() {
-    return ReactiveCache.getCurrentUser().isShowWeekOfYear();
+    const user = ReactiveCache.getCurrentUser();
+    if (!user) {
+      // For non-logged-in users, week of year is not shown
+      return false;
+    }
+    return user.isShowWeekOfYear();
  }

  showDate() {
@@ -301,7 +351,10 @@ class CardCustomFieldDate extends CardDate {
  }

  showTitle() {
-    return `${this.date.get().format('LLLL')}`;
+    const currentUser = ReactiveCache.getCurrentUser();
+    const dateFormat = currentUser ? currentUser.getDateFormat() : 'YYYY-MM-DD';
+    const formattedDate = formatDateByUserPreference(this.date.get(), dateFormat, true);
+    return `${formattedDate}`;
  }

  classes() {
@@ -315,32 +368,62 @@ class CardCustomFieldDate extends CardDate {
 CardCustomFieldDate.register('cardCustomFieldDate');

 (class extends CardReceivedDate {
+  template() {
+    return 'minicardReceivedDate';
+  }
+
  showDate() {
-    return this.date.get().format('L');
+    const currentUser = ReactiveCache.getCurrentUser();
+    const dateFormat = currentUser ? currentUser.getDateFormat() : 'YYYY-MM-DD';
+    return formatDateByUserPreference(this.date.get(), dateFormat, true);
  }
 }.register('minicardReceivedDate'));

 (class extends CardStartDate {
+  template() {
+    return 'minicardStartDate';
+  }
+
  showDate() {
-    return this.date.get().format('YYYY-MM-DD HH:mm');
+    const currentUser = ReactiveCache.getCurrentUser();
+    const dateFormat = currentUser ? currentUser.getDateFormat() : 'YYYY-MM-DD';
+    return formatDateByUserPreference(this.date.get(), dateFormat, true);
  }
 }.register('minicardStartDate'));

 (class extends CardDueDate {
+  template() {
+    return 'minicardDueDate';
+  }
+
  showDate() {
-    return this.date.get().format('YYYY-MM-DD HH:mm');
+    const currentUser = ReactiveCache.getCurrentUser();
+    const dateFormat = currentUser ? currentUser.getDateFormat() : 'YYYY-MM-DD';
+    return formatDateByUserPreference(this.date.get(), dateFormat, true);
  }
 }.register('minicardDueDate'));

 (class extends CardEndDate {
+  template() {
+    return 'minicardEndDate';
+  }
+
  showDate() {
-    return this.date.get().format('YYYY-MM-DD HH:mm');
+    const currentUser = ReactiveCache.getCurrentUser();
+    const dateFormat = currentUser ? currentUser.getDateFormat() : 'YYYY-MM-DD';
+    return formatDateByUserPreference(this.date.get(), dateFormat, true);
  }
 }.register('minicardEndDate'));

 (class extends CardCustomFieldDate {
+  template() {
+    return 'minicardCustomFieldDate';
+  }
+
  showDate() {
-    return this.date.get().format('L');
+    const currentUser = ReactiveCache.getCurrentUser();
+    const dateFormat = currentUser ? currentUser.getDateFormat() : 'YYYY-MM-DD';
+    return formatDateByUserPreference(this.date.get(), dateFormat, true);
  }
 }.register('minicardCustomFieldDate'));

@@ -349,7 +432,7 @@ class VoteEndDate extends CardDate {
    super.onCreated();
    const self = this;
    self.autorun(() => {
-      self.date.set(moment(self.data().getVoteEnd()));
+      self.date.set(new Date(self.data().getVoteEnd()));
    });
  }
  classes() {
@@ -357,10 +440,12 @@ class VoteEndDate extends CardDate {
    return classes;
  }
  showDate() {
-    return this.date.get().format('L LT');
+    const currentUser = ReactiveCache.getCurrentUser();
+    const dateFormat = currentUser ? currentUser.getDateFormat() : 'YYYY-MM-DD';
+    return formatDateByUserPreference(this.date.get(), dateFormat, true);
  }
  showTitle() {
-    return `${TAPi18n.__('card-end-on')} ${this.date.get().format('LLLL')}`;
+    return `${TAPi18n.__('card-end-on')} ${this.date.get().toLocaleString()}`;
  }

  events() {
@@ -376,7 +461,7 @@ class PokerEndDate extends CardDate {
    super.onCreated();
    const self = this;
    self.autorun(() => {
-      self.date.set(moment(self.data().getPokerEnd()));
+      self.date.set(new Date(self.data().getPokerEnd()));
    });
  }
  classes() {
@@ -384,10 +469,12 @@ class PokerEndDate extends CardDate {
    return classes;
  }
  showDate() {
-    return this.date.get().format('l LT');
+    const currentUser = ReactiveCache.getCurrentUser();
+    const dateFormat = currentUser ? currentUser.getDateFormat() : 'YYYY-MM-DD';
+    return formatDateByUserPreference(this.date.get(), dateFormat, true);
  }
  showTitle() {
-    return `${TAPi18n.__('card-end-on')} ${this.date.get().format('LLLL')}`;
+    return `${TAPi18n.__('card-end-on')} ${format(this.date.get(), 'LLLL')}`;
  }

  events() {
@@ -17,10 +17,10 @@ BlazeComponent.extendComponent({
  events() {
    return [
      {
-        'submit .js-card-description'(event) {
+        async 'submit .js-card-description'(event) {
          event.preventDefault();
          const description = this.currentComponent().getValue();
-          this.data().setDescription(description);
+          await this.data().setDescription(description);
        },
        // Pressing Ctrl+Enter should submit the form
        'keydown form textarea'(evt) {
@@ -1,16 +1,46 @@
+/* Date Format Selector */
+.card-details-item-date-format {
+  margin-bottom: 12px;
+}
+
+.card-details-item-date-format .card-details-item-title {
+  font-size: 15px;
+  font-weight: bold;
+  margin-bottom: 6px;
+  color: #333;
+  letter-spacing: 0.03em;
+}
+
+.card-details-item-date-format .js-date-format-selector {
+  width: 100%;
+  padding: 9px 10px;
+  border: 1px solid #ddd;
+  border-radius: 5px;
+  background-color: #fff;
+  font-size: 15px;
+  cursor: pointer;
+  transition: border-color 0.15s, box-shadow 0.15s;
+}
+
+.card-details-item-date-format .js-date-format-selector:focus {
+  outline: none;
+  border-color: #007cba;
+  box-shadow: 0 0 0 2px rgba(0, 124, 186, 0.2);
+}
+
 .assignee {
-  border-radius: 3px;
  display: block;
  position: relative;
  float: left;
-  height: 30px;
-  width: 30px;
-  margin: .3vh;
+  height: clamp(24px, 3.5vw, 36px);
+  width: clamp(24px, 3.5vw, 36px);
+  margin: 0.3vh;
  cursor: pointer;
  user-select: none;
  z-index: 1;
  text-decoration: none;
  border-radius: 50%;
+  box-shadow: 0 1px 2px 0 rgba(0,0,0,0.04);
 }
 .assignee .avatar {
  overflow: hidden;
@@ -23,12 +53,18 @@
  background-color: #dbdbdb;
  color: #444;
  position: absolute;
+  text-align: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: bold;
 }
 .assignee .avatar.avatar-image {
  object-fit: cover;
  object-position: center;
  height: 100%;
  width: 100%;
+  display: block;
 }
 .assignee .assignee-presence-status {
  background-color: #b3b3b3;
@@ -39,7 +75,6 @@
  position: absolute;
  right: -1px;
  bottom: -1px;
-  border: 1px solid #fff;
  z-index: 15;
 }
 .assignee .assignee-presence-status.active {
@@ -63,6 +98,7 @@
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 2px #bfbfbf inset;
+  transition: box-shadow 0.12s;
 }
 .assignee.add-assignee:hover,
 .assignee.add-assignee.is-active {
@@ -70,47 +106,137 @@
 }
 .copied-tooltip {
  display: none;
-  padding: 0px 10px;
+  padding: 0 1.3vw;
  background-color: rgba(0,0,0,0.875);
  color: #fff;
-  border-radius: 5px;
+  border-radius: 0.7vw;
+  font-size: 0.98em;
 }
+
 .card-details {
  padding: 0;
  flex-shrink: 0;
-  flex-basis: 600px;
+  flex-basis: min(600px, 80vw);
  will-change: flex-basis;
-  overflow-y: scroll;
+  overflow-y: auto;
  overflow-x: hidden;
  background: #f7f7f7;
-  border-radius: bottom 3px;
+  border-radius: 0 0 0.4vw 0.4vw;
  z-index: 30;
  animation: flexGrowIn 0.1s;
-  box-shadow: 0 0 7px 0 #b3b3b3;
-  transition: flex-basis 0.1s;
+  box-shadow: 0 0 0.9vh 0 #b3b3b3;
+  transition: flex-basis 0.1s, box-shadow 0.15s;
  box-sizing: border-box;
 }
+
+/* Desktop mode: position card below board header */
+body.desktop-mode .card-details:not(.card-details-popup) {
+  position: fixed;
+  width: auto;
+  max-width: 800px;
+  flex-basis: auto;
+  border-radius: 8px;
+  z-index: 100;
+}
+
+/* Default position for first card or when dragged */
+body.desktop-mode .card-details:not(.card-details-popup):not([style*="left"]):not([style*="top"]) {
+  top: 50px;
+  left: 20px;
+  right: 20px;
+  bottom: 20px;
+}
+
+/* Stagger positions for multiple cards using nth-of-type */
+body.desktop-mode .card-details:not(.card-details-popup):nth-of-type(1) {
+  top: 50px;
+  left: 20px;
+}
+body.desktop-mode .card-details:not(.card-details-popup):nth-of-type(2) {
+  top: 80px;
+  left: 50px;
+}
+body.desktop-mode .card-details:not(.card-details-popup):nth-of-type(3) {
+  top: 110px;
+  left: 80px;
+}
+body.desktop-mode .card-details:not(.card-details-popup):nth-of-type(4) {
+  top: 140px;
+  left: 110px;
+}
+body.desktop-mode .card-details:not(.card-details-popup):nth-of-type(5) {
+  top: 170px;
+  left: 140px;
+}
+
+/* For expanded cards, set dimensions */
+body.desktop-mode .card-details:not(.card-details-popup):not(.card-details-collapsed) {
+  right: 20px;
+  bottom: 20px;
+}
+
+/* Collapsed card state - hide content and set height to title row only */
+.card-details.card-details-collapsed .card-details-canvas > *:not(.card-details-header) {
+  display: none !important;
+}
+.card-details.card-details-collapsed {
+  height: auto !important;
+  bottom: auto !important;
+  overflow: visible;
+}
+body.desktop-mode .card-details.card-details-collapsed {
+  bottom: auto !important;
+}
 .card-details .mCustomScrollBox {
  padding-left: 0;
 }
 .card-details .card-details-canvas {
  width: auto;
-  padding: 0 20px;
+  padding: 0 2.5vw;
 }
 .card-details .card-details-header {
  margin: 0 -20px 5px;
-  padding: 7px 20px;
+  padding: 8px 20px;
  background: #ededed;
  border-bottom: 1px solid #dbdbdb;
  position: sticky;
  top: 0px;
  z-index: 500;
+  display: flow-root;
+  min-height: 44px;
 }
 .card-details .card-details-header .card-number {
  color: #b3b3b3;
  display: inline-block;
-  margin-right: 5px;
+  margin-right: 6px;
 }
+
+/* Collapse toggle triangle */
+.card-details .card-details-header .card-collapse-toggle {
+  float: left;
+  font-size: 20px;
+  padding: 7px 10px;
+  margin-left: -10px;
+  margin-right: 5px;
+  cursor: pointer;
+  user-select: none;
+  color: #000;
+  vertical-align: middle;
+  line-height: 1.2;
+}
+
+.card-details .card-details-header .card-drag-handle {
+  font-size: 20px;
+  padding: 8px 10px;
+  margin-right: 10px;
+  cursor: move;
+  user-select: none;
+  display: inline-block;
+  float: right;
+  vertical-align: middle;
+  line-height: 1.2;
+}
+
 .card-details .card-details-header .close-card-details,
 .card-details .card-details-header .maximize-card-details,
 .card-details .card-details-header .minimize-card-details,
@@ -128,11 +254,19 @@
  font-size: 24px;
  padding: 5px 10px 5px 10px;
  margin-right: -8px;
+  cursor: pointer;
+  user-select: none;
+  vertical-align: middle;
+  line-height: 1.2;
+  transition: color 0.13s;
 }
-.card-details .card-details-header .close-card-details-mobile-web {
+.card-details .card-details-header .close-card-details-mobile-web,
+.card-details .card-details-header .card-mobile-desktop-toggle {
  font-size: 24px;
  padding: 5px;
-  margin-right: 40px;
+  margin-right: 5px;
+  cursor: pointer;
+  user-select: none;
 }
 .card-details .card-details-header .card-copy-button {
  font-size: 17px;
@@ -147,12 +281,44 @@
 .card-details .card-details-header .card-details-menu {
  font-size: 17px;
  padding: 10px;
+  vertical-align: middle;
+  line-height: 1.2;
 }
 .card-details .card-details-header .card-details-menu-mobile-web {
  font-size: 17px;
  padding: 10px;
  margin-right: 30px;
 }
+.card-details .card-details-header .card-mobile-desktop-toggle,
+.card-details .card-details-header .card-zoom-in,
+.card-details .card-details-header .card-zoom-out {
+  font-size: 24px;
+  padding: 5px 10px 5px 10px;
+  margin-right: 5px;
+  cursor: pointer;
+  user-select: none;
+  float: right;
+}
+
+/* Unify all card text to match title size */
+.card-details {
+  font-size: 1em;
+}
+.card-details p,
+.card-details span,
+.card-details div,
+.card-details a,
+.card-details label,
+.card-details input,
+.card-details textarea,
+.card-details select,
+.card-details button,
+.card-details .card-details-item-title,
+.card-details .card-label,
+.card-details .viewer {
+  font-size: inherit;
+  line-height: 1.5;
+}
 .card-details .card-details-header .card-details-watch {
  font-size: 17px;
  padding-left: 7px;
@@ -160,9 +326,13 @@
 }
 .card-details .card-details-header .card-details-title {
  font-weight: bold;
-  font-size: 1.33em;
+  font-size: 1.35em;
  margin: 7px 0 0;
  padding: 0;
+  display: inline-block;
+  vertical-align: middle;
+  line-height: 1.3;
+  letter-spacing: 0.01em;
 }
 .card-details .card-details-header .linked-card-location {
  font-style: italic;
@@ -177,10 +347,10 @@
  margin-bottom: 10px;
 }
 .card-details .card-details-header form.inlined-form .copied-tooltip {
-  padding: 0px 10px;
+  padding: 0 10px;
 }
 .card-details .card-details-header .card-details-list {
-  font-size: 0.85em;
+  font-size: 0.9em;
  margin-bottom: 3px;
 }
 .card-details .card-details-header .card-details-list a.card-details-list-title {
@@ -190,7 +360,7 @@
  display: inline-block;
  background: #e6e6e6;
  border-radius: 3px;
-  padding: 0px 5px;
+  padding: 0 5px;
 }
 .card-details .card-details-header .copied-tooltip {
  margin-right: 10px;
@@ -201,11 +371,13 @@
 }
 .card-details .card-description textarea {
  min-height: 100px;
+  resize: vertical;
 }
 .card-details .card-details-items {
  display: flex;
  flex-wrap: wrap;
  margin: 15px 0;
+  gap: 0.5em;
 }
 .card-details .card-details-items .card-details-item {
  margin-right: 0.5em;
@@ -256,15 +428,28 @@
    position: fixed;
    resize: both;
  }
+
+  /* Override for mobile mode even on larger screens */
+  body.mobile-mode .card-details {
+    width: 100vw !important;
+    top: 0 !important;
+    left: 0 !important;
+    right: 0 !important;
+    bottom: 0 !important;
+    height: 100vh !important;
+    max-height: 100vh !important;
+    resize: none !important;
+  }
+
  .card-details-maximized {
    padding: 0;
    flex-shrink: 0;
    flex-basis: calc(100% - 20px);
    will-change: flex-basis;
-    overflow-y: scroll;
-    overflow-x: scroll;
+    overflow-y: auto;
+    overflow-x: auto;
    background: #f7f7f7;
-    border-radius: bottom 3px;
+    border-radius: 0 0 3px 3px;
    z-index: 100;
    animation: flexGrowIn 0.1s;
    box-shadow: 0 0 7px 0 #b3b3b3;
@@ -307,19 +492,52 @@ input[type="submit"].attachment-add-link-submit {
 }
@media screen and (max-width: 800px) {
  .card-details {
-    width: calc(100% - 1px);
-    padding: 0px 20px 0px 20px;
-    margin: 0px;
+    width: 100% !important;
+    padding: 0 !important;
+    margin: 0 !important;
    transition: none;
-    overflow-y: revert;
-    overflow-x: revert;
+    overflow-y: auto;
+    overflow-x: hidden;
+    -webkit-overflow-scrolling: touch;
+    position: fixed !important;
+    top: 0 !important;
+    left: 0 !important;
+    right: 0 !important;
+    bottom: 0 !important;
+    z-index: 100 !important;
+    height: 100vh !important;
+    max-height: 100vh !important;
+    border-radius: 0 !important;
+    box-shadow: none !important;
+  }
+
+  /* Ensure card details are above everything on mobile */
+  body.mobile-mode .card-details {
+    z-index: 100 !important;
+    width: 100vw !important;
+    left: 0 !important;
+    right: 0 !important;
  }
  .card-details .card-details-canvas {
    width: 100%;
    padding-left: 0px;
+    padding: 0 15px;
  }
  .card-details .card-details-header .close-card-details {
    margin-right: 0px;
+    display: block !important;
+  }
+  .card-details .card-details-header .close-card-details-mobile-web {
+    display: block !important;
+    margin-right: 5px !important;
+  }
+  .card-details .card-details-header .card-mobile-desktop-toggle {
+    display: block !important;
+    margin-right: 5px !important;
+  }
+  .card-details .card-details-header .card-mobile-desktop-toggle {
+    display: block !important;
+    margin-right: 5px !important;
  }
  .card-details .card-details-header .card-details-menu {
    margin-right: 40px;
@@ -345,6 +563,62 @@ input[type="submit"].attachment-add-link-submit {
  .pop-over > .content-wrapper > .popup-container-depth-0 .card-details-header {
    margin: 0;
  }
+  /* iPhone mobile: enlarge header buttons and increase spacing */
+  body.mobile-mode.iphone-device .card-details .card-details-header {
+    padding-right: 16px;
+  }
+  body.mobile-mode.iphone-device .card-details .card-details-header .close-card-details,
+  body.mobile-mode.iphone-device .card-details .card-details-header .maximize-card-details,
+  body.mobile-mode.iphone-device .card-details .card-details-header .minimize-card-details,
+  body.mobile-mode.iphone-device .card-details .card-details-header .card-details-menu-mobile-web,
+  body.mobile-mode.iphone-device .card-details .card-details-header .card-copy-mobile-button,
+  body.mobile-mode.iphone-device .card-details .card-details-header .card-mobile-desktop-toggle,
+  body.mobile-mode.iphone-device .card-details .card-details-header .card-zoom-in,
+  body.mobile-mode.iphone-device .card-details .card-details-header .card-zoom-out {
+    font-size: 2em !important; /* 2x bigger */
+    padding: 0.3em !important;
+    margin-right: 0.75em !important; /* 2x space compared to default */
+    margin-left: 0 !important;
+  }
+  /* Avoid clipping of the close button on the right edge */
+  body.mobile-mode.iphone-device .card-details .card-details-header .close-card-details {
+    margin-right: 0.75em !important;
+  }
+  /* Enlarge the header title too */
+  body.mobile-mode.iphone-device .card-details .card-details-header .card-details-title {
+    font-size: 1.2em !important;
+    font-weight: bold;
+  }
+}
+
+/* Mobile mode styles - apply when body has mobile-mode class regardless of screen size */
+body.mobile-mode .card-details {
+  width: 100vw !important;
+  padding: 0px !important;
+  margin: 0px !important;
+  position: fixed !important;
+  top: 0 !important;
+  left: 0 !important;
+  right: 0 !important;
+  bottom: 0 !important;
+  z-index: 100 !important;
+  height: 100vh !important;
+  max-height: 100vh !important;
+  border-radius: 0 !important;
+  box-shadow: none !important;
+  overflow-y: auto !important;
+  overflow-x: hidden !important;
+  -webkit-overflow-scrolling: touch;
+}
+
+body.mobile-mode .card-details .card-details-canvas {
+  width: 100% !important;
+  padding: 0 15px !important;
+}
+
+body.mobile-mode .card-details .card-details-header .close-card-details,
+body.mobile-mode .card-details .card-details-header .close-card-details-mobile-web {
+  display: block !important;
 }
 .card-details-white {
  background: #fff !important;
@@ -453,13 +727,15 @@ input[type="submit"].attachment-add-link-submit {
 .vote-title {
  display: flex;
  justify-content: space-between;
+  align-items: center;
 }
 .vote-title .js-edit-date {
-  align-self: baseline;
-  margin-left: 5px;
+  align-self: flex-start;
+  margin-left: 6px;
 }
 .vote-result {
  display: flex;
+  gap: 6px;
 }
 .js-show-positive-votes {
  cursor: pointer;
@@ -470,29 +746,33 @@ input[type="submit"].attachment-add-link-submit {
 .poker-title {
  display: flex;
  justify-content: space-between;
+  align-items: center;
 }
 .poker-title .js-edit-date {
-  align-self: baseline;
-  margin-left: 5px;
+  align-self: flex-start;
+  margin-left: 6px;
 }
 .poker-result {
  display: flex;
-  flex-flow: row wrap;
+  flex-wrap: wrap;
+  gap: 7px;
 }
 .js-show-positive-poker-votes {
  cursor: pointer;
 }
 .poker-deck {
  display: grid;
-  flex-direction: column;
+  grid-auto-flow: row;
  text-align: center;
+  gap: 6px;
 }
 .poker-card-result {
-  width: 32px;
+  width: 34px;
  font-size: 1em;
  font-weight: bold;
-  padding: 4px 2px 4px 2px;
+  padding: 4px 2px;
  cursor: default;
+  border-radius: 3px;
 }
 .winner {
  font-weight: bold;
@@ -503,6 +783,7 @@ input[type="submit"].attachment-add-link-submit {
 }
 .responsive-table {
  overflow-x: auto;
+  width: 100%;
 }
 .poker-table {
  display: table;
@@ -565,11 +846,15 @@ input[type="submit"].attachment-add-link-submit {
  margin: auto;
  margin-right: 10px;
  width: 100px;
+  border-radius: 2px;
+  padding: 3px 6px;
 }
 .estimation-add button {
  display: inline-block;
  float: right;
  margin: auto;
+  border-radius: 2px;
+  padding: 3px 10px;
 }
 .poker-card {
  width: 48px;
@@ -588,6 +873,7 @@ input[type="submit"].attachment-add-link-submit {
  text-align: center;
  position: relative;
  cursor: pointer;
+  transition: box-shadow 0.12s;
 }
 .poker-card .inner {
  display: table-cell;
@@ -596,3 +882,11 @@ input[type="submit"].attachment-add-link-submit {
  overflow: hidden;
  background-color: #cecece;
 }
+
+/* Drag and drop file upload visual feedback */
+.js-card-details.is-dragging-over {
+  border: 2px dashed #0079bf;
+  background-color: #e3f2fd !important;
+  transform: scale(1.01);
+  transition: all 0.2s ease;
+}
@@ -5,49 +5,73 @@ template(name="cardDetails")

  +attachmentViewer

-  section.card-details.js-card-details.nodragscroll(class='{{#if cardMaximized}}card-details-maximized{{/if}}' class='{{#if isPopup}}card-details-popup{{/if}}' class='{{#unless isVerticalScrollbars}}no-scrollbars{{/unless}}'): .card-details-canvas
+  section.card-details.js-card-details.nodragscroll(class='{{#if cardMaximized}}card-details-maximized{{/if}}' class='{{#if isPopup}}card-details-popup{{/if}}' class='{{#unless isVerticalScrollbars}}no-scrollbars{{/unless}}' class='{{#if cardCollapsed}}card-details-collapsed{{/if}}'): .card-details-canvas
    .card-details-header(class='{{#if colorClass}}card-details-{{colorClass}}{{/if}}')
      +inlinedForm(classNames="js-card-details-title")
        +editCardTitleForm
      else
        unless isMiniScreen
          unless isPopup
-            a.fa.fa-times-thin.close-card-details.js-close-card-details(title="{{_ 'close-card'}}")
-            if canModifyCard
-              if cardMaximized
-                a.fa.fa-window-minimize.minimize-card-details.js-minimize-card-details(title="{{_ 'minimize-card'}}")
+            span.card-collapse-toggle.js-card-collapse-toggle(title="{{_ 'collapse-card'}}")
+              if cardCollapsed
+                i.fa.fa-caret-right
              else
-                a.fa.fa-window-maximize.maximize-card-details.js-maximize-card-details(title="{{_ 'maximize-card'}}")
-          if canModifyCard
-            a.fa.fa-navicon.card-details-menu.js-open-card-details-menu(title="{{_ 'cardDetailsActionsPopup-title'}}")
-            a.fa.fa-link.card-copy-button.js-copy-link(
+                i.fa.fa-caret-down
+            a.close-card-details.js-close-card-details(title="{{_ 'close-card'}}")
+              i.fa.fa-times-thin
+            if cardMaximized
+              a.fa.fa-window-minimize.minimize-card-details.js-minimize-card-details(title="{{_ 'minimize-card'}}")
+            else
+              a.fa.fa-window-maximize.maximize-card-details.js-maximize-card-details(title="{{_ 'maximize-card'}}")
+            a.card-details-menu.js-open-card-details-menu(title="{{_ 'cardDetailsActionsPopup-title'}}")
+              i.fa.fa-bars
+            a.card-copy-button.js-copy-link(
              id="cardURL_copy"
-              class="fa-link"
              title="{{_ 'copy-card-link-to-clipboard'}}"
              href="{{ originRelativeUrl }}"
            )
+              span.emoji-icon
+                i.fa.fa-link
+            if canModifyCard
+              span.card-drag-handle.js-card-drag-handle(title="Drag card")
+                i.fa.fa-arrows
            span.copied-tooltip {{_ 'copied'}}
        else
-          unless isPopup
-            a.fa.fa-times-thin.close-card-details.js-close-card-details(title="{{_ 'close-card'}}")
-          if canModifyCard
-            a.fa.fa-navicon.card-details-menu-mobile-web.js-open-card-details-menu(title="{{_ 'cardDetailsActionsPopup-title'}}")
-            a.fa.fa-link.card-copy-mobile-button.js-copy-link(
-              id="cardURL_copy"
-              class="fa-link"
-              title="{{_ 'copy-card-link-to-clipboard'}}"
-              href="{{ originRelativeUrl }}"
-            )
-            span.copied-tooltip {{_ 'copied'}}
+          a.close-card-details.js-close-card-details(title="{{_ 'close-card'}}")
+            i.fa.fa-times-thin
+          a.card-zoom-out.js-card-zoom-out(title="{{_ 'zoom-out'}}")
+            i.fa.fa-search-minus
+          a.card-zoom-in.js-card-zoom-in(title="{{_ 'zoom-in'}}")
+            i.fa.fa-search-plus
+          a.card-mobile-desktop-toggle.js-card-mobile-desktop-toggle(title="{{_ 'mobile-desktop-toggle'}}")
+            if mobileMode
+              i.fa.fa-desktop
+            else
+              i.fa.fa-mobile
+          if cardMaximized
+            a.fa.fa-window-minimize.minimize-card-details.js-minimize-card-details(title="{{_ 'minimize-card'}}")
+          else
+            a.fa.fa-window-maximize.maximize-card-details.js-maximize-card-details(title="{{_ 'maximize-card'}}")
+          a.card-details-menu-mobile-web.js-open-card-details-menu(title="{{_ 'cardDetailsActionsPopup-title'}}")
+            i.fa.fa-bars
+          a.card-copy-mobile-button.js-copy-link(
+            id="cardURL_copy"
+            title="{{_ 'copy-card-link-to-clipboard'}}"
+            href="{{ originRelativeUrl }}"
+          )
+            span.emoji-icon
+              i.fa.fa-link
+          span.copied-tooltip {{_ 'copied'}}
        h2.card-details-title.js-card-title(
-          class="{{#if canModifyCard}}js-open-inlined-form is-editable{{/if}}")
+          class="{{#if canModifyCard}}js-open-inlined-form is-editable{{else}}js-card-title-drag-handle{{/if}}")
            +viewer
              if currentBoard.allowsCardNumber
                span.card-number
                  | ##{getCardNumber}
              = getTitle
            if isWatching
-              i.card-details-watch.fa.fa-eye
+              i.card-details-watch
+                i.fa.fa-eye
        .card-details-path
          each parentList
            | &nbsp; &gt; &nbsp;
@@ -65,6 +89,26 @@ template(name="cardDetails")
      else
        p.warning {{_ 'card-archived'}}

+    // Upload progress indicator for drag-and-drop uploads
+    if hasActiveUploads
+      .card-details-upload-progress
+        .upload-progress-header
+          i.fa.fa-upload
+          span {{_ 'uploading-files'}} ({{uploadCount}})
+        each uploads
+          .upload-progress-item(class="{{#if $eq status 'error'}}upload-error{{/if}}")
+            .upload-progress-filename {{file.name}}
+            .upload-progress-bar
+              .upload-progress-fill(style="width: {{progress}}%")
+            if $eq status 'error'
+              .upload-progress-error
+                i.fa.fa-exclamation-triangle
+                span {{_ 'upload-failed'}}
+            else if $eq status 'completed'
+              .upload-progress-success
+                i.fa.fa-check
+                span {{_ 'upload-completed'}}
+
    .card-details-left

      .card-details-items
@@ -86,6 +130,16 @@ template(name="cardDetails")
        if currentBoard.hasAnyAllowsDate
          hr

+          .card-details-item.card-details-item-date-format
+            h3.card-details-item-title
+              i.fa.fa-calendar
+              | {{_ 'date-format'}}
+            .card-details-item-content
+              select.js-date-format-selector
+                option(value="YYYY-MM-DD" selected="{{#if isDateFormat 'YYYY-MM-DD'}}selected{{/if}}") {{_ 'date-format-yyyy-mm-dd'}}
+                option(value="DD-MM-YYYY" selected="{{#if isDateFormat 'DD-MM-YYYY'}}selected{{/if}}") {{_ 'date-format-dd-mm-yyyy'}}
+                option(value="MM-DD-YYYY" selected="{{#if isDateFormat 'MM-DD-YYYY'}}selected{{/if}}") {{_ 'date-format-mm-dd-yyyy'}}
+
        if currentBoard.allowsReceivedDate
          .card-details-item.card-details-item-received
            h3.card-details-item-title
@@ -115,7 +169,7 @@ template(name="cardDetails")
        if currentBoard.allowsDueDate
          .card-details-item.card-details-item-due
            h3.card-details-item-title
-              i.fa.fa-sign-in
+              i.fa.fa-clock-o
              | {{_ 'card-due'}}
            if getDue
              +cardDueDate
@@ -228,7 +282,7 @@ template(name="cardDetails")
        if currentBoard.allowsCardSortingByNumber
          .card-details-item.card-details-sort-order
            h3.card-details-item-title
-              i.fa.fa-sort
+              i.fa.fa-sort-numeric-asc
              | {{_ 'sort'}}
            if canModifyCard
              +inlinedForm(classNames="js-card-details-sort")
@@ -267,7 +321,7 @@ template(name="cardDetails")
              hr
            .card-details-item.card-details-item-customfield
              h3.card-details-item-title
-                i.fa.fa-list-alt
+                i.fa.fa-list
                = definition.name
              +cardCustomField

@@ -278,7 +332,7 @@ template(name="cardDetails")
              else
                input.toggle-switch(type="checkbox" id="toggleCustomFieldsGridButton")
              label.toggle-label(for="toggleCustomFieldsGridButton")
-          a.fa.fa-plus.js-custom-fields.card-details-item.custom-fields(title="{{_ 'custom-fields'}}")
+          a.js-custom-fields.card-details-item.custom-fields(title="{{_ 'custom-fields'}}")

      if getVoteQuestion
        hr
@@ -297,7 +351,8 @@ template(name="cardDetails")
              .card-label.card-label-green {{ voteCountPositive }}
              .card-label.card-label-red {{ voteCountNegative }}
            unless ($and currentBoard.isPublic voteAllowNonBoardMembers )
-              .card-label.card-label-gray  {{ voteCount }} {{_ 'r-of' }} {{ currentBoard.activeMembers.length }}
+              .card-label.card-label-gray
+                | {{ voteCount }} {{_ 'r-of' }} {{ currentBoard.activeMembers.length }}
        +viewer
          = getVoteQuestion
        if showVotingButtons
@@ -307,7 +362,7 @@ template(name="cardDetails")
            | {{_ 'vote-for-it'}}
          button.card-details-red.js-vote.js-vote-negative(class="{{#if $eq voteState false}}voted{{/if}}")
            if $eq voteState false
-              i.fa.fa-thumbs-down
+              | 👎
            | {{_ 'vote-against'}}

      if getPokerQuestion
@@ -323,7 +378,8 @@ template(name="cardDetails")
            .poker-result
              if expiredPoker
                unless ($and currentBoard.isPublic pokerAllowNonBoardMembers )
-                  .card-label.card-label-gray  {{ pokerCount }} {{_ 'r-of' }} {{ currentBoard.activeMembers.length }}
+                  .card-label.card-label-gray
+                    | {{ pokerCount }} {{_ 'r-of' }} {{ currentBoard.activeMembers.length }}
        if showPlanningPokerButtons
          .poker-result
            .poker-deck
@@ -515,14 +571,14 @@ template(name="cardDetails")
          if currentBoard.allowsDescriptionTitle
            hr
            h3.card-details-item-title
-              i.fa.fa-align-left
+              i.fa.fa-file-text-o
              | {{_ 'description'}}
          if currentBoard.allowsDescriptionText
            +inlinedCardDescription(classNames="card-description js-card-description")
              +descriptionForm
              .edit-controls.clearfix
                button.primary(type="submit") {{_ 'save'}}
-                a.fa.fa-times-thin.js-close-inlined-form
+                a.js-close-inlined-form
            else
              if currentBoard.allowsDescriptionText
                a.js-open-inlined-form(title="{{_ 'edit'}}" value=title)
@@ -578,13 +634,15 @@ template(name="cardDetails")
        if currentBoard.allowsComments
          if currentUser.isBoardMember
            unless currentUser.isNoComments
-              +commentForm
+              unless currentUser.isReadOnly
+                unless currentUser.isReadAssignedOnly
+                  +commentForm
              +comments
      hr

    .card-details-right

-      unless currentUser.isNoComments
+      if currentUser.isBoardAdmin
        .activity-title
          h3.card-details-item-title
            i.fa.fa-history
@@ -597,7 +655,7 @@ template(name="cardDetails")
                input.toggle-switch(type="checkbox" id="toggleShowActivitiesCard")
              label.toggle-label(for="toggleShowActivitiesCard")

-      unless currentUser.isNoComments
+      if currentUser.isBoardAdmin
        if isLoaded.get
          if isLinkedCard
            +activities(card=this mode="linkedcard")
@@ -607,31 +665,31 @@ template(name="cardDetails")
            +activities(card=this mode="card")

 template(name="editCardTitleForm")
-  a.fa.fa-copy(title="{{_ 'copy-text-to-clipboard'}}")
+  a(title="{{_ 'copy-text-to-clipboard'}}")
  span.copied-tooltip {{_ 'copied'}}
  textarea.js-edit-card-title(rows='1' autofocus dir="auto")
    = getTitle
  .edit-controls.clearfix
    button.primary.confirm.js-submit-edit-card-title-form(type="submit") {{_ 'save'}}
-    a.fa.fa-times-thin.js-close-inlined-form
+    a.js-close-inlined-form

 template(name="editCardRequesterForm")
  input.js-edit-card-requester(type='text' autofocus value=getRequestedBy dir="auto")
  .edit-controls.clearfix
    button.primary.confirm.js-submit-edit-card-requester-form(type="submit") {{_ 'save'}}
-    a.fa.fa-times-thin.js-close-inlined-form
+    a.js-close-inlined-form

 template(name="editCardAssignerForm")
  input.js-edit-card-assigner(type='text' autofocus value=getAssignedBy dir="auto")
  .edit-controls.clearfix
    button.primary.confirm.js-submit-edit-card-assigner-form(type="submit") {{_ 'save'}}
-    a.fa.fa-times-thin.js-close-inlined-form
+    a.js-close-inlined-form

 template(name="editCardSortOrderForm")
  input.js-edit-card-sort(type='text' autofocus value=sort dir="auto")
  .edit-controls.clearfix
    button.primary.confirm.js-submit-edit-card-sort-form(type="submit") {{_ 'save'}}
-    a.fa.fa-times-thin.js-close-inlined-form
+    a.js-close-inlined-form

 template(name="cardDetailsActionsPopup")
  ul.pop-over-list
@@ -641,7 +699,7 @@ template(name="cardDetailsActionsPopup")
          i.fa.fa-eye
          |  {{_ 'unwatch'}}
        else
-          i.fa.fa-eye-slash
+          i.fa.fa-eye
          |  {{_ 'watch'}}
  hr
  if canModifyCard
@@ -661,7 +719,7 @@ template(name="cardDetailsActionsPopup")
        if currentUser.isBoardAdmin
          li
            a.js-custom-fields
-              i.fa.fa-list-alt
+              i.fa.fa-list
              | {{_ 'card-edit-custom-fields'}}
        //li: a.js-received-date {{_ 'editCardReceivedDatePopup-title'}}
        //li: a.js-start-date {{_ 'editCardStartDatePopup-title'}}
@@ -675,100 +733,254 @@ template(name="cardDetailsActionsPopup")
          a.js-set-card-color
            i.fa.fa-paint-brush
            | {{_ 'setCardColorPopup-title'}}
-  hr
+        li
+          a.js-toggle-show-list-on-minicard
+            if showListOnMinicard
+              i.fa.fa-eye
+              | {{_ 'hide-list-on-minicard'}}
+            else
+              i.fa.fa-eye
+              | {{_ 'show-list-on-minicard'}}
+  if canModifyCard
+    hr
+  else
+    unless currentUser.isReadOnly
+      unless currentUser.isReadAssignedOnly
+        hr
  ul.pop-over-list
    li
      a.js-export-card
-        i.fa.fa-share-alt
+        i.fa.fa-upload
        | {{_ 'export-card'}}
-  hr
-  ul.pop-over-list
-    li
-      a.js-move-card-to-top
-        i.fa.fa-arrow-up
-        | {{_ 'moveCardToTop-title'}}
-    li
-      a.js-move-card-to-bottom
-        i.fa.fa-arrow-down
-        | {{_ 'moveCardToBottom-title'}}
-  hr
-  ul.pop-over-list
-    if currentUser.isBoardAdmin
-      li
-        a.js-move-card
-          i.fa.fa-arrow-right
-          | {{_ 'moveCardPopup-title'}}
-    unless currentUser.isWorker
-      li
-        a.js-copy-card
-          i.fa.fa-copy
-          | {{_ 'copyCardPopup-title'}}
-  unless currentUser.isWorker
-    ul.pop-over-list
-      li
-        a.js-copy-checklist-cards
-          i.fa.fa-copy
-          i.fa.fa-copy
-          | {{_ 'copyManyCardsPopup-title'}}
-    unless archived
-      hr
-      ul.pop-over-list
-        li
-          a.js-archive
-            i.fa.fa-arrow-right
-            i.fa.fa-archive
-            | {{_ 'archive-card'}}
+  unless canModifyCard
+    unless currentUser.isReadOnly
+      unless currentUser.isReadAssignedOnly
+        hr
+        ul.pop-over-list
+          li
+            a.js-move-card-to-top
+              i.fa.fa-arrow-up
+              | {{_ 'moveCardToTop-title'}}
+          li
+            a.js-move-card-to-bottom
+              i.fa.fa-arrow-down
+              | {{_ 'moveCardToBottom-title'}}
+        hr
+        ul.pop-over-list
+          if currentUser.isBoardAdmin
+            li
+              a.js-move-card
+                i.fa.fa-arrow-right
+                | {{_ 'moveCardPopup-title'}}
+          unless currentUser.isWorker
+            li
+              a.js-copy-card
+                i.fa.fa-clipboard
+                | {{_ 'copyCardPopup-title'}}
+        unless currentUser.isWorker
+          ul.pop-over-list
+            li
+              a.js-copy-checklist-cards
+                i.fa.fa-copy
+                | {{_ 'copyManyCardsPopup-title'}}
+          unless archived
+            hr
+            ul.pop-over-list
+              li
+                a.js-archive
+                  i.fa.fa-archive
+                  | {{_ 'archive-card'}}
+          hr
+          ul.pop-over-list
+            li
+              a.js-more
+                span.emoji-icon
+                i.fa.fa-link
+                | {{_ 'cardMorePopup-title'}}
+  if canModifyCard
    hr
    ul.pop-over-list
      li
-        a.js-more
-          i.fa.fa-link
-          | {{_ 'cardMorePopup-title'}}
+        a.js-move-card-to-top
+          i.fa.fa-arrow-up
+          | {{_ 'moveCardToTop-title'}}
+      li
+        a.js-move-card-to-bottom
+          i.fa.fa-arrow-down
+          | {{_ 'moveCardToBottom-title'}}
+    hr
+    ul.pop-over-list
+      if currentUser.isBoardAdmin
+        li
+          a.js-move-card
+            i.fa.fa-arrow-right
+            | {{_ 'moveCardPopup-title'}}
+      unless currentUser.isWorker
+        li
+          a.js-copy-card
+            i.fa.fa-clipboard
+            | {{_ 'copyCardPopup-title'}}
+    unless currentUser.isWorker
+      ul.pop-over-list
+        li
+          a.js-copy-checklist-cards
+            i.fa.fa-copy
+            | {{_ 'copyManyCardsPopup-title'}}
+      unless archived
+        hr
+        ul.pop-over-list
+          li
+            a.js-archive
+              i.fa.fa-archive
+              | {{_ 'archive-card'}}
+      hr
+      ul.pop-over-list
+        li
+          a.js-more
+            span.emoji-icon
+              i.fa.fa-link
+            | {{_ 'cardMorePopup-title'}}

 template(name="exportCardPopup")
  ul.pop-over-list
    li
      a(href="{{exportUrlCardPDF}}",, download="{{exportFilenameCardPDF}}")
-        i.fa.fa-share-alt
+        i.fa.fa-upload
        | {{_ 'export-card-pdf'}}

 template(name="moveCardPopup")
-  +copyAndMoveCard
+  unless currentUser.isWorker
+    label {{_ 'boards'}}:
+    select.js-select-boards(autofocus)
+      each boards
+        option(value="{{_id}}" selected="{{#if isDialogOptionBoardId _id}}selected{{/if}}") {{add @index 1}}. {{title}}
+
+  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}}
+
+  label {{_ 'cards'}}:
+  select.js-select-cards
+    each cards
+      option(value="{{_id}}" selected="{{#if isDialogOptionCardId _id}}selected{{/if}}") {{add @index 1}}. {{title}}
+
+  div
+    input(type="radio" name="position" value="above" checked id="position-above" style="display: inline")
+    label(for="position-above") {{_ 'above-selected-card'}}
+  div
+    input(type="radio" name="position" value="below" id="position-below" style="display: inline")
+    label(for="position-below") {{_ 'below-selected-card'}}
+
+  .edit-controls.clearfix
+    button.primary.confirm.js-done {{_ 'done'}}

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

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

 template(name="convertChecklistItemToCardPopup")
  label(for='convert-checklist-item-to-card-title') {{_ 'title'}}:
  textarea#copy-card-title.minicard-composer-textarea.js-card-title(autofocus)
    = item.title
-  +copyAndMoveCard
-
-template(name="copyAndMoveCard")
  unless currentUser.isWorker
    label {{_ 'boards'}}:
    select.js-select-boards(autofocus)
      each boards
-        option(value="{{_id}}" selected="{{#if isDialogOptionBoardId _id}}selected{{/if}}") {{title}}
+        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}}") {{title}}
+      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}}") {{title}}
+      option(value="{{_id}}" selected="{{#if isDialogOptionListId _id}}selected{{/if}}") {{add @index 1}}. {{title}}
+
+  label {{_ 'cards'}}:
+  select.js-select-cards
+    each cards
+      option(value="{{_id}}" selected="{{#if isDialogOptionCardId _id}}selected{{/if}}") {{add @index 1}}. {{title}}
+
+  div
+    input(type="radio" name="position" value="above" checked id="position-above" style="display: inline")
+    label(for="position-above") {{_ 'above-selected-card'}}
+  div
+    input(type="radio" name="position" value="below" id="position-below" style="display: inline")
+    label(for="position-below") {{_ 'below-selected-card'}}

  .edit-controls.clearfix
    button.primary.confirm.js-done {{_ 'done'}}
@@ -779,13 +991,13 @@ template(name="cardMembersPopup")
    each members
      li.item(class="{{#if isCardMember}}active{{/if}}")
        a.name.js-select-member(href="#")
-          +userAvatar(userId=user._id)
+          +userAvatar(userId=userId)
          span.full-name
-            = user.profile.fullname
-            | (<span class="username">{{ user.username }}</span>)
+            = userData.profile.fullname
+            if userData.username
+              | (#{userData.username})
          if isCardMember
            i.fa.fa-check
-
 template(name="cardAssigneesPopup")
  input.card-assignees-filter(type="text" placeholder="{{_ 'search'}}")
  unless currentUser.isWorker
@@ -793,10 +1005,11 @@ template(name="cardAssigneesPopup")
      each members
        li.item(class="{{#if isCardAssignee}}active{{/if}}")
          a.name.js-select-assignee(href="#")
-            +userAvatar(userId=user._id)
+            +userAvatar(userId=userId)
            span.full-name
-              = user.profile.fullname
-              | (<span class="username">{{ user.username }}</span>)
+              = userData.profile.fullname
+              if userData.username
+                | (#{userData.username})
            if isCardAssignee
              i.fa.fa-check
  if currentUser.isWorker
@@ -806,10 +1019,10 @@ template(name="cardAssigneesPopup")
          +userAvatar(userId=currentUser._id)
          span.full-name
            = currentUser.profile.fullname
-            | (<span class="username">{{ currentUser.username }}</span>)
+            if currentUser.username
+              | (#{currentUser.username})
          if currentUser.isCardAssignee
            i.fa.fa-check
-
 template(name="cardAssigneePopup")
  .board-assignee-menu
    .mini-profile-info
@@ -832,7 +1045,7 @@ template(name="cardMorePopup")
    span.clearfix
      span {{_ 'link-card'}}
      = ' '
-      i.fa.colorful(class="{{#if board.isPublic}}fa-globe{{else}}fa-lock{{/if}}")
+      i.fa(class="{{#if currentBoard.isPublic}}fa-globe{{else}}fa-lock{{/if}}")
      input.inline-input(type="text" id="cardURL" readonly value="{{ originRelativeUrl }}" autofocus="autofocus")
      button.js-copy-card-link-to-clipboard(class="btn" id="clipboard") {{_ 'copy-card-link-to-clipboard'}}
      .copied-tooltip {{_ 'copied'}}
@@ -864,19 +1077,20 @@ template(name="cardMorePopup")
              option(value="{{_id}}") {{title}}
    br
    | {{_ 'added'}}
-    span.date(title=card.createdAt) {{ moment createdAt 'LLL' }}
+    span.date(title=card.createdAt) {{ displayDate createdAt 'LLL' }}
    if currentUser.isBoardAdmin
      a.js-delete(title="{{_ 'card-delete-notice'}}") {{_ 'delete'}}

 template(name="setCardColorPopup")
  form.edit-label
-    .palette-colors: each colors
-      unless $eq color 'white'
-        span.card-label.palette-color.js-palette-color(class="card-details-{{color}}")
-          if(isSelected color)
-            i.fa.fa-check
-    button.primary.confirm.js-submit {{_ 'save'}}
-    button.js-remove-color.negate.wide.right {{_ 'unset-color'}}
+    .palette-colors
+      each colors
+        unless $eq color 'white'
+          span.card-label.palette-color.js-palette-color(class="card-details-{{color}}")
+            if(isSelected color)
+              i.fa.fa-check
+  button.primary.confirm.js-submit {{_ 'save'}}
+  button.js-remove-color.negate.wide.right {{_ 'unset-color'}}

 template(name="cardDeletePopup")
  p {{_ "card-delete-pop"}}
@@ -908,7 +1122,7 @@ template(name="cardStartVotingPopup")
          .materialCheckBox#vote-public(name="vote-public" class="{{#if votePublic}}is-checked{{/if}}")
          span {{_ 'vote-public'}}
      .check-div.flex
-        i.fa.fa-hourglass-end
+        i.fa.fa-clock-o
        a.js-end-date
          span
            | {{_ 'card-end'}}
@@ -954,7 +1168,7 @@ template(name="cardStartPlanningPokerPopup")
          .materialCheckBox#poker-allow-non-members(name="poker-allow-non-members" class="{{#if pokerAllowNonBoardMembers}}is-checked{{/if}}")
          span {{_ 'allowNonBoardMembers'}}
      .check-div.flex
-        i.fa.fa-hourglass-end
+        i.fa.fa-clock-o
        a.js-end-date
          span
            | {{_ 'card-end'}}
@@ -15,8 +15,8 @@ template(name="editCardSpentTime")

 template(name="timeBadge")
  if canModifyCard
-    a.js-edit-time.card-time(title="{{showTitle}}" class="{{#if getIsOvertime}}card-label-red{{else}}card-label-green{{/if}}")
-      | {{showTime}}
+    a.js-edit-time.card-time(title="{{_ 'time'}}" class="{{#if getIsOvertime}}card-label-red{{else}}card-label-green{{/if}}")
+      | ⏱️ {{showTime}}
  else
-    a.card-time(title="{{showTitle}}" class="{{#if getIsOvertime}}card-label-red{{else}}card-label-green{{/if}}")
-      | {{showTime}}
+    a.card-time(title="{{_ 'time'}}" class="{{#if getIsOvertime}}card-label-red{{else}}card-label-green{{/if}}")
+      | ⏱️ {{showTime}}
@@ -37,10 +37,12 @@ textarea.js-edit-checklist-item {
 .checklist-progress-bar-container .checklist-progress-bar {
  width: 80%;
  height: 10px;
+  background-color: #e0e0e0;
+  border-radius: 16px;
 }
 .checklist-progress-bar-container .checklist-progress-bar .checklist-progress {
-  color: #fff !important;
-  background-color: #2196f3 !important;
+  color: #fff;
+  background-color: #666;
  padding: 0.01em 16px;
  border-radius: 16px;
  height: 100%;
@@ -4,7 +4,8 @@ template(name="checklists")
      i.fa.fa-check
      | {{_ 'checklists'}}
      if canModifyCard
-        +inlinedForm(autoclose=false classNames="js-add-checklist" cardId = cardId  position="top")
+        +inlinedForm(autoclose=false classNames="js-add-checklist" cardId = cardId
+          position="top")
          +addChecklistItemForm
        else
          a.add-checklist-top.js-open-inlined-form(title="{{_ 'add-checklist'}}")
@@ -91,7 +92,7 @@ template(name="editChecklistItemForm")
  .edit-controls.clearfix
    button.primary.confirm.js-submit-edit-checklist-item-form(type="submit") {{_ 'save'}}
    a.fa.fa-times-thin.js-close-inlined-form(title="{{_ 'close-edit-checklist-item'}}")
-    span(title=createdAt) {{ moment createdAt }}
+    span(title=createdAt) {{ displayDate createdAt }}
    if canModifyCard
      a.js-delete-checklist-item {{_ "delete"}}...
      a.js-convert-checklist-item-to-card
@@ -157,7 +157,7 @@ BlazeComponent.extendComponent({
    textarea.focus();
  },

-  deleteItem() {
+  async deleteItem() {
    const checklist = this.currentData().checklist;
    const item = this.currentData().item;
    if (checklist && item && item._id) {
@@ -372,9 +372,9 @@ BlazeComponent.extendComponent({
    const ret = ReactiveCache.getCurrentUser().getMoveChecklistDialogOptions();
    return ret;
  }
-  setDone(cardId, options) {
+  async setDone(cardId, options) {
    ReactiveCache.getCurrentUser().setMoveChecklistDialogOption(this.currentBoardId, options);
-    this.data().checklist.move(cardId);
+    await this.data().checklist.move(cardId);
  }
 }).register('moveChecklistPopup');

@@ -384,8 +384,8 @@ BlazeComponent.extendComponent({
    const ret = ReactiveCache.getCurrentUser().getCopyChecklistDialogOptions();
    return ret;
  }
-  setDone(cardId, options) {
+  async setDone(cardId, options) {
    ReactiveCache.getCurrentUser().setCopyChecklistDialogOption(this.currentBoardId, options);
-    this.data().checklist.copy(cardId);
+    await this.data().checklist.copy(cardId);
  }
 }).register('copyChecklistPopup');
@@ -38,6 +38,7 @@
 .palette-colors {
  display: flex;
  flex-wrap: wrap;
+  justify-content: flex-start; /* left-align color chips in wider popovers */
 }
 .palette-colors .palette-color {
  flex-grow: 1;
@@ -222,9 +223,13 @@
 .card-label-edit-button:hover {
  background: #dbdbdb;
 }
-ul.edit-labels-pop-over span.fa.label-handle {
+ul.edit-labels-pop-over span.label-handle {
  padding-right: 10px;
+  display: inline-block;
+  width: 1.2em;
+  text-align: center;
+  color: #999;
 }
-ul.edit-labels-pop-over span.fa.label-handle + .card-label {
+ul.edit-labels-pop-over span.label-handle + .card-label {
  max-width: 180px;
 }
@@ -3,11 +3,11 @@
  position: relative;
  display: flex;
  align-items: center;
-  margin-bottom: 9px;
+  margin-bottom: 1.2vh;
 }
 .minicard-wrapper.placeholder {
  background: #ccc;
-  border-radius: 9px;
+  border-radius: 1.2vw;
 }
 .minicard-wrapper.ui-sortable-helper {
  cursor: grabbing;
@@ -16,28 +16,28 @@
 }
 .minicard-wrapper.ui-sortable-helper .and-n-other {
  width: 100%;
-  height: 16px;
-  padding: 4px;
+  height: 2.5vh;
+  padding: 0.5vh;
  background-color: #f2f2f2;
  text-align: center;
-  border-radius: 3px;
+  border-radius: 0.4vw;
 }
 .minicard-wrapper.ui-sortable-helper .multi-selection-checkbox {
  display: none;
 }
 .minicard-wrapper .multi-selection-checkbox + .minicard {
-  margin-left: 8px;
+  margin-left: 1vw;
 }
@media only screen {
  .minicard {
-    padding: 6px 8px 2px;
+    padding: 0.8vh 1vw 0.3vh;
    position: relative;
    flex: 1;
    flex-wrap: wrap;
    background-color: #fff;
-    min-height: 20px;
-    box-shadow: 0 1px 2px rgba(0,0,0,0.15);
-    border-radius: 2px;
+    min-height: 2.5vh;
+    box-shadow: 0 0.2vh 0.3vh rgba(0,0,0,0.15);
+    border-radius: 0.3vw;
    color: #4d4d4d;
    overflow: hidden;
    transition: transform 0.2s, border-radius 0.2s;
@@ -45,14 +45,15 @@
 }
 .minicard-details-menu-with-handle {
  float: right;
-  font-size: 18px;
-  padding-right: 30px;
-  padding-left: 5px;
+  padding-left: 0.7vw;
+  font-size: clamp(14px, 3vw, 18px);
+  padding: 0;
+  z-index: 1;
 }
 .minicard-details-menu {
  float: right;
-  font-size: 18px;
-  padding-left: 5px;
+  font-size: clamp(14px, 3vw, 18px);
+  padding-left: 0.7vw;
 }
@media print {
  .minicard-details-menu,
@@ -63,7 +64,7 @@
 .minicard.linked-board .linked-icon,
 .minicard.linked-card .linked-icon {
  display: inline-block;
-  margin-right: 11px;
+  margin-right: 1.5vw;
  vertical-align: baseline;
  font-size: 0.9em;
 }
@@ -72,11 +73,11 @@
  color: #937760;
 }
 .is-selected .minicard {
-  transform: translateX(11px);
+  transform: translateX(1.5vw);
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
  z-index: 25;
-  box-shadow: -2px 1px 2px rgba(0,0,0,0.2);
+  box-shadow: -0.3vw 0.2vh 0.3vh rgba(0,0,0,0.2);
 }
 .minicard:hover:not(.minicard-composer),
 .is-selected .minicard,
@@ -90,20 +91,21 @@
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
-  height: 145px;
+  height: 20vh;
  user-select: none;
-  margin: 6px -8px 6px -8px;
-  border-radius: top 2px;
+  margin: 0.8vh -1vw 0.8vh -1vw;
+  border-radius: top 0.3vw;
 }
 .minicard .minicard-labels {
  float: none;
+  margin-right: 6vw;
 }
 .minicard .minicard-labels .minicard-label {
-  width: 11px;
-  height: 11px;
-  border-radius: 2px;
-  margin-right: 3px;
-  margin-bottom: 3px;
+  width: clamp(12px, 1.5vw, 16px);
+  height: clamp(12px, 1.5vw, 16px);
+  border-radius: 0.3vw;
+  margin-right: 0.4vw;
+  margin-bottom: 0.4vh;
 }
 .minicard .minicard-labels-no-text {
  display: flex;
@@ -111,6 +113,7 @@
 }
 .minicard .minicard-custom-fields {
  display: block;
+  margin-right: 6vw;
 }
 .minicard .minicard-custom-field {
  display: flex;
@@ -119,37 +122,44 @@
  flex-grow: 1;
  display: block;
  word-wrap: break-word;
-  max-width: 100px;
-  margin-right: 4px;
+  max-width: 13vw;
+  margin-right: 0.5vw;
 }
 .minicard .minicard-custom-field-item-fullwidth {
  flex-grow: 1;
  display: block;
  word-wrap: break-word;
  max-width: 100%;
-  margin-right: 4px;
+  margin-right: 0.5vw;
 }
 .minicard .handle {
-  width: 20px;
-  height: 20px;
+  width: clamp(20px, 2.5vw, 28px);
+  height: clamp(20px, 2.5vw, 28px);
  position: absolute;
-  right: 5px;
-  top: 5px;
+  right: 0vw;
+  top: 4vh;
  display: none;
+  z-index: 1;
 }
@media only screen {
  .minicard .handle {
    display: block;
  }
 }
-.minicard .handle .fa-arrows {
-  font-size: 20px;
+.minicard .handle .drag-handle {
+  font-size: clamp(16px, 3vw, 20px);
  color: #ccc;
+  display: inline-block;
+  width: 1.4em;
+  text-align: center;
+}
+.minicard .minicard-title {
+  margin-right: 1.5vw;
 }
 .minicard .minicard-title .card-number {
  color: #b3b3b3;
  display: inline-block;
-  margin-right: 5px;
+  margin-right: 0.7vw;
 }
@media only screen {
  .minicard .minicard-title p:last-child {
@@ -164,13 +174,146 @@
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
+  position: relative;
+  z-index: 5;
+  margin-right: 6vw;
+  clear: both;
 }
 .minicard .date {
-  margin-right: 3px;
+  margin-right: 0.4vw;
 }
+
+/* Unicode icons for minicard dates - matching cardDate.css */
+.minicard .card-date.end-date time::before {
+  content: "🏁"; /* Finish flag - represents end/completion */
+}
+.minicard .card-date.due-date time::before {
+  content: "⏰"; /* Alarm clock - represents due/deadline */
+}
+.minicard .card-date.start-date time::before {
+  content: "🚀"; /* Rocket - represents start/launch */
+}
+.minicard .card-date.received-date time::before {
+  content: "📥"; /* Inbox tray - represents received/incoming */
+}
+
+.minicard .card-date time::before {
+  font-size: inherit;
+  margin-right: 0.3em;
+  display: inline-block;
+}
+
+/* Date type specific colors for minicards - matching cardDate.css */
+.minicard .card-date.received-date {
+  background-color: #dbdbdb; /* Grey for received - same as base card-date */
+}
+
+.minicard .card-date.received-date:hover,
+.minicard .card-date.received-date.is-active {
+  background-color: #b3b3b3;
+}
+
+.minicard .card-date.start-date {
+  background-color: #90ee90; /* Light green for start */
+  color: #000; /* Black text for start */
+}
+
+.minicard .card-date.start-date:hover,
+.minicard .card-date.start-date.is-active {
+  background-color: #7dd87d;
+}
+
+.minicard .card-date.due-date {
+  background-color: #ffd700; /* Yellow for due */
+  color: #000; /* Black text for due */
+}
+
+.minicard .card-date.due-date:hover,
+.minicard .card-date.due-date.is-active {
+  background-color: #e6c200;
+}
+
+.minicard .card-date.end-date {
+  background-color: #ffb3b3; /* Light red for end */
+  color: #000; /* Black text for end */
+}
+
+.minicard .card-date.end-date:hover,
+.minicard .card-date.end-date.is-active {
+  background-color: #ff9999;
+}
+
+/* Date status colors for minicards - matching cardDate.css */
+.minicard .card-date.overdue {
+  background-color: #ff4444 !important; /* Red for overdue */
+  color: #fff !important;
+}
+.minicard .card-date.overdue:hover,
+.minicard .card-date.overdue.is-active {
+  background-color: #cc3333 !important;
+}
+
+.minicard .card-date.due-soon {
+  background-color: #ffaa00 !important; /* Amber for due soon */
+  color: #000 !important;
+}
+.minicard .card-date.due-soon:hover,
+.minicard .card-date.due-soon.is-active {
+  background-color: #e69900 !important;
+}
+
+.minicard .card-date.not-due {
+  /* No special background - uses default date type colors */
+}
+
+.minicard .card-date.current {
+  background-color: #5ba639 !important; /* Green for current/active */
+  color: #fff !important;
+}
+.minicard .card-date.current:hover,
+.minicard .card-date.current.is-active {
+  background-color: #46802c !important;
+}
+
+.minicard .card-date.completed {
+  background-color: #90ee90 !important; /* Light green for completed */
+  color: #000 !important;
+}
+.minicard .card-date.completed:hover,
+.minicard .card-date.completed.is-active {
+  background-color: #7dd87d !important;
+}
+
+.minicard .card-date.completed-early {
+  background-color: #4caf50 !important; /* Green for completed early */
+  color: #fff !important;
+}
+.minicard .card-date.completed-early:hover,
+.minicard .card-date.completed-early.is-active {
+  background-color: #45a049 !important;
+}
+
+.minicard .card-date.completed-late {
+  background-color: #ff9800 !important; /* Orange for completed late */
+  color: #fff !important;
+}
+.minicard .card-date.completed-late:hover,
+.minicard .card-date.completed-late.is-active {
+  background-color: #f57c00 !important;
+}
+
+.minicard .card-date.completed-on-time {
+  background-color: #2196f3 !important; /* Blue for completed on time */
+  color: #fff !important;
+}
+.minicard .card-date.completed-on-time:hover,
+.minicard .card-date.completed-on-time.is-active {
+  background-color: #1976d2 !important;
+}
+
 .minicard .badges {
  float: left;
-  margin-top: 7px;
+  margin-top: 1vh;
  color: #808080;
 }
 .minicard .badges:empty {
@@ -178,14 +321,14 @@
 }
 .minicard .badges .badge {
  float: left;
-  margin-right: 11px;
-  margin-bottom: 3px;
+  margin-right: 1.5vw;
+  margin-bottom: 0.4vh;
  font-size: 0.9em;
 }
 .minicard .badges .badge.is-finished {
  background: #3cb500;
-  padding: 0px 3px;
-  border-radius: 3px;
+  padding: 0 0.4vw;
+  border-radius: 0.4vw;
  color: #fff;
 }
 .minicard .badges .badge:last-of-type {
@@ -201,41 +344,41 @@
 }
 .minicard .badges .badge .badge-text {
  font-size: 0.9em;
-  padding-left: 2px;
-  line-height: 14px;
+  padding-left: 0.3vw;
+  line-height: 1.2;
 }
 .minicard .badges .badge .check-list-text {
  padding-left: 0px;
-  line-height: 12px;
+  line-height: 1.1;
 }
 .minicard .minicard-members,
 .minicard .minicard-assignees,
 .minicard .minicard-creator {
  float: right;
-  margin-left: 5px;
-  margin-bottom: 4px;
+  margin-left: 0.7vw;
+  margin-bottom: 0.5vh;
 }
 .minicard .minicard-members .member,
 .minicard .minicard-assignees .member,
 .minicard .minicard-creator .member {
  float: right;
  border-radius: 50%;
-  height: 28px;
-  width: 28px;
-  margin-bottom: 4px;
+  height: clamp(24px, 3.5vw, 32px);
+  width: clamp(24px, 3.5vw, 32px);
+  margin-bottom: 0.5vh;
 }
 .minicard .minicard-members .assignee,
 .minicard .minicard-assignees .assignee,
 .minicard .minicard-creator .assignee {
  float: right;
  border-radius: 50%;
-  height: 28px;
-  width: 28px;
+  height: clamp(24px, 3.5vw, 32px);
+  width: clamp(24px, 3.5vw, 32px);
 }
 .minicard .minicard-members + .badges,
 .minicard .minicard-assignees + .badges,
 .minicard .minicard-creator + .badges {
-  margin-top: 5px;
+  margin-top: 0.7vh;
 }
 .minicard .minicard-assignees {
  border-bottom: 1px solid #f00;
@@ -248,13 +391,13 @@
  display: none;
 }
 .minicard .minicard-description {
-  padding: 6px 0 0 8px;
+  padding: 0.8vh 0 0 1vw;
  color: #000;
  background-color: #eee;
  width: 100%;
-  margin-bottom: 2px;
-  margin-left: -4px;
-  border-radius: 3px;
+  margin-bottom: 0.3vh;
+  margin-left: -0.5vw;
+  border-radius: 0.4vw;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
@@ -262,7 +405,7 @@
  -webkit-box-orient: vertical;
 }
 .minicard.minicard-composer {
-  margin-bottom: 10px;
+  margin-bottom: 1.3vh;
 }
 .minicard.minicard-composer textarea.minicard-composer-textarea,
 .minicard.minicard-composer textarea.minicard-composer-textarea:focus {
@@ -273,9 +416,9 @@
  height: auto;
  margin: 0;
  padding: 0;
-  max-height: 162px;
-  min-height: 36px;
-  margin-bottom: 20px;
+  max-height: 22vh;
+  min-height: 5vh;
+  margin-bottom: 2.5vh;
  overflow-y: auto;
 }
 .parent-prefix {
@@ -580,3 +723,99 @@
 .text-green {
  color: #008000;
 }
+
+/* Drag and drop file upload visual feedback */
+.minicard.is-dragging-over {
+  border: 2px dashed #0079bf;
+  background-color: #e3f2fd !important;
+  transform: scale(1.02);
+  transition: all 0.2s ease;
+}
+
+/* List name display on minicard */
+.minicard-list-name {
+  font-size: 0.75em;
+  color: #8c8c8c;
+  margin-top: 0.2vh;
+  display: flex;
+  align-items: center;
+  gap: 0.3vw;
+}
+
+/* Checklist display on minicard */
+.minicard-checklist {
+  width: 100%;
+  margin-top: 0.5vh;
+  margin-bottom: 0.5vh;
+  padding: 0.3vh 0.5vw;
+  background-color: rgba(255, 255, 255, 0.8);
+  border-radius: 0.3vw;
+  border: 1px solid #e0e0e0;
+}
+
+.minicard-checklist .checklist-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 0.3vh;
+}
+
+.minicard-checklist .checklist-title {
+  font-size: 0.8em;
+  font-weight: bold;
+  color: #4d4d4d;
+  flex: 1;
+}
+
+.minicard-checklist .checklist-menu {
+  font-size: 1.2em;
+  color: #666;
+  cursor: pointer;
+  padding: 0 0.3vw;
+  border-radius: 0.2vw;
+  transition: background-color 0.2s;
+}
+
+.minicard-checklist .checklist-menu:hover {
+  background-color: rgba(0, 0, 0, 0.1);
+}
+
+.minicard-checklist .checklist-item {
+  font-size: 0.75em;
+  color: #666;
+  margin-bottom: 0.2vh;
+  display: flex;
+  align-items: flex-start;
+  gap: 0.3vw;
+  line-height: 1.2;
+  cursor: pointer;
+  padding: 0.2vh 0;
+  border-radius: 0.2vw;
+  transition: background-color 0.2s;
+}
+
+.minicard-checklist .checklist-item:hover {
+  background-color: rgba(0, 0, 0, 0.05);
+}
+
+.minicard-checklist .checklist-item.is-checked {
+  text-decoration: line-through;
+  color: #999;
+}
+
+.minicard-checklist .checklist-item .check-box-unicode {
+  flex-shrink: 0;
+  font-size: 0.8em;
+  margin-top: 0.1vh;
+  transition: transform 0.2s;
+}
+
+.minicard-checklist .checklist-item:hover .check-box-unicode {
+  transform: scale(1.1);
+}
+
+.minicard-checklist .checklist-item .item-title {
+  flex: 1;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+}
@@ -3,20 +3,17 @@ template(name="minicard")
    class="{{#if isLinkedCard}}linked-card{{/if}}"
    class="{{#if isLinkedBoard}}linked-board{{/if}}"
    class="{{#if colorClass}}minicard-{{colorClass}}{{/if}}")
-    if canModifyCard
+    if canMoveCard
      if isTouchScreenOrShowDesktopDragHandles
-        a.fa.fa-navicon.minicard-details-menu-with-handle.js-open-minicard-details-menu(title="{{_ 'cardDetailsActionsPopup-title'}}")
        .handle
-          .fa.fa-arrows
-      else
-        a.fa.fa-navicon.minicard-details-menu.js-open-minicard-details-menu(title="{{_ 'cardDetailsActionsPopup-title'}}")
+          i.fa.fa-arrows
+    if canModifyCard
+      a.minicard-details-menu-with-handle.js-open-minicard-details-menu(title="{{_ 'cardDetailsActionsPopup-title'}}")
+        i.fa.fa-bars
    .dates
      if getReceived
-        unless getStart
-          unless getDue
-            unless getEnd
-              .date
-                +minicardReceivedDate
+        .date
+          +minicardReceivedDate
      if getStart
        .date
          +minicardStartDate
@@ -31,6 +28,27 @@ template(name="minicard")
    if cover
      if currentBoard.allowsCoverAttachmentOnMinicard
        .minicard-cover(style="background-image: url('{{cover.link 'original'}}?dummyReloadAfterSessionEstablished={{sess}}');")
+
+    // Upload progress indicator for drag-and-drop uploads
+    if hasActiveUploads
+      .minicard-upload-progress
+        .upload-progress-header
+          i.fa.fa-upload
+          span {{_ 'uploading-files'}} ({{uploadCount}})
+        each uploads
+          .upload-progress-item(class="{{#if $eq status 'error'}}upload-error{{/if}}")
+            .upload-progress-filename {{file.name}}
+            .upload-progress-bar
+              .upload-progress-fill(style="width: {{progress}}%")
+            if $eq status 'error'
+              .upload-progress-error
+                i.fa.fa-warning
+                span {{_ 'upload-failed'}}
+            else if $eq status 'completed'
+              .upload-progress-success
+                i.fa.fa-check
+                span {{_ 'upload-completed'}}
+
    .minicard-title
      if $eq 'prefix-with-full-path' currentBoard.presentParentTask
        .parent-prefix
@@ -40,23 +58,20 @@ template(name="minicard")
          | {{ parentCardName }}
      if isLinkedBoard
        a.js-linked-link
-          span.linked-icon.fa.fa-folder
+          span.linked-icon
+            i.fa.fa-folder
      else if isLinkedCard
        a.js-linked-link
-          span.linked-icon.fa.fa-id-card
+          span.linked-icon
+            i.fa.fa-id-card
      if getArchived
-        span.linked-icon.linked-archived.fa.fa-archive
+        span.linked-icon.linked-archived
+          i.fa.fa-archive
      +viewer
        if currentBoard.allowsCardNumber
          span.card-number
            | ##{getCardNumber}
        = getTitle
-      if $eq 'subtext-with-full-path' currentBoard.presentParentTask
-        .parent-subtext
-          | {{ parentString ' > ' }}
-      if $eq 'subtext-with-parent' currentBoard.presentParentTask
-        .parent-subtext
-          | {{ parentCardName }}
    if labels
      .minicard-labels(class="{{#if hiddenMinicardLabelText}}minicard-labels-no-text{{/if}}")
        each labels
@@ -132,105 +147,81 @@ template(name="minicard")
      if canModifyCard
        if comments.length
          .badge(title="{{_ 'card-comments-title' comments.length }}")
-            span.badge-icon.fa.fa-comment-o.badge-comment.badge-text
+            span.badge-icon.badge-comment.badge-text
+              i.fa.fa-comment-o
              = ' '
              = comments.length
            //span.badge-comment.badge-text
-            //|  {{_ 'comment'}}
+            //|
+              {{_ 'comment'}}
      if getDescription
        unless currentBoard.allowsDescriptionTextOnMinicard
          .badge.badge-state-image-only(title=getDescription)
-            span.badge-icon.fa.fa-align-left
+            span.badge-icon
+              i.fa.fa-file-text-o
      if getVoteQuestion
        .badge.badge-state-image-only(title=getVoteQuestion)
-          span.badge-icon.fa.fa-thumbs-up(class="{{#if voteState}}text-green{{/if}}")
+          span.badge-icon(class="{{#if voteState}}text-green{{/if}}")
+            i.fa.fa-thumbs-up
          span.badge-text {{ voteCountPositive }}
-          span.badge-icon.fa.fa-thumbs-down(class="{{#if $eq voteState false}}text-red{{/if}}")
+          span.badge-icon(class="{{#if $eq voteState false}}text-red{{/if}}")
+            i.fa.fa-thumbs-down
          span.badge-text {{ voteCountNegative }}
      if getPokerQuestion
        .badge.badge-state-image-only(title=getPokerQuestion)
-          span.badge-icon.fa.fa-check(class="{{#if pokerState}}text-green{{/if}}")
+          span.badge-icon(class="{{#if pokerState}}text-green{{/if}}")
+            i.fa.fa-check-square
          if expiredPoker
            span.badge-text {{ getPokerEstimation }}
      if attachments.length
        if currentBoard.allowsBadgeAttachmentOnMinicard
          .badge
-            span.badge-icon.fa.fa-paperclip
+            span.badge-icon
+              i.fa.fa-paperclip
            span.badge-text= attachments.length
-      if checklists.length
-        .badge(class="{{#if checklistFinished}}is-finished{{/if}}")
-          span.badge-icon.fa.fa-check-square-o
-          span.badge-text.check-list-text {{checklistFinishedCount}}/{{checklistItemCount}}
      if allSubtasks.count
        .badge
-          span.badge-icon.fa.fa-sitemap
+          span.badge-icon
+            i.fa.fa-globe
          span.badge-text.check-list-text {{subtasksFinishedCount}}/{{allSubtasksCount}}
          //{{subtasksFinishedCount}}/{{subtasksCount}} does not work because when a subtaks is archived, the count goes down
      if currentBoard.allowsCardSortingByNumber
        if currentBoard.allowsCardSortingByNumberOnMinicard
          .badge
-            span.badge-icon.fa.fa-sort
+            span.badge-icon
+              i.fa.fa-sort-numeric-asc
            span.badge-text.check-list-sort {{ sort }}
+    if shouldShowChecklistAtMinicard
+      each shouldShowChecklistAtMinicard
+        +minicardChecklist(checklist=. card=..)
    if currentBoard.allowsDescriptionTextOnMinicard
      if getDescription
        .minicard-description
          +viewer
            | {{ getDescription }}
+    if shouldShowListOnMinicard
+      .minicard-list-name
+        i.fa.fa-list
+        | {{ listName }}
+    if $eq 'subtext-with-full-path' currentBoard.presentParentTask
+      .parent-subtext
+        | {{ parentString ' > ' }}
+    if $eq 'subtext-with-parent' currentBoard.presentParentTask
+      .parent-subtext
+        | {{ parentCardName }}

 template(name="editCardSortOrderPopup")
  input.js-edit-card-sort-popup(type='text' autofocus value=sort dir="auto")
  .edit-controls.clearfix
    button.primary.confirm.js-submit-edit-card-sort-popup(type="submit") {{_ 'save'}}

-template(name="minicardDetailsActionsPopup")
-  ul.pop-over-list
-    if canModifyCard
-      li
-        a.js-move-card
-          i.fa.fa-arrow-right
-          | {{_ 'moveCardPopup-title'}}
-      li
-        a.js-copy-card
-          i.fa.fa-copy
-          | {{_ 'copyCardPopup-title'}}
-      hr
-      li
-        a.js-archive
-          i.fa.fa-arrow-right
-          i.fa.fa-archive
-          | {{_ 'archive-card'}}
-      hr
-      li
-        a.js-move-card-to-top
-          i.fa.fa-arrow-up
-          | {{_ 'moveCardToTop-title'}}
-      li
-        a.js-move-card-to-bottom
-          i.fa.fa-arrow-down
-          | {{_ 'moveCardToBottom-title'}}
-      hr
-      li
-        a.js-add-labels
-          i.fa.fa-tags
-          | {{_ 'card-edit-labels'}}
-      li
-        a.js-due-date
-          i.fa.fa-sign-in
-          | {{_ 'editCardDueDatePopup-title'}}
-      li
-        a.js-set-card-color
-          i.fa.fa-paint-brush
-          | {{_ 'setCardColorPopup-title'}}
-      li
-        a.js-link
-          i.fa.fa-link
-          | {{_ 'link-card'}}
-      li
-      a.js-toggle-watch-card
-        if isWatching
-          i.fa.fa-eye
-          |  {{_ 'unwatch'}}
-        else
-          i.fa.fa-eye-slash
-          |  {{_ 'watch'}}
+template(name="minicardChecklist")
+  .minicard-checklist
+    .checklist-header
+      .checklist-title= checklist.title
+      if canModifyCard
+        a.checklist-menu.js-open-checklist-menu(title="{{_ 'checklistActionsPopup-title'}}")
+          i.fa.fa-bars
+    each visibleItems
+      +checklistItemDetail(item = . checklist = checklist card = card)

@@ -1,6 +1,8 @@
 import { ReactiveCache } from '/imports/reactiveCache';
 import { TAPi18n } from '/imports/i18n';
-import { CustomFieldStringTemplate } from '/client/lib/customFields'
+import { CustomFieldStringTemplate } from '/client/lib/customFields';
+import { handleFileUpload } from './attachments';
+import uploadProgressManager from '../../lib/uploadProgressManager';

 // Template.cards.events({
 //   'click .member': Popup.open('cardMember')
@@ -89,6 +91,13 @@ BlazeComponent.extendComponent({
    }
  },

+  async toggleChecklistItem() {
+    const item = this.currentData();
+    if (item && item._id) {
+      await item.toggleItem();
+    }
+  },
+
  events() {
    return [
      {
@@ -106,12 +115,109 @@ BlazeComponent.extendComponent({
        },
        'click span.badge-icon.fa.fa-sort, click span.badge-text.check-list-sort' : Popup.open("editCardSortOrder"),
        'click .minicard-labels' : this.cardLabelsPopup,
-        'click .js-open-minicard-details-menu': Popup.open('minicardDetailsActions'),
+        'click .js-open-minicard-details-menu'(event) {
+          event.preventDefault();
+          event.stopPropagation();
+          Popup.open('cardDetailsActions').call(this, event);
+        },
+        // Drag and drop file upload handlers
+        'dragover .minicard'(event) {
+          // Only prevent default for file drags to avoid interfering with sortable
+          const dataTransfer = event.originalEvent.dataTransfer;
+          if (dataTransfer && dataTransfer.types && dataTransfer.types.includes('Files')) {
+            event.preventDefault();
+            event.stopPropagation();
+          }
+        },
+        'dragenter .minicard'(event) {
+          const dataTransfer = event.originalEvent.dataTransfer;
+          if (dataTransfer && dataTransfer.types && dataTransfer.types.includes('Files')) {
+            event.preventDefault();
+            event.stopPropagation();
+            const card = this.data();
+            const board = card.board();
+            // Only allow drag-and-drop if user can modify card and board allows attachments
+            if (Utils.canModifyCard() && board && board.allowsAttachments) {
+              $(event.currentTarget).addClass('is-dragging-over');
+            }
+          }
+        },
+        'dragleave .minicard'(event) {
+          const dataTransfer = event.originalEvent.dataTransfer;
+          if (dataTransfer && dataTransfer.types && dataTransfer.types.includes('Files')) {
+            event.preventDefault();
+            event.stopPropagation();
+            $(event.currentTarget).removeClass('is-dragging-over');
+          }
+        },
+        'drop .minicard'(event) {
+          const dataTransfer = event.originalEvent.dataTransfer;
+          if (dataTransfer && dataTransfer.types && dataTransfer.types.includes('Files')) {
+            event.preventDefault();
+            event.stopPropagation();
+            $(event.currentTarget).removeClass('is-dragging-over');
+
+            const card = this.data();
+            const board = card.board();
+
+            // Check permissions
+            if (!Utils.canModifyCard() || !board || !board.allowsAttachments) {
+              return;
+            }
+
+            // Check if this is a file drop (not a card reorder)
+            if (!dataTransfer.files || dataTransfer.files.length === 0) {
+              return;
+            }
+
+            const files = dataTransfer.files;
+            if (files && files.length > 0) {
+              handleFileUpload(card, files);
+            }
+          }
+        },
      }
    ];
  },
 }).register('minicard');

+BlazeComponent.extendComponent({
+  template() {
+    return 'minicardChecklist';
+  },
+
+  events() {
+    return [
+      {
+        'click .js-open-checklist-menu'(event) {
+          const data = this.currentData();
+          const checklist = data.checklist || data;
+          const card = data.card || this.data();
+          const context = { currentData: () => ({ checklist, card }) };
+          Popup.open('checklistActions').call(context, event);
+        },
+      },
+    ];
+  },
+
+  visibleItems() {
+    const checklist = this.currentData().checklist || this.currentData();
+    const items = checklist.items();
+
+    return items.filter(item => {
+      // Hide finished items if hideCheckedChecklistItems is true
+      if (item.isFinished && checklist.hideCheckedChecklistItems) {
+        return false;
+      }
+      // Hide all items if hideAllChecklistItems is true
+      if (checklist.hideAllChecklistItems) {
+        return false;
+      }
+      return true;
+    });
+  },
+}).register('minicardChecklist');
+
 Template.minicard.helpers({
  hiddenMinicardLabelText() {
    const currentUser = ReactiveCache.getCurrentUser();
@@ -131,6 +237,49 @@ Template.minicard.helpers({
  },
  isWatching() {
    return this.findWatcher(Meteor.userId());
+  },
+  // Upload progress helpers
+  hasActiveUploads() {
+    return uploadProgressManager.hasActiveUploads(this._id);
+  },
+  uploads() {
+    return uploadProgressManager.getUploadsForCard(this._id);
+  },
+  uploadCount() {
+    return uploadProgressManager.getUploadCountForCard(this._id);
+  },
+  listName() {
+    const list = this.list();
+    return list ? list.title : '';
+  },
+
+  shouldShowListOnMinicard() {
+    // Show list name if either:
+    // 1. Board-wide setting is enabled, OR
+    // 2. This specific card has the setting enabled
+    const currentBoard = this.board();
+    if (!currentBoard) return false;
+    return currentBoard.allowsShowListsOnMinicard || this.showListOnMinicard;
+  },
+
+  shouldShowChecklistAtMinicard() {
+    // Return checklists that should be shown on minicard
+    const currentBoard = this.board();
+    if (!currentBoard) return [];
+
+    const checklists = this.checklists();
+    const visibleChecklists = [];
+
+    checklists.forEach(checklist => {
+      // Show checklist if either:
+      // 1. Board-wide setting is enabled, OR
+      // 2. This specific checklist has the setting enabled
+      if (currentBoard.allowsChecklistAtMinicard || checklist.showChecklistAtMinicard) {
+        visibleChecklists.push(checklist);
+      }
+    });
+
+    return visibleChecklists;
  }
 });

@@ -161,35 +310,3 @@ BlazeComponent.extendComponent({
  }
 }).register('editCardSortOrderPopup');

-Template.minicardDetailsActionsPopup.events({
-  'click .js-due-date': Popup.open('editCardDueDate'),
-  'click .js-move-card': Popup.open('moveCard'),
-  'click .js-copy-card': Popup.open('copyCard'),
-  'click .js-set-card-color': Popup.open('setCardColor'),
-  'click .js-add-labels': Popup.open('cardLabels'),
-  'click .js-link': Popup.open('linkCard'),
-  'click .js-move-card-to-top'(event) {
-    event.preventDefault();
-    const minOrder = this.getMinSort();
-    this.move(this.boardId, this.swimlaneId, this.listId, minOrder - 1);
-    Popup.back();
-  },
-  'click .js-move-card-to-bottom'(event) {
-    event.preventDefault();
-    const maxOrder = this.getMaxSort();
-    this.move(this.boardId, this.swimlaneId, this.listId, maxOrder + 1);
-    Popup.back();
-  },
-  'click .js-archive': Popup.afterConfirm('cardArchive', function () {
-    Popup.close();
-    this.archive();
-    Utils.goBoardId(this.boardId);
-  }),
-  'click .js-toggle-watch-card'() {
-    const currentCard = this;
-    const level = currentCard.findWatcher(Meteor.userId()) ? null : 'watching';
-    Meteor.call('watch', 'card', currentCard._id, level, (err, ret) => {
-      if (!err && ret) Popup.back();
-    });
-  },
-});
@@ -11,7 +11,7 @@ template(name="resultCard")
              = getBoard.title
          else
            .broken-cards-null
-              | NULL
+              | {{_ 'no-name'}}
        if getBoard.archived
          i.fa.fa-archive
      li.result-card-context.result-card-context-separator
@@ -25,7 +25,7 @@ template(name="resultCard")
              = getSwimlane.title
          else
            .broken-cards-null
-              | NULL
+              | {{_ 'no-name'}}
        if getSwimlane.archived
          i.fa.fa-archive
      li.result-card-context.result-card-context-separator
@@ -39,6 +39,6 @@ template(name="resultCard")
              = getList.title
          else
            .broken-cards-null
-              | NULL
+              | {{_ 'no-name'}}
        if getList.archived
          i.fa.fa-archive
@@ -87,6 +87,15 @@ textarea.js-edit-subtask-item {
  top: 0;
  bottom: -600px;
  right: 0;
+  z-index: 15;
+}
+
+/* Fix for mobile Safari: ensure this doesn't block card interaction */
+@media screen and (max-width: 800px) {
+  #card-details-overlay {
+    z-index: 15;
+    pointer-events: none;
+  }
 }
 .subtasks {
  background: #f7f7f7;
@@ -127,6 +136,25 @@ textarea.js-edit-subtask-item {
  border-bottom: 2px solid #3cb500;
  border-right: 2px solid #3cb500;
 }
+/* Unicode checkbox icons styling */
+.subtasks-item .check-box-unicode {
+  font-size: 1.3em;
+  margin-right: 8px;
+  cursor: pointer;
+  display: inline-block;
+  vertical-align: middle;
+  line-height: 1;
+}
+/* Grey checkmarks when grey icons setting is enabled */
+body.grey-icons-enabled .subtasks-item .check-box.is-checked {
+  border-bottom: 2px solid #7a7a7a;
+  border-right: 2px solid #7a7a7a;
+}
+body.grey-icons-enabled .subtasks-item .check-box-unicode {
+  filter: grayscale(100%);
+  -webkit-filter: grayscale(100%);
+  opacity: 0.85;
+}
 .subtasks-item .item-title {
  flex: 1;
  padding-left: 10px;
@@ -1,6 +1,6 @@
 template(name="subtasks")
  h3.card-details-item-title
-    i.fa.fa-sitemap
+    i.fa.fa-globe
    | {{_ 'subtasks'}}
  if currentUser.isBoardAdmin
    if toggleDeleteDialog.get
@@ -26,7 +26,7 @@ template(name="subtaskDetail")
      .subtask-title
        span
        if canModifyCard
-          a.fa.fa-navicon.subtask-details-menu.js-open-subtask-details-menu(title="{{_ 'subtaskActionsPopup-title'}}")
+          a.subtask-details-menu.js-open-subtask-details-menu(title="{{_ 'subtaskActionsPopup-title'}}")
        if canModifyCard
          h2.title.js-open-inlined-form.is-editable
            +viewer
@@ -40,7 +40,7 @@ template(name="addSubtaskItemForm")
  textarea.js-add-subtask-item(rows='1' autofocus dir="auto")
  .edit-controls.clearfix
    button.primary.confirm.js-submit-add-subtask-item-form(type="submit") {{_ 'save'}}
-    a.fa.fa-times-thin.js-close-inlined-form
+    a.js-close-inlined-form

 template(name="editSubtaskItemForm")
  textarea.js-edit-subtask-item(rows='1' autofocus dir="auto")
@@ -50,8 +50,8 @@ template(name="editSubtaskItemForm")
      = subtask.title
  .edit-controls.clearfix
    button.primary.confirm.js-submit-edit-subtask-item-form(type="submit") {{_ 'save'}}
-    a.fa.fa-times-thin.js-close-inlined-form
-    span(title=createdAt) {{ moment createdAt }}
+    a.js-close-inlined-form
+    span(title=createdAt) {{ displayDate createdAt }}
    if canModifyCard
      if currentUser.isBoardAdmin
        a.js-delete-subtask-item {{_ "delete"}}...
@@ -74,12 +74,14 @@ template(name="subtasksItems")
 template(name='subtaskItemDetail')
  .js-subtasks-item.subtasks-item
    if canModifyCard
-      .check-box.materialCheckBox(class="{{#if item.isFinished }}is-checked{{/if}}")
+      span.check-box-unicode
+        i.fa(class="{{#if item.isFinished}}fa-check-square{{else}}fa-square-o{{/if}}")
      .item-title.js-open-inlined-form.is-editable(class="{{#if item.isFinished }}is-checked{{/if}}")
        +viewer
          = item.title
    else
-      .materialCheckBox(class="{{#if item.isFinished }}is-checked{{/if}}")
+      span.check-box-unicode
+        i.fa(class="{{#if item.isFinished}}fa-check-square{{else}}fa-square-o{{/if}}")
      .item-title(class="{{#if item.isFinished }}is-checked{{/if}}")
        +viewer
          = item.title
@@ -1,4 +1,5 @@
 import { ReactiveCache } from '/imports/reactiveCache';
+import { FlowRouter } from 'meteor/ostrio:flow-router-extra';

 BlazeComponent.extendComponent({
  addSubtask(event) {
@@ -61,10 +62,10 @@ BlazeComponent.extendComponent({
    textarea.focus();
  },

-  deleteSubtask() {
+  async deleteSubtask() {
    const subtask = this.currentData().subtask;
    if (subtask && subtask._id) {
-      subtask.archive();
+      await subtask.archive();
    }
  },

@@ -72,12 +73,12 @@ BlazeComponent.extendComponent({
    return ReactiveCache.getCurrentUser().isBoardAdmin();
  },

-  editSubtask(event) {
+  async editSubtask(event) {
    event.preventDefault();
    const textarea = this.find('textarea.js-edit-subtask-item');
    const title = textarea.value.trim();
    const subtask = this.currentData().subtask;
-    subtask.setTitle(title);
+    await subtask.setTitle(title);
  },

  pressKey(event) {
@@ -104,7 +105,19 @@ BlazeComponent.extendComponent({
 }).register('subtasks');

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

 BlazeComponent.extendComponent({
@@ -125,11 +138,11 @@ BlazeComponent.extendComponent({
            });
          }
        },
-        'click .js-delete-subtask' : Popup.afterConfirm('subtaskDelete', function () {
+        'click .js-delete-subtask' : Popup.afterConfirm('subtaskDelete', async function () {
          Popup.back(2);
          const subtask = this.subtask;
          if (subtask && subtask._id) {
-            subtask.archive();
+            await subtask.archive();
          }
        }),
      }
@@ -0,0 +1,123 @@
+/* Original Position Component Styles */
+.original-position-info {
+  margin: 5px 0;
+  padding: 8px;
+  border-radius: 4px;
+  font-size: 12px;
+  line-height: 1.4;
+}
+
+.original-position-loading {
+  color: #666;
+  font-style: italic;
+}
+
+.original-position-loading i {
+  margin-right: 5px;
+}
+
+.original-position-details {
+  background-color: #f8f9fa;
+  border: 1px solid #e9ecef;
+  border-radius: 3px;
+  padding: 6px 8px;
+}
+
+.original-position-moved {
+  color: #856404;
+  background-color: #fff3cd;
+  border: 1px solid #ffeaa7;
+  border-radius: 3px;
+  padding: 4px 6px;
+  margin-bottom: 4px;
+}
+
+.original-position-moved i {
+  color: #f39c12;
+  margin-right: 5px;
+}
+
+.original-position-unchanged {
+  color: #155724;
+  background-color: #d4edda;
+  border: 1px solid #c3e6cb;
+  border-radius: 3px;
+  padding: 4px 6px;
+  margin-bottom: 4px;
+}
+
+.original-position-unchanged i {
+  color: #28a745;
+  margin-right: 5px;
+}
+
+.original-position-text {
+  font-weight: 500;
+}
+
+.original-title {
+  color: #6c757d;
+  font-size: 11px;
+  margin-top: 4px;
+  padding-top: 4px;
+  border-top: 1px solid #e9ecef;
+}
+
+.original-title strong {
+  color: #495057;
+}
+
+/* Integration with existing Wekan styles */
+.swimlane .original-position-info,
+.list .original-position-info,
+.card .original-position-info {
+  margin: 2px 0;
+  padding: 4px 6px;
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+  .original-position-info {
+    font-size: 11px;
+    padding: 6px;
+  }
+
+  .original-position-details {
+    padding: 4px 6px;
+  }
+
+  .original-position-moved,
+  .original-position-unchanged {
+    padding: 3px 5px;
+  }
+}
+
+/* Dark theme support */
+@media (prefers-color-scheme: dark) {
+  .original-position-details {
+    background-color: #2d3748;
+    border-color: #4a5568;
+    color: #e2e8f0;
+  }
+
+  .original-position-moved {
+    background-color: #744210;
+    border-color: #b7791f;
+    color: #fbd38d;
+  }
+
+  .original-position-unchanged {
+    background-color: #22543d;
+    border-color: #38a169;
+    color: #9ae6b4;
+  }
+
+  .original-title {
+    color: #a0aec0;
+    border-color: #4a5568;
+  }
+
+  .original-title strong {
+    color: #e2e8f0;
+  }
+}
@@ -0,0 +1,27 @@
+<template name="originalPosition">
+  <div class="original-position-info">
+    {{#if isLoading}}
+      <div class="original-position-loading">
+        ⏳ Loading original position...
+      </div>
+    {{else if showOriginalPosition}}
+      <div class="original-position-details">
+        {{#if hasMovedFromOriginal}}
+          <div class="original-position-moved">
+            <span class="original-position-text">ℹ️ {{getOriginalPositionDescription}}</span>
+          </div>
+        {{else}}
+          <div class="original-position-unchanged">
+            <span class="original-position-text">✅ In original position</span>
+          </div>
+        {{/if}}
+
+        {{#if getOriginalTitle}}
+          <div class="original-title">
+            <strong>Original title:</strong> {{getOriginalTitle}}
+          </div>
+        {{/if}}
+      </div>
+    {{/if}}
+  </div>
+</template>
@@ -0,0 +1,98 @@
+import { BlazeComponent } from 'meteor/peerlibrary:blaze-components';
+import { ReactiveVar } from 'meteor/reactive-var';
+import { Meteor } from 'meteor/meteor';
+import { Template } from 'meteor/templating';
+import './originalPosition.html';
+
+/**
+ * Component to display original position information for swimlanes, lists, and cards
+ */
+class OriginalPositionComponent extends BlazeComponent {
+  onCreated() {
+    super.onCreated();
+    this.originalPosition = new ReactiveVar(null);
+    this.isLoading = new ReactiveVar(false);
+    this.hasMoved = new ReactiveVar(false);
+
+    this.autorun(() => {
+      const data = this.data();
+      if (data && data.entityId && data.entityType) {
+        this.loadOriginalPosition(data.entityId, data.entityType);
+      }
+    });
+  }
+
+  loadOriginalPosition(entityId, entityType) {
+    this.isLoading.set(true);
+
+    const methodName = `positionHistory.get${entityType.charAt(0).toUpperCase() + entityType.slice(1)}OriginalPosition`;
+
+    Meteor.call(methodName, entityId, (error, result) => {
+      this.isLoading.set(false);
+      if (error) {
+        console.error('Error loading original position:', error);
+        this.originalPosition.set(null);
+      } else {
+        this.originalPosition.set(result);
+
+        // Check if the entity has moved
+        const movedMethodName = `positionHistory.has${entityType.charAt(0).toUpperCase() + entityType.slice(1)}Moved`;
+        Meteor.call(movedMethodName, entityId, (movedError, movedResult) => {
+          if (!movedError) {
+            this.hasMoved.set(movedResult);
+          }
+        });
+      }
+    });
+  }
+
+  getOriginalPosition() {
+    return this.originalPosition.get();
+  }
+
+  isLoading() {
+    return this.isLoading.get();
+  }
+
+  hasMovedFromOriginal() {
+    return this.hasMoved.get();
+  }
+
+  getOriginalPositionDescription() {
+    const position = this.getOriginalPosition();
+    if (!position) return 'No original position data';
+
+    if (position.originalPosition) {
+      const entityType = this.data().entityType;
+      let description = `Original position: ${position.originalPosition.sort || 0}`;
+
+      if (entityType === 'list' && position.originalSwimlaneId) {
+        description += ` in swimlane ${position.originalSwimlaneId}`;
+      } else if (entityType === 'card') {
+        if (position.originalSwimlaneId) {
+          description += ` in swimlane ${position.originalSwimlaneId}`;
+        }
+        if (position.originalListId) {
+          description += ` in list ${position.originalListId}`;
+        }
+      }
+
+      return description;
+    }
+
+    return 'No original position data';
+  }
+
+  getOriginalTitle() {
+    const position = this.getOriginalPosition();
+    return position ? position.originalTitle : '';
+  }
+
+  showOriginalPosition() {
+    return this.getOriginalPosition() !== null;
+  }
+}
+
+OriginalPositionComponent.register('originalPosition');
+
+export default OriginalPositionComponent;
@@ -4,11 +4,10 @@ template(name="datepicker")
            .fields
                .left
                    label(for="date") {{_ 'date'}}
-                    input.js-date-field#date(type="text" name="date" value=showDate placeholder=dateFormat autofocus)
+                    input.js-date-field#date(type="date" name="date" value=showDate autofocus)
                .right
                    label(for="time") {{_ 'time'}}
-                    input.js-time-field#time(type="text" name="time" value=showTime placeholder=timeFormat)
-            .js-datepicker
+                    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'}}
@@ -5,11 +5,11 @@ button {
  box-sizing: border-box;
  background-color: #ebebeb;
  border: 1px solid #ccc;
-  border-radius: 3px;
+  border-radius: 0.4vw;
  display: block;
-  margin-bottom: 12px;
-  min-height: 34px;
-  padding: 7px;
+  margin-bottom: 1.5vh;
+  min-height: 4.5vh;
+  padding: 1vh 1vw;
 }
 select.full,
 textarea.full,
@@ -31,7 +31,7 @@ button:focus {
  outline: 0;
 }
 input[type="file"] {
-  margin-bottom: 16px;
+  margin-bottom: 2vh;
 }
 input[type="radio"] {
  -webkit-appearance: radio;
@@ -42,7 +42,7 @@ input[type="text"],
 input[type="password"],
 input[type="email"] {
  transition: background 85ms ease-in, border-color 85ms ease-in;
-  width: 250px;
+  width: min(250px, 30vw);
 }
 input[type="text"].inline-input,
 input[type="password"].inline-input,
@@ -50,10 +50,10 @@ input[type="email"].inline-input {
  background: none;
  border: 0;
  margin: 0;
-  padding: 2px;
+  padding: 0.3vh;
  min-height: 0;
-  height: 18px;
-  width: 200px;
+  height: 2.5vh;
+  width: min(200px, 25vw);
 }
 input[type="text"].full-line,
 input[type="password"].full-line,
@@ -103,9 +103,9 @@ textarea:disabled {
  user-select: none;
 }
 select {
-  max-height: 300px;
-  width: 256px;
-  margin-bottom: 8px;
+  max-height: 40vh;
+  width: min(256px, 32vw);
+  margin-bottom: 1vh;
 }
 select.inline {
  width: 100%;
@@ -114,14 +114,14 @@ option[disabled] {
  color: #222;
 }
 textarea {
-  height: 150px;
+  height: 20vh;
  transition: background 85ms ease-in, border-color 85ms ease-in;
  resize: vertical;
  width: 100%;
 }
 textarea.editor {
  resize: none;
-  padding-bottom: 22px;
+  padding-bottom: 3vh;
 }
 .button {
  border-radius: 3px;
@@ -130,33 +130,36 @@ textarea.editor {
 }
 input[type="submit"],
 button {
-  background: #cfcfcf;
-  background: linear-gradient(#cfcfcf, #c2c2c2);
+  background: #000;
+  background: linear-gradient(#000, #000);
  border: none;
  cursor: pointer;
  display: inline-block;
  font-weight: 700;
-  line-height: 22px;
-  padding: 7px 20px;
+  line-height: 1.3;
+  padding: 1vh 2.5vw;
  text-align: center;
+  color: #fff;
 }
 input[type="submit"] .wide,
 button .wide {
-  padding-left: 30px;
-  padding-right: 30px;
+  padding-left: 4vw;
+  padding-right: 4vw;
 }
 input[type="submit"]:hover,
 button:hover,
 input[type="submit"]:focus,
 button:focus {
-  background: #c2c2c2;
-  background: linear-gradient(#c2c2c2, #b5b5b5);
+  background: #222;
+  background: linear-gradient(#222, #222);
+  color: #fff;
 }
 input[type="submit"]:active,
 button:active {
-  background: #b5b5b5;
-  background: linear-gradient(#b5b5b5, #a8a8a8);
-  box-shadow: inset 0 3px 6px rgba(0,0,0,0.1);
+  background: #111;
+  background: linear-gradient(#111, #111);
+  box-shadow: inset 0 3px 6px rgba(0,0,0,0.3);
+  color: #fff;
 }
 input[type="submit"]:active:hover,
 button:active:hover,
@@ -183,6 +186,12 @@ input[type="submit"].primary:active,
 button.primary:active {
  background: #01628c;
 }
+input[type="submit"].negate,
+button.negate {
+  background: #eb5a46;
+  box-shadow: 0 1px 0 #4d4d4d;
+  color: #fff;
+}
 input[type="submit"].negate:hover,
 button.negate:hover,
 input[type="submit"].negate:focus,
@@ -217,15 +226,15 @@ input[type="submit"]:disabled:active,
 input[type="button"].disabled:active,
 button.disabled:active,
 .button.disabled:active {
-  background: #cfcfcf;
+  background: #555;
  cursor: default;
  box-shadow: none;
-  color: #a8a8a8;
+  color: #999;
 }
 fieldset {
  border: 1px solid #bfbfbf;
-  padding: 15px;
-  margin-bottom: 15px;
+  padding: 2vh 2vw;
+  margin-bottom: 2vh;
 }
 input[type="hidden"] {
  display: none;
@@ -233,18 +242,18 @@ input[type="hidden"] {
 .radio-div,
 .check-div {
  display: block;
-  margin: 0 0 4px 20px;
-  min-height: 20px;
+  margin: 0 0 0.5vh 2.5vw;
+  min-height: 2.5vh;
  position: relative;
 }
 .radio-div input,
 .check-div input {
-  left: -18px;
+  left: -2.5vw;
  min-height: 0;
  margin: 0;
  padding: 0;
  position: absolute;
-  top: 2px;
+  top: 0.3vh;
 }
 .radio-div label,
 .check-div label {
@@ -253,7 +262,7 @@ input[type="hidden"] {
 label {
  display: block;
  font-weight: 700;
-  margin-bottom: 4px;
+  margin-bottom: 0.5vh;
 }
 label.form-error {
  color: #d32f2f;
@@ -269,7 +278,7 @@ textarea::-moz-placeholder {
  display: flex;
  align-items: center;
  margin-top: 0px;
-  margin-bottom: 12px;
+  margin-bottom: 1.5vh;
 }
@media print {
  .add-controls {
@@ -281,13 +290,13 @@ textarea::-moz-placeholder {
 .edit-controls input[type=button],
 .add-controls input[type=button] {
  float: left;
-  height: 32px;
+  height: 4.5vh;
  margin-bottom: 0px;
 }
 .edit-controls .fa-times-thin,
 .add-controls .fa-times-thin {
-  font-size: 26px;
-  margin: 3px 10px;
+  font-size: clamp(20px, 4vw, 26px);
+  margin: 0.5vh 1.5vw;
 }
 [type="checkbox"]:not(:checked),
 [type="checkbox"]:checked {
@@ -315,11 +324,18 @@ textarea::-moz-placeholder {
  margin-right: 6px;
  border-top: 2px solid transparent;
  border-left: 2px solid transparent;
+  border-bottom: 2px solid #3cb500;
+  border-right: 2px solid #3cb500;
  transform: rotate(40deg);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform-origin: 100% 100%;
 }
+/* Grey checkmarks when grey icons setting is enabled */
+body.grey-icons-enabled .materialCheckBox.is-checked {
+  border-bottom: 2px solid #7a7a7a;
+  border-right: 2px solid #7a7a7a;
+}
 .button-link {
  background: #fff;
  background: linear-gradient(#fff, #f5f5f5);
@@ -393,12 +409,12 @@ textarea::-moz-placeholder {
 .button-link.setting.disabled.primary,
 .button-link.setting.disabled.primary:hover,
 .button-link.setting.disabled.primary:active {
-  background: #cfcfcf;
-  border-color: #c2c2c2;
-  border-bottom-color: #b5b5b5;
+  background: #555;
+  border-color: #444;
+  border-bottom-color: #333;
  cursor: default;
  box-shadow: none;
-  color: #a8a8a8;
+  color: #999;
 }
 .button-link.setting .label {
  color: #222;
@@ -0,0 +1,203 @@
+/* Gantt chart cell background colors for Received, Start, Due, End (matching cardDetails) */
+.ganttview-received {
+  background-color: #dbdbdb !important;
+  color: #000 !important;
+  font-size: 18px !important;
+  font-weight: bold !important;
+}
+.ganttview-start {
+  background-color: #90ee90 !important;
+  color: #000 !important;
+  font-size: 18px !important;
+  font-weight: bold !important;
+}
+.ganttview-due {
+  background-color: #ffd700 !important;
+  color: #000 !important;
+  font-size: 18px !important;
+  font-weight: bold !important;
+}
+.ganttview-end {
+  background-color: #ffb3b3 !important;
+  color: #000 !important;
+  font-size: 18px !important;
+  font-weight: bold !important;
+}
+/* Gantt View Styles */
+
+.gantt-view {
+  width: 100%;
+  height: auto;
+  overflow: visible;
+  background-color: #fff;
+}
+
+.gantt-view.swimlane {
+  background-color: #fff;
+  padding: 10px;
+}
+
+.gantt-container {
+  overflow-x: auto;
+  overflow-y: visible;
+  background-color: #fff;
+  display: block;
+  width: 100%;
+}
+
+.gantt-container table,
+.gantt-table {
+  border-collapse: collapse;
+  width: 100%;
+  min-width: 800px;
+  border: 2px solid #666;
+  font-family: sans-serif;
+  font-size: 13px;
+  background-color: #fff;
+}
+
+.gantt-container thead {
+  background-color: #e8e8e8;
+  border-bottom: 2px solid #666;
+  font-weight: bold;
+  position: sticky;
+  top: 0;
+  z-index: 10;
+}
+
+.gantt-container thead th,
+.gantt-container thead tr > td:first-child {
+  border-right: 2px solid #666;
+  padding: 4px; /* half of 8px */
+  width: 100px; /* half of 200px */
+  text-align: left;
+  font-weight: bold;
+  background-color: #e8e8e8;
+  min-width: 100px; /* half of 200px */
+}
+
+.gantt-container thead td {
+  border-right: 1px solid #999;
+  padding: 2px 1px; /* half */
+  text-align: center;
+  background-color: #f5f5f5;
+  font-size: 11px;
+  min-width: 15px; /* half of 30px */
+  font-weight: bold;
+  height: auto;
+  line-height: 1.2;
+  white-space: normal;
+  word-break: break-word;
+}
+
+.gantt-container tbody tr {
+  border-bottom: 1px solid #999;
+  height: 32px;
+}
+
+.gantt-container tbody tr:hover {
+  background-color: #f9f9f9;
+}
+
+.gantt-container tbody tr:hover td {
+  background-color: #f9f9f9 !important;
+}
+
+.gantt-container tbody td {
+  border-right: 1px solid #ccc;
+  padding: 1px; /* half */
+  text-align: center;
+  min-width: 15px; /* half of 30px */
+  height: 32px;
+  vertical-align: middle;
+  line-height: 28px;
+  background-color: #ffffff;
+  font-size: 18px;
+  font-weight: bold;
+}
+
+.gantt-container tbody td:nth-child(even) {
+  background-color: #fafafa;
+}
+
+.gantt-container tbody td:first-child {
+  border-right: 2px solid #666;
+  padding: 4px; /* half of 8px */
+  font-weight: 500;
+  cursor: pointer;
+  background-color: #fafafa !important;
+  text-align: left;
+  width: 100px; /* half of 200px */
+  min-width: 100px; /* half of 200px */
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  height: auto;
+  line-height: normal;
+}
+
+.gantt-container tbody td:first-child:hover {
+  background-color: #f0f0f0 !important;
+  text-decoration: underline;
+}
+
+.js-gantt-task-cell {
+  cursor: pointer;
+}
+
+.js-gantt-date-icon {
+  cursor: pointer;
+}
+
+.gantt-container .ganttview-weekend {
+  background-color: #efefef;
+}
+
+.gantt-container .ganttview-today {
+  background-color: #fcf8e3;
+  border-right: 2px solid #ffb347;
+}
+
+/* Task bar styling - VERY VISIBLE */
+.gantt-container tbody td.ganttview-block {
+  background-color: #4CAF50 !important;
+  color: #fff !important;
+  font-size: 18px !important;
+  font-weight: bold !important;
+  padding: 2px !important;
+  border-radius: 2px;
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+  .gantt-container table {
+    font-size: 11px;
+  }
+
+  .gantt-container thead td {
+    min-width: 20px;
+    padding: 2px;
+  }
+
+  .gantt-container tbody td {
+    min-width: 20px;
+    padding: 1px;
+    height: 20px;
+  }
+
+  .gantt-container tbody td:first-child {
+    width: 100px;
+    font-size: 12px;
+  }
+}
+
+/* Print styles */
+@media print {
+  .gantt-container {
+    overflow: visible;
+  }
+
+  .gantt-container table {
+    page-break-inside: avoid;
+  }
+}
@@ -0,0 +1,27 @@
+//- Gantt Chart View Template
+template(name="ganttView")
+  link(rel="stylesheet" href="/client/components/gantt/gantt.css")
+  link(rel="stylesheet" href="/client/components/gantt/ganttCard.css")
+  .gantt-view
+    h2 {{_ 'board-view-gantt'}}
+    if hasSelectedCard
+      +ganttCard(selectedCard)
+    each weeks
+      table.gantt-table
+        thead
+          tr
+            th {{_ 'task'}} {{_ 'predicate-week'}} {{week}}
+            each weekDays this
+              th
+                | {{formattedDate .}} {{weekdayLabel .}}
+        tbody
+          each cardsInWeek this
+            tr(data-card-id="{{cardId .}}")
+              td.js-gantt-task-cell
+                a.js-gantt-card-title(href="#")
+                  +viewer
+                    | {{cardTitle .}}
+              each weekDays ..
+                td(class="{{cellClasses .. .}}" data-card-id="{{cardId ..}}" data-date-type="{{cellContentClass .. .}}")
+                  | {{cellContent .. .}}
+
@@ -0,0 +1,219 @@
+import { FlowRouter } from 'meteor/ostrio:flow-router-extra';
+
+// Add click handler to ganttView for card titles
+Template.ganttView.events({
+  'click .js-gantt-card-title'(event, template) {
+    event.preventDefault();
+    // Get card ID from the closest row's data attribute
+    const $row = template.$(event.currentTarget).closest('tr');
+    const cardId = $row.data('card-id');
+
+    if (cardId) {
+      template.selectedCardId.set(cardId);
+    }
+  },
+});
+import { Template } from 'meteor/templating';
+
+// Blaze template helpers for ganttView
+function getISOWeekInfo(d) {
+	const date = new Date(Date.UTC(d.getFullYear(), d.getMonth(), d.getDate()));
+	const dayNum = date.getUTCDay() || 7;
+	date.setUTCDate(date.getUTCDate() + 4 - dayNum);
+	const yearStart = new Date(Date.UTC(date.getUTCFullYear(), 0, 1));
+	const week = Math.ceil((((date - yearStart) / 86400000) + 1) / 7);
+	return { year: date.getUTCFullYear(), week };
+}
+function startOfISOWeek(d) {
+	const date = new Date(d);
+	const day = date.getDay() || 7;
+	if (day !== 1) date.setDate(date.getDate() - (day - 1));
+	date.setHours(0,0,0,0);
+	return date;
+}
+
+Template.ganttView.helpers({
+	weeks() {
+		const board = Utils.getCurrentBoard();
+		if (!board) return [];
+		const cards = Cards.find({ boardId: board._id }, { sort: { startAt: 1, dueAt: 1 } }).fetch();
+		const weeksMap = new Map();
+		const relevantCards = cards.filter(c => c.receivedAt || c.startAt || c.dueAt || c.endAt);
+		relevantCards.forEach(card => {
+			['receivedAt','startAt','dueAt','endAt'].forEach(field => {
+				if (card[field]) {
+					const dt = new Date(card[field]);
+					const info = getISOWeekInfo(dt);
+					const key = `${info.year}-W${info.week}`;
+					if (!weeksMap.has(key)) {
+						weeksMap.set(key, { year: info.year, week: info.week, start: startOfISOWeek(dt) });
+					}
+				}
+			});
+		});
+		return Array.from(weeksMap.values()).sort((a,b) => a.start - b.start);
+	},
+	weekDays(week) {
+		const weekStart = new Date(week.start);
+		return Array.from({length:7}, (_,i) => {
+			const d = new Date(weekStart);
+			d.setDate(d.getDate() + i);
+			d.setHours(0,0,0,0);
+			return d;
+		});
+	},
+	weekdayLabel(day) {
+		const weekdayKeys = ['monday','tuesday','wednesday','thursday','friday','saturday','sunday'];
+		return TAPi18n.__(weekdayKeys[day.getDay() === 0 ? 6 : day.getDay() - 1]);
+	},
+	formattedDate(day) {
+		const currentUser = ReactiveCache.getCurrentUser && ReactiveCache.getCurrentUser();
+		const dateFormat = currentUser ? currentUser.getDateFormat() : 'YYYY-MM-DD';
+		return formatDateByUserPreference(day, dateFormat, false);
+	},
+	cardsInWeek(week) {
+		const board = Utils.getCurrentBoard();
+		if (!board) return [];
+		const cards = Cards.find({ boardId: board._id }).fetch();
+		return cards.filter(card => {
+			return ['receivedAt','startAt','dueAt','endAt'].some(field => {
+				if (card[field]) {
+					const dt = new Date(card[field]);
+					const info = getISOWeekInfo(dt);
+					return info.week === week.week && info.year === week.year;
+				}
+				return false;
+			});
+		});
+	},
+	cardTitle(card) {
+		return card.title;
+	},
+	cardId(card) {
+		return card._id;
+	},
+	cardUrl(card) {
+		if (!card) return '#';
+		const board = ReactiveCache.getBoard(card.boardId);
+		if (!board) return '#';
+		return FlowRouter.path('card', {
+			boardId: card.boardId,
+			slug: board.slug,
+			cardId: card._id,
+		});
+	},
+	 cellContentClass(card, day) {
+		 const cardDates = {
+			 receivedAt: card.receivedAt ? new Date(card.receivedAt) : null,
+			 startAt: card.startAt ? new Date(card.startAt) : null,
+			 dueAt: card.dueAt ? new Date(card.dueAt) : null,
+			 endAt: card.endAt ? new Date(card.endAt) : null,
+		 };
+		 if (cardDates.receivedAt && cardDates.receivedAt.toDateString() === day.toDateString()) return 'ganttview-received';
+		 if (cardDates.startAt && cardDates.startAt.toDateString() === day.toDateString()) return 'ganttview-start';
+		 if (cardDates.dueAt && cardDates.dueAt.toDateString() === day.toDateString()) return 'ganttview-due';
+		 if (cardDates.endAt && cardDates.endAt.toDateString() === day.toDateString()) return 'ganttview-end';
+		 return '';
+	 },
+	 cellContent(card, day) {
+		 const cardDates = {
+			 receivedAt: card.receivedAt ? new Date(card.receivedAt) : null,
+			 startAt: card.startAt ? new Date(card.startAt) : null,
+			 dueAt: card.dueAt ? new Date(card.dueAt) : null,
+			 endAt: card.endAt ? new Date(card.endAt) : null,
+		 };
+		 if (cardDates.receivedAt && cardDates.receivedAt.toDateString() === day.toDateString()) return '📥';
+		 if (cardDates.startAt && cardDates.startAt.toDateString() === day.toDateString()) return '🚀';
+		 if (cardDates.dueAt && cardDates.dueAt.toDateString() === day.toDateString()) return '⏰';
+		 if (cardDates.endAt && cardDates.endAt.toDateString() === day.toDateString()) return '🏁';
+		 return '';
+	 },
+	isToday(day) {
+		const today = new Date();
+		return day.toDateString() === today.toDateString();
+	},
+	isWeekend(day) {
+		const idx = day.getDay();
+		return idx === 0 || idx === 6;
+	},
+	hasSelectedCard() {
+		return Template.instance().selectedCardId.get() !== null;
+	},
+	selectedCard() {
+		const cardId = Template.instance().selectedCardId.get();
+		return cardId ? ReactiveCache.getCard(cardId) : null;
+	},
+	cellClasses(card, day) {
+		// Get the base class from cellContentClass logic
+		const cardDates = {
+			receivedAt: card.receivedAt ? new Date(card.receivedAt) : null,
+			startAt: card.startAt ? new Date(card.startAt) : null,
+			dueAt: card.dueAt ? new Date(card.dueAt) : null,
+			endAt: card.endAt ? new Date(card.endAt) : null,
+		};
+		let classes = '';
+		if (cardDates.receivedAt && cardDates.receivedAt.toDateString() === day.toDateString()) classes = 'ganttview-received';
+		else if (cardDates.startAt && cardDates.startAt.toDateString() === day.toDateString()) classes = 'ganttview-start';
+		else if (cardDates.dueAt && cardDates.dueAt.toDateString() === day.toDateString()) classes = 'ganttview-due';
+		else if (cardDates.endAt && cardDates.endAt.toDateString() === day.toDateString()) classes = 'ganttview-end';
+
+		// Add conditional classes
+		const today = new Date();
+		if (day.toDateString() === today.toDateString()) classes += ' ganttview-today';
+		const idx = day.getDay();
+		if (idx === 0 || idx === 6) classes += ' ganttview-weekend';
+		if (classes.trim()) classes += ' js-gantt-date-icon';
+
+		return classes.trim();
+	}
+});
+
+Template.ganttView.onCreated(function() {
+	this.selectedCardId = new ReactiveVar(null);
+	// Provide properties expected by cardDetails component
+	this.showOverlay = new ReactiveVar(false);
+	this.mouseHasEnterCardDetails = false;
+});
+
+// Blaze onRendered logic for ganttView
+Template.ganttView.onRendered(function() {
+	const self = this;
+	this.autorun(() => {
+		// If you have legacy imperative rendering, keep it here
+		if (typeof renderGanttChart === 'function') {
+			renderGanttChart();
+		}
+	});
+	// Add click handler for date cells (Received, Start, Due, End)
+	this.$('.gantt-table').on('click', '.js-gantt-date-icon', function(e) {
+		e.preventDefault();
+		e.stopPropagation();
+		const $cell = self.$(this);
+		const cardId = $cell.data('card-id');
+		let dateType = $cell.data('date-type');
+		// Remove 'ganttview-' prefix to match popup map
+		if (typeof dateType === 'string' && dateType.startsWith('ganttview-')) {
+			dateType = dateType.replace('ganttview-', '');
+		}
+		const popupMap = {
+			received: 'editCardReceivedDate',
+			start: 'editCardStartDate',
+			due: 'editCardDueDate',
+			end: 'editCardEndDate',
+		};
+		const popupName = popupMap[dateType];
+		if (!popupName || typeof Popup === 'undefined' || typeof Popup.open !== 'function') return;
+		const card = ReactiveCache.getCard(cardId);
+		if (!card) return;
+		const openFn = Popup.open(popupName);
+		openFn.call({ currentData: () => card }, e, { dataContextIfCurrentDataIsUndefined: card });
+	});
+
+});
+
+import markdownit from 'markdown-it';
+import { TAPi18n } from '/imports/i18n';
+import { formatDateByUserPreference } from '/imports/lib/dateUtils';
+import { ReactiveCache } from '/imports/reactiveCache';
+
+const md = markdownit({ breaks: true, linkify: true });
@@ -0,0 +1,47 @@
+.gantt-card-wrapper {
+  background: white;
+  border: 1px solid #ddd;
+  border-radius: 5px;
+  margin: 1rem 0;
+  padding: 1rem;
+  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+}
+
+.gantt-card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 1rem;
+  border-bottom: 1px solid #eee;
+  padding-bottom: 0.5rem;
+}
+
+.gantt-card-header h3 {
+  margin: 0;
+  color: #333;
+}
+
+.close-button {
+  background: none;
+  border: none;
+  font-size: 1.5rem;
+  cursor: pointer;
+  color: #666;
+  padding: 0;
+  width: 30px;
+  height: 30px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.close-button:hover {
+  background-color: #f0f0f0;
+  color: #333;
+}
+
+.gantt-card-content {
+  max-height: 400px;
+  overflow-y: auto;
+}
@@ -0,0 +1,2 @@
+template(name="ganttCard")
+  +cardDetails(selectedCard)
@@ -0,0 +1,45 @@
+BlazeComponent.extendComponent({
+  onCreated() {
+    // Provide the expected parent component properties for cardDetails
+    this.showOverlay = new ReactiveVar(false);
+    this.mouseHasEnterCardDetails = false;
+  },
+
+  selectedCard() {
+    // The selected card is now passed as a parameter to the component
+    return this.currentData();
+  },
+
+  events() {
+    return [
+      {
+        'click .js-close-card-details'(event) {
+          event.preventDefault();
+          // Find the ganttView template instance and clear selectedCardId
+          let view = Blaze.currentView;
+          while (view) {
+            if (view.templateInstance && view.templateInstance().selectedCardId) {
+              view.templateInstance().selectedCardId.set(null);
+              break;
+            }
+            view = view.parentView;
+          }
+        },
+      },
+    ];
+  },
+}).register('ganttCard');
+
+// Add click handler to ganttView for card titles
+Template.ganttView.events({
+  'click .js-gantt-card-title'(event, template) {
+    event.preventDefault();
+    // Get card ID from the closest row's data attribute
+    const $row = template.$(event.currentTarget).closest('tr');
+    const cardId = $row.data('card-id');
+
+    if (cardId) {
+      template.selectedCardId.set(cardId);
+    }
+  },
+});
@@ -5,17 +5,17 @@
 .map-members .mapping-list {
  display: flex;
  flex-wrap: wrap;
-  margin: 0 -4px;
+  margin: 0 -0.5vw;
 }
 .map-members .mapping-list .mapping-item {
-  max-width: 300px;
-  min-width: 200px;
-  padding: 6px;
-  margin: 5px;
+  max-width: min(300px, 40vw);
+  min-width: min(200px, 26vw);
+  padding: 0.8vh 0.8vw;
+  margin: 0.7vh;
  flex: 1;
  background: #fff;
-  border-radius: 3px;
-  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
+  border-radius: 0.4vw;
+  box-shadow: 0 0.2vh 0.3vh rgba(0,0,0,0.15);
 }
 .map-members .mapping-list .mapping-item:hover {
  background: #f2f2f2;
@@ -37,7 +37,7 @@
 }
 .map-members .mapping-list .wekan {
  display: inline-block;
-  width: 35px;
+  width: 4.5vw;
 }
 .map-members .mapping-list .wekan .member {
  float: none;
@@ -1,7 +1,7 @@
 template(name="importHeaderBar")
  h1
    a.back-btn(href="{{pathFor 'home'}}")
-      i.fa.fa-chevron-left
+      i.fa-arrow-left
    | {{_ title}}

 template(name="import")
@@ -56,17 +56,17 @@ template(name="importMapMembersAddPopup")
    p
      | {{_ 'import-user-select'}}
    .js-map-member
-      +EasySearch.Input(index=searchIndex)
+      input.js-search-member-input(type="text" placeholder="{{_ 'search-users'}}")
    ul.pop-over-list
-      +EasySearch.Each(index=searchIndex)
+      each searchResults
        li.item.js-member-item
-          a.name.js-select-import(title="{{profile.fullname}} ({{username}})" data-id="{{__originalId}}")
-            +userAvatar(userId=__originalId)
+          a.name.js-select-import(title="{{profile.fullname}} ({{username}})" data-id="{{_id}}")
+            +userAvatar(userId=_id)
            span.full-name
              = profile.fullname
              | (<span class="username">{{username}}</span>)
-      +EasySearch.IfSearching(index=searchIndex)
+      if searching.get
        +spinner
-      +EasySearch.IfNoResults(index=searchIndex)
+      if noResults.get
        .manage-member-section
          p.quiet {{_ 'no-results'}}
@@ -1,7 +1,9 @@
 import { ReactiveCache } from '/imports/reactiveCache';
 import { trelloGetMembersToMap } from './trelloMembersMapper';
+import { FlowRouter } from 'meteor/ostrio:flow-router-extra';
 import { wekanGetMembersToMap } from './wekanMembersMapper';
 import { csvGetMembersToMap } from './csvMembersMapper';
+import getSlug from 'limax';

 const Papa = require('papaparse');

@@ -311,6 +313,73 @@ BlazeComponent.extendComponent({
  },
 }).register('importMapMembersAddPopup');

+// Global reactive variables for import member popup
+const importMemberPopupState = {
+  searching: new ReactiveVar(false),
+  searchResults: new ReactiveVar([]),
+  noResults: new ReactiveVar(false),
+  searchTimeout: null
+};
+
+BlazeComponent.extendComponent({
+  onCreated() {
+    // Use global state
+    this.searching = importMemberPopupState.searching;
+    this.searchResults = importMemberPopupState.searchResults;
+    this.noResults = importMemberPopupState.noResults;
+    this.searchTimeout = importMemberPopupState.searchTimeout;
+  },
+
+  onRendered() {
+    this.find('.js-search-member-input').focus();
+  },
+
+  performSearch(query) {
+    if (!query || query.length < 2) {
+      this.searchResults.set([]);
+      this.noResults.set(false);
+      return;
+    }
+
+    this.searching.set(true);
+    this.noResults.set(false);
+
+    const results = UserSearchIndex.search(query, { limit: 20 }).fetch();
+    this.searchResults.set(results);
+    this.searching.set(false);
+
+    if (results.length === 0) {
+      this.noResults.set(true);
+    }
+  },
+
+  events() {
+    return [
+      {
+        'keyup .js-search-member-input'(event) {
+          const query = event.target.value.trim();
+
+          if (this.searchTimeout) {
+            clearTimeout(this.searchTimeout);
+          }
+
+          this.searchTimeout = setTimeout(() => {
+            this.performSearch(query);
+          }, 300);
+        },
+      },
+    ];
+  },
+}).register('importMapMembersAddPopupSearch');
+
 Template.importMapMembersAddPopup.helpers({
-  searchIndex: () => UserSearchIndex,
+  searchResults() {
+    return importMemberPopupState.searchResults.get();
+  },
+  searching() {
+    return importMemberPopupState.searching;
+  },
+  noResults() {
+    return importMemberPopupState.noResults;
+  }
 })
@@ -0,0 +1,11 @@
+template(name="basicTabs")
+  .basicTabs-container(class="{{name}}")
+    ul.tabs-list
+      each tabs
+        li.tab-item(class="{{isActiveTab slug}} {{class}}") {{name}}
+    .tabs-content-container
+      +Template.contentBlock
+
+template(name="tabContent")
+  section.tabs-content(class="{{isActiveTab slug}}" data-tab="{{slug}}")
+    +Template.contentBlock
@@ -0,0 +1,50 @@
+const { ReactiveVar } = require('meteor/reactive-var');
+
+Template.basicTabs.onCreated(function () {
+  const activeTab = this.data.activeTab
+    ? { slug: this.data.activeTab }
+    : this.data.tabs[0];
+  this._activeTab = new ReactiveVar(activeTab);
+
+  this.isActiveSlug = (slug) => {
+    const current = this._activeTab.get();
+    return current && current.slug === slug;
+  };
+});
+
+Template.basicTabs.helpers({
+  isActiveTab(slug) {
+    if (Template.instance().isActiveSlug(slug)) {
+      return 'active';
+    }
+  },
+});
+
+Template.basicTabs.events({
+  'click .tab-item'(e, t) {
+    t._activeTab.set(this);
+  },
+});
+
+function findBasicTabsInstance() {
+  let view = Blaze.currentView;
+  while (view) {
+    if (view.name === 'Template.basicTabs' && view.templateInstance) {
+      const inst = view.templateInstance();
+      if (inst && inst.isActiveSlug) {
+        return inst;
+      }
+    }
+    view = view.parentView;
+  }
+  return null;
+}
+
+Template.tabContent.helpers({
+  isActiveTab(slug) {
+    const inst = findBasicTabsInstance();
+    if (inst && inst.isActiveSlug(slug)) {
+      return 'active';
+    }
+  },
+});
@@ -8,8 +8,222 @@
  padding: 0;
  float: left;
 }
+
+/* List resize handle */
+.list-resize-handle {
+  position: absolute;
+  top: 0;
+  right: -3px;
+  width: 6px;
+  height: 100%;
+  cursor: col-resize;
+  z-index: 10;
+  background: transparent;
+  transition: background-color 0.2s ease;
+  border-radius: 2px;
+  /* Ensure the handle is clickable */
+  pointer-events: auto;
+}
+
+.list-resize-handle:hover {
+  background: rgba(0, 123, 255, 0.4);
+  box-shadow: 0 0 4px rgba(0, 123, 255, 0.3);
+}
+
+.list-resize-handle:active {
+  background: rgba(0, 123, 255, 0.6);
+  box-shadow: 0 0 6px rgba(0, 123, 255, 0.4);
+}
+
+/* Show resize handle only on hover */
+.list:hover .list-resize-handle {
+  background: rgba(0, 0, 0, 0.1);
+}
+
+.list:hover .list-resize-handle:hover {
+  background: rgba(0, 123, 255, 0.4);
+  box-shadow: 0 0 4px rgba(0, 123, 255, 0.3);
+}
+
+/* Add a subtle indicator line */
+.list-resize-handle::before {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 2px;
+  height: 20px;
+  background: rgba(0, 0, 0, 0.2);
+  border-radius: 1px;
+  opacity: 0;
+  transition: opacity 0.2s ease;
+}
+
+.list-resize-handle:hover::before {
+  opacity: 1;
+}
+
+/* Disable resize handle for collapsed lists and mobile view */
+.list.list-collapsed .list-resize-handle,
+.list.mobile-view .list-resize-handle {
+  display: none;
+}
+
+/* Disable resize handle for auto-width lists */
+.list.list-auto-width .list-resize-handle {
+  display: none;
+}
+
+/* Visual feedback during resize */
+.list.list-resizing {
+  transition: none !important;
+  box-shadow: 0 0 10px rgba(0, 123, 255, 0.3);
+  /* Ensure the list maintains its new width during resize */
+  flex: none !important;
+  flex-basis: auto !important;
+  flex-grow: 0 !important;
+  flex-shrink: 0 !important;
+  /* Override any conflicting layout properties */
+  float: left !important;
+  display: block !important;
+  position: relative !important;
+  /* Force width to be respected */
+  width: var(--list-width, auto) !important;
+  min-width: var(--list-width, auto) !important;
+  max-width: var(--list-width, auto) !important;
+  /* Ensure the width is applied immediately */
+  overflow: visible !important;
+}
+
+body.list-resizing-active {
+  cursor: col-resize !important;
+}
+
+body.list-resizing-active * {
+  cursor: col-resize !important;
+}
+
+/* Ensure swimlane container doesn't interfere with list resizing */
+.swimlane .list.list-resizing {
+  /* Override any swimlane flex properties */
+  flex: none !important;
+  flex-basis: auto !important;
+  flex-grow: 0 !important;
+  flex-shrink: 0 !important;
+  /* Ensure width is respected */
+  width: var(--list-width, auto) !important;
+  min-width: var(--list-width, auto) !important;
+  max-width: var(--list-width, auto) !important;
+}
+
+/* More aggressive override for any container that might interfere */
+.js-swimlane .list.list-resizing,
+.dragscroll .list.list-resizing,
+[id^="swimlane-"] .list.list-resizing {
+  /* Force the width to be applied */
+  width: var(--list-width, auto) !important;
+  min-width: var(--list-width, auto) !important;
+  max-width: var(--list-width, auto) !important;
+  flex: none !important;
+  flex-basis: auto !important;
+  flex-grow: 0 !important;
+  flex-shrink: 0 !important;
+  float: left !important;
+  display: block !important;
+}
+
+/* Ensure the width persists after resize is complete */
+.js-swimlane .list[style*="--list-width"],
+.dragscroll .list[style*="--list-width"],
+[id^="swimlane-"] .list[style*="--list-width"] {
+  /* Maintain the width after resize */
+  width: var(--list-width, auto) !important;
+  min-width: var(--list-width, auto) !important;
+  max-width: var(--list-width, auto) !important;
+  flex: none !important;
+  flex-basis: auto !important;
+  flex-grow: 0 !important;
+  flex-shrink: 0 !important;
+  float: left !important;
+  display: block !important;
+}
+
+/* Ensure consistent header height for all lists */
+.list-header {
+  /* Maintain consistent height and padding for all lists */
+  min-height: 2.5vh !important;
+  height: auto !important;
+  padding: 2.5vh 1.5vw 0.5vh !important;
+  /* Make sure the background covers the full height */
+  background-color: #e4e4e4 !important;
+  border-bottom: 0.8vh solid #e4e4e4 !important;
+  /* Use original display for consistent button positioning */
+  display: block !important;
+  position: relative !important;
+  /* Allow overflow for text wrapping and forms */
+  overflow: visible !important;
+}
+
+/* Clearfix for floated buttons */
+.list-header::after {
+  content: "";
+  display: table;
+  clear: both;
+}
+
+/* Ensure title text doesn't cause height changes for all lists */
+.list-header .list-header-name {
+  /* Allow text wrapping to flow below buttons */
+  white-space: normal !important;
+  /* Ensure proper line height */
+  line-height: 1.2 !important;
+  /* Ensure it doesn't overflow horizontally */
+  overflow-wrap: break-word !important;
+  word-wrap: break-word !important;
+  /* Full width since buttons are now absolutely positioned above */
+  width: 100% !important;
+}
+
+/* Position elements at top aligned with collapse button */
+.list-header .js-open-list-menu {
+  position: absolute !important;
+  top: 5px !important;
+  right: 10px !important;
+  z-index: 15 !important;
+  display: inline-block !important;
+  padding: 4px !important;
+}
+
+.list-header .list-header-plus-top {
+  position: absolute !important;
+  top: 5px !important;
+  right: 30px !important;
+  z-index: 15 !important;
+  display: inline-block !important;
+  padding: 4px !important;
+}
+
+.list-header .list-header-handle-desktop {
+  position: absolute !important;
+  top: 5px !important;
+  right: 80px !important;
+  z-index: 15 !important;
+  display: inline-block !important;
+  cursor: move !important;
+  pointer-events: auto !important;
+  padding: 4px !important;
+}
+
+/* Anchor header action buttons within header during resize */
+.list .list-header { position: relative; z-index: 5; }
+.list .list-header .js-open-list-menu,
+.list .list-header .list-header-plus-top,
+.list .list-header .list-header-handle-desktop {
+  position: absolute !important;
+}
 [id^="swimlane-"] .list:first-child {
-  min-width: 20px;
+  min-width: 2.5vw;
 }
 .list.list-auto-width {
  flex: 1;
@@ -33,11 +247,111 @@
  background-color: rgba(0,0,0,0.2);
  border-color: transparent;
  box-shadow: none;
-  height: 100px;
+  height: 15vh;
 }
 .list.list-collapsed {
  flex: none;
+  min-width: 30px;
+  max-width: 30px;
+  width: 30px;
+  min-height: 60vh;
+  height: 60vh;
+  overflow: visible;
+  position: relative;
 }
+.list.list-collapsed .list-header {
+  padding: 5px 0;
+  min-height: 100% !important;
+  height: 100% !important;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+  position: relative;
+  overflow: visible !important;
+  width: 30px;
+  max-width: 30px;
+  margin: 0;
+}
+.list.list-collapsed .list-header .js-collapse {
+  position: relative !important;
+  left: -10px !important;
+  margin: 5px auto;
+  z-index: 10;
+  padding: 5px;
+  font-size: 16px;
+  white-space: nowrap;
+  display: block;
+  width: auto;
+  left: auto !important;
+  top: auto !important;
+}
+.list.list-collapsed .list-header .list-header-handle {
+  position: static !important;
+  margin: 5px auto;
+  z-index: 10;
+  padding: 5px;
+  display: block;
+  width: auto;
+  top: auto !important;
+  right: auto !important;
+}
+
+.list.list-collapsed .list-header .list-header-handle-desktop {
+  position: static !important;
+  margin: 5px auto;
+  z-index: 10;
+  padding: 5px;
+  display: block;
+  width: auto;
+  top: auto !important;
+  right: auto !important;
+}
+.list.list-collapsed .list-header .list-rotated {
+  width: auto !important;
+  height: auto !important;
+  margin: 20px 0 0 0 !important;
+  position: relative !important;
+  overflow: visible !important;
+  transform: rotate(90deg);
+  transform-origin: center center;
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.list.list-collapsed .list-header .list-rotated h2.list-header-name {
+  text-align: center;
+  overflow: visible;
+  white-space: nowrap;
+  display: block !important;
+  font-size: 12px;
+  line-height: 1.2;
+  color: #333;
+  padding: 4px 8px;
+  margin: 0;
+  width: auto;
+  height: auto;
+  position: static;
+  left: auto;
+  top: auto;
+  transform: none;
+  z-index: 10;
+  visibility: visible !important;
+  opacity: 1 !important;
+  pointer-events: auto;
+}
+
+.list.list-composer,
+.list-composer {
+  display: none;
+}
+
+/* Show list-composer when inside an active inlined form */
+form.inlined-form .list-composer {
+  display: block;
+}
+
 .list.list-composer .open-list-composer,
 .list .list-composer .open-list-composer {
  color: #8c8c8c;
@@ -45,24 +359,24 @@
 .list.list-composer .list-name-input,
 .list .list-composer .list-name-input {
  background: #fff;
-  margin: -3px 0 8px;
+  margin: -0.4vh 0 1vh;
 }
 .list-header-add {
  flex: 0 0 auto;
-  padding: 12px;
+  padding: 1.5vh 1.5vw;
  position: relative;
-  min-height: 20px;
+  min-height: 2.5vh;
 }
 .list-header {
  flex: 0 0 auto;
-  padding: 20px 12px 4px;
+  padding: 2.5vh 1.5vw 0.5vh;
  position: relative;
-  min-height: 20px;
+  min-height: 2.5vh;
  background-color: #e4e4e4;
-  border-bottom: 6px solid #e4e4e4;
+  border-bottom: 0.8vh solid #e4e4e4;
 }
 .list-header.list-header-card-count {
-  min-height: 35px;
+  min-height: 4.5vh;
  height: auto;
 }
 .list-header.ui-sortable-handle {
@@ -72,30 +386,40 @@
  display: none;
 }
 .list-header .list-header-name {
-  display: inline;
-  font-size: 16px;
-  line-height: 17px;
+  display: block;
+  font-size: clamp(14px, 3vw, 18px);
+  line-height: 1.2;
  margin: 0;
  font-weight: bold;
-  min-height: 9px;
-  min-width: 30px;
-  overflow: hidden;
-  text-overflow: ellipsis;
+  min-height: 1.2vh;
+  min-width: 4vw;
+  overflow-wrap: break-word;
  word-wrap: break-word;
+  vertical-align: top;
+  width: 100%;
+}
+/* Sum badge shown before list title */
+.list-header .list-sum-badge {
+  display: inline-block;
+  margin-right: 8px;
+  padding: 0;
+  border-radius: 0;
+  background: transparent;
+  color: #8c8c8c;
+  font-weight: bold;
+  font-size: 12px;
+  vertical-align: middle;
 }
 .list-rotated {
-  width: 10px;
-  height: 250px;
-  margin-top: -90px;
-  margin-left: -110px;
+  width: 1.3vw;
+  height: 35vh;
+  margin-top: -12vh;
+  margin-left: -14vw;
  margin-right: 0;
  transform: rotate(90deg);
  position: relative;
  text-overflow: ellipsis;
  white-space: nowrap;
-}
-.list-header .list-rotated {
-
 }
 .list-header .list-header-watch-icon {
  padding-left: 10px;
@@ -113,6 +437,8 @@
 .list-header .list-header-plus-top {
  color: #a6a6a6;
  margin-right: 15px;
+  vertical-align: middle;
+  line-height: 1.2;
 }
 .list-header .list-header-collapse-right {
  color: #a6a6a6;
@@ -121,11 +447,195 @@
  color: #a6a6a6;
  margin-right: 15px;
 }
-.list-header .list-header-uncollapse-left {
+/* List header collapse button styling - positioned at top left */
+.list-header .js-collapse {
+  position: absolute !important;
+  top: 5px !important;
+  left: 10px !important;
  color: #a6a6a6;
+  display: inline-block;
+  vertical-align: top;
+  padding: 5px 8px;
+  border: none;
+  border-radius: 0;
+  background-color: transparent;
+  cursor: pointer;
+  font-size: 18px;
+  line-height: 1.2;
+  min-width: 30px;
+  text-align: center;
+  text-decoration: none;
+  margin: 0;
+  z-index: 15;
 }
-.list-header .list-header-uncollapse-right {
-  color: #a6a6a6;
+.list-header .js-collapse:hover {
+  background-color: transparent;
+  color: #333;
+}
+
+/* Title text container - full width below buttons */
+.list-header > div {
+  padding-top: 25px;
+  width: 100%;
+  display: block;
+  clear: both;
+}
+.list.list-collapsed .list-header .js-collapse {
+  display: inline-block !important;
+  visibility: visible !important;
+  opacity: 1 !important;
+}
+
+/* Hide menu button in collapsed state */
+.list.list-collapsed .list-header .js-open-list-menu,
+.list.list-collapsed .list-header .list-header-menu {
+  display: none !important;
+}
+
+/* Responsive adjustments for collapsed lists */
+@media (min-width: 768px) {
+  .list.list-collapsed {
+    min-width: 30px;
+    max-width: 30px;
+    width: 30px;
+    min-height: 60vh;
+    height: 60vh;
+  }
+  .list.list-collapsed .list-header {
+    width: 30px;
+    max-width: 30px;
+    margin: 0;
+    min-height: 100% !important;
+    height: 100% !important;
+  }
+  .list.list-collapsed .list-header .list-rotated {
+    width: auto !important;
+    height: auto !important;
+    margin: 20px 0 0 0 !important;
+    position: relative !important;
+    transform: rotate(90deg);
+    flex: 1;
+  }
+  .list.list-collapsed .list-header .list-rotated h2.list-header-name {
+    width: auto;
+    font-size: 12px;
+    height: auto;
+    line-height: 1.2;
+    padding: 4px 8px;
+    margin: 0;
+    overflow: visible;
+    position: static;
+    left: auto;
+    top: auto;
+    transform: none;
+    text-align: center;
+    visibility: visible !important;
+    opacity: 1 !important;
+    display: block !important;
+    background-color: transparent;
+    border: none;
+    color: #333;
+    z-index: 10;
+  }
+  .list.list-collapsed .list-header .js-collapse {
+    margin: 5px auto;
+  }
+}
+
+@media (min-width: 1024px) {
+  .list.list-collapsed {
+    min-width: 30px;
+    max-width: 30px;
+    width: 30px;
+    min-height: 60vh;
+    height: 60vh;
+  }
+  .list.list-collapsed .list-header {
+    width: 30px;
+    max-width: 30px;
+    min-height: 100% !important;
+    height: 100% !important;
+  }
+  .list.list-collapsed .list-header .list-rotated {
+    width: auto !important;
+    height: auto !important;
+    margin: 20px 0 0 0 !important;
+    position: relative !important;
+    transform: rotate(90deg);
+    flex: 1;
+  }
+  .list.list-collapsed .list-header .list-rotated h2.list-header-name {
+    width: auto;
+    font-size: 12px;
+    height: auto;
+    line-height: 1.2;
+    padding: 4px 8px;
+    margin: 0;
+    overflow: visible;
+    position: static;
+    left: auto;
+    top: auto;
+    transform: none;
+    text-align: center;
+    visibility: visible !important;
+    opacity: 1 !important;
+    display: block !important;
+    background-color: transparent;
+    border: none;
+    color: #333;
+    z-index: 10;
+  }
+  .list.list-collapsed .list-header .js-collapse {
+    margin: 5px auto;
+  }
+}
+
+@media (min-width: 1200px) {
+  .list.list-collapsed {
+    min-width: 30px;
+    max-width: 30px;
+    width: 30px;
+    min-height: 60vh;
+    height: 60vh;
+  }
+  .list.list-collapsed .list-header {
+    width: 30px;
+    max-width: 30px;
+    min-height: 100% !important;
+    height: 100% !important;
+  }
+  .list.list-collapsed .list-header .list-rotated {
+    width: auto !important;
+    height: auto !important;
+    margin: 20px 0 0 0 !important;
+    position: relative !important;
+    transform: rotate(90deg);
+    flex: 1;
+  }
+  .list.list-collapsed .list-header .list-rotated h2.list-header-name {
+    width: auto;
+    font-size: 12px;
+    height: auto;
+    line-height: 1.2;
+    padding: 4px 8px;
+    margin: 0;
+    overflow: visible;
+    position: static;
+    left: auto;
+    top: auto;
+    transform: none;
+    text-align: center;
+    visibility: visible !important;
+    opacity: 1 !important;
+    display: block !important;
+    background-color: transparent;
+    border: none;
+    color: #333;
+    z-index: 10;
+  }
+  .list.list-collapsed .list-header .js-collapse {
+    margin: 5px auto;
+  }
 }
 .list-header .list-header-collapse {
  color: #a6a6a6;
@@ -147,6 +657,8 @@
 }
 .js-open-list-menu {
  font-size: 18px;
+  vertical-align: middle;
+  line-height: 1.2;
 }
 .list-body {
  flex: 1 1 auto;
@@ -218,15 +730,22 @@
 .mini-list.mobile-view {
  flex: 0 0 60px;
  height: auto;
-  width: 100%;
-  border-left: 0px;
+  width: 100vw;
+  max-width: 100vw;
+  min-width: 100vw;
+  border-left: 0px !important;
  border-bottom: 1px solid #ccc;
+  display: block !important;
 }
 .list.mobile-view {
-  display: contents;
+  display: block !important;
  flex-basis: auto;
-  width: 100%;
-  border-left: 0px;
+  width: 100vw;
+  max-width: 100vw;
+  min-width: 100vw;
+  border-left: 0px !important;
+  margin: 0 !important;
+  padding: 0 !important;
 }
 .list.mobile-view:first-child {
  margin-left: 0px;
@@ -234,9 +753,11 @@
 .list.mobile-view.ui-sortable-helper {
  flex: 0 0 60px;
  height: 60px;
-  width: 100%;
-  border-left: 0px;
+  width: 100vw;
+  max-width: 100vw;
+  border-left: 0px !important;
  border-bottom: 1px solid #ccc;
+  display: block !important;
 }
 .list.mobile-view.ui-sortable-helper .list-header.ui-sortable-handle {
  cursor: grabbing;
@@ -244,12 +765,17 @@
 .list.mobile-view.placeholder {
  flex: 0 0 60px;
  height: 60px;
-  width: 100%;
-  border-left: 0px;
+  width: 100vw;
+  max-width: 100vw;
+  border-left: 0px !important;
  border-bottom: 1px solid #ccc;
+  display: block !important;
 }
 .list.mobile-view .list-body {
  padding: 15px 19px;
+  width: 100vw;
+  max-width: 100vw;
+  min-width: 100vw;
 }
 .list.mobile-view .list-header {
  /*Updated padding values for mobile devices, this should fix text grouping issue*/
@@ -258,6 +784,9 @@
  min-height: 30px;
  margin-top: 10px;
  align-items: center;
+  width: 100vw;
+  max-width: 100vw;
+  min-width: 100vw;
  /* Force grid layout for iPhone */
  display: grid !important;
  grid-template-columns: 30px 1fr auto auto !important;
@@ -310,6 +839,9 @@
  grid-row: 2;
  grid-column: 2;
  align-self: start;
+  text-align: left;
+  padding-left: 0;
+  margin-left: 0;
  font-size: 16px !important;
  line-height: 1.2;
 }
@@ -333,19 +865,27 @@
  align-items: initial;
 }

-@media screen and (max-width: 800px) {
+@media screen and (max-width: 800px),
+       screen and (max-device-width: 932px) and (-webkit-min-device-pixel-ratio: 3) {
  .mini-list {
    flex: 0 0 60px;
    height: auto;
-    width: 100%;
-    border-left: 0px;
+    width: 100vw;
+    max-width: 100vw;
+    min-width: 100vw;
+    border-left: 0px !important;
    border-bottom: 1px solid #ccc;
+    display: block !important;
  }
  .list {
-    display: contents;
+    display: block !important;
    flex-basis: auto;
-    width: 100%;
-    border-left: 0px;
+    width: 100vw;
+    max-width: 100vw;
+    min-width: 100vw;
+    border-left: 0px !important;
+    margin: 0 !important;
+    padding: 0 !important;
  }
  .list:first-child {
    margin-left: 0px;
@@ -353,9 +893,11 @@
  .list.ui-sortable-helper {
    flex: 0 0 60px;
    height: 60px;
-    width: 100%;
-    border-left: 0px;
+    width: 100vw;
+    max-width: 100vw;
+    border-left: 0px !important;
    border-bottom: 1px solid #ccc;
+    display: block !important;
  }
  .list.ui-sortable-helper .list-header.ui-sortable-handle {
    cursor: grabbing;
@@ -363,12 +905,17 @@
  .list.placeholder {
    flex: 0 0 60px;
    height: 60px;
-    width: 100%;
-    border-left: 0px;
+    width: 100vw;
+    max-width: 100vw;
+    border-left: 0px !important;
    border-bottom: 1px solid #ccc;
+    display: block !important;
  }
  .list-body {
    padding: 15px 19px;
+    width: 100vw;
+    max-width: 100vw;
+    min-width: 100vw;
  }
  .list-header {
 	  /*Updated padding values for mobile devices, this should fix text grouping issue*/
@@ -377,6 +924,9 @@
    min-height: 30px;
    margin-top: 10px;
    align-items: center;
+    width: 100vw;
+    max-width: 100vw;
+    min-width: 100vw;
  }
  .list-header .list-header-left-icon {
    padding: 7px;
@@ -451,6 +1001,152 @@
    align-items: initial;
  }
 }
+
+/* iPhone 12 Mini specific - fix icon positioning in stacked lists view */
+@media screen and (device-width: 375px) and (device-height: 812px), /* iPhone 12 Mini exact */
+       screen and (max-width: 375px) and (max-height: 812px), /* iPhone 12 Mini viewport */
+       screen and (-webkit-min-device-pixel-ratio: 3) and (max-width: 375px) /* iPhone 12 Mini Retina */ {
+  .list.mobile-view .list-header {
+    /* Force grid layout for iPhone 12 Mini */
+    display: grid !important;
+    grid-template-columns: 30px 1fr auto auto !important;
+    gap: 10px !important;
+    align-items: center !important;
+  }
+
+  .list.mobile-view .list-header .list-header-menu-icon {
+    /* Remove absolute positioning for iPhone 12 Mini */
+    position: static !important;
+    right: auto !important;
+    top: auto !important;
+    transform: none !important;
+    /* Use grid positioning */
+    grid-row: 1/3 !important;
+    grid-column: 3 !important;
+    padding: 14px !important;
+    font-size: 40px !important;
+    text-align: center !important;
+  }
+
+  .list.mobile-view .list-header .list-header-handle {
+    /* Remove absolute positioning for iPhone 12 Mini */
+    position: static !important;
+    right: auto !important;
+    top: auto !important;
+    transform: none !important;
+    /* Use grid positioning */
+    grid-row: 1/3 !important;
+    grid-column: 4 !important;
+    padding: 14px !important;
+    font-size: 48px !important;
+    text-align: center !important;
+  }
+
+  .list.mobile-view .list-header .list-header-name {
+    grid-row: 1 !important;
+    grid-column: 2 !important;
+    align-self: end !important;
+    font-size: 20px !important;
+    font-weight: bold !important;
+    line-height: 1.2 !important;
+    padding-bottom: 2px !important;
+  }
+
+  .list.mobile-view .list-header .cardCount {
+    grid-row: 2 !important;
+    grid-column: 2 !important;
+    align-self: start !important;
+    text-align: left !important;
+    padding-left: 0 !important;
+    margin-left: 0 !important;
+    font-size: 16px !important;
+    line-height: 1.2 !important;
+  }
+
+  .list.mobile-view .list-header .list-header-left-icon {
+    display: grid !important;
+    grid-row: 1/3 !important;
+    grid-column: 1 !important;
+  }
+}
+
+/* iPhone device JavaScript detection fallback - fix icon positioning */
+.iphone-device .list.mobile-view .list-header {
+  /* Force grid layout for iPhone devices */
+  display: grid !important;
+  grid-template-columns: 30px 1fr auto auto !important;
+  gap: 10px !important;
+  align-items: center !important;
+}
+
+.iphone-device .list.mobile-view .list-header .list-header-menu-icon {
+  /* Remove absolute positioning for iPhone devices */
+  position: static !important;
+  right: auto !important;
+  top: auto !important;
+  transform: none !important;
+  /* Use grid positioning */
+  grid-row: 1/3 !important;
+  grid-column: 3 !important;
+  padding: 14px !important;
+  font-size: 40px !important;
+  text-align: center !important;
+}
+
+.iphone-device .list.mobile-view .list-header .list-header-handle {
+  /* Remove absolute positioning for iPhone devices */
+  position: static !important;
+  right: auto !important;
+  top: auto !important;
+  transform: none !important;
+  /* Use grid positioning */
+  grid-row: 1/3 !important;
+  grid-column: 4 !important;
+  padding: 14px !important;
+  font-size: 48px !important;
+  text-align: center !important;
+}
+
+.iphone-device .list.mobile-view .list-header .list-header-name {
+  grid-row: 1 !important;
+  grid-column: 2 !important;
+  align-self: end !important;
+  font-size: 20px !important;
+  font-weight: bold !important;
+  line-height: 1.2 !important;
+  padding-bottom: 2px !important;
+}
+
+.iphone-device .list.mobile-view .list-header .cardCount {
+  grid-row: 2 !important;
+  grid-column: 2 !important;
+  align-self: start !important;
+  font-size: 16px !important;
+  line-height: 1.2 !important;
+}
+
+.iphone-device .list.mobile-view .list-header .list-header-left-icon {
+  display: grid !important;
+  grid-row: 1/3 !important;
+  grid-column: 1 !important;
+}
+
+/* Allow long list titles to expand on desktop (non-mobile, non-collapsed) */
+.list:not(.mobile-view):not(.list-collapsed) .list-header {
+  overflow: visible !important;
+}
+
+.list:not(.mobile-view):not(.list-collapsed) .list-header .list-header-name {
+  /* Permit wrapping and full visibility */
+  white-space: normal !important;
+  overflow: visible !important;
+  text-overflow: clip !important;
+  display: block !important;
+  /* Full width since buttons are absolutely positioned */
+  width: 100% !important;
+  /* Break long words to avoid overflow */
+  word-break: break-word !important;
+}
 .link-board-wrapper {
  display: flex;
  align-items: baseline;
@@ -540,3 +1236,48 @@
 .list-header-indigo {
  border-bottom: 6px solid #4b0082;
 }
+
+.list.list-collapsed .collapsed-list-drag-area {
+  width: 100%;
+  height: 60px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: grab;
+  user-select: none;
+}
+.list.list-collapsed .collapsed-list-drag-area:active {
+  cursor: grabbing;
+}
+.list.list-collapsed .list-header-name-collapsed {
+  writing-mode: vertical-rl;
+  text-align: center;
+  font-size: 12px;
+  color: #333;
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.list.list-collapsed .list-header .js-collapse {
+  position: relative !important;
+  left: -10px !important;
+  color: #333;
+  background: transparent;
+  border: none;
+  border-radius: 0;
+  width: auto;
+  height: auto;
+  min-width: 0;
+  min-height: 0;
+  display: block !important;
+  align-items: initial;
+  justify-content: initial;
+  font-size: 16px !important;
+  box-shadow: none;
+  margin: 5px auto;
+  z-index: 10;
+}
@@ -3,7 +3,9 @@ template(name='list')
                style="{{#unless collapsed}}min-width:{{listWidth}}px;max-width:{{listConstraint}}px;{{/unless}}"
                class="{{#if collapsed}}list-collapsed{{/if}} {{#if autoWidth}}list-auto-width{{/if}} {{#if isMiniScreen}}mobile-view{{/if}}")
    +listHeader
-    +listBody
+    unless collapsed
+      +listBody
+      .list-resize-handle.js-list-resize-handle.nodragscroll

 template(name='miniList')
  a.mini-list.js-select-list.js-list(id="js-list-{{_id}}" class="{{#if isMiniScreen}}mobile-view{{/if}}")
@@ -24,6 +24,9 @@ BlazeComponent.extendComponent({
  onRendered() {
    const boardComponent = this.parentComponent().parentComponent();

+    // Initialize list resize functionality immediately
+    this.initializeListResize();
+
    const itemsSelector = '.js-minicard:not(.placeholder, .js-card-composer)';
    const $cards = this.$('.js-minicards');

@@ -147,17 +150,13 @@ BlazeComponent.extendComponent({
    });

    this.autorun(() => {
-      if (Utils.isTouchScreenOrShowDesktopDragHandles()) {
-        $cards.sortable({
-          handle: '.handle',
-        });
-      } else {
-        $cards.sortable({
-          handle: '.minicard',
-        });
-      }
-
      if ($cards.data('uiSortable') || $cards.data('sortable')) {
+        if (Utils.isTouchScreenOrShowDesktopDragHandles()) {
+          $cards.sortable('option', 'handle', '.handle');
+        } else {
+          $cards.sortable('option', 'handle', '.minicard');
+        }
+
        $cards.sortable(
          'option',
          'disabled',
@@ -198,25 +197,286 @@ BlazeComponent.extendComponent({
  listWidth() {
    const user = ReactiveCache.getCurrentUser();
    const list = Template.currentData();
-    return user.getListWidth(list.boardId, list._id);
+    if (!list) return 270; // Return default width if list is not available
+
+    if (user) {
+      // For logged-in users, get from user profile
+      return user.getListWidthFromStorage(list.boardId, list._id);
+    } else {
+      // For non-logged-in users, get from localStorage
+      try {
+        const stored = localStorage.getItem('wekan-list-widths');
+        if (stored) {
+          const widths = JSON.parse(stored);
+          if (widths[list.boardId] && widths[list.boardId][list._id]) {
+            return widths[list.boardId][list._id];
+          }
+        }
+      } catch (e) {
+        console.warn('Error reading list width from localStorage:', e);
+      }
+      return 270; // Return default width if not found
+    }
  },

  listConstraint() {
    const user = ReactiveCache.getCurrentUser();
    const list = Template.currentData();
-    return user.getListConstraint(list.boardId, list._id);
+    if (!list) return 550; // Return default constraint if list is not available
+
+    if (user) {
+      // For logged-in users, get from user profile
+      return user.getListConstraintFromStorage(list.boardId, list._id);
+    } else {
+      // For non-logged-in users, get from localStorage
+      try {
+        const stored = localStorage.getItem('wekan-list-constraints');
+        if (stored) {
+          const constraints = JSON.parse(stored);
+          if (constraints[list.boardId] && constraints[list.boardId][list._id]) {
+            return constraints[list.boardId][list._id];
+          }
+        }
+      } catch (e) {
+        console.warn('Error reading list constraint from localStorage:', e);
+      }
+      return 550; // Return default constraint if not found
+    }
  },

  autoWidth() {
    const user = ReactiveCache.getCurrentUser();
    const list = Template.currentData();
+    if (!user) {
+      // For non-logged-in users, auto-width is disabled
+      return false;
+    }
    return user.isAutoWidth(list.boardId);
  },
+
+  initializeListResize() {
+    // Check if we're still in a valid template context
+    if (!Template.currentData()) {
+      console.warn('No current template data available for list resize initialization');
+      return;
+    }
+
+    const list = Template.currentData();
+    const $list = this.$('.js-list');
+    const $resizeHandle = this.$('.js-list-resize-handle');
+
+    // Check if elements exist
+    if (!$list.length || !$resizeHandle.length) {
+      console.warn('List or resize handle not found, retrying in 100ms');
+      Meteor.setTimeout(() => {
+        if (!this.isDestroyed) {
+          this.initializeListResize();
+        }
+      }, 100);
+      return;
+    }
+
+    // Reactively show/hide resize handle based on collapse and auto-width state
+    this.autorun(() => {
+      const isAutoWidth = this.autoWidth();
+      const isCollapsed = Utils.getListCollapseState(list);
+      if (isCollapsed || isAutoWidth) {
+        $resizeHandle.hide();
+      } else {
+        $resizeHandle.show();
+      }
+    });
+
+    let isResizing = false;
+    let startX = 0;
+    let startWidth = 0;
+    let minWidth = 270; // Minimum width matching system default
+    let listConstraint = this.listConstraint(); // Store constraint value for use in event handlers
+    const component = this; // Store reference to component for use in event handlers
+
+    const startResize = (e) => {
+      isResizing = true;
+      startX = e.pageX || e.originalEvent.touches[0].pageX;
+      startWidth = $list.outerWidth();
+
+
+      // Add visual feedback
+      $list.addClass('list-resizing');
+      $('body').addClass('list-resizing-active');
+
+
+      // Prevent text selection during resize
+      $('body').css('user-select', 'none');
+
+      e.preventDefault();
+      e.stopPropagation();
+    };
+
+    const doResize = (e) => {
+      if (!isResizing) {
+        return;
+      }
+
+      const currentX = e.pageX || e.originalEvent.touches[0].pageX;
+      const deltaX = currentX - startX;
+      const newWidth = Math.max(minWidth, startWidth + deltaX);
+
+      // Apply the new width immediately for real-time feedback
+      $list[0].style.setProperty('--list-width', `${newWidth}px`);
+      $list[0].style.setProperty('width', `${newWidth}px`);
+      $list[0].style.setProperty('min-width', `${newWidth}px`);
+      $list[0].style.setProperty('max-width', `${newWidth}px`);
+      $list[0].style.setProperty('flex', 'none');
+      $list[0].style.setProperty('flex-basis', 'auto');
+      $list[0].style.setProperty('flex-grow', '0');
+      $list[0].style.setProperty('flex-shrink', '0');
+
+
+      e.preventDefault();
+      e.stopPropagation();
+    };
+
+    const stopResize = (e) => {
+      if (!isResizing) return;
+
+      isResizing = false;
+
+      // Calculate final width
+      const currentX = e.pageX || e.originalEvent.touches[0].pageX;
+      const deltaX = currentX - startX;
+      const finalWidth = Math.max(minWidth, startWidth + deltaX);
+
+      // Ensure the final width is applied
+      $list[0].style.setProperty('--list-width', `${finalWidth}px`);
+      $list[0].style.setProperty('width', `${finalWidth}px`);
+      $list[0].style.setProperty('min-width', `${finalWidth}px`);
+      $list[0].style.setProperty('max-width', `${finalWidth}px`);
+      $list[0].style.setProperty('flex', 'none');
+      $list[0].style.setProperty('flex-basis', 'auto');
+      $list[0].style.setProperty('flex-grow', '0');
+      $list[0].style.setProperty('flex-shrink', '0');
+
+      // Remove visual feedback but keep the width
+      $list.removeClass('list-resizing');
+      $('body').removeClass('list-resizing-active');
+      $('body').css('user-select', '');
+
+      // Keep the CSS custom property for persistent width
+      // The CSS custom property will remain on the element to maintain the width
+
+      // Save the new width using the existing system
+      const boardId = list.boardId;
+      const listId = list._id;
+
+      // Use the new storage method that handles both logged-in and non-logged-in users
+      if (process.env.DEBUG === 'true') {
+      }
+
+      const currentUser = ReactiveCache.getCurrentUser();
+      if (currentUser) {
+        // For logged-in users, use server method
+        Meteor.call('applyListWidthToStorage', boardId, listId, finalWidth, listConstraint, (error, result) => {
+          if (error) {
+            console.error('Error saving list width:', error);
+          } else {
+            if (process.env.DEBUG === 'true') {
+            }
+          }
+        });
+      } else {
+        // For non-logged-in users, save to localStorage directly
+        try {
+          // Save list width
+          const storedWidths = localStorage.getItem('wekan-list-widths');
+          let widths = storedWidths ? JSON.parse(storedWidths) : {};
+
+          if (!widths[boardId]) {
+            widths[boardId] = {};
+          }
+          widths[boardId][listId] = finalWidth;
+
+          localStorage.setItem('wekan-list-widths', JSON.stringify(widths));
+
+          // Save list constraint
+          const storedConstraints = localStorage.getItem('wekan-list-constraints');
+          let constraints = storedConstraints ? JSON.parse(storedConstraints) : {};
+
+          if (!constraints[boardId]) {
+            constraints[boardId] = {};
+          }
+          constraints[boardId][listId] = listConstraint;
+
+          localStorage.setItem('wekan-list-constraints', JSON.stringify(constraints));
+
+          if (process.env.DEBUG === 'true') {
+          }
+        } catch (e) {
+          console.warn('Error saving list width/constraint to localStorage:', e);
+        }
+      }
+
+      e.preventDefault();
+    };
+
+    // Mouse events
+    $resizeHandle.on('mousedown', startResize);
+    $(document).on('mousemove', doResize);
+    $(document).on('mouseup', stopResize);
+
+    // Touch events for mobile
+    $resizeHandle.on('touchstart', startResize, { passive: false });
+    $(document).on('touchmove', doResize, { passive: false });
+    $(document).on('touchend', stopResize, { passive: false });
+
+
+    // Prevent dragscroll interference
+    $resizeHandle.on('mousedown', (e) => {
+      e.stopPropagation();
+    });
+
+
+    // Reactively update resize handle visibility when auto-width or collapse changes
+    component.autorun(() => {
+      const collapsed = Utils.getListCollapseState(list);
+      if (component.autoWidth() || collapsed) {
+        $resizeHandle.hide();
+      } else {
+        $resizeHandle.show();
+      }
+    });
+
+    // Clean up on component destruction
+    component.onDestroyed(() => {
+      $(document).off('mousemove', doResize);
+      $(document).off('mouseup', stopResize);
+      $(document).off('touchmove', doResize);
+      $(document).off('touchend', stopResize);
+    });
+  },
 }).register('list');

+Template.list.helpers({
+  collapsed() {
+    return Utils.getListCollapseState(this);
+  },
+});
+
 Template.miniList.events({
  'click .js-select-list'() {
    const listId = this._id;
    Session.set('currentList', listId);
  },
 });
+
+// Enable drag-reorder for collapsed lists from .js-collapsed-list-drag area
+    this.$('.js-collapsed-list-drag').draggable({
+      axis: 'x',
+      helper: 'clone',
+      revert: 'invalid',
+      start(evt, ui) {
+        boardComponent.setIsDragging(true);
+      },
+      stop(evt, ui) {
+        boardComponent.setIsDragging(false);
+      }
+    });
@@ -2,9 +2,8 @@ template(name="listBody")
  unless collapsed
    .list-body(class="{{#unless isVerticalScrollbars}}no-scrollbars{{/unless}}")
      .minicards.clearfix.js-minicards(class="{{#if reachedWipLimit}}js-list-full{{/if}}")
-        if cards.length
-          +inlinedForm(autoclose=false position="top")
-            +addCardForm(listId=_id position="top")
+        +inlinedForm(autoclose=false position="top")
+          +addCardForm(listId=_id position="top")
        ul.sidebar-list
          each customFieldsSum
            li
@@ -26,13 +25,15 @@ template(name="listBody")
            +minicard(this)
        if (showSpinner (idOrNull ../../_id))
          +spinnerList
-
        if canSeeAddCard
          +inlinedForm(autoclose=false position="bottom")
            +addCardForm(listId=_id position="bottom")
          else
            a.open-minicard-composer.js-card-composer.js-open-inlined-form(title="{{_ 'add-card-to-bottom-of-list'}}")
              i.fa.fa-plus
+              | {{_ 'add-card'}}
+        +inlinedForm(autoclose=false position="bottom")
+          +addCardForm(listId=_id position="bottom")

 template(name="spinnerList")
  .sk-spinner.sk-spinner-list(
@@ -54,7 +55,8 @@ template(name="addCardForm")

  .add-controls.clearfix
    button.primary.confirm(type="submit") {{_ 'add'}}
-    a.fa.fa-times-thin.js-close-inlined-form
+    a.js-close-inlined-form
+      i.fa.fa-times-thin
  .add-controls.clearfix
    unless currentBoard.isTemplatesBoard
      unless currentBoard.isTemplateBoard
@@ -85,16 +87,19 @@ template(name="linkCardPopup")

  label {{_ 'swimlanes'}}:
  select.js-select-swimlanes
+    option(value="") {{_ 'custom-field-dropdown-none'}}
    each swimlanes
      option(value="{{_id}}") {{isTitleDefault title}}

  label {{_ 'lists'}}:
  select.js-select-lists
+    option(value="") {{_ 'custom-field-dropdown-none'}}
    each lists
      option(value="{{_id}}") {{isTitleDefault title}}

  label {{_ 'cards'}}:
  select.js-select-cards
+    option(value="") {{_ 'custom-field-dropdown-none'}}
    each cards
      option(value="{{getRealId}}") {{getTitle}}

@@ -1,6 +1,8 @@
 import { ReactiveCache } from '/imports/reactiveCache';
 import { TAPi18n } from '/imports/i18n';
+import { FlowRouter } from 'meteor/ostrio:flow-router-extra';
 import { Spinner } from '/client/lib/spinner';
+import getSlug from 'limax';

 const subManager = new SubsManager();
 const InfiniteScrollIter = 10;
@@ -16,11 +18,50 @@ BlazeComponent.extendComponent({
  },

  customFieldsSum() {
-    const ret = ReactiveCache.getCustomFields({
-      boardIds: { $in: [Session.get('currentBoard')] },
+    const list = Template.currentData();
+    if (!list) return [];
+    const boardId = Session.get('currentBoard');
+    const fields = ReactiveCache.getCustomFields({
+      boardIds: { $in: [boardId] },
      showSumAtTopOfList: true,
    });
-    return ret;
+
+    if (!fields || !fields.length) return [];
+
+    const cards = ReactiveCache.getCards({
+      listId: list._id,
+      archived: false,
+    });
+
+    const result = fields.map(field => {
+      let sum = 0;
+      if (cards && cards.length) {
+        cards.forEach(card => {
+          const cfs = (card.customFields || []);
+          const cf = cfs.find(f => f && f._id === field._id);
+          if (!cf || cf.value === null || cf.value === undefined) return;
+          let v = cf.value;
+          if (typeof v === 'string') {
+            // try to parse string numbers, accept comma decimal
+            const parsed = parseFloat(v.replace(',', '.'));
+            if (isNaN(parsed)) return;
+            v = parsed;
+          }
+          if (typeof v === 'number' && isFinite(v)) {
+            sum += v;
+          }
+        });
+      }
+      return {
+        _id: field._id,
+        name: field.name,
+        type: field.type,
+        settings: field.settings || {},
+        value: sum,
+      };
+    });
+
+    return result;
  },

  openForm(options) {
@@ -169,6 +210,12 @@ BlazeComponent.extendComponent({
      evt.stopImmediatePropagation();
      evt.preventDefault();
      Utils.goBoardId(Session.get('currentBoard'));
+    } else {
+      // Allow normal href navigation, but if it's the same card URL,
+      // we'll handle it by directly setting the session
+      evt.preventDefault();
+      const card = this.currentData();
+      Session.set('currentCard', card._id);
    }
  },

@@ -254,6 +301,22 @@ BlazeComponent.extendComponent({
  },
 }).register('listBody');

+// Helpers for listBody template context
+Template.listBody.helpers({
+  formattedCurrencyCustomFieldValue(val) {
+    // `this` is the custom field sum object from customFieldsSum each-iteration
+    const field = this || {};
+    const code = (field.settings && field.settings.currencyCode) || 'USD';
+    try {
+      const n = typeof val === 'number' ? val : parseFloat(val);
+      if (!isFinite(n)) return val;
+      return new Intl.NumberFormat(undefined, { style: 'currency', currency: code }).format(n);
+    } catch (e) {
+      return `${code} ${val}`;
+    }
+  },
+});
+
 function toggleValueInReactiveArray(reactiveValue, value) {
  const array = reactiveValue.get();
  const valueIndex = array.indexOf(value);
@@ -472,6 +535,14 @@ BlazeComponent.extendComponent({
    if (!this.selectedBoardId.get()) {
      return [];
    }
+    const board = ReactiveCache.getBoard(this.selectedBoardId.get());
+    if (!board) {
+      return [];
+    }
+
+    // Ensure default swimlane exists
+    board.getDefaultSwimline();
+
    const swimlanes = ReactiveCache.getSwimlanes(
    {
      boardId: this.selectedBoardId.get()
@@ -479,8 +550,6 @@ BlazeComponent.extendComponent({
    {
      sort: { sort: 1 },
    });
-    if (swimlanes.length)
-      this.selectedSwimlaneId.set(swimlanes[0]._id);
    return swimlanes;
  },

@@ -495,7 +564,6 @@ BlazeComponent.extendComponent({
    {
      sort: { sort: 1 },
    });
-    if (lists.length) this.selectedListId.set(lists[0]._id);
    return lists;
  },

@@ -504,19 +572,17 @@ BlazeComponent.extendComponent({
      return [];
    }
    const ownCardsIds = this.board.cards().map(card => card.getRealId());
-    const ret = ReactiveCache.getCards(
-    {
-      boardId: this.selectedBoardId.get(),
-      swimlaneId: this.selectedSwimlaneId.get(),
-      listId: this.selectedListId.get(),
+    const selector = {
      archived: false,
      linkedId: { $nin: ownCardsIds },
      _id: { $nin: ownCardsIds },
      type: { $nin: ['template-card'] },
-    },
-    {
-      sort: { sort: 1 },
-    });
+    };
+    if (this.selectedBoardId.get()) selector.boardId = this.selectedBoardId.get();
+    if (this.selectedSwimlaneId.get()) selector.swimlaneId = this.selectedSwimlaneId.get();
+    if (this.selectedListId.get()) selector.listId = this.selectedListId.get();
+
+    const ret = ReactiveCache.getCards(selector, { sort: { sort: 1 } });
    return ret;
  },

@@ -537,8 +603,12 @@ BlazeComponent.extendComponent({
    return [
      {
        'change .js-select-boards'(evt) {
-          subManager.subscribe('board', $(evt.currentTarget).val(), false);
-          this.selectedBoardId.set($(evt.currentTarget).val());
+          const val = $(evt.currentTarget).val();
+          subManager.subscribe('board', val, false);
+          // Clear selections to allow linking only board or re-choose swimlane/list
+          this.selectedSwimlaneId.set('');
+          this.selectedListId.set('');
+          this.selectedBoardId.set(val);
        },
        'change .js-select-swimlanes'(evt) {
          this.selectedSwimlaneId.set($(evt.currentTarget).val());
@@ -747,7 +817,7 @@ BlazeComponent.extendComponent({
          evt.preventDefault();
          this.term.set(evt.target.searchTerm.value);
        },
-        'click .js-minicard'(evt) {
+        async 'click .js-minicard'(evt) {
          // 0. Common
          const title = $('.js-element-title')
            .val()
@@ -765,7 +835,7 @@ BlazeComponent.extendComponent({
            if (this.isTemplateSearch) {
              element.type = 'cardType-card';
              element.linkedId = '';
-              _id = element.copy(this.boardId, this.swimlaneId, this.listId);
+              _id = await element.copy(this.boardId, this.swimlaneId, this.listId);
              // 1.B Linked card
            } else {
              _id = element.link(this.boardId, this.swimlaneId, this.listId);
@@ -777,13 +847,13 @@ BlazeComponent.extendComponent({
              .lists()
              .length;
            element.type = 'list';
-            _id = element.copy(this.boardId, this.swimlaneId);
+            _id = await element.copy(this.boardId, this.swimlaneId);
          } else if (this.isSwimlaneTemplateSearch) {
            element.sort = ReactiveCache.getBoard(this.boardId)
              .swimlanes()
              .length;
            element.type = 'swimlane';
-            _id = element.copy(this.boardId);
+            _id = await element.copy(this.boardId);
          } else if (this.isBoardTemplateSearch) {
            Meteor.call(
              'copyBoard',
@@ -7,18 +7,16 @@ template(name="listHeader")
    else
      if isMiniScreen
        if currentList
-          a.list-header-left-icon.fa.fa-angle-left.js-unselect-list
+          a.list-header-left-icon.js-unselect-list
+            i.fa.fa-caret-left
      else
        if collapsed
-          a.js-collapse(title="{{_ 'uncollapse'}}")
-            i.fa.fa-arrow-left.list-header-uncollapse-left
-            i.fa.fa-arrow-right.list-header-uncollapse-right
          if showCardsCountForList cards.length
            br
            span.cardCount {{cardsCount}}
      if isMiniScreen
        h2.list-header-name(
-          title="{{ moment modifiedAt 'LLL' }}"
+          title="{{ displayDate modifiedAt 'LLL' }}"
          class="{{#if currentUser.isBoardMember}}{{#unless currentUser.isCommentOnly}}{{#unless currentUser.isWorker}}js-open-inlined-form is-editable{{/unless}}{{/unless}}{{/if}}")
          +viewer
            = title
@@ -28,11 +26,19 @@ template(name="listHeader")
           |/#{wipLimit.value})
        if showCardsCountForList cards.length
          span.cardCount {{cardsCount}} {{cardsCountForListIsOne cards.length}}
+          if hasNumberFieldsSum
+            | &nbsp;
+            span.list-sum-badge(title="{{_ 'sum-of-number-fields'}}") ∑ {{numberFieldsSum}}
      else
+        a.list-collapse-indicator.js-collapse(title="{{_ 'collapse'}}")
+          if collapsed
+            i.fa.fa-caret-right
+          else
+            i.fa.fa-caret-down
        div(class="{{#if collapsed}}list-rotated{{/if}}")
          h2.list-header-name(
-            title="{{ moment modifiedAt 'LLL' }}"
-            class="{{#if currentUser.isBoardMember}}{{#unless currentUser.isCommentOnly}}{{#unless currentUser.isWorker}}js-open-inlined-form is-editable{{/unless}}{{/unless}}{{/if}}")
+            title="{{ displayDate modifiedAt 'LLL' }}"
+            class="{{#unless collapsed}}{{#if currentUser.isBoardMember}}{{#unless currentUser.isCommentOnly}}{{#unless currentUser.isWorker}}js-open-inlined-form is-editable{{/unless}}{{/unless}}{{/if}}{{/unless}}")
            +viewer
              = title
            if wipLimit.enabled
@@ -42,56 +48,89 @@ template(name="listHeader")
        unless collapsed
          if showCardsCountForList cards.length
            span.cardCount {{cardsCount}} {{cardsCountForListIsOne cards.length}}
+            if hasNumberFieldsSum
+              | &nbsp;
+              span.list-sum-badge(title="{{_ 'sum-of-number-fields'}}") ∑ {{numberFieldsSum}}
      if isMiniScreen
        if currentList
          if isWatching
-            i.list-header-watch-icon.fa.fa-eye
+            i.list-header-watch-icon i.fa.fa-eye
          div.list-header-menu
            unless currentUser.isCommentOnly
-              if canSeeAddCard
-                a.js-add-card.fa.fa-plus.list-header-plus-top(title="{{_ 'add-card-to-top-of-list'}}")
-              a.fa.fa-navicon.js-open-list-menu(title="{{_ 'listActionPopup-title'}}")
+              unless currentUser.isReadOnly
+                unless currentUser.isReadAssignedOnly
+                  if canSeeAddCard
+                    a.js-add-card.list-header-plus-top(title="{{_ 'add-card-to-top-of-list'}}")
+                      i.fa.fa-plus
+                  a.js-open-list-menu(title="{{_ 'listActionPopup-title'}}")
+                    i.fa.fa-bars
        else
-          a.list-header-menu-icon.fa.fa-angle-right.js-select-list
-          a.list-header-handle.handle.fa.fa-arrows.js-list-handle
+          a.list-header-menu-icon.js-select-list
+            i.fa.fa-caret-right
+          unless currentUser.isWorker
+            if isTouchScreenOrShowDesktopDragHandles
+              a.list-header-handle.handle.js-list-handle
+                i.fa.fa-arrows
      else if currentUser.isBoardMember
        if isWatching
-          i.list-header-watch-icon.fa.fa-eye
+          i.list-header-watch-icon i.fa.fa-eye
+        unless currentUser.isCommentOnly
+          unless currentUser.isReadOnly
+            unless currentUser.isReadAssignedOnly
+              if isTouchScreenOrShowDesktopDragHandles
+                a.list-header-handle-desktop.handle.js-list-handle(title="{{_ 'drag-list'}}")
+                  i.fa.fa-arrows
        unless collapsed
          div.list-header-menu
            unless currentUser.isCommentOnly
-              //if isBoardAdmin
-              //  a.fa.js-list-star.list-header-plus-top(class="fa-star{{#unless starred}}-o{{/unless}}")
-              if canSeeAddCard
-                a.js-add-card.fa.fa-plus.list-header-plus-top(title="{{_ 'add-card-to-top-of-list'}}")
-                a.js-collapse(title="{{_ 'collapse'}}")
-                  i.fa.fa-arrow-right.list-header-collapse-right
-                  i.fa.fa-arrow-left.list-header-collapse-left
-                a.fa.fa-navicon.js-open-list-menu(title="{{_ 'listActionPopup-title'}}")
-            if currentUser.isBoardAdmin
-              if isTouchScreenOrShowDesktopDragHandles
-                a.list-header-handle.handle.fa.fa-arrows.js-list-handle
+              unless currentUser.isReadOnly
+                unless currentUser.isReadAssignedOnly
+                  //if isBoardAdmin
+                  //
+                    a.fa.js-list-star.list-header-plus-top(class="fa-star{{#unless starred}}-o{{/unless}}")
+                  if isTouchScreenOrShowDesktopDragHandles
+                    a.list-header-handle-desktop.handle.js-list-handle(title="{{_ 'drag-list'}}")
+                      i.fa.fa-arrows
+                  if canSeeAddCard
+                    a.js-add-card.list-header-plus-top(title="{{_ 'add-card-to-top-of-list'}}")
+                      i.fa.fa-plus
+                  a.js-open-list-menu(title="{{_ 'listActionPopup-title'}}")
+                    i.fa.fa-bars

 template(name="editListTitleForm")
  .list-composer
    input.list-name-input.full-line(type="text" value=title autofocus)
    .edit-controls.clearfix
      button.primary.confirm(type="submit") {{_ 'save'}}
-      a.fa.fa-times-thin.js-close-inlined-form
+      a.js-close-inlined-form
+        i.fa.fa-times-thin

 template(name="listActionPopup")
-  ul.pop-over-list
-    li
-      a.js-add-card.list-header-plus-bottom
-        i.fa.fa-plus
-        i.fa.fa-arrow-down
-        | {{_ 'add-card-to-bottom-of-list'}}
-  hr
-  ul.pop-over-list
-    li
-      a.js-set-list-width
-        i.fa.fa-arrows-h
-        |  {{_ 'set-list-width'}}
+  unless currentUser.isReadOnly
+    unless currentUser.isReadAssignedOnly
+      ul.pop-over-list
+        li
+          a.js-add-card.list-header-plus-top
+            i.fa.fa-plus
+            i.fa.fa-arrow-up
+            | {{_ 'add-card-to-top-of-list'}}
+        li
+          a.js-add-card.list-header-plus-bottom
+            i.fa.fa-plus
+            i.fa.fa-arrow-down
+            | {{_ 'add-card-to-bottom-of-list'}}
+      hr
+      ul.pop-over-list
+        li
+          a.js-add-list
+            i.fa.fa-plus
+            | {{_ 'add-list'}}
+      hr
+      ul.pop-over-list
+        li
+          a.js-set-list-width
+            i.fa.fa-arrows-h
+            |  {{_ 'set-list-width'}}
  ul.pop-over-list
    li
      a.js-toggle-watch-list
@@ -102,38 +141,40 @@ template(name="listActionPopup")
          i.fa.fa-eye-slash
          |  {{_ 'watch'}}
  unless currentUser.isCommentOnly
-    unless currentUser.isWorker
-      ul.pop-over-list
-        li
-          a.js-set-color-list
-            i.fa.fa-paint-brush
-            | {{_ 'set-color-list'}}
-    ul.pop-over-list
-      if cards.length
-        li
-          a.js-select-cards
-            i.fa.fa-check-square
-            | {{_ 'list-select-cards'}}
-    if currentUser.isBoardAdmin
-      ul.pop-over-list
-        li
-          a.js-set-wip-limit
-            i.fa.fa-ban
-            | {{#if isWipLimitEnabled }}{{_ 'edit-wip-limit'}}{{else}}{{_ 'setWipLimitPopup-title'}}{{/if}}
-    unless currentUser.isWorker
-      hr
-      ul.pop-over-list
-        li
-          a.js-close-list
-            i.fa.fa-arrow-right
-            i.fa.fa-archive
-            | {{_ 'archive-list'}}
-    hr
-    ul.pop-over-list
-      li
-        a.js-more
-          i.fa.fa-link
-          | {{_ 'listMorePopup-title'}}
+    unless currentUser.isReadOnly
+      unless currentUser.isReadAssignedOnly
+        unless currentUser.isWorker
+          ul.pop-over-list
+            li
+              a.js-set-color-list
+                i.fa.fa-paint-brush
+                | {{_ 'set-color-list'}}
+        ul.pop-over-list
+          if cards.length
+            li
+              a.js-select-cards
+                i.fa.fa-select-square
+                | {{_ 'list-select-cards'}}
+        if currentUser.isBoardAdmin
+          ul.pop-over-list
+            li
+              a.js-set-wip-limit
+                i.fa.fa-ban
+                | {{#if isWipLimitEnabled }}{{_ 'edit-wip-limit'}}{{else}}{{_ 'setWipLimitPopup-title'}}{{/if}}
+        unless currentUser.isWorker
+          hr
+          ul.pop-over-list
+            li
+              a.js-close-list
+                i.fa.fa-arrow-right
+                i.fa.fa-archive
+                | {{_ 'archive-list'}}
+        hr
+        ul.pop-over-list
+          li
+            a.js-more
+              i.fa.fa-link
+              | {{_ 'listMorePopup-title'}}

 template(name="boardLists")
  ul.pop-over-list
@@ -149,13 +190,15 @@ template(name="listMorePopup")
    span.clearfix
      span {{_ 'link-list'}}
      = ' '
-      i.fa.colorful(class="{{#if board.isPublic}}fa-globe{{else}}fa-lock{{/if}}")
+      i.fa(class="{{#if currentBoard.isPublic}}fa-globe{{else}}fa-lock{{/if}}")
      input.inline-input(type="text" readonly value="{{ rootUrl }}")
    | {{_ 'added'}}
-    span.date(title=list.createdAt) {{ moment createdAt 'LLL' }}
+    span.date(title=list.createdAt) {{ displayDate createdAt 'LLL' }}
    //unless currentUser.isWorker
-    //  if currentUser.isBoardAdmin
-    //    a.js-delete {{_ 'delete'}}
+    //
+      if currentUser.isBoardAdmin
+    //
+        a.js-delete {{_ 'delete'}}

 template(name="listDeletePopup")
  p {{_ "list-delete-pop"}}
@@ -190,19 +233,19 @@ template(name="setListWidthPopup")
  #js-list-width-edit
    label {{_ 'set-list-width-value'}}
      p
-        input.list-width-value(type="number" value="{{ listWidthValue }}" min="100")
-        input.list-constraint-value(type="number" value="{{ listConstraintValue }}" min="100")
+        input.list-width-value(type="number" value="{{ listWidthValue }}" min="270")
+        input.list-constraint-value(type="number" value="{{ listConstraintValue }}" min="270")
        input.list-width-apply(type="submit" value="{{_ 'apply'}}")
        input.list-width-error
        br
        a.js-auto-width-board(
          title="{{#if isAutoWidth}}{{_ 'click-to-disable-auto-width'}}{{else}}{{_ 'click-to-enable-auto-width'}}{{/if}}")
-          i.fa(class="fa-solid fa-{{#if isAutoWidth}}compress{{else}}expand{{/if}}")
+          | {{#if isAutoWidth}}🗜️{{else}}📏{{/if}}
          span {{_ 'auto-list-width'}}

 template(name="listWidthErrorPopup")
  .list-width-invalid
-    p {{_ 'list-width-error-message'}} '&gt;=100'
+    p {{_ 'list-width-error-message'}} '&gt;=270'
    button.full.js-back-view(type="submit") {{_ 'cancel'}}

 template(name="setListColorPopup")
@@ -214,3 +257,26 @@ template(name="setListColorPopup")
          i.fa.fa-check
    button.primary.confirm.js-submit {{_ 'save'}}
    button.js-remove-color.negate.wide.right {{_ 'unset-color'}}
+
+template(name="addListPopup")
+  form.js-add-list-form
+    input.list-name-input.full-line(type="text" placeholder="{{_ 'add-list'}}" autocomplete="off" autofocus)
+    if currentSwimlaneData
+      if swimlaneLists.length
+        label {{_ 'add-after-list'}}
+        select.list-position-input.full-line
+          each swimlaneLists
+            option(value="{{_id}}" selected="{{$eq _id currentListIdValue}}") {{increment @index}} {{title}}
+    else
+      if currentBoard.lists.length
+        label {{_ 'add-after-list'}}
+        select.list-position-input.full-line
+          each currentBoard.lists
+            option(value="{{_id}}" selected="{{$eq _id currentListIdValue}}") {{increment @index}} {{title}}
+    .edit-controls.clearfix
+      button.primary.confirm.js-submit-add-list(type="submit") {{_ 'save'}}
+      unless currentBoard.isTemplatesBoard
+        unless currentBoard.isTemplateBoard
+          span.quiet
+            | {{_ 'or'}}
+            a.js-list-template {{_ 'template'}}
@@ -1,4 +1,5 @@
 import { ReactiveCache } from '/imports/reactiveCache';
+import Lists from '../../../models/lists';
 import { TAPi18n } from '/imports/i18n';
 import dragscroll from '@wekanteam/dragscroll';

@@ -21,36 +22,37 @@ BlazeComponent.extendComponent({
  isBoardAdmin() {
    return ReactiveCache.getCurrentUser().isBoardAdmin();
  },
-  starred(check = undefined) {
+  async starred(check = undefined) {
    const list = Template.currentData();
    const status = list.isStarred();
    if (check === undefined) {
      // just check
      return status;
    } else {
-      list.star(!status);
+      await list.star(!status);
      return !status;
    }
  },
  collapsed(check = undefined) {
    const list = Template.currentData();
-    const status = list.isCollapsed();
+    const status = Utils.getListCollapseState(list);
    if (check === undefined) {
      // just check
      return status;
    } else {
-      list.collapse(!status);
-      return !status;
+      const next = typeof check === 'boolean' ? check : !status;
+      Utils.setListCollapseState(list, next);
+      return next;
    }
  },
-  editTitle(event) {
+  async editTitle(event) {
    event.preventDefault();
    const newTitle = this.childComponents('inlinedForm')[0]
      .getValue()
      .trim();
    const list = this.currentData();
    if (newTitle) {
-      list.rename(newTitle.trim());
+      await list.rename(newTitle.trim());
    }
  },

@@ -142,7 +144,48 @@ BlazeComponent.extendComponent({
 Template.listHeader.helpers({
  isBoardAdmin() {
    return ReactiveCache.getCurrentUser().isBoardAdmin();
-  }
+  },
+  numberFieldsSum() {
+    const list = Template.currentData();
+    if (!list) return 0;
+    const boardId = Session.get('currentBoard');
+    const fields = ReactiveCache.getCustomFields({
+      boardIds: { $in: [boardId] },
+      showSumAtTopOfList: true,
+      type: 'number',
+    });
+    if (!fields || !fields.length) return 0;
+    const cards = ReactiveCache.getCards({ listId: list._id, archived: false });
+    let total = 0;
+    if (cards && cards.length) {
+      cards.forEach(card => {
+        const cfs = (card.customFields || []);
+        fields.forEach(field => {
+          const cf = cfs.find(f => f && f._id === field._id);
+          if (!cf || cf.value === null || cf.value === undefined) return;
+          let v = cf.value;
+          if (typeof v === 'string') {
+            const parsed = parseFloat(v.replace(',', '.'));
+            if (isNaN(parsed)) return;
+            v = parsed;
+          }
+          if (typeof v === 'number' && isFinite(v)) {
+            total += v;
+          }
+        });
+      });
+    }
+    return total;
+  },
+  hasNumberFieldsSum() {
+    const boardId = Session.get('currentBoard');
+    const fields = ReactiveCache.getCustomFields({
+      boardIds: { $in: [boardId] },
+      showSumAtTopOfList: true,
+      type: 'number',
+    });
+    return !!(fields && fields.length);
+  },
 });

 Template.listActionPopup.helpers({
@@ -161,14 +204,27 @@ Template.listActionPopup.helpers({

 Template.listActionPopup.events({
  'click .js-list-subscribe'() {},
+  'click .js-add-card.list-header-plus-top'(event) {
+    const listDom = $(`#js-list-${this._id}`)[0];
+    const listComponent = BlazeComponent.getComponentForElement(listDom);
+    if (listComponent) {
+      listComponent.openForm({
+        position: 'top',
+      });
+    }
+    Popup.back();
+  },
  'click .js-add-card.list-header-plus-bottom'(event) {
    const listDom = $(`#js-list-${this._id}`)[0];
    const listComponent = BlazeComponent.getComponentForElement(listDom);
-    listComponent.openForm({
-      position: 'bottom',
-    });
+    if (listComponent) {
+      listComponent.openForm({
+        position: 'bottom',
+      });
+    }
    Popup.back();
  },
+  'click .js-add-list': Popup.open('addList'),
  'click .js-set-list-width': Popup.open('setListWidth'),
  'click .js-set-color-list': Popup.open('setListColor'),
  'click .js-select-cards'() {
@@ -183,9 +239,9 @@ Template.listActionPopup.events({
      if (!err && ret) Popup.back();
    });
  },
-  'click .js-close-list'(event) {
+  async 'click .js-close-list'(event) {
    event.preventDefault();
-    this.archive();
+    await this.archive();
    Popup.back();
  },
  'click .js-set-wip-limit': Popup.open('setWipLimit'),
@@ -212,26 +268,26 @@ BlazeComponent.extendComponent({
    }
  },

-  enableSoftLimit() {
+  async enableSoftLimit() {
    const list = Template.currentData();

    if (
      list.getWipLimit('soft') &&
      list.getWipLimit('value') < list.cards().length
    ) {
-      list.setWipLimit(list.cards().length);
+      await list.setWipLimit(list.cards().length);
    }
    Meteor.call('enableSoftLimit', Template.currentData()._id);
  },

-  enableWipLimit() {
+  async enableWipLimit() {
    const list = Template.currentData();
    // Prevent user from using previously stored wipLimit.value if it is less than the current number of cards in the list
    if (
      !list.getWipLimit('enabled') &&
      list.getWipLimit('value') < list.cards().length
    ) {
-      list.setWipLimit(list.cards().length);
+      await list.setWipLimit(list.cards().length);
    }
    Meteor.call('enableWipLimit', list._id);
  },
@@ -325,12 +381,12 @@ BlazeComponent.extendComponent({
        'click .js-palette-color'() {
          this.currentColor.set(this.currentData().color);
        },
-        'click .js-submit'() {
-          this.currentList.setColor(this.currentColor.get());
+        async 'click .js-submit'() {
+          await this.currentList.setColor(this.currentColor.get());
          Popup.close();
        },
-        'click .js-remove-color'() {
-          this.currentList.setColor(null);
+        async 'click .js-remove-color'() {
+          await this.currentList.setColor(null);
          Popup.close();
        },
      },
@@ -356,7 +412,7 @@ BlazeComponent.extendComponent({
    );

    // FIXME(mark-i-m): where do we put constants?
-    if (width < 100 || !width || constraint < 100 || !constraint) {
+    if (width < 270 || !width || constraint < 270 || !constraint) {
      Template.instance()
        .$('.list-width-error')
        .click();
@@ -397,3 +453,108 @@ BlazeComponent.extendComponent({
    ];
  },
 }).register('setListWidthPopup');
+
+BlazeComponent.extendComponent({
+  onCreated() {
+    this.currentBoard = Utils.getCurrentBoard();
+    this.currentSwimlaneId = new ReactiveVar(null);
+    this.currentListId = new ReactiveVar(null);
+
+    // Get the swimlane context from opener
+    const openerData = Popup.getOpenerComponent()?.data();
+
+    // If opened from swimlane menu, openerData is the swimlane
+    if (openerData?.type === 'swimlane' || openerData?.type === 'template-swimlane') {
+      this.currentSwimlane = openerData;
+      this.currentSwimlaneId.set(openerData._id);
+    } else if (openerData?._id) {
+      // If opened from list menu, get swimlane from the list
+      const list = ReactiveCache.getList({ _id: openerData._id });
+      this.currentSwimlane = list?.swimlaneId ? ReactiveCache.getSwimlane({ _id: list.swimlaneId }) : null;
+      this.currentSwimlaneId.set(this.currentSwimlane?._id || null);
+      this.currentListId.set(openerData._id);
+    }
+  },
+
+  currentSwimlaneData() {
+    const swimlaneId = this.currentSwimlaneId.get();
+    return swimlaneId ? ReactiveCache.getSwimlane({ _id: swimlaneId }) : null;
+  },
+
+  currentListIdValue() {
+    return this.currentListId.get();
+  },
+
+  swimlaneLists() {
+    const swimlaneId = this.currentSwimlaneId.get();
+    if (swimlaneId) {
+      return ReactiveCache.getLists({ swimlaneId, archived: false }).sort((a, b) => a.sort - b.sort);
+    }
+    return this.currentBoard.lists;
+  },
+
+  events() {
+    return [
+      {
+        'submit .js-add-list-form'(evt) {
+          evt.preventDefault();
+
+          const titleInput = this.find('.list-name-input');
+          const title = titleInput?.value.trim();
+
+          if (!title) return;
+
+          let sortIndex = 0;
+          const boardId = Utils.getCurrentBoardId();
+          let swimlaneId = this.currentSwimlane?._id;
+
+          const positionInput = this.find('.list-position-input');
+
+          if (positionInput && positionInput.value) {
+            const positionId = positionInput.value.trim();
+            const selectedList = ReactiveCache.getList({ boardId, _id: positionId, archived: false });
+
+            if (selectedList) {
+              sortIndex = selectedList.sort + 1;
+              // Use the swimlane ID from the selected list to ensure the new list
+              // is added to the same swimlane as the selected list
+              swimlaneId = selectedList.swimlaneId;
+            } else {
+              // No specific position, add at end of swimlane
+              if (swimlaneId) {
+                const swimlaneLists = ReactiveCache.getLists({ swimlaneId, archived: false });
+                const lastSwimlaneList = swimlaneLists.sort((a, b) => b.sort - a.sort)[0];
+                sortIndex = Utils.calculateIndexData(lastSwimlaneList, null).base;
+              } else {
+                const lastList = this.currentBoard.getLastList();
+                sortIndex = Utils.calculateIndexData(lastList, null).base;
+              }
+            }
+          } else {
+            // No position input, add at end of swimlane
+            if (swimlaneId) {
+              const swimlaneLists = ReactiveCache.getLists({ swimlaneId, archived: false });
+              const lastSwimlaneList = swimlaneLists.sort((a, b) => b.sort - a.sort)[0];
+              sortIndex = Utils.calculateIndexData(lastSwimlaneList, null).base;
+            } else {
+              const lastList = this.currentBoard.getLastList();
+              sortIndex = Utils.calculateIndexData(lastList, null).base;
+            }
+          }
+
+          Lists.insert({
+            title,
+            boardId: Session.get('currentBoard'),
+            sort: sortIndex,
+            type: 'list',
+            swimlaneId: swimlaneId,
+          });
+
+          Popup.back();
+        },
+        'click .js-list-template': Popup.open('searchElement'),
+      },
+    ];
+  },
+}).register('addListPopup');
+